@charset "utf-8";

/* 공통 */
.main_tit{ margin-bottom:40px; text-align:center; }
.main_tit h2{ font-size:36px; line-height:46px; color:#222; font-weight:400; font-family: 'Montserrat', sans-serif; }
.main_tit h2 strong{ font-weight:700; }
.main_tit p{ margin:20px auto 0; font-size:18px; line-height:28px; color:#666; /*word-break: keep-all;*/; word-wrap: break-word; }

/* sec01 */
#main .sec01{ position:relative; overflow:hidden; }

#main .sec01 .img_bx{ position:relative; overflow:hidden; min-height:600px; }
#main .sec01 .img_bx img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }

#main .sec01 .txt_slide_wrap{ position:absolute; left:50%; top:50%; width:calc(100% - 250px); max-width:1200px; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%); z-index:10; }
#main .sec01 .txt_bx strong{ opacity:0; display:block; margin-bottom:30px; font-size:80px; line-height:90px; color:#fff; font-weight:700; font-family: 'Montserrat', sans-serif; transform: translate3d(150px,0,0); -webkit-transition:all 0.8s; -moz-transition:all 0.8s; transition:all 0.8s; }
#main .sec01 .txt_bx p{ opacity:0; margin-bottom:35px; font-size:20px; line-height:30px; color:#fff; /*word-break: keep-all;*/; word-wrap: break-word; transform: translate3d(150px,0,0); -webkit-transition:all 0.8s; -moz-transition:all 0.8s; transition:all 0.8s; transition-delay: .1s; }

#main .sec01 .active .txt_bx strong{ opacity:1; transform: translate3d(0,0,0); }
#main .sec01 .active .txt_bx p{ opacity:1; transform: translate3d(0,0,0); }

#main .sec01 .slick-arrow{ position:absolute; top:50%; margin-top:-25px; width:27px; height:51px; text-indent:-9999px; background:url('../images/main/main_v_ar.png') no-repeat center; background-size:cover; z-index:1; }
#main .sec01 .slick-prev{ left:50px; }
#main .sec01 .slick-next{ right:50px; -webkit-transform: rotate( 180deg ); -moz-transform: rotate( 180deg ); transform: rotate( 180deg ); }					

#main .sec01 .slick_dots_wrap .slick-dots{ font-size:0; }
#main .sec01 .slick_dots_wrap .slick-dots li{ display:inline-block; vertical-align:top; margin-right:16px; }
#main .sec01 .slick_dots_wrap .slick-dots li:last-child{ margin-right:0; }
#main .sec01 .slick_dots_wrap .slick-dots li button{ position:relative; display:block; padding:0; margin:0; width:30px; height:30px; background:transparent; text-indent:-9999px; }
#main .sec01 .slick_dots_wrap .slick-dots li button:before{ content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; background:rgba(255,255,255,.3); 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 .slick_dots_wrap .slick-dots li button:after{ content:''; position:absolute; left:14px; top:14px; width:0; height:0; opacity:0; border-radius:50%; border:1px solid #fff; box-sizing:border-box;  -webkit-transition:all 0.1s; -moz-transition:all 0.1s; transition:all 0.1s }
#main .sec01 .slick_dots_wrap .slick-dots li.slick-active button:before{ background:#fff; }
#main .sec01 .slick_dots_wrap .slick-dots li.slick-active button:after{ left:0; top:0; width:30px; height:30px; opacity:1; }

#main .sec01 .scroll_btn{ display:block; position:absolute; right:50px; bottom:50px; width:96px; height:96px; z-index:10; border-radius:50%; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; transition:all 0.4s;}
#main .sec01 .scroll_btn:hover{ background:rgba(255,255,255,.2); }
#main .sec01 .scroll_btn:before{ content:''; position:absolute; left:50%; top:50%; margin-top:-9px; margin-left:-7px; width:14px; height:18px; background:url('../images/main/scroll_ar.png') no-repeat center; }
@-webkit-keyframes scrollAni {
  0% { transform: rotate( 0deg ); }
  100% { transform: rotate( 360deg );}
}

@keyframes scrollAni {
  0% { transform: rotate( 0deg ); }
  100% { transform: rotate( 360deg );}
}
#main .sec01 svg { fill: currentColor; height: auto; transform-origin: center; width: 100%; animation: scrollAni 20s linear infinite 0s; }
#main .sec01 svg text{ font-size:10px; color:#fff; letter-spacing:.14em; font-family: 'Montserrat', sans-serif; }

/* sec02 */
#main .sec02{ padding:150px 0 160px; overflow:hidden;}
/* #main .sec02 .main_tit p{ max-width:770px; } */
#main .sec02 .bx_wrap{ margin:0 auto; padding-top:30px; max-width:893px; height:333px; background:url('../images/main/sec02_bg.png') no-repeat center top; box-sizing:border-box; }
#main .sec02 .bx_wrap ul{ padding:0 25px; }
#main .sec02 .bx_wrap ul:after{ content:''; display:block; clear:both; }
#main .sec02 .bx_wrap ul li{ display:flex; align-items: center; justify-content: center; float:left; width:33.33%; height:260px; }
#main .sec02 .bx_wrap ul li strong{ display:block; width:100%; padding-top:70px; font-size:18px; line-height:28px; color:#222; font-weight:700; text-align:Center; }
#main .sec02 .bx_wrap ul li.li01 strong{ background:url('../images/main/sec02_icon01.png') no-repeat center top; }
#main .sec02 .bx_wrap ul li.li02 strong{ background:url('../images/main/sec02_icon02.png') no-repeat 55% top; }
#main .sec02 .bx_wrap ul li.li03 strong{ background:url('../images/main/sec02_icon03.png') no-repeat center top; }
#main .sec02 .btn_bx{ margin-top:25px; }
#main .sec02 .btn_bx a{ display:block; margin:0 auto; padding:0 20px; width:200px; font-size:16px; line-height:60px; color:#fff; background:#ed7a21; box-sizing:border-box; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
#main .sec02 .btn_bx a:hover{ box-shadow:0 10px 10px rgba(0,0,0,.15); }
#main .sec02 .btn_bx a span{ display:block; background:url('../images/main/sec02_btn_ar.png') no-repeat right center; }

/* sec03 */
#main .sec03{ overflow:hidden; }
#main .sec03 .bx_wrap{ display:flex; align-items: center; margin:0 auto; width:calc(100% - 40px); max-width:1400px; height:560px; box-sizing:border-box; background:url('../images/main/sec03_bg.jpg') no-repeat center; background-size:cover; }
#main .sec03 .bx_wrap .txt_bx{ padding-left:50%; padding-right:100px; }
#main .sec03 .bx_wrap .txt_bx strong{ display:block; margin-bottom:20px; font-size:36px; line-height:46px; color:#fff; font-weight:400; font-family: 'Montserrat', sans-serif; }
#main .sec03 .bx_wrap .txt_bx strong span{ font-weight:700; }
#main .sec03 .bx_wrap .txt_bx p{ font-size:18px; line-height:28px; color:#fff; }

/* sec04 */
#main .sec04{ padding:150px 0 160px; overflow:hidden; }
#main .sec04 .main_tit{ margin-bottom:50px; }
#main .sec04 .bx_wrap{ display:flex; flex-wrap:wrap; margin-right:-45px; }
#main .sec04 .bx_wrap > div{ display:flex; flex-wrap:wrap; align-items: center; justify-content: center; align-content: center;width:calc(33.33% - 45px); height:370px; margin-right:45px; background:#fff; box-sizing:border-box; box-shadow:0 20px 40px rgba(0,0,0,.06); text-align:Center; }
#main .sec04 .bx_wrap > div .num{ width:100%; font-size:20px; line-height:50px; color:#222; font-family: 'Montserrat', sans-serif; }
#main .sec04 .bx_wrap > div .num strong{ font-size:50px; color:#ed7a21; font-weight:700; }
#main .sec04 .bx_wrap > div p{ margin-top:5px; width:100%; font-size:16px; line-height:26px; color:#666; }

/* sec05 */
#main .sec05{ position:relative;}
#main .sec05 .bg{ position:absolute; left:0; top:0; width:100%; height:100%; }
#main .sec05 .bg img{ opacity:0; visibility:hidden; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; transition:all 0.4s; }
#main .sec05 .bg img.on{ opacity:1; visibility:visible;}
#main .sec05 .main_tit{ position:absolute; left:0; top:120px; width:100%; z-index:2; }
#main .sec05 .main_tit h2{ color:#fff; }
#main .sec05 .bx_wrap{ display:flex; overflow:hidden; }
#main .sec05 .bx_wrap > a{ position:relative; display:inline-block; vertical-align:Top; padding-top:350px; width:50%; height:820px; box-sizing:border-box; text-align:center; border-right:1px solid rgba(255,255,255,.1); }
#main .sec05 .bx_wrap > a:after{ content:''; position:absolute; left:0; top:0; width:0; height:100%; background:rgba(237,122,33,.6); -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
#main .sec05 .bx_wrap > a:last-child{ border-right:0; }
#main .sec05 .bx_wrap > a .num{ position:relative; z-index:1; display:block; margin-bottom:25px; font-size:60px; line-height:60px; color:rgba(255,255,255,.3); font-weight:300; font-family: 'Montserrat', sans-serif; }
#main .sec05 .bx_wrap > a strong{ position:relative; z-index:1; display:block; font-size:26px; line-height:36px; color:#fff; font-weight:700; font-family: 'Montserrat', sans-serif; }
#main .sec05 .bx_wrap > a p{ position:relative; z-index:1; top:10px; margin:8px auto 0; width:90%; max-width:300px; font-size:16px; line-height:26px; color:#fff; /*word-break: keep-all;*/; word-wrap: break-word; opacity:0; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
#main .sec05 .bx_wrap > a .icon{ position:relative; z-index:1; top:10px; display:block; margin:35px auto 0; width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,.3) url('../images/main/sec05_more.png') no-repeat center; opacity:0; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}

/* sec06 */
#main .sec06{ padding-top:160px; overflow:hidden; }
#main .sec06 .main_tit{ margin-bottom:15px; text-align:left; }
#main .sec06 .main_tit:after{ content:''; display:block; clear:both; }
#main .sec06 .main_tit h2{ display:inline-block; vertical-align:top; }
#main .sec06 .main_tit .slide_btn{ position:relative; display:inline-block; float:right; font-size:0; }
#main .sec06 .main_tit .slide_btn:after{ content:''; position:absolute; left:50%; top:50%; margin-top:-7px; width:1px; height:14px; background:#eee; }
#main .sec06 .main_tit .slide_btn button{ padding:0; margin:0; width:54px; height:54px; text-indent:-9999px; background:url('../images/main/sec06_ar.png') no-repeat center; opacity:0.2; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
#main .sec06 .main_tit .slide_btn button:hover{ opacity:1; }
#main .sec06 .main_tit .slide_btn .btn_next{ -webkit-transform: rotate( 180deg ); -moz-transform: rotate( 180deg ); transform: rotate( 180deg ); }
#main .sec06 .slick-slide {  margin: 0 23px;  }
#main .sec06 .slick-list {  margin: 0 -23px;  }
#main .sec06 .slide a{ display:Block; }
#main .sec06 .slide a .img_bx{ position:relative; padding-bottom:75%; overflow:hidden; }
#main .sec06 .slide a .img_bx img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
#main .sec06 .slide a:hover .img_bx img{ transform: scale(1.05);  -webkit-transform: scale(1.05);  -moz-transform: scale(1.05); }
#main .sec06 .slide a .txt_bx{ position:relative; padding:25px 30px; height:180px; background:#fff; box-sizing:border-box; }
#main .sec06 .slide a .txt_bx:after{ content:''; position:absolute; left:0; bottom:0; height:4px; width:0; background:#ed7a21; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
#main .sec06 .slide a .txt_bx .cate{ margin-bottom:5px; font-size:16px; line-height:26px; color:#ed7a21; font-weight:700; }
#main .sec06 .slide a .txt_bx .tit{ margin-bottom:15px; font-size:20px; line-height:30px; color:#222; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; /*word-break: keep-all;*/; word-wrap: break-word; }
#main .sec06 .slide a .txt_bx .date{ font-size:14px; line-height:24px; color:#666; }
#main .sec06 .no_list{ padding-bottom:400px; }

/* sec07 */
#main .sec07{ position:relative; padding:150px 0 160px; }
#main .sec07:after{ content:''; position:absolute; left:0; top:-180px; width:100%; height:calc(100% + 180px); background:url('../images/main/sec07_bg.jpg') no-repeat center; background-size:cover; z-index:-1;  }
#main .sec07 .main_tit h2{ color:#fff; }
#main .sec07 .video_bx{ margin:0 auto; width:100%; max-width:860px; }
#main .sec07 .video_bx div{ position:relative; padding-bottom:56.25%; background:#000; }
#main .sec07 .video_bx div iframe{ position:absolute; left:0; top:0; width:100%; height:100%; }

/* PC */
@media all and (min-width:1025px){

#main .sec05 .bx_wrap > a:hover:after{ width:100%; }
#main .sec05 .bx_wrap > a:hover p{ top:0; opacity:1; }
#main .sec05 .bx_wrap > a:hover .icon{ top:0; opacity:1; transition-delay:0.2s; }

#main .sec06 .slide a:hover .txt_bx:after{ width:100%; }

}
 

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	
	/* 공통 */
	.main_tit{ margin-bottom:25px; }
	.main_tit h2{ font-size:25px; line-height:30px; }
	.main_tit p{ margin-top:11px; font-size:12px; line-height:17px; }

	/* sec01 */
	#main .sec01 .img_bx{ min-height:400px; }
	#main .sec01 .txt_slide_wrap{ width:100%; }
	#main .sec01 .txt_bx{ text-align:center; }
	#main .sec01 .txt_bx strong{ margin-bottom:12px; font-size:40px; line-height:45px; transform: translate3d(0,50px,0);}
	#main .sec01 .txt_bx p{ margin:0 auto 18px; width:85%; max-width:400px; font-size:12px; line-height:17px; transform: translate3d(0,50px,0);}

	#main .sec01 .slick-arrow{ display:none !important; }
	#main .sec01 .slick_dots_wrap .slick-dots{ text-align:Center; }
	#main .sec01 .slick_dots_wrap .slick-dots li button{ width:15px; height:15px; }
	#main .sec01 .slick_dots_wrap .slick-dots li button:before{ width:7px; height:7px; }
	#main .sec01 .slick_dots_wrap .slick-dots li button:after{ left:6px; top:6px; }
	#main .sec01 .slick_dots_wrap .slick-dots li.slick-active button:after{ width:15px; height:15px; }

	#main .sec01 .scroll_btn{ display:none }

	/* sec02 */
	#main .sec02{ padding:75px 0 80px; }
	#main .sec02 .main_tit p{ max-width:500px; }
	#main .sec02 .bx_wrap{ padding-top:10px; max-width:167px; height:446px; background:url('../images/main/sec02_bg_m.png') no-repeat center top; background-size:cover; }
	#main .sec02 .bx_wrap ul{ padding:0; }
	#main .sec02 .bx_wrap ul li{ width:100%; height:140px; }
	#main .sec02 .bx_wrap ul li strong{ padding-top:30px; font-size:12px; line-height:17px; }
	#main .sec02 .bx_wrap ul li.li01 strong{ background-size:30px auto;}
	#main .sec02 .bx_wrap ul li.li02 strong{ background-size:28px auto;}
	#main .sec02 .bx_wrap ul li.li03 strong{ background-size:32px auto;}
	#main .sec02 .btn_bx{ margin-top:20px; }
	#main .sec02 .btn_bx a{ padding:0 28px; width:150px; font-size:13px; line-height:45px; }
	#main .sec02 .btn_bx a span{ background:url('../images/main/sec02_btn_ar_m.png') no-repeat right center; background-size:7px auto; }

	/* sec03 */
	#main .sec03 .bx_wrap{ height:400px; }
	#main .sec03 .bx_wrap .txt_bx{ padding-right:100px; }
	#main .sec03 .bx_wrap .txt_bx strong{ margin-bottom:8px; font-size:20px; line-height:25px; }
	#main .sec03 .bx_wrap .txt_bx p{ font-size:11px; line-height:16px; }

	/* sec04 */
	#main .sec04{ padding:70px 0 80px; }
	#main .sec04 .main_tit{ margin-bottom:20px; }
	#main .sec04 .bx_wrap{ margin-right:-20px; }
	#main .sec04 .bx_wrap > div{ width:calc(33.33% - 20px); height:120px; margin-right:20px; box-shadow:0 10px 20px rgba(0,0,0,.06); }
	#main .sec04 .bx_wrap > div .num{ font-size:10px; line-height:25px; }
	#main .sec04 .bx_wrap > div .num strong{ font-size:25px; }
	#main .sec04 .bx_wrap > div p{ margin-top:5px; font-size:12px; line-height:17px; }

	/* sec05 */
	#main .sec05 .bx_wrap > a{ padding-top:250px; height:550px; }
	#main .sec05 .bx_wrap > a .num{ margin-bottom:8px; font-size:40px; line-height:40px; }
	#main .sec05 .bx_wrap > a strong{ font-size:20px; line-height:25px; }
	#main .sec05 .bx_wrap > a p{ opacity:1; top:0; margin:5px auto 0; width:90%; max-width:260px; font-size:12px; line-height:17px; }
	#main .sec05 .bx_wrap > a .icon{ opacity:1; top:0; margin:10px auto 0; width:40px; height:40px; background-size:12px auto; }

	/* sec06 */
	#main .sec06{ padding-top:70px; }
	#main .sec06 .layout{ width:100%; }
	#main .sec06 .main_tit{ margin-bottom:25px; text-align:center; }
	#main .sec06 .main_tit .slide_btn{ display:none; }
	#main .sec06 .slide .test a .txt_bx:after{ width:100%; }
	#main .sec06 .slick-slide { margin: 0 10px; }
	#main .sec06 .slick-list { padding:0 80px !important; margin: 0 -10px; }
	#main .sec06 .slide a .txt_bx{ padding:15px 15px; height:117px; }
	#main .sec06 .slide a .txt_bx:after{ content:''; position:absolute; left:0; bottom:0; height:4px; width:0; background:#ed7a21; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
	#main .sec06 .slide a .txt_bx .cate{ margin-bottom:5px; font-size:11px; line-height:16px; }
	#main .sec06 .slide a .txt_bx .tit{ margin-bottom:12px; font-size:12px; line-height:17px; }
	#main .sec06 .slide a .txt_bx .date{ font-size:10px; line-height:15px; }
	#main .sec06 .no_list{ padding-bottom:200px; }
	/* sec07 */
	#main .sec07{ padding:75px 0 80px; }
	#main .sec07:after{ top:-117px; height:calc(100% + 117px); }

}

/* 모바일 */
@media all and (max-width:768px){
	
	/* sec03 */
	#main .sec03 .bx_wrap{ padding:70.5% 0 50px; height:auto; background:url('../images/main/sec03_bg_m.jpg') no-repeat top center; background-size:cover; }
	#main .sec03 .bx_wrap .txt_bx{ padding:0; margin:0 auto; width:90%; max-width:200px; text-align:Center; }

	/* sec04 */
	#main .sec04 .bx_wrap{ margin-right:0; margin-bottom:-10px; }
	#main .sec04 .bx_wrap > div{ width:100%; margin-right:0; margin-bottom:10px; }
	
	/* sec05 */
	#main .sec05{ padding:75px 20px 50px; background:url('../images/main/sec05_bg_m.jpg') no-repeat center; background-size:cover; }
	#main .sec05 .main_tit{ margin:0; position:relative; left:auto; top:auto; }
	#main .sec05 .bx_wrap{ display:block; }
	#main .sec05 .bx_wrap > a{ padding:25px 0 30px; width:100%; height:auto; border-bottom:1px solid rgba(255,255,255,.1); border-right:0; }
	#main .sec05 .bx_wrap > a:last-child{ border-bottom:0; }
	
	/* sec07 */
	#main .sec07:after{ background:url('../images/main/sec07_bg_m.jpg') no-repeat center; background-size:cover; }

}