@charset "UTF-8";

/* 공통클래스 */
.fclear::after{content: "";clear: both;display: block;}
.scroll_zone {overflow:auto;}

/* 영역 건너띄기 */
.area-skip {position:fixed; top:-10000px; left:-100000px; padding:10px 15px; background:#ffffff; border-radius:10px; font-size:16px; color:#000000; text-align:center; z-index:200;}
.area-skip:focus {top:25px; left:25px;}

/* 탭 */
.tab_cont:not([data-tabactive=true]) {position:absolute !important; top:-99999999px !important; left:-99999999px !important; width:100%; overflow:hidden;}

/* 레이아웃 - 헤더 */
header {position:absolute; height:86px; width:100%; background:#ffffff; z-index:3;}
header .logo {position:absolute; top:9px; left:100px; z-index:103;}
header nav {position:relative; z-index:102;}
header nav a {letter-spacing:-1.5px;}
header nav>ul {position:relative;width: calc(100% - 530px);max-width:1200px;margin:0 auto;text-align:center;margin-left: 370px;}
header nav>ul>li {position:relative;float:left;width: calc(100% / 8);}
header nav>ul>li:not(:nth-child(1)):before {content:""; position:absolute; display:block; left:0; top:33px; width:1px; height:20px; background:#cccccc; transform:rotate(10deg);}
header nav>ul>li>a {display:block;line-height:86px;font-size:18px;padding: 0 8px;color:#000000;text-align:center;}
header nav>ul>li>a>span {position:relative;}
header nav>ul>li>ul {padding:15px 0; display:none;}
header nav>ul>li>ul>li {padding:8px 0;}
header nav>ul>li>ul>li>a {display:block; font-size:15px; color:#000000; text-align:center;}
header .nav_bg {display:none; position:absolute; top:86px; height:270px; left:0; width:100%; border-top:1px solid #6f767c; background:#ffffff; z-index:101;}
header .full_bg {display:none; position:fixed; top:86px; left:0; height:calc(100% - 86px); width:100%; background:rgba(0,0,0,0.5); z-index:100;}
header .hd_wrap{z-index:103; position: absolute; right: 40px; top: 24px;}
header .hd_access {font-size: 13px; color: #aaa; width:115px; float:left; margin-right:20px;}
header .hd_access p span {float: right; }
header .hd_btns {border:1px solid #e2e1e1; float:left; margin-top:4px;}
header .hd_btns>.btns {position:relative; display:inline-block; vertical-align:top;}
header .hd_btns>.btns>a {position:relative; display:inline-block; width:80px; height:30px; line-height:30px; font-size:12px; color:#898989; text-align:center;}
header .hd_btns>.btns>a:before {content:""; position:relative; top:-2px; display:inline-block; margin-right:5px; vertical-align:middle;}
header .hd_btns>.btns>a.login:before {width:15px; height:15px; background:url(../images/common/icon_login.png) no-repeat;}
header .hd_btns>.btns>a.join:before {width:10px; height:15px; background:url(../images/common/icon_join.png) no-repeat;}
header .hd_btns>.btns>a.sitemap:before {width:12px; height:12px; background:url(../images/common/icon_sitemap.png) no-repeat;}
header .hd_btns>.btns>a:hover {color:#333333;}
header .hd_btns>.btns>a:not(:nth-child(1)):after {content:""; position:absolute; top:10px; left:0; width:1px; height:10px; background:#e1e1e1;}
@media (min-width:1401px) { /* 20221114 */
    header nav>ul>li>a:hover>span:before {content:""; position:absolute; left:-5px; top:5px; bottom:5px; right:-5px; background:#ffe776; z-index:-1;}
    header nav>ul>li>ul>li>ul {display:none;}
    header nav>ul>li>ul>li>a>span {position:relative; display:inline-block; z-index:1;}
    header nav>ul>li>ul>li>a:hover>span:before {content:""; position:absolute; left:-5px; top:5px; bottom:5px; right:-5px; background:#ffe776; z-index:-1;}
    header.over nav>ul>li>ul,
    header.over .nav_bg,
    header.over .full_bg {display:block;}
    header .hd_btns>.btns>a.home,
    header .hd_btns>.btns>a.close {display:none;}
    header .hd_btns>.btns>a.login:hover,
    header .hd_btns>.btns>a.join:hover {border-color:#777777;}
    header .mbmn_btn {display:none;}
}
@media (max-width:1800px){
    header .logo {left:20px;}
    header nav>ul{margin-left: 270px;}
    header nav>ul>li>a {font-size:15px;}
    header nav>ul>li>ul>li>a {font-size: 14px;}
}
@media (max-width:1650px){
    header .hd_btns {right:20px;}
}
@media (max-width: 1500px) {
    header nav>ul>li>a {font-size: 14px;padding: 0 5px;}
}
@media (max-width: 1400px) {
    header {text-align:left; height:86px;}
    header .logo {position:relative;top: 11px;left: 20px;z-index:210;max-width: calc(100% - 90px);display: block;}
    header nav {position:fixed; top:0; right:0; width:100%; height:100%; background:#ffffff; z-index:200;}
    header nav>ul {position:absolute;top:0;left:0;width: 158px;height:100%;background:#eaeaea;padding:110px 0 0 0;margin-left: 0;}
    header nav>ul>li {width:100%;}
    header nav>ul>li>a {line-height:50px;}
    header nav>ul>li>a:hover>span {color:#16569e;}
    header nav>ul>li>ul>li>a:hover>span {color:#16569e;}
    header nav>ul>li>ul {position:fixed; top:0; right:0; width:calc(100% - 180px); height:100%; padding:110px 0 0 0;}
    header nav>ul>li.click>ul {display:block;}
    header nav>ul>li>ul>li {padding:0;}
    header nav>ul>li>ul>li>a {font-size: 14px;text-align:left;padding: 14px 5px;}
    header nav>ul>li>ul>li>ul>li>a {font-family: 's-core-dream-regular'; font-size:14px; text-align:left; line-height:30px; color:#777777; padding:0 20px;}
    header nav>ul>li>ul>li>ul>li>a:before {content:"-"; display:inline-block; margin-right:5px;}
    header nav>ul>li>ul>li>ul>li>a:hover {color:#16569e;}
    header .full_bg {display:block; top:0; height:100%;}
    header .hd_wrap{ right: 78px; }
    header .hd_btns {position:fixed; top:0; right:0; height:86px; width:100%; background:#ffffff; z-index:201;}
    header .hd_btns>.btns {width:100%; top:0; text-align:right; padding:0 40px;}
    header .hd_btns>.btns>a {display:inline-block !important; vertical-align:top; line-height:80px;}
    header .hd_btns>.btns>a:not(:nth-child(1)):after {top:35px;}
    header .hd_btns>.btns>a.close {position:relative; width:40px; height:40px; margin:20px 0 20px 20px;}
    header .hd_btns>.btns>a.close:before {content:""; position:absolute; top:0; left:50%; width:4px; height:40px; margin-left:-1px; background:#364064; transform:rotate(45deg);}
    header .hd_btns>.btns>a.close:after {content:""; position:absolute; top:0; left:50%; width:4px; height:40px; margin-left:-1px; background:#364064; transform:rotate(-45deg);}
    header.mbmn_open .logo {position:fixed;}
    header:not(.mbmn_open) nav,
    header:not(.mbmn_open) nav > ul > li.click > ul,
    header:not(.mbmn_open) .hd_btns {transform:translateX(110%);}
    header:not(.mbmn_open) .full_bg {display:none;}
    header .mbmn_btn {position:absolute;top:30px;right: 20px;}
    header .mbmn_btn>div {width:30px; height:4px; background:#ee7b2f;}
    header .mbmn_btn>div:not(:nth-child(1)) {margin-top:7px;}
    
    header a.menu_close {position:absolute; width:40px; height:40px; margin:20px 0 20px 20px; right:20px; z-index: 99;}
    header a.menu_close:before {content:""; position:absolute; top:0; left:50%; width:4px; height:40px; margin-left:-1px; background:#ee7b2f; transform:rotate(45deg);}
    header a.menu_close:after {content:""; position:absolute; top:0; left:50%; width:4px; height:40px; margin-left:-1px; background:#ee7b2f; transform:rotate(-45deg);}
}
@media (max-width: 600px) {
    header .hd_btns>.btns>a:not(.close) {display:none !important;}
    header .hd_access{display: block; position: absolute; background-color: #fff; top: 57px; width: 100vw; right: -78px; margin: 0; text-align: center; padding-top: 5px; padding-bottom: 4px; border-top:1px solid #ddd;}
	header .hd_access p{display: inline-block; margin: 0 5px;}
}

/* 레이아웃 - 푸터 */
footer {position:relative; padding-bottom:20px; background:#ffffff; font-family: 's-core-dream-regular';}
footer .terms {border-top:1px solid #e2e1e1; border-bottom:1px solid #e2e1e1; text-align:center; margin-bottom:20px;}
footer .terms>a {position:relative; display:inline-block; line-height:55px; font-size:14px; color:#696969; padding:0 20px;}
footer .terms>a:hover {color:#000000;}
footer .terms>a:not(:nth-child(1)):before {content:""; position:absolute; top:50%; left:0; width:1px; height:10px; margin-top:-5px; background:#d7d7d7;}
footer .footer_logo {float:left;}
footer address {float:left; width:690px; padding-left:60px;}
footer address>p {position:relative; float:left; font-size:13px; color:#818181; padding:0 30px 5px 30px;}
footer .r {float:right;}
footer .sns {float:left; padding:0 30px;}
footer .sns>li {display:inline-block;}
footer .familysite {float:left; width:155px; height:35px; font-size:14px; color:#696969; border:1px solid #ababab; padding:0 15px; background:rgba(0,0,0,0);}
@media(max-width:1250px) { 
    footer address {width:420px;}
    footer address>p {width:100%;}
    footer address>p:nth-child(2):before {display:none;}
}
@media(max-width:1100px) {
    footer .sites .sites_slider {margin-left:20px;}
    footer .terms>a {font-size:14px; padding:0 10px;}
    footer .terms>a:before {display:none;}
}
@media(max-width:1000px) {
    footer .sns {position:absolute;top:0px;right:0;padding: 0 0px;}
    footer .familysite {position:absolute; top:-60px; left:0; width:100%;}
    footer .footer_cont {padding-top:60px; text-align:center;}
    footer address {float:none; display:inline-block; width:100%; padding:20px 0 0 0;}
    footer address>p {padding:0 0 5px 0; font-size:12px; text-align:left;}
}
@media(max-width:500px) { 
    footer .terms>a {font-size:13px;}
    header .logo{width:200px;top: 18px;}
}

/* 레이아웃 - 퀵메뉴 */
main .r_quick {position:fixed; right:50px; bottom:170px; z-index:10;}
main .r_quick h1 {width:75px; margin:0 auto; font-size:14px; color:#ffffff; background:#17356f; padding:2px 10px;}
main .r_quick h1:after {content:""; position:absolute; top:30px; left:50%; width:8px; height:10px; margin-left:-4px; background:url(../images/main/r_quick_arrow.png) no-repeat;}
main .r_quick a {position:relative; display:block; width:90px; height:90px; padding-top:55px; font-size:12px; color:#ffffff; text-align:center; border-radius:45px; box-shadow:1px 1px 8px -3px #666666;}
main .r_quick a.online {margin-top:20px; background:#61b500;}
main .r_quick a.offline {margin-top:10px; background:#0151aa;}
main .r_quick a.online:hover {background:#3db500;}
main .r_quick a.offline:hover {background:#0145aa;}
main .r_quick a.online:before {content:""; position:absolute; top:18px; left:0; width:100%; height:30px; background:url(../images/main/icon_online.png) 50% 50% no-repeat;}
main .r_quick a.offline:before {content:""; position:absolute; top:18px; left:0; width:100%; height:30px; background:url(../images/main/icon_offline.png) 50% 50% no-repeat;}
@media(max-width:1650px) {
    main .r_quick {display:none;}
}