body.ready { overflow:hidden; visibility:hidden; }



/********** 메인 비주얼 **********/

.main_section { position:relative; height:calc(100vh - 90px); margin-top:90px; overflow:hidden; }

#main1 { background:url('/images/main1.jpg') no-repeat center/cover; }
#main2 { background:url('/images/main2.jpg') no-repeat center/cover; }
.video_wrap {
    position: absolute;
    top: 0;
	left:0;
    width: 100%;
    height: 100%;
    z-index:-1;
	overflow: hidden;
}

.video {
   width:100vw;
   height: 56.40vw;
   min-height: 100vh;
   min-width: 220vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


.main_txt { display:table; width:100%; height:100%; }
.main_txt > div { display:table-cell; vertical-align:middle; text-align:center; padding-bottom:5%; }
.main_txt p { color:#fff; text-align:center; padding:0 10px; opacity:0; transition:opacity .8s ease .8s; }

.mtxt_bold { font-weight:800; font-size:82px; font-family:'Montserrat'; line-height:110%; letter-spacing:0; }
.mtxt_detail { font-weight:500; font-size:23px; line-height:150%; }
.mtxt_detail br { display:none; }

.eng .mtxt_detail { line-height:140%; }

.ani .main_section.slick-active .mtxt_bold { opacity: 1; }
.ani .main_section.slick-active .mtxt_detail { transition-delay: 1.5s; opacity: 1; }

#mouse_wheel { position:absolute; width:60px; bottom:50px; left:50%; margin-left:-30px; z-index:10; cursor:pointer; }
#mouse_wheel div { width:24px; margin: 0 auto; height:38px; border:2px solid #fff; border-radius:12px; position:relative; }
#mouse_wheel div i { position:absolute; width:2px; height:6px; left:calc(50% - 1px); top:4px; background:#fff; border-radius:1px; margin-top:1px; animation-name: mouse; animation-duration: 1s; animation-iteration-count: infinite; }
#mouse_wheel p { text-align:center; color:#fff; font-size:11px; font-weight:500; }

@keyframes mouse{ 50% { top:9px; } }


@media (max-width:1660px) {
	.mtxt_bold { font-size:calc(14px + 4vw); }
	.mtxt_detail { font-size:calc(11px + 0.6vw); }
}
@media (max-width:1500px) {
	.main_section { height:calc(100vh - 70px); margin-top:70px; }
}

@media (max-width:1250px) {
	.main_section { height:calc(300px + 30vw); margin-top:56px; }
	.video { height:calc(300px + 30vw); min-height:calc(300px + 30vw); }
	#mouse_wheel { display:none; }
}

@media screen and (max-width:1000px) {
	.main_txt > div { padding-bottom:0; }
}

@media screen and (max-width:540px) {
	.mtxt_detail br { display:block; }
}




/********** 메인 타이틀 **********/

h2 { font-size:66px; font-weight:800; font-family:'Montserrat', sans-serif; color:#111; line-height:100%; }
h3 { font-size:38px; font-weight:700; font-family:'Montserrat', sans-serif; color:#111; line-height:100%; }
.tit_detail { font-size:16.3px; color:#555; line-height:150%; }

@media (max-width:1680px) {
	.tit_detail { font-size:calc(11.8px + 0.2vw); }
}



/********** 버튼 **********/

.resbtn.mbtn { display:inline-block; padding:17px 40px 17px 50px; background-color:#f3f3f3; border-radius:50px; }
.resbtn.mbtn i { font-size:21px; margin-left:10px; }
.resbtn.mbtn:hover { background-color:#003aac; }
.resbtn.mbtn:hover * { color:#fff; }
.resbtn.more i { padding-top:1px; margin-left:7px; }




/********** SKYBON **********/

.appear.app_zoom { overflow:hidden; opacity:1; }
.appear.app_zoom > * { transform:scale(1.2, 1.2); }
.appear.app_zoom.play > * { transform:scale(1, 1); transition:transform 2s; }


#skybon ul .img1 { position:absolute; width: 47%; height:700px; }
#skybon ul .img div { background: url(../images/skybon.jpg) no-repeat center; background-size:cover; height:100%; }

#skybon ul .img2 { display:none; }

#skybon ul .txt > div { margin-left:auto; width: 53%; text-align:center; padding:130px 0; }
#skybon ul .txt strong { display:block; font-size:22px; font-weight:700; color:#111; }
#skybon ul .txt img { width:180px; }
#skybon ul .txt p { font-size:17px; color:#333; line-height:160%; padding:0 40px; }

.eng #skybon ul .txt p { line-height:140%; }

@media (max-width:1660px){
	#skybon ul .img1 { height:calc(180px + 31vw); }
	#skybon ul .txt img { width:calc(100px + 5vw); }
}
@media (max-width:1200px){
	#skybon ul .txt p br { display:none; }
}
@media (max-width:767px){
	#skybon ul .txt > div { width: 100%; }
	#skybon ul .txt p { padding:0; }
	#skybon ul .img1 { display:none; }
	#skybon ul .img2 { display:block; height:250px; }
}






/********** 제품 슬라이드 **********/

#main_product .tit_wrap { position:absolute; width:100%; }
#main_product .tit_wrap .swrap { margin-top:88px; }
#main_product .tit_wrap .tit_detail { width:30%; }
#main_product .pro_arrow img { display:inline-block; cursor:pointer; }
#main_product .pro_arrow img:last-child { margin-left:30px; }

#main_product { position:relative; overflow:hidden; }
#product_list { position:relative; left:calc((100% - 1360px)/2 + 490px); width:2400px;  }

#product_list .box { padding:60px; height:480px; background-color:#003aac; margin-right:5%; }
#product_list .box .box_pad { position:relative; height:100%; }
#product_list .box .top:after { clear:both; visibility:hidden; display:block; content:''; }
#product_list .box .top li { float:left; }
#product_list .box .top .txt { width:80%; padding-right:10%; }
#product_list .box .top .txt * { color:#fff; }
#product_list .box .top .txt span { display:block; font-family:'Kanit'; font-size:17px; letter-spacing:0.02em; }
#product_list .box .top .txt strong { display:block; font-size:30px; line-height:120%; }
#product_list .box .top .txt p { font-size:16px; line-height:160%; opacity:.7; }

#product_list .box .top .mark { width:20%; position:relative; }
#product_list .box .top .mark img { width:100%; display:block; }
#product_list .box .top .mark strong { display:block; position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); font-family:'Kanit'; font-size: 48px; font-weight: 600; color:#fff; text-align:center; }

#product_list .box .img { display: flex; justify-content: space-between; position:absolute; left:0; bottom:0; width:100%;}
#product_list .box .img li { width:32%; height:140px; background-size:cover; background-position:center; background-repeat:no-repeat; }

.eng #product_list .box .top .txt p { line-height:140%; }


@media (max-width:1660px) {
	#main_product .tit_wrap .swrap { margin-top:8vw; padding-right:65%; }
	#main_product .tit_wrap .tit_detail { width:100%; }
	#main_product .tit_wrap p br { display:none; }
	#main_product .pro_arrow img { width:calc(40px + 1vw); }
	#product_list { left:35%; width:calc(700px + 100vw);  }
	#product_list .box { height:calc(200px + 16vw); }
	#product_list .box .img li { height:calc(40px + 5vw); }
}
@media (max-width:1400px) {
	#main_product .tit_wrap .swrap { margin-top:7vw; }
	#main_product .pro_arrow img:last-child { margin-left:20px; }
}
@media screen and (max-width:900px) {
	#main_product .tit_wrap .swrap { margin-top:2.5vw; }
}
@media screen and (max-width:767px) {
	#main_product { position:relative; overflow:inherit; margin-top:calc(-28px - 4vw); }
	#main_product .tit_wrap { position:static; }
	#main_product .tit_wrap .swrap { padding-right:0; margin-top:0; text-align:center; }
	#main_product .pro_arrow { display:none !important; }
	#main_product .tit_wrap p br { display:block; }

	#product_list { left:0; width:100%; margin-top:calc(10px + 3vw);  }
	#product_list .box { margin-right:1%; margin-left:1%; height:calc(160px + 26vw); }
	#product_list .box .img li { height:15vw; }
}




/* ★--- etc 시작 --- */

#etc_product > ul { display: flex; justify-content: space-between; }
#etc_product > ul > li { width: 45%; }

#etc_product ul.etc_con::after { display: block; content: ''; clear: both; visibility: hidden; }
#etc_product ul.etc_con li { float: left; width: 72%; }
#etc_product ul.etc_con li:last-child { width: 28%; padding-left: 5%;}

#etc_product ul.etc_con li strong { color: #222; font-size: 28px; font-weight: 700; line-height: 1.2;}
#etc_product ul.etc_con li p { color: #333; font-size: 16px; line-height: 1.7;}
.eng #etc_product ul.etc_con li p { line-height: 1.5;}

#etc_product ul.etc_con li .polygon { position: relative; margin-left:auto; }
#etc_product ul.etc_con li .polygon em { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #003aac; font-family:'Kanit'; font-size: 35px; font-weight: 600; font-style: normal; }

@media (max-width: 1000px){
	#etc_product > ul > li { width: 47%; }
	#etc_product ul.etc_con li:last-child { padding-left:3%; }

}
@media (max-width: 800px){
	#etc_product > ul { display: block; }
	#etc_product > ul > li { width: 100%; }
	#etc_product > ul > li:last-child { margin-top: calc(30px + 3vw); }

	#etc_product ul.etc_con li { width: 70%; }
	#etc_product ul.etc_con li:last-child { width:30%; }
	#etc_product ul.etc_con li .polygon { width:calc(60px + 4vw); }

}
/* --- etc 끝 ---  */





/********** CS 1단 배너 **********/

#maincs { padding:130px 0; background:url('../images/main_inqbg.jpg') center no-repeat; text-align:center; background-size:cover; }
#maincs p, #maincs .swrap { color:#fff; text-align:right; }
#maincs p:first-child { font-weight:700; }
#maincs p.cs_det { line-height:150%; }
#maincs a { border:4px solid #fff; background-color:transparent; }
#maincs a * { color:#fff; }
#maincs a span { font-size:16px; font-weight:500; }
#maincs a:hover { background-color:#003aac; border-color:#003aac; }

@media (max-width:1024px) {
	#maincs a { border-width:3px; }
}
@media screen and (max-width:767px) {
	#maincs { background-position:right center; }
	#maincs p, #maincs .swrap { text-align:center; }
	#maincs a { border-width:2px; }
}




/* 메인 뉴스 */

#news .tit_detail { position: relative; }
#news .tit_detail a { position:absolute; right:0; bottom:-10px; padding:10px 0; }

#news .box_news { display: flex; flex-wrap: wrap; justify-content: space-between; }
#news .box_news li { width: 31.7%; }

#news .box_news li:nth-child(2) { transition-delay:.2s; }
#news .box_news li:nth-child(3) { transition-delay:.4s; }

#news .box_news li .box { height:100%; background: #f6f8fb; padding: 37px 42px; border:1px solid #d4dae7; }
#news .box_news li .box > div { height:100%; position: relative; padding-bottom:70px; }
#news .box_news span { display:block; font-size: 14px; font-weight: 600; color:#111; }
#news .box_news strong { display:block; font-size: 18.5px; font-weight: 600; color: #333; line-height: 140%; }
#news .box_news p { font-size: 15.5px; font-weight: 400; color: #444; line-height: 150%; }
#news .box_news em { font-style:normal; font-size: 13px; color: #444; position: absolute;  bottom: 0;}
#news .box_news button { display:block; position: absolute; bottom: 0; right: -5px; font-size:28px; }

@media (max-width:1660px){
	#news { margin-top:calc(-50px - 14vw); }
	#news .box_news li .box > div { padding-bottom:calc(22px + 3vw); }
}
@media screen and (max-width:900px){
	#news .box_news li { width: 48%; }
	#news .box_news li:last-child { display:none; }
}
@media screen and (max-width:600px){
	#news .box_news li { width: 100%; }
	#news .box_news li:nth-child(2), #news .box_news li:nth-child(3) { transition-delay:0; }
	#news .box_news li:nth-child(n+2) { margin-top:calc(6px + 1vw); }
	#news .tit_detail a { display:none; }
}






/* ★-- 작업장 workshop 시작 --- */

#workshop { position: relative; }
#workshop .bg { position: absolute; top: 0; right: 0; width: 45%; height: 100%; }
#workshop .bg div { height: 100%; background: url(/images/workshop_bg.jpg) no-repeat center/cover; }

#workshop .txtbox { width: 45%; padding-bottom: 170px; }
#workshop strong { color: #222; font-size: 46px; font-weight: 700; line-height: 1.3;}
#workshop p { color: #555; font-size: 17px; }

#workshop ul { display: flex; justify-content: space-between; }
#workshop ul li { width: 47%; }
#workshop ul li div { height:220px; background-size:cover; background-position:center; background-repeat:no-repeat; }
#workshop ul li a span { font-size:18.5px; color:#111; font-weight:500; }

#workshop ul li:last-child.play { transition-delay:.2s; }

@media (max-width: 1660px){
	#workshop ul li div { height:calc(57px + 9vw); }
}
@media (max-width: 1024px){
	#workshop .bg { width:50%; }
}
@media (max-width: 900px){
	#workshop strong br { display: none; }
}
@media (max-width: 767px){
	#workshop .bg { position: relative; display: block; width: 100%; height: 250px; }
	#workshop .txtbox { width: 100%; }
	#workshop ul { max-width:440px; }
	#workshop ul li div { height:calc(86px + 8vw); }
}

/* --- 작업장 workshop 끝 ---  */