@charset "utf-8";

.beautylabs_btn1 {display:block; width:240px; height:70px; border:1px solid #fff; font-size:1em; font-weight:600; text-align:center; font-family:'Manrope', 'Pretendard'; position:relative;}
.beautylabs_btn1 span {width:100%; position:absolute; left:0; top:50%; transition:all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.beautylabs_btn1 span:nth-child(1) {transform:translateY(-50%);}
.beautylabs_btn1 span:nth-child(2) {transform:translateY(50%); opacity:0; visibility:hidden;}
.beautylabs_btn1:hover span:nth-child(1) {transform:translateY(-150%); opacity:0; visibility:hidden;}
.beautylabs_btn1:hover span:nth-child(2) {transform:translateY(-50%); opacity:1; visibility:visible;}

.beautylabs_btn2 {display:inline-flex; align-items:center; font-size:1.125em; font-weight:600; position:relative;}
.beautylabs_btn2:before {content:''; display:block; width:10px; height:16px; background:url(../images/icon_btn_arrow.svg) no-repeat center center; background-size:contain; position:absolute; left:108px; top:50%; transform:translateY(-50%); transition:left 0.2s;}
.beautylabs_btn2:after {content:''; display:block; width:73px; height:2px; background:#fff; position:absolute; left:0; top:50%; margin-top:-1px; transform:scaleX(0); transform-origin:100% 50%; transition:transform 0.2s;}
.beautylabs_btn2 p {position:relative; overflow:hidden;}
.beautylabs_btn2 p span {display:block; position:relative;/* transition:transform 0.2s*/}
.beautylabs_btn2 p:nth-child(1) {width:95px;}
.beautylabs_btn2 p:nth-child(2) span {top:30px;}
.beautylabs_btn2:hover:before {left:65px;}
.beautylabs_btn2:hover:after {transform:scaleX(1); transform-origin:0% 50%;}

@media screen and (max-width:1024px){
    .beautylabs_btn1 {width:200px; height:60px;}

    .beautylabs_btn2 {font-size:1em;}
    .beautylabs_btn2:before {left:100px;}
}

@media screen and (max-width:767px){
    .beautylabs_btn1 {width:155px; height:42px;}

    .beautylabs_btn2 p:nth-child(1) {width:85px;}
    .beautylabs_btn2:before {left:90px;}
}


.cursor {display:block; width:50px; height:50px; border:1px solid #7d7d7d; border-radius:50%; position:fixed; left:-25px; top:-25px; z-index:400; pointer-events:none; transition:width 0.5s, height 0.5s, background 0.5s, border 0.5s, opacity 0.5s, left 0.5s, top 0.5s;}
.cursor.on {width:76px; height:76px; background:#7d7d7d; border-color:#7d7d7d; opacity:0.7; left:-38px; top:-38px;}

@media screen and (max-width:1024px){
    .cursor {display:none;}
}


/* header */
#beautylabs_header {display:flex; justify-content:space-between; align-items:center; width:100%; height:115px; padding:0 50px; position:fixed; z-index:300; transition:background 0.5s}
#beautylabs_header .box {display:flex; align-items:center;}

#beautylabs_logo {width:253px; height:35px; background:url(../images/logo_w.svg) no-repeat center center; background-size:contain; position:relative; z-index:50;}
#beautylabs_logo a {display:block; width:100%; height:100%;}

#beautylabs_gnb {margin-right:90px;}
#beautylabs_gnb > ul {display:flex;}
#beautylabs_gnb > ul > li {position:relative;}
#beautylabs_gnb > ul > li > a {display:block; font-size:1.125em; color:#fff; line-height:115px; font-weight:600; padding:0 30px; transition:color 0.4s;}
#beautylabs_gnb > ul > li:hover > a {color:#7d7d7d;}
#beautylabs_gnb > ul > li > ul {background:#fff; box-shadow:0 0 30px 0 rgba(24,24,24,0.09); padding:10px 0; position:absolute; left:8px; top:80%; opacity:0; visibility:hidden; transition:all 0.4s; transition-property:opacity, visibility;}
#beautylabs_gnb > ul > li:hover > ul {opacity:1; visibility:visible;}
#beautylabs_gnb > ul > li > ul > li > a {display:block; font-size:0.875em; color:#888; font-weight:600; line-height:1.2em; padding:10px 15px; white-space:nowrap; border-left:2px solid transparent; transition:all 0.2s; transition-property:border, color;}
#beautylabs_gnb > ul > li > ul > li > a:hover {border-left-color:#262626; color:#262626;}

#all_gnb {display:flex; justify-content:space-between; flex-direction:column; width:100%; height:100vh; background:#fff; padding:155px 50px 50px; position:fixed; left:0; top:0; z-index:30; opacity:0; visibility:hidden; transition:all 0.4s; transition-property:opacity, visibility; overflow-y:auto;}
#all_gnb .menu_box > ul {display:flex;}
#all_gnb .menu_box > ul > li {width:20%; padding-right:10px;}
#all_gnb .menu_box > ul > li > a {display:block; font-size:3vw; color:#262626; line-height:1.2em; font-weight:800; transition:color 0.2s;}
#all_gnb .menu_box > ul > li > a:hover {color:#7d7d7d}
#all_gnb .menu_box > ul > li > a:after {content:''; display:block; width:40px; height:1px; background:#d3d3d3; margin-top:20px;}
#all_gnb .menu_box > ul > li > ul {margin-top:20px;}
#all_gnb .menu_box > ul > li > ul > li {margin-bottom:10px;}
#all_gnb .menu_box > ul > li > ul > li:last-child {margin-bottom:0;}
#all_gnb .menu_box > ul > li > ul > li > a {display:block; font-size:1.875em; color:#262626; font-weight:800; transition:color 0.2s;}
#all_gnb .menu_box > ul > li > ul > li > a:hover {color:#7d7d7d}
#all_gnb .info_box {display:flex; justify-content:space-between; width:60%; margin-top:200px;}
#all_gnb .info_box dl {padding-right:10px;}
#all_gnb .info_box dl dt {font-size:0.8125em; color:rgba(0, 0, 0, 0.4); font-weight:600; margin-bottom:10px;}
#all_gnb .info_box dl dd {font-size:0.8125em; color:#262626; font-weight:600; margin-bottom:8px;}
#all_gnb .info_box dl dd:last-child {margin-bottom:0;}
#all_gnb .info_box dl dd a {color:#262626; transition:color 0.2s;}
#all_gnb .info_box dl dd a:hover {color:#7d7d7d}

#menuToggle {display:block; width:40px; height:38px; position:relative; z-index:50;}
#menuToggle span {display:block; width:100%; height:2px; background:#fff; transition:all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86); position:absolute;}
#menuToggle span:nth-child(1) {top:9px; left:0; transform:scaleX(0.75); transform-origin:right center;}
#menuToggle span:nth-child(2) {top:50%; left:0; margin-top:-1px; transform-origin:left center;}
#menuToggle span:nth-child(3) {bottom:9px; left:0; transform:scaleX(0.75); transform-origin:right center;}

#menuToggle:hover span:nth-child(1), #menuToggle:hover span:nth-child(3) {transform:scaleX(1);}
#menuToggle:hover span:nth-child(2) {transform:scaleX(0.75)}


#beautylabs_header.scroll_on {background:rgba(0,0,0,0.9)}


#beautylabs_header.on #beautylabs_logo {background-image:url(../images/logo.svg)}

#beautylabs_header.on #all_gnb {opacity:1; visibility:visible;}

#beautylabs_header.on #menuToggle span {background:#262626;}
#beautylabs_header.on #menuToggle span:nth-child(1) {transform:translate(0, 9px) scaleX(1) rotate(45deg); transform-origin:center center;}
#beautylabs_header.on #menuToggle span:nth-child(2) {transform:scaleX(0)}
#beautylabs_header.on #menuToggle span:nth-child(3) {transform:translate(0, -9px) scaleX(1) rotate(-45deg); transform-origin:center center;}

@media screen and (max-width:1540px){
    #beautylabs_header {padding:0 6%;}

    #beautylabs_gnb {margin-right:30px;}

    #all_gnb {padding-left:6%; padding-right:6%;}
    #all_gnb .menu_box > ul > li > ul > li > a {font-size:1.5em;}
}

@media screen and (max-width:1200px){
    #beautylabs_gnb > ul > li > a {font-size:1em; padding:0 20px;}
}

@media screen and (max-width:1024px){
    #beautylabs_header {height:50px;}

    #beautylabs_logo {width:160px; height:22px;}
    
    #beautylabs_gnb {display:none;}

    #all_gnb {padding-top:80px; padding-bottom:40px; transform:translateY(-100%); transition-property:opacity, visibility, transform;}
    #all_gnb .menu_box > ul {display:block;}
    #all_gnb .menu_box > ul > li {width:100%; margin-bottom:18px;}
    #all_gnb .menu_box > ul > li:last-child {margin-bottom:0;}
    #all_gnb .menu_box > ul > li > a {font-size:1.6em;}
    #all_gnb .menu_box > ul > li > a:after {display:none;}
    #all_gnb .menu_box > ul > li > ul {margin-top:15px;}
    #all_gnb .menu_box > ul > li > ul > li > a {font-size:1.125em; color:#888;}
    #all_gnb .info_box {display:block; width:100%; margin-top:13%;}
    #all_gnb .info_box dl {width:100%; margin-bottom:20px;}
    #all_gnb .info_box dl:last-child {margin-bottom:0;}
    #all_gnb .info_box dl dt {margin-bottom:5px;}
    #all_gnb .info_box dl dd {margin-bottom:4px;}
	
	#beautylabs_header.on #all_gnb {transform:translateY(0)}

    #menuToggle {width:26px; height:34px;}

    #beautylabs_header.on #menuToggle span:nth-child(1) {transform:translate(0, 7px) scaleX(1) rotate(45deg);}
    #beautylabs_header.on #menuToggle span:nth-child(3) {transform:translate(0, -7px) scaleX(1) rotate(-45deg);}
}

@media screen and (max-width:767px){
    #all_gnb .info_box dl dt, #all_gnb .info_box dl dd {font-size:0.9375em;}
}


/* footer */
#beautylabs_footer {width:100%; border-top:1px solid #3e3e3e; padding:50px 0 100px;}
#beautylabs_footer .top_box {display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
#beautylabs_footer .top_box > div {display:flex; align-items:end;}
#beautylabs_footer .top_box .f_logo {margin-right:20px;}
#beautylabs_footer .top_box .f_logo img {height:30px;}
#beautylabs_footer .top_box .f_member {display:block; width:60px; line-height:24px; border:1px solid #ccc; font-size:0.75em; color:#a4a4a4; text-align:center; font-family:'Pretendard'; text-transform:uppercase;}
#beautylabs_footer .top_box .f_sns {font-size:1.875em; color:#7d7d7d; transition:color 0.4s;}
#beautylabs_footer .top_box .f_sns:hover {color:#fff;}
#beautylabs_footer .info_box {display:flex; align-items:end;}
#beautylabs_footer .info_box ul {width:calc(100% - 300px)}
#beautylabs_footer .info_box ul li {display:inline-block; font-size:1em; color:#b8b8b8; line-height:1.5em; margin:10px 15px 0 0;}
#beautylabs_footer .info_box ul li strong {color:#7d7d7d; font-weight:600; margin-right:5px;}
#beautylabs_footer .info_box ul li a {color:#b8b8b8;}
#beautylabs_footer .info_box .copy {width:300px; font-size:1em; font-weight:500; text-align:right; text-transform:uppercase;}

@media screen and (max-width:1024px){
    #beautylabs_footer {padding:5% 0;}
    #beautylabs_footer .top_box {margin-bottom:15px;}
    #beautylabs_footer .top_box .f_logo img {height:28px;}
    #beautylabs_footer .top_box .f_member {width:55px; line-height:22px;}
    #beautylabs_footer .top_box .f_sns {font-size:1.5em;}
    #beautylabs_footer .info_box {display:block;}
    #beautylabs_footer .info_box ul {width:100%; margin-bottom:15px;}
    #beautylabs_footer .info_box ul li {margin-top:5px;}
    #beautylabs_footer .info_box .copy {width:100%; text-align:left;}
}

@media screen and (max-width:767px){
    #beautylabs_footer .top_box .f_logo {margin-right:10px;}
    #beautylabs_footer .top_box .f_logo img {height:22px;}
    #beautylabs_footer .top_box .f_member {line-height:19px;}
    #beautylabs_footer .info_box ul br {display:none;}
    #beautylabs_footer .info_box ul li {margin-right:10px;}
}


/* main */
#mVisu {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; position:relative;}
#mVisu .txt_box {position:relative; z-index:30; margin-top:-50px;}
#mVisu .txt_box .tit {font-size:5.625em; line-height:1.11em; font-weight:600;}
#mVisu .txt_box .txt {font-size:1.625em; line-height:1.3em; margin-top:20px;}
#mVisu .txt_box .beautylabs_btn1 {margin-top:70px;}
#mVisu .video_box {width:100%; height:calc(50vh + 60px); position:absolute; left:0; bottom:0; overflow:hidden;}
#mVisu .video_box:before {content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:5;}
#mVisu .video_box iframe {width:120%; height:120vh; min-width:1920px; min-height:1080px; position:absolute; left:50%; bottom:-10vh; transform:translate(-50%, 0)}
#mVisu .scroll_box {width:auto; font-size:1em; font-family:'Manrope'; text-align:center; position:absolute; left:50%; bottom:50px; transform:translateX(-50%); z-index:10;}
#mVisu .scroll_box p {font-size:0.625em; color:#fff; font-weight:600;}
#mVisu .scroll_box .icon {display:block; width:25px; height:40px; border:1px solid #fff; border-radius:13px; margin:12px auto 0; position:relative;}
#mVisu .scroll_box .icon:before {content:''; display:block; width:1px; height:8px; background:#fff; position:absolute; left:50%; top:9px; animation:mVisuScroll 1.5s cubic-bezier(0.445,0.05,0.55,0.95) infinite}

@keyframes mVisuScroll {
    0% {transform:scaleY(1); transform-origin:center bottom;}
    49% {transform:scaleY(0); transform-origin:center bottom;}
    50% {transform:scaleY(0); transform-origin:center top;}
    99% {transform:scaleY(1); transform-origin:center top;}
    100% {transform:scaleY(1); transform-origin:center top;}
}

@media screen and (max-width:1200px){
    #mVisu .txt_box .tit {font-size:5em;}
}

@media screen and (max-width:1024px){
    #mVisu .txt_box {margin-top:-120px;}
    #mVisu .txt_box .tit {font-size:4em;}
    #mVisu .txt_box .txt {font-size:1.4em;}
    #mVisu .txt_box .beautylabs_btn1 {margin-top:50px;}
    #mVisu .video_box {height:calc(50vh + 100px)}
    #mVisu .video_box iframe {min-width:2500px; min-height:1400px;}
    #mVisu .scroll_box {display:none;}
}

@media screen and (max-width:767px){
    #mVisu .txt_box .tit {font-size:3em; line-height:1.3em;}
    #mVisu .txt_box .txt {font-size:1em; margin-top:10px;}
    #mVisu .txt_box .beautylabs_btn1 {margin-top:30px;}
}

@media screen and (max-width:500px){
    #mVisu .txt_box .tit {font-size:2.2em;}
}


.main_title h2 {font-size:1.625em; color:#7d7d7d; font-weight:600; line-height:1.1em; margin-bottom:10px;}
.main_title .tit {font-size:3.125em; line-height:1.3em; font-weight:600;}
.main_title .txt {font-size:1.25em; line-height:1.5em; margin-top:20px;}

@media screen and (max-width:1024px){
    .main_title h2 {font-size:1.4em; margin-bottom:5px;}
    .main_title .tit {font-size:2.6em;}
    .main_title .txt {font-size:1.125em; margin-top:15px;}
}

@media screen and (max-width:767px){
    .main_title h2 {font-size:1.2em;}
    .main_title .tit {font-size:1.8em;}
    .main_title .txt {font-size:1em; margin-top:10px;}
}


#mAbout {width:100%; height:200vh;}
#mAbout > div {width:100%; height:100vh; position:sticky; left:0; top:0; overflow:hidden;}
#mAbout .txt_box {position:absolute; left:50%; top:16.5vh; transform:translate(-50%, 0); z-index:10;}
#mAbout .txt_box .beautylabs_btn1 {margin:70px auto 0;}
#mAbout .img_box {min-width:1520px; height:750px; min-height:750px; background:url(../images/mAbout_img1.png) no-repeat center center; background-size:cover; position:absolute; left:50%; top:55.55vh; transform:translate(-50%, 0)}

@media screen and (max-width:1540px){
    #mAbout .img_box {min-width:88%;}
}

@media screen and (max-width:1024px){
    #mAbout .txt_box .beautylabs_btn1 {margin-top:50px;}
}

@media screen and (max-width:767px){
    #mAbout .txt_box .beautylabs_btn1 {margin-top:30px;}
}


#mService {overflow:hidden; padding:150px 0 200px;}
#mService > div {display:flex; align-items:start; flex-wrap:wrap;}
#mService .main_title {width:calc(100% - 670px)}
#mService .txt_box {width:670px; padding-top:40px;}
#mService .txt_box .t1 {font-size:1.25em; line-height:1.5em; margin-bottom:50px;}

.mService_slide {width:100%; margin-top:75px;}
.mService_slide .swiper-slide {display:flex; align-items:center; height:450px; position:relative;}
.mService_slide .swiper-slide:before {content:''; display:block; width:100%; height:130px; background:linear-gradient(to bottom, rgba(0, 0, 0, 0), #000); opacity:0.3; position:absolute; left:0; bottom:0; z-index:4;}
.mService_slide .img_box {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:100% auto; transition:all 0.2s ease-in-out; transition-property:height, border-radius; overflow:hidden; position:relative;}
.mService_slide .img_box:before {content:''; display:block; width:100%; height:450px; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)}
.mService_slide p {width:100%; font-size:1.25em; font-weight:700; text-align:center; position:absolute; left:0; bottom:40px; z-index:10;}
.mService_slide .swiper-slide:hover .img_box {height:356px; border-radius:50%;}

.mService_slide .img_box.img1:before {background-image:url(../images/mService_img1.jpg);}
.mService_slide .img_box.img2:before {background-image:url(../images/mService_img2.jpg);}
.mService_slide .img_box.img3:before {background-image:url(../images/mService_img3.jpg);}
.mService_slide .img_box.img4:before {background-image:url(../images/mService_img4.jpg);}
.mService_slide .img_box.img5:before {background-image:url(../images/mService_img5.jpg);}

@media screen and (max-width:1540px){
    .mService_slide .swiper-slide {height:29vw;}
	.mService_slide .swiper-slide:before {height:25%;}
    .mService_slide .img_box:before {height:29vw;}
    
    .mService_slide .swiper-slide:hover .img_box {height:calc(22vw - 24px)}
}

@media screen and (max-width:1200px){
    #mService > div {display:block;}
    #mService .main_title {width:100%;}
    #mService .txt_box {width:100%; padding-top:30px;}
}

@media screen and (max-width:1024px){
    #mService {padding:15% 0 20%;}
    #mService .txt_box {margin-top:3%; padding-top:0;}
    #mService .txt_box .t1 {font-size:1.125em; margin-bottom:5%;}

    .mService_slide {margin-top:7%;}
    .mService_slide .swiper-slide {height:35vw;}
    .mService_slide .img_box:before {height:35vw;}
    .mService_slide p {font-size:1.125em; bottom:20px;}
    
    .mService_slide .swiper-slide:hover .img_box {height:calc(29.33vw - 13.33px)}
}

@media screen and (max-width:767px){
    #mService .txt_box .t1 {font-size:1em;}
    .mService_slide .swiper-slide {height:52vw;}
    .mService_slide .img_box:before {height:52vw;}
    .mService_slide p {font-size:1em; bottom:15px;}
    
    .mService_slide .swiper-slide:hover .img_box {height:calc(44vw - 5px)}
}


#mMarketing {display:flex; align-items:center;}
#mMarketing .txt_box {width:calc(100% - 1000px)}
#mMarketing .txt_box .tab_box {margin-top:70px;}
#mMarketing .txt_box .tab_box li {margin-bottom:20px; padding-left:100px; position:relative; text-align:left;}
#mMarketing .txt_box .tab_box li:last-child {margin-bottom:0;}
#mMarketing .txt_box .tab_box li:before {content:''; display:block; width:70px; height:1px; background:#fff; position:absolute; left:0; top:50%; transform:scaleX(0); transform-origin:left center; transition:transform 0.4s;}
#mMarketing .txt_box .tab_box li button {display:inline-block; font-size:1.25em; color:#7d7d7d; font-weight:500; font-family:'Manrope', 'Pretendard'; transition:color 0.4s, background 0.4s;}
#mMarketing .txt_box .tab_box li:hover button {color:#fff;}
#mMarketing .txt_box .tab_box li.active:before {transform:scaleX(1)}
#mMarketing .txt_box .tab_box li.active button {color:#fff; font-weight:600;}
#mMarketing .cont_box {width:1000px;}

.mMarketing_slide .swiper-slide {opacity:0 !important; position:relative;}
.mMarketing_slide .swiper-slide-active {opacity:1 !important;}
.mMarketing_slide .img_box {width:100%; height:580px; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.mMarketing_slide .txt {width:100%; -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); padding:30px 50px; position:absolute; left:0; bottom:0;}
.mMarketing_slide .txt p {font-size:1.25em; line-height:1.5em; max-width:560px;}

@media screen and (max-width:1540px){
    #mMarketing .txt_box {width:400px;}
    #mMarketing .cont_box {width:calc(100% - 400px)}

    .mMarketing_slide .img_box {height:33vw;}
    .mMarketing_slide .txt p {max-width:100%;}
}

@media screen and (max-width:1200px){
    .mMarketing_slide .txt {padding:20px 30px;}
}

@media screen and (max-width:1024px){
    #mMarketing {display:block;}
    #mMarketing .txt_box {width:100%;}
    #mMarketing .txt_box .tab_box {margin-top:4%; overflow-x:auto; white-space:nowrap; border-bottom:1px solid #7d7d7d;}
    #mMarketing .txt_box .tab_box li {display:inline-block; padding-left:0; margin:0 10px 0 0; text-align:center; }
	#mMarketing .txt_box .tab_box li:last-child {margin-right:0;}
    #mMarketing .txt_box .tab_box li:before {display:none;}
    #mMarketing .txt_box .tab_box li button {display:block; width:100%; height:50px; font-size:1.125em; padding:0 5px 5px; position:relative;}
    #mMarketing .txt_box .tab_box li.active button:after {content:''; display:block; width:100%; height:2px; background:#fff; position:absolute; left:0; bottom:0;}
    #mMarketing .cont_box {width:100%; margin-top:7%;}

    .mMarketing_slide .img_box {height:50vw;}
    .mMarketing_slide .txt {padding:10px 20px;}
    .mMarketing_slide .txt p {font-size:1.125em;}
}

@media screen and (max-width:767px){
    #mMarketing .txt_box .tab_box li button {height:42px; font-size:1em;}

    .mMarketing_slide .txt {background:rgba(255,255,255,0.2); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); position:relative; padding:4% 5%;}
    .mMarketing_slide .txt p {font-size:1em;}
}


#mBrand {padding-top:200px; overflow:hidden;}
#mBrand .tit_box {font-size:0; margin-bottom:50px; white-space:nowrap;}
#mBrand .tit_box p {display:inline-block; font-size:7.5rem; color:#3e3e3e; line-height:1.1em; font-weight:600; white-space:nowrap; transform:translateX(-100%); animation:mBrandTxt 33s linear infinite;}
#mBrand .txt {max-width:1250px; font-size:1.625em; line-height:1.53em; text-align:center; margin:0 auto;}

@keyframes mBrandTxt {
    0% {transform:translateX(-100%)}
    100% {transform:translateX(-200%)}
}

@media screen and (max-width:1024px){
    #mBrand {padding-top:20%;}
    #mBrand .tit_box {margin-bottom:5%;}
    #mBrand .tit_box p {font-size:6rem;}
    #mBrand .txt {font-size:1.4em;}
}

@media screen and (max-width:767px){
    #mBrand .tit_box p {font-size:4rem;}
    #mBrand .txt {font-size:1.125em;}
}


#mReference {width:100%; padding-top:150px; overflow:hidden;}
#mReference > div {position:relative;}
#mReference .main_title {width:100%; position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:30;}
#mReference .main_title .beautylabs_btn1 {margin:30px auto 0;}
#mReference .img_box {font-size:0; white-space:nowrap;}
#mReference .img_box > div {display:inline-block; font-size:0; white-space:nowrap; transform:translateX(-300%); animation:mReferenceImg 33s linear infinite;}
#mReference .img_box > div > div {display:inline-block; width:460px; height:460px; background-repeat:no-repeat; background-position:center center; background-size:cover; margin-right:70px; vertical-align:top;}
#mReference .img_box > div > div:nth-child(3n + 2) {margin-top:50px;}
#mReference .img_box > div > div:nth-child(3n + 1) {margin-top:100px;}
#mReference .img_box > div > div:nth-child(1) {margin-top:50px;}
#mReference .img_box > div > div:nth-child(2) {margin-top:100px;}

#mReference .img_box .img1 {background-image:url(../images/mReference_img1.jpg)}
#mReference .img_box .img2 {background-image:url(../images/mReference_img2.jpg)}
#mReference .img_box .img3 {background-image:url(../images/mReference_img3.jpg)}
#mReference .img_box .img4 {background-image:url(../images/mReference_img4.jpg)}
#mReference .img_box .img5 {background-image:url(../images/mReference_img5.jpg)}
#mReference .img_box .img6 {background-image:url(../images/mReference_img6.jpg)}
#mReference .img_box .img7 {background-image:url(../images/mReference_img7.jpg)}
#mReference .img_box .img8 {background-image:url(../images/mReference_img8.jpg)}
#mReference .img_box .img9 {background-image:url(../images/mReference_img9.jpg)}

@keyframes mReferenceImg {
    0% {transform:translateX(-300%)}
    100% {transform:translateX(-200%)}
}

@media screen and (max-width:1024px){
    #mReference {padding-top:15%;}
    #mReference .main_title .beautylabs_btn1 {margin-top:20px;}
    #mReference .img_box > div > div {width:370px; height:370px; margin-right:40px;}
    #mReference .img_box > div > div:nth-child(3n + 2) {margin-top:30px;}
    #mReference .img_box > div > div:nth-child(3n + 1) {margin-top:60px;}
    #mReference .img_box > div > div:nth-child(1) {margin-top:30px;}
    #mReference .img_box > div > div:nth-child(2) {margin-top:60px;}
}

@media screen and (max-width:767px){
    #mReference .main_title .beautylabs_btn1 {margin-top:15px;}
    #mReference .img_box > div > div {width:260px; height:260px; margin-right:20px;}
    #mReference .img_box > div > div:nth-child(3n + 2) {margin-top:20px;}
    #mReference .img_box > div > div:nth-child(3n + 1) {margin-top:40px;}
    #mReference .img_box > div > div:nth-child(1) {margin-top:20px;}
    #mReference .img_box > div > div:nth-child(2) {margin-top:40px;}
}


#mPartner {padding-top:130px;}
#mPartner ul {display:flex; flex-wrap:wrap; max-width:1200px; margin:0 auto;}
#mPartner ul li {width:calc(25% - 90px); margin-right:120px;}
#mPartner ul li:nth-child(4n) {margin-right:0;}
#mPartner ul li:nth-child(4) ~ li {margin-top:30px;}
#mPartner ul li img {max-width:100%;}

@media screen and (max-width:1024px){
    #mPartner {padding-top:13%;}
    #mPartner ul li {width:calc(25% - 22.5px); margin-right:30px;}
}

@media screen and (max-width:767px){
    #mPartner ul li {width:calc(33.33% - 6.66px); margin-right:10px;}
    #mPartner ul li:nth-child(4n) {margin-right:10px;}
    #mPartner ul li:nth-child(3n) {margin-right:0;}
    #mPartner ul li:nth-child(3) ~ li {margin-top:10px;}
}


#mBlog {padding:180px 0 150px; overflow:hidden;}
#mBlog .main_title {float:left; width:calc(100% - 892px)}
#mBlog .main_title .beautylabs_btn2 {margin-top:70px;}
#mBlog ul {float:left; display:flex; justify-content:space-between; width:892px;}
#mBlog ul li {width:calc(50% - 16px)}
#mBlog ul li a {display:flex; justify-content:space-between; flex-direction:column; width:100%; height:448px; padding:70px 50px 50px; position:relative; transition:transform 0.4s;}
#mBlog ul li a:before {content:''; display:block; width:100%; height:100%; border:1px solid #7d7d7d; position:absolute; left:0; top:0; transition:border 0.2s;}
#mBlog ul li a dl {position:relative; z-index:10;}
#mBlog ul li a dl dt {font-size:1.625em; line-height:1.2em; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#mBlog ul li a dl dd {font-size:1.125em; color:#b8b8b8; line-height:1.55em; margin-top:20px; max-height:6.2em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;}
#mBlog ul li a .date {font-size:1.125em; color:#b8b8b8; font-weight:600; padding-top:20px; border-top:1px solid #7d7d7d; position:relative; z-index:10;}
#mBlog ul li a:hover {transform:translateY(-20px)}
#mBlog ul li a:hover:before {border:3px solid #b8b8b8;}

@media screen and (max-width:1540px){
    #mBlog .main_title {width:500px;}
    #mBlog ul {width:calc(100% - 500px)}
}

@media screen and (max-width:1200px){
    #mBlog .main_title {width:400px;}
    #mBlog ul {width:calc(100% - 400px)}
    #mBlog ul li {width:calc(50% - 10px)}
    #mBlog ul li a {height:400px; padding:50px;}
}

@media screen and (max-width:1024px){
    #mBlog {padding:15% 0;}
    #mBlog .main_title {float:none; width:100%; margin-bottom:6%;}
    #mBlog .main_title .beautylabs_btn2 {margin-top:30px;}
    #mBlog ul {float:none; width:100%;}
    #mBlog ul li {width:calc(50% - 7.5px)}
    #mBlog ul li a {height:auto; padding:40px 30px;}
    #mBlog ul li a dl dt {font-size:1.4em;}
    #mBlog ul li a dl dd {font-size:1em; margin-top:10px;}
    #mBlog ul li a .date {font-size:1em; padding-top:15px; margin-top:50px;}
}

@media screen and (max-width:767px){
    #mBlog .main_title .beautylabs_btn2 {margin-top:20px;}
    #mBlog ul {display:block;}
    #mBlog ul li {width:100%; margin-bottom:10px;}
    #mBlog ul li:last-child {margin-bottom:0;}
    #mBlog ul li a {padding:20px;}
    #mBlog ul li a dl dt {font-size:1.2em;}
    #mBlog ul li a dl dd {margin-top:5px;}
    #mBlog ul li a .date {margin-top:40px;}
    #mBlog ul li a:hover {transform:translateY(0)}
}


/* sub */
#sub_content {padding:350px 0 100px; overflow:hidden;}
#sub_content.case2 {padding:0;}

.sub_title h2 {font-size:1.875em; color:rgba(255,255,255,0.3); font-weight:600; margin-bottom:10px;}
.sub_title h3 {font-size:4.375em; line-height:1.14em; font-weight:600;}
.sub_title p {display:inline-block; max-width:1200px; font-size:1.25em; line-height:1.5em; margin-top:30px;}

@media screen and (max-width:1024px){
    #sub_content {padding:150px 0 10%;}

    .sub_title h2 {font-size:1.5em; margin-bottom:5px;}
    .sub_title h3 {font-size:3.5em;}
    .sub_title p {font-size:1.125em; margin-top:15px;}
}

@media screen and (max-width:767px){
    #sub_content {padding-top:120px;}

    .sub_title h2 {font-size:1.3em; margin-bottom:0;}
    .sub_title h3 {font-size:2.3em;}
    .sub_title p {font-size:1em; margin-top:10px;}
}


.sub_img_box1 > div {display:flex; align-items:center; flex-wrap:wrap; margin-bottom:70px;}
.sub_img_box1 > div:last-child {margin-bottom:0;}
.sub_img_box1 > div:nth-child(even) {flex-direction:row-reverse;}
.sub_img_box1 > div .img_box {width:760px; height:400px; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.sub_img_box1 > div dl {width:calc(100% - 760px); padding:0 160px 0 100px;}
.sub_img_box1 > div:nth-child(even) dl {padding:0 100px 0 160px;}
.sub_img_box1 > div dl dt {font-size:1.625em; line-height:1.5em; font-weight:600;}
.sub_img_box1 > div dl dd {font-size:1.25em; line-height:1.5em; margin-top:20px;}

@media screen and (max-width:1540px){
    .sub_img_box1 > div .img_box {width:50%; height:25vw;}
    .sub_img_box1 > div dl {width:50%; padding:0 60px;}
    .sub_img_box1 > div:nth-child(even) dl {padding:0 60px;}
}

@media screen and (max-width:1200px){
    .sub_img_box1 > div dl {padding-right:0;}
    .sub_img_box1 > div:nth-child(even) dl {padding-left:0;}
}

@media screen and (max-width:1024px){
    .sub_img_box1 > div {margin-bottom:7%;}
    .sub_img_box1 > div dl {padding-left:30px;}
    .sub_img_box1 > div:nth-child(even) dl {padding-right:30px;}
    .sub_img_box1 > div dl dt {font-size:1.4em;}
    .sub_img_box1 > div dl dd {font-size:1.125em; margin-top:10px;}
}

@media screen and (max-width:767px){
    .sub_img_box1 > div {margin-bottom:10%;}
    .sub_img_box1 > div .img_box {width:100%; height:45vw;}
    .sub_img_box1 > div dl {width:100%; padding:0 !important; margin-top:4%;}
    .sub_img_box1 > div dl dt {font-size:1.2em;}
    .sub_img_box1 > div dl dd {font-size:1em; margin-top:1.5%;}
}


.sub_txt_box1 {width:100%; background:#242424; padding:70px 115px;}
.sub_txt_box1 p {font-size:1.5em; font-weight:600; margin-bottom:20px;}
.sub_txt_box1 ul li {font-size:1.125em; color:#b8b8b8; line-height:1.55em; padding-left:24px; position:relative; margin-bottom:10px;}
.sub_txt_box1 ul li:last-child {margin-bottom:0;}
.sub_txt_box1 ul li:before {content:''; display:block; width:4px; height:4px; background:#fff; border-radius:50%; position:absolute; left:5px; top:11px;}

@media screen and (max-width:1200px){
    .sub_txt_box1 {padding:50px 70px;}
}

@media screen and (max-width:1024px){
    .sub_txt_box1 {padding:30px 40px;}
    .sub_txt_box1 p {font-size:1.3em; margin-bottom:10px;}
    .sub_txt_box1 ul li {font-size:1em; margin-bottom:5px;}
    .sub_txt_box1 ul li:before {top:9px;}
}

@media screen and (max-width:767px){
    .sub_txt_box1 {padding:20px;}
    .sub_txt_box1 p {font-size:1.2em; margin-bottom:5px;}
    .sub_txt_box1 ul li {padding-left:18px;}
    .sub_txt_box1 ul li:before {width:3px; height:3px; left:3px; top:9px;}
}


.sAbout_case1 {width:100%; height:100vh; position:relative;}
.sAbout_case1.on:before {content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:100;}
.sAbout_case1 .tit_box {width:733px; position:absolute; left:50%; top:32.4vh; margin-left:-600px; z-index:10; pointer-events:none;}
.sAbout_case1 .tit_box h3 {position:absolute; left:0; top:100%; opacity:0; transition:opacity 0.5s;}
.sAbout_case1 .tit_box h3.active {opacity:1; transition-delay:0.5s}
.sAbout_case1 .tit_box .line {display:block; height:1px; background:#fff; position:absolute; right:50px; top:100%; margin-top:46px; transform:scaleX(0); transform-origin:right center; animation:sAboutLine 0.5s forwards; transition:width 0.5s;}
.sAbout_case1 .tit_box .line[data-line="0"] {width:150px;}
.sAbout_case1 .tit_box .line[data-line="1"] {width:233px;}
.sAbout_case1 .tit_box .line[data-line="2"] {width:95px;}
.sAbout_section {width:100%; height:100%; overflow:hidden;}
.sAbout_section .swiper-slide {position:relative;}
.sAbout_section .img_box {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.sAbout_section .txt {width:467px; font-size:1.25em; line-height:1.5em; position:absolute; top:32.4vh; left:50%; margin-left:133px; padding-top:50px; opacity:0; transform:translateY(60px); transition:all 0.6s; transition-property:opacity, transform;}
.sAbout_section .swiper-slide-active .txt {opacity:1; transform:translateY(0); transition-delay:0.5s}

.sAbout_case2 {display:flex; flex-wrap:wrap;}
.sAbout_case2 dl {width:33.33%; border-right:1px solid #7d7d7d; padding:45px 50px 120px;}
.sAbout_case2 dl:first-child {padding-left:0;}
.sAbout_case2 dl:last-child {border-right:0; padding-right:0;}
.sAbout_case2 dl dt {display:flex; align-items:center; min-height:3.06em; font-size:1.625em; line-height:1.53em; font-weight:600; margin-bottom:50px;}
.sAbout_case2 dl dd {font-size:1.25em; line-height:1.5em;}

.sAbout_case3 {display:flex; justify-content:center; align-items:center; width:100%; height:600px; background:url(../images/sAbout_img3.png) no-repeat center center; background-size:cover; position:relative;}
.sAbout_case3:before {content:''; display:block; width:100%; height:100%; background-image:linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.42) 53%, rgba(0, 0, 0, 0)); position:absolute; left:0; top:0; z-index:0;}
.sAbout_case3 > div {position:relative; z-index:10;}
.sAbout_case3 p {font-size:3.125em; line-height:1.3em; font-weight:600;}
.sAbout_case3 p span {display:block;}

.sAbout_slide1 .swiper-slide {display:flex; justify-content:end; align-items:center; flex-wrap:wrap; opacity:0.3;}
.sAbout_slide1 .img_box {width:680px; height:400px; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.sAbout_slide1 dl {display:none; width:calc(100% - 680px); padding-left:100px;}
.sAbout_slide1 dl dt {font-size:1.625em; font-weight:600;}
.sAbout_slide1 dl dd {font-size:1.25em; line-height:1.5em; margin-top:20px;}
.sAbout_slide1.swiper-container-horizontal>.swiper-pagination-bullets {bottom:0; text-align:right; font-size:0;}
.sAbout_slide1.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 0 0 20px;}
.sAbout_slide1 .swiper-pagination-bullet {width:6px; height:6px; background:#fff; opacity:0.3; vertical-align:middle;}
.sAbout_slide1 .swiper-pagination-bullet-active {width:8px; height:8px; opacity:1;}
.sAbout_slide1 .swiper-slide-active {opacity:1;}
.sAbout_slide1 .swiper-slide-active dl {display:block;}
.sAbout_slide1 .swiper-slide-active ~ .swiper-slide {justify-content:start;}

.sAbout_slide2 .swiper-wrapper {align-items:normal;}
.sAbout_slide2 .swiper-slide {height:auto; background:#242424; padding:70px 50px;}
.sAbout_slide2 i {font-size:5em; margin-bottom:70px;}
.sAbout_slide2 dl dt {font-size:1.5em; font-weight:600;}
.sAbout_slide2 dl dd {font-size:1.125em; color:#b8b8b8; line-height:1.55em; margin-top:20px;}

@keyframes sAboutLine {
    0% {transform:scaleX(0)}
    100% {transform:scaleX(1)}
}

@media screen and (max-width:1540px){
    .sAbout_case2 dl {padding:40px 30px 100px;}

    .sAbout_slide1 .img_box {width:55%; height:30vw;}
    .sAbout_slide1 dl {width:45%; padding-left:50px;}

    .sAbout_slide2 .swiper-slide {padding:60px 35px;}
}

@media screen and (max-width:1220px){
    .sAbout_case1 .tit_box {width:58%; left:6%; margin-left:0;}
    .sAbout_case1 .tit_box .line {right:20px;}
    .sAbout_case1 .tit_box .line[data-line="0"] {width:calc(100% - 523px);}
    .sAbout_case1 .tit_box .line[data-line="1"] {width:calc(100% - 440px);}
    .sAbout_case1 .tit_box .line[data-line="2"] {width:calc(100% - 578px);}
    .sAbout_section .txt {width:30%; left:auto; right:6%; margin-left:0;}
}

@media screen and (max-width:1024px){
    .sAbout_case1 .tit_box {width:44%; padding-right:15px; top:30vh;}
    .sAbout_case1 .tit_box .line {display:none;}
    .sAbout_section .txt {width:44%; font-size:1.125em; top:30vh;}

    .sAbout_case2 dl {padding:20px 20px 40px;}
    .sAbout_case2 dl dt {font-size:1.4em; margin-bottom:25px;}
    .sAbout_case2 dl dd {font-size:1.125em;}

    .sAbout_case3 {height:400px;}
    .sAbout_case3 p {font-size:2.6em;}

    .sAbout_slide1 dl {padding-left:30px;}
    .sAbout_slide1 dl dt {font-size:1.4em;}
    .sAbout_slide1 dl dd {font-size:1.125em; margin-top:10px;}

    .sAbout_slide2 .swiper-slide {padding:50px 30px;}
    .sAbout_slide2 i {font-size:4em; margin-bottom:30px;}
    .sAbout_slide2 dl dt {font-size:1.3em;}
    .sAbout_slide2 dl dd {font-size:1em; margin-top:10px;}
}

@media screen and (max-width:767px){
    .sAbout_case1 .tit_box {width:88%; top:28vh;}
    .sAbout_section .txt {width:88%; font-size:1em; top:50vh; padding-top:0; margin-top:-40px;}

    .sAbout_case2 dl {width:100%; border-right:0; border-bottom:1px solid #7d7d7d; padding:4% 0;}
    .sAbout_case2 dl:first-child {padding-top:0;}
    .sAbout_case2 dl:last-child {padding-bottom:0; border-bottom:0;}
    .sAbout_case2 dl dt {min-height:0; font-size:1.2em; margin-bottom:1.5%;}
    .sAbout_case2 dl dd {font-size:1em;}

    .sAbout_case3 {height:250px;}
    .sAbout_case3 p {font-size:2em;}

	.sAbout_slide1 {padding-bottom:40px;}
    .sAbout_slide1 .img_box {width:100%; height:46vw;}
    .sAbout_slide1 dl {width:100%; padding-left:0; margin-top:4%;}
    .sAbout_slide1 dl dt {font-size:1.2em;}
    .sAbout_slide1 dl dd {font-size:1em; margin-top:1.5%;}
    .sAbout_slide1.swiper-container-horizontal>.swiper-pagination-bullets {text-align:center;}
	.sAbout_slide1.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 4px;}

    .sAbout_slide2 .swiper-slide {padding:30px 17px;}
    .sAbout_slide2 i {font-size:3em; margin-bottom:15px;}
    .sAbout_slide2 dl dt {font-size:1.125em;}
    .sAbout_slide2 dl dd {margin-top:5px;}
}


.sService_case1 {width:100%; padding:100px 0 200px; position:relative;}
.sService_case1 .s-inner2 {display:flex; align-items:start; flex-wrap:wrap; position:unset;}
.sService_case1 .sub_title {width:100%; position:relative; z-index:10;}
.sService_case1 .tab_box {width:calc(100% - 500px); border-left:1px solid rgba(255,255,255,0.5); position:relative; z-index:10;}
.sService_case1 .tab_box li {padding-left:50px; position:relative;}
.sService_case1 .tab_box li button {display:inline-block; height:50px; font-size:1.125em; color:rgba(255,255,255,0.5); line-height:1.1em; font-family:'Manrope', 'Pretendard';}
.sService_case1 .tab_box li.active:before {content:''; display:block; width:3px; height:100%; background:#fff; position:absolute; left:-2px; top:0;}
.sService_case1 .tab_box li.active button {color:#fff; font-weight:600;}
.sService_case1 .cont_box {width:500px;}
.sService_case1 .cont_box > div .img_box {width:100%; height:100%; background-color:#000; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0; transition:all 0.6s; transition-property:opacity, visibility;}
.sService_case1 .cont_box > div dl {position:relative; z-index:10;}
.sService_case1 .cont_box > div dl dt {font-size:1.625em; font-weight:600;}
.sService_case1 .cont_box > div dl dd {font-size:1.25em; line-height:1.5em; margin-top:20px}
.sService_case1 .cont_box > div:not(.active) dl {display:none;}
.sService_case1 .cont_box > div:not(.active) .img_box {opacity:0; visibility:hidden;}

@media screen and (max-width:1024px){
    .sService_case1 {padding:12% 0;}
    .sService_case1 .tab_box {width:270px;}
    .sService_case1 .tab_box li {padding-left:23px;}
    .sService_case1 .tab_box li button {height:40px; font-size:1em;}
    .sService_case1 .cont_box {width:calc(100% - 270px)}
    .sService_case1 .cont_box > div dl dt {font-size:1.4em;}
    .sService_case1 .cont_box > div dl dd {font-size:1.125em; margin-top:10px;}
}

@media screen and (max-width:767px){
    .sService_case1 {padding:14% 0;}
    .sService_case1 .tab_box {width:100%; border-left:0; border-bottom:1px solid rgba(255,255,255,0.5); white-space:nowrap; overflow-x:auto;}
    .sService_case1 .tab_box li {display:inline-block; margin:0 10px 0 0; padding-left:0;}
	.sService_case1 .tab_box li:last-child {margin-right:0;}
    .sService_case1 .tab_box li button {display:block; width:100%; padding:0 5px 5px; position:relative;}
    .sService_case1 .tab_box li.active:before {display:none;}
    .sService_case1 .tab_box li.active button:after {content:''; display:block; width:100%; height:2px; background:#fff; position:absolute; left:0; bottom:0;}
    .sService_case1 .cont_box {width:100%; margin-top:6%; text-align:center;}
    .sService_case1 .cont_box > div dl dt {font-size:1.2em;}
    .sService_case1 .cont_box > div dl dd {font-size:1em; margin-top:1.5%;}
}


.sContact_case1 .map_box {width:100%; height:600px;}
.sContact_case1 .map_box iframe {width:100%; height:100%;}
.sContact_case1 .info_box {display:flex; justify-content:space-between;}
.sContact_case1 .info_box dl dt {font-size:1.5em; font-weight:600; margin-bottom:20px;}
.sContact_case1 .info_box dl dd {font-size:1.125em; color:#b8b8b8; line-height:1.55em; margin-bottom:10px;}
.sContact_case1 .info_box dl dd:last-child {margin-bottom:0;}
.sContact_case1 .info_box dl dd a {color:#b8b8b8;}
.sContact_case1 .info_box dl dd strong {font-weight:600; margin-right:10px;}

@media screen and (max-width:1024px){
    .sContact_case1 .map_box {height:400px;}
    .sContact_case1 .info_box dl dt {font-size:1.3em; margin-bottom:10px;}
    .sContact_case1 .info_box dl dd {font-size:1em; margin-bottom:5px;}
    .sContact_case1 .info_box dl dd strong {margin-right:5px;}
}

@media screen and (max-width:767px){
    .sContact_case1 .map_box {height:240px;}
    .sContact_case1 .info_box {display:block;}
    .sContact_case1 .info_box dl {margin-bottom:7%;}
    .sContact_case1 .info_box dl:last-child {margin-bottom:0;}
    .sContact_case1 .info_box dl dt {font-size:1.125em; margin-bottom:2%;}
    .sContact_case1 .info_box dl dd {margin-bottom:1%;}
}