@charset "utf-8";

body {overflow:visible;}

.page-title {position:relative; font-weight:700; font-size:4.5rem; letter-spacing:-0.02em;}
.page-title span {position:relative; display:inline-block;}

.page-title2 {position:relative; font-weight:700; font-size:3.5rem; letter-spacing:-0.02em;}
.page-title2 span {position:relative; display:inline-block;}

.i-circle {display:block; width:100%; height:100%; border-radius:50%; border:1px solid #444; position:absolute; top:0; left:0;}
.i-circle:after {content:''; display:block; width:8px; height:8px; border-radius:100%; background-color:var(--main-color); position:absolute;right: 2em;}
.i-circle.circle_act_0 {transform:rotate(0)}
.i-circle.circle_act_45 {transform:rotate(45deg)}
.i-circle.circle_act_90 {transform:rotate(90deg)}

.i-circle2 {display:block; width:100%; height:100%; border-radius:50%; border:1px solid #8b8b8b; position:absolute; top:0; left:0;backdrop-filter: blur(3px); background:rgba(0,0,0,0.5);}


.page-tt {width:100%; height:auto; text-align:center;}
.page-tt h3 {font-weight:500; font-size:4.5rem; letter-spacing:-0.02em; margin-bottom:3rem;}
.breadcrum {width:inherit; height:inherit; font-size:1rem; letter-spacing:0;}
.breadcrum .i-home, .breadcrum span, .breadcrum a {display:inline-block; vertical-align:middle;}
.breadcrum .i-home {margin-right:.5rem;}
.breadcrum span {width:4px; height:4px; border-radius:4px; background-color:#d7d7d7; font-size:0;}
.breadcrum span:nth-child(4):before {content:''; display:inline-block; width:4px; height:4px; border-radius:4px; background-color:#d7d7d7; margin-left:12px;}
.breadcrum a {margin:0 .5rem;}
.breadcrum .next-page {margin-left:1.2rem; font-weight:500; color:var(--main-color);}

#sub-main {width:100%; height:100vh; background-repeat:no-repeat; background-position:center; background-size:cover; position:relative; z-index:1; display:flex; align-items:center; text-align:center; color:#fff; overflow:hidden;}
#sub-main:before, #sub-main:after {content:''; display:block; background:rgba(0,0,0,.3); position:absolute; top:0;}
#sub-main:before {width:50%; height:100%; left:0; margin-left:-50%; animation:vsRotate1 1s;}
#sub-main:after {width:80%; height:100%; left:50%; margin-left:100%; animation:vsRotate2 3s;}
#sub-main .inner {width:100%; height:auto;}
#sub-main .inner span {display:block; font-size:1.125rem; letter-spacing:.15em;}
#sub-main .inner span.icon-box {display: block;position: relative;	}
#sub-main .inner .hover_act  em {display: block; margin-top:1em;}
#sub-main .inner span.aos-animate {opacity:.5;}
#sub-main .inner h3 {margin:1rem 0 3rem; font-weight:700; font-size:5.375rem;}
#sub-main .inner p {font-weight:300; font-size:1.25rem; line-height:1.6; white-space:pre-line;}
#sub-main .inner nav {width:100%; height:auto; position:absolute; bottom:9.6rem; left:0; font-weight:500; letter-spacing:0;}
#sub-main .inner nav a {display:inline-block; width:8rem; height:100%; margin:0 1rem; font-weight: 300; text-transform:uppercase; position:relative;    white-space: nowrap;}
#sub-main .inner nav a i {opacity:0; width:8rem; height:8rem;border-width:1px; border-color:rgba(255,255,255,1); position:relative; display:flex; justify-content:center; transition:opacity .3s;background: rgb(255 255 255 / 100%);   box-shadow: 0px 8px 10px 0px rgb(0 0 0 / 42%); }
/* #sub-main .inner nav a i:after {top:0; left:50%; transform:translate3d(-50%,-50%,0); display:none;} */
#sub-main .inner nav a svg {width:6rem !important; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);     z-index: 1;}
#sub-main .inner nav a:hover {color:#fff !important; font-weight:600; }
#sub-main .inner nav a:hover i {opacity:1; }
#sub-main .inner nav a:hover i:after {display:block}
#sub-main .inner nav a:hover svg  {stroke:var(--main-color); stroke-width:3;z-index:3;}
/* #sub-main canvas {position:absolute; top:0; left:0; z-index:-1; display: none;	} */
#sub-main.story {background-image:url("../image/about/bg_story.jpg");}
#sub-main.company {background-image:url("../image/about/bg_company.jpg");}
#sub-main.company .inner p {padding-bottom:8rem;}
#sub-main.product {background-image:url("../image/product/bg_prd.jpg");}
#sub-main.product .inner p {padding-bottom:10rem;}
#sub-main.product .inner nav a {margin:0 2rem;}

#sub-main.product-b2b {background-image:url("../image/product/bg_prd2.jpg");}
#sub-main.product-b2b .inner p {padding-bottom:10rem;}
#sub-main.product-b2b .inner nav a {margin:0 2rem;}


#sub-main.product-b2c {background-image:url("../image/product/bg_prd3.jpg");}
#sub-main.product-b2c .inner p {padding-bottom:10rem;}
#sub-main.product-b2c .inner nav a {margin:0 2rem;}



@media screen and (max-width: 926px) {
	.page-title,  .page-tt h3 {font-size:2rem;}
	.page-title2 {font-size:1.8rem;}
	#sub-main {height:100vh;display: inline-block;}
	#sub-main:before, #sub-main:after {display:none;}
	#sub-main .inner {padding:0 1.125rem; display:flex; flex-direction: column; height:90vh; justify-content: center; }
	#sub-main .inner span {font-size:1rem;}
	#sub-main .inner h3 {margin:1rem 0 2rem; font-size:2.5rem;}
	#sub-main .inner p {font-weight:400; font-size:1rem; }
	#sub-main .inner nav { bottom: initial; position: relative;display:flex;flex-wrap: wrap;justify-content: center;  margin-top:12vh}
	#sub-main .inner nav a {margin:0em 0 1em !important;}
	#sub-main .inner nav a svg {width: 4rem !important; top:0; transform: translate(-50%, -100%);}

	#sub-main .inner nav a i {display: none;}
	#sub-main.story {background-position:30% 50%;}
	#sub-main.company .inner p, #sub-main.product .inner p {padding-bottom:0;}
	#sub-main.product-b2b .inner p {padding-bottom:0;}
	#sub-main.product-b2c .inner p {padding-bottom:0;}
}
@media screen and (max-width: 568px) and (orientation:portrait) {
	#sub-main .inner p {white-space:normal;}
}

.story-wrap .swiper-page span {width:10.625rem; left:-10.625rem;}
.story-wrap .tt-box {width:72rem; height:auto; padding:8rem 0; margin:0 auto;}
.story-wrap .tt-box .page-title {margin-bottom:3rem;}
.story-wrap .tt-box h4 {font-weight:500; font-size:1.625rem;}
.story-wrap .tt-box p {margin-top:1.5rem; font-weight:300; font-size:1.25rem; line-height:1.6; white-space:pre-line; color:#797979;}
.story-wrap .bg {width:100%; height:55vh; background-repeat:no-repeat; background-position:top center; background-size:cover;}

#simulation {position:relative;}
#simulation .bg {position:sticky; position:-webkit-sticky; top:0; width:100%; height:0vh !important;}
#simulation img {max-width:100%;}
#simulation .simul-wrap {position:sticky; position:-webkit-sticky; top:0; overflow:hidden;}
#simulation .simul-wrap .simul-1 {border-bottom:1px solid #d7d7d7;}
#simulation .simul-wrap .simul-1 ul {width:100%; height:auto; margin-top:4.5rem; display:flex; justify-content:space-around;}
#simulation .simul-wrap .simul-1 ul li {position:relative; width:33.33%; max-width:20rem; height:20rem; padding-top:4rem; text-align:center;}
#simulation .simul-wrap .simul-1 ul li .i-circle:after {top:50%; left:0; transform:translate3d(-50%,-50%,0);}
#simulation .simul-wrap .simul-2 {border-bottom:1px solid #d7d7d7;}
#simulation .simul-wrap .simul-2 div[class^="line"] {width:100%; height:auto; text-align:center;}
#simulation .simul-wrap .simul-2 div[class^="line"]:before, #simulation .simul-wrap .simul-2 div[class^="line"]:after {content:''; display:block; background-color:#111; position:absolute;}
#simulation .simul-wrap .simul-2 div[class^="line"]:before {top:0; left:0;}
#simulation .simul-wrap .simul-2 div[class^="line"]:after {bottom:0; right:0;}
#simulation .simul-wrap .simul-2 .line-1 {padding:4.5rem 0 1.5rem; margin-top:4.5rem; position:relative;}
#simulation .simul-wrap .simul-2 .line-1:before, #simulation .simul-wrap .simul-2 .line-1:after {width:90%; height:1px;}
#simulation .simul-wrap .simul-2 .line-2:before, #simulation .simul-wrap .simul-2 .line-2:after {width:1px; height:80%;}
#simulation .simul-wrap .simul-2 .i-circle {width:auto; height:auto; border:0; position:static;}
#simulation .simul-wrap .simul-2 .i-circle.left:after {top:-4px; left:-4px;}
#simulation .simul-wrap .simul-2 .i-circle.right:after {top:-4px; right:-4px;}
#simulation .simul-wrap .simul-2 .i-circle.square_act_left {position:absolute; left:0; top:80%; z-index:9 }
#simulation .simul-wrap .simul-2 .i-circle.square_act_right {position:absolute; right:0; top:20%; z-index:9 }
#simulation .simul-wrap .simul-3 {}
#simulation .simul-wrap .simul-3 .picture {margin-top:4.5rem;}


#life {background:url("../image/about/bg_story5.jpg") center / cover no-repeat; color:#fff; text-align:center; overflow:hidden;}
#life ol {width:100%; height:auto; margin-top:4.5rem; display:flex; flex-wrap:wrap; justify-content:space-around;}
#life ol li {position:relative; width:33.33%; max-width:20rem; height:20rem;}
#life ol li .box {width:100%; height:100%; display:flex; justify-content:center; flex-direction:column;position: relative;
    z-index: 2;}
#life ol li .box h4 {font-size:2em;}
#life ol li .box svg {fill:var(--main-color); margin:14px auto;}
#life ol li .box span {display:block; white-space:pre-line; font-weight:300; line-height:1.4;}
#life ol li .i-circle {border-color:rgba(255,255,255,.75);}
#life ol li .i-circle:after {top:50%; left:0; transform:translate3d(-50%,-50%,0);}

#philosophy .page-title span:nth-last-child(n+11), #skills .page-title span:nth-last-child(n+7), #simulation .page-title span:nth-last-child(n+11) {font-weight:100;}
#philosophy .bg {background-image:url("../image/about/bg_story2.jpg");}
#skills .bg {background-image:url("../image/about/bg_story3.jpg");}
#simulation .bg {background-image:url("../image/about/bg_story4.jpg");}
#simulation .bg-1 {background-image:url("../image/about/bg_story4.jpg");}

@media screen and (max-width: 1194px) {
	.story-wrap .tt-box {width:100%; padding:8rem 2rem;}
}
@media screen and (max-width: 926px) {
	.story-wrap .tt-box {padding:6rem 1.25rem}
	.story-wrap .tt-box h4 {font-size:1.4rem; line-height:1.3;}
	.story-wrap .tt-box p {font-size:1rem; white-space:normal;}
	.story-wrap .bg {height:200px;}

	#simulation .simul-wrap .simul-1 ul {width:95%; margin:4.5rem auto 0; flex-wrap:wrap;}
	#simulation .simul-wrap .simul-1 ul li {width:48%; max-width:16rem; height:16rem;}
	#simulation .simul-wrap .simul-1 ul li img {width:60%;}
	#simulation .simul-wrap .simul-2 .line-1 {padding:2rem .75rem 1.5rem; margin-top:2rem;}
	#simulation .simul-wrap .simul-3 .picture {margin-top:2rem;}

	#life ol li {width:48%; max-width:16rem; height:16rem;}
}
@media screen and (max-width: 568px) {
	#simulation .simul-wrap .simul-1 ul li {max-width:10rem; height:10rem; padding-top:3rem;}

	#life ol {flex-direction:column;}
	#life ol li {width:100%; margin:0 auto;}
	#life ol li:nth-child(2) {margin:1rem auto;}
}

.company-wrap {}
.company-wrap .swiper-page span {width:20.625rem; left:-20.625rem;}
.company-wrap .sec-page {}
.company-wrap .sec-page h3 {font-weight:500; font-size:3.5rem; letter-spacing:-0.02em; text-align:center;}
.company-wrap .sec-page h3 span {display:block; font-size:1.25rem; padding-top:.75rem;}
#location, #partners {height:100vh; display:flex; flex-wrap:wrap; flex-direction:column; justify-content:center; align-content:center;}

#oh-wrap {padding:8rem 0;}
#oh-wrap .inner {width:100%; max-width:1280px; height:auto; margin:0 auto; display:flex; flex-wrap:wrap; overflow:hidden;}
#oh-wrap .inner h3 {text-align:left;}
#oh-wrap .inner > div {width:50%;}

#oh-wrap .overview {padding-right:4rem;}
#oh-wrap .overview h4 {font-weight:500; font-size:1.625em; color:#111;}
#oh-wrap .overview > ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:1rem;}
#oh-wrap .overview > ul > li {width:45%; margin-top:2rem; color:#797979; line-height:1.3;}
#oh-wrap .overview > ul > li > h4 {margin-bottom:.5rem;}
#oh-wrap .overview > ul > li > ul {}
#oh-wrap .overview > ul > li > ul > li:not(:nth-child(1)) {margin-top:8px;}
#oh-wrap .overview > ul > li > ul > li:before {content:''; display:inline-block; vertical-align:middle; width:4px; height:4px; margin:-4px 8px 0 0; border-radius:4px; background-color:#111;}

#oh-wrap .overview .value {margin-top:4rem;}
#oh-wrap .overview .value .value-slide {width:100%; height:17.375em; margin-top:1.25rem; position:relative;background-color:#000;}
#oh-wrap .overview .value .value-slide .slick-slide {height:17.375em; background-repeat:no-repeat; background-position:center; background-size:cover;}
#oh-wrap .overview .value .value-slide .slick-slide em {display:block; position:absolute; bottom:2rem; left:2rem; color:#fff; font-weight:700; font-size:1.5rem;}
#oh-wrap .overview .value .value-slide .value-1 {background-image:url("../image/about/bg_value1.jpg");}
#oh-wrap .overview .value .value-slide .value-2 {background-image:url("../image/about/bg_value2.jpg");}
#oh-wrap .overview .value .value-slide .value-3 {background-image:url("../image/about/bg_value3.jpg");}
#oh-wrap .overview .value .slick-dots {position:absolute; bottom:5rem; left:2rem; font-weight:700; font-size:2rem;}
#oh-wrap .overview .value .slick-dots li {display:inline-block; width:6rem; margin-right:1px; color:#fff; position:relative; opacity:.5;}
#oh-wrap .overview .value .slick-dots li:after {content:''; display:block; width:100%; height:1px; background-color:currentColor; position:absolute; bottom:0; left:0; transition:height .3s;}
#oh-wrap .overview .value .slick-dots li button {display:block; width:100%; padding-bottom:1rem; text-align:left; outline:none;}
#oh-wrap .overview .value .slick-dots .slick-active {opacity:1;}
#oh-wrap .overview .value .slick-dots .slick-active:after {height:4px;}

#oh-wrap .history {padding-left:4rem;}
#oh-wrap .history ul {width:100%; height:auto; margin-top:3rem;}
#oh-wrap .history ul li {display:flex; color:#797979;}
#oh-wrap .history ul li mark {font-weight:500; font-size:1.625em; font-family:'SHSN'; color:#666;}
#oh-wrap .history ul li i {display:block; width:4rem; height:1px; margin:.875rem 1rem; background-color:currentColor; color:#d7d7d7; position:relative;}
#oh-wrap .history ul li i:after {content:''; display:block; width:8px; height:8px; border-radius:8px; background-color:currentColor; position:absolute; top:-4px; right:0;}
#oh-wrap .history ul li span {display:block; width:calc(100% - 10.25rem); line-height:1.4;}
#oh-wrap .history ul li:not(:nth-child(1)) {margin-top:1.64rem;}
#oh-wrap .history ul li:nth-child(-n+5) mark {color:#111;}
#oh-wrap .history ul li:nth-child(1) mark, #oh-wrap .history ul li:nth-child(1) i {color:var(--main-color);}
#oh-wrap .history ul li:nth-child(1) span {color:#111;}
#oh-wrap .history ul li:nth-last-child(2) {padding-bottom:5rem; position:relative;}
#oh-wrap .history ul li:nth-last-child(2):after {content:''; display:block; width:4px; height:57px; background:url("../image/about/ico_circle_dot.svg") 0 0 no-repeat; position:absolute; top:3.3rem; left:1.75rem;}
#oh-wrap .history ul li:last-child mark {color:#a6a6a6;}

#ceo {position:relative; padding:8rem 0;}
#ceo:after {content:''; display:block; width:70%; height:73%; background-color:#f1f1f1; position:absolute; bottom:0; left:0; z-index:-1;}
#ceo .inner {width:100%; max-width:1280px; height:auto; margin:0 auto; display:flex; flex-wrap:wrap; overflow:hidden;}

#ceo .inner .tt-box {width:55%;}
#ceo .inner .tt-box h3 {text-align:left; font-size:3rem;}
#ceo .inner .tt-box h4 {font-weight:500; font-size:2rem; white-space:pre-line; padding:4rem 0 1rem; line-height:1.2;}
#ceo .inner .tt-box p {white-space:pre-line; color:#797979; margin-top:2rem; line-height:1.5;}
#ceo .inner .tt-box .m-photo {display:none; max-width:568px; height:auto; padding-bottom:65%; margin:0 auto; border:.625rem solid #fff; overflow:hidden; position:relative;}
#ceo .inner .tt-box .m-photo img {width:100%; position:absolute; top:-2rem; left:0;}

#ceo .inner .photo {width:45%; height:73%; position:relative;}
#ceo .inner .photo p {border:.625rem solid #fff; line-height:0;}
#ceo .inner .photo p img {max-width:100%;}
#ceo .inner .photo mark {display:block; width:100%; font-size:1.5rem; color:#fff; text-align:right; position:absolute; bottom:2rem; right:2rem;}

#certificate {width:100%; padding:8rem 0;}
#certificate .inner {width:100%; max-width:1280px; height:auto; margin:1rem auto 0; display:flex; flex-wrap:wrap;}
#certificate .inner li {width:17.96875%; margin-top:1.875rem;}
#certificate .inner li img {max-width:100%; border:1px solid #d7d7d7;}
#certificate .inner li:nth-child(5n+2),
#certificate .inner li:nth-child(5n+4) {margin:1.875rem 2.54% 0;}
#certificate #show {width: 100%; max-width: 1280px; margin: 0 auto; text-align: center; display: flex; justify-content: center; background: #f5f5f5; padding: 20px 0;
    margin-top: 50px;  border: 1px solid #ddd;transition: all 0.5s;}


#location .mo-loca-info  {display: none;}
#location .inner {width:100%; max-width:1280px; height:auto; margin-top:4rem; display:flex;}
#location .mo-scroll {order:2; width:30rem; border:1px solid #d7d7d7; border-left:none; position:relative;}
#location .mo-scroll > ul {}
#location .mo-scroll > ul > li {padding:1.5rem; transition:all .3s ease;}
#location .mo-scroll > ul > li:not(:last-child) {border-bottom:1px solid #d7d7d7;}
#location .mo-scroll > ul > li > button {font-weight:500; font-size:1.25rem;}
#location .mo-scroll > ul > li > ul {font-size:.938rem; color:#797979; padding-top:8px;}
#location .mo-scroll > ul > li > ul li {margin-top:8px; display:flex;}
#location .mo-scroll > ul > li > ul li i {display:block; width:20px; height:20px; margin-right:8px; background:url("../image/about/ico_call.svg") no-repeat; font-size:0;}
#location .mo-scroll > ul > li > ul li:nth-child(2) i {background:url("../image/about/ico_fax.svg") no-repeat;}
#location .mo-scroll > ul > li > ul li:nth-child(3) i {background:url("../image/about/ico_map_pin.svg") no-repeat;}
#location .mo-scroll > ul > li > ul li a {display:inline-block;}
#location .mo-scroll > ul > li > ul li span {display:block; width:calc(100% - 20px)}
#location .mo-scroll > ul > li.active {padding-left:2.5rem; border-left:4px solid var(--main-color);}
#location .mo-scroll > ul > li.active button {color:var(--main-color);}
#location .mo-scroll .m-scroll-down {display:none;    width: 45px;  height: 45px; padding: 1rem; text-align: center; text-transform: uppercase;
    border: 1px solid #d7d7d7;
    background-color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: 0;
    position: sticky;
    bottom:0;
    left: 45%;
    transform: translate(-50%, -50%); 	
	animation: bounce .5s infinite alternate; }
	@keyframes bounce {
  from {
	transform: translateY(-5px);
  }
  to {
     transform: translateY(-15px);
  }
}
#location .mo-scroll .m-scroll-down .i-arrow {display:inline-block; vertical-align:middle; margin-top:-1px;}
#location .inner .tab-cont {order:1; width:calc(100% - 30rem); border:1px solid #d7d7d7;}

#partners ul {width:100%; max-width:1280px; height:auto; margin-top:2rem; text-align:center;}
#partners ul li {display:inline-block; width:30.33%; margin-top:2rem;}
#partners ul li figure {}
#partners ul li figure img {max-width:100%; border:1px solid #ebebeb;}
#partners ul li figure figcaption {padding-top:1rem; font-size:1.25rem;}

@media screen and (max-width: 1366px) {
	#oh-wrap .inner, #certificate .inner, #location .inner {max-width:100%; padding:0 2rem;}

	#ceo {padding:8rem 2rem;}
	#ceo .inner .tt-box {width:60%; padding-right:4rem;}
	#ceo .inner .tt-box p {white-space:normal;}
	#ceo .inner .photo {width:40%;}
}
@media screen and (max-width: 926px) {
	.company-wrap .sec-page h3 {font-size:2.25rem;}
	.company-wrap .sec-page h3 span {font-size:1rem;}
	#location, #partners {height:auto; padding:6rem 0;}
	#oh-wrap .inner, #certificate .inner, #location .inner {padding:0 1.25rem;}

	#oh-wrap {padding:6rem 0; border-bottom:1px solid #eee}
	#oh-wrap .inner {flex-direction:column;}
	#oh-wrap .inner > div {width:100%;}
	#oh-wrap .overview {padding-right:0;}
	#oh-wrap .overview h4 {font-size:1.25rem;}
	#oh-wrap .overview .value .slick-dots {font-size:1.5rem;}
	#oh-wrap .history {padding-left:0; padding-top:4rem;}

	#ceo {padding:6rem 1.25rem;}
	#ceo:after {width:100%;}
	#ceo .inner {display:block;}
	#ceo .inner .tt-box {width:100%; padding-right:0}
	#ceo .inner .tt-box h3 {font-size:2rem; text-align:center;}
	#ceo .inner .tt-box h4 {font-size:1.4rem; padding:2rem 0 1rem; text-align:center;}
	#ceo .inner .tt-box .m-photo {display:block;}
	#ceo .inner .photo {width:100%;}
	#ceo .inner .photo p {display:none;}
	#ceo .inner .photo mark {margin-top:1rem; font-weight:500; font-size:1.25rem; color:#111; position:static;}

	#certificate {padding:6rem 0 0;}
	#certificate .inner {justify-content:space-between;}
	#certificate .inner li {width:23%;}
	#certificate .inner li:nth-child(5n+2), #certificate .inner li:nth-child(5n+4) {margin:1.875rem 0 0;}

	#location .inner {margin-top:3rem; flex-direction:column; border:0;}
	#location .mo-scroll {order:1; width:100%; height:21rem; border-left:1px solid #d7d7d7; overflow-y:auto;}
	#location .mo-scroll > ul > li {width: 25%; text-align: center;}
	#location .mo-scroll > ul > li > button {font-size:1.15rem;}
	#location .mo-scroll .m-scroll-down {display:none; }
	#location .mo-scroll > ul > li:not(:last-child) {border-bottom:0;}
	#location .mo-scroll > ul > li.active {padding-left:1.5rem; border-left:0;position: relative;}
	#location .mo-scroll > ul > li.active::before {content:''; width:100%; height:2px; background: var(--main-color); position: absolute; left:0; bottom:0;}
	#location .mo-scroll {height: auto;}
	#location .mo-scroll > ul {display:flex;}
	#location .mo-scroll > ul > li > ul {display: none;}


	#location .mo-loca-info  {display: block;}
	#location .mo-loca-info > ul {margin-bottom:1rem;}
	#location .mo-loca-info > ul > li > ul {font-size:.938rem; color:#797979; padding-top:8px;}
	#location .mo-loca-info > ul > li  {margin-top:8px; display:flex;}
	#location .mo-loca-info > ul > li i {display:block; width:20px; height:20px; margin-right:8px; background:url("../image/about/ico_call.svg") no-repeat; font-size:0;}
	#location .mo-loca-info > ul > li:nth-child(2) i {background:url("../image/about/ico_fax.svg") no-repeat;}
	#location .mo-loca-info > ul > li:nth-child(3) i {background:url("../image/about/ico_map_pin.svg") no-repeat;}
	



	#location .inner .tab-cont {order:2; width:100%; height:20rem;margin-top: 2em; border:none;}
	#location .inner .tab-cont iframe {border:1px solid #ddd !important;}

	#partners ul {padding:0 1.125rem; margin-top:1rem;}
	#partners ul li {width:49%;}
	#partners ul li figure figcaption {font-size:1rem;}
}
@media screen and (max-width: 568px) {
	#ceo .inner .tt-box .m-photo {width:100%; padding-bottom:80%;}
	#certificate .inner li {width:49%;}
	#certificate #show {width: 90%;}

	#location .mo-scroll > ul {flex-direction: column;}
	#location .mo-scroll > ul > li{width: 100%;}
	#location .mo-scroll > ul > li:not(:last-child) {border-bottom:1px dashed #ddd;}

}

.prd-lst-wrap {width:100%; height:auto; max-width:1280px; padding:8rem 0 2rem; margin:0 auto; text-align:center;}
.prd-lst-wrap h3 {font-weight:500; font-size:3.5rem;}
.prd-lst-wrap h3 span {display:block; font-size:1.25rem; margin-bottom:1rem;}

.prd-lst-wrap .prd-category {width:100%; height:auto; margin:4rem auto; position:relative;}
.prd-lst-wrap .prd-category p {display:none; width:100%; height:auto; position:relative;}
.prd-lst-wrap .prd-category p a {display:block; width:100%; height:auto; padding:1rem; border-radius:50px; background-color:var(--main-color); color:#fff !important; font-weight:500;}
.prd-lst-wrap .prd-category p a .i-arrow {position:absolute; top:50%; right:1.25rem; transform:translateY(-50%);}
.prd-lst-wrap .prd-category .cate-lst {width:100%; height:auto;}
.prd-lst-wrap .prd-category .cate-lst li {display:inline-block; margin:0 .75rem;}
.prd-lst-wrap .prd-category .cate-lst li a {display:block; width:12.5rem; padding:1rem; border-radius:50px; border:1px solid #d7d7d7; color:#797979;}
.prd-lst-wrap .prd-category .cate-lst li a:hover {border-color:var(--main-color);}
.prd-lst-wrap .prd-category .cate-lst li .current {border-color:var(--main-color); background-color:var(--main-color); color:#fff !important; font-weight:500;}

.prd-lst {width:100%; height:auto; display:flex; flex-wrap:wrap;}
.prd-lst .prd-item {width:31.25%; margin-bottom:8rem; position:relative; overflow:hidden;}
.prd-lst .prd-item:nth-child(3n + 2) {margin-right:3.1%; margin-left:3.1%;}
.prd-lst .prd-item .video {width:100%; height:18.75rem; line-height:0; background-color:#383838; position:relative; display:flex;}
.prd-lst .prd-item .video video {width:100%; height:auto;}
.prd-lst .prd-item .video .icon-play {position:absolute; top:1rem; left:1rem; fill:#fff;}

.prd-lst .prd-item .gp-spec {padding:2rem; text-align:left; font-size:.875rem; letter-spacing:0;}
.prd-lst .prd-item .gp-spec li {padding:1rem 0;}
.prd-lst .prd-item .gp-spec li:not(:last-child) {border-bottom:1px solid #ebebeb;}
.prd-lst .prd-item .gp-spec li mark {display:inline-block; vertical-align:top; width:7.5rem; font-weight:500; text-transform:uppercase;}
.prd-lst .prd-item .gp-spec li span {display:inline-block; vertical-align:top; color:#797979; line-height:1.3;font-family:'dotum'; font-size:12px;}
.prd-lst .prd-item .gp-spec li:nth-child(1) mark {display:block; margin-bottom:.5rem;}
.prd-lst .prd-item .gp-spec li:nth-child(1) span {}

.prd-lst .prd-item .bt-spec {display:block; width:100%; height:4rem; line-height:4rem; padding:0 1.5rem; text-align:right; text-transform:uppercase; font-weight:600; font-size:1rem;}
.prd-lst .prd-item .bt-spec .i-arrow {display:inline-block; vertical-align:middle; margin-left:4px;}

.prd-lst .prd-item .spec {padding-top:3rem; border:1px solid #ebebeb; border-top:0; position:relative;}
.prd-lst .prd-item .spec h4 {font-size:1.5rem; letter-spacing:0;}
.prd-lst .prd-item .spec h4:before {content:''; display:block; width:4px; height:2rem; background-color:var(--main-color); position:absolute; top:-1rem; left:50%;}
.prd-lst .prd-item .spec .gp-spec {padding:0 2rem 1rem; margin-top:2rem;}
.prd-lst .prd-item .spec .gp-spec li:nth-child(1) {border-top:1px solid #ebebeb;}
.prd-lst .prd-item .spec .gp-spec li:nth-child(1) span {width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.prd-lst .prd-item .spec .bt-spec {background-color:#fafafa; border-top:1px solid #ebebeb; color:var(--main-color);}
.prd-lst .prd-item .spec .bt-spec .i-arrow {transform:rotate(-180deg); margin-top:-4px}

.prd-lst .prd-item .more-spec {width:100%; height:100%; position:absolute; top:100%; left:0; opacity:0; background-color:rgba(24,24,24,9.5);}
.prd-lst .prd-item .more-spec .gp-spec {width:100%; height:100%; overflow-y:auto;}
.prd-lst .prd-item .more-spec li mark {color:#fff;}
.prd-lst .prd-item .more-spec li:not(:last-child) {border-bottom-color:rgba(255,255,255,.1);}
.prd-lst .prd-item .more-spec li:nth-child(1) {padding-top:0;}
.prd-lst .prd-item .more-spec .bt-spec {color:#fff; position:absolute; bottom:0; left:0; background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(24,24,24,1) 100%); background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(24,24,24,1) 100%); background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(24,24,24,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#181818',GradientType=0 );}

@media screen and (max-width: 1366px) {
	.prd-lst-wrap {padding:8rem 2rem;}
	.prd-lst .prd-item .video {height:19.1rem;}
}
@media screen and (max-width: 1024px) {
	.prd-lst .prd-item .video {height:14.188rem;}
}
@media screen and (max-width: 926px) {
	.prd-lst-wrap {padding:6rem 1.25rem;}
	.prd-lst-wrap h3 {font-size:2.5rem;}
	.prd-lst-wrap .prd-category {width:16rem;}
	.prd-lst-wrap .prd-category p {display:block;}
	.prd-lst-wrap .prd-category .cate-lst {display:none; padding:1rem 0; background-color:#fff; box-shadow:0 0 1rem rgba(0,0,0,.1); border-radius:20px; position:absolute; top:3.5rem; left:0; z-index:2; overflow:hidden;}
	.prd-lst-wrap .prd-category .cate-lst li {display:block; margin:0;}
	.prd-lst-wrap .prd-category .cate-lst li a {width:100%; border-radius:0; border:0;}
	.prd-lst-wrap .prd-category .cate-lst li .current {background-color:#fff; color:var(--main-color) !important;}

	.prd-lst .prd-item {width:48%; margin-bottom:4rem;}
	.prd-lst .prd-item:nth-child(3n + 2) {margin-right:0; margin-left:0;}
	.prd-lst .prd-item:nth-child(2n + 2) {margin-left:4%;}
	.prd-lst .prd-item .video {height:20rem;}
}
@media screen and (max-width: 568px) {
	.prd-lst .prd-item {width:100%; margin-bottom:2rem;}
	.prd-lst .prd-item:nth-child(2n + 2) {margin-left:0;}
	.prd-lst .prd-item .video {height:auto;}
}

/* saver - 21년 1월 중순 이후 작업 예정 */

/* effect */

@keyframes vsRotate1 { 0% { margin-left:0;  } 100% { margin-left:-50%; } } 
@keyframes vsRotate2 { 0% { margin-left:0;  } 100% { margin-left:100%; } }




/* contact */
#contact {position: relative; margin:5rem; margin-top:0; display:flex;flex-wrap: wrap;}
#contact .contact_box {flex-basis: 50%; }
#contact .contact_box .content-inner {border:1px solid #d7d7d7; margin:1rem; padding:3rem; }
#contact .contact_box h3 {border-bottom:1px dashed #ccc; padding:0 0 1rem;font-size: 1.5rem;font-weight: 500; color:#333;}
#contact .contact_box .call-box {margin-top:30px;min-height:5rem;}
#contact .contact_box .call-box ul li { margin:0.5rem 0;display: flex; align-items: center;}
#contact .contact_box .call-box ul li svg {width:20px; height:20px;}
#contact .contact_box .call-box ul li span { margin-left:10px;}
#contact .contact_box .call-box ul li p {display: inline-block;margin-left:auto;}

#contact .contact_box:hover  .content-inner {border:1px solid  var(--main-color);}
#contact .contact_box:hover   h3 {color:var(--main-color);}

@media screen and (max-width: 1024px) { 
	#contact {margin:0; margin-bottom:5rem;}
}

@media screen and (max-width: 768px) { 
	#contact {flex-direction: column;}
	#contact .contact_box .call-box {min-height:auto;}
}
@media screen and (max-width: 568px) { 
	#contact .contact_box .content-inner {padding:2rem;}
	#contact .contact_box .call-box {margin-top:1rem;}
}