@charset "utf-8";

/* container */
#container {position:relative; width:100%; padding-top:140px; overflow:hidden; background:url('/images/web/english/main/bg_main.png') no-repeat center; background-size:cover;} /* 191021 수정 */
#container:after {display:block; content:""; clear:both;}

.main_wrap {position:relative; width:100%;}
.main_wrap .MC_wrap {position:relative; width:1400px; margin:55px auto 0;}
.main_wrap .MC_wrap:after {display:block; content:""; clear:both; overflow:hidden;}

/* main visual */
.m_visual {position:relative; width:680px; height:360px; float:left; overflow:hidden;}
.m_visual h2 {position:absolute; top:-10000em; left:-10000em;}
.m_visual .visual_wrap p img{width:100%; height:360px;}
.m_visual .visual_wrap .slick-arrow {position:absolute; width:55px; height:55px; right:0; bottom:0; text-indent:-99999%; overflow:hidden; z-index:88; cursor: pointer;}
.m_visual .visual_wrap .slick-arrow:hover {background-color:rgba(228,10,46,0.8)}
.m_visual .visual_wrap .slick-prev{right:112px; background:rgba(0,0,0,0.5) url('/images/web/english/main/btn_m_prev.png') no-repeat center;}
.m_visual .visual_wrap .slick-next{background:rgba(0,0,0,0.5) url('/images/web/english/main/btn_m_next.png') no-repeat center;}
.m_visual .control button {position:absolute; width:55px; height:55px; bottom:0; right:56px; text-indent:-99999%; overflow:hidden; cursor:pointer; }
.m_visual .control button.btn_stop{background:rgba(0,0,0,0.7) url('/images/web/english/main/btn_m_stop.png') no-repeat center;}
.m_visual .control button.btn_play{display:none; background:rgba(0,0,0,0.7) url('/images/web/english/main/btn_m_play.png') no-repeat center;}
.m_visual .control button:hover {background-color:rgba(228,10,46,0.9);}
.m_visual .visual_wrap .slick-dots, .m_visual .visual_wrap .slick-counter{display:none;}

/* Information Plaza */
.m_link {position:relative; width:680px; height:360px; float:right; overflow:hidden;}
.m_link:before {content:""; display:block; clear:both; position:absolute; top:24px; right:0; width:40%; height:2px; background:#053863;}
.m_link h2 {position:relative;height:70px; line-height:70px; background:#053863; font-size:20px; font-family:'NotoM'; color:#fff; z-index:2; padding:0 25px; text-transform: uppercase;}
.m_link h2::before{content:""; width:20px; height:20px; position: absolute; left:0; bottom:-20px; background:url('/images/web/english/main/bg_link1.png') no-repeat center;}
.m_link .link_box{position:relative; padding:20px 0 0; font-size:15px;}
.m_link .link_box ul {overflow:hidden;}
.m_link .link_box .ico_list li {width:25%; height:145px; float:left; text-align:center; letter-spacing:-1px; word-break:keep-all; }
.m_link .link_box .ico_list li a {display:block;}
.m_link .link_box .ico_list li a p{width:80px; height:80px; line-height:80px; margin:0 auto; background:#e8f6fe; border-radius:45px; transition:all 0.3s ease;}
.m_link .link_box .ico_list li a img {width:60px; height:56px;}
.m_link .link_box .ico_list li a:hover p{background:#fff;}
.m_link .link_box .ico_list li a:hover img {animation:Mlink_ico 0.3s  ease;}
	@keyframes Mlink_ico {
		0% {transform:rotate(0deg);}
		25% {transform:rotate(10deg);}
		50% {transform:rotate(0deg);}
		70% {transform:rotate(-10deg);}
		100% {transform:rotate(0deg);}
	}
.m_link .link_box .ico_list li a span {display:block; margin-top:5px; line-height:20px; color:#000;}
.m_link .link_box .txt_list {height:60px; margin-top:10px; padding:24px 30px; border:1px solid #fff;}
.m_link .link_box .txt_list li {width:50%; line-height:20px; float:left; margin:5px 0;}
.m_link .link_box .txt_list li a {position:relative; display:block; padding-left:10px; color:#fff;}
.m_link .link_box .txt_list li a:after {content:""; display:block; clear:both; position:absolute; top:7px; left:0; width:4px; height:4px; background:#053863; border-radius:2px;}
.m_link .link_box .txt_list li a:hover {text-decoration:underline;}
.m_link .link_box a.btn_my_menu {position:absolute; top:6px; right:0; display:block; width:40px; height:40px;  text-indent:-10000em; color:#fff; background:#053863; border-radius:20px;}
.m_link .link_box a.btn_my_menu span {position:absolute; left:0; top:0; width:40px; height:40px; background:url('/images/web/english/main/ico_my_menu.png') no-repeat center; transform:rotate(0deg); transition:all ease .3s;}
.m_link .link_box a.btn_my_menu:hover span {transform:rotate(360deg);}

/* Notice */
.Notice {position:relative; width:680px; height:325px; margin-top:40px; float:left; background:#fff;}
.Notice h2 {position:relative; height:70px; line-height:70px; font-size:20px; font-family:'NotoB';} 
.Notice h2 span{position:relative; display:inline-block; margin:0 35px;}
.Notice h2 span::before{content:""; position: absolute; left:-1px; bottom:0; width:100%; height:2px; background:#000;}
.Notice .list_box {position: relative; padding:25px 0 0; height:185px; margin:0 35px; border-top:1px solid #ccc;}
.Notice .list_box ul {overflow:hidden;}
.Notice .list_box ul li {position:relative; padding-right:100px; line-height:40px;}
.Notice .list_box ul li a {display:block; padding-left:15px; font-size:16px; color:#333; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.Notice .list_box ul li a:before {content:''; position:absolute; top:19px; left:0; width:4px; height:4px; background:#0066c3; border-radius:2px;}
.Notice .list_box ul li a:hover {color:#222; text-decoration:underline;}
.Notice .list_box ul li a img {vertical-align:middle; margin-right:5px;}
.Notice .list_box ul li span {position:absolute; right:0; top:0; display:block; color:#666; font-size:15px;}
.Notice a.btn_more {position:absolute; top:-50px; right:0px; width:48px; height:48px; display:block; border:1px solid #ccc; text-indent:-10000em; overflow:hidden;}
.Notice a.btn_more::before{content:""; position: absolute; width:100%; height:100%; left:0; top:0; background:url('/images/web/english/main/btn_more.png') no-repeat center; }
.Notice a.btn_more:hover::before {transform:rotate(180deg);}
.Notice a.btn_more, .Notice a.btn_more::before{-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease; }

/* LINK02 */
.m_link02 {position:relative; width:680px; height:185px; float:right; color:#fff; margin:40px 0 20px; overflow:hidden; background:rgba(255, 0, 0,0.6);}
.m_link02 h2 {padding:20px 35px; font-size:20px; text-transform: uppercase; font-family: 'NotoB';}
.m_link02 .txt{font-size:14px; line-height:18px; padding:0px 35px 10px; word-break:keep-all; color:#f3e1e5;}
.m_link02 .list {overflow:hidden; border-top:1px solid #862642; margin:0 35px; padding:25px 0;}
.m_link02 .list a{position:relative; display:block; line-height:20px; color:#fff; font-family: 'NotoM'; padding-left:30px; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; background:url('/images/web/english/main/ico_check.png') no-repeat left center;}
.m_link02 .list .slick-arrow{position: absolute; right:0; top:10px; width:50px; height:50px; text-indent:-99999%; overflow:hidden; cursor: pointer; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease; }
.m_link02 .list .slick-prev{width:49px; right:80px; background:url('/images/web/english/main/btn_prev.png'); background-size:cover;}
.m_link02 .list .slick-next{right:30px; background:url('/images/web/english/main/btn_next.png'); background-size:cover;}
.m_link02 .list .slick-arrow:hover{background-color:#d61231;}

/* LINK03 */
.m_link03 {position:relative; width:680px; height:60px; float:right; color:#fff; overflow:hidden;}
.m_link03 h2{position: absolute; left:35px; top:50%; line-height:30px; margin-top:-15px; font-size:20px; color:#fff; font-family: 'NotoB';}
.m_link03 a{display:block; line-height:40px; color:#ccc; font-size:16px; padding:10px 0 20px 90px; background:rgba(0, 0, 0,0.6) url('/images/web/english/main/btn_arr.png') no-repeat 95% center; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease; }
.m_link03 a:hover{color:#fff; background-position:98% center; background-color:rgba(0, 0, 0,0.8);}

/* LINK03_1 */
.m_link03_1 {position:relative; width:680px; height:60px; float:right; color:#fff; overflow:hidden;}
.m_link03_1 h2{position: absolute; left:35px; top:50%; line-height:30px; margin-top:-15px; font-size:20px; color:#fff; font-family: 'NotoB';}
.m_link03_1 a{display:block; line-height:40px; color:#ccc; font-size:16px; padding:10px 0 20px 90px; background:rgba(0, 0, 0,0.6) url('/images/web/english/main/btn_arr.png') no-repeat 95% center; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease; }
.m_link03_1 a:hover{color:#fff; background-position:98% center; background-color:rgba(0, 0, 0,0.8);}

/* LINK04 */
.m_link04 {position:relative; width:100%; height:50px; float:left; margin:40px 0 0; overflow:hidden; background:#2f343e;}
.m_link04 h2{position: absolute; top:-999999em; left:-999999em; }
.m_link04 ul{width:100%; max-width:1400px; margin:15px auto; overflow:hidden;}
.m_link04 li{display:inline-block; margin-right:40px;}
.m_link04 li a{display:block; position:relative; line-height:20px; padding-left:30px; color:#fff; font-size:14px;}
.m_link04 li a::before{content:""; position: absolute; width:20px; height:20px; left:0; top:0px; border-radius:20px; background:#e5e5e5 url('/images/web/english/main/btn_arr_bk.png') no-repeat center;}
.m_link04 a:hover{text-decoration: underline;}
.m_link04 a:hover::before{background:#e4022e url('/images/web/english/main/btn_arr_wh.png') no-repeat center;}
.m_link04 a, .m_link04 a::before{ -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}

/* LINK05 */
.m_link05 {position:relative; width:100%; height:270px; float:left; margin:40px 0 0; overflow:hidden; background:#2f343e;}

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

	.main_wrap .MC_wrap {width:95%; }

	/* main visual */
	.m_visual {width:56%; height:360px;}
	.m_visual .visual_wrap p {height:360px; text-align:center; background:rgba(0,0,0,0.5);}
	.m_visual .visual_wrap p img{width:auto; height:100%;}

	/* Information Plaza */
	.m_link {width:42%; height:360px;}
	.m_link .link_box .txt_list {padding:24px 20px;}

	/* Notice */
	.Notice {width:56%;}

	/* LINK02 */
	.m_link02 {width:42%;}

	/* LINK03 */
	.m_link03 {width:42%;}
	
	/* LINK03_1 */
	.m_link03_1 {width:42%;}
	
	/* LINK04 */
	.m_link04 ul {width:95%;}
	.m_link04 li{margin-right:20px;}
	
	/* LINK05 */
	.m_link05 ul {width:95%;}
	.m_link05 li{margin-right:20px;}

}

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

	/* main visual */
	.m_visual {width:100%; height:360px;}
	.m_visual .visual_wrap p img{width:auto; height:100%;}

	/* Information Plaza */
	.m_link {width:100%; height:auto; margin-top:20px; float:left;}	
	.m_link .link_box .txt_list {height:auto; padding:10px 20px;}
	.m_link .link_box .txt_list li{width:25%;}

	/* NOTCIE */
	.Notice {width:49%;}
	.Notice h2 {font-size:17px;}

	/* LINK02 */
	.m_link02 {width:49%;}

	/* LINK03 */
	.m_link03 {width:49%;}
	
	/* LINK03_1 */
	.m_link03_1 {width:49%;}

	/* LINK04 */
	.m_link04 {height:auto;}
	.m_link04 ul{margin:10px auto;}
	.m_link04 li a{margin:10px 0;}
	
	/* LINK05 */
	.m_link05 {height:auto;}
	.m_link05 ul{margin:10px auto;}
	.m_link05 li a{margin:10px 0;}

}

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

	#container {padding:0;}

	.main_wrap .MC_wrap{margin:30px auto 0;}

}

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

	/* LINK02 */
	.m_link .link_box .txt_list li{width:50%;}

	/* NOTCIE */
	.Notice {width:100%; margin:20px 0;}
	.Notice h2 {font-size:17px;}
	.Notice h2 span{margin:0 25px;}
	.Notice .list_box{margin:0 25px;}

	/* LINK02 */
	.m_link02 {width:100%; height:auto; margin:0;}
	.m_link02 h2{padding:25px;}
	.m_link02 .txt{padding:10px 25px 25px}
	.m_link02 .list{margin:0 25px;}
	.m_link02 .list .slick-arrow{top:20px;}
	.m_link02 .list .slick-prev{top:20px;}
	
	/* LINK03 */ 
	.m_link03 {width:100%; height:auto; margin:20px 0 0 0;}
	.m_link03 h2{left:25px;}
	.m_link03 a{padding:20px 0 20px 80px}
	
	/* LINK03_1 */ 
	.m_link03_1 {width:100%; height:auto; margin:0 0 20px 0;}
	.m_link03_1 h2{left:25px;}
	.m_link03_1 a{padding:20px 0 20px 80px}

	/* LINK04 */
	.m_link04{margin:0;}
	
	/* LINK05 */
	.m_link05{margin: 0 0 20px 0;}
}

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

	/* main visual */
	.m_visual {height:300px; float:none;}
	.m_visual .visual_wrap p {height:300px;}
	.m_visual .visual_wrap p img{width:auto; height:100%;}
}



@media screen and (max-width:720px) {
	
	/* main visual */
	.m_visual {height:270px;}
	.m_visual .visual_wrap p {height:270px;}
}

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

	/* main visual */
	.m_visual {height:230px;}
	.m_visual .visual_wrap p {height:230px;}
	.m_visual .visual_wrap .slick-arrow {width:40px; height:40px;}
	.m_visual .visual_wrap .slick-prev{right:82px;}
	.m_visual .control button {width:40px; height:40px; right:41px;}

	/* Information Plaza */
	.m_link .link_box .ico_list li {width:50%; height:50px; line-height:50px; text-align:left; }
	.m_link .link_box .ico_list li a {position:relative; display:block;}
	.m_link .link_box .ico_list li a p{position:absolute; left:0; top:5px; width:40px; height:40px; line-height:40px; text-align:center;}
	.m_link .link_box .ico_list li a img{width:30px; height:auto;}
	.m_link .link_box .ico_list li a span {margin:0 0 0 50px; line-height:50px;}
	.m_link .link_box .txt_list {height:auto;}

	/* Notice */
	.Notice h2 {font-size:17px;}
}

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

	
	/* main visual */
	.m_visual {height:190px;}
	.m_visual .visual_wrap p {height:190px;}

	/* Information Plaza */
	.m_link .link_box {margin:0 0 0 30px;}
	.m_link .link_box .ico_list li {width:100%; float:none;}

	/* Notice */
	.Notice .list_box ul li {padding-right:0;}
	.Notice .list_box ul li span {display:none;}

	/* LINK02 */
	.m_link02 h2{font-size:18px; line-height:40px;  padding:25px 25px 10px;}
	.m_link02 .list .slick-arrow{width:40px; height:40px;top:20px;}
	.m_link02 .list .slick-prev{width:39px; right:65px;top:20px;}
	.m_link02 .list .slick-next{right:25px;}

	/* LINK03 */
	.m_link03 h2{margin:0; top:20px;}
	.m_link03 a{padding:55px 20px 20px 25px; line-height:22px; background-position:95% 30px;}
	.m_link03 a:hover{ background-position:98% 30px;}
	
	/* LINK03_1 */
	.m_link03_1 h2{margin:0; top:20px;}
	.m_link03_1 a{padding:55px 20px 20px 25px; line-height:22px; background-position:95% 30px;}
	.m_link03_1 a:hover{ background-position:98% 30px;}
}

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

	
	/* main visual */
	.m_visual {height:170px;}
	.m_visual .visual_wrap p {height:170px;}

	
}