@charset "utf-8";

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

.main_wrap {position:relative; width:100%;}
.main_wrap .MC_wrap01 {position:relative; width:100%;}
.main_wrap .MC_wrap01:after {display:block; content:""; clear:both; overflow:hidden;}
.main_wrap .MC_wrap02 {position:relative; width:100%; max-width:1400px; margin:50px auto; z-index:0;}
.main_wrap .MC_wrap02:after {display:block; content:""; clear:both; overflow:hidden;}

/* 메인비주얼 */
.main_visual {position:relative; width:100%; height:585px; z-index:1;}
.main_visual button{cursor: pointer;}
.main_visual ul li{overflow:hidden;}
.main_visual #m_visual{height:100%; text-align:center;}
.main_visual #m_visual div{height:100%;}
.main_visual #m_visual li {position:relative; width:100%; height:100%; }
.main_visual #m_visual li img { width:auto; height:100%;}
/* 슬라이드 화살표 사용시 활성�
.main_visual #m_visual .slick-arrow{position: absolute; width:85px; height:40px; top:30%; text-indent:-99999%; overflow:hidden; z-index:1;}
.main_visual #m_visual .slick-prev{left:50%; margin-left:-650px; background:url('../images/main/btn_m_prev.png') no-repeat left center;}
.main_visual #m_visual .slick-next{right:50%; margin-right:-650px; background:url('../images/main/btn_m_next.png') no-repeat right center;}
*/
.main_visual .slogan_wrap{position: absolute; width:100%; max-width:1300px; top:20%; left:50%; margin-left:-650px; letter-spacing: -1px;}
.main_visual #m_slogan li p{color:#fff; line-height:1.3; word-break:keep-all; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); -ms-text-shadow: 2px 2px 4px rgba(0,0,0,0.7); -moz-text-shadow: 2px 2px 4px rgba(0,0,0,0.7); -webkit-text-shadow: 1px 1px 4px rgba(0,0,0,0.7);}
.main_visual #m_slogan li p.txt1{font-size:60px; margin:0 0 20px;}
.main_visual #m_slogan li p.txt2{font-size:35px; }
.main_visual #m_slogan .slick-dots{margin:30px 0 0 35px;}
.main_visual #m_slogan .slick-dots li{float:left; margin-right:8px;}
.main_visual #m_slogan .slick-dots li button{width:13px; height:13px; border-radius:13px; background:rgba(255,255,255,0.7); text-indent:-9999%; overflow:hidden; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}
.main_visual #m_slogan .slick-dots li.slick-active button{width:30px; background:#fff;}
.main_visual .control_btn{position: absolute; left:0px; bottom:2px; } 
.main_visual .control_btn button{width:25px; height:25px; border:0px;  border-radius:20px; font-size:0; float:left;}
.main_visual .control_btn button.btn_stop{background:rgba(0,0,0,0.8) url('/images/web/cvnci/main/btn_m_stop.png') no-repeat center; }
.main_visual .control_btn button.btn_play{display:none; background:rgba(0,0,0,0.8) url('/images/web/cvnci/main/btn_m_play.png') no-repeat center; }

/* 바로가기01 */
.m_link01{position: relative; width:100%; height:160px; z-index:2; background:#3465aa;}
.m_link01 .tit_wrap{position: absolute; width:240px; top:-60px; left:50%; margin-left:-700px; }
.m_link01 .tit_wrap h2{ padding:35px 30px; line-height:1.3; background:#002240; color:#fff; font-family: 'NotoB'; font-size:30px; }
.m_link01 .tit_wrap h2 span{position:relative; font-family: 'NotoT'; display:block;}
.m_link01 .tit_wrap h2 span::after{content:""; width:53px; height:16px; position: absolute; right:20px; bottom:15px; background:url('/images/web/cvnci/main/btn_more_arr.png') no-repeat center;}
.m_link01 .list_wrap{position:relative; width:100%; height:100%; max-width:1400px; margin:0 auto;}
.m_link01 ul{margin-left:240px;}
.m_link01 ul li{width:20%; float:left;}
.m_link01 ul li a{display:block; padding:32px 0; color:#fff; text-align:center; }
.m_link01 ul li a img{width:60px; height:60px; vertical-align: middle;}
.m_link01 ul li a p{margin:10px 0 0; line-height:26px; letter-spacing: -1px;}
.m_link01 ul li a:hover{background:#e4012e !important;}
.m_link01 ul li a:hover img{transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -webkit-transform: rotateY(360deg);}
.m_link01 ul li a span{display:block; color:#fff; font-size:15px; line-height:18px; margin:10px 0 0;}
.m_link01 a.mymenu{display:block; position: absolute; left:0; bottom:0; width:240px; color:#fff; line-height:32px; font-size:15px; padding:20px 0; text-align:center; background:#5a94ff;}
.m_link01 a.mymenu span{padding-left:10px;}
.m_link01 a.mymenu img{width:26px; height:26px;}
.m_link01 a.mymenu:hover{background:#e01735; text-decoration: underline;}
.m_link01 a.mymenu:hover img{transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg);}
.m_link01 a, .m_link01 img{ -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}

/* HS국제분쟁 신고센터 */
.m_link02{width:700px; height:170px; background:#d6e3f7 url('/images/web/cvnci/main/bg_link2.png') no-repeat left top; background-size:contain; float:left;}
.m_link02 .link_box{margin-left:45%; padding:35px 10px;}
.m_link02 h2 {position:relative; padding-left:30px; font-size:22px; color:#111;}
.m_link02 h2 a {display:block; color:#111;}
.m_link02 h2 a:hover{text-decoration: underline;}
.m_link02 h2::before{content:""; position: absolute; left:0; top:5px; width:25px; height:25px; border-radius:25px; background:#3465aa url('/images/web/cvnci/main/ico_link2.png') no-repeat center;}
.m_link02 h2 strong{font-family: 'NotoB';}
.m_link02 p{font-size:14px; line-height:20px; margin:15px 0 15px; word-break:keep-all;}
.m_link02 ul  {display:none;}
.m_link02 ul li{display:inline-block; vertical-align: middle;}
.m_link02 ul li a{display:block; position:relative; padding-left:30px; margin-right:20px; line-height:25px; font-family: 'notoM'; color:#111;}
.m_link02 ul li a::before{content:""; position: absolute; left:0; top:0; width:25px; height:25px; border-radius:25px; background:#3465aa url('/images/web/cvnci/main/ico_link2.png') no-repeat center;}
.m_link02 ul li a:hover{color:#3465aa; text-decoration: underline;}

/* 바로가기03 */
.m_link03{position:absolute; left:0; bottom:0; width:700px; height:100px; background:#002240; float:left;}
.m_link03 h2{position: absolute; left:0; top:0; width:0px; height:0px; overflow:hidden;}
.m_link03 ul li{width:50%; float:left;}
.m_link03 ul li a{display:block; position:relative; font-family:'notoM'; font-size:15px; color:#fff; line-height:20px; padding:20px 0; margin:10px auto; text-align:center;}
.m_link03 ul li:first-child a{border-right:1px solid #334e66;}
.m_link03 ul li a img{position:absolute; width:50px; height:45px; left:0; top:0px; }
.m_link03 ul li a p {position:relative; display:inline-block; padding-left:60px; text-align:left;}
.m_link03 ul li a p span{display:block;}
.m_link03 ul li a:hover p{text-decoration: underline;}
.m_link03 ul li a:hover img{transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -webkit-transform: rotateY(360deg);}
.m_link03 a, .m_link03 img{ -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}

/* 금주의 환율 */
.thswik_ehgt{position: relative; float:left; width:330px; height:290px; margin:0 20px;}
.thswik_ehgt h2{height:70px; line-height:70px; padding:0 30px; background:#00375f; color:#fff; font-size:20px; font-family: 'NotoM';}
.thswik_ehgt h2 img{width:29px; height:23px; vertical-align:middle; margin-right:5px;}
.thswik_ehgt .ehgt_box{position:relative; margin:20px 0 0; padding:25px; background:url('/images/web/cvnci/main/pttrn_ehgt.png');}
.thswik_ehgt .ehgt_box::before{content:""; position: absolute; left:50%; top:-20px; width:1px; height:20px; background:rgba(0,0,0,0.65);}
.thswik_ehgt .ehgt_box::after{content:""; position: absolute; left:50%; top:-5px; width:10px; height:10px; background:rgba(0,0,0,0.65); border-radius:10px; margin-left:-5px;}
.thswik_ehgt .ehgt_box ul{overflow:hidden;}
.thswik_ehgt .ehgt_box ul li{height:130px; margin:10px 0; float:left;}
.thswik_ehgt .ehgt_box ul li p{position:relative; padding-left:80px; margin-top:20px; line-height:30px; font-size:16px; color:#000; font-family: 'NotoM'; }
.thswik_ehgt .ehgt_box ul li p:first-child{margin-top:0;}
.thswik_ehgt .ehgt_box ul li span{position: absolute; width:70px; left:0; top:0; border-radius:20px; background:#000; color:#fff; text-align:center;}
.thswik_ehgt .ehgt_box .slick-arrow{position: absolute; right:30px; top:50%; width:30px; height:30px; text-indent:-99999%; overflow:hidden; border-radius:30px; z-index:1; cursor: pointer;}
.thswik_ehgt .ehgt_box .slick-next{margin-top:10px; background: rgba(0,0,0,0.5) url('/images/web/cvnci/main/btn_scrolldown.png') no-repeat center;}
.thswik_ehgt .ehgt_box .slick-prev{margin-top:-30px; background: rgba(0,0,0,0.5) url('/images/web/cvnci/main/btn_scrollup.png') no-repeat center;}
.thswik_ehgt .btn_more{position: absolute; top:20px; right:20px; width:30px; height:30px; text-indent: -9999%; overflow:hidden; background:#fff url('/images/web/cvnci/main/btn_more.png') no-repeat center; border-radius:20px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}
.thswik_ehgt .btn_more:hover{transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg);}

/* 팝업존 */
.box_popup {position:relative; width:320px; height:290px; float:right; overflow:hidden;}
.box_popup h2 {position:absolute; top:-10000em; left:-10000em;}
.box_popup button{cursor: pointer;}
.box_popup .pop {overflow:hidden;}
.box_popup .pop p img{width:100%; height:290px;}
.box_popup .control{position:absolute; padding:0 40px; right:0; top:0; text-align:center; background:rgba(0,0,0,0.7);}
.box_popup .control button {width:40px; height:40px; text-indent:-99999%; overflow:hidden; cursor:pointer; z-index:10;}
.box_popup .control button.btn_stop{background:url('/images/web/cvnci/main/btn_stop.png') no-repeat center; }
.box_popup .control button.btn_play{display:none; background:url('/images/web/cvnci/main/btn_play.png') no-repeat center; }
.box_popup .pop .slick-arrow {position: absolute; top:0; z-index:15; width:20px; height:40px; text-indent:-99999%; overflow:hidden; }
.box_popup .pop .slick-next{right:20px; background:url('/images/web/cvnci/main/btn_next.png') no-repeat center;}
.box_popup .pop .slick-prev{right:80px; background:url('/images/web/cvnci/main/btn_prev.png') no-repeat center;}
.box_popup .pop .slick-counter{position:absolute; line-height:40px; padding:0 20px; right:121px; top:0; text-align:center; background:rgba(0,0,0,0.7); color:#fff;}
.box_popup .pop .slick-counter .current{font-family: 'NotoB';} /* 191231 */
.box_popup .pop .slick-counter .total{font-family: 'NotoR';} /* 191231 */

/* 배너 */
.banner_box {position:relative; height:65px; background:#fff; border-top:1px solid #ccc;}/* 191210 ���� */
.banner_box .banner_inner {position:relative; width:1400px; line-height:46px; margin:0 auto; padding:10px 0; overflow:hidden;}/* 191210 ���� */
.banner_box h2 {position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } 
.banner_box .obj {position:relative; margin-right:200px; height:46px; overflow:hidden;} /* 191126 ���� */
.banner_box .obj li {width:20%; height:46px; float:left;} 
.banner_box .obj li a {display:block; margin:0 5px; text-align:center;}
.banner_box .obj li a img {max-width:100%; height:100%;}
.banner_box .control {position:absolute; top:9px; right:0; z-index:10}/* 191210 ���� */
.banner_box .control a {display:block; float:left; text-indent:-10000px; width:45px; height:46px; overflow:hidden; }
.banner_box .control a.prev { background:url('/images/web/cvnci/main/btn_b_prev.png') no-repeat; }
.banner_box .control a.next { background:url('/images/web/cvnci/main/btn_b_next.png') no-repeat; }
.banner_box .control a.stop { width:46px; background:url('/images/web/cvnci/main/btn_b_stop.png') no-repeat; }
.banner_box .control a.play { width:46px; background:url('/images/web/cvnci/main/btn_b_play.png') no-repeat; }
.banner_box .control a.list { width:46px; background:url('/images/web/cvnci/main/btn_b_list.png') no-repeat; }

/* 텍스트 요소 : 링크 타입 */
a.bu_linkL {padding-left:20px; color:#155eb6; text-decoration:underline; background:url("/images/web/kcs/con_com/bu_link_line.png") no-repeat left 4px;}
a.bu_mail {padding-left:30px; color:#155eb6; text-decoration:underline; background:url("/images/web/kcs/con_com/bu_mail.png") no-repeat left top;}
a.bu_mailL {padding-left:20px; color:#155eb6; text-decoration:underline; background:url("/images/web/kcs/con_com/bu_mail_line.png") no-repeat left 3px;}
a.bu_tel{padding-left:20px; color:#155eb6; text-decoration:underline; background:url("/images/web/kcs/con_com/imgIcon_tel_blue.png") no-repeat left 0px;}

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

	.main_wrap .MC_wrap02{width:96%;}
	.main_wrap .MC_wrap03 .MC_cont{width:96%;}

	/* 메인비주얼 */
	.main_visual .slogan_wrap{width:96%; left:2%; margin-left:0;}

	/* 바로가기01 */
	.m_link01 .tit_wrap{margin-left:0; left:0;}

	/* HS국제분쟁 신고센터 - 바로가기02 */
	.m_link02{width:48%; background-position:-45% center;}
	.m_link02 .link_box{margin-left:30%;}

	/* 바로가기03 */
	.m_link03{width:48%;}

	/* 금주의 환율 */
	.thswik_ehgt{width:24%; margin:0 2%;}

	/* 팝업존 */
	.box_popup{width:24%;}

	/* 배너 */
	.banner_box .banner_inner {width:95%;}

}

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

	#container {padding:0;}

	.main_wrap .MC_wrap02{margin:30px auto;}

	/* 메인비주얼 */
	.main_visual{height:650px;}
	.main_visual .slogan_wrap{text-align:center;}
	.main_visual #m_slogan .slick-dots{position:absolute; left:50%; bottom:-50px; margin:0;}
	.main_visual .control_btn{left:50%; bottom:-50px; margin-left:-40px;}	

	/* HS국제분쟁 신고센터 - 바로가기02 */
	.m_link02{background-image:none;}
	.m_link02 .link_box{margin-left:0; padding:25px;}

	/* 바로가기03 */
	.m_link03{position:relative; height:170px; float:right;}
	.m_link03 ul li a{padding:15px 0; margin:20px 0;}
	.m_link03 ul li a img{left:50%; margin-left:-25px;}
	.m_link03 ul li a p{padding:60px 0 0; text-align:center;}

	/* 금주의 환율 */
	.thswik_ehgt{width:48%; margin:20px 4% 0 0; float:left;}

	/* 팝업존 */
	.box_popup{width:48%; margin:20px 0 0;}
	.box_popup .pop p{background:#f1f1f1; text-align:center;}
	.box_popup .pop p img{width:auto; max-width:100%; height:100%;}

	/* 배너 */
	.banner_box .obj li {width:25%;} 

}

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

	/* 메인비주얼 */
	.main_visual{height:400px;}
	.main_visual .slogan_wrap{top:25%;}
	.main_visual #m_slogan li p.txt1{font-size:50px;}
	.main_visual #m_slogan li p.txt2{font-size:25px;}

	/* 바로가기01 */
	.m_link01{height:auto; overflow:hidden;}
	.m_link01 .tit_wrap{position: relative; width:100%; left:auto; top:auto;}
	.m_link01 .tit_wrap h2{padding:20px 30px; margin-right:160px;}
	.m_link01 .tit_wrap h2 span{display:inline-block; padding-left:10px;}
	.m_link01 .tit_wrap h2 span::after{right:-65px;}
	.m_link01 a.mymenu{left:auto; right:0; top:-80px; width:160px; height:40px; line-height:40px;}
	.m_link01 ul{margin-left:0;}
	
	.banner_box .obj li {width:33.33%;} 
}

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

	.main_wrap .MC_wrap02{margin:20px auto;}

	/* HS국제분쟁 신고센터 - 바로가기02 */
	.m_link02{width:100%;}

	/* 바로가기03 */
	.m_link03{width:100%; height:auto; margin:20px 0;}
	.m_link03 ul li a p{ padding:0 0 0 60px; text-align:left;}
	.m_link03 ul li a img{left:0; margin-left:0;}
	
	/* 배너  */	
	.banner_box .obj li {width:50%;} 


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

	/* 바로가기01 */
	.m_link01 ul{padding:10px 0; overflow:hidden;}
	.m_link01 ul li{width:33.33%;}
	.m_link01 ul li a{padding:10px 0;}

	/* 금주의 환율 */
	.thswik_ehgt{width:100%; margin:0 0 20px;}

	/* 팝업존 */
	.box_popup{width:100%;}
}

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

	/* 메인비주얼 */
	.main_visual{height:300px;}
	.main_visual #m_slogan li p.txt1{font-size:40px;}
	.main_visual #m_slogan li p.txt2{font-size:20px;}

	/* 바로가기01 */
	.m_link01 .tit_wrap h2{font-size:20px;}
	.m_link01 .tit_wrap h2 span::after{width:30px; height:9px; bottom:-6px; right:-20px; background-size:cover;}
	.m_link01 a.mymenu{ top:-67px; line-height:27px; height:27px;}
	.m_link01 ul{padding:10px 0; overflow:hidden;}
	.m_link01 ul li{width:50%;}
	.m_link01 ul li a{position:relative; padding:15px 0; line-height:40px; text-align:left;}
	.m_link01 ul li a img{position: absolute; left:10px; top:50%; width:40px; height:40px; margin-top:-20px;}
	.m_link01 ul li a p{padding-left:60px; margin:0;}	

	/* 바로가기03 */
	.m_link03 ul li{width:100%;}
	.m_link03 ul li a{text-align:left; margin:0 10px; padding:25px 20px;}
	.m_link03 ul li:first-child a{border-right:0; border-bottom:1px solid #334e66;}

	/* 배너 191224 수정 */	
	.banner_box .obj {margin-right:150px; height:46px; overflow:hidden;}
	.banner_box .obj li {width:1000%;} 
	.banner_box .control {position:absolute; top:15px; right:0; z-index:10} 
	.banner_box .control a {width:35px; height:36px;}
	.banner_box .control a.prev,
	.banner_box .control a.next {background-size:auto 36px; background-position:center; }
	.banner_box .control a.stop,
	.banner_box .control a.play,
	.banner_box .control a.list { width:36px; background-size:auto 36px; background-position:center; }

}

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

	/* 메인비주얼 */
	.main_visual{height:280px;}
	.main_visual .slogan_wrap{top:30%;}
	.main_visual #m_slogan li p.txt1{font-size:35px;}
	.main_visual #m_slogan li p.txt2{font-size:18px;}
	.main_visual #m_slogan .slick-dots{display:none !important;}
	.main_visual .control_btn{display:none !important;}

	/* 바로가기01 */
	.m_link01 ul li{width:95%; margin:0 2.5%;}
	.m_link01 ul li a{border-top:1px dashed #869dbd;}
	.m_link01 ul li:first-child a{border-top:0;}

}

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

	.m_link01 .tit_wrap h2{width:42%; margin:0; float:left; text-align:center; padding:20px 4%;}
	.m_link01 .tit_wrap h2 span::after{display:none;}
	.m_link01 a.mymenu{width:50%;}
	.m_link01 .list_wrap{float:left;}

	/* 배너 */
	.banner_box .obj li {width:100%; margin-left:0;}
}