@charset "utf-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

#page-header {position:absolute; height:210px; width:100%; z-index:65001;}

#page-header .inner {position:relative;}
#page-header .wrap {width:1240px;max-width:100%;margin:0 auto;}

#page-logo {z-index:2;position:absolute;top:0;}
#page-logo > div {max-width:100%;margin:0 auto;position:relative;}
#page-logo a {position:relative;left:0;top:80px;}
#page-logo a img {height:48px;}

#page-login {position:absolute;top:0;z-index:3;}
#page-login > div {width:1240px;max-width:100%;margin:0 auto;position:relative;}
#page-login a {display:block;float:right;color:#fff;height:40px;line-height:40px;text-decoration:none;margin-right:16px;}

#mobile-nav {position:relative;top:0;z-index:4;display:none;}
#mobile-nav > div {position:absolute;right:0;top:0;}
#mobile-nav > div > a {position:relative;display:block;width:60px;height:50px;padding:13px;}
#mobile-nav > div > a span {position:relative;font-size:0;background:#fff;left:0;top:15px;width:100%;height:4px;display:block;}
#mobile-nav > div > a span:before,
#mobile-nav > div > a span:after {content:'';display:block;position:absolute;left:0;top:-12px;width:100%;height:4px;background:#fff;}
#mobile-nav > div > a span:after {top:12px;}
#mobile-nav section {position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background:#fff;font-size:1.4rem;visibility:hidden;opacity:0;transform:translateY(-50%);transition:all .3s;}
#mobile-nav section div.closer {text-align:right;position:sticky;z-index:2;background:#fff;padding:20px 10px 20px 0;top:0;}
#mobile-nav section div.closer a {display:inline-block;width:32px;height:32px;line-height:32px;border-radius:50%;text-align:center;background:#1565c0;color:#fff;}
#mobile-nav section ul {display:block;padding:0;margin:0;list-style:none;text-align:center;line-height:2.5;}
#mobile-nav section ul:after {content:'';display:table;clear:both;}
#mobile-nav section li {display:block;}
#mobile-nav section ul a {display:block;color:#000;text-decoration:none;position:relative;}
#mobile-nav section > ul > li > a {font-weight:bold;}
#mobile-nav section > ul > li > a:before {content:'';display:none;width:100%;left:0;bottom:0;height:1px;background:#dfdfdf;position:absolute;}
#mobile-nav section > ul > li:hover > a:before {display:block;}
#mobile-nav section > ul > li:hover > a:after {content:'';display:block;width:50px;left:50%;bottom:-1px;height:3px;background:#1565c0;position:absolute;transform:translateX(-50%);}
#mobile-nav section > ul > li > ul {font-size:1rem;line-height:1.8;padding:8px 0 16px;border-bottom:dotted 1px #eee;}
#mobile-nav section > ul > li > ul > li:hover > a {color:#1565c0;}
#mobile-nav section > ul > li > ul > li > ul {font-size:0.9rem;line-height:1.5;padding:6px 0;}
#mobile-nav section > ul > li > ul > li > ul a:hover {color:#1565c0;}
#mobile-nav .logins {padding:2em 0;text-align:center;font-size:0.9rem;}
#mobile-nav .logins a {color:#673ab7;}
#mobile-nav .logins a + a {margin-left:1em;}

#mobile-nav.on section {transform:none;opacity:1;visibility:visible;}

#page-nav{}
#page-nav a {text-decoration:none; color:#000;}
#page-nav > ul {display:table;table-layout:auto;padding:0;margin:0;list-style:none;width:100%;padding:0 0 0 350px; }
#page-nav > ul > li {display:table-cell;vertical-align:top;min-width:100px;}
#page-nav > ul > li > a {line-height:220px;height:140px;color:#fff;overflow:hidden;font-size:21px;font-weight:500;display:block;width:100%;justify-content:center;align-items:center;text-align:center;position:relative;z-index:2;}
#page-nav > ul > li > a > span {display:inline-block;position:relative;padding:0 6px;overflow:hidden;line-height:1;}
#page-nav > ul > li:hover > a {color:#2764d6;}
#page-nav > ul > li > a > span:after {content:'';display:block;position:absolute;bottom:-6px;left:50%;width:0;height:16px;background:#2764d6;opacity:.3;transition:all .2s linear;}
#page-nav > ul > li:hover > a > span:after {left:0;width:100%;}
#page-nav .last{padding-right:0px;}

#page-nav .sub-nav {position:absolute;left:0;top:100%;width:100%;background:#fff;}
#page-nav .sub-nav > ul {display:block;padding:0 0 40px 0;margin:0;list-style:none;margin:0 auto;margin-top:40px;}
#page-nav .sub-nav > ul:after {content:'';clear:both;display:table;}
#page-nav .sub-nav > ul > li {display:block;float:left;width:25%;padding:20px 10px 0 10px;}
#page-nav .sub-nav > ul > li:nth-child(4n+1) {clear:left;}
#page-nav .sub-nav.c-3 > ul > li {width:33.3%;}
#page-nav .sub-nav.c-3 > ul > li:nth-child(4n+1) {clear:none;}
#page-nav .sub-nav.c-3 > ul > li:nth-child(3n+1) {clear:left;}
#page-nav .sub-nav > ul > li > a {display:block;text-align:center;padding:5px 0;font-weight:500;font-size:1.1em;}
#page-nav .sub-nav > ul ul {display:block;margin:0;padding:10px 0;list-style:none;}
#page-nav .sub-nav > ul ul li {line-height:1.8;}
#page-nav .sub-nav > ul ul a {font-size:1em;position:relative;display:block;padding-left:16px;color:#fff;}
#page-nav .sub-nav > ul ul a:before {content:'';display:block;width:3px;height:3px;background:#fff;position:absolute;left:8px;top:10px;}
#page-nav .sub-nav > ul ul a:hover {color:#fff; text-decoration:underline;}

#page-nav .sub-nav > ul > li > a {position:relative; overflow:hidden; border:solid 1px #fff; color:#fff;}
#page-nav .sub-nav > ul > li > a > span {position:relative;z-index:2;}
#page-nav .sub-nav > ul > li > a:before {content:'';display:block;width:100%;height:100%;background:#fff;position:absolute;left:0;top:0;transform:translateX(-110%);}
#page-nav .sub-nav > ul > li > a,
#page-nav .sub-nav > ul > li > a:before {transition:all .2s;}
#page-nav .sub-nav > ul > li:hover > a {color:#3591ba;}
#page-nav .sub-nav > ul > li:hover > a:before {transform:translateX(0);}

#page-header .wrap {padding:0;}
#page-nav .sub-nav {max-height:0;overflow:hidden;background:#fff;}
#page-nav .sub-nav > ul {padding:0 40px 40px 320px;position:relative;min-height:180px;width:1240px;max-width:100%;}
#page-nav .sub-nav > ul:before {content:'';color:#fff;background:#62b5df no-repeat 0 20px; position:absolute;left:40px;height:100%;width:100%;}
#page-nav .sub-nav.biz > ul:before {background-image:url(/assets/img/sc_navi_home_bg.png);}
#page-nav .sub-nav.give > ul:before {background-image:url(/assets/img/sc_navi_center_bg.png);}
#page-nav .sub-nav.info > ul:before {background-image:url(/assets/img/sc_navi_edu_bg.png);}
#page-nav .sub-nav.board > ul:before {background-image:url(/assets/img/sc_navi_online_bg.png);}
#page-nav .sub-nav.yd > ul:before {background-image:url(/assets/img/sc_navi_notice_bg.png);}

/* #page-nav .sub-nav {transition:opacity .1s;} */
#page-nav > ul > li.active .sub-nav,
#page-nav > ul > li:hover .sub-nav,
#page-nav > ul > li:focus-within .sub-nav {max-height:600px;z-index:2;border-top:solid 1px #eee;background:#62b5df;}

/* mouse hover in #page-header */
#page-header .inner {transition:background .2s linear;}
#page-header .inner #page-logo a:after {content:'';opacity:0;position:absolute;left:0;top:0;width:100%;height:100%;background:url(/assets/img/sc_top_logo.png) no-repeat 0 0;transition:opacity .2s linear;}
#page-header .inner #page-logo a {display:inline-block;}
#page-header .inner:has(ul:hover),
#page-header .inner:focus-within {background:#fff;}
#page-header .inner:has(ul:hover) #page-login a,
#page-header .inner:focus-within #page-login a {color:#000;}
#page-header .inner:has(ul:hover) #page-nav > ul > li > a,
#page-header .inner:focus-within #page-nav > ul > li > a {color:#000;}
#page-header .inner:has(ul:hover) #page-logo a:after,
#page-header .inner:focus-within #page-logo a:after {opacity:1;}

#page-footer {min-height:300px;background:#3f3f3f;color:#efefef;font-size:16px;position:relative;}
#page-footer a {color:#fff;text-decoration:none;}
#page-footer .inner {max-width:1240px;padding:60px 0;margin:0 auto;position:relative;}
#page-footer .bottom-nav {display:block;margin:0;padding:0;list-style:none;}
#page-footer .bottom-nav li {display:inline-block;margin-right:1em;}
#page-footer .bottom-nav li.privacy-rule a {color:#ffc107;}
#page-footer .bottom-info {line-height:1.8;position:relative;z-index:2; float:left;}
#page-footer .bottom-sns{float:right;}
#page-footer .goto-top {position:absolute;right:0;top:-80px;font-size:100px;line-height:1;color:#3f3f3f;}

@media all and (max-width:1279.8px) {
	#page-header .inner #page-logo a:after {display:none;}
	#page-login {width:100%;display:none;}
    #page-nav {display:none;}
	#page-header {height:auto;}
	#page-logo a {top:10px;left:10px;}
	#mobile-nav {display:block;}

    #page-footer {padding-left:10px;padding-right:10px;font-size:13px;}
}

@media all and (min-width:769px) {
	#mobile-nav section > ul > li {width:33.33%;float:left;padding-bottom:30px;padding-left:5px;padding-right:5px;}
	#mobile-nav section > ul > li:nth-child(3n+1) {clear:left;}
	#mobile-nav section > ul > li > ul {border-bottom:none;}
	#mobile-nav section > ul > li > a:before {display:block;}
}

@media all and (max-width:768px) {
    #page-nav .sub-nav.cs-2 > ul > li {width:50%;}
    #page-nav .sub-nav.cs-2 > ul > li:nth-child(3n+1) {clear:none;}
    #page-nav .sub-nav.cs-2 > ul > li:nth-child(2n+1) {clear:left;}
}

@media all and (max-width:640px) {
    #page-view {min-width:320px;}
    #page-header {height:60px;}

    #page-logo a {left:10px;top:10px;}
    #page-logo a img {height:40px;}

    #page-footer .inner:after {opacity:0.1;width:100%;top:auto;bottom:0;background-position-x:50%;}
    #page-footer .bottom-nav {text-align:center;}
    #page-footer .bottom-nav li {margin-left:0.5em;margin-right:0.5em;}
}