@charset "utf-8";

/* set */
input[type="submit"]{-webkit-appearance:none;-webkit-border-radius:0;}
body{font-size:16px;font-family:Pretendard, sans-serif;color:#464646;font-weight:400;}
input, select, button{font-family:SCDream, "에스코어드림", NotoSans, 'Noto Sans KR', Dotum, "돋움", sans-serif;}
body *{box-sizing:border-box;}

/*header*/
.new_win{display:inline-block;width:15px;height: 13px;overflow:hidden;margin:0 0 0 7px;vertical-align:baseline;background: url("/images/01_portal/common/ico_cmd.png")0px -120px;font-size: 0;}
header{position:absolute;top:0;left:0;width:100%;right:0;z-index:2;}
.gnb{position:absolute;top:16px;right:0;display:none;}
.gnb ul{display:flex;justify-content:space-between;align-items:center;border:solid 1px rgba(255,255,255,.7);border-radius:50px;overflow:hidden;padding:0 20px;}
.gnb li a{color:#fff;padding:10px 20px 10px 10px;display:block;font-size: 16px;}
.gnb li button{font-size:0;width:35px;height:20px;background:url("/images/02_governor/common/menu.png")no-repeat center;position:relative;}
.gnb li button:before{display:block;content:'';width:1px;height:15px;background:rgba(255,255,255,.3);position:absolute;left:-8px;top:4px;}

.head{font-weight:500;padding:15px;}
.head h1{font-family:'SCDream';box-sizing:border-box;font-size:19px;display:flex;align-items:center;}
.head h1 a{display:inline-block;width:182px;height:0;padding:38px 0 0 0;background:url("/upload_data/user_file/01_portal/common/logo.png") no-repeat 0 -38px;background-size:182px;overflow:hidden}
.head h1 img{display:inline-block;width:32px;}
.head > button{display:block;position:absolute;top:15px;right:15px;width:49px;height:35px;font-size:0;background:url("/images/02_governor/common/menu.png")no-repeat center;overflow:hidden;border:solid 1px rgba(255,255,255,.5);border-radius:20px;}

/*menu*/
.menu_back{display:block;content:'';width:100%;height:100vh;background:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;bottom:0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:all 0.5s ease-out 0s;z-index:1;}
.menu{display:none;position:fixed;top:0;bottom:0;right:0;width:80%;min-width:320px;background:#e9eaf1;z-index:3;}
.menu>ul>li>a{display:block;color:#181818;width:120px;padding:20px 0 20px 6px;font-size: 17px;}
.menu li li ul{display:none;margin:10px;}
.menu li li.on ul{display:block;}
.menu li li li a{padding:3px 0 3px 7px;color:#fbfbfb;font-size:15px;display:block;position:relative;}
.menu li li li a:before{display:block;content:'';position:absolute;left:0;top:12px;width:2px;height:2px;border-radius:50%;background:#ddd;}
.depth_box{position:absolute;top:0;left:120px;right:0;bottom:0;background:#034694;z-index:1;padding-top:45px;}
.depth_boxcon p{display:none;}
.depth_boxcon>ul>li>a{display:block;padding:10px 15px;color:#fff;font-size: 16px;border-bottom:solid 1px rgba(255,255,255,.2);position:relative;}
.depth_boxcon>ul>li>a:after{content:"";display:block;width:20px;height:20px;background:url("/images/01_portal/common/ico_cmd.png") no-repeat -120px -120px;position:absolute;top:50%;right:0;transform:translate(0, -50%)}
.depth_boxcon ul .depth1 a:after{display:none;}
.menu button{display:none;position:absolute;top:5px;right:10px;width:38px;height:38px;background:#373b5c url(/images/02_governor/common/c_b.png) no-repeat  center 6px;overflow:hidden;border-radius:50%;font-size:0;z-index:1;}
header.on .menu{display:block;}
header.on .menu button{display:block;}

/*footer*/
footer{position:relative;padding:30px 15px;}
.foot{color:#9897a2;display:inline-block;}
.foot ul{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom: 20px;}
.foot li{display:inline-block;/* margin:0 10px; */position:relative;width:48%;text-align: center;}
.foot li:before{display:block;content:'';width:1px;height:15px;background:#ddd;position:absolute;left: 0;top:5px;}
.foot li:first-child{margin-left:0}
.foot li:first-child:before{display:none;}
.foot li a{color:#7e7d8a;font-weight:600;}
.foot li strong{color:#6c689d;}
.foot address{font-style:normal;word-break:keep-all;}
footer .f_logo{color:#7e7d8a;display:flex;align-items:center;font-weight:bold;font-size:21px;margin-top:20px;}
footer .top{position:absolute;right:15px;bottom:10%;}
footer .top a{display:block;width:70px;height:70px;background:#fff url("/images/02_governor/common/top.png")no-repeat center / 30px;color:#fff;font-size:12px;text-align:center;overflow:hidden;border-radius:50%;border:solid 1px #6f66ba;}

/* Tablet */
@media all and (min-width:768px){
.head > button{top:25px;}
.head h1{font-size:22px;}
.head h1 img{width:auto;}
.head h1 a{width:215px;padding:45px 0 0 0;background-size:auto;background-position:0 -45px;}

.foot ul{display:inline-block;margin-bottom:0;}
.foot li{margin:0 15px 20px 15px;width: auto;text-align: left;}
.foot li:before{left:-15px;}
footer .f_logo{float:right;font-size:27px;}
footer .top{bottom:auto;top:-40px;}
footer .top a{width:85px;height:85px;box-shadow:2px 2px 18px rgba(255,255,255,.3);}
}

/* Desktop */
@media all and (min-width:1023px){
.new_win{background-position:-20px -120px}
.gnb{display:block;position:relative;top:auto;}
.gnb button{padding-right:15px;}
.tsitemap{display:block;}

.head{margin:0 auto;display:flex;justify-content:space-between;padding:0;align-items:center;max-width:1400px;height:96px;}
.head>button{display:none;}
header.on{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);}
header.on h1 a{color:#2a2a2a;background-position:0 0} 
header.on .menu>ul>li>a{color:#2a2a2a} 
header.on .gnb ul{background:#373b5c;}
 
.menu button{display:none !important;}
.menu{display:block;position:static;width:100%;width:calc(100% - 500px);background:none;}
.menu ul{display:flex;flex-wrap:wrap;}
.menu>ul{justify-content:space-around;}
.menu>ul>li{width:auto;position:relative;}
.menu>ul>li>a:after{bottom:21px;}
.menu>ul>li>a{font-size:19px;padding:35px 0;position:relative;text-align:center;color:#fff;width:auto;font-weight:600;} 
.menu>ul>li>a:before{display:block;position:absolute;width:110%;height:13px;content:'';transform:scaleX(0);transition:transform 250ms linear;z-index:0;border-radius:0;top:auto;border-radius:50px;top:56%;z-index:-1;left:-5%;background-color:rgba(110, 120, 253, .3);}
.menu>ul>li:hover>a:before,
.menu>ul>li:focus>a:before,
.menu>ul>li:active>a:before{transform:scaleX(1);}
.menu li li ul{margin:0;position:absolute;top:-11px;left:240px;width:220px;box-shadow:4px 4px 7px rgba(0, 0, 0, .2);padding:10px 20px;background:#fff;}
.menu li li:hover ul,
.menu li li:focus ul{display:block;}
.menu li li li a:hover,
.menu li li li a:active{color:#0089d0}
.menu li li ul:after{content:"";display:block;border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;top:15px;left:-9px}


.depth_box{background:#034694;top:96px;bottom:unset;right:50%;transform:translate(50%, 0);box-shadow:4px 4px 7px rgba(0, 0, 0, .2);left:auto;width:240px;padding:15px 0;}
.depth_boxcon p{display:none}
.depth_boxcon>ul{position:relative;width:auto;display:block;}
.depth_boxcon a:hover,
.depth_boxcon a:focus{text-decoration:underline;}
.depth_boxcon>ul>li{position:relative;}
.depth_boxcon>ul>li>a{padding:11px 20px;border:none;}
.depth_boxcon>ul>li>a:after{right:10px;}
header.on .menu .depth_box{display:block;}
.menu li li li a{color:#2a2a2a;}
.menu li li li a:before{background-color:#464646}
    
footer{max-width:1400px;margin:0 auto;padding:40px 0;}
}

@media all and (min-width:1400px){
footer .top{right:-10%;}
}  

header.sub {position:relative;border-bottom:solid 1px #ddd;}
header.sub  h1 a,
header.sub .menu>ul>li>a{color:#000;background-position:0 0;}
header.sub .gnb ul,
header.sub .head > button{background-color:#373b5c;}              

.layer_pop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0, 0, 0, .4);backdrop-filter:blur(4px);z-index:5}
.layer_pop>div{position:absolute;top:20px;left:50%;width:90%;transform:translate(-50%, 0)}
.layer_pop .con img,.layer_pop .con iframe{width:100%}
.layer_pop p{background:#4a4a4a;overflow:hidden}
.layer_pop p a{float:left;width:50%;padding:10px 0;color:#fff;font-size:15px;text-align:center;position:relative}
.layer_pop p a:first-child:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;width:1px;background:rgba(255, 255, 255, .2)}
.layer_pop p a:hover,.layer_pop p a:focus{background:#0089d0}
@media all and (min-width:768px) {
.layer_pop>div{top:50%;transform:translate(-50%, -50%);width:auto}
.layer_pop .con iframe{width:600px;height:400px}
.layer_pop .con img{width:auto}
}
@media all and (min-width:1023px) {
.layer_pop .con iframe{width:950px;height:530px}
}