@charset "utf-8";

/* set */
body {font-size:16px !important;margin:0;padding:0; font-family: 'NexonLv2Gothic', Dotum, "돋움", sans-serif;color:#333; font-weight:400}
input, select, button{font-family: 'NexonLv2Gothic', Dotum, "돋움", sans-serif; }
body *{ box-sizing:border-box;}
a {color: #333;}
::selection {background:var(--point);color:#fff;text-shadow:none;}

#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover, #skip li a:focus, #skip li a:active {background:#363636;position:absolute;top:0px;left:0;z-index:5;color:#fff;width:100%;height:25px;padding:5px 0 0 0}
.blind{display:block;overflow:hidden;position:absolute;top:0;left:-5000px;font-size:1.8em}
.hide{display:none !important;margin:0;padding:0}

:root{
    --point: #00479d; 
    --line: #eaeaea;
    --bg1: #eff5fa;
    --bg2: #f3f3f3;
    --bg3: #454545;
    --bg4: #fff;
    --color1:#6c6c6c;
    --color2:#b4b4b4;
    --color3:#999;
    --color4:#fff;

}

.wrap{margin: 0 20px;}

/* GNB */
header .gnb{max-width: 360px; height: 60px; margin: 0 auto 30px; padding: 20px 0; background: var(--bg2); border-radius: 0 0 30px 30px;}
header .gnb ul{display: flex; justify-content: center;}
header .gnb ul li{position: relative; padding-right: 14px; margin-right: 14px;}
header .gnb ul li::after{content: '';position: absolute; top: 0; right: 0;  display: block; width: 1px; height: 14px; background: var(--line);}
header .gnb ul li:last-child{padding-right: 0; margin-right: 0;}
header .gnb ul li:last-child::after{display: none;}
header .gnb ul li a{font-size: 14px;}
header .gnb ul li.sns.on{z-index: 2;}
header .gnb ul li.sns .sns_con{display: none; position: absolute; top: 24px; left: -4px; width: 40px; background: var(--bg3); padding: 10px; border-radius: 5px;}
header .gnb ul li.sns.on .sns_con{display: block;}
header .gnb ul li.sns.on .sns_con ul{flex-direction: column; gap: 10px 0;}
header .gnb ul li.sns.on .sns_con ul a{display: block; width: 20px; height: 20px; background: url('/images/citizencard/layout/s_sns.png') no-repeat; font-size: 0;}
header .gnb ul li.sns.on .sns_con ul li::after{display: none;}
header .gnb ul li.sns.on .sns_con ul li.naver a{background-position: 2px 3px;}
header .gnb ul li.sns.on .sns_con ul li.face a{background-position: 50% -31px;}
header .gnb ul li.sns.on .sns_con ul li.kakao a{background-position: 50% -67px;}
header .gnb ul li.sns.on .sns_con ul li.x a{background-position: 50% -136px;}
header .gnb ul li.sns.on .sns_con ul li.insta a{background-position: 50% -103px;}

/* 로고 */
header h1 a{display: inline-block;}
header h1 a span{display: inline-block; position: relative; width: 120px; height: 35px; margin-right: 25px; background: url('/images/citizencard/common/logo.png') no-repeat bottom; background-size: contain; font-size: 0;}
header h1 a span::after{content: ''; position: absolute; right: -15px; bottom: 0; display: inline-block; width: 4px; height: 20px; background: #ededed; border-radius: 20px;}
header h1 a strong{display: inline-block; margin-top: 14px; font-size: 20px; font-family: 'esamanru'; font-weight: 600;}

/* 메뉴 */
header .head{display: flex; justify-content: space-between;}
header .head>button{display: block; width: 30px; height: 16px; align-self: flex-end; margin-bottom: 4px; background: url('/images/citizencard/layout/menu_ico.png') no-repeat; background-position: 50% 0; font-size: 0;}
header nav{display: none; position: fixed; z-index: 2;} 
header nav::after{content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: -1;}
header nav.on{display: block; z-index: 3;}
header nav div{position: fixed; top: 0; right: 0; width: 80%; height: 100%; max-width: 360px; padding-top: 80px; background: var(--bg4);}
header nav button{position: fixed; top: 20px; right: 20px; width: 20px; height: 20px; background: url('/images/citizencard/layout/menu_ico.png') no-repeat; background-position: 50% -20px; font-size: 0; }
/* 1차메뉴 */
header nav ul li a{display: block; padding: 20px; text-align: center; font-size: 20px; font-weight: 500; word-break: keep-all;}
header nav ul li a:hover,
header nav ul li a:focus,
nav ul li.on>a{color: var(--point);}
header nav ul li a span.green{color: #00853d;}
header nav ul li a span.org{color: #c57900;}
nav ul li.on>a span,header nav ul li a:hover span{color: var(--point) !important;}
/* 2차메뉴 */
header nav ul li.on>ul{display: block;}
header nav ul ul{display: none; margin: 10px 20px; padding: 10px 0; background: var(--bg1); border-radius: 20px;}
header nav ul li li a{padding: 10px; font-size: 16px;  line-height: 20px;}
header nav ul li li a:hover,header nav ul li li a:focus{font-weight: 600; color: #000;}
/* 3차메뉴,4차메뉴 안보이게 */
header nav ul ul ul{display: none;}
/* 새창열림 */
.new_win{display: inline-block; width: 15px; height: 20px; margin-left: 6px; background: url('/images/citizencard/layout/new_win.png') no-repeat top 2px left; font-size: 0;}

/* 하단 */
footer{padding: 50px 0; border-top: 1px var(--line) solid;} 
footer .wrap{display: flex; flex-direction: column; gap: 20px;}
footer .add .txt1{margin-bottom: 6px; word-break: keep-all;}
footer .add .txt2{color: var(--color3); font-size: 14px;}
footer .link{display: flex; flex-direction: column; gap: 20px;}
footer .link a{display: block; height: 50px; padding-top: 15px; border-radius: 10px; background: var(--bg2); color: var(--color2); text-align: center; transition: 0.5s ease-in-out;}
footer .link a:hover,footer .link a:focus{background: var(--bg3); color: var(--color4);}

/* 서브상단 */
.sub_container{margin-top: 30px; border-top: 1px var(--line) solid;}
.s_top{padding: 60px 0; text-align: center;}
.s_top h2{font-size: 28px; font-family: 'esamanru'; margin-bottom: 20px;}
.s_top .loca ul{display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-self: center; margin-bottom: 10px;}
.s_top .loca ul li::after{content: '';display: inline-block;width: 15px;height: 15px;margin-left: 10px;line-height: 18px;vertical-align: middle;background: url('/images/citizencard/layout/sub_ico.png') no-repeat;background-position: 50% 1px;}
.s_top .loca ul li:last-of-type::after{display: none;}
.s_top .loca ul li a{line-height: 18px;}
.s_top .loca ul li:last-of-type a{color: var(--point); font-weight: 600;}
.s_top .loca ul li a:hover,.s_top .loca ul li:last-of-type a:focus{font-weight: 600;}
.s_top .link_copy ul{display: flex; justify-content: center; gap: 0 10px;}
.s_top .link_copy ul li a{display: block; width: 20px; height: 20px; font-size: 0; background: url('/images/citizencard/layout/sub_ico.png') no-repeat;}
.s_top .link_copy ul .sns a{background-position: 50% -103px;}
.s_top .link_copy ul .link a{background-position: 50% -30px;}
.s_top .link_copy ul .print a{background-position: 50% -68px;}
.s_top .link_copy .sns{position: relative;}
.s_top .link_copy .sns .sns_con{display: none; position: absolute; top: 24px; left: -11px; width: 40px; background: var(--point); padding: 10px; border-radius: 5px;}
.s_top .link_copy .sns.on .sns_con{display: block;}
.s_top .link_copy .sns.on .sns_con ul{flex-direction: column; gap: 10px 0;}
.s_top .link_copy .sns.on .sns_con ul a{width: auto; background: url('/images/citizencard/layout/s_sns.png') no-repeat;}
.s_top .link_copy .sns.on .sns_con ul li.naver a{background-position: 2px 3px;}
.s_top .link_copy .sns.on .sns_con ul li.face a{background-position: 50% -31px;}
.s_top .link_copy .sns.on .sns_con ul li.kakao a{background-position: 50% -67px;}
.s_top .link_copy .sns.on .sns_con ul li.x a{background-position: 50% -136px;}
.s_top .link_copy .sns.on .sns_con ul li.insta a{background-position: 50% -103px;}
.s_con{margin-bottom: 40px; line-height: 1.6em;}

@media all and (min-width:768px) {
header .gnb{margin: 0 0 0 auto;}

header h1 a span{width: 290px;height: 81px;margin-right: 50px;background-size: 290px;}
header h1 a span::after{right: -26px; height: 30px;}
header h1 a strong{margin-top: 48px;font-size: 34px;}

header .head>button{margin-bottom: 14px;}

footer .link{flex-direction: row;}
footer .link a{width: 200px;}

.s_top{padding: 60px 0;}
.s_top h2{font-size: 36px;}
.s_con{margin-bottom: 60px;}
}

@media all and (min-width:1200px) {
.wrap{margin: 0 5%;}
header .gnb ul li.sns.on{z-index: 9;}

header .head{flex-wrap: wrap;}
header .head>button{display: none;}

header h1{width: 100%; text-align: center;}
header h1 a span{width: 355px; background-size: auto;}

header nav{display: block !important; position: static; width: 100%;}
header nav::after{display: none;}
header nav div{width: 100%; max-width: 100%; height: auto; padding-top: 30px; position: static;}
header nav button{display: none;}
/* 1차메뉴 */
header nav ul{display: flex; justify-content: space-between;}
header nav ul li{position: relative;}
/* 2차메뉴 */
header nav ul ul{position: absolute;right: -50%;left: -50%;top: 55px;width: 230px;padding: 20px;margin: 0 auto;}
/* 3차메뉴 */
header nav ul ul ul{display: block; position: static; width: auto; padding: 10px 20px;  background: var(--bg4);}

footer .wrap{flex-direction: row; justify-content: space-between;}

.s_top{padding:80px 0;}
.s_top .s_top_inner{display: flex; justify-content: center; gap: 0 20px;}
.s_top h2{margin-bottom: 30px;}
.s_top .loca ul{margin-bottom: 0;}

}


@media all and (min-width:1600px) {
.wrap{width: 1500px; margin: 0 auto;}
}