@charset "UTF-8";

/* index */
html,body{height:100%;}
.wrap{height:100%;}
.container{height:100%;}

.video_area{overflow:hidden; position:relative; width:100%; height:100%;}
/*.video_area video{position:absolute; top:0; left:50%; min-width:2000px; min-height:100%; height:auto !important; margin-left:-1000px;}*/
.video_area video{position:absolute; top:0; left:0%; min-width:100%; min-height:100%; height:auto !important; }
.video_area .ie8{position:absolute; top:0; left:0; width:100%; height:100%;}
.video_area .ie8 img{width:100%; height:100%;}
.contents{overflow:hidden; position:absolute; left:0; bottom:0; width:100%; height:680px;}
.contents .left{position:absolute; left:50px; bottom:50px;}
.contents .left .txt1{margin-bottom:15px; font-size:90px; font-weight:700; line-height:1em; letter-spacing:-2px; color:#fff;}
.contents .left .txt2{padding-left:7px; margin-bottom:20px; font-size:24px; font-weight:400; color:#fff;}
.contents .left .video_control{padding-left:7px;}
.contents .left .video_control button{overflow:hidden; width:24px; height:24px; background:url(/Resources/Kor/images/index/video_control.png) 0 0 no-repeat; text-indent:-9999px; vertical-align:middle;}
.contents .left .video_control button.off{display:none;}
.contents .left .video_control button[data-state=stop]{background-position:0 0;}
.contents .left .video_control button[data-state=play]{background-position:100% 0;}
.contents .left .video_control a{display:inline-block; position:relative; width:302px; height:45px; line-height:45px; padding-left:15px; margin-left:45px; background:url(/Resources/Kor/images/index/d_mark.png) #6bb1e2 right -1px top 5px no-repeat; font-size:16px; letter-spacing:-1px; color:#fff; box-sizing:border-box;}
.contents .left .video_control a:after{position: absolute; right:15px; top:18px; width:10px; height:15px; background:url(/Resources/Kor/images/index/main_banner_ico.png) 0 0 no-repeat; content:'';}
.contents .right{position:absolute; right:0; bottom:100px;}
.contents .right h3{float:left; width:65px;}
.contents .right h3 a{display:block; position:relative; height:180px; padding-top:30px; background:#fff; font-size:13px; font-weight:400; text-align:center; color:#000;}
.contents .right h3 a:after{overflow:hidden; position:absolute; left:50%; bottom:33px; width:6px; height:10px; background:url(/Resources/Kor/images/index/news_ico.png) 0 0 no-repeat; content:"";}
.contents .right.active h3 a:after{background-position:100% 0;}
.contents .right .news_cont{overflow:hidden; float:left; width:0;}
.contents .right .news_cont ul{overflow:hidden; width:651px;}
.contents .right .news_cont ul li{float:left; position:relative; width:216px; background:#fff; border-left:1px solid #eeeeee;}
.contents .right .news_cont ul a{display:block; height:180px; padding:30px 20px 0;}
.contents .right .news_cont .tit{overflow:hidden; height:76px; font-size:18px; font-weight:400; line-height:25px; word-break:break-all; word-wrap:break-word; color:#000;}
.contents .right .news_cont ul a:hover .tit{text-decoration:underline;}
.contents .right .news_cont .data{position:absolute; left:20px; bottom:30px; font-size:15px; color:#999;}
.contents .right .link_area{float:left; width:105px;}
.contents .right .link_area a{display:block; height:105px; background:url(/Resources/Kor/images/index/right_btn_bg.png) 0 0 no-repeat; font-size:14px; font-weight:400; line-height:1em; color:#bdfbfd;}
.contents .right .link_area a.link2{background-position:100% 0;}
.contents .right .link_area a span{display:block; padding:73px 0 0 15px;}

.contents .banner_area{position:absolute; right:0; bottom:310px; width:170px;}
.contents .banner_area .banner{margin-bottom:5px;}
.contents .banner_area .banner a{display:block;}
.contents .banner_area .banner span{display:block; position:relative; line-height:1.1em; font-size:14px; font-weight:400;}
.contents .banner_area .banner span:after{content:""; position:absolute; right:-5px; bottom:2px; width:6px; height:10px; background-image:url(/Resources/Kor/images/index/main_banner_ico2.png); background-position:center center; background-repeat:no-repeat;}
.contents .banner_area .banner01{background:url(/Resources/Kor/images/index/main_banner.jpg) center bottom no-repeat;}
.contents .banner_area .banner01 a{padding:86px 27px 20px 14px;}
.contents .banner_area .banner01 h3{position:absolute; left:0; bottom:0; font-size:0px; text-indent:-9999px;}
.contents .banner_area .banner01 span{color:#333;}
.contents .banner_area .banner02{background:url(/Resources/kor/images/index/main_banner2.jpg) bottom center #fff no-repeat; height:120px;}
.contents .banner_area .banner02 a{height:88%; padding:15px 15px 0;}
.contents .banner_area .banner02 h3{font-size:16px; font-weight:bold; text-align:left; line-height:1.25; color:#83500f; letter-spacing:-1px;}
.contents .banner_area .banner02 h3:after{content:""; display:inline-block; width:10px; height:13px; margin-left:8px; background:url(/Resources/kor/images/index/banner_arrow.png) center center no-repeat; vertical-align:middle;}
.contents .banner_area .banner02 h3 em{font-size:14px; font-weight:400;}
.scroll_top_area{display:none !important;}
/* banner03 */
.contents .banner_area .banner03{background:url(../images/index/banner02.jpg) bottom center #fff no-repeat; height:160px;}
.contents .banner_area .banner03 a{height:83%; padding:27px 14px 0;}
.contents .banner_area .banner03 h3{line-height:1.25; font-size:14px; font-weight:500; text-align:left; color:#2a5798;}
.contents .banner_area .banner03 h3:after{content:""; display:inline-block; width:10px; height:13px; margin-left:8px; background:url(/Resources/kor/images/index/main_banner_ico2.png) center center no-repeat;}
.contents .banner_area .banner03 h3 em{font-size:18px; font-weight:bold;}
.contents .banner_area .banner03 span{color:#248dc5;}
.contents .banner_area .banner03 span:after{background: url(../images/index/banner_arrow.png) no-repeat; width:30px; height:30px; background-color:#6bb2e2;}
.scroll_top_area{display:none !important;}


.layer_popup{display:none;}
.layer_popup.on{display:block; position:fixed; left:10%; top:200px; width:360px; z-index:999;}
.layer_popup .cont{overflow:hidden; width:360px; background:url(/Resources/Kor/images/index/main_popup.jpg) 0 0 no-repeat; border-bottom:1px solid #dfdfdf;}
.layer_popup .cont .inner{padding:70px 25px 30px;}
.layer_popup .cont p{margin-bottom:40px; line-height:120%; font-size:26px; color:#333; font-weight:500;}
.layer_popup .cont a.link{width:190px; background-color:#6bb2e2;}
.layer_popup span{display:block; position:relative; padding:10px 25px; background-color:#fff; font-size:12px; color:#999; box-sizing:border-box;}
.layer_popup span a{position:absolute; right:25px; top:13px; padding:0 5px; border-left:1px solid #333; border-right:1px solid #333; line-height:100%; color:#333; font-weight:400;}
.layer_popup span input{vertical-align:middle;}
.layer_popup input.custom_chk + label{position:relative; padding-left:5px; font-weight:400; vertical-align:middle; cursor:pointer;}

	#wrap { min-width: 1260px; height: auto;}
	.vsWrap { width: 100%; max-width: 1920px; margin: 0 auto;  height: 1080px; overflow: hidden; position: relative;}	 
	.vsWrap .bgWrap { width: 100%; height: 100%; position: relative; }
	.vsWrap .bgWrap img { display: block; position: relative; left: 50%; margin-left: -960px;}
	.vsWrap .bgWrap video { display: block; position: relative; left: 50%; margin-left: -960px; width: 1920px; height: 1080px;}
	.vsWrap .txtwrap { width: 1000px; position: absolute; top: 327px; left: 50%; margin-left: -500px; text-align: center; z-index: 3;}
	.vsWrap .txtwrap img.nth1 { margin-right: 20px;}
	.vsWrap .txtwrap img.nth3 { display: block; margin: 26px auto 0;}
	.conBox1 { width: 100%; max-width: 1920px; margin: 0 auto;  height: 1000px; padding-top: 120px; box-sizing: border-box; position: relative; background: #fff;}
	.conBox1 h2 { width: 100%; margin-bottom: 20px; font-size: 45px; line-height: 1; letter-spacing: -1.5px; font-weight: bold; color: #000; text-align: center;}
	.conBox1 p { width: 100%; margin-bottom: 40px; font-size: 27px; line-height: 1; letter-spacing: -1px; color: #4f4f4f; text-align: center;}
	.conBox1 .link {display: block; margin: 0 auto 55px; width: 231px; }
	.conBox1 .list { width: 96%; max-width: 1425px; margin: 0 auto; position: relative;}
	.conBox1 .list a { width: 100%; height: 490px; display: block; position: relative;}
	.conBox1 .list .imgBox { width: 100%; height: 255px; position: relative; overflow: hidden; border-radius: 20px; margin-bottom: 55px; display: block;}
	.conBox1 .list .imgBox img { transition: all 1s; transform: scale(1); display: block; width: 100%;}
	.conBox1 .list .imgBox a:hover img {  transform: scale(1.1);}
	.conBox1 .list .class { width: 100%; position: relative; box-sizing: border-box; padding-left: 15px; font-size: 20px; line-height: 1; letter-spacing: -0.5px; color: #214a76; margin-bottom: 15px; display: block;}
	.conBox1 .list .class::after { width: 5px; height: 100%; background: #214a76; position: absolute; top: 0; left: 0; content: ''; border-radius: 2.5px;}
	.conBox1 .list .tit { width: 100%; min-height: 86px; position: relative; font-size: 19px; line-height: 1.3; letter-spacing: -0.5px; color: #111; margin-bottom: 20px;  display: block;}
	.conBox1 .list .date { width: 100%; position: relative; font-size: 17px; line-height: 1; letter-spacing: -0.5px; color: #707070; font-weight: 300; display: block;}
	.conBox1 .btnWrap { width: 1640px; height: 1px; position: absolute; top: 465px; left: 50%; margin-left: -820px; z-index: 10;}
	.conBox1 .btnWrap .prev { width: 56px; height: 56px; background: #f1f1f1; display: block; position: absolute; top: 0; left: 0; border-radius: 50%;}
	.conBox1 .btnWrap .prev span:nth-child(1) {width: 14px; height: 14px; display: block; position: absolute; top: 21px; left: 29px; border-top: 1px solid #335173; border-left: 1px solid #335173; transform: rotateZ(-45deg); transition: all .4s;}
	.conBox1 .btnWrap .prev span:nth-child(2) {width: 28px; height: 1px; display: block; position: absolute; top: 28px; right: 0px; background: #335173;  transition: all .4s;}
	.conBox1 .btnWrap .prev span:nth-child(2)::after {width: 14px; height: 1px; display: block; position: absolute; top: 0px; right: -14px; background: #a6d0ee; content: '';  transition: all .4s; }
	.conBox1 .btnWrap .prev:hover span:nth-child(1) { left: 15px;}
	.conBox1 .btnWrap .prev:hover span:nth-child(2) { width: 44px;}
	.conBox1 .btnWrap .prev:hover span:nth-child(2)::after { width: 0px; right: 0;}
	.conBox1 .btnWrap .next { width: 56px; height: 56px; background: #f1f1f1; display: block; position: absolute; top: 0; right: 0; border-radius: 50%;}
	.conBox1 .btnWrap .next span:nth-child(1) {width: 14px; height: 14px; display: block; position: absolute; top: 21px; right: 29px; border-top: 1px solid #335173; border-right: 1px solid #335173; transform: rotateZ(45deg); transition: all .4s;}
	.conBox1 .btnWrap .next span:nth-child(2) {width: 28px; height: 1px; display: block; position: absolute; top: 28px; left: 0px; background: #335173;  transition: all .4s;}
	.conBox1 .btnWrap .next span:nth-child(2)::after {width: 14px; height: 1px; display: block; position: absolute; top: 0px; left: -14px; background: #a6d0ee; content: '';  transition: all .4s; }
	.conBox1 .btnWrap .next:hover span:nth-child(1) { right: 15px;}
	.conBox1 .btnWrap .next:hover span:nth-child(2) { width: 44px;}
	.conBox1 .btnWrap .next:hover span:nth-child(2)::after { width: 0px; left: 0;}
	.conBox1 .pagination { width: 500px; position: absolute; top: 880px; left: 50%; margin-left: -250px; z-index: 5; text-align: center;}
	.conBox1 .pagination span { width: 16px; height: 16px; display: inline-block; margin-right: 5px; background: rgba(51,81,115,.5); opacity: 1;  border-radius: 8px; transition: all .4s; position: relative;}
	.conBox1 .pagination span.swiper-pagination-bullet-active { width: 40px; background: rgba(51,81,115,1); margin-right: 265px;}
	.conBox1 .pagination span.swiper-pagination-bullet-active::before { width: 230px; height: 2px; background: rgba(51,81,115,.5); display: block; position: absolute; top: 7px; left: 55px; content: ''}
	.conBox1 .pagination span.swiper-pagination-bullet::after { width: 0px; height: 2px; background: rgba(51,81,115,1); display: block; position: absolute; top: 7px; left: 55px; content: ''; }
	.conBox1 .pagination span.swiper-pagination-bullet-active::after { width: 230px; transition: all 6s ease 0s;}
	
	
	.conBox2 { width: 100%; max-width: 1920px; margin: 0 auto; height: 1000px; position: relative; overflow: hidden;}
	.conBox2 .swiper-slide { width: 100%; background: #000; height: 1000px; position: relative;}
	.conBox2 .swiper-slide-active { z-index: 10 ;}
	.conBox2 .swiper-slide img { opacity: 0;}
	.conBox2 .swiper-slide img.bg { opacity: 1; transform: scale(1.1); transition: all 4s; position: relative; left: 50%; margin-left: -960px;}
	.conBox2 .swiper-slide.sn2 .bg2 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; display: block; background: #000; opacity: 0;}
	.conBox2 .swiper-slide.sn2 .bg2 img {  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; opacity: 1; }
	.conBox2 .sn2 img.nth1 { position: relative; left: calc(-30%); }
	.conBox2 .sn2 img.nth2 { position: relative; right:  calc(-30%);}
	
	.conBox2 .txtBox { width: 1300px; position: absolute; top: 350px; left: 50%; margin-left: -650px; z-index: 2; text-align: center;}
	.conBox2 .txtBox .nth3 { display: block; margin: 20px auto 70px; }
	.conBox2 .swiper-slide-active img.nth1 { opacity: 1; transition: all 1s ease 0s; }
	.conBox2 .swiper-slide-active img.nth2 { opacity: 1; transition: all 1s ease .3s;}
	.conBox2 .swiper-slide-active img.nth3 { opacity: 1; transition: all 1s ease .4s;}
	.conBox2 .swiper-slide-active.sn2 img.nth1 {transition: all 2s ease .2s;left: 0}
	.conBox2 .swiper-slide-active.sn2 img.nth2 {transition: all 2s ease .2s; right: 0;}
	.conBox2 .swiper-slide-active.sn2 img.nth3 {transition: all 1s ease 1s; }
	
	.conBox2 .swiper-slide-active img.bg { transform: scale(1);}
	.conBox2 .swiper-slide-active.sn2 .bg2 { opacity: 1;}
	.conBox2 .swiper-slide-active.sn2 .bg2 img{ width: 1920px; transition: all 1.8s;}
	.conBox2 .pagination { width: 500px; position: absolute; top: 740px; left: 50%; margin-left: -250px; z-index: 5; text-align: center;}
	.conBox2 .pagination span { width: 16px; height: 16px; display: inline-block; margin-right: 5px; background: rgba(255,255,255,.5); opacity: 1;  border-radius: 8px; transition: all .4s; position: relative;}
	.conBox2 .pagination span.swiper-pagination-bullet-active { width: 40px; background: #fff; margin-right: 265px;}
	.conBox2 .pagination span.swiper-pagination-bullet-active::before { width: 230px; height: 2px; background: rgba(255,255,255,.5); display: block; position: absolute; top: 7px; left: 55px; content: ''}
	.conBox2 .pagination span.swiper-pagination-bullet::after { width: 0px; height: 2px; background: rgba(255,255,255,1); display: block; position: absolute; top: 7px; left: 55px; content: ''; }
	.conBox2 .pagination span.swiper-pagination-bullet-active::after { width: 230px; transition: all 3s ease 0s;}

	.conBox3 { width: 100%; max-width: 1920px; margin: 0 auto;  height: 1000px; padding-top: 215px; box-sizing: border-box;  background: #fff; position: relative; overflow: hidden;}
	.conBox3 h2 { width: 100%; margin-bottom: 20px; font-size: 45px; line-height: 1; letter-spacing: -1.5px; font-weight: bold; color: #000; text-align: center;}
	.conBox3 p { width: 100%; margin-bottom: 120px; font-size: 27px; line-height: 1; letter-spacing: -1px; color: #4f4f4f; text-align: center;}
	.conBox3 ul { width: 100%; max-width: 1650px; margin: 0 auto 110px;; position: relative;}
	.conBox3 ul::after { clear: both; content: ''; height: 0px; display: block;}
	.conBox3 ul li { width: calc(100%/3); float: left; text-align: center; border-right: 1px solid #cfcfcf; position: relative; box-sizing: border-box;}
	.conBox3 ul li:last-child { border: none;}
	.conBox3 .btn { display: block; width: 230px; margin: 0 auto;}
	
	.conBox4 { width: 100%; max-width: 1920px; margin: 0 auto;  height: 600px; padding-top: 165px; box-sizing: border-box; position: relative; overflow: hidden; background: #335173;}
	.conBox4 ul { width: 1150px; margin: 0 auto; position: relative;}
	.conBox4 ul::after { clear: both; content: ''; height: 0px; display: block;}
	.conBox4 ul li { width: 300px; float: left; position: relative; box-sizing: border-box; overflow: hidden; margin-right: 125px;}
	.conBox4 ul li:last-child { margin-right: 0;}
	.conBox4 ul li .bg { display: block; position: relative; left: 50%; margin-left: -320px;}
	.conBox4 ul li a { width: 100%; height: 100%; display: block;}
	/*.conBox4 ul li a:hover { background: rgba(0,0,0,.5)}*/
	.conBox4 ul li a img { display: block;}
	.quickWrap { width: 50px; position: fixed; top: 50%; right: 30px; z-index: 10; margin-top: calc(-90px);}
	.quickWrap a { margin-bottom: 10px; display: block;}
.scroll { position: absolute; bottom: 200px; left: 50%; margin-left: -35px; animation: scroll-down ease 1.5s infinite; opacity: 0; transform: translateY(-20px); }
@keyframes scroll-down {
    0% { transform: translateY(-20px); opacity: 0; }
    40%, 60% { transform: translateY(0px); opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}