@charset "utf-8";

.pcbr{display:none !important;}
.ptbr{display:block !important;}
.tbr{display:block !important;}
.mbr{display:none !important;}
.pc_view{display:none !important;}
.pt_view{display:block !important;}
.tm_view{display:block !important;}
.t_view{display:block !important;} 
.m_view{display:none !important;}


#wrap, #contents, #container, main {width:100%;height:100%;}

.full_slider {width:100%;height:100%;}
.full_slider>.swiper-wrapper {display: block;flex-direction: column;}
.full_slider .full_pagination {position: absolute;bottom:50px;left:80px;z-index: 1;display: none;}
.full_slider .full_pagination>span {position: relative;display: inline-block;width:112px;height:1px;background:rgba(255,255,255,0.3);margin-right:10px;opacity:1;}
.full_slider .full_pagination>span:before {content:"";position: absolute;bottom:0;left:0;width:0;height:2px;background:#fff;}
.full_slider .full_pagination>span>span {position: absolute;top: -20px;left:0;display: block;width: 100%;font-family:'Lexend';font-size:12px;font-weight:300;color:#fff;padding-bottom: 7px;opacity: 0;}
.full_slider .full_pagination>span.swiper-pagination-bullet-active:before {width:100%;transition:width 1.2s;}
.full_slider .full_pagination>span.swiper-pagination-bullet-active>span {opacity:1;}
.full_slider .slide_btn {position: fixed;bottom: 10px;right: 10px;width: 43px;height: 43px;z-index:1;transition: bottom 1.2s;}
.full_slider .slide_btn:before {content:"";position: absolute;top:0;left:0;width:100%;height:100%;background:#000;border-radius:50%;transition:transform 0.3s;}
.full_slider .slide_btn:after {content:"";position: absolute;top:0;left:0;width:100%;height:100%;background: url(/images/main/slide_btn.png) no-repeat center / 13px;transform: rotate(90deg);}
.full_slider .slide_btn.home:after {background: url(/images/main/home_icon.png) no-repeat center / 12px;transform: rotate(0deg);}
.en1 {font-family:'Cormorant Garamond';}
.en2 {font-family:'Lexend';}

/* bk */
.bk #wrap header {}
.bk #wrap header h1.logo {background:url(/images/common/logo.png) no-repeat center / contain;}
.bk #wrap header .gnb>li>a {color:#000;}
.bk #wrap header .menu>span {background:#000;}
.bk .full_slider .full_pagination>span {background:rgba(0,0,0,0.3);}
.bk .full_slider .full_pagination>span:before {background:#000;}
.bk .full_slider .full_pagination>span>span {color:#000;}

/* section - common */
.section {position: relative;overflow: hidden;}
.section .bg {width:100%;height:100%;}
.section span.cate {display: block;font-size: 15px;font-weight:300;color:#fff;letter-spacing:-0.025em;}
.section strong.sec_tit {display: block;font-size: 26px;font-weight: 600;letter-spacing:-0.025em;line-height:1.2;}
.section p.txt1 {font-size: 13px;font-weight:300;line-height:1.6;}
.section p.txt2 {font-size: 13px;font-weight:300;color:rgba(255,255,255,0.7);line-height:1.6;}
.section .view {}
.section .view>* {position: relative;display: inline-block;font-size: 11px;font-weight:200;color:rgba(255,255,255,0.7);padding-left: 10px;}
.section .view>*:before {content:"";position: absolute;top: 5px;left:0;width: 5px;height: 5px;background:#fff;border-radius:50%;z-index: -1;}
.bk .section p.txt1 {font-weight:400;}
.bk .section p.txt2 {font-weight:400;color:rgba(0,0,0,0.7);}
.bk .section .view>* {font-weight: 400;color:rgba(0,0,0,0.7);}
.bk .section .view>*:before {background: #222;}

/* section1 */
.section1 .bg {background:url(/images/main/sec1_bg.jpg) no-repeat center / cover;}
.section1 .main_video {width:100%;height:100%;}
.section1 .main_video video {width:100%;height:100%;object-fit: cover;}
.section1 .tit_g {position: absolute;top:50%;left:0;width:100%;transform: translateY(-35%);padding: 0 20px;}
.section1 .tit_g strong.main_tit {font-size: 27px;font-weight:500;color:#fff;}
.section1 .tit_g p.main_txt {font-size: 14px;font-weight:300;color:rgba(255,255,255,0.7);margin-top:20px; line-height: 18px;}

/* section2 */
.section2 {}
.section2 .service_l {width:100%;height:100%;}
.section2 .service_l>li {position: relative;height: 33.333%;overflow: hidden;}
.section2 .service_l>li:before {content:"";position: absolute;top:0;left:0;width:100%;height:100%;background:#222;z-index:1;}
.section2 .service_l>li:after {content:"";position: absolute;top:0;right:0;width:100%;height:100%;background:#000;z-index:1;}
.section2 .service_l>li .text_g {position: absolute;top: 0;left:0;width:100%;padding: 65px 20px 0;}
.section2 .service_l>li .text_g span.cate {margin-bottom: 10px;}
.section2 .service_l>li:not(:nth-child(1)) .text_g span.cate {display: none;}
.section2 .service_l>li .text_g strong {display: block;font-size: 22px;font-weight:500;color:#fff;}
.section2 .service_l>li .text_g p.txt1 {color:rgba(255,255,255,0.7);margin: 6px 0 5px;}
.section2 .service_l>li .bg {transform: translateX(5%) scale(1.1);}
.section2 .service_l>li:nth-child(1) .bg {background:url(/images/main/sec2_bg1.jpg) no-repeat center / cover;}
.section2 .service_l>li:nth-child(2) .bg {background:url(/images/main/sec2_bg2.jpg) no-repeat center / cover;}
.section2 .service_l>li:nth-child(3) .bg {background:url(/images/main/sec2_bg3.jpg) no-repeat center / cover;}

/* section3 */
.section3 .bg {background:url(/images/main/sec3_bg.jpg) no-repeat center / cover;}
.section3 .line {position: absolute;top:0;left:50%;transform:translateX(-50%);width: calc(100% - 40px);height:100%;}
.section3 .line>span {position: absolute;top:0;display: block;width:1px;height:100%;background:#000;opacity:0.1;display: none;}
.section3 .line>span:nth-child(1) {display: block;left:0;}
.section3 .line>span:nth-child(2) {display: block;left: calc(66% + 10px);}
.section3 .conwrap {position: absolute;top:50%;left:0;transform:translateY(-50%);width:100%;padding: 0px 20px;}
.section3 .top {display:flex;justify-content:space-between;align-items: flex-end;width: 100%;margin-bottom: 28px;}
.section3 .top span.cate {font-weight:400;color:rgba(0,0,0,0.8);}
.section3 .con {}
.section3 .text_wrap {padding-right: 20px;margin-top: -9px;}
.section3 .text_wrap strong.sec_tit {color:#000;}
.section3 .text_wrap p.txt2 {margin-top: 9px;}
.section3 .text_wrap .work_arrow {margin-top:54px;display: none;}
.section3 .text_wrap .work_arrow>button {width:56px;height:56px;margin-right:2px;}
.section3 .text_wrap .work_arrow>button.work_prev {background:url(/images/main/slide_prev.png) no-repeat center / contain;}
.section3 .text_wrap .work_arrow>button.work_next {background:url(/images/main/slide_next.png) no-repeat center / contain;}
.section3 .work_slider {
    width: calc(100% + 20px);
    margin-top: 12px;
}
.section3 .work_slider .work_item {width: 65%;margin-left: 1px;overflow: hidden;}
.section3 .work_slider .work_item .img {position: relative;width:100%;height: 215px;overflow: hidden;}
.section3 .work_slider .work_item .img>div {width:100%;height:100%;}
.section3 .work_slider .work_item p.txt1 {margin-top: 15px;padding-right: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
word-wrap:break-word;}
.section3 .work_slider .work_item .view {margin-top: 5px;}

/* section4 */
.section4 .bg {background:url(/images/main/sec4_bg.jpg) no-repeat center / cover;}
.section4 .conwrap {position: absolute;top:50%;left:0;width:100%;transform: translateY(-50%);}
.section4 .text_g{width:100%;padding: 0 20px;}
.section4 .text_g span.cate {}
.section4 .text_g strong.sec_tit {color:#fff;margin-top:30px;}
.section4 .text_g p.txt2 {margin-top:15px;}
.section4 .value_l {display:flex;justify-content:center;flex-wrap: wrap;width: 94%;margin: 26px auto 0;}
.section4 .value_l li {position: relative;width: 37%;padding-bottom: 37%;text-align: center;border-radius:50%;margin: 0 6.5%;}
.section4 .value_l li:nth-child(odd):before {content:"";position: absolute;top:50%;width: 100%;height:1px;border-top:1px dashed #fff;}
.section4 .value_l li:nth-child(1):before {left: -95%;}
.section4 .value_l li:nth-child(3):before {left: -95%;}
.section4 .value_l li:after {content:"";position: absolute;top:50%;right: -41%;width: 46%;height:1px;border-top:1px dashed #fff;}
.section4 .value_l li:nth-child(2):after,
.section4 .value_l li:nth-child(3):after {width: 100%;right: -95%;}
.section4 .value_l li + li {}
.section4 .value_l li svg {position: absolute;top:0;left:0;width:100%;height:100%;}
.section4 .value_l li svg circle {stroke-dasharray: 200;stroke-dashoffset: 200;}
.section4 .value_l li p {font-size: 15px;font-weight:500;color:#fff;position: absolute;top: 50%;left: 50%;width: 100%;transform: translate(-50%,-50%);}
.section4 .value_l li .line {position: absolute;top: 5%;left: 50%;width: 90%;height: 45%;transform: translateX(-50%);overflow: hidden;}
.section4 .value_l li .line:before {content:"";position: absolute;top:0;left:0;width: 100%;height: 200%;border:1px dashed #fff;border-radius:50%;box-sizing: border-box;}
.section4 .value_l li:nth-child(even) .line {top: auto;bottom: 5%;}
.section4 .value_l li:nth-child(even) .line:before {top: auto;bottom:0;}
.section4 p.copy {position: absolute;bottom:20px;left: 40px;font-family:'Lexend';font-size:12px;font-weight:200;color:rgba(255,255,255,0.6);opacity:0;transition:0.3s 0.3s;display: none;}
.section4.swiper-slide-active p.copy {opacity:1;}

/* sec_footer */
#wrap footer {position: fixed;bottom:0;left:0;}
.sec_footer {width:100%;height: auto;background: transparent;}



/* motion */
.full_slider .full_pagination>span {opacity:0;transform:translateY(15px);transition: opacity 0.7s, transform 0.7s;}
.full_slider .full_pagination>span:nth-child(1) {transition-delay:1s;}
.full_slider .full_pagination>span:nth-child(2) {transition-delay:1.15s;}
.full_slider .full_pagination>span:nth-child(3) {transition-delay:1.3s;}
.full_slider .full_pagination>span:nth-child(4) {transition-delay:1.45s;}
.intro .full_slider .full_pagination>span {opacity:1;transform:translateY(0);}
.full_slider .slide_btn {}
.intro .full_slider .slide_btn {}
.section1 .tit_g strong.main_tit.splitting .char {transform:translateY(20px) rotate(5deg);opacity:0;will-change:transform;}
.section1 .tit_g p.main_txt.splitting .char {transform:translateY(15px) rotate(3deg);opacity:0;will-change:transform;}
.section1.on .tit_g strong.main_tit.splitting .char,
.section1.on .tit_g p.main_txt.splitting .char {transform:translateY(0) rotate(0deg);opacity:1;transition:0.7s;	}
.section1.on .tit_g strong.main_tit.splitting .char {transition-delay: calc(30ms * var(--char-index));}
.section1.on .tit_g p.main_txt.splitting .char {transition-delay: calc(0.5s + var(--char-index) * 15ms);}
.section2.on .service_l>li:after {width:0;transition:0.7s 0.4s;}
.section2.on .service_l>li:before {width:0;transition:0.7s 1.1s;}
.section2 .service_l>li .text_g span.cate.splitting .char {transform:translateY(15px) rotate(3deg);opacity:0;will-change:transform;}
.section2.on .service_l>li .text_g span.cate.splitting .char {transform:translateY(0) rotate(0deg);opacity:1;transition:0.7s;transition-delay: calc(1.5s + var(--char-index) * 15ms);}
.section2 .service_l>li .text_g strong,
.section2 .service_l>li .text_g p,
.section2 .view {transform:translateY(20px); opacity:0;transition:0.7s;}
.section2 .service_l>li .text_g strong {transition-delay:1.8s;}
.section2 .service_l>li .text_g p {transition-delay:2s;}
.section2 .view {transition-delay:2.2s;}
.section2.on .service_l>li .text_g strong,
.section2.on .service_l>li .text_g p,
.section2.on .view {transform:translateY(0); opacity:1}
.section2.on .service_l>li .bg {transform:translateX(0) scale(1.1);transition:0.7s 1.3s;}
.section3 .line>span {height:0;transition:0.7s;}
.section3.on .line>span {height:100%;}
.section3 .top span.cate.splitting .char {transform:translateY(15px) rotate(3deg);opacity:0;will-change:transform;}
.section3.on .top span.cate.splitting .char {transform:translateY(0) rotate(0deg);opacity:1;transition:0.7s;transition-delay: calc(0.6s + var(--char-index) * 15ms);}
.section3 .text_wrap strong.sec_tit,
.section3 .text_wrap p.txt2,
.section3 .text_wrap .work_arrow {transform:translateY(20px); opacity:0;transition:opacity 0.7s,transform 0.7s;}
.section3 .text_wrap strong.sec_tit {transition-delay:0.9s;}
.section3 .text_wrap p.txt2 {transition-delay:1.1s;}
.section3 .text_wrap .work_arrow {transition-delay:1.3s;}
.section3.on .text_wrap strong.sec_tit,
.section3.on .text_wrap p.txt2,
.section3.on .text_wrap .work_arrow {transform:translateY(0);opacity:1;}
.section3 .work_slider .work_item .img>div {transform:translateX(-100%);transition:0.7s 1.4s;}
.section3 .work_slider .work_item .img:before {content:"";position: absolute;top:0;left:0;width:0;height:100%;background:#222;transition:width 0.7s 1.4s,transform 0.7s 2s;z-index: 1;}
.section3.on .work_slider .work_item .img>div {transform:translateX(0);}
.section3.on .work_slider .work_item .img:before {width:100%;transform:translateX(-100%);}
.section3 .work_slider .work_item p.txt1,
.section3 .work_slider .work_item .view {opacity:0;transform:translateY(20px);transition:opacity 0.7s,transform 0.7s;}
.section3 .work_slider .work_item p.txt1 {transition-delay:2.3s;}
.section3 .work_slider .work_item .view {transition-delay:2.5s;}
.section3.on .work_slider .work_item p.txt1,
.section3.on .work_slider .work_item .view {opacity:1;transform:translateY(0);}
.section4 .text_g span.cate.splitting .char {transform:translateY(15px) rotate(3deg);opacity:0;will-change:transform;}
.section4.on .text_g span.cate.splitting .char {transform:translateY(0) rotate(0deg);opacity:1;transition:0.7s;transition-delay: calc(0.4s + var(--char-index) * 15ms);}
.section4 .text_g strong.sec_tit,
.section4 .text_g p.txt2 {transform:translateY(20px); opacity:0;transition:opacity 0.7s,transform 0.7s;}
.section4 .text_g strong.sec_tit {transition-delay:0.7s;}
.section4 .text_g p.txt2 {transition-delay:0.9s;}
.section4.on .text_g strong.sec_tit,
.section4.on .text_g p.txt2 {opacity:1;transform:translateY(0);}
.section4.on .value_l li svg circle {stroke-dashoffset: 0;transition:0.8s 1.1s;}
.section4 .value_l li p {transform: translate(-50%,-50%); opacity:0;transition:0.8s 1.3s;}
.section4.on .value_l li p {opacity:1;transform: translate(-50%,-50%);}

.section4 .value_l li .line,
.section4 .value_l li:after,
.section4 .value_l li:nth-child(odd):before {opacity:0;transition:1.5s 1.1s;}
.section4.on .value_l li .line,
.section4.on .value_l li:after,
.section4.on .value_l li:nth-child(odd):before {opacity:1;}