@charset "UTF-8";

/* Common */
@import url('common.css');

/*---------------------------- Layout ------------------------------*/
:root{
    /* color */
    --color-point:#385896;
    --color-scrollbar:#9ab0db;

    --color-b:#222;
    --color-g:#999;
    --color-w:#fff;

}
body::-webkit-scrollbar {
    width: 8px;
    height: 8px
}
body::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar);
    border: 1px solid #fff;
    border-radius: 10px
}
body::-webkit-scrollbar-track {
    background: 0 0;
    border: 1px solid transparent;
    border-radius: 10px
}
body::-webkit-scrollbar-corner {
    background: 0 0
}

/*-------------- Header --------------*/
header {position:fixed;width:100%;z-index:7000;}
header hgroup {position:relative;width:100%;padding:0 2rem;box-sizing:border-box;z-index:10;}
header hgroup {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
header hgroup::before {position:absolute;top:0;left:0;width:100%;height:100%;display:block;content:"";}
header hgroup::before {background:-webkit-linear-gradient(top, hsla(0, 0%, 30%, 0.5), transparent);}
header hgroup::before {background:linear-gradient(top, hsla(0, 0%, 30%, 0.5), transparent);}
header hgroup::after {position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;display:block;content:"";opacity:0;}
header hgroup::after {border-bottom:1px solid #e8e8e8;box-sizing:border-box;}
header hgroup h1 a {position:relative;padding:1rem;display:inline-block;z-index:1;}
header hgroup h1 a img {width:11.5rem;opacity:0;}
header hgroup h1 a img:nth-of-type(2) {position:absolute;top:1rem;left:1rem;}
header hgroup .nav {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:1;}
header hgroup .nav {height:100%;display:flex;flex-wrap:wrap;}
header hgroup .nav li {position:relative;padding:0 1rem;display:flex;flex-wrap:wrap;align-items:center;box-sizing:border-box;cursor:pointer;}
header hgroup .nav li::before {position:absolute;bottom:1px;left:1rem;display:block;content:"";opacity:0;}
header hgroup .nav li::before {width:calc(100% - 2rem);height:1px;background-color:var(--color-point);transition:opacity .5s;}
header hgroup .nav li a {display:block;font-size:1.6rem;line-height:2.6rem;padding:1.5rem 2.5rem;}
header hgroup .nav li.on::before {opacity:1;}
header hgroup .nav li.on a {color:var(--color-point);}
header hgroup .snb {display:flex;flex-wrap:wrap;align-items:center;gap:1rem;z-index:1;}
header hgroup .snb .site {display:flex;flex-wrap:wrap;}
header hgroup .snb .site li {position:relative;}
header hgroup .snb .site li::before {position:absolute;top:50%;transform:translateY(-50%);}
header hgroup .snb .site li::before {display:block;content:"";width:1px;height:1.4rem;}
header hgroup .snb .site li:first-child:before {display:none;}
header hgroup .snb .site li a {display:block;padding:1rem;font-size:12px;line-height:24px;font-weight:400;}
header hgroup .snb .menu {padding:1rem;cursor:pointer;display:none;}
header hgroup .snb .menu i {display:block;font-size:3rem;line-height:4rem;}
header hgroup .snb .menu i:nth-of-type(2) {display:none;}
header .gnb.pc {position:absolute;top:100%;width:100%;font-family: 'S-CoreDream-3Light';}
header .gnb.pc .into {position:relative;width:100%;height:100%;}
header .gnb.pc .item {position:absolute;top:0;left:0;display:flex;flex-wrap:wrap;width:100%;height:0;overflow:hidden;opacity:0;}
header .gnb.pc .item.on {height:43rem;opacity:1;z-index:1;}
header .gnb.pc .item.on::before {position:absolute;bottom:0;width:100%;border-bottom:1px solid #e8e8e8;display:block;content:"";}
header .gnb.pc .img {position:relative;width:25%;height:43rem;overflow:hidden;}
header .gnb.pc .img strong {position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%, -50%);}
header .gnb.pc .img strong {text-align:center;display:block;font-size:3.4rem;line-height:4.4rem;font-weight:600;color:#fff;z-index:2;}
header .gnb.pc .img::before {position:absolute;width:100%;height:100%;background-color:#222;opacity:.3;display:block;content:"";z-index:1;}
header .gnb.pc .img .cover {position:absolute;width:100%;height:100%;}
header .gnb.pc .list {width:75%;height:100%;background-color:#fff;overflow-y:scroll;}
header .gnb.pc .list::-webkit-scrollbar {width:8px;height:8px;}
header .gnb.pc .list::-webkit-scrollbar-thumb {background:#e2e2e2;border:1px solid #fff;border-radius:10px;}
header .gnb.pc .list::-webkit-scrollbar-track {background:0 0;border:1px solid transparent;border-radius:10px;}
header .gnb.pc .list::-webkit-scrollbar-corner {background:0 0;}
header .gnb.pc .list > ul {width:90%;margin:1rem auto;display:flex;flex-wrap:wrap;gap:2rem 5rem;}
header .gnb.pc .list > ul > li > a {padding:1rem 1rem .5rem;font-size:1.8rem;line-height:2.8rem;display:block;font-weight:600;box-sizing:border-box;}
header .gnb.pc .list > ul > li li a {font-size:1.4rem;line-height:2.4rem;font-weight:400;color:#999;padding:.5rem 1rem;display:block;}
header .gnb.mb {display:none;}

/* transition */
header hgroup::after {transition:opacity .5s;}
header.on hgroup h1 a img {transition:opacity .5s;}
header hgroup .nav li a {transition:color .5s;}
header hgroup .snb .site li::before {transition:background-color .5s;}
header hgroup .snb .site li a {transition:color .5s;}
header hgroup .snb .menu i {transition:color .5s;}
header .gnb.pc .item {transition:height .5s, opacity .5s;}

/* off */
header hgroup::after {opacity:0;}
header hgroup h1 a img:nth-of-type(1) {opacity:1;}
header hgroup h1 a img:nth-of-type(2) {opacity:0;}
header hgroup .nav li a {color:#fff;}
header hgroup .snb .site li::before {background-color:#fff;}
header hgroup .snb .site li a {color:#fff;}
header hgroup .snb .menu i {color:#fff;}

/* on */
header.on hgroup::after {opacity:1;}
header.on hgroup h1 a img:nth-of-type(1) {opacity:0;}
header.on hgroup h1 a img:nth-of-type(2) {opacity:1;}
header.on hgroup .nav li a {color:#222;}
header.on hgroup .snb .site li::before {background-color:#999;}
header.on hgroup .snb .site li a {color:#999;}
header.on hgroup .snb .menu i {color:#222;}

@media (hover: hover) {
    header:hover hgroup::after {opacity:1;}
    header:hover hgroup h1 a img:nth-of-type(1) {opacity:0;}
    header:hover hgroup h1 a img:nth-of-type(2) {opacity:1;}
    header:hover hgroup .nav li a {color:#222;}
    header:hover hgroup .snb .site li::before {background-color:#999;}
    header:hover hgroup .snb .site li a {color:#999;}
    header:hover hgroup .snb .menu i {color:#222;}
    header hgroup .nav li:hover::before {opacity:1;}
    header hgroup .nav li:hover > a {color:var(--color-point);}
}

@media screen and (max-width:1024px) {
    header hgroup::before {display:none;}
    header hgroup .nav {display:none;}
    header hgroup .snb .menu {display:block;}
    header hgroup .snb .site {display:none;}
    header .gnb.pc {display:none;}
    header .gnb.mb {position:fixed;top:-100%;left:0;width:100%;height:100%;box-sizing:border-box;display:block;opacity:0;}
    header .gnb.mb {background-color:#fff;font-family: 'S-CoreDream-3Light';transition:top .5s, opacity .5s;}
    header .gnb.mb.on {top:0;opacity:1;}
    header .gnb.mb .into {padding:12rem 0 5rem;height:calc(100vh - 23rem);overflow-y:scroll;}
    header .gnb.mb .into > ul > li {width:100%;}
    header .gnb.mb .into > ul > li > a {position:relative;padding:1.5rem;display:block;box-sizing:border-box;}
    header .gnb.mb .into > ul > li > a {font-size:4rem;line-height:5rem;font-weight:600;}
    header .gnb.mb .into > ul > li > a span {position:relative;display:inline-block;color:#222;}
    header .gnb.mb .into > ul > li.on > a::before {position:absolute;top:100%;left:0;width:100%;height:1px;}
    header .gnb.mb .into > ul > li.on > a::before {background-color:#dddddd;display:block;content:"";}
    header .gnb.mb .into > ul > li.on > a span {color:var(--color-point);}
    header .gnb.mb .into > ul > li.on > a span::before {position:absolute;top:calc(100% + 1.5rem);width:100%;height:1px;}
    header .gnb.mb .into > ul > li.on > a span::before {background-color:var(--color-point);display:block;content:"";}
    header .gnb.mb .into > ul > li > ul {font-size:2.3rem;line-height:3.3rem;height:0;opacity:0;overflow:hidden;transition:height .5s, opacity .5s;}
    header .gnb.mb .into > ul > li > ul > li > a {display:block;padding:1rem 2rem;color:#222;}
    header .gnb.mb .into > ul > li > ul > li:first-child > a {padding:1.5rem 2rem 1rem;}
    header .gnb.mb .into > ul > li > ul > li:last-child > a {padding:1rem 2rem 2.5rem;}
    header .gnb.mb .into > ul > li.pro > ul >  li > a {font-weight:600;}
    header .gnb.mb .into > ul > li div {padding:1rem .5rem 3.5rem;box-sizing:border-box;}
    header .gnb.mb .into > ul > li div a {display:block;font-size:2rem;line-height:3rem;color:#999;padding:.5rem 2rem;font-weight:400;}
    header .gnb.mb .site {font-size:2rem;line-height:3rem;color:#222;display:flex;flex-wrap:wrap;justify-content:right;}
    header .gnb.mb .site li {position:relative;}
    header .gnb.mb .site li::before {position:absolute;top:50%;transform:translateY(-50%);}
    header .gnb.mb .site li::before {display:block;content:"";width:1px;height:1.4rem;background-color:#222;}
    header .gnb.mb .site li:first-child:before {display:none;}
    header .gnb.mb .site li a {display:block;padding:1rem;margin:0 1rem;font-family:'Poppins';}

    main {padding-top:64.39px;}
}


/*-------------- Footer --------------*/
footer {background-color:#222;padding:5rem 1rem;box-sizing:border-box;}
footer .frame {display:flex;flex-wrap:wrap;max-width:1400px;gap:0 10rem;margin:auto;}
footer .logo a {display:block;opacity:.7;}
footer .addr {font-size:14px;line-height:24px;font-family: 'S-CoreDream-3Light';font-weight:400;}
footer .addr .nav {display:flex;flex-wrap:wrap;}
footer .addr .nav li {position:relative;}
footer .addr .nav li::before {display:block;content:"";width:1px;height:50%;background-color:#fff;}
footer .addr .nav li::before {position:absolute;top:50%;right:0;transform:translateY(-50%);opacity:.3;}
footer .addr .nav li:last-child:before {display:none;}
footer .addr .nav li a {color:#fff;display:block;padding:0 1rem;}
footer .addr .add {margin:3rem 0;}
footer .addr .add p {color:#a9a9a9;}
footer .addr .copy {color:#626262;font-weight:300;}
@media screen and (max-width:768px) {
    footer .frame {display:block;text-align:center;}
    footer .logo a {margin-bottom:5rem;}
    footer .addr .nav {justify-content:center;}
}


/*-------------- Banner --------------*/
.comm-banner {position:relative;width:100%;height:calc(100vw / 16 * 9 / 2);min-height:400px;z-index:10;}
.comm-banner .cover::before {position:absolute;width:100%;height:100%;background-color:rgb(34, 34, 34, .7);display:block;content:"";}
.comm-banner .cover {position:absolute;top:0;left:0;width:100%;height:100%;}
.comm-banner .frame {position:relative;padding:10rem 2rem;height:100%;z-index:5;}
.comm-banner .frame {margin:auto;max-width:1400px;text-align:center;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;}
.comm-banner .ttl {width:100%;font-size:4rem;line-height:5rem;color:#fff;font-weight:600;text-align:center;box-sizing:border-box;}
.comm-banner .nav {position:absolute;bottom:5rem;left:0;width:100%;}
.comm-banner .nav .tit {display:none;}
.comm-banner .nav ul {display:flex;flex-wrap:wrap;justify-content:center;font-size:1.6rem;line-height:2.6rem;font-weight:500;}
.comm-banner .nav ul li a {position:relative;color:#fff;display:block;box-sizing:border-box;}
.comm-banner .nav ul li a {border-bottom:1px solid #fff;opacity:.5;transition:opacity .5s;}
.comm-banner .nav ul li a::before {position:absolute;top:calc(100% - 1px);height:3px;background-color:#fff;display:block;content:"";}
.comm-banner .nav ul li a::before {left:50%;width:0;transition:left .5s, width .5s;}
.comm-banner .nav ul li.on a {opacity:1;}
.comm-banner .nav ul li.on a::before {width:100%;left:0;}
@media (hover: hover) {
    .comm-banner .nav ul li:hover a::before {width:100%;left:0;}
    .comm-banner .nav ul li a:hover {opacity:1;}
}
@media screen and (max-width:1024px) {
    .comm-banner {min-height:300px;}
    .comm-banner .nav {bottom:7.5rem;}
    .comm-banner .nav .into {position:absolute;top:0;left:2rem;width:calc(100% - 4rem);}
    .comm-banner .nav .tit {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;border-bottom:1px solid #fff;}
    .comm-banner .nav .tit {font-size:1.8rem;line-height:2.8rem;text-align:left;color:#fff;padding:1rem;box-sizing:border-box;cursor:pointer;}
    .comm-banner .nav .tit strong {display:block;font-weight:400;}
    .comm-banner .nav .tit.on i {transform:rotate(-180deg);}
    .comm-banner .nav ul {display:none;background-color:#fff;font-size:1.8rem;line-height:2.8rem;text-align:left;}
    .comm-banner .nav ul li a {color:#222;opacity:1;padding:1.5rem;border-top:1px solid #e8e8e8;}
    .comm-banner .nav ul li:first-child a {border:none;}
}


/*-------------- Content --------------*/
.comm-content {position:relative;width:100%;padding:0 1rem;box-sizing:border-box;overflow:hidden;}
.comm-content .frame {position:relative;width:100%;max-width:1400px;margin:auto;}
.comm-content .menu-map {display:flex;flex-wrap:wrap;justify-content:right;padding-top:3rem;}
.comm-content .menu-map ul {display:flex;flex-wrap:wrap;justify-content:right;}
.comm-content .menu-map ul li {position:relative;color:#999;font-size:14px;line-height:24px;font-weight:400;padding:0 1rem;}
.comm-content .menu-map ul li.on {color:var(--color-point);font-weight:600;}
.comm-content .menu-map ul li a {color:#999;}
.comm-content .menu-map ul li::before {position:absolute;top:0;right:-.5rem;display:block;content:"ㆍ";font-weight:600;}
.comm-content .menu-map ul li:last-child:before {display:none;}
.comm-content .content {padding-top:7.5rem;}
.comm-content .ttl {font-size:4rem;line-height:5rem;font-weight:600;color:#222;font-family:'S-CoreDream-3Light';}
.comm-content .line {position:relative;width:100%;padding:3rem 0 7.5rem;}
.comm-content .line::before,
.comm-content .line::after {position:absolute;height:2px;display:block;content:"";}
.comm-content .line::before {width:200%;background-color:#ddd;}
.comm-content .line::after {width:10rem;background-color:var(--color-point);}

@media screen and (max-width:1024px) {

}