@charset "utf-8";
/* 
PC : 1024px ~ 1400px
tablet : 541px ~ 1024px
mobile : 375px ~ 540px
*/


/* width height margin padding font color bg ... */
.w775{width:775px !important}
.h100p{height:100% !important}

.mt5{margin-top:5px !important}
.mt40{margin-top:40px !important}
.mt115{margin-top:115px !important}

.mr30{margin-right:30px !important}

.mb10{margin-bottom:10px !important}

.ml15{margin-left:15px !important}

.pb60{padding-bottom:60px}

.hidden{overflow:hidden;color:transparent;text-indent:-9999px}

.h1{margin-bottom:50px;font-size:65px;font-weight:700;letter-spacing:-1px}
sub,sup{font-size:medium}
.highlight{position:relative;font-weight:400;line-height:1;z-index:1}
.highlight::before{content:"";position:absolute;inset:0;border-radius:3px;background-color:#cb5226;transform:skewX(-10deg);z-index:-1}

.video-box{position:relative;width:100%;margin-top:126px;padding-top:56.3%;}
.video{position:absolute;inset:0}
.txt-box{font-size:28px;letter-spacing:-1px}
.txt-box .-txt ~.-txt{margin-top:40px}

.underline{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}

.inline{display:inline}
.center{text-align:center !important}
.left{text-align:left !important}
.right{text-align:right !important}
.bold{font-weight:700 !important}

[class*=bd-pcb]{border-bottom:1px solid rgba(0,0,0,0.5)}

.block{display:block !important}
.middle{display:inline-block !important;vertical-align:middle !important}
.inline{display:inline !important}

.flex{display:flex !important}
.flex-btw{display:flex !important;justify-content:space-between !important}
.flex-btw-center{display:flex !important;justify-content:space-between !important;align-items:center !important}
.flex-btw-end{display:flex !important;justify-content:space-between !important;align-items:end !important}
.flex-center{display:flex !important;align-items:center !important}

@media screen and (max-width:1024px){
    .h1{font-size:40px}
    .video-box{margin-top:80px}
    .txt-box{font-size:23px}
}
@media screen and (max-width:780px) {
    .video-box{width:calc(100% + 60px);margin-left:-30px;padding-top:62.9%}
}
@media screen and (max-width:540px){
    sub, sup{font-size: x-small}
    .h1{font-size:25px;margin-bottom:25px}
    .video-box{margin-top:50px;padding-top:67.4%}
    .txt-box .-txt ~.-txt{margin-top:30px}
    .txt-box{font-size:14px}
    .underline{text-decoration-thickness:1px;text-underline-offset:3px}
}
/* layout */
.wrap{position:relative;display:flex;flex-flow:column;width:100%;height:100%;background:linear-gradient(#368ea5 30%, transparent 70%);}
.inner{width:100%;max-width:1400px;margin:0 auto}
.pc-half{display:flex;justify-content:space-between;align-items:center}

.pc-ver{display:block !important}
.mo-ver{display:none !important}

header{flex:none;height:128px;padding:9px 0 0;background-color:#fff;box-shadow:0 0 10px 1px rgba(0,0,0,0.3)}
header .inner{display:flex;justify-content:space-between;align-items:center}
header .-right{font-size:0}
.logo img{height:110px}

.content{flex:1;padding:190px 0 140px;line-height:1.5}

footer{flex:none;padding:40px 0;font-size:12px;background-color:#335261;line-height:1.4}
footer .inner{position:relative;}
footer .-txt{color:#95cfff;font-weight:200;}
footer .reference li{margin-top:18px;font-weight:200;opacity:.5;}
footer .-code{position:absolute;right:1px;bottom:0;font-weight:200;opacity:.8;}
footer .-contactus{margin-top:40px}
footer .-contactus .-tit{margin-bottom:8px;font-size:14px;opacity:.7}
footer .-company{opacity:.5}
footer .-company br{display:none}
footer .-bar{position:relative}
footer .-bar::before{content:"";display:inline-block;width:1px;height:12px;margin:-1px 8px 0 5px;background-color:#fff;vertical-align:middle}
footer address{display:inline-block;font-style:normal;font-weight:200;}
footer .-tel{color:#fff}

@media screen and (max-width:1024px) {
    header{height:90px;padding:14px 0 12px}
    header .logo{position:relative;z-index:99}
    
    .logo img{height:64px}
    .inner{position:relative;width:100%;min-width:360px;padding:0 30px}
    .inner.-pc-ver{padding:0;text-align:center}

    .content{padding:100px 0 120px}

    .pc-ver{display:none !important}
    .mo-ver{display:block !important}
}
@media screen and (max-width:840px) {
    footer .reference li{margin-top:10px}
    footer .-code{position:static;margin-top:25px}
    footer .-company br{display:block}
    footer .-contactus{margin-top:25px}
    footer .-contactus .-tit{margin-bottom:5px}
}
@media screen and (max-width:540px) {
    header{height:64px;padding:11px 0}
    .inner{height:auto}

    .logo img{height:44px}

    .content{padding:50px 0 60px;line-height: 1.4}
}
@media screen and (max-width:375px) {

}

/* gnb */
.gnb{margin-top:24px}
@media screen and (min-width:1025px) {
    .hamburger{display:none}
    .gnb-wrap{display:inline-block;vertical-align:middle}
    .main .gnb-wrap::after{display:none}
    .gnb{display:flex;gap:0 45px}
    .gnb >li{text-align:center}
    .gnb >li >a{display:block;min-width:174px;height:50px;line-height:54px;padding:0 22px;color:#fff;font-size:18px;font-weight:700;text-align:center;letter-spacing:-1px;border-radius:6px;background:linear-gradient(#e8774d,#cb5226)}
    .gnb >li:hover >a,
    .gnb >li.is-selected >a{background:linear-gradient(#FFAA36,#EC8B05)}
    .gnb .num{display:none}
}
@media screen and (max-width:1024px) {
    .hamburger{position:absolute;top:calc(50% - 15px);right:28px;display:block;width:35px;height:25px;margin-left:auto;z-index: 99;}
    .hamburger >span,
    .hamburger::after,
    .hamburger::before{content:"";display:block;width:35px;height:1px;background-color:#828282;transition:all .5s}
    .hamburger::after,
    .hamburger >span{margin-top:10px}
    .gnb-wrap.is-active +.hamburger{right:25px}
    .gnb-wrap.is-active +.hamburger::after,
    .gnb-wrap.is-active +.hamburger::before{height:2px;background-color:#f29600;transform:rotate(-45deg) translate(-1px);transition:transform .5s}
    .gnb-wrap.is-active +.hamburger::after{margin-top:0;transform:rotate(45deg) translate(-1px)}
    .gnb-wrap.is-active +.hamburger >span{height:0;margin-top:0;transition:height .3s}
    .gnb-wrap{position:fixed;top:0;right:0;bottom:0;width:0;z-index:-1;opacity:0;transition:opacity 0.1s,width 0.1s}
    .gnb-wrap.is-active{overflow:hidden;width:100%;background-color:#f7f1c2;z-index:16;opacity:1;transition:opacity 0.5s,width 0.5s}
    .gnb-wrap h2{height:70px;padding:20px 0 0 17px}
    .gnb-wrap h2 img{width:180px}
    .gnb{overflow-y: auto;height:calc(100% - 72px);margin-top:120px;padding-top:40px;padding-left:30px}
    .gnb .num{margin-right:27px;font-size:10px;color:#dcea2d;vertical-align:3px}
    .gnb >li >a{margin-bottom:14px;color:#f29600;font-size:18px;font-weight:500;line-height:2}
    .gnb >li >a:hover{color:#5bd2f3}
}
@media screen and (max-width:540px) {
    .hamburger{top:calc(50% - 17px);width:25px}
    .hamburger >span,
    .hamburger::after,
    .hamburger::before{width:25px;height:1px}
    .hamburger::after,
    .hamburger >span{margin-top:7px}
    .gnb{margin-top:68px;}
}

/* img */
@media screen and (max-width:1024px) {
    .tit-img{width:100%;max-width:540px}
}
/* icon */
[class*=ico-]::before{content:"";display:inline-block;width:20px;height:20px;vertical-align:middle;background-repeat:no-repeat;background-size:contain}
.ico-close::before{margin-top:-3px;background-image:url(../img/mo/common/close.png)}
@media screen and (max-width:1024px) {
    .ico-close{position:absolute;top:18px;right:16px;font-size:1px;color:transparent}
    .ico-close::before{width:32px;height:32px}
}
@media screen and (max-width:540px) {
    .ico-close{top:19px;right:10px}
    .ico-close::before{width:26px;height:26px}
}

/* button */
.ico
@media screen and (max-width:1024px) {
   
}