@charset "UTF-8";

body.allgnb-open{overflow:hidden}

/* **************************************** *
 * gt-layout
 * **************************************** */
.gt-layout{display:flex; flex-direction:column; position:relative; overflow:hidden; box-sizing:border-box}


/* **************************************** *
 * gt-header
 * **************************************** */
#gt-header{position:absolute; top:0; left:0; right:0; background-color:transparent; z-index:9; box-sizing:border-box}
#gt-header .header-inner{display:flex; align-items:center; width:140rem; height:12rem; margin:0 auto; box-sizing:border-box}
#gt-header #logo{display:inline-flex; align-items:center; position:relative; top:1.7rem; z-index:99}
#gt-header #logo a{display:block; width:10.6rem; height:15.2rem; background:url("../img/layout/logo.png") no-repeat 50% 50%; background-size:10.6rem 15.2rem}

#gnb{position:absolute; top:0; right:0; left:0; background-color:transparent; overflow:hidden}
#gnb .gnb-inner{display:flex; align-items:center; justify-content:center; position:relative; width:140rem; margin:0 auto; box-sizing:border-box}
#gnb .gnb-inner .gnb-menu{display:flex; align-items:center}
#gnb .gnb-inner .gnb-menu > li > a{display:flex; align-items:center; justify-content:center; position:relative; height:12rem; margin:0 2.5rem; box-sizing:border-box}
#gnb .gnb-inner .gnb-menu > li > a:before{content:''; position:absolute; left:0; right:0; bottom:1rem; height:0; background-color:#56ffbd; transition:all .10s ease}
#gnb .gnb-inner .gnb-menu > li:last-child > a:after{display:none}
#gnb .gnb-inner .gnb-menu > li > a > span{color:#fff; font-size:2.2rem; font-weight:600; letter-spacing:-0.08rem; transition:all .35s ease}

#gnb .gnb-inner .gnb-menu > li:hover > a:before{height:0.4rem}
#gnb .gnb-inner .gnb-menu > li:hover > a > span{color:#56ffbd}

.allgnb-handle{display:none; position:absolute; right:50%; top:50%; margin-top:-3.5rem; margin-right:-70rem; z-index:99}
.allgnb-handle .allgnb-open{display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:0.7rem; position:relative; width:7rem; height:7rem; background:none; border:0; cursor:pointer; box-sizing:border-box}
.allgnb-handle .allgnb-open:before,
.allgnb-handle .allgnb-open:after{content:''; position:relative; width:100%; height:0.3rem; background:#fff; transition:all .20s ease}
.allgnb-handle .allgnb-open strong{display:block; width:3rem; height:0.3rem; background:#fff; transition:all .20s ease}
.allgnb-handle .allgnb-open:hover:before,
.allgnb-handle .allgnb-open:hover:after{width:3rem}
.allgnb-handle .allgnb-open:hover strong{width:100%}

.allgnb-handle .allgnb-open.active strong{display:none}
.allgnb-handle .allgnb-open.active:before{top:-0.3rem; transform: translateY(0.9rem) rotate(-45deg)}
.allgnb-handle .allgnb-open.active:after{top:-1.2rem; transform: translateY(0.9rem) rotate(45deg)}
.allgnb-handle .allgnb-open.active:hover:before,
.allgnb-handle .allgnb-open.active:hover:after{width:100%}

.allgnb-layer{display:none; position:fixed; left:0; top:0; right:0; bottom:0; background:#041834; overflow-x:hidden; overflow-y:auto; z-index:9}
.allgnb-layer:after{content:''; position:fixed; right:-6rem; bottom:-18rem; width:69.6rem; height:55.4rem; background:url("../img/main/visual-gcoin-r.png") no-repeat 50% 50%; background-size:69.6rem; height:55.4rem}
.allgnb-layer.active{display:block}
.allgnb-layer .allgnb-inner{display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; height:100%; padding:2rem; box-sizing:border-box}
.allgnb-layer .allgnb-nav{display:flex; flex-direction:column; gap:3.5rem; position:relative; top:-2rem; z-index:1}
.allgnb-layer .allgnb-nav .depth a{display:flex; align-items:center; justify-content:center; text-align:center}
.allgnb-layer .allgnb-nav .depth a span{line-height:3.7rem; color:#fff; font-size:3.7rem; font-weight:600; letter-spacing:-0.5px; transition:all .20s ease}
.allgnb-layer .allgnb-nav .depth a:hover span{color:#56ffbd}


/* **************************************** *
 * container
 * **************************************** */
#gt-mcontainer{flex:1; height:100%; min-height:60rem; box-sizing:border-box}
#gt-mcontainer .page-content .dev-content{position:relative}

#gt-scontainer{flex:1; box-sizing:border-box}
#gt-scontainer .page-content{position:relative; width:140rem; min-height:60rem; margin:0 auto; padding:12rem 0 12rem; box-sizing:border-box}


/* **************************************** *
 * gt-footer
 * **************************************** */
#gt-footer{position:relative; background-color:#041834}
#gt-footer .footer-inner{display:flex; justify-content:space-between; width:140rem; min-height:33rem; margin:0 auto; padding-bottom:14rem; box-sizing:border-box}
#gt-footer .footer-l,
#gt-footer .footer-r{display:flex; flex-direction:column; position:relative}
#gt-footer .footer-r{padding-top:8rem}

#gt-footer .footer-logo{display:inline-flex; position:relative; top:-2rem; width:10.6rem; height:15.2rem; background:url("../img/layout/logo.png") no-repeat 50% 50%; background-size:10.6rem 15.2rem}
#gt-footer .footer-fnb{display:flex; flex-direction:column; gap:1rem; margin-top:auto}
#gt-footer .footer-fnb a span{line-height:2.2rem; color:#fff; font-size:1.7rem; font-weight:300; letter-spacing:-0.05rem}
#gt-footer .footer-fnb a.privacy span{color:#56ffbd}
#gt-footer .footer-fnb a.logout span{color:#7eff00}
#gt-footer .footer-fnb a.manage span{color:#7eff00}
#gt-footer .footer-fnb a.login span{color:#041834}

#gt-footer .footer-info{display:flex; flex-direction:column; gap:1.4rem}
#gt-footer .footer-info p{line-height:2.4rem; color:#d2d2d2; font-size:1.7rem; font-weight:normal; letter-spacing:-0.05rem}
#gt-footer .footer-info p a{color:#56ffbd}

#gt-footer .copyright{margin-top:auto; line-height:2.2rem; color:#808080; font-size:1.7rem; font-weight:normal; letter-spacing:-0.05rem}


/* **************************************** *
 * reading-progress
 * **************************************** */
.reading-progress{position:fixed; top:0; left:0; right:0; height:5px; z-index:9}
.reading-progress .progress-bar{width:0; height:5px; background:#92734c}


/* **************************************** *
 * svisual
 * **************************************** */
.svisual{background:url("../img/layout/svisual-bg01.jpg") no-repeat 50% 50%; background-size:cover}
.svisual .svisual-inner{display:flex; align-items:center; justify-content:center; position:relative; width:140rem; height:34rem; margin:0 auto}
.svisual .page-tit{display:flex; flex-direction:column; padding-top:12rem}
.svisual .page-tit .current-tit{line-height:6.1rem; color:#fff; font-size:6.1rem; font-weight:600; letter-spacing:-0.1rem; text-align:center}


/* **************************************** *
 * page top
 * **************************************** */
.page-top{position:fixed; right:9rem; bottom:6rem; z-index:8; opacity:0; transition:all .35s ease}
.page-top.active{bottom:9rem; opacity:1}
.page-top .top-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem; width:6.5rem; height:6.5rem; margin:0; padding:1rem 0; background-color:#fff; border:0; border-radius:50%; cursor:pointer; box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 4px; box-sizing:border-box}
.page-top .top-btn:before{content:'\f5e0'; color:#202020; font-family:remixicon; font-size:1.1em}
.page-top .top-btn span{line-height:1.5rem; color:#202020; font-family:Poppins; font-size:1.5rem; font-weight:300; letter-spacing:0.1rem}