@charset "utf-8";

/* set */
body {font-size:16px !important;margin:0;padding:0;font-family: GmarketSans,  NotoSans, 'Noto Sans KR', Dotum, "돋움", sans-serif;color:#101010;font-weight:400;}
input, select, button{font-family: GmarketSans, NotoSans, 'Noto Sans KR', Dotum, "돋움", sans-serif;}
body *{ box-sizing:border-box; vertical-align:middle;}
a {color: #101010; vertical-align: middle;}
::selection {background:#382d70;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_blue: #003aa9;
    --point_green: #82a710;
    --point_yellow: #ff8401;
    --bg_blue:#8fafed;
    --bg_green:#abdd5b;
    --bg_yellow:#ffd164;
    --grey: #999999;
    --white:#ffffff;
    --line:#e1e1e1;
    --black:#101010;
    --black2:#333333;
    --transition: all 0.3s ease-in-out;
    }


.wrap{margin: 0 4%;}

header{position: fixed;top: 0;width: 100%;/* border-bottom: 1px var(--line) solid; */z-index: 9;background: var(--white);}
header .wrap{display: flex; justify-content: space-between; height: 120px;}

.gnb{padding: 16px 0;border-bottom: 1px var(--line) solid;);}
.gnb *{font-size: 0.85rem;line-height: 1rem;} 
.gnb .wrap{flex-wrap:wrap;height: auto;gap: 10px;}
.gnb .g_sns{margin-bottom:10px;}
.gnb .g_sns ul{display:flex;flex-wrap: wrap;gap: 10px;}
.gnb .g_sns ul li a:before{content:'';display:inline-block;height: 20px;margin-right: 4px;margin-top: -2px;background:url('/images/youth/common/g_sns.png') no-repeat;vertical-align: text-top;}
.gnb .g_sns ul li:first-child a:before{ margin-right: 0;}
.gnb .g_sns ul li.youtube a:before{width: 23px;background-position: 0 50%;}
.gnb .g_sns ul li.blog a:before{width: 22px;background-position: -34px 50%;}
.gnb .g_sns ul li.insta a:before{width: 20px;background-position: -67px 50%;}
.gnb .g_visit span{color:var(--black);vertical-align: baseline;}
.gnb .g_visit p{display:inline-block;}
.gnb .g_visit .name{color: #454545;}
.gnb .g_visit .name:after{content:'';display:inline-block;width:1px;height:16px;margin: 0 10px;background:var(--line);vertical-align: middle;}

/* 상단 */
h1{align-self: center;line-height: 0.9em;}
h1 span{font-family: 'ONE Mobile POP'; font-size: 30px;}
h1 strong{font-size: 23px; color: var(--point_blue)}
h1.logo1 strong{color: var(--point_blue);}
h1.logo2 strong{color: var(--point_green);}
h1.logo3 strong{color: var(--point_yellow);}

.head{display: flex; align-items: center;}
.head>button{display: inline-block; width: 50px; font-size: 0;}
.head>button.open{height: 17px; background: url('/images/youth/common/lay_ico.png') no-repeat;  background-position: 0 -13px;}
.head>button.close{height: 40px; background: var(--white) url('/images/youth/common/close.png') no-repeat center;}

.tsitemap{display: none;}
.tlogin{display: inline-block;width: 32px;height: 32px;margin-left: 10px !important;padding: 0 !important;border-radius: 50% !important;font-size: 0;background: var(--black) url('/images/youth/common/lay_ico.png') no-repeat !important;background-position: center -40px !important;}
.tlogin:before{display:none;}

.mobile_back{position: fixed; top: 120px; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.8); z-index: 0;}
.menu{display: none; position: absolute; top: 120px; right: 0; width: 100%; max-width: 360px; height: 100vh; padding: 10px; background: #f1f6ff; z-index: 0;}
.menu.on{display: block;}

/* 1차메뉴 */
.menu>ul>li{width: 45%; margin: 10px 0; vertical-align: middle;}
.menu ul li a{display: block; padding: 10px; font-size: 0.9rem; line-height: 1.2rem;}
.menu>ul>li.on>a,
.menu>ul>li>a:hover,
.menu>ul>li>a:focus{background: var(--point_blue); color: var(--white); border-radius: 5px; transition: var(--transition);}

/* 2차메뉴 */
.menu li .deth_box{position: absolute; top: 0; right: 0; width: 50%; height: 100vh; padding: 10px; background: var(--white);}
.menu li li a{padding: 14px 10px; border-bottom: 1px var(--line) solid;}
.menu li li a:hover,.menu li li a:focus{color: var(--point_blue);}

/* 3차메뉴 */
.menu li li ul{padding: 10px; background: #f1f1f1;}
.menu li li li a{position: relative; padding: 6px 0 6px 10px; border: 0; font-size: 0.85rem;}
.menu li li li a::before{content: ''; position: absolute; top: 12px; left: 0; display: inline-block; width: 4px; height: 4px; background: var(--grey); border-radius: 5px;}

/* 4차메뉴 */
.menu li li li ul{background: var(--white); border-radius: 5px;}
.menu li li li li a{padding: 4px 0 4px 12px; color: var(--black2);}
.menu li li li li a::before{top: 10px; width: 6px; height: 3px; }

.new_win{display: inline-block; width: 14px; height: 14px; background: url('/images/youth/common/new_win.png') no-repeat; vertical-align: middle; margin-left: 4px; font-size: 0;}


/* 하단 */
footer{position: relative; padding: 20px 0 40px; background: #242424;}
footer::after{content: ''; position: absolute; top: 80px; left: 0; display: block; width: 100%; height: 1px; background: #373737;}

.f_banner{overflow: hidden; margin-bottom: 40px;}
.f_banner .btn{float: left; margin-right: 20px;}
.f_banner button{display: inline-block; width: 40px; height: 40px; border: 1px var(--white) solid; border-radius: 5px; font-size: 0; background: url('/images/youth/common/lay_ico.png') no-repeat;}
.f_banner button.prev{background-position: 50% -69px;}
.f_banner button.play{background-position: 50% -130px;}
.f_banner button.stop{background-position: 50% -100px;}
.f_banner button.next{background-position: 50% -162px;}
.f_banner .list{float: left; margin-top: 10px;}
.f_banner .list li{margin-right: 10px;}
.f_banner .list li a{display:block;text-align:center;color: var(--white);font-size: 0.9rem;background: #fff;border-radius: 5px;}
.f_banner .list li a:hover,.f_banner .list li a:focus{text-decoration: underline;}
.f_banner .list li a img{display: block;max-width: 100%;margin: 0 auto;}

.f_logo{margin-bottom: 20px; line-height: 32px; color: #fff;}
.f_logo span{font-family: 'ONE Mobile POP'; font-size: 30px;}
.f_logo strong{font-size: 23px;}

.f_add *{color:#757575;}
.f_add ul{margin-bottom: 20px;}
.f_add ul li{margin: 10px 0;}
.f_add ul li a{display: block; padding: 6px 0; text-align: center; border: 1px #373737 solid; border-radius: 5px; font-size: 0.9rem; transition: var(--transition);}
.f_add ul li a:hover,.f_add ul li a:focus{border: 1px var(--white) solid; color: var(--white);}
.f_add address{margin-bottom: 20px; font-style: normal; font-size: 0.9rem; line-height: 1.4rem; word-break: keep-all;}
.f_add address strong{display: block; margin: 10px 0 0;}
.f_add .copy{font-size: 0.8rem;}

.s_content{margin: 20px 4%;padding-top: 170px;}
.s_title{margin: 20px 0; text-align: center;}
.s_title .s_dept_tit{font-size: 1rem; font-weight: 600; color: var(--grey);}
.s_title h3{margin-bottom: 20px; font-size: 2rem;}
.s_menu{padding: 20px;background: #f6f6f6;border-radius: 20px;text-align: left;}
.s_menu .home{display: none;}
.s_menu ul{display: flex;flex-wrap: wrap;}
.s_menu>ul>li{position: relative;width: 100%;height: 45px;margin: 6px 0;background: #fff;border-radius: 10px;}
/* .s_menu>ul>li::after{content: ''; display: block; position: absolute; top: 4px; right: 0; width: 8px; height: 14px; background: url('/images/youth/common/s_menu.png') no-repeat; background-position: -22px 0; }
.s_menu>ul>li:last-of-type::after{display: none;} */
.s_menu>ul>li>a{position: relative;display: block;height: 45px;padding: 14px 20px;line-height: 1.2rem;vertical-align: middle;}
.s_menu>ul>li>a::after{content: '';display: block;position: absolute;top: 15px;right: 20px;width: 10px;height: 14px;background: url('/images/youth/common/s_menu.png') no-repeat;background-position:  0;}
/* .s_menu ul li a:hover,
.s_menu ul li a:focus,
.s_menu>ul>li.on>a{border-bottom: 1px var(--black) solid;} */
.s_menu ul ul{display: none;position: absolute;top: 50px;left: 0;right: 0;width: 100%;padding: 10px 20px;border-radius: 10px;background: var(--white);box-shadow: 10px 10px 20px #f4f4f4;z-index: 3;}
.s_menu li.on ul{display: block;}
.s_menu ul li li{margin: 10px 0;}
.s_menu ul li li a{font-size: 0.95rem;}
.s_menu ul li li a:hover,.s_menu ul li li a:focus{border-bottom: 1px var(--black) solid;}

/* 콘텐츠 영역 */
.s_con{margin-bottom: 20px;}

@media all and (min-width:768px) {
.gnb .g_sns{margin-bottom:0;}
.gnb .g_sns ul li{margin-right: 14px;}

h1{line-height: 40px;}
h1 strong{font-size: 32px;}
h1 span{font-size: 43px;}

.s_menu{display: flex;justify-content: center;align-items: center;gap: 1%;}
.s_menu .home{display: block;}
.s_menu .home a{display: block;width: 45px;height: 45px;background: #fff url('/images/youth/common/home.png') no-repeat center;font-size: 0;border-radius: 10px;}
.s_menu ul{width:100%;gap: 1%;}
.s_menu>ul>li{width: 33.33%;margin: 0;}
    
.f_banner .list li{margin-right: 20px;}
.f_banner .list li a{font-size: 1rem;}

.f_logo{position: absolute; bottom: 68px; margin-bottom: 0; line-height: 40px;}
.f_logo strong{font-size: 32px;}
.f_logo span{font-size: 43px;}

.f_add{padding-left: 270px;}
.f_add address{font-size: 1rem;}
.f_add .copy{font-size: 0.9rem;}
.f_add ul{display: flex;}
.f_add ul li{position: relative; margin:0 14px 0 0; padding-right: 14px; }
.f_add ul li::after{content: ''; position: absolute; top: 2px; right: 0; display: inline-block; width: 1px; height: 14px; background: #757575;}
.f_add ul li:last-of-type{margin: 0; padding-right: 0;}
.f_add ul li:last-of-type::after{display: none;}
.f_add ul li a{padding: 0; font-size: 1rem; border: none;}
.f_add ul li a:hover,.f_add ul li a:focus{border: none; text-decoration: underline;}
}

@media all and (min-width:1440px) {
header.bg{background: rgba(255,255,255,0.5)}
.wrap{width: 1300px; margin: 0 auto;}
header .wrap{padding: 0;}

.tsitemap{display: block; width: 50px; height: 17px; margin-left: 45px; background: url('/images/youth/common/lay_ico.png') no-repeat;  background-position: 0 -13px; font-size: 0;}

.head{min-width: 50%; justify-content: flex-end;}
.head>button{display: none;}

.menu{display: block !important; position: static; width: auto; max-width: none; height: auto; padding: 0; background: none;}
.menu ul{display: flex; gap: 45px;}
.menu>ul>li{width: auto; margin: 0;}
.menu>ul>li>a{height: 120px; padding: 48px 0; font-size: 1.3rem; line-height: 1.7rem;}
.menu>ul>li.on>a,
.menu>ul>li>a:hover,
.menu>ul>li>a:focus{color: var(--point_blue); background: none; border-bottom: 3px var(--point_blue) solid; border-radius: 0;}

.menu li .deth_box{top: 170px;width: 100%;height: auto;padding: 30px 0;border-bottom: 1px var(--line) solid;border-top: 1px var(--line) solid;}
.menu li ul{width: 1300px; margin: 0 auto; flex-wrap: wrap; gap: 0;}
.menu li li{width: 25%;}
.menu li li a{margin: 0 1% 10px; padding: 14px 20px; font-size: 1rem; border: 1px var(--line) solid; border-radius: 5px;}

.menu li li ul{display: block; width: auto; padding: 0 20px; background: none;}
.menu li li li{width: 100%; margin: 10px 0;}
.menu li li li a{padding: 0 0 0 10px; margin: 0; font-size: 1rem;}
.menu li li li a::before{top: 6px;}

.menu li li li ul{background: #f1f1f1; padding: 4px 20px; margin-top: 10px;}
.menu li li li li a{padding: 0 0 0 12px;}
.menu li li li li a::before{top: 7px;}

footer{padding: 20px 0 60px;}
.f_banner{margin-bottom: 80px;}
.f_add{padding-left: 350px;}
.f_add address{margin-bottom: 0px;}
.f_add address strong{display: inline-block; margin: 0;}

.s_content{width: 1300px; margin: 0 auto;}
.s_title{margin: 40px 0;}
.s_title .s_dept_tit{font-size: 1.5rem;}
.s_title h3{font-size: 2.6rem;}

.s_menu>ul>li{width:25%;}

.s_con{margin-bottom: 40px;min-height: 300px;}
}