@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* common */
div[class^="area_"] p
section[class^="area_"] p,
article[class^="area_"] p,
div[class^="area_"] li,
article[class^="area_"] li{line-height:1.7; font-weight:300; color:#555;}

/* layout */
body:not(.fp-viewing-1Page) #header nav .gnb > li:not(.btn-contact) > a{color:#222;}

/* login & join */
.join_area .box.join ul li input:-webkit-autofill{-webkit-box-shadow: 0 0 0 1000px #ecf7f2 inset;}

/* page navigation */
.sub-navigation ul{display: flex;overflow:hidden;}
.sub-navigation ul li{position:relative;line-height:1;padding:0 12rem;font-size:15rem;color:#333;}
.sub-navigation ul li img{display:inline-block; position:relative; top:1rem; height:12rem; vertical-align:top;}
.sub-navigation ul li i{display:none;}
.sub-navigation ul li:nth-child(2):after{content:"";position:absolute;top: 4rem;right:-3rem;width:6rem;height:8rem;background:url(../images/content/ic-nav-arrow.svg) no-repeat 50% 50%;}
.sub-navigation ul li:first-child{padding:0;}
.sub-navigation ul li:last-child:after{opacity:0;}

/* lnb */
.lnb .wrap{text-align:center;}
.lnb ul{overflow:hidden;}
.lnb ul li a{display:block;}
.lnb ul li.active a{color:#222;}

/* sub visual */
.sub-visual{position:relative; height:500rem; background-size:cover; background-repeat:no-repeat; background-position:50% 50%; text-align:center;}
.sub-visual > .wrap{position:relative; display:flex; align-items:center;}

/* map default */
.area_map .map_style{padding:0; border:none; border-bottom:1rem solid #ccc;}
.area_map .map_style .wrap_controllers{display:none;}

/* 이용약관 */
.area_policy{padding:160rem 0 110rem;}
.area_policy h2{padding:30rem 0; font-weight:700; font-size:40rem; color:#222; text-align:center;}
.area_policy h3{margin-bottom:20rem; font-weight:700; font-size:17rem; color:#222;}
.area_policy ul li,
.area_policy p{line-height:1.6; font-weight:300; font-size:15rem; color:#666;}
.area_policy p{line-height:1.6; font-size:14rem;}
.area_policy ul li{margin-bottom:8rem;}
.area_policy ul li:last-child{margin:0;}
.area_policy ul li ul{margin-top:5rem; margin-bottom:20rem;}
.area_policy ul li ul li{margin-bottom:2rem; font-size:15rem;}
.area_policy .inr_policy{padding:40rem 0; border-bottom:1rem solid #ddd;}
.area_policy .inr_policy:last-child{border:none;}

.area_policy.email{padding:210rem 0 110rem;}
.area_policy.email h2{text-align:left;}
.area_policy.email > i{display:block; padding-top:30rem; font-size:15rem;}
.area_policy.email > strong{display:block; line-height:1.6; margin-top:20rem; font-size:19rem;}

/* company */
.company-page h5{font-family:'Play', sans-serif; font-size:36rem; letter-spacing:-1.2rem;}
.company-page .section{overflow:hidden;}
.company-page p{line-height:1.6; font-weight:300; font-size:17rem;}
.company-video__content{position:relative;}
.company-video video{position:absolute; top:0; top:50%; left:50%; width:100%; height:100vh; transform:translateX(-50%) translateY(-50%); object-fit:cover;}
.company-wrap{width:1440rem; margin:0 auto;}
.company-title h2{font-family:'GmarketSans'; font-weight:900; font-size:47rem; color:#666; letter-spacing:-1rem;}
.company-title h2 em{color:var(--color-point);}
.company-title p{color:#777;}
.company-intro__list{display:flex; justify-content:space-between; position:relative; margin-top:113rem;}
.company-intro__icon img{display:block; height:250rem;}
.company-intro__list li{text-align:center;}
.company-intro__item--mission h5{color:var(--color-point);}
.company-intro__item--vision h5{color:#b5b5b6;}
.company-intro__item--values h5{color:#595757;}
.company-page li[class^="company-intro__item"] h5{margin-top:27rem;}
.company-intro__line{height:auto; background:#c8c8c8; min-width:1px;}
.company-vision__bg{position:absolute; top:50%; left:0; width:100%; height:141%; background:url(/images/content/company-vision-bg.svg) no-repeat 50% 50%; background-size:100%; transform:translateY(-50%);}
.company-vision__slogan{position:relative; height:510rem;}
.company-vision__slogan h5{color:var(--color-point);}
.company-vision div[class^="company-vision__item"]{position:absolute;}
.company-vision__item--bast{top:170rem; left:100rem; text-align:right;}
.company-vision div[class^="company-vision__item"] p{margin-top:11rem; color:#666;}
.company-vision__item--attract{right:230rem; bottom:-70rem; text-align:center;}
.company-vision__item--develop{display:flex; top:-120rem; right:220rem; flex-direction:column-reverse;}
.section.active .motion-default{opacity:1; transform:none; transition-delay:0.3s;}
.motion-default{opacity:0; transition:all 1.2s ease;}
.company-intro__list li:not(.company-intro__line){transform:translateX(-80rem);}
.company-title{transform:translateY(-80rem);}
.company-vision__item--bast{transform:translateX(-60rem);}
.company-vision__item--attract{transform:translateY(80rem);}
.company-vision__item--develop{transform:translateY(-80rem);}

/* portfolio */
.sub-title{margin-bottom:60rem; padding-top:200rem; text-align:center;}
.sub-title h2{font-size:70rem;}
.portfolio-menu{display:inline-flex; justify-content:center; align-items:center; margin-top:30rem; border:1px solid #656565; border-radius:50rem;}
.portfolio-menu li a{display:block; padding:10rem 30rem; font-size:17rem; border-radius:50rem;}
.portfolio-menu li.on a{background:#111; color:#fff;}
.portfolio-list .ko_board_list[data-type][data-gallery="A"] .board_info_con{display:none;}
.portfolio-list .ko_board_list[data-type="A"]{grid-template-columns:1fr 1fr 1fr  1fr; gap:clamp(20px, 2.0833vw, 35px);}
.portfolio-list .ko_board_list[data-type="A"][data-gallery] [data-board="img"]{position:relative; height:0; padding-top:100%;}
.portfolio-list .ko_board_count{margin-bottom:clamp(13px, 1.0417vw, 34rem); font-size:clamp(13px, 1.0417vw, 18rem);}
.portfolio-list .ko_board_list[data-type="A"][data-gallery] [data-board="tit"]{position:absolute; opacity:0; bottom:0; left:50%; width:75%; width:90%; margin:0 auto; text-align:center; transition:all 0.5s ease; transform:translateX(-50%) translateY(0); will-change:transform;}
.portfolio-list .ko_board_list[data-type="A"][data-gallery] li:hover [data-board="tit"]{opacity:1; transform:translateX(-50%) translateY(-24rem);}
.wrap-narrow{margin:0 auto; max-width:1300rem;}
.bbsForm_data > label{font-size:17rem;}
.ko_board_list[data-type="A"][data-gallery] [data-board="img"] img{position:absolute; top:50%; width:100%; height:100%; transform:translateY(-50%); object-fit:cover;}

@media (max-width:1480px){
    .company-wrap {
        padding: 0rem 50rem;
    }
}

@media (max-width:860px){
	.lnb > div{margin:0; padding:0; overflow-x:scroll; overflow-y:hidden;}
	.lnb ul{display:table; margin:0 auto; margin-top:0;}
	.lnb ul li{display:table-cell; white-space:nowrap; float:none; padding:0 15rem;}

	.area_policy{padding-top: 120rem;padding-bottom: 0;}
	.area_policy h2{padding:0rem 0; font-weight:600; font-size:20rem;}
	.area_policy h3{margin-bottom:10rem; font-weight:600; font-size:14rem;}
	.area_policy ul li{margin-bottom:5rem;}
	.area_policy ul li ul{padding-left:10rem;}
	.area_policy ul li ul li{font-size:13rem;}
	.area_policy ul li,
	.area_policy p{line-height:1.7; font-size:13rem;}
	.area_policy .inr_policy{padding:25rem 0;}

	.area_policy.email > strong{font-size:16rem;}
	.area_policy.email > i{padding-top:35rem; font-size:14rem;}

    .section .motion-default {
        transition-delay: 0.3s;
        opacity: 1;
        transform: none;
    }  .section:not(.company-video, .fp-auto-height) {
        padding: 80rem 0rem;
    }

    .company-intro__list li:not(.company-intro__line) {
        transform: translateX(0rem);
        opacity: 1;
        flex: 1;
    }
    .company-video__content {
        height: 720rem;
    }
    .company-wrap {
        padding: 0rem 40rem;
        width: auto;
    }
    .company-intro__icon img {
        height: 150rem;
        display: block;
        margin: 0 auto;
    }
    .company-page h5 {
        font-size: 29rem;
    }
    .company-title h2 {
        font-size: 38rem;
    }
    .company-page p br{display: none;}



    .company-intro__list {
        margin-top: 60rem;
    }
    .company-intro__list li p {
        padding: 0rem 13rem;
        font-size: 16rem;
    }
    .company-vision div[class^="company-vision__item"] {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border: 3px solid #454545;
        padding: 30rem 30rem;
        margin-top: 17rem;
    }
    .company-vision__bg{display: none;}
    .company-vision {
        background: #0a0a0a !important;
    }
    .company-vision div[class^="company-vision__item"] p {
        color: #afafaf;
        text-align: left;
        margin-top: 8rem;
    }
    .company-vision .company-title p {
        color: #fff;
    }
    .company-vision__slogan {
        height: auto;
        margin-top: 50rem;
    }
    .company-page h5 {
        font-size: 26rem;
    }

    .portfolio-list .ko_board_list[data-type="A"] {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .portfolio-menu li a {
        padding: 10rem 18rem;
        font-size: 17rem;
    }
    .sub-title {
        padding-top: 130rem;
    }

    .sub-title h2 {
        font-size: 55rem;
    }

    body:not(.fp-viewing-1Page) #header nav .gnb > li:not(.btn-contact) > a {
        color: #fff;
    }



}

@media (max-width: 540px){
	.company-video__content {
        height: 75vh;
        max-height: 550rem;
    }
    .company-video video {
        height: 100%;
    }
    .company-title h2 {
        text-align: center;
        font-size: 33rem;
    }

    .company-page p {
        font-size: 16rem;
        line-height: 1.6;
        word-break: keep-all;
        text-align: center;
    }
    .company-intro__list {
        margin-top: 10rem;
        flex-direction: column;
        align-items: center;
    }
    .company-page h5 {
        font-size: 24rem;
    }
    .company-page li[class^="company-intro__item"] h5 {
        margin-top: 10rem;
    }
    .company-intro__list li p {
        font-size: 15rem;
    }

    .company-intro__list li:not(.company-intro__line) {
        margin-top: 30rem;
    }

    .section:not(.company-video, .fp-auto-height) {
        padding: 60rem 0rem;
    }

    .company-vision div[class^="company-vision__item"] {
        padding: 20rem;
    }
    .company-wrap {
        padding: 0rem 25rem;
    }
    .company-vision__slogan {
        margin-top: 30rem;
    }
    .portfolio-list .ko_board_list[data-type="A"] {
        grid-template-columns: 1fr;
    }
    .portfolio-menu-wrap {
        overflow-x: scroll;
        width: 110%;
    }
    .portfolio-menu {
        white-space: nowrap;
        margin-right: 30rem;
    }
    .sub-title h2 {
        font-size: 42rem;
    }

    .sub-title {
        padding-top: 110rem;
    }
    .portfolio-menu li a {
        padding: 8rem 11rem;
        font-size: 16rem;
        min-width: 65rem;
    }
    .sub-title {
        margin-bottom: 35rem;
    }



}