@charset "utf-8";


#main .main_tit{ margin:0 auto 75px; width:calc(100% - 30px); max-width:1440px; }
#main .main_tit strong{ display:block; margin-bottom:20px; font-size:64px; line-height:74px; color:#111; font-weight:600; font-family: 'Poppins', sans-serif; }
#main .main_tit p{ font-size:18px; line-height:28px; color:#666; letter-spacing:-0.05em; word-break: keep-all; word-wrap: break-word;}

#main .sec01{ position:relative; }
#main .sec01 .scroll{ position:absolute; left:50%; bottom:0; display:inline-block; padding-bottom:35px; z-index:1; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%);}
#main .sec01 .scroll:after{ content:''; position:absolute; left:50%; bottom:0; width:1px; height:30px; background:rgba(255,255,255,.3); }
#main .sec01 .scroll span{ display:block; font-size:12px; line-height:22px; color:#fff; font-family: 'Poppins', sans-serif; }
#main .sec01 .img_slide .img_bx{ position:relative; overflow:hidden; }
#main .sec01 .img_slide .img_bx img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
#main .sec01 .img_slide .img_bx img.m{ display:none; }

#main .sec01 .img_slide .img_bx img{ 
	-moz-transform: translate(0) scale(1.1);
	-webkit-transform: translate(0) scale(1.1);
	-o-transform: translate(0) scale(1.1);
	-ms-transform: translate(0) scale(1.1);
	transform: translate(0) scale(1.1); 

	-moz-transition: transform 2.0s ease-out;
	-webkit-transition: transform  2.0s ease-out;
	-o-transition: transform 2.0s ease-out;
	transition: transform  2.0s ease-out; }

#main .sec01 .img_slide .active .img_bx img{
	-moz-transform: translate(0) scale(1);
	-webkit-transform: translate(0) scale(1);
	-o-transform: translate(0) scale(1);
	-ms-transform: translate(0) scale(1);
	transform: translate(0) scale(1);
}

#main .sec01 .txt_slide{ position:absolute; left:50%; top:50%; width:calc(100% - 30px); max-width:1440px; z-index:1; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%); overflow:hidden; }
#main .sec01 .txt_slide .slick-list{ overflow:visible; }

#main .sec01 .txt_slide strong{ display:Block; margin-bottom:25px; font-size:80px; line-height:92px; color:#fff; font-weight:700; font-family: 'Poppins', sans-serif; opacity:0; transform: translate3d(0,100px,0);-webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; transition-timing-function: ease; transition-duration: .8s;}
#main .sec01 .txt_slide p{ font-size:26px; line-height:40px; color:#fff; letter-spacing:-0.05em; word-break: keep-all; word-wrap: break-word; opacity:0; transform: translate3d(0,100px,0); -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; transition-timing-function: ease; transition-duration: .8s; transition-delay: 0.1s;}
#main .sec01 .txt_slide .active strong{ opacity:1; transform: translate3d(0,0,0);}
#main .sec01 .txt_slide .active p{ opacity:1; transform: translate3d(0,0,0);}
#main .sec01 .txt_slide .slick-dots{ margin-top:70px; font-size:0; }
#main .sec01 .txt_slide .slick-dots li{ display:inline-block; vertical-align:top; margin-right:20px; }
#main .sec01 .txt_slide .slick-dots li:last-child{ margin-right:0; }
#main .sec01 .txt_slide .slick-dots li button{ position:relative; padding:0; width:21px; height:21px; text-indent:-9999px; background:transparent; opacity:0.5; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;} 
#main .sec01 .txt_slide .slick-dots li button:before{ content:''; position:absolute; left:50%; top:50%; width:7px; height:7px; background:#fff; border-radius:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);  }
#main .sec01 .txt_slide .slick-dots li button:after{ content:''; position:Absolute; left:50%; top:50%; width:0; height:0; border:1px solid #fff; box-sizing:border-box; border-radius:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%); -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
#main .sec01 .txt_slide .slick-dots li.slick-active button{ opacity:1; }
#main .sec01 .txt_slide .slick-dots li.slick-active button:after{ width:21px; height:21px; }

#main .sec01 .img_slide .logo_m{ display:none; }
#main .sec01 .txt_slide .li02 strong{ width:60%; }
#main .sec01 .txt_slide .li02 p{ width:60%; }
#main .sec01 .txt_slide .li02 .logo_pc{ position:absolute; right:0; top:0; width:32%; max-width:441px; opacity:0; transform: translate3d(0,100px,0);-webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; transition-timing-function: ease; transition-duration: .8s; }
#main .sec01 .txt_slide .li02.active .logo_pc{ opacity:1; transform: translate3d(0,0,0); }

#main .sec02{ padding:140px 0; overflow:hidden; }
#main .sec02 .bx_wrap{ display:flex; flex-wrap:wrap; font-size:0;}
#main .sec02 .bx_wrap > div{ display:flex; flex-wrap:wrap; }
#main .sec02 .bx_wrap .tab_bx{ position:relative; z-index:1; align-items: center; flex-direction: row-reverse; width:37%; height:500px; }
#main .sec02 .bx_wrap .tab_bx div{ width:100%; max-width:500px; height:420px; }
#main .sec02 .bx_wrap .tab_bx div a{ display:flex; flex-wrap:wrap; align-items: center; align-content: center; padding:0 7%; margin-right:-60px; height:33.33%; box-sizing:border-box; }
#main .sec02 .bx_wrap .tab_bx div a strong{ display:block; width:100%; font-size:32px; line-height:42px; color:#111; font-weight:500; letter-spacing:-0.05em; }
#main .sec02 .bx_wrap .tab_bx div a strong span{ font-weight:600; font-family: 'Poppins', sans-serif; letter-spacing:0;}
#main .sec02 .bx_wrap .tab_bx div a p{ width:100%; margin-top:5px; font-size:16px; line-height:26px; color:#666; font-family: 'Poppins', sans-serif;}

#main .sec02 .bx_wrap .img_bx{ width:63%; }
#main .sec02 .bx_wrap .img_bx div{ position:relative; width:100%; height:500px; overflow:hidden; }
#main .sec02 .bx_wrap .img_bx div img{ display:none; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
#main .sec02 .bx_wrap .img_bx div img{ 
	-moz-transform: translate(0) scale(1.1);
	-webkit-transform: translate(0) scale(1.1);
	-o-transform: translate(0) scale(1.1);
	-ms-transform: translate(0) scale(1.1);
	transform: translate(0) scale(1.1); 

	-moz-transition: transform 2.0s ease-out;
	-webkit-transition: transform  2.0s ease-out;
	-o-transition: transform 2.0s ease-out;
	transition: transform  2.0s ease-out; }

#main .sec02 .bx_wrap .img_bx div img.on{
	-moz-transform: translate(0) scale(1);
	-webkit-transform: translate(0) scale(1);
	-o-transform: translate(0) scale(1);
	-ms-transform: translate(0) scale(1);
	transform: translate(0) scale(1);
}

#main .sec02 .bx_wrap .img_bx div .img01{ display:block; }

#main .sec03{ padding:140px 0; background:#f9f9f9; overflow:hidden; }
#main .sec03 .list_bx{ overflow:hidden; }
#main .sec03 .list_bx ul{ font-size:0; margin-right:-24px; }
#main .sec03 .list_bx ul li{ display:inline-block; vertical-align:Top; width:calc(25% - 24px); margin-right:24px; }
#main .sec03 .list_bx ul li a{ display:block; text-align:center; }
#main .sec03 .list_bx ul li .img_bx{ position:relative; padding-bottom:111%; overflow:hidden; }
#main .sec03 .list_bx ul li .img_bx img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -webkit-transition:all 0.8s; -moz-transition:all 0.8s; transition:all 0.8s;}
#main .sec03 .list_bx ul li .txt_bx{ margin-top:35px; }
#main .sec03 .list_bx ul li .txt_bx strong{ display:block; margin-bottom:10px; font-size:20px; line-height:30px; color:#111; letter-spacing:-0.05em; font-weight:500; }
#main .sec03 .list_bx ul li .txt_bx span{ display:block; font-size:16px; line-height:26px; color:#666; font-family: 'Poppins', sans-serif; }

#main .sec04{ padding:130px 0 0; overflow:hidden; }
#main .sec04 .bx_wrap{ display:flex; flex-wrap:wrap; height:600px; }	
#main .sec04 .bx_wrap > div{ display:inline-block; vertical-align:top; }
#main .sec04 .bx_wrap .img_bx{ position:relative; width:60%; overflow:hidden; }
#main .sec04 .bx_wrap .img_bx img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
#main .sec04 .bx_wrap .btn_bx{ width:40%; background:#111; }
#main .sec04 .bx_wrap .btn_bx a{ position:relative; display:flex; flex-wrap:wrap; align-items: center; padding:0 8%; height:33.33%; border-bottom:1px solid rgba(255,255,255,.4); box-sizing:border-box; }
#main .sec04 .bx_wrap .btn_bx a:before{ content:''; position:absolute; left:0; top:0; width:0; height:100%; background:#da2128; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; transition:all 0.4s; }

#main .sec04 .bx_wrap .btn_bx a:last-child{ border-bottom:0; }
#main .sec04 .bx_wrap .btn_bx a div{ position:relative; z-index:1; width:100%; max-width:460px; background:url('../images/main/sec04_ar.png') no-repeat right center; }
#main .sec04 .bx_wrap .btn_bx a div strong{ display:block; margin-bottom:5px; font-size:32px; line-height:42px; color:#fff; font-weight:500; letter-spacing:-0.05em; }
#main .sec04 .bx_wrap .btn_bx a div p{ font-size:16px; line-height:28px; color:#fff; letter-spacing:-0.05em; word-break: keep-all; word-wrap: break-word; }

/* PC */
@media all and (min-width:1025px){

#main .sec02 .bx_wrap .tab_bx div a.on{ background:#da2128; }
#main .sec02 .bx_wrap .tab_bx div a.on strong{ color:#fff; }
#main .sec02 .bx_wrap .tab_bx div a.on p{ color:#fff; }

#main .sec03 .list_bx ul li a:hover .img_bx img{ transform: scale(1.1);  -webkit-transform: scale(1.1);  -moz-transform: scale(1.1); }

#main .sec04 .bx_wrap .btn_bx a:hover:before{ width:100%; }

}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	
	
	#main .main_tit{ margin:0 auto 35px; }
	#main .main_tit strong{ margin-bottom:15px; font-size:36px; line-height:41px; }
	#main .main_tit p{ font-size:13px; line-height:21px; }
	
	#main .sec01 .scroll{ display:none; }
	#main .sec01 .txt_slide strong{ margin-bottom:17px; font-size:44px; line-height:52px; }
	#main .sec01 .txt_slide p{ font-size:17px; line-height:25px; }
	#main .sec01 .txt_slide .slick-dots{ margin-top:42px; }
	#main .sec01 .txt_slide .slick-dots li{ margin-right:12px; }
	#main .sec01 .txt_slide .slick-dots li button{ width:16px; height:16px; } 
	#main .sec01 .txt_slide .slick-dots li button:before{ width:5px; height:5px; }
	#main .sec01 .txt_slide .slick-dots li.slick-active button:after{ width:16px; height:16px; }
	
	#main .sec01 .txt_slide .li02 .logo_pc{ max-width:200px;  }

	#main .sec02{ padding:75px 0; }
	#main .sec02 .bx_wrap .tab_bx{ width:40%; height:350px; }
	#main .sec02 .bx_wrap .tab_bx div{ max-width:560px; height:270px; }
	#main .sec02 .bx_wrap .tab_bx div a{ margin-right:-40px; }
	#main .sec02 .bx_wrap .tab_bx div a strong{ font-size:20px; line-height:25px; }
	#main .sec02 .bx_wrap .tab_bx div a p{ margin-top:3px; font-size:12px; line-height:17px; }
	#main .sec02 .bx_wrap .img_bx{ width:60%; }
	#main .sec02 .bx_wrap .img_bx div{ height:350px; }

	#main .sec03{ padding:75px 0; }
	#main .sec03 .list_bx ul{ margin-right:-10px; }
	#main .sec03 .list_bx ul li{ width:calc(25% - 10px); margin-right:10px; }
	#main .sec03 .list_bx ul li .txt_bx{ margin-top:15px; }
	#main .sec03 .list_bx ul li .txt_bx strong{ margin-bottom:8px; font-size:14px; line-height:19px; }
	#main .sec03 .list_bx ul li .txt_bx span{ font-size:12px; line-height:17px; }

	#main .sec04{ padding:75px 0 0; }
	#main .sec04 .bx_wrap{ height:400px; }	
	#main .sec04 .bx_wrap .btn_bx a{ padding:0 15px; height:33.33%; }
	#main .sec04 .bx_wrap .btn_bx a div{ max-width:100%; background-size:8px auto; }
	#main .sec04 .bx_wrap .btn_bx a div strong{ margin-bottom:5px; font-size:20px; line-height:25px; }
	#main .sec04 .bx_wrap .btn_bx a div p{ font-size:12px; line-height:20px; }

}

/* 모바일 */
@media all and (max-width:768px){
	
	#main .sec01 .img_slide .img_bx img.pc{ display:none; }
	#main .sec01 .img_slide .img_bx img.m{ display:block; }

	#main .sec01 .img_slide .logo_m{ display:block; position:absolute; left:50%; bottom:25px; width:267px; opacity:0; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; transition-timing-function: ease; transition-duration: .8s; }
	#main .sec01 .img_slide .active .logo_m{ opacity:1; }
	#main .sec01 .txt_slide .li02 strong{ width:100%; }
	#main .sec01 .txt_slide .li02 p{ width:100%; }
	#main .sec01 .txt_slide .li02 .logo_pc{ display:none; }

	#main .sec02 .bx_wrap{ padding:0 15px; }
	#main .sec02 .bx_wrap .tab_bx{ width:100%; height:auto; }
	#main .sec02 .bx_wrap .tab_bx div{ width:100%; max-width:100%; height:auto; }
	#main .sec02 .bx_wrap .tab_bx div a{ margin-bottom:10px; height:90px; padding:0 20px; margin-right:0; border:1px solid #ccc; box-sizing:border-box; }
	#main .sec02 .bx_wrap .tab_bx div a:last-child{ margin-bottom:0; }
	#main .sec02 .bx_wrap .img_bx{ display:none; }
	
	#main .sec03 .list_bx ul{ margin-bottom:-25px; }
	#main .sec03 .list_bx ul li{ width:calc(50% - 10px); margin-bottom:25px; }
	
	#main .sec04 .bx_wrap{ height:auto; }	
	#main .sec04 .bx_wrap .img_bx{ display:none; }
	#main .sec04 .bx_wrap .btn_bx{ width:100%; }
	#main .sec04 .bx_wrap .btn_bx a{ height:120px; }
	
}