@charset "utf-8";

/* 메인 롤링이미지 */

/*===================== 홈페이지 드래그할때 배경 및 글자색 스타일 =====================*/
::selection { background:#ade5ff; color:#fff }

/*===================== pc버전, mobile버전 스타일 =====================*/
.pcView {display:block;}
.mobView {display:none;}

/*===================== a링크버튼 선 애니메이션 스타일 =====================*/
a > .linkLeftBar {left:0; bottom:0; width:2px; height:100%; background:rgba(255,255,255,0.4); animation:linkLeftBarAnimation 4s infinite; -webkit-animation:linkLeftBarAnimation 4s infinite; -moz-animation:linkLeftBarAnimation 4s infinite;}
a > .linkTopBar {left:0; top:0; width:100%; height:2px; background:rgba(255,255,255,0.4); animation:linkTopBarAnimation 4s infinite; -webkit-animation:linkTopBarAnimation 4s infinite; -moz-animation:linkTopBarAnimation 4s infinite;}
a > .linkRightBar {right:0; top:0; width:2px; height:100%; background:rgba(255,255,255,0.4); animation:linkRightBarAnimation 4s infinite; -webkit-animation:linkRightBarAnimation 4s infinite; -moz-animation:linkRightBarAnimation 4s infinite;}
a > .linkBottomBar {right:0; bottom:0; width:100%; height:2px; background:rgba(255,255,255,0.4); animation:linkBottomBarAnimation 4s infinite; -webkit-animation:linkBottomBarAnimation 4s infinite; -moz-animation:linkBottomBarAnimation 4s infinite;}
@keyframes linkLeftBarAnimation {0% {height:0%;}25%, 100% {height:100%;}}
@-webkit-keyframes linkLeftBarAnimation {0% {height:0%;}25%, 100% {height:100%;}}
@-moz-keyframes linkLeftBarAnimation {0% {height:0%;}25%, 100% {height:100%;}}
@keyframes linkTopBarAnimation {0%, 25% {width:0%;}50%, 100% {width:100%;}}
@-webkit-keyframes linkTopBarAnimation {0%, 25% {width:0%;}50%, 100% {width:100%;}}
@-moz-keyframes linkTopBarAnimation {0%, 25% {width:0%;}50%, 100% {width:100%;}}
@keyframes linkRightBarAnimation {0%, 50% {height:0%;}75%, 100% {height:100%;}}
@-webkit-keyframes linkRightBarAnimation {0%, 50% {height:0%;}75%, 100% {height:100%;}}
@-moz-keyframes linkRightBarAnimation {0%, 50% {height:0%;}75%, 100% {height:100%;}}
@keyframes linkBottomBarAnimation {0%, 75% {width:0%;}100% {width:100%;}}
@-webkit-keyframes linkBottomBarAnimation {0%, 75% {width:0%;}100% {width:100%;}}
@-moz-keyframes linkBottomBarAnimation {0%, 75% {width:0%;}100% {width:100%;}}

/*===================== 메인공통 스타일 =====================*/
.page .wrap_page .footer {height:237px; background:#282828; border-top:0;}
.after:after{display:block; clear:both; content:""}
.footer { margin-top:0; }

/*===================== mainVisual 스타일 =====================*/
#contentsEfront {position:relative;}
#mainVisual { width:100%; height:100vh; height:100svh; overflow:hidden; position:relative; background:#111; } /* 26.09 : 950px 고정 → 화면 높이 */
#mainVisual_bg {position:absolute; z-index:-3; width:100%; height:100%; background:#fff;}
.visual { width:100%; }
.visual > li { width:100%; position:relative; }
.visual > li .img { width:100%; position:absolute; top:0; left:0; z-index:-1; animation:vsImg 6.5s ease-in-out; -webkit-animation:vsImg 6.5s ease-in-out; -moz-animation:vsImg 6.5s ease-in-out; }
.visual .img > img { position: absolute; top:-9999px; bottom:-9999px; right: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height:100%; }
@keyframes vsImg {0% {transform:scale(1.3);}100% {transform:scale(1);}}
@-webkit-keyframes vsImg {0% {-webkit-transform:scale(1.3);}100% {-webkit-transform:scale(1);}}
@-moz-keyframes vsImg {0% {-moz-transform:scale(1.3);}100% {-moz-transform:scale(1);}}

/*===================== timeBar 스타일 =====================*/
#timerBar {position:relative; max-width:655px; width:100%; height:1px; background:#000; }  
.blackBar {content:''; position:absolute; left:0; right:0; text-align:center; max-width:655px; width:100%; height:1px; background:#7b7b7b; margin:50px auto; z-index:1;}
#timerBar.whiteBar {content:''; position:absolute; /*left:392px;*/ left:27.3%; text-align:center; width:100%; height:1px; background:#fff; margin:50px auto; z-index:2; animation:timerBarAnimation 23s ease; }
@keyframes timerBarAnimation { 0% {width:0%;} 100% {width:100%;} }

/*===================== scrollMouse 스타일 =====================*/
.scrollMouse_wp {position:absolute; left:50%; margin-left:-35px; z-index:70;}

@media screen and (max-width:500px) {
    .scrollMouse_wp img {width:12vw; max-width:60px;}

}

/*===================== 메인비주얼안에 왼쪽부분 링크 스타일 =====================*/
.leftBtn {display:block; position:fixed; top:35%; left:2%; z-index:99; opacity:1; transition:all .4s ease;}
.leftBtn ul li.textBtn {text-align:center; transform:rotate(270deg); -webkit-transform:rotate(270deg); -ms-transform:rotate(270deg);}
.leftBtn ul li.textBtn a {color:#f7f7f7; font-size:11px; line-height:88px;}
.leftBtn ul li.arrowImg {margin-top:25px;}

/*===================== 26년 9월 수정본 : 메인비주얼 (PC 기준, 반응형은 custom_responsive.css) =====================*/
.visualslider {position:relative; width:100%; height:100vh; height:100svh;}
.visualslider > li {position:relative; width:100%; height:100% !important; overflow:hidden;}

/* 영상 배경 */
.visualslider .pc {position:absolute; left:0; top:0; width:100%; height:100%;}
.visualslider .pc .pcVideoBg {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3);}
.visualslider .pc .mainvideo {position:absolute; left:0; top:0; width:100%; height:100%;}
.visualslider .pc .mainvideo::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; z-index:10;}
.visualslider .pc video {display:block; width:100%; height:100%; object-fit:cover;} /* 100vw → 100% : 스크롤바만큼 가로 넘침 방지 */

/* 텍스트 */
.vsSection {position:absolute; left:0; top:0; width:100%; height:100%;}
.vsSection .inner.inner_cont {position:absolute; top:17%; left:0; right:0; z-index:30; width:100%; max-width:1420px; margin:0 auto; padding:0 40px; /* 글자 영역 1340px 유지 */
    box-sizing:border-box; text-align:left;
}
.vsSection .inner_cont .inner_txt {display:block; width:100%; margin:0 auto; text-align:left;}
.vsSection .inner_cont .inner_txt h2 {
    margin-top:17px;
    color:#fff; font-family:'Montserrat', sans-serif; font-weight:500;
    font-size:clamp(44px, min(7.4vw, 13vh), 110px); /* 화면 폭·높이에 맞춰 자동 축소, 최대 110px */
    line-height:1.0;
    word-break:keep-all;
}

.vsSection .inner_cont .inner_txt .vsRow {display:flex; align-items:flex-end; gap:40px; margin-top:17px;}
.vsSection .inner_cont .inner_txt .vsRow h2 {flex-shrink:0; margin-top:0;}
.vsSection .inner_cont .inner_txt .vsRow .subtxt {min-width:0; padding-bottom:12px;} /* 아랫선 미세 조정 */

.vsSection .inner_cont .inner_txt .subTitle_txt {margin-bottom:0; color:#fff; line-height:1.25; letter-spacing:1px; word-break:keep-all;}
.vsSection .inner_cont .inner_txt .subtitle1 {padding:10px 0 0 0; font-size:18px; font-weight:300;}

@font-face {
    font-family:'S-CoreDream-3Light';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}
.font_Score {font-family:'S-CoreDream-3Light';}

@keyframes rotate_image { 100% { transform:rotate(360deg); } }



/*===================== 메인링크박스 - 26년 9월 수정본 (유리 질감 둥근 버튼 / 반응형은 custom_responsive.css) =====================*/
#link_section {
    position:absolute;
    left:0;
    right:0;
    bottom:12%;
    z-index:99;
    width:100%;
}

.link_login_box {
    max-width:1904px;
    margin:0 auto;
    padding:0 40px;
    box-sizing:border-box;
}

.link_login_box .linkBox_Wp {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0;
}

/* 정렬 선택 */
#link_section.link_align_right .linkBox_Wp {
    justify-content:flex-end;
}
#link_section.link_align_center .linkBox_Wp {
    justify-content:center;
}

/* 버튼 기본 */
.link_login_box .linkBox_Wp .linkBox {
    width:auto;
    height:auto;
}

.link_login_box .linkBox_Wp .linkBox a {
    display:flex;
    align-items:center;
    gap:12px;
    height:44px;
    padding:0 5px 0 20px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,0.28);
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    color:#fff;
    text-decoration:none;
    transition:background .35s ease, border-color .35s ease, color .35s ease;
}

.link_login_box .linkBox_Wp .linkBox a em {
    font-style:normal;
    font-size:13px;
    font-weight:400;
    letter-spacing:-0.2px;
    font-family:'Noto Sans KR', sans-serif;
    white-space:nowrap;
}

/* 오른쪽 동그라미 화살표 */
.link_login_box .linkBox_Wp .linkBox a .arrow {
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin:0;
    border-radius:50%;
    background:rgba(255,255,255,0.12);
    overflow:hidden;
    transition:background .35s ease;
}

.link_login_box .linkBox_Wp .linkBox a .arrow img {
    display:block;
    width:14px;
    height:auto;
    transition:transform .35s ease, filter .35s ease;
}

/* 마우스 올렸을 때 */
.link_login_box .linkBox_Wp .linkBox a:hover {
    background:rgba(255,255,255,0.14);
    border-color:rgba(255,255,255,0.6);
}
.link_login_box .linkBox_Wp .linkBox a:hover .arrow {
    background:#fff;
}
.link_login_box .linkBox_Wp .linkBox a:hover .arrow img {
    filter:invert(1);
    transform:translateX(3px);
}

/* 견적문의 = 강조 버튼 */
.link_login_box .linkBox_Wp .linkBox.contactLink a {
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:#fff;
    border-color:#fff;
    color:#111;
    animation:ctaPulse 2.6s ease-out infinite;   /* 평소: 은은하게 퍼지는 빛 */
    transition:color .45s ease, border-color .45s ease, box-shadow .45s ease;
}

.link_login_box .linkBox_Wp .linkBox.contactLink a em {
    position:relative;
    z-index:1;
    transition:transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .45s ease;
}

.link_login_box .linkBox_Wp .linkBox.contactLink a .arrow {
    position:relative;
    z-index:1;
    background:#111;
    transition:background .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}

/* 호버 시 화살표 동그라미가 버튼 전체로 퍼지는 검은 원 */
.link_login_box .linkBox_Wp .linkBox.contactLink a::before {
    content:'';
    position:absolute;
    top:50%;
    right:22px;               /* 화살표 동그라미 중심 위치 */
    width:34px;
    height:34px;
    margin:-17px -17px 0 0;
    border-radius:50%;
    background:#111;
    transform:scale(0);
    transition:transform .6s cubic-bezier(.22,1,.36,1);
    z-index:0;
}

/* ---------- 호버 ---------- */
.link_login_box .linkBox_Wp .linkBox.contactLink a:hover {
    background:#fff;
    color:#fff;
    border-color:rgba(255,255,255,0.9);
    animation:none;
    box-shadow:0 0 0 6px rgba(255,255,255,0.12), 0 14px 34px rgba(0,0,0,0.45);
}

.link_login_box .linkBox_Wp .linkBox.contactLink a:hover::before {
    transform:scale(12);
}

.link_login_box .linkBox_Wp .linkBox.contactLink a:hover em {
    transform:translateX(-4px);
    letter-spacing:0.6px;
}

.link_login_box .linkBox_Wp .linkBox.contactLink a:hover .arrow {
    background:#fff;
    transform:rotate(-45deg);   /* 화살표가 위로 향하며 '보내기' 느낌 */
}

.link_login_box .linkBox_Wp .linkBox.contactLink a:hover .arrow img {
    filter:invert(1);
    transform:none;
    animation:arrowLoop .7s cubic-bezier(.22,1,.36,1);
}

@keyframes ctaPulse {
    0% {
        box-shadow:0 0 0 0 rgba(255,255,255,0.45);
    }
    70% {
        box-shadow:0 0 0 14px rgba(255,255,255,0);
    }
    100% {
        box-shadow:0 0 0 0 rgba(255,255,255,0);
    }
}

/* 화살표가 오른쪽으로 빠져나갔다가 왼쪽에서 다시 들어옴 */
@keyframes arrowLoop {
    0% {
        transform:translateX(0);
        opacity:1;
    }
    45% {
        transform:translateX(22px);
        opacity:0;
    }
    46% {
        transform:translateX(-22px);
        opacity:0;
    }
    100% {
        transform:translateX(0);
        opacity:1;
    }
}

/* 키보드 이동 시 테두리 표시 */
.link_login_box .linkBox_Wp .linkBox a:focus-visible {
    outline:2px solid #fff;
    outline-offset:3px;
}


#content_wp {position:relative; z-index:70; background:#fff;}/*2018.07.31 백그라운드추가*/

/*===================== 메인전용 INQUIRE 페이지부분 스타일 =====================*/

#sub_visual > ul > li.img3 {background:url(../img/sub_visual5.jpg) center top no-repeat; background-size:cover; width:100%; height:100%; position:fixed;}
#sub_visual.inquireVisual_wp {position:relative; overflow:hidden; z-index:10; margin:0 auto;}
#sub_visual.inquireVisual_wp ul {max-height:100%; height:2200px}
#sub_visual #container {position:absolute; top:0; left:0; width:100%; height:100%; padding:70% 9.4%; z-index:10; }
#sub_visual #container .inquireSection {background:#fff; z-index:5;}
#sub_visual #container .inquireSection.inner {padding:0;}
#sub_visual #container .inquireSection.inner .title_wp {padding-top:0; margin:0; text-align:left; padding:55px 95px 0;}
#sub_visual #container .inquireSection.inner .title_wp h2 {display:inline-block; margin-right:20px; font-size:40px; font-weight:900; color:#242424; line-height:1; font-family:'Montserrat', sans-serif; }
#sub_visual #container .inquireSection.inner .title_wp p.subTitle {display:inline-block; font-size:15px; color:#4d4d4d; word-break:keep-all; word-wrap:break-word;   }
.inquireSection .inquireCont_wp {margin:42px 65px 0;}
.inquireSection .inquireCont_wp .inquireCont {width:33.33333%; float:left; padding:0 25px; }
.inquireSection .inquireCont_wp .inquireCont input:focus {outline:none;}
.inquireSection .inquireCont_wp .inquireCont input::-webkit-input-placeholder {color:#363636; opacity:1;}
.inquireSection .inquireCont_wp .inquireCont input:-moz-placeholder {color:#363636; opacity:1;}
.inquireSection .inquireCont_wp .inquireCont input::-moz-placeholder {color:#363636; opacity:1;}
.inquireSection .inquireCont_wp .inquireCont input:-ms-input-placeholder {color:#363636; opacity:1;}
.inquireSection .inquireCont_wp .inquireCont input::placeholder {color:#363636; opacity:1;}
.inquireSection .inquireCont_wp .inquireCont input.inquire_form,
.inquireSection .inquireCont_wp .inquireCont select.inquire_form {width:100%; font-size:13px; font-weight:bold; color:#363636; font-family:'Montserrat', 'Noto Sans Korean', 'Noto Sans KR', sans-serif; margin-top:20px; padding:0 35px; height:60px; border:0; border-bottom:1px solid #ebebeb; outline:none; border-radius:0; -webkit-border-radius:0; }

/* 2018.07.31 새로 추가한 스타일(input에 focus시 애니메이션)*/
.inquireSection .inquireCont_wp .inquireCont .inquire_form {position:relative; }
.inquireSection .inquireCont_wp .inquireCont .inquire_form label {position:absolute; top:40px; left:35px; font-size:13px; font-weight:bold; color:#363636; font-family:'Montserrat', 'Noto Sans Korean', 'Noto Sans KR', sans-serif; transition: transform 150ms ease-out, font-size 150ms ease-out;}
.inquireSection .inquireCont_wp .inquireCont .inquire_form input,
.inquireSection .inquireCont_wp .inquireCont .inquire_form select {width:100%; font-size:13px; font-weight:bold; color:#363636; font-family:'Montserrat', 'Noto Sans Korean', 'Noto Sans KR', sans-serif; margin-top:20px; padding:0 35px; height:60px; border:0; border-bottom:1px solid #ebebeb; outline:none; border-radius:0; -webkit-border-radius:0; }
.inquireSection .inquireCont_wp .inquireCont .inquire_form select {background:url('../img/page_inquire/inquireFormArrow_img.jpg') 90% 50% no-repeat; appearance:none; -webkit-appearance:none; -moz-appearance:none;   }
.inquireSection .inquireCont_wp .inquireCont .inquire_form .underLine {position:absolute; left:0; bottom:0; width:0%; height:1px; background:#46b7ff; transition:all 0.5s; }
.inquireSection .inquireCont_wp .inquireCont .inquire_form.focused label {transform:translateY(-125%); font-size:.75em;}
.inquireSection .inquireCont_wp .inquireCont .inquire_form.focused .underLine {width:100%;}
/* // 2018.07.31 새로 추가한 스타일(input에 focus시 애니메이션)*/

.inquireSection .inquireCont_wp .inquireCont select.inquire_form {background:url('../img/page_inquire/inquireFormArrow_img.jpg') 90% 50% no-repeat; appearance:none; -webkit-appearance:none; -moz-appearance:none;   }
.inquireSection .inquireCont_wp .inquireCont select::-ms-expand {display:none;}
.inquireSection .inquireCont_wp .inquireCont .inquire_form_file_wp {height:60px; margin:20px 0 0 0; border-bottom:1px solid #ebebeb;}
.inquireSection .inquireCont_wp .inquireCont .inquire_form_file_wp p.inquire_form {display:inline-block; float:left; font-size:13px; font-weight:bold; color:#363636; font-family:'Montserrat', 'Noto Sans Korean', 'Noto Sans KR', sans-serif; margin-top:20px; padding:0 0 0 35px; }
.inquireSection .inquireCont_wp .inquireCont .inquire_form_file_wp input.inquire_form_file {width:70%; display:inline-block; float:right; margin:18px 0 0 0; background:none; border:none;}
.inquireSection .inquireCont_wp .inquireCont textarea:focus {outline:none;}
.inquireSection .inquireCont_wp .inquireCont textarea::-webkit-input-placeholder {color:#363636; opacity:1;}
.inquireSection .inquireCont_wp .inquireCont textarea:-moz-placeholder {color:#363636; opacity:1;}
.inquireSection .inquireCont_wp .inquireCont textarea::-moz-placeholder {color:#363636; opacity:1;}
.inquireSection .inquireCont_wp .inquireCont textarea:-ms-input-placeholder {color:#363636; opacity:1;}
.inquireSection .inquireCont_wp .inquireCont textarea::placeholder {color:#363636; opacity:1;}
.inquireSection .inquireCont_wp .inquireCont textarea.inquire_form {width:100%; font-size:13px; font-weight:bold; margin-top:45px; padding:10px; background:#fdfdfd; border:1px solid #dfdfdf; font-family:'Montserrat', 'Noto Sans Korean', 'Noto Sans KR', sans-serif; }
.inquireSection .inquireCont_wp .inquireCont .address_wp {text-align:left;}
.inquireSection .inquireCont_wp .inquireCont .address_wp span.addressIcon {margin:0 15px 0 0;}
.inquireSection .inquireCont_wp .inquireCont p.addressTxt {color:#000; font-size:14px; line-height:23px!important; width:241px; display:inline-block; }
.inquireSection .inquireCont_wp .inquireCont .numTxt_wp {text-align:left; margin:10px 0 31px 0; padding:0 0 0 10px;}
.inquireSection .inquireCont_wp .inquireCont .numTxt_wp p { font-size:14px; color:#4d4d4d;  }
.inquireSection .inquireCont_wp .inquireCont .numTxt_wp p > span {margin:0 25px 0 0; color:#3a3939; font-weight:600; }
.inquireSection .inquireCont_wp .inquireCont .map_wp > #map { height:320px; margin-bottom:0px;} 
.inquireSection .agreeBtn {text-align:right;}
.inquireSection .agreeBtn input#inquireChkBox {vertical-align:middle;}
.inquireSection .applyBtn {background:url('../img/page_inquire/btnBg_img.jpg') no-repeat; background-position:785px 35px; display:inline-block; width:100%; margin:30px auto; padding:20px 0; text-align:center; }
.inquireSection .applyBtn a {color:#202020; font-size:18px; font-weight:600; }
#sub_visual .title_board {position:absolute; top:0; left:0; width:100%; height:100%; padding:10% 50px 0 50px; z-index:30}
#sub_visual .title_board .inner {text-align:center}
#sub_visual .title_board .inner h2 {font-size:60px; font-weight:600; letter-spacing:5px; color:#fff}
#sub_visual .title_board .inner h2:after {display:block; margin:30px auto; width:50px; height:1px; content:''; background:#fff}
#sub_visual .title_board .inner h3 {font-size:30px; font-weight:400; color:#fff}

/*===================== 메인비주얼과 비주얼 3칸배너 사이에 있는 텍스트 스타일 =====================*/
p.mainMiddleTxt {width:100%; text-align:center; font-weight:500; margin:35px auto; font-size:12px; letter-spacing:2.3px; color:#272727; display:inline-block;} /*2018.07.31 display:inline-block 추가*/

/* 상단 VISUAL 3칸 스타일 */
.subVisual_wp {max-width:100%; margin:82px 5% 0 0; overflow:hidden; }
.subVisual_wp.serviceVisual_wp {margin:82px 5% 0;}
.subVisual_wp.serviceVisual_wp.inMainServiceVisual_wp {margin:0 5% 0; position:relative; height:0; padding-bottom:36.154%;}
.subVisual_wp.serviceVisual_wp.serviceThreeVisualBanner_wp .serviceThreeVisual_wp {position:absolute; top:0; left:0; width:100%; height:100%;}
.sectionVisual {background-size:cover; float:left; position:relative; }
.sectionVisual.leftSectionVisual {background:url(../img/page_service/leftSectionVisualBg_img.jpg) center center no-repeat; width:58%; overflow:hidden; }
.sectionVisual.rightSectionVisual {width:42%;}
.sectionVisual.rightSectionVisual .topSectionVisual {background:url(../img/page_service/topSectionVisualBg_img.jpg) center center no-repeat; overflow:hidden; }
.sectionVisual.rightSectionVisual .bottomSectionVisual {background:url(../img/page_service/bottomSectionVisual.jpg) center center no-repeat; overflow:hidden; }
.sectionVisual .sectionVisual_txt {padding:8% 0 0 7.2%; position:absolute; z-index:2; }
.sectionVisual .sectionVisual_txt .sectionVisual_subTxt {color:#2e2e2e; font-size:14px; font-weight:300; line-height:1!important; font-family:'Montserrat', sans-serif;}
.sectionVisual .sectionVisual_txt .sectionVisual_subTxt.diffFontColor {color:#fff;}
.sectionVisual .sectionVisual_txt .sectionVisual_titleTxt {color:#212121; font-size:58px; font-weight:800; line-height:1!important; font-family:'Montserrat', sans-serif;}
.sectionVisual .sectionVisual_txt .sectionVisual_titleTxt.diffFontStyle {font-size:34px; color:#fff;}
.sectionVisual .sectionVisual_img {position:relative; text-align:right;}
.sectionVisual .sectionVisual_img img {width:100%; vertical-align:middle;}
.sectionVisual .sectionVisual_img.sectionFirstVisual_img {padding:10.49% 5% 3% 43.2%; }
.sectionVisual .sectionVisual_img.sectionSecondVisual_img {padding:8.235% 0 0 39.3%;}
.sectionVisual .sectionVisual_img.sectionThirdVisual_img {padding:0 0 0 12.5%;}
.sectionVisual .sectionVisual_img.sectionFirstVisual_img img {max-width:504px;}
.sectionVisual .sectionVisual_img.sectionSecondVisual_img img {max-width:437px;}
.sectionVisual .sectionVisual_img.sectionThirdVisual_img img {max-width:629px;}


/* WORKS 부분 스타일 */
section .section {padding:0; position:relative; overflow:hidden;}
.worksSectionCont {background:#fff; padding:82px 0; overflow:hidden}
.worksListWrapper .worksTableArea .worksListContent ul {position:relative;}
.worksListWrapper .worksTableArea .worksListContent ul li {position:relative; float:left; margin:85px 0 0;list-style:none;}
.worksListWrapper .worksTableArea .worksListContent ul li:nth-child(3) {margin: 85px 5% 0;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo {position:relative; overflow:hidden; height:auto; clip-path:inset(0px 0px 0px 0px); transition:all 0.3s;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize01{width:570px; height:391px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize02{width:630px; height:680px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize03{width:414px; height:497px; display:inline-block;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize04{width:590px; height:367px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize05{width:590px; height:730px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize06{width:471px; height:367px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize07{width:590px; height:730px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize08{width:574px; height:537px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize09{width:637px; height:367px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize10{width:531px; height:613px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize11{width:715px; height:488px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo img {transform:matrix(1, 0, 0, 1, 0, 0); transition:all 0.3s; position:absolute; top:0; left:0; width:100%; height:100%;}
.worksListWrapper .worksTableArea .worksListContent ul li:hover .photo {position:relative; clip-path:inset(22px 18px 22px 18px); transition:all 0.3s; }
.worksListWrapper .worksTableArea .worksListContent ul li:hover .photo img {transform:matrix(1.1, 0, 0, 1.1, 0, 0); transition:all 0.3s;  }
.worksListWrapper .worksTableArea .worksListContent ul li .photo:before {content:''; float:left; padding-top:62.5%;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo:after {content:''; display:table; clear:both;}
.worksListWrapper .worksTableArea .worksListContent ul li a {display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
.worksListWrapper .worksTableArea .worksListContent ul li .gray_layer {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; background:#343434; transition:all 0.2s;}
.worksListWrapper .worksTableArea .worksListContent ul li.scrollreveal_works.animated .gray_layer {transition-delay:0.4s; height:0px;}
.worksListWrapper .worksTableArea .worksListContent ul li .photo .photoAnimation {position:absolute; top:100%; left:0; width:100%; height:100%; transition:all 0.3s;}
.worksListWrapper .worksTableArea .worksListContent ul li.scrollreveal_works.animated .photo .photoAnimation {top:0;}

.worksListWrapper .worksTableArea .worksListContent ul li .txtCont {position:relative; padding:25px 45px 0 54px; display:flex;  }
.worksListWrapper .worksTableArea .worksListContent ul li .txtCont .worksTitle {width:40%; display:inline-block; float:left;}
.worksListWrapper .worksTableArea .worksListContent ul li .txtCont .worksTitle p {font-size:12px; color:#2f2f2f; line-height:24px; letter-spacing:2.5px; font-weight:500; text-transform:uppercase;}
.worksListWrapper .worksTableArea .worksListContent ul li .txtCont .worksExplain {width:60%; display:inline-block; float:right; text-align:right;}
.worksListWrapper .worksTableArea .worksListContent ul li .txtCont .worksExplain p {font-size:13px; color:#323232; line-height:24px;}
.worksListWrapper .worksTableArea .worksListContent ul li .txtCont .worksExplain p.siteLink {font-size:13px; color:#000; line-height:24px;}
.worksListWrapper .worksTableArea .worksListContent ul li .txtCont .underBar_layer {position:absolute; width:131px; height:1px; background:#282828; top:55px; left:20px; z-index:2; }
.worksListWrapper .worksTableArea .worksListContent ul li .txtCont .underBar_layer.underLineDiff {width:162px;}
.worksListWrapper .worksTableArea .worksListContent ul li .txtCont .underWhite_layer {position:absolute; width:131px; height:1px; background:#fff; top:55px; left:20px; z-index:1; }
.worksListWrapper .worksTableArea .worksListContent ul li .txtCont .underWhite_layer.underLineDiff {width:162px;}
.worksListWrapper .worksTableArea .worksListContent ul li:hover .txtCont .underBar_layer {animation-name:unnderLineAnimation01; animation-duration:0.5s; animation-delay: 0.5s;}
.worksListWrapper .worksTableArea .worksListContent ul li:hover .txtCont .underWhite_layer {animation-name:unnderLineAnimation01; animation-duration:0.5s;}
.worksListWrapper .worksTableArea .worksListContent ul li:hover .txtCont .underBar_layer.underLineDiff {animation-name:unnderLineAnimation02; animation-duration:0.5s; animation-delay: 0.5s;}
.worksListWrapper .worksTableArea .worksListContent ul li:hover .txtCont .underWhite_layer.underLineDiff {animation-name:unnderLineAnimation02; animation-duration:0.5s;}

@keyframes unnderLineAnimation01 {    
	from {     
		z-index:3;
		width:0px;
		
	}    
	to {
		z-index:3;	
		width:131px;
	}
}

@keyframes unnderLineAnimation02 {    
	from {     
		z-index:3;
		width:0px;
		
	}    
	to {
		z-index:3;	 
		width:162px;
	}
}


.worksSectionCont > .inner {display:block; position:relative; max-width:1286px; margin:0 auto; padding:0px}
.worksSectionCont h2.tit {position:relative; text-align:center; z-index:30; float:left; margin-top:10px;}
.worksSectionCont h2.tit a {font-size:40px; font-weight:900; font-family:'Montserrat', sans-serif; line-height:1; color:#2e2e2e;}
.worksSectionCont p.subtit {word-break:keep-all; word-wrap:break-word; text-align:center; font-size:15px; color:#696969; line-height:2; font-weight:500;}
.worksSectionCont .btn-more2 {text-align:center; margin:100px 0 40px 0;}
.worksSectionCont .btn-more2 a {display:inline-block; font-size:13px; color:#464646; letter-spacing:2px; padding:18px 60px; border:1px solid #464646; background:transparent}
.worksSectionCont .btn-more2 a i {margin-left:15px; vertical-align:-1px}
.worksSectionCont .btn-more2 a:hover {color:#fff; background:#000}




/*section001*/
#section001 {overflow:hidden;}
#section001:after {content:''; clear:both; display:block;}
#section001 .section_wp {float:left; width:50%;}
#section001 .section_wp .innerSection {width:50%; float:left;}
#section001 .section_wp .innerSection .sectionTitle { margin-bottom:5%; display:block; vertical-align:top; padding:50px 0 0 50px; }
#section001 .section_wp .innerSection .sectionTitle img {max-width:100%;}
#section001 .section_wp .innerSection .sectionImg { position:relative; overflow:hidden; padding-top:90%;}
#section001 .section_wp .innerSection .sectionImg img {max-width:100%; height:auto; position:absolute; top:0; left:0; bottom:0; right:0;}

#section001 .section_wp .fstSection .sectionImg img,
#section001 .section_wp .seSection .sectionImg img {left:9%; }
#section001 .section_wp .trdSection .sectionImg img {top:13%;}
#section001 .section_wp .furSection .sectionImg img {top:9%;}

#section001 .section_wp .fstSection {background: url(../img/section001/section001_001_bg.jpg) no-repeat center top; background-size:cover; -webkit-background-size:cover;  -moz-background-size:cover; -o-background-size:cover; }
#section001 .section_wp .seSection {background: url(../img/section001/section001_002_bg.jpg) no-repeat center top; background-size:cover; -webkit-background-size:cover;  -moz-background-size:cover; -o-background-size:cover;}
#section001 .section_wp .trdSection {background: url(../img/section001/section001_003_bg.jpg) no-repeat center top; background-size:cover; -webkit-background-size:cover;  -moz-background-size:cover; -o-background-size:cover;}
#section001 .section_wp .furSection {background: url(../img/section001/section001_004_bg.jpg) no-repeat center top; background-size:cover; -webkit-background-size:cover;  -moz-background-size:cover; -o-background-size:cover;}



/* SYSTEM 부분 스타일 */
.systemSectionCont {background:#fff; position:relative; padding:85px 0 110px 0; overflow:hidden}
.systemSectionCont .systemTtitle .inner {display:block; position:relative; max-width:1280px; margin:0 auto 50px; padding:0px}
.systemSectionCont .systemTtitle .inner h2.tit {position:relative; text-align:center; margin-bottom:10px; z-index:30;}
.systemSectionCont .systemTtitle .inner h2.tit a {font-size:40px; font-weight:900; color:#2e2e2e; line-height:1; font-family:'Montserrat', sans-serif;}
.systemSectionCont .systemTtitle .inner p.subtit {word-break:keep-all; word-wrap:break-word; text-align:center; font-size:15px; color:#696969; line-height:2; font-weight:500;}
.systemSectionCont .systemContent_wp {max-width:1180px; margin:0 auto; height:423px;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent {text-align:center; width:23%; float:left; margin:0 11.81px;position:relative;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent:nth-child(1) {left:0;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent:nth-child(2) {left:25%;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent:nth-child(3) {left:50%;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent:nth-child(4) {left:75%;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent a {position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:423px; z-index:30;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent .systemFront, .systemSectionCont .systemContent_wp .systemContent_inner .systemContent .systemBack {position:absolute;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent .systemFront {background:#fff; border:1px solid #e6e6e6; width:100%; height:423px; backface-visibility: visible; z-index:20; transform:perspective(300px) rotateY(0deg); transition:all 500ms;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent .systemBack{text-align:center; padding:145px 0 94px;  backface-visibility: visible; z-index:10; transform:perspective(300px) rotateY(180deg); transition: all 500ms;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent:hover .systemFront {z-index:10; backface-visibility:visible; transform:perspective(300px) rotateY(180deg);} 
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent:hover .systemBack {z-index:20; backface-visibility:visible; transform:perspective(300px) rotateY(360deg);} 
.systemSectionCont .systemContent_wp .systemContent .systemFront .systemTitle {position:relative; display:inline-block; color:#313030; font-weight:700; font-size:31px; z-index:1; margin:80px 0 0 0;}
.systemSectionCont .systemContent_wp .systemContent .systemFront .systemTitle:after {content:''; position:absolute; background:#86bbf1; width:100%; height:10px; left:0; bottom:9px; z-index:-1;}
.systemSectionCont .systemContent_wp .systemContent .systemFront .systemSubTitle {font-family:'Noto Sans Korean'; font-size:16px; color:#323232; font-weight:500; margin:4px 0 20px;}
.systemSectionCont .systemContent_wp .systemContent .systemFront .systemSentence {font-family:'Noto Sans Korean'; font-size:14px; color:#727272; font-weight:500; line-height:2; margin:20px 0 80px; word-break:keep-all; word-wrap:break-word;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent .backBg01 {background:url(../img/systemBack_bg01.jpg) no-repeat; width:100%;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent .backBg02 {background:url(../img/systemBack_bg02.jpg) no-repeat; width:100%;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent .backBg03 {background:url(../img/systemBack_bg03.jpg) no-repeat; width:100%;}
.systemSectionCont .systemContent_wp .systemContent_inner .systemContent .backBg04 {background:url(../img/systemBack_bg04.jpg) no-repeat; width:100%;}
.systemSectionCont .systemContent_wp .systemContent .systemBack .systemBackTitle{color:#fff; font-size:31px; font-weight:700;}
.systemSectionCont .systemContent_wp .systemContent .systemBack .systemBackSentence {font-family:'Noto Sans Korean'; color:#e9e9e9; font-size:14px; line-height:2; font-weight:400; margin:30px 0 50px; word-break:keep-all; word-wrap:break-word; }

.mobile_systemSectionCont {display:none;}

/* midBar 부분 스타일 */
.midBarSectionCont { max-height:285px;}
.midBarSectionCont:after {clear:both; display:block; content:'';}
.midBarSectionCont .midBar_wp {display:inline-block; position:relative; top:0; left:0; z-index:0; width:100%; height:14vw; min-height:285px; text-align:center; overflow:hidden; background:#000;}
.midBarSectionCont .midBar_wp .midBar_cont_bg {position:absolute; top:0; left:0; z-index:-1; width:100%; height:180%; background:url(../img/midBar_bg.jpg); background-size:cover; background-position:center;}
.midBarSectionCont .midBar_wp .midBar_cont_wp {max-width:1200px; margin:0 auto; padding:110.5px 0 0; display:inline-block; width:100%;}
.midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_text {float:left; text-align:left;}
.midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_text p{line-height:2; font-weight:300; color:#fff; font-size:15px; font-family:'Noto Sans Korean', 'Noto Sans Kr'; word-break:keep-all; word-wrap:break-word;}
.midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_link {float:right; margin:10px 0 0 0; }
.midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_link a {position:relative; display:inline-block; float:right; padding:16px 40px; font-weight:300; color:#fff; font-size:14px; font-family:'Noto Sans Korean', 'Noto Sans Kr'; word-break:keep-all; word-wrap:break-word;}
.midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_link a > span {position:absolute;}
.midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_link a:hover {background:#fff; color:#000;}

/* countBar 부분 스타일 */
.countBarSectionCont:after {clear:both; display:block; content:'';}
.countBarSectionCont .countBar_wp {width:100%; height:40.3vw; max-height:590px; overflow:hidden; background:#000;}
.countBarSectionCont .countBar_wp .countBar_cont_bg {width:100%; height:100%; background:url(../img/countBar_bg.jpg); background-size:cover; background-position:center;}
.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp {max-width:1280px; margin:0 auto; padding:8.6% 0; display:flex; }
.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont {text-align:center; float:left; width:33.33333%; border-right:1px solid rgba(255,255,255,0.1); }
.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont:last-child {border:none; }
.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countIcon_img {}
.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countIcon_img img{}
.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countNumber_wp span.counterNum {font-family:'Montserrat', sans-serif; color:#fff; font-size:62px; font-weight:700; line-height:1.5;}
.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countNumber_wp span.backTxt {font-family:'Noto Sans Korean'; font-size:20px; color:#fff; font-weight:500; }
.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countTitle {font-family:'Noto Sans Korean'; color:#fff; font-size:18px; font-weight:400; line-height:3; }
.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countSentence {color:#d7dce0; font-size:14px; font-weight:300; line-height:1.9;}


/* 섹션 공통 */
.sectionCont {position:relative; padding:120px 0; overflow:hidden}
.sectionCont > .inner {position:relative; max-width:1400px; margin:0 auto; padding:0 50px}

/* 지도&문의 */
.section5 {padding:0 !important; position:relative;}
.section5 .mapArea {width:100%; height:587px !important}
.section5 .mapArea img {display:block; width:100%}
.section5 .contactArea {position:absolute; top:0; right:0; background:rgba(15,94,179,0.9); margin:70px 23% 0 0; padding:44px 30px; text-align:center;}
.section5 .contactArea h2 {border-bottom:1px solid #4481c4; padding:0 0 23px 0;}
.section5 .contactArea .contactTxt_wp {width:352px; padding:32px 26px 0;}
.section5 .contactArea .contactTxt_wp p.address,
.section5 .contactArea .contactTxt_wp p.clickMap{ font-size:15px; color:#fff; line-height:26px; word-break:keep-all; word-wrap:break-word; }
.section5 .contactArea .contactTxt_wp p.clickMap {display:inline-block; margin:70px 0 0;}
.section5 .contactArea .contactTxt_wp .callNumber {margin-top:35px;}
.section5 .contactArea .contactTxt_wp .callNumber p {display:inline-block; width:50%; font-size:15px; color:#fff; line-height:27px; }
.section5 .contactArea .contactTxt_wp .callNumber p > span {margin-right:15px;}
.section5 .contactArea .contactTxt_wp .callNumber p > span img {vertical-align:unset!important;}
.section5 .contactArea .contactTxt_wp .callNumber p.telNum {float:left;}
.section5 .contactArea .contactTxt_wp .callNumber p.faxNum {float:right;}



/* 미디어쿼리 */

@media screen and (max-width:1480px) {
	/*===================== 상단 VISUAL 3칸 스타일 =====================*/
	.sectionVisual .sectionVisual_txt .sectionVisual_titleTxt {font-size:48px;}
	.sectionVisual .sectionVisual_txt .sectionVisual_titleTxt.diffFontStyle {font-size:28px;}
}


@media screen and (max-width:1280px) {
    
    p.mainMiddleTxt {margin:30px auto;}

		
	/*=============== 메인 공통 페이지 =====================*/    
    .section .inner.inner_cont {position:absolute; top:40%; left:0%; padding:0; width:100%;}    
    .section .inner_cont .inner_txt {margin-bottom:0;}
    .section .inner_cont .inner_txt .subtitle1 {font-size:14px; line-height:1.6;}

   

		
	/*===================== 상단 VISUAL 3칸 스타일 =====================*/
	.sectionVisual .sectionVisual_txt .sectionVisual_titleTxt {font-size:38px;}
	.sectionVisual .sectionVisual_txt .sectionVisual_titleTxt.diffFontStyle {font-size:24px;}

    /*===================== WORKS 스타일 =====================*/
    .worksSectionCont {padding:0; margin:60px 0 0;}
    .worksSectionCont h2.tit {float:inherit; margin:0 0 5px; text-align:center;}
    .worksSectionCont h2.tit.mobView a {font-size:32px; line-height:2; font-family:'Montserrat', sans-serif; font-weight:900;}
    .worksSectionCont h2.tit.mr155 {margin-right:0!important;}
	.worksSectionCont h2.tit.txl {text-align:center!important;}
	.worksSectionCont h2.tit.disinb {display:block!important;}
    
    .worksSectionCont .btn-more2 {text-align:center; margin:30px 0 80px 0;}
    
	/*===================== midBar 스타일 =====================*/
	.midBarSectionCont {max-height:285px;}
	.midBarSectionCont .midBar_wp {min-height:285px;}
	.midBarSectionCont .midBar_wp .midBar_cont_wp {padding:60px 0 0;}
	.midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_text {float:inherit; width:60%; margin:0 auto 5% auto; }
	.midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_text p {text-align:center; font-size:30px; line-height:2; font-family:'Montserrat', sans-serif; font-weight:900;  }
	.midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_link {float:unset; width:90%; margin:0 auto; text-align:center;}
	.midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_link a {font-size:14px; padding:15px 50px; float:unset;}

	/*===================== countBar 스타일 =====================*/
	.countBarSectionCont .countBar_wp {height:100%; max-height:100%;}
	.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp {display:block; padding:0;}
	.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont {width:90%; margin:0 auto; padding:5%; float:unset; border-right:none; border-bottom: 1px solid rgba(255,255,255,0.1) }
	.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .img_wp {display:inline-block; float:left; width:30%;}
	.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .txt_wp {display:inline-block; width:62%;}
	.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countNumber_wp span.counterNum {font-size:40px;}
	.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countTitle {text-align:left;}
	.countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countSentence {text-align:left;}

	/*===================== systemSection 스타일 =====================*/	
	.mobile_systemSectionCont {position:relative; padding:60px 0; overflow:hidden}
	.mobile_systemSectionCont .systemTtitle {padding:0; margin:0 0 30px 0;}
	.mobile_systemSectionCont .systemTtitle h2.tit {float:inherit; margin:0 30px 0px;}
    .mobile_systemSectionCont .systemTtitle h2.tit a {font-size:32px; line-height:2; font-family:'Montserrat', sans-serif; font-weight:900;}
    
    
    .mobile_systemSectionCont .systemContent_wp {max-width:1180px; width:85%; margin:0 auto; }
	.mobile_systemSectionCont .systemContent_wp:after {display:block; clear:both; content:'';}
	.mobile_systemSectionCont .systemContent_wp .systemContent_inner .systemContent {position:relative; text-align:center; width:45%; float:left; margin:0 0 30px 0;}
    .mobile_systemSectionCont .systemContent_wp .systemContent_inner .systemContent:nth-child(even) {float:right;}
    .mobile_systemSectionCont .systemContent_wp .systemContent_inner .systemContent:after {display:block; clear:both; content:'';}
	.mobile_systemSectionCont .systemContent_wp .systemContent_inner .systemContent .systemFront {background:#fff; border:1px solid #e6e6e6; width:100%;}
	.mobile_systemSectionCont .systemContent_wp .systemContent .systemFront .systemTitle {position:relative; display:inline-block; color:#313030; font-size:31px; z-index:1; margin:40px 0 0 0;}
	.mobile_systemSectionCont .systemContent_wp .systemContent .systemFront .systemTitle:after {content:''; position:absolute; background:#86bbf1; width:100%; height:10px; left:0; bottom:7px; z-index:-1;}
	.mobile_systemSectionCont .systemContent_wp .systemContent .systemFront .systemSubTitle {font-family:'Noto Sans Korean'; font-size:15px; color:#323232; font-weight:400; margin:0 0 10px;}
	.mobile_systemSectionCont .systemContent_wp .systemContent .systemFront .systemSentence {font-family:'Noto Sans Korean'; font-size:14px; color:#727272; font-weight:300; line-height:2; margin:10px 0 40px; word-break:keep-all; word-wrap:break-word;}
    .mobile_systemSectionCont .systemContent_wp .systemContent_inner .systemContent .systemBack {display:none;}	
	
	/*===================== 하단 CONTACT 스타일 =====================*/
	.section5 .contactArea {padding:140px 0; top:0; bottom:0; left:0; right:0; margin:0 auto;}
	.section5 .contactArea .contactTxt_wp {width:52%; margin:0 auto; }
	.section5 .contactArea ul li {word-break:keep-all; word-wrap:break-word; }
		
	/*===================== 하단 푸터 footer 스타일 =====================*/
	#footer .contentTxt_wp .address_wp,
	#footer .contentTxt_wp .info_wp,
	#footer .contentTxt_wp .blog_wp {text-align:left;}
	#footer .contentBtn_wp {float:inherit; display:inline-block; margin:7% 0 0;}
	#footer .contentBtn_wp ul {padding:0;}
    
	/*===================== 반응형 스타일 =====================*/
    .pcView {display:none!important;}
	.mobView {display:block!important;}
			
}

@media screen and (max-width:1100px) {
    /*===================== 상단 VISUAL 3칸 스타일 =====================*/
    .subVisual_wp.serviceVisual_wp.inMainServiceVisual_wp {padding-bottom:90%; margin:0 5% 0;}
	.sectionVisual.leftSectionVisual,
	.sectionVisual.rightSectionVisual {width:100%;}
	.sectionVisual.rightSectionVisual .topSectionVisual,
	.sectionVisual.rightSectionVisual .bottomSectionVisual {width:50%; display:inline-block; float:left;}
}


@media screen and (max-width:768px) {
    p.mainMiddleTxt {margin:13px auto;}
    .section .inner.inner_cont {margin-top:0; top:37%;}
    
    /*=============== 메인 공통 페이지 =====================*/
    .section p.subtit {font-size:14px; line-height:2; margin:0 30px; letter-spacing:-0.5px;}
    
    /*===================== 상단 VISUAL 3칸 스타일 =====================*/
    .subVisual_wp.serviceVisual_wp.inMainServiceVisual_wp {margin:0;}
    .sectionVisual.rightSectionVisual .topSectionVisual,
    .sectionVisual.rightSectionVisual .bottomSectionVisual {float:inherit; width:100%; vertical-align:top;}
    .sectionVisual .sectionVisual_txt {padding:30px;}
    .sectionVisual .sectionVisual_txt .sectionVisual_titleTxt {font-size:32px;}
    .sectionVisual .sectionVisual_txt .sectionVisual_subTxt {display:none;}
    .subVisual_wp.serviceVisual_wp.inMainServiceVisual_wp {padding-bottom:171%;}

    /*===================== WORKS 스타일 =====================*/
    .worksListWrapper .worksTableArea .worksListContent ul li {margin:80px 0 0; width:100%;}
    .worksListWrapper .worksTableArea .worksListContent ul li:first-child {margin:30px 0 0;}
    .worksListWrapper .worksTableArea .worksListContent ul li:nth-child(3) {margin:85px 0 0;}
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize01{max-width:570px; max-height:391px; width:100%; height:100%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize02{max-width:630px; max-height:680px; width:100%; height:100%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize03{max-width:414px; max-height:497px; width:100%; height:100%;  display:inline-block;}
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize04{max-width:590px; max-height:367px; width:100%; height:100%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize05{max-width:590px; max-height:730px; width:100%; height:100%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize06{max-width:471px; max-height:367px; width:100%; height:100%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize07{max-width:590px; max-height:730px; width:100%; height:100%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize08{max-width:574px; max-height:537px; width:100%; height:100%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize09{max-width:637px; max-height:367px; width:100%; height:100%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize10{max-width:531px; max-height:613px; width:100%; height:100%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .photo.photoSize11{max-width:715px; max-height:488px; width:100%; height:100%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .photo img {height:auto;}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize01:before {padding-top:68.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize02:before {padding-top:107.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize03:before {padding-top:119.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize04:before {padding-top:62.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize05:before {padding-top:123.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize06:before {padding-top:78.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize07:before {padding-top:93.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize08:before {padding-top:123.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize09:before {padding-top:57.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize10:before {padding-top:112.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .photoSize11:before {padding-top:68.5%}
    .worksListWrapper .worksTableArea .worksListContent ul li .txtCont {padding:20px 15px 0;}
    .worksListWrapper .worksTableArea .worksListContent ul li .txtCont .worksTitle {width:50%;}
    .worksListWrapper .worksTableArea .worksListContent ul li .txtCont .worksTitle p {font-size:14px; line-height:1.4; text-align:left;}
    .worksListWrapper .worksTableArea .worksListContent ul li .txtCont .worksExplain {width:50%; }
    .worksListWrapper .worksTableArea .worksListContent ul li .txtCont .worksExplain p, 
    .worksListWrapper .worksTableArea .worksListContent ul li .txtCont .worksExplain p.siteLink {font-size:14px; line-height:1.6; word-break:keep-all}
    .worksListWrapper .worksTableArea .worksListContent ul li .txtCont .underWhite_layer,
    .worksListWrapper .worksTableArea .worksListContent ul li .txtCont .underBar_layer,
    .worksListWrapper .worksTableArea .worksListContent ul li .txtCont .underBar_layer.underLineDiff,
    .worksListWrapper .worksTableArea .worksListContent ul li .txtCont .underWhite_layer.underLineDiff,
    .worksListWrapper .worksTableArea .worksListContent ul li:hover .txtCont .underBar_layer,
    .worksListWrapper .worksTableArea .worksListContent ul li:hover .txtCont .underWhite_layer,
    .worksListWrapper .worksTableArea .worksListContent ul li:hover .txtCont .underBar_layer.underLineDiff,
    .worksListWrapper .worksTableArea .worksListContent ul li:hover .txtCont .underWhite_layer.underLineDiff {display:none;}
    .worksSectionCont .btn-more2 a {padding:15px 50px;}
            
    /*===================== midBar 스타일 =====================*/
    .midBarSectionCont .midBar_wp .midBar_cont_wp {padding:65px 0 0;}
    .midBarSectionCont .midBar_wp .midBar_cont_wp .midBar_cont_text {width:88%;}
    
    /*===================== countBar 스타일 =====================*/
    .countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp {padding:20px 0;}
    .countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont {width:100%; padding:45px 30px;}
    .countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .img_wp {width:100%; float:inherit; margin:0 0 10px;}
    .countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .txt_wp {width:100%;}
    .countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countNumber_wp span.counterNum {font-size:32px; line-height:1.6;}
    .countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countTitle {text-align:center; font-size:18px; line-height:2.5; font-weight:500;}
    .countBarSectionCont .countBar_wp .countBar_cont_bg .countBar_cont_wp .countBar_cont .countSentence {text-align:center; font-size:14px; line-height:1.4;}
    
}

@media screen and (max-width:680px) {
    /*===================== 하단 CONTACT 스타일 =====================*/
	.section5 .contactArea .contactTxt_wp {width:95%; margin:0 auto; }
}

@media screen and (max-width:550px) {
    /*===================== systemSection 스타일 =====================*/
    .mobile_systemSectionCont .systemContent_wp {max-width:100%; width:100%; padding:0 30px; margin:0 auto 0; }
    .mobile_systemSectionCont .systemContent_wp .systemContent_inner .systemContent {width:100%;}
    .mobile_systemSectionCont .systemContent_wp .systemContent .systemFront .systemTitle {font-size:28px; line-height:1; margin:30px 0 0 0;}
    .mobile_systemSectionCont .systemContent_wp .systemContent .systemFront .systemSubTitle {font-size:14px; line-height:1.6;}
    .mobile_systemSectionCont .systemContent_wp .systemContent .systemFront .systemSentence {margin:10px 0 30px 0;}    
}




/*===================== 레이어팝업 스타일 =====================*/
.layerPopup {position:absolute; z-index:999; visibility:visible; top:10px; left:10px;}

@media screen and (max-width:768px) {
	.layerPopup {top:0; left:0;}
	.layerPopup img {width:auto; max-width:100%;}
	.layerPopup input {-webkit-appearance:checkbox; background:#fff;}
}

/* 22.02 추가본 */

.rotateWrap {position:absolute; width:100%; height:100%; overflow:hidden; perspective:1300px; background:#000;}
.rotateWrap > .imgBoxbg {position:absolute; width:100%; height:100%; z-index:0; background:url('/common/img/main_test/vs-imgm01.jpg')no-repeat center/cover;}


.rotateWrap > video {width: 100%; height: 100%; object-fit: cover; position: fixed; opacity: 0.5;}

@keyframes rotateAni {
    0% {transform: rotateY(0deg);}
    100% {transform: rotateY(360deg);}
}

.rotateWrap #circle {
	position:absolute;
	width:600px;
	height:800px; 
	top:50%; 
	left:50%; 
	margin-top:-350px; 
	margin-left:-300px; 
	transform-style:preserve-3d; 
	-webkit-transform-style:preserve-3d; 
	-moz-transform-style:preserve-3d; 
	-ms-transform-style:preserve-3d; 
	-o-transform-style:preserve-3d; 
	animation:rotateAni linear 40s infinite;
}
.rotateWrap #circle article {
	position:absolute; 
	width:100%; 
	height:100%; 
	top:0px; 
	left:0px; 
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
}
.rotateWrap #circle article  {position:absolute; left:0px; top:0px; font-size:30px; line-height:1.4; font-family:'orbitron'; color:#ddd; opacity:0; transition:all 0.5s;}
.rotateWrap #circle article:hover  {top:-60px; opacity:1;}
.rotateWrap #circle article .areaBox {width:100%; height: 100%;}

.rotateWrap #circle article .areaBox > div {position: relative; width:100%; height:100%; padding:50px; font-size:17px; line-height:1.4; font-family:'orbitron'; color:#ddd; background:rgba(255, 255, 255, 0.06); border:1px solid rgba(255, 255, 255, 0.5); box-sizing:border-box; opacity:0.36; overflow:hidden; transition:all 0.5s;}
/* .rotateWrap #circle article .areaBox > div:hover {background:rgba(255, 255, 255, 0.15); transform:scale(1.03); opacity:1;} */

.rotateWrap #circle article .areaBox > div h2 {font-size:17px; line-height:1.4; font-family:'orbitron'; color:#ddd; transition:all 0.5s;}
.rotateWrap #circle article .areaBox > div i {transition:all 0.5s;}
/* .rotateWrap #circle article .areaBox > div:hover h2 {color:lightcyan; text-shadow:0px 0px 10px aqua;}
.rotateWrap #circle article .areaBox > div:hover i {color:lightcyan; text-shadow:0px 0px 10px aqua; transform:scale(1.2);} */

/*face1*/
.rotateWrap #circle .face1 .areaBox > div {float:left; width:289px; height:389px; padding:115px 50px 50px; margin-bottom:22px; text-align:center;}
.rotateWrap #circle .face1 .areaBox > div .imgBox {height:116px;}
.rotateWrap #circle .face1 .areaBox > div h2 {margin-top:26px; font-size:18px; line-height:1.4; font-weight:700; font-family:'orbitron'; color:#ddd;}
.rotateWrap #circle .face1 .areaBox > div:nth-of-type(odd) {margin-right:20px;}
  
/*face2*/
.rotateWrap #circle .face2 .areaBox > div {position:relative; width:100%; height:100%; overflow:hidden;}
.rotateWrap #circle .face2 .areaBox > div .rotate25 {position:absolute; top:120px; left:106px;  transform:rotate(-25deg);}
.rotateWrap #circle .face2 .areaBox > div h4 {margin:20px 0 0; font-size:18px; line-height:1.7; font-weight:400; font-family:'orbitron'; color:#ddd;}
.rotateWrap #circle .face2 .areaBox > div p {margin:20px 0 0; font-size:15px; font-weight:500; font-family:'orbitron'; color:#ddd;}

/*face3*/
.rotateWrap #circle .face3 .areaBox > div {width:100%; height:248px; margin-bottom:28px; padding:85px 60px;}
.rotateWrap #circle .face3 .areaBox > div .con h2 {font-size:25px; font-weight:600; line-height:1.4; font-family:'orbitron'; color:#fff;}
.rotateWrap #circle .face3 .areaBox > div .con p {margin-top:8px; font-size:16px; line-height:1.8; font-family:'orbitron'; color:#ddd;}

/*face4*/
.rotateWrap #circle .face4 .areaBox > div:nth-of-type(1) {width:100%; height:587px; margin-bottom:23px; padding:60px;}
.rotateWrap #circle .face4 .areaBox > div:nth-of-type(1) h3 {margin:35px 0 8px; font-size:24px; font-weight:600; font-family:'orbitron'; color:#ddd;}
.rotateWrap #circle .face4 .areaBox > div:nth-of-type(1) h4 {font-size:18px; line-height:1.4; font-weight:400; font-family:'orbitron'; color:#ddd;}


.rotateWrap #circle .face4 .areaBox > div:nth-of-type(2) {width:100%; height:190px; padding:60px;}
.rotateWrap #circle .face4 .areaBox > div:nth-of-type(2) h4 {font-size:24px; font-weight:600; line-height:1; font-family:'orbitron'; color:#ddd;}
.rotateWrap #circle .face4 .areaBox > div:nth-of-type(2) p {margin:10px 0 0; font-size:15px; font-family:'orbitron'; color:#ddd;}

/*face5*/
.rotateWrap #circle .face5 .areaBox > div {width:100%; height:100%; padding:85px 56px 55px 65px;}
.rotateWrap #circle .face5 .areaBox > div h5 {font-size:33px; font-family:'orbitron'; font-weight:700; color:#ddd;}
.rotateWrap #circle .face5 .areaBox > div .imgBox {position:relative; text-align:center; margin:65px 0 0;}
.rotateWrap #circle .face5 .areaBox > div .imgBox .txtBox {position:absolute; top:55%; left:50%; transform:translate(-50%,-50%);}
.rotateWrap #circle .face5 .areaBox > div .imgBox .txtBox h5 {font-size:17px; font-family:'orbitron'; color:#ddd;}
.rotateWrap #circle .face5 .areaBox > div .imgBox .txtBox h5 span {font-size:40px; font-family:'orbitron'; font-weight:600;}
.rotateWrap #circle .face5 .areaBox > div .chartBox {margin:75px 0 0; padding:0 0 0 20px;}
.rotateWrap #circle .face5 .areaBox > div .chartBox:after {content:''; display:block; clear:both;}
.rotateWrap #circle .face5 .areaBox > div .chartBox ul li {margin:0 0 20px; font-size:19px; font-weight:500; font-family:'orbitron'; color:#ddd;}
.rotateWrap #circle .face5 .areaBox > div .chartBox ul li span {display:inline-block; width:20px; height:20px; margin:0 20px 0 0; background:#86c3d1; border-radius:50%; vertical-align:middle;}
.rotateWrap #circle .face5 .areaBox > div .chartBox ul li:nth-child(2) span {background:#c7c7c7;}
.rotateWrap #circle .face5 .areaBox > div .chartBox p {margin:40px 0 0; text-align:right; font-size:11px; font-weight:400; font-family:'orbitron'; color:#ddd;}

/*face6*/
.rotateWrap #circle .face6 .areaBox > div {width:100%; height:248px; margin-bottom:28px; padding:68px 50px; font-size:0;}
.rotateWrap #circle .face6 .areaBox > div .imgBox {position:relative; display:inline-block; width:145px; height:112px; padding:0 48px 0 0; text-align:right; line-height:112px; color:#fff; border-right:1px solid #bbb; box-sizing:border-box; vertical-align:middle;}
.rotateWrap #circle .face6 .areaBox > div .imgBox img {vertical-align:middle !important;}
.rotateWrap #circle .face6 .areaBox > div .con {display:inline-block; width:calc(100% - 145px); padding-left:46px; box-sizing:border-box; vertical-align:middle;}
.rotateWrap #circle .face6 .areaBox > div .con h4 {font-size:25px; font-family:'orbitron'; font-weight:600; color:#ddd;}
.rotateWrap #circle .face6 .areaBox > div .con p {font-size:16px; line-height:1.8; font-family:'orbitron'; color:#999;}

/*.face7*/
.rotateWrap #circle .face7 .areaBox > div {width:100%; height:100%;}
.rotateWrap #circle .face7 .areaBox > div > div {position:relative; width:100%; height:100%; padding:50px; border:1px solid rgba(255, 255, 255, 0.5); box-sizing:border-box; overflow:hidden;}
.rotateWrap #circle .face7 .areaBox > div > div h5 {font-size:17px; font-weight:800; color:#ddd;}
.rotateWrap #circle .face7 .areaBox > div > div h3 {position:absolute; top:110px; font-size:40px; line-height:1.15; font-family:'orbitron'; font-weight:600; color:#fff;}
.rotateWrap #circle .face7 .areaBox > div > div .bgimgArea {position:absolute; left:0; top:0; width:100%; height:100%; background:url('/common/img/main_test/face7_bg01.jpg')no-repeat center/cover; z-index:-1;}

.rotateWrap #circle .face7 .areaBox > div > div .goMoreIcon {position:absolute; bottom:80px; z-index:1;}
.rotateWrap #circle .face7 .areaBox > div > div .goMoreIcon .txtImgBox img {animation: rotate_image 30s linear infinite;}
.rotateWrap #circle .face7 .areaBox > div > div .goMoreIcon > div {position:relative; width:129px;}
.rotateWrap #circle .face7 .areaBox > div > div .goMoreIcon > div .imgBox {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}



/*face8*/
.rotateWrap #circle .face8 .areaBox > div:nth-of-type(1) {width:100%; height:389px; margin-bottom:22px; padding:100px 80px;}
.rotateWrap #circle .face8 .areaBox > div:nth-of-type(1) h4 {font-size:33px; font-weight:700; font-family:'orbitron'; color:#ddd;}
.rotateWrap #circle .face8 .areaBox > div:nth-of-type(1) p {margin:40px 0 0; text-align:center; font-size:22px; line-height:1; font-weight:600; font-family:'orbitron'; color:#ddd;}
.rotateWrap #circle .face8 .areaBox > div:nth-of-type(1) p span.big {font-size:100px; font-weight:800;}

.rotateWrap #circle .face8 .areaBox > div:nth-of-type(2) {float:left; width:289px; height:389px; margin-right:22px; padding:95px 50px 0; text-align:center;}
.rotateWrap #circle .face8 .areaBox > div:nth-of-type(2) img {height:106px;}
.rotateWrap #circle .face8 .areaBox > div:nth-of-type(2) h4 {margin:32px 0 12px; line-height:1; font-size:18px; font-weight:600; font-family:'orbitron'; color:#ddd;}
.rotateWrap #circle .face8 .areaBox > div:nth-of-type(2) h2 {line-height:1; font-size:50px; font-weight:700; font-family:'orbitron'; color:#ddd;}

.rotateWrap #circle .face8 .areaBox > div:nth-of-type(3) {float:left; width:289px; height:389px; padding:95px 50px 0; text-align:center;}
.rotateWrap #circle .face8 .areaBox > div:nth-of-type(3) img {height:106px;}
.rotateWrap #circle .face8 .areaBox > div:nth-of-type(3) h4 {margin:38px 0 6px; line-height:1; font-size:18px; font-weight:600; font-family:'orbitron'; color:#ddd;}
.rotateWrap #circle .face8 .areaBox > div:nth-of-type(3) h2 {line-height:1; font-size:50px; font-weight:700; font-family:'orbitron'; color:#ddd;}

/* 3D 배치 */
.face1 {
            transform: rotateY(0deg) translateZ(-764px);
	    	-webkit-transform: rotateY(0deg) translateZ(-764px);
			-moz-transform: rotateY(0deg) translateZ(-764px);
			-ms-transform: rotateY(0deg) translateZ(-764px);
			-o-transform: rotateY(0deg) translateZ(-764px);
}
.face2 {
            transform: rotateY(45deg) translateZ(-764px);
			-webkit-transform: rotateY(45deg) translateZ(-764px);
			-moz-transform: rotateY(45deg) translateZ(-764px);
			-ms-transform: rotateY(45deg) translateZ(-764px);
			-o-transform: rotateY(45deg) translateZ(-764px);
 }
.face3 {
			transform: rotateY(90deg) translateZ(-764px);
			-webkit-transform: rotateY(90deg) translateZ(-764px);
			-moz-transform: rotateY(90deg) translateZ(-764px);
			-ms-transform: rotateY(90deg) translateZ(-764px);
			-o-transform: rotateY(90deg) translateZ(-764px);
}
.face4 {
			transform: rotateY(135deg) translateZ(-764px);
			-webkit-transform: rotateY(135deg) translateZ(-764px);
			-moz-transform: rotateY(135deg) translateZ(-764px);
			-ms-transform: rotateY(135deg) translateZ(-764px);
			-o-transform: rotateY(135deg) translateZ(-764px);
}
.face5 {
			transform: rotateY(180deg) translateZ(-764px);
			-webkit-transform: rotateY(180deg) translateZ(-764px);
			-moz-transform: rotateY(180deg) translateZ(-764px);
			-ms-transform: rotateY(180deg) translateZ(-764px);
			-o-transform: rotateY(180deg) translateZ(-764px);
}
.face6 {
			transform: rotateY(225deg) translateZ(-764px);
			-webkit-transform: rotateY(225deg) translateZ(-764px);
			-moz-transform: rotateY(225deg) translateZ(-764px);
			-ms-transform: rotateY(225deg) translateZ(-764px);
			-o-transform: rotateY(225deg) translateZ(-764px);
}
.face7 {
			transform: rotateY(270deg) translateZ(-764px);
			-webkit-transform: rotateY(270deg) translateZ(-764px);
			-moz-transform: rotateY(270deg) translateZ(-764px);
			-ms-transform: rotateY(270deg) translateZ(-764px);
			-o-transform: rotateY(270deg) translateZ(-764px);
}
.face8 {
			transform: rotateY(315deg) translateZ(-764px);
			-webkit-transform: rotateY(315deg) translateZ(-764px);
			-moz-transform: rotateY(315deg) translateZ(-764px);
			-ms-transform: rotateY(315deg) translateZ(-764px);
			-o-transform: rotateY(315deg) translateZ(-764px);
}

/* 수정된것들 */
.vstextArea  {position:absolute; left:50%; top:36%; width:auto; transform:translate(-50%,0);}
.vstextArea .inner_txt {text-align:center; margin:0 auto; width:100%; display:inline-block;}
.vstextArea .inner_txt h2 {width:max-content; margin:0 auto; font-size:70px; color:#fff; font-family:'Montserrat', sans-serif; font-weight:800; line-height:1; margin-top:17px;}
.vstextArea .inner_txt h2 br.only_m {display:none;}
.vstextArea .inner_txt h2 span {font-weight:500;}
.vstextArea .inner_txt .subTitle_txt {color:#fff; /*font-family:'Noto Sans Korean';*/ line-height:1; letter-spacing:1px; margin-bottom:4px;}
.vstextArea .inner_txt .subtitle1 {font-size:17px; font-weight:200; /*padding:0 50% 0 0;*/ }
.vstextArea .inner_txt .subtitle2 {font-size:14px; margin:20px 0 50px; font-weight:100; display:none;}

.vstextArea #estimate_section {position:static; margin:50px auto 0; background:rgba(0,0,0,0.6);}

/* .vstextArea #estimate_section #estimate_wp .estimate_box {width:990px; height:190px; padding:0;}
.vstextArea #estimate_section #estimate_wp .estimate_box:hover {background:none;}
.vstextArea #estimate_section #estimate_wp .estimate_box .fl.w45dot2per.pt3 {width:430px !important;}
.vstextArea #estimate_section #estimate_wp .estimate_box .estimate_content .estimate_login_box .linkBox_Wp {margin:20px 0 10px; font-size:0;}

.vstextArea #estimate_section #estimate_wp .estimate_box .estimate_content .estimate_login_box .linkBox_Wp .linkBox.epmsLink {margin:0 10px 0 0;}
.vstextArea #estimate_section #estimate_wp .estimate_box .estimate_content .estimate_btn {width:100%;}

.vstextArea #estimate_section #estimate_wp .estimate_box .fr.w50per {width:470px !important;} */

@media screen and (max-width:1020px) {
    .vstextArea {position:absolute; top:44%; transform:translate(-50%,-50%);}
    .vstextArea .inner_txt h2 {line-height:1.1; word-break:keep-all; word-wrap:break-word; font-size:40px; letter-spacing:-1px; margin-top:10px; }
}

@media screen and (max-width:500px) {
    .vstextArea .inner_txt .subtitle1 {font-size:3.2vw;}
    .vstextArea .inner_txt h2 {font-size:8.6vw; letter-spacing:-1px; margin-top:1.6vw;}
}

/* ===================================================================
   FAQ 섹션 (2026-09-13 추가)
   =================================================================== */

.faqSection {
    position: relative;
    padding: 120px 0;
    background: var(--ef-bg-alt, #f7f8fa);
    overflow: hidden;
}

.faqSection_inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
}

/* ----- 섹션 제목 ----- */
.faqSection_head {
    margin-bottom: 64px;
    text-align: center;
}

.faqSection_tit {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ef-ink, #212121);
}

.faqSection_subtit {
    margin: 16px 0 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--ef-text-sub, #8a8a8a);
}

/* ----- 리스트 ----- */
.faqList {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ef-line, #e2e5ea);
}

.faqItem {
    border-bottom: 1px solid var(--ef-line, #e2e5ea);
    background: #fff;
}

/* 더보기 클릭 전에는 숨김 */
.faqItem_more {
    display: none;
}

.faqItem_more.is-shown {
    display: block;
}

/* ----- 질문 ----- */
.faqItem_qWrap {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.faqItem_q {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 24px 32px;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faqItem_q:hover {
    background: var(--ef-blue-pale, #eef4fb);
}

.faqItem_q:focus-visible {
    outline: 2px solid var(--ef-blue, #0f5eb3);
    outline-offset: -2px;
}

.faqItem_badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ef-blue, #0f5eb3);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.faqItem_badge_a {
    background: var(--ef-text-sub, #8a8a8a);
}

.faqItem_qTxt {
    flex: 1 1 auto;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ef-ink, #212121);
    word-break: keep-all;
}

/* ----- 토글 아이콘 (이미지 없이 CSS로 그림) ----- */
.faqItem_icon {
    flex: 0 0 auto;
    position: relative;
    width: 18px;
    height: 18px;
    margin-top: 8px;
}

.faqItem_icon:before,
.faqItem_icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ef-blue, #0f5eb3);
    transform: translateY(-50%);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faqItem_icon:after {
    transform: translateY(-50%) rotate(90deg);
}

/* 열린 상태: 세로선을 눕혀 + 를 - 로 */
.faqItem_q[aria-expanded="true"] .faqItem_icon:after {
    transform: translateY(-50%) rotate(0deg);
}

.faqItem_q[aria-expanded="true"] .faqItem_qTxt {
    color: var(--ef-blue, #0f5eb3);
}

/* ----- 답변 ----- */
.faqItem_aWrap {
    overflow: hidden;
}

.faqItem_a {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0 32px 32px;
}

.faqItem_aTxt {
    flex: 1 1 auto;
    margin: 0;
    padding-top: 5px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ef-text, #4a4a4a);
    word-break: keep-all;
}

/* ----- 더보기 ----- */
.faqMore_wp {
    margin-top: 48px;
    text-align: center;
}

.faqMore_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border: 1px solid var(--ef-line, #e2e5ea);
    border-radius: 100px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ef-text, #4a4a4a);
    cursor: pointer;
    transition: border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faqMore_btn:hover {
    border-color: var(--ef-blue, #0f5eb3);
    color: var(--ef-blue, #0f5eb3);
    box-shadow: 0 4px 20px rgba(15, 94, 179, 0.08);
}

.faqMore_btn:focus-visible {
    outline: 2px solid var(--ef-blue, #0f5eb3);
    outline-offset: 2px;
}

/* ----- 하단 CTA ----- */
.faqCta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 64px;
    padding: 32px;
    border-radius: 14px;
    background: var(--ef-blue, #0f5eb3);
}

.faqCta_txt {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    word-break: keep-all;
}

.faqCta_btn {
    display: inline-block;
    padding: 14px 34px;
    border-radius: 100px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--ef-blue, #0f5eb3);
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faqCta_btn:hover,
.faqCta_btn:focus {
    color: var(--ef-blue-dark, #0a4485);
    transform: translateY(-2px);
}

/* =========================== 반응형 =========================== */
@media screen and (max-width: 1024px) {
    .faqSection {
        padding: 96px 0;
    }

    .faqSection_head {
        margin-bottom: 48px;
    }

    .faqItem_q {
        padding: 24px;
    }

    .faqItem_a {
        padding: 0 24px 24px;
    }

    .faqItem_qTxt {
        font-size: 18px;
    }
}

@media screen and (max-width: 768px) {
    .faqSection_inner {
        padding: 0 24px;
    }

    .faqSection_tit {
        font-size: 32px;
    }

    .faqItem_qTxt {
        font-size: 17px;
    }
}

@media screen and (max-width: 520px) {
    .faqSection {
        padding: 64px 0;
    }

    .faqSection_inner {
        padding: 0 20px;
    }

    .faqSection_tit {
        font-size: 30px;
    }

    .faqSection_subtit {
        font-size: 14px;
    }

    .faqItem_q {
        gap: 12px;
        padding: 20px 16px;
    }

    .faqItem_a {
        gap: 12px;
        padding: 0 16px 20px;
    }

    .faqItem_badge {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .faqItem_qTxt {
        font-size: 16px;
    }

    .faqItem_aTxt {
        font-size: 15px;
    }

    .faqItem_icon {
        width: 16px;
        height: 16px;
        margin-top: 6px;
    }

    .faqMore_btn {
        width: 100%;
        justify-content: center;
        padding: 15px 24px;
    }

    .faqCta {
        flex-direction: column;
        gap: 20px;
        margin-top: 40px;
        padding: 28px 20px;
        text-align: center;
    }

    .faqCta_txt {
        font-size: 17px;
    }

    .faqCta_btn {
        width: 100%;
        text-align: center;
    }
}

/* 애니메이션 최소화 설정 사용자 */
@media (prefers-reduced-motion: reduce) {
    .faqItem_q,
    .faqItem_icon:before,
    .faqItem_icon:after,
    .faqMore_btn,
    .faqCta_btn {
        transition: none;
    }
}