@charset "utf-8"; 

div[class^="E01"]{box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; ; }

/* container */
#container {position:relative; width:100%; padding-top:145px; overflow:hidden; }
#container:after {display:block; content:""; clear:both; }

.main_content {position:relative; width:100%; z-index:10; }

.conBox01{position:relative; width:100%; height:auto; background:#00438f;}
.conBox01::before{content:""; position:absolute; top:0; left:50%; width:600px; height:100%; margin-left:-1000px; background:#0f377f; z-index:0; }
.conBox02{position:relative; width:100%; height:auto; background:#fff;}
.conBox02::before{content:""; position:absolute; top:0; left:50%; width:600px; height:300px; margin-left:-1000px; background:url('/CW9999/images/common/bg_notice.png') no-repeat right center; background-size:cover; z-index:1; }
.conBox03{position:relative; width:100%; padding:100px 0 80px; background:#f8fbff; z-index:0; overflow:hidden; }

.E01_1{position:relative; width:100%; height:135px; max-width:1400px; margin:0 auto;}
.E01_2{position:relative; width:100%; height:240px; max-width:1400px; margin:0 auto; z-index:2;}
.E01_3{position:relative; width:100%; height:auto; max-width:1400px; margin:0 auto;}

/* 200924 홍보동영상 */
.video_wrap{position:absolute;width: 306px;height: 172px;background:rgba(0,0,0,0.8);bottom: 6px;left: 11.5%;}
.video_wrap h3{position:absolute; width:1px; height:1px; left:-9999em; top:-9999em; text-indent:-9999em; overflow:hidden;}
.video_wrap div{height:100%;}
.video_wrap a .btn_play{position:absolute; top:50%; left:50%; width:85px; height:85px; text-indent:-9999em; display:block; margin:-42.5px 0 0 -42.5px; background:url('/images/web/self/main/btn_video.png'); z-index:1; overflow:hidden;}
.video_wrap a .txt{position: absolute; left:15%; top:50%; width:35%; height:auto; line-height:20px; margin-top:-10px; z-index:1; color:#fff; opacity: 0.7;}
.video_wrap a .txt p{position: absolute; left:0; top:0; line-height:20px;}
.video_wrap a .txt span{display:block; height:1px; margin:9px 55px; background:#fff;}
.video_wrap a .txt.txt_r{right:15%; left:auto;}
.video_wrap a .txt.txt_r p{right:0; left:auto;}
.video_wrap a .img{width:100%;height:100%;overflow:hidden;}
.video_wrap a .img img{position:relative;left:50%;top:50%;width:100%;height:auto;transform: translate(-50%, -50%);}
.video_wrap a:hover .btn_play{transform:rotateY(360deg); -ms-transform:rotateY(360deg); -moz-transform:rotateY(360deg); -webkit-transform:rotateY(360deg);}
.video_wrap a:hover .img img{opacity: 0.8;}
.video_wrap a:hover .txt{left:5%; width:45%; opacity: 1;}
.video_wrap a:hover .txt.txt_r{right:5%; left:auto; }
.video_wrap div, .video_wrap span, .video_wrap img, .video_wrap .btn_play{transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }

/* 200924 홍보동영상 */
.video_wrap2{position:absolute;width: 306px;height: 172px;background:rgba(0,0,0,0.8);bottom: 6px;left: 28.5%;}
.video_wrap2 h3{position:absolute; width:1px; height:1px; left:-9999em; top:-9999em; text-indent:-9999em; overflow:hidden;}
.video_wrap2 div{height:100%;}
.video_wrap2 a .btn_play{position:absolute; top:50%; left:50%; width:85px; height:85px; text-indent:-9999em; display:block; margin:-42.5px 0 0 -42.5px; background:url('/images/web/self/main/btn_video.png'); z-index:1; overflow:hidden;}
.video_wrap2 a .txt{position: absolute; left:15%; top:50%; width:35%; height:auto; line-height:20px; margin-top:-10px; z-index:1; color:#fff; opacity: 0.7;}
.video_wrap2 a .txt p{position: absolute; left:0; top:0; line-height:20px;}
.video_wrap2 a .txt span{display:block; height:1px; margin:9px 55px; background:#fff;}
.video_wrap2 a .txt.txt_r{right:15%; left:auto;}
.video_wrap2 a .txt.txt_r p{right:0; left:auto;}
.video_wrap2 a .img{width:100%;height:100%;overflow:hidden;}
.video_wrap2 a .img img{position:relative;left:50%;top:50%;width:100%;height:auto;transform: translate(-50%, -50%);}
.video_wrap2 a:hover .btn_play{transform:rotateY(360deg); -ms-transform:rotateY(360deg); -moz-transform:rotateY(360deg); -webkit-transform:rotateY(360deg);}
.video_wrap2 a:hover .img img{opacity: 0.8;}
.video_wrap2 a:hover .txt{left:5%; width:45%; opacity: 1;}
.video_wrap2 a:hover .txt.txt_r{right:5%; left:auto; }
.video_wrap2 div, .video_wrap span, .video_wrap img, .video_wrap .btn_play{transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }

@media screen and (max-width:1420px) { 

	.conBox01::before{width:300px; left:0; margin-left:0; }
	.conBox02::before{width:300px; left:0; margin-left:0; }

	.E01_1{width:100%;}
	.E01_2{width:100%;}
	.E01_3{width:95%;}
}

@media screen and (max-width:1200px) { 	
	/* container */
	#container {padding:0; }
	
	.conBox01::before{width:270px;}
	.conBox02::before{width:270px;}

	/*  200924  */
    .video_wrap {left: 1.5%;}
}

@media screen and (max-width:980px) { 

	.conBox01::before{display:none;}
	.conBox02::before{width:270px;}

	.E01_1{height:auto;}
	.E01_2{width:100%;}
	.E01_3{width:95%;}
}

@media screen and (max-width:760px) { 

	.conBox02::before{width:25%;}

	/*  200924  */
    .video_wrap {left: 1%;}
	.video_wrap2 {left: 42.5%;}
}

@media screen and (max-width:480px) {

	.conBox02::before{width:130px;}
	.conBox03{padding:80px 0 20px;}
}