@charset "utf-8";

/*header*/
#header{z-index:99}
.news_area h2, .service_area h2, .etc_area h2{font-size:16px}

/* container - viausl and banner */
h2.h2{margin-bottom:15px;font-size:16px;font-weight:600}

.ban_visu{margin-bottom:20px;margin-top: 10px;}
.ban_visu:after{content:'';display:block;clear:both}
.ban_visu > ul, .ban_visu > div{float:left}
.ban_visu > ul{width:320px}
/*.ban_visu > ul li:first-child{;border-top:none}*/
.ban_visu > ul li{width:100%;box-sizing:border-box;border-top:1px solid #6dc1d2;height:70px;background:#0086cb url('/_res/portal_ru/img/main/arrow.png') no-repeat 298px center}
.ban_visu > ul li a{display:table;box-sizing:border-box;padding:0 10px 0 15px;width:100%;height:69px;color:#fff;font-weight:600;letter-spacing:-0.5px;line-height:1.1em}
.ban_visu > ul li a:hover{background:#e46d00}
.ban_visu > ul li a:before{display:table-cell;content:'';width:35px;height:35px;vertical-align:top;background:url('/_res/portal_ru/img/main/icon.png') no-repeat 0 center}
.ban_visu > ul li a span{display:table-cell;width:auto;height:100%;padding:0 10px;vertical-align:middle;word-break:break-all}

.ban_visu > ul.ban1 li:nth-child(1) a:before{background-position:0px center}
.ban_visu > ul.ban1 li:nth-child(2) a:before{background-position:-40px center}
.ban_visu > ul.ban1 li:nth-child(3) a:before{background-position:-80px center}
.ban_visu > ul.ban1 li:nth-child(4) a:before{background-position:-120px center}
.ban_visu > ul.ban1 li:nth-child(5) a:before{background-position:-160px center}

.ban_visu > ul.ban2 li:nth-child(1) a:before{background-position:-200px center}
.ban_visu > ul.ban2 li:nth-child(2) a:before{background-position:-240px center}
.ban_visu > ul.ban2 li:nth-child(3) a:before{background-position:-280px center}
.ban_visu > ul.ban2 li:nth-child(4) a:before{background-position:-320px center}
.ban_visu > ul.ban2 li:nth-child(5) a:before{background-position:-360px center}

/*rolling banner*/
.ban_visu .visual .container{position:relative;width:660px}

#slides .slidesjs-pagination{z-index:90;position:absolute;top:20px;left:50px}
.slidesjs-pagination:after{content:'';display:block;clear:both}
.slidesjs-pagination li{float:left;padding:0 3px}
.slidesjs-pagination li a{display:block;width:17px;height:17px;text-indent:-9999px;border-radius:50%;background-color:#a6acb1}
.slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active{width:45px;border-radius:10px;background-color:#79add5}

#slides .slidesjs-navigation{z-index:90;position:absolute;top:20px;left:30px}
a.slidesjs-previous, a.slidesjs-next{display:none}
a.slidesjs-play, a.slidesjs-stop{display:block;overflow:hidden;width:17px;height:17px;text-indent:-9999px;background:url('/_res/portal_ru/img/main/slide.png') no-repeat 0 0}
a.slidesjs-play{background-position:-20px 0}
a.slidesjs-stop{background-position:0px 0}
/**/

/* newsroom */
.news_area{margin-bottom:20px;overflow:hidden}
.news_area > div{float:left;position:relative;box-sizing:border-box;padding:15px;width:320px;height:218px}
.news_area .more{position:absolute;top:15px;right:15px}

.news_area .overseas{background-color:#f5f5f5}
#tabArea{position:relative;padding-top:10px}
#tabArea h3 > a{display:inline-block;box-sizing:border-box;width:25%;height:30px;line-height:28px;text-align:center;font-size:13px;font-weight:600;border:1px solid #b8c6d7;background-color:#fff}
#tabArea .step2{position:absolute;left:25%;top:10px}
#tabArea .step3{position:absolute;left:50%;top:10px}
#tabArea .step4{position:absolute;left:75%;top:10px}
#tabArea h3.on > a{color:#fff;background-color:#608bc1}

.news_area .overseas ul{margin-top:20px}
.news_area .overseas ul li, .news_area .local ul li{line-height:1.8em}
.news_area .overseas ul li:before, .news_area .local ul li:before{display:inline-block;content:'';vertical-align:middle;width:5px;height:5px;background:url('/_res/portal_ru/img/main/bul.png') no-repeat -50px 0px}
/*.news_area .overseas ul li a, .news_area .local ul li a{display:inline-block;box-sizing:border-box;padding-left:7px;width:90%;text-overflow:ellipsis; white-space:nowrap;overflow: hidden;vertical-align:middle;}*/

.news_area .overseas ul li a em, .news_area .local ul li a em{display:inline-block;vertical-align:middle;max-width:85%;text-overflow:ellipsis; white-space:nowrap;overflow: hidden;}
.news_area .overseas ul li a span, .news_area .local ul li a span{padding-left:10px;vertical-align:middle}
.news_area .overseas ul li a span, .news_area .local ul li a span{vertical-align:middle;}
.news_area .overseas ul li a:hover em, .news_area .local ul li a:hover em{font-weight:600;text-decoration:underline;}

/* announcenent */
.news_area .local{margin:0 20px;background-color:#f5f5f5}
.news_area .local ul{margin-top:20px}

/*popup zone*/
.news_area .event{position:relative;padding:0;width:320px}
.news_area .event h2{z-index:90;position:absolute;top:10px;left:10px}

#slides2 .slidesjs-pagination{z-index:90;position:absolute;top:10px;right:30px}
#slides2 .slidesjs-pagination:after{content:'';display:block;clear:both}
#slides2 .slidesjs-pagination li{float:left;padding:0 3px}
#slides2 .slidesjs-pagination li a{display:block;width:17px;height:17px;text-indent:-9999px;border-radius:50%;background-color:#a6acb1}
#slides2 .slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active{border-radius:50%;background-color:#79add5}

#slides2 .slidesjs-navigation{z-index:90;position:absolute;top:10px;right:10px}
#slides2 a.slidesjs-previous, a.slidesjs-next{display:none}
#slides2 a.slidesjs-play, a.slidesjs-stop{display:block;overflow:hidden;width:17px;height:17px;text-indent:-9999px;background:url('/_res/portal_ru/img/main/slide.png') no-repeat 0 0}
#slides2 a.slidesjs-play{background-position:-20px 0}
#slides2 a.slidesjs-stop{background-position:0px 0}
/**/

/*civil service*/
.service_area{display:table;width:100%;margin-bottom:20px;overflow:hidden}
.service_area > div, .service_area > ul{float:left;box-sizing:border-box;padding:10px 0;width:490px;height:200px}

.service_area > div{background:#2e7fbe url('/_res/portal_ru/img/main/bg1.gif') repeat-y 0 0}
.service_area > div h2{background:url('/_res/portal_ru/img/main/icon2.png') no-repeat center 10px}
.service_area > div h2, .service_area div:nth-child(1) ul{float:left}
.service_area > div h2{box-sizing:border-box;width:28%;padding:80px 10px 0;text-align:center;color:#fff;font-weight:600;word-break:break-all}
.service_area > div h2 span{display:block}
.service_area > div ul{width:72%;padding:0 15px;border-left:1px solid #5999cb}
.service_area > div li:before{margin-right:7px;display:inline-block;content:'';vertical-align:middle;width:5px;height:5px;background:url('/_res/portal_ru/img/main/bul.png') no-repeat -20px 0}
.service_area > div li{padding:2.5px 0}
.service_area > div li a{color:#fff}
.service_area > div li a:hover{font-weight:600;text-decoration:underline;}

.service_area > ul{display:table;float:right;padding:0;vertical-align:middle;background:#64a707 url('/_res/portal_ru/img/main/bg2.gif') repeat-y 0 0}
.service_area > ul li{display:table-cell;width:33.33333%;vertical-align:middle;box-sizing:border-box;}
.service_area > ul li:first-child a{border-left:none}
.service_area > ul li a{display:block;min-height:155px;text-align:center;color:#fff;font-weight:600;border-left:1px solid #93c252}
.service_area > ul li a:hover{text-decoration:underline;}

.service_area > ul li a:before{display:block;content:'';margin:0px auto 20px auto;width:80px;height:80px;border:2px solid #97ce53;border-radius:50%}
.service_area > ul li:nth-child(1) a:before{background:#fff url('/_res/portal_ru/img/main/icon3.png') no-repeat center center}
.service_area > ul li:nth-child(2) a:before{background:#fff url('/_res/portal_ru/img/main/icon4.png') no-repeat center center}
.service_area > ul li:nth-child(3) a:before{background:#fff url('/_res/portal_ru/img/main/icon5.png') no-repeat center center}

/* guide to learning class */
.etc_area{overflow:hidden}
.etc_area > div{float:left;position:relative;box-sizing:border-box;padding:15px;width:320px;height:240px;border:1px solid #ddd}
.etc_area div:nth-child(2){margin:0 20px}
.etc_area > div > p{position:absolute;top:15px;right:15px}
/*.etc_area > div > h2{margin-bottom:15px}*/
.etc_area > div > h2{height:46px}
.etc_area > div a{display:block}
.etc_area > div a:hover dd{font-weight:600;text-decoration:underline;}

.etc_area > div dt{position:relative;margin-bottom:7px;padding-left:110px;width:290px;min-height:88px;border:1px solid #e1e1e1;font-size:15px;font-weight:600}
.etc_area > div dt > span{position:absolute;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%)}
.etc_area > div dd{line-height:1.4em}
.etc_area div:nth-child(1) dt{background:#f1f1f4 url('/_res/portal_en/img/main/icon0630.png') no-repeat}
.etc_area div:nth-child(2) dt{background:#f5f4e9 url('/_res/portal_ru/img/main/icon7.png') no-repeat}
.etc_area div:nth-child(3) dt{background:#ebf1f1 url('/_res/portal_ru/img/main/icon8.png') no-repeat}

.etc_area div:nth-child(1) dd li{margin-bottom:8px;padding-left:10px;background:url('/_res/portal_ru/img/main/bul2.gif') no-repeat 0 8px}


/* === 모바일 및 테블릿 === */
@media all and (max-width:800px) {

	.ban_visu > ul, .ban_visu > div{float:none}
	.ban_visu {display:flex;flex-direction:row;flex-wrap:wrap}
	.ban_visu > div{order:1;width:100%}
	.ban_visu > ul.ban1{order:2}
	.ban_visu > ul.ban2{order:3}

	.ban_visu > div img{max-width:100%;width:100%}
	.ban_visu > ul{width:100%}
	.ban_visu > ul li{padding:0;height:auto;border-left:1px solid #6083b8;background:#0063a1}

/*
	.ban_visu > ul li a{padding:10px 5px 10px 5px !important;height:100%;text-align:center}
	.ban_visu > ul li a:before, .ban_visu > ul li a span{display:block;word-break:break-all;height:auto}
*/

/*	.ban_visu > ul.ban2 li a span{display:inline-block}*/
/*	.ban_visu > ul li a{background-position:center 15px !important}*/

/*	.ban_visu > ul li a:before{float:none;width:48px;height:65px;margin:0 auto;background:url('/_res/portal_ru/img/main/m_icon.png') no-repeat 0 center}*/
/*	.ban_visu > ul.ban2 li a:before{height:55px}*/

/*
	.ban_visu > ul.ban1 li:nth-child(1) a:before {background-position:0px center}
	.ban_visu > ul.ban1 li:nth-child(2) a:before {background-position:-65px center}
	.ban_visu > ul.ban1 li:nth-child(3) a:before {background-position:-134px center}
	.ban_visu > ul.ban1 li:nth-child(4) a:before {width:57px;background-position:-200px center}
	
	.ban_visu > ul.ban2 li:nth-child(1) a:before {width:42px;background-position:-275px center}
	.ban_visu > ul.ban2 li:nth-child(2) a:before {background-position:-336px center}
	.ban_visu > ul.ban2 li:nth-child(3) a:before {width:43px;background-position:-403px center}
	.ban_visu > ul.ban2 li:nth-child(4) a:before {width:43px;background-position:-467px center}
*/
	
	.ban_visu .visual .container{width:100%;height:auto}
	.ban_visu .visual .container img{width:100%;height:auto}
	.slidesjs-pagination, .slidesjs-navigation{display:none !important}

	.news_area{margin-bottom:5px}
	.news_area > div{float:none;width:100% !important;margin-bottom:15px}
	.news_area .local{margin:0 0 15px 0}
	.news_area .event{width:100%;height:auto}
	.news_area .event img{width:100%;height:auto}
	#slides2	 .slidesjs-pagination{display:inline-block !important;right:0px}

	.service_area > div, .service_area > ul{float:none;display:table;width:100%;height:auto}
	.service_area > div h2{float:none;width:auto;padding:0 0 10px 15px;text-align:left;background:none}
    .service_area > ul li a {margin:25px 0;}

	.etc_area > div{float:none;margin-bottom:15px;width:100%;height:auto}
	.etc_area div:nth-child(2){margin:0 0 15px 0}
	.etc_area > div dt{width:100%;padding-left:120px}
}

@media all and (max-width:420px) {
	.ban_visu > ul > li > a{height:70px}
}

@media all and (max-width:404px) {
	.ban_visu > ul > li > a{height:80px}
}
@media all and (max-width:345px) {
	.ban_visu > ul > li > a{padding:0 10px}
}