@charset "utf-8";

/* 
 * content CSS Document
 *
 * 1) bbs layout
 *
 */

/* sub header */
#header{background:#fff; border-bottom:1px solid #e5e5e5;}
#header h1 a img.logo1{opacity:1;}
#header h1 a img.logo2{opacity:0;}
#header nav .gnb > li > a{color:#090909;}
.util-area .logWrap{border-color:#ccc;}
.util-area .logWrap a{color:#777;}
[class*="mega-menu__"] span i,
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{background:#111;}


.file-upload-area .button.white span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbus .designFile ~ .button.white { width: 50%; }

/* subVisual */
.area-subVisual{padding-top:var(--header-height);}
.area-subVisual .pageName{display:flex; flex-direction:column; align-items:center; gap:20rem; padding:80rem 4% 55rem;}
.area-subVisual .pageName h2[data-subTitle="depth01"]{font-size:var(--fs20); font-weight:600; line-height:1; color:#aaa; opacity:0; transform:translateY(30rem); animation:pageName-up 1s ease both;}
.area-subVisual .pageName h2[data-subTitle="current"]{font-size:var(--fs50); font-weight:800; line-height:1; color:#090909; opacity:0; transform:translateY(30rem); animation:pageName-up 1.5s ease both;}
.area-subVisual .visualImg{position:relative; height:400rem; overflow:hidden;}
.area-subVisual .visualImg img{display:block; position:absolute; left:50%; top:0; transform:translateX(-50%); width:0; height:100%; object-fit:cover; animation:visualImg-show 1.5s ease both;}
@keyframes pageName-up{
    100%{transform:translateY(0); opacity:1;}
}
@keyframes visualImg-show{
    100%{width:100%;}
}
@media(max-width:1024px){
    .area-subVisual .pageName{padding:70rem 4% 45rem;}
    .area-subVisual .pageName h2[data-subTitle="current"]{font-size:var(--fs40);}
    .area-subVisual .visualImg{height:300rem;}
}
@media(max-width:768px){
    .area-subVisual .pageName{gap:12rem; padding:50rem 4% 35rem;}
    .area-subVisual .visualImg{height:220rem;}
}
@media(max-width:480px){
    .area-subVisual .pageName{padding:40rem 4% 30rem;}
    .area-subVisual .visualImg{height:180rem;}
}


/* lnb */
.area_lnb{--lnb-height:80rem; border-bottom:1px solid #e5e5e5; opacity:0; transform:translateY(30rem); animation:lnb-show 1s .5s ease both;}
.area_lnb .lnb ul{display:flex; justify-content:center;}
.area_lnb .lnb ul li{flex:none; white-space:nowrap;}
.area_lnb .lnb ul li a{display:flex; align-items:center; position:relative; font-size:var(--fs18); line-height:1; color:#aaa; height:var(--lnb-height); padding:0 50rem;}
.area_lnb .lnb ul li a span{display:flex; align-items:center; position:relative; height:var(--lnb-height);}
.area_lnb .lnb ul li a.on span:after{content:''; display:block; position:absolute; left:0; bottom:-1rem; height:3rem; width:100%; background:var(--color-point);}
.area_lnb .lnb ul li a.on{color:var(--color-point); font-weight:bold;}
.area_lnb.full{--sizeBg:40rem; position:relative; mask:linear-gradient(90deg, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);}
.area_lnb.full .lnb{position:relative; overflow-x:auto; overflow-y:hidden; width:100%;}
.area_lnb.full .lnb > ul{flex-wrap:nowrap; justify-content:flex-start; margin:0; padding-right:var(--sizeBg);}
.area_lnb.full .lnb > ul > li:last-child{padding-right:var(--sizeBg);}
@keyframes lnb-show{
    100%{transform:translateY(0); opacity:1;}
}
@media(max-width:1024px){
    .area_lnb{--lnb-height:70rem;}
    .area_lnb .lnb ul li a{padding:0 30rem;}
}
@media(max-width:768px){
    .area_lnb{--lnb-height:60rem;}
    .area_lnb .lnb ul li a{padding:0 20rem;}
}
@media(max-width:480px){
    .area_lnb{--lnb-height:50rem;}
}


/* member */
[data-sublayout="member"]{display:none !important;}
[data-sublayout="member"]+.area_lnb{display:none !important;}
.join_area{margin:auto; padding:calc(var(--header-height) + var(--p120)) 0 var(--p120); max-width:1400rem; width:92%;}


/* 서브 공통 */
:root{
    --p120:120rem;
    
    --m120:120rem;
    
    @media(max-width:1024px){
        --p120:100rem;
        --m120:100rem;
    }
    @media(max-width:768px){
        --p120:80rem;
        --m120:80rem;
    }
    @media(max-width:480px){
        --p120:60rem;
    }
}
.visualNone{display:none !important;}
article{padding:var(--p120) 0;}
section{position:relative;}
section+section{margin-top:var(--m120);}

/* 회사소개 > 조직도 */
.org img{display:block; margin:auto; max-width:600rem; width:100%;}
@media(max-width:1024px){}
@media(max-width:768px){}
@media(max-width:480px){}


/* 회사소개 > 오시는길 */
.location{overflow:hidden;}
.location *{box-sizing:border-box; word-break:keep-all;}
.location .info h2{font-size:var(--fs30); color:#090909}
.location .info p{display:flex; align-items:center; gap:6rem; margin:30rem 0 45rem; font-size:var(--fs22); font-weight:500; line-height:1; color:#222;}
.location .info p i{display:block; margin-top:1rem; font-size:var(--fs25); color:var(--color-point);}
.location .info ul{display:flex;}
.location .info ul li{font-size:var(--fs18); line-height:1; color:#555;}
.location .info ul li+li{margin-left:30rem; padding-left:30rem; border-left:1px solid #ccc;}
.location .root_daum_roughmap{margin-top:50rem; width:100% !important; height:500rem;}
.location .root_daum_roughmap .wrap_map{height:100% !important;}
.location .root_daum_roughmap .map_border,
.location .root_daum_roughmap .wrap_controllers,
.location .root_daum_roughmap .cont{display:none;}
.location .map{text-align:center; padding-top:40px;}
.location .map img{width:100%}


@media(max-width:1024px){
    .location .root_daum_roughmap{height:400rem;}
	.location .map img{width:100%}
}
@media(max-width:768px){
    .location .info p{margin:20rem 0 35rem;}
    .location .root_daum_roughmap{margin-top:40rem; height:340rem;}
	.location .map img{width:100%}
}
@media(max-width:480px){
    .location .info p{gap:3rem; margin:20rem 0 35rem;}
    .location .info ul{display:block;}
    .location .info ul li+li{margin-top:12rem; margin-left:0; padding-left:0; border:none;}
    .location .root_daum_roughmap{height:420rem;}
	.location .map img{width:100%}
}


/* 디지털 튜터 소개 */
.tutor{padding:0 !important; overflow:hidden;}
.tutor *{box-sizing:border-box; word-break:keep-all;}
.tutor section+section{margin-top:0 !important;}
.tutor .intro{position:relative; padding:var(--header-height) 4% 0; width:100%; height:100vh; background:url('/images/content/subVisual_tutor.jpg')no-repeat center/cover; text-align:center;}
.tutor .intro:after{content:''; display:block; position:absolute; left:0; bottom:0; width:100%; height:25vh; background:linear-gradient(to top,#fff,transparent);}
.tutor .intro > i{display:block; margin-bottom:30rem; padding-top:6%; font-size:var(--fs20); font-weight:bold; line-height:1; color:var(--color-point);}
.tutor .intro h2{font-family:var(--font-eng); font-weight:800; font-size:var(--fs70); line-height:1; color:#090909;}
.tutor .intro h2 i{display:inline-block; opacity:0; transform:translateY(30rem); animation:introTxt 1s ease both;}
.tutor .intro h2 > br{display:none;}
.tutor .intro h2 i:nth-child(2){animation-delay:.03s;}
.tutor .intro h2 i:nth-child(3){animation-delay:.06s;}
.tutor .intro h2 i:nth-child(4){animation-delay:.09s;}
.tutor .intro h2 i:nth-child(5){animation-delay:.12s;}
.tutor .intro h2 i:nth-child(6){animation-delay:.15s;}
.tutor .intro h2 i:nth-child(7){animation-delay:.18s;}
.tutor .intro h2 i:nth-child(8){animation-delay:.21s;}
.tutor .intro h2 i:nth-child(9){animation-delay:.24s;}
.tutor .intro h2 i:nth-child(10){animation-delay:.27s;}
.tutor .intro h2 i:nth-child(11){animation-delay:.30s;}
.tutor .intro h2 i:nth-child(12){animation-delay:.33s;}
.tutor .intro h2 i:nth-child(13){animation-delay:.36s;}
.tutor .intro h2 i:nth-child(14){animation-delay:.39s;}
.tutor .intro h2 i:nth-child(15){animation-delay:.42s;}
.tutor .intro h2 i:nth-child(16){animation-delay:.45s;}
.tutor .intro h2 i:nth-child(17){animation-delay:.48s;}
.tutor .intro h2 i:nth-child(18){animation-delay:.51s;}
.tutor .intro h2 i:nth-child(19){animation-delay:.54s;}
.tutor .intro h2 i:nth-child(20){animation-delay:.57s;}
.tutor .intro h2 i:nth-child(21){animation-delay:.60s;}
.tutor section{padding:var(--p120) 0;}
.tutor section .txt i{display:block; font-family:var(--font-eng); font-size:var(--fs20); font-weight:bold; line-height:1; color:var(--color-point); text-transform:uppercase;}
.tutor section .txt h2{margin:15rem 0 40rem; font-size:var(--fs60); line-height:1.4; color:#090909;}
.tutor section .txt p{font-size:var(--fs18); line-height:1.6; color:#555;}
.tutor section .img img{display:block; width:100%; height:100%; object-fit:cover;}
.tutor .sec1{padding-bottom:0; z-index:1;}
.tutor .sec1 .inr{display:flex; justify-content:space-between;}
.tutor .sec1 .txt{padding-top:150rem; width:630rem;}
.tutor .sec1 .img{width:calc(100% - (630rem + 200rem)); border-radius:0 150rem 0 150rem; overflow:hidden;}
.tutor .sec2{padding-top:calc(var(--p120) + 120rem); margin-top:-120rem !important; background:#f8f8f8;}
.tutor .sec2 .txt{padding-top:100rem; text-align:end;}
.tutor .sec2 .txt p em{display:block; margin-bottom:10rem; font-size:var(--fs25); font-weight:500; color:#006396;}
.tutor .sec2 .img{position:absolute; left:-100rem; top:-100rem; width:600rem;}
.tutor .sec3 .txt h2 > br{display:none;}
.tutor .sec3 .img{margin-top:80rem;}
@keyframes introTxt{
    100%{opacity:1; transform:translateY(0);}
}
@media(max-width:1700px){
    .tutor .sec2 .img{left:0;}
}
@media(max-width:1500px){
    .tutor .sec1 .txt{padding-top:100rem;}
    .tutor .sec2 .img{width:500rem;}
}
@media(max-width:1400px){
    .tutor .sec1 .img{width:calc(100% - (630rem + 100rem));}
}
@media(max-width:1024px){
    .tutor .intro h2{font-size:var(--fs60);}
    .tutor section .txt i{font-size:var(--fs16);}
    .tutor section .txt h2{margin:10rem 0 30rem; font-size:var(--fs45);}
    .tutor .sec1 .txt{padding-top:50rem; width:470rem;}
    .tutor .sec1 .img{width:calc(100% - (470rem + 80rem)); border-radius:0 100rem 0 100rem;}
    .tutor .sec2 .txt{padding-top:50rem;}
    .tutor .sec2 .img{width:380rem;}
    .tutor .sec3 .txt p > br{display:none;}
    .tutor .sec3 .img{margin-top:60rem;}
}
@media(max-width:768px){
    .tutor .intro > i{margin-bottom:20rem;}
    .tutor .sec1 .txt{padding-top:50rem; width:355rem;}
    .tutor .sec1 .img{width:calc(100% - (355rem + 60rem)); border-radius:0 100rem 0 100rem;}
    .tutor .sec2{margin-top:-80rem !important;}
    .tutor .sec2 .txt{padding-top:0;}
    .tutor .sec2 .txt p > br{display:none;}
    .tutor .sec2 .img{top:-150rem; width:320rem;}
    .tutor .sec3 .img{margin-top:50rem;}
}
@media(max-width:480px){
    .tutor .intro > i{padding-top:6vh;}
    .tutor .intro h2{line-height:1.2;}
    .tutor .intro h2 > br{display:block;}
    .tutor section .txt{margin-bottom:40rem;}
    .tutor section .txt h2{margin-bottom:20rem;}
    .tutor .sec1 .inr{display:block;}
    .tutor .sec1 .txt{padding-top:0; width:100%;}
    .tutor .sec1 .img{margin-left:auto; width:80%; border-radius:0 60rem 0 60rem;}
    .tutor .sec2{padding-top:calc(var(--p120) + 80rem);}
    .tutor .sec2 .txt p em{margin-bottom:6rem; font-size:var(--fs20);}
    .tutor .sec2 .img{position:relative; left:auto; top:auto; width:85%;}
    .tutor .sec3 .txt h2 > br{display:block;}
    .tutor .sec3 .img{margin-top:0; height:200rem;}
}


/* my */
.btn_area{position:sticky !important; z-index: 10;}
.bbsSearch form{flex-wrap:wrap; padding:30rem 20rem;}
@media(max-width:1024px){
    .bbsSearch form{padding:20rem; gap:10rem 0}
    .bbsSearch input[type=text]{margin-right:0; width:calc(100% - 143rem);}
}
@media(max-width:768px){
    .bbsList td[data-table="write"]{padding-bottom:5rem !important; width:100%; text-align:left;}
    .bbsList td[data-table="date"]{padding:5rem 0 15rem !important; width:100%; text-align:left;}
    .bbsList td[data-table="subject"]{padding:5rem 0;}

    .file-upload-area { flex-wrap: wrap; margin-bottom: 30px; }
    .file-upload-area .designFile.mob { flex-basis: 46%; }
    .file-upload-area .button.white { flex-basis: 46%; }
    .file-upload-area .button.white span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

}
@media(max-width:640px){
    .bbsSearch input.datepicker{width:200rem !important;}

    .bbsView input[data-form-type="datepicker"], input.datepicker, .bbsView input[type="text"].datepicker { width: 89% !important; }
    .date-till-wrap { display: flex; align-items: center; gap: 5rem; }
    .date-till-wrap .ui-datepicker-trigger { width: 50rem; }
    .butuh-setting { display: flex; align-items: center; flex-wrap: wrap; gap: 10rem; }
    .butuh-setting select { width: 72rem; }

    .rp-parent{
        flex-wrap: wrap;
        margin-bottom: 4px;
    }
    .rp-child-1{
        flex-basis: 100%;
        margin-bottom: 10px;
    }
    .rp-child-2{
        flex-basis: 26%;
    }
    .rp-child-3{
        flex-basis: 46%;
    }


}
@media(max-width:480px){
    .bbsSearch form{padding:20rem 0 0;}
    .bbsSearch input[type=text]{width:100%; flex:auto;}
    .bbsSearch input.datepicker{flex:0 !important; width:115rem !important;}
    .bbsSearch input[type="submit"].button{position:relative; right:auto; margin-right:0; border-radius:50%; background:#f1f1f1 url(../../images/board/icon_search.svg) no-repeat 50% 50%; background-size:15rem;}
    .ui-datepicker-trigger{margin:0 7rem;}

}