@charset "UTF-8";

body{background-color:#ebeef2; word-break: keep-all;}
body p{word-break: keep-all;}
.wrap{position:relative; width:1600px; margin-left:auto; margin-right:auto;}
@media all and (max-width:1600px) {
    .wrap{width:1200px;}
}
@media all and (max-width:1200px) {
    .wrap{width:1000px;}
}
@media all and (max-width:1000px) {
    .wrap{width:100%; padding-left:3%; padding-right:3%;}
}
@media all and (max-width:640px) {
    .rowgroup .wrap{padding-bottom:30px; background-color:#fff;}
}

/*#ba3c8d*/
#header{height:397px; background:url('/site/login/images/login_banner.jpg') no-repeat; text-align:center;}
#header .go_home{position:absolute; top:23px; right:0; border:1px solid rgba(255,255,255,0.3); border-radius:21px; text-align:center;}
#header .go_home .go_anchor{width:160px; font-size:15px; line-height:40px; color:#fff;}
#header .top{display:inline-block; margin-top:101px; text-align:center; color:#fff; font-size:0; line-height:0;}
#header .top .logo{width:143px; height:97px; background:url('/site/login/images/logo.png') no-repeat; vertical-align:middle;}
#header .top .title{margin-left:42px; font-size:48px; line-height:50px; color:#fff; font-weight:600; vertical-align:middle;}
@media all and (max-width:1000px) {
    #header .go_home{right:3%;}
}
@media all and (max-width:640px) {
    #header{height:200px;}
    #header .go_home .go_anchor{width:auto; padding:0 15px; font-size:14px;}
    #header .top{margin-top:80px;}
    #header .top .logo{margin:auto; width:100px; height:68px; background-size:cover; background-position:center;}
    #header .top .title{margin-left:10px; margin-top:15px; font-size:25px; line-height:27px;}
}

#container{z-index:auto; background-color:transparent;}
#container .mid{position:relative; z-index:100; margin-top:-129px; padding:64px 100px 75px; background-color:#fff;}
#container .mid .mid_top{text-align:center;}
#container .mid .mid_title{margin-bottom:30px;font-size:32px; line-height:40px; color:#111; font-weight:500; word-break:keep-all;}
#container .mid .mid_desc{font-size:18px; line-height:30px; color:#383838; font-weight:300; word-break:keep-all;}
#container .mid .mid_desc .point1{color:#0e3381; font-weight:500;}
#container .mid .mid_desc .point2{color:#ba3c8d; font-weight:500;}
@media all and (max-width:1600px) {
    #container .mid{padding-left:30px; padding-right:30px;}
}
@media all and (max-width: 1000px) {
    #container .mid .mid_desc{font-size:16px; line-height:28px;}
	#container .mid .mid_desc span{display:block;}
	#container .mid .mid_desc br{display:none;}
}
@media all and (max-width:640px) {
    #container .mid{margin-top:0; padding:0; padding-top:30px;}
    #container .mid .mid_title{margin-bottom:10px;font-size:20px; line-height:28px;}
    #container .mid .mid_desc{ font-size:14px; line-height:24px;}
}

#container .login_wrap{margin-top:50px; padding-top:61px; border-top:3px solid #e5e5e5; font-size:0; line-height:0;}
#container .login_list .login_item{display:block; display:inline-block; min-height:403px; padding:21px 33px 36px 32px;  vertical-align:top;}
/*#container .login_list .login_item + .login_item{border-left:1px solid #ddd;}*/

#container .login_list .login_item .login_title{text-align:left; font-size:26px; line-height:28px; color:#000; font-weight:500;}
#container .login_list .login_item .login_desc{min-height:99px; margin-top:19px; text-align:left; font-size:16px; line-height:24px; color:#555;}
#container .login_list .login_item .login_anchor{display:block; padding:16px 10px; background-color:#03a2a4; text-align:center; color:#fff; font-size:18px; line-height:24px; font-weight:500;margin-bottom: 5px;}
#container .login_list .login_item .login_anchor span{position:relative; padding-right:26px;}
#container .login_list .login_item .login_anchor span:before{display:block; position:absolute; top:50%; left:0; background-image:url('/site/login/images/login_sprite.png'); content:'';}
#container .login_list .login_item .login_anchor span:after{display:block; position:absolute; top:50%; right:0; width:8px; height:12px; margin-top:-6px; background-image:url('/site/login/images/login_sprite.png'); background-size:337.5% 1691.66%;}
#container .login_list .login_item .warning{position:relative; width:100%; margin-top:22px; padding-left:27px; color:#2f6dc0; text-align:left; font-size:14px; line-height:20px;}
#container .login_list .login_item .warning + .warning{margin-top:10px;}
#container .login_list .login_item .warning:before{display:block; position:absolute; top:3px; left:0; width:18px; height:18px; background:url('/site/login/images/warning_icon.png') no-repeat; content:'';}
#container .login_list .login_item .warning a{color:#2f6dc0;}
#container .login_list .login_item.n1 .login_anchor span{padding-left:34px;}
#container .login_list .login_item.n1 .login_anchor span:before{width:23px; height:29px; margin-top:-14px; background-position:left 12.64%; background-size:117.39% 700%;}
#container .login_list .login_item.n2 .login_anchor span{padding-left:39px;}
#container .login_list .login_item.n2 .login_anchor span:before{width:27px; height:25px; margin-top:-12px; background-position:left 34.26%; background-size:100% 811.99%;}
#container .login_list .login_item.n3 .login_anchor{background-color:#284d9e;}
#container .login_list .login_item.n3 .login_anchor span{padding-left:35px;}
#container .login_list .login_item.n3 .login_anchor span:before{width:23px; height:21px; margin-top:-10px; background-position:left 52.74%; background-size:117.39% 966.66%;}
#container .login_list .login_item.n4 .login_anchor{background-color:#8c58cc;}

/* 개수별 item width */
#container .login_wrap.length2{text-align:center;}
#container .login_wrap.length2 .login_item{width:350px;}
#container .login_wrap.length3 .login_item{width:33.33%;}
#container .login_wrap.length4 .login_item{width:25%;}
@media all and (max-width:1600px) {
    #container .login_wrap{margin-top:40px; padding-top:40px;}
    #container .login_list .login_item{padding:15px;}
    #container .login_list .login_item .login_anchor span{margin-left:10px;}
	#container .login_list .login_item .login_title{font-size:24px; line-height:26px;}
	#container .login_list .login_item .login_desc{font-size:14px; line-height:22px;}
    /*#container .login_list .login_item.n4 .login_anchor span{margin-left:0;}*/
}
@media all and (max-width:1200px) {
	#container .login_list{position:relative;}
	/*#container .login_list:before{display:block; position:absolute; top:0; left:50%; width:1px; height:100%; background-color:#ddd; transform:translateX(-50%);}*/
	#container .login_list .login_item{min-height:initial;}
	/*#container .login_list .login_item{width:50%;}*/
	#container .login_wrap.length2 .login_item,
	#container .login_wrap.length3 .login_item,
	#container .login_wrap.length4 .login_item{width:50%;}
}
@media all and (min-width:1001px) and (max-width:1200px) {
	#container .login_list .login_item:nth-child(n+1):nth-child(-n+2){margin-bottom:15px;}
	#container .login_list .login_item:nth-child(n+3):nth-child(-n+4){margin-top:15px;}
}
@media all and (max-width:1000px) {
    #container .login_list .login_item{padding-left:10px; padding-right:10px;}
}
@media all and (max-width:640px) {
    #container .login_list{overflow:visible;}
	#container .login_list:before{display:none;}
    #container .login_wrap{margin-top:20px; padding-top:20px; border-top-width:2px;}
    #container .login_list .login_item{min-height:auto; padding:30px 20px; border-radius:10px; border:1px solid #ddd;}
	#container .login_list .login_item:first-child,
	#container .login_list .login_item.n3{padding-left:20px;}
    #container .login_list .login_item.n2,
	#container .login_list .login_item.n4{padding-right:20px;}
	#container .login_list .login_item + .login_item{margin-top:20px;}
    #container .login_list .login_item .login_title{text-align:center; font-size:18px; line-height:20px;}
    #container .login_list .login_item .login_desc{min-height:auto; margin-top:10px; text-align:center; font-size:14px; line-height:23px; word-break:keep-all;}
    #container .login_list .login_item .login_btn{margin-top:10px;}
    #container .login_list .login_item .login_anchor{padding-top:12px; padding-bottom:12px; font-size:14px; line-height:16px;}
    #container .login_list .login_item .login_anchor span:after{margin-top:-5px;}
    #container .login_list .login_item .warning{display:block; margin-top:16px; font-size:14px; line-height:20px;}
	#container .login_wrap.length2 .login_item,
	#container .login_wrap.length3 .login_item,
	#container .login_wrap.length4 .login_item{width:100%;}
}

#footer{padding:39px 0; background-color:transparent; text-align:center;}
#footer .copyright{font-size:15px; line-height:25px; color:rgba(0,0,0,0.44); font-family:'Montserrat'; font-weight:400;}
@media all and (max-width:750px) {
	#footer .copyright{font-size:14px; line-height:20px;}
}

/* 주의, 경고 */
.caution{position:relative; margin-top:10px; padding-left:25px; color:#131313; font-size:15px; line-height:20px; letter-spacing:-0.025em; font-weight:400}
.caution .caution_icon{position:absolute; top:1px; left:0; width:18px; height:18px; background-color:#131313; border-radius:5px; color:transparent; font-size:0; line-height:0}
.caution .caution_icon:before{display:inline-block; position:absolute; top:-1px; bottom:0; left:0; right:0; margin:auto; width:10px; height:11px; background-image:url(https://www.ep.go.kr/site/public/images/sprite/template_sprite.png); background-size:1130% 11490.90909%; background-position:left 37.50998%}
.caution.type2.bold{color:#ba3c8d}
.caution.type2.bold .caution_icon{background-color:#ba3c8d}
.caution.type2 .caution_icon:before{top:0; width:5px; height:10px; background-size:2260% 12640%; background-position:left 39.1547%}
@media all and (max-width:640px) {
.caution{padding-left:24px; font-size:13px; line-height:18px}
.caution .caution_icon{top:0}
.caution.small{font-size:13px; line-height:18px}
.caution.bic{font-size:16px}
}

/* SNS로그인 */
#container .login_sns_w{text-align: center;}
#container .login_sns_w .title{margin-bottom: 30px;font-size: 32px;line-height: 40px;color: #111;font-weight: 500;word-break: keep-all;}
#container .login_sns_w .sns_box{width: 50%;border: 1px solid #d5d5d5;border-radius: 10px;padding: 30px;margin: 20px auto;}
#container .login_sns_w .sns_box .sns_icon{color: #000;font-size: 24px;line-height: 29px;letter-spacing: -0.025em;font-weight: 500;margin-bottom: 10px;}
#container .login_sns_w .sns_box .ul_w{display: inline;color: #0f3977;font-weight: 500;}
#container .login_sns_w .sns_box .ul_w span{color: #444;font-weight: 400;}
#container .login_sns_w .btn_w{margin-top: 20px;}
#container .login_sns_w .login_anchor{display: inline-block;width: 230px;padding: 16px 10px;background-color: #03a2a4;text-align: center;color: #fff;font-size: 18px;line-height: 24px;font-weight: 500;margin: 0 10px;}
#container .login_sns_w .login_anchor span{position:relative; padding-right:26px;}
#container .login_sns_w .login_anchor span:before{display:block; position:absolute; top:50%; left:0; background-image:url('/site/login/images/login_sprite.png'); content:'';}
#container .login_sns_w .login_anchor span:after{display:block; position:absolute; top:50%; right:0; width:8px; height:12px; margin-top:-6px; background-image:url('/site/login/images/login_sprite.png'); background-size:337.5% 1691.66%;}
@media all and (max-width:640px) {
#container .login_sns_w .title{margin-bottom:10px;font-size:20px; line-height:28px;}
#container .login_sns_w .sns_box{width: 100%;}
#container .login_sns_w .sns_box .sns_icon{font-size: 20px;}
#container .login_sns_w .login_anchor{display: block;width: 100%;padding-top:12px; padding-bottom:12px; font-size:14px; line-height:16px;margin: 5px 0;}
#container .login_sns_w .login_anchor span:after{margin-top:-5px;}
}

/* 점자뷰어 */
.addons{position: static;font-size:0;line-height:0;text-align: right;margin-top: 15px;z-index: 10;}
.addons .addons_item{display:inline-block; margin-left:10px; vertical-align:top}
.addons .addons_button{background-size: cover;background-position: top;width:44px; height:44px;border:none;}
.addons .addons_button:hover{width:44px; height:44px;background-position: bottom;}
.addons .braille .addons_button{background-image:url(/site/www/images/sprite/addons_sprite_braille.png);}
.addons .brailledown .addons_button{background-image:url(/site/www/images/sprite/addons_sprite_brailledown.png);}
@media all and (max-width:1000px){
.addons .braille .addons_button,.addons .braille .addons_button:hover,.addons .brailledown .addons_button,.addons .brailledown .addons_button:hover{width:34px; height:34px}
}
@media all and (max-width:640px){
.addons{margin-top:8px}
.addons .addons_item{margin-left:0}
.addons .sound, .addons .braille, .addons .brailledown{margin-right: 5px;}
}