body html { color: #202020}

.showMobile {display:none;}

.contentWrap { width: 100%; max-width: 1200px; margin: 0 auto;}

.cl_pageWrap { padding: 150px 0; box-sizing: border-box;}
.cl_collasterTitle { font-size: 50px; font-family: 'PretendardT'; text-align: center; margin-bottom: 50px;}
.cl_collasterTitle .bold{ font-family: 'PretendardSB';}
/*
    ****************** 헤더 ******************
*/

.header { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100px;}
.header .gnb .menuList { display: flex;}
.header .gnb .menuList .list { position: relative; font-size: 20px; font-family: 'PretendardM'; text-align: center; display: flex; align-items: center; justify-content: center; padding: 41px 0; box-sizing: border-box;  margin-right: 45px;}
.header .gnb .menuList .list:last-child { margin-right: 0;}
.header .gnb .menuList .list a { color: #202020}
.header .gnb .menuList .list a .point{ color: #fff; font-size: 15px; font-family: 'PretendardM'; display: inline-block; margin-bottom: 5px; padding: 4px 5px; box-sizing: border-box; border-radius: 50px;  background-color: #393a39;}

/*.header .gnb .menuList .list.on:hover .subList{ display: block;}*/

.header .gnb .menuList .subList { display: none; position: absolute; top: 103px; left: -24px; width: 182px; padding: 20px; box-sizing: border-box; background-color: #fff; z-index: 10}
.header .gnb .menuList .subList li { margin-bottom: 25px; font-size: 16px;}
.header .gnb .menuList .subList li:last-child { margin-bottom: 0;}


.header .globalWrap { position: relative}
.header .globalWrap .global {  display: flex;  justify-content: center; cursor: pointer;}
.header .globalWrap .global .text { font-size: 20px; font-family: 'PretendardM';  margin: 0 10px;}
.header .globalWrap.on .listArea{ display: block;}
.header .globalWrap .listArea { display: none; position: absolute; top: 60px; left: -20px; width: 180px;  background-color: #fff; padding:  20px; box-sizing: border-box; z-index: 10}
.header .globalWrap .listArea .list a  { display: flex; align-items: center; font-family: 'PretendardM'; font-size: 16px; cursor: pointer;}
.header .globalWrap .listArea .list a img { margin-right: 10px;}
.header .globalWrap .listArea .list { margin-bottom: 20px;}
.header .globalWrap .listArea .list:last-child { margin-bottom: 0;}

.mobileMenuWrap { display: none;}
/*
.header .gnaArea { display: flex ; align-items: center}
.header .gnaArea .infoArea { display: flex;}
.header .gnaArea .infoArea .basketArea { position: relative;}
.header .gnaArea .infoArea .basketArea .basketNum{ position: absolute;top: 0; right: 0;}
*/

/*
    ****************** 푸터 ******************
*/
.footerWrap { background-color: #3a3a3a;}
.footerWrap .footer { display: flex; align-items: center; ;font-size: 16px; font-family: 'PretendardL'; color: #848484}
/*.footerWrap .footer .leftArea .logo  { margin-bottom: 45px;}*/

.footerWrap .footer .leftArea .address .text { margin-bottom: 15px;}
.footerWrap .footer .leftArea .address .text:last-child { margin-bottom: 0;}
.footerWrap .footer .leftArea .address .text:last-child { margin-bottom: 0;}

.footerWrap .footer .midArea { line-height: 1.4; margin-left: 100px; margin-right: 250px; text-align: center;}
.footerWrap .footer .address .text.tradeMarkComment {margin-top:20px; font-size:13px;}

.footerWrap .footer .rightArea { display: flex; color: #fff; }
.footerWrap .footer .rightArea .callNumber { margin-right: 110px;}
.footerWrap .footer .rightArea ul li { margin-bottom: 15px;}
.footerWrap .footer .rightArea ul li:last-child { margin-bottom: 0;}
.footerWrap .footer .rightArea ul a { color: #fff;}

/*
    ****************** 메인  ******************
*/

/* 메인비주얼 */
.main {font-family:'PretendardR', sans-serif;}
.main b, .main strong {font-family:'PretendardB', sans-serif; font-weight:700;}
.main .keepWord {white-space:nowrap;}
.main .cl_c-p {color: #5629a7;}
.main .cl_title {font-size: 60px;}
.main .contentsWrap {position: relative;left: 50%;transform: translateX(-50%); max-width: 1084px;width: 100%;height: inherit; height: stretch;box-sizing: border-box;}

.pageOutWrap.main {position: relative;left: 50%;transform: translateX(-50%);}
.main .hero {display: block; width: 100%;height: 1475px; background: url(/app/layout/web/images/main/main_bg.png) no-repeat;background-size: cover;background-position: center;}
.main .heroSubTitle {position: absolute;top: 174px;left: 50%;transform: translateX(-50%);width:712px;}
.main .heroTitle {position: absolute;top: 312px; left: 50%;transform: translateX(-50%);width:598px;}
.main .speechBubble {position: absolute;bottom: 585px;left: 50%;transform: translateX(-50%);width: 610px;height: 242px;padding-top:29px; line-height: 1.3; background: url(/app/layout/web/images/main/speechBubble.png) no-repeat;background-size: cover;background-position: center;box-sizing: border-box;}
.main .speechBubble p {width: 100%;height: 100%; color: #2b223b;font-size: 40px;letter-spacing: -0.05em;text-align: center;}
.main .speechBubble p span {font-family:'PretendardB', sans-serif; font-size:35px; font-weight:700;}

/* definition */
.main .definition {overflow:hidden; height:1386px; padding:160px 0 0; box-sizing:border-box; background:url(/app/layout/web/images/main/definition_bg.png) no-repeat center / cover;}
.main .definition .contentsWrap {width: 1000px; height: auto; }
.main .definition .iconQuestion {display:block; position:relative; left:50%; transform:translateX(-50%); width:84px;margin-bottom:55px;}
.main .definition .title {width:100%; margin:0 0 95px; color:#202020; font-family:'PretendardR'; font-weight:400; letter-spacing:-0.06em; line-height:1.2; text-align:center;}
.main .definition .title span { color: #5629a7; font-family: 'PretendardB'; }
.main .definition .subTitle {display:flex; align-items:center; justify-content:center; width:100%; height:210px; margin-bottom:150px; background:url(/app/layout/web/images/main/brackets_left.png) no-repeat left center / auto 100%, url(/app/layout/web/images/main/brackets_Right.png) no-repeat right center / auto 100%;}
.main .definition .subTitleText { color: #2b223b; font-family: 'PretendardM'; text-align: center; }
.main .definition .subTitleText p {margin-bottom:20px; font-size:40px; letter-spacing:-0.07em;}
.main .definition .lead { background: linear-gradient(150deg, #844da9, #6e3395, #c99ae5,#6e3395, #a66dcc, #2b223b,#2b223b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.main .definition .subTitleText strong {display:block; color:#5629a7; font-family:'PretendardB'; font-size:80px; letter-spacing:-0.08em;}
.main .definition .description {width:100%;box-sizing:border-box; color:#2b223b; font-family:'PretendardR'; font-size:30px; font-weight:400; letter-spacing:-0.06em; line-height:1.4; text-align:left;}
.main .definition .description .divider {display:block; width:1px; height:185px; margin:25px 0 35px 5px; background-color:#000;}
.main .definition .description b { font-family: 'PretendardB'; }

/* introduce */
.main .introduce {height:1572px; background:url(/app/layout/web/images/main/intro_bg.png) no-repeat center top / 1920px 1572px, linear-gradient(90deg, #eef1f7 0%, #f5f7fb calc(50% - 960px), #f5f7fb calc(50% + 960px), #eef1f7 100%);}
.main .introduce .contentsWrap {height:100%; padding:0;}
.main .introduce .heading {position:absolute; top:160px; left:50%; transform:translateX(-50%); width:620px; color:#2b223b; text-align:center;}
.main .introduce .eyebrow {font-size:40px; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #252034; font-family:'PretendardR'; letter-spacing:-0.06em; line-height:1;}
.main .introduce .title {width:620px;}
.main .introduce .koreanTitle_m { display: none; }
.main .introduce .description {position:absolute; top:720px; left:140px; margin:0; color:#2b223b; font-family:'PretendardR'; font-size:30px; letter-spacing:-0.05em; line-height:1.4;}
.main .introduce .description b {font-family:'PretendardB'; font-size:45px;}
.main .introduce .introduceSuffix_m {display:none;}
.main .introduce .description strong { color: #5629a7; font-family: 'PretendardB'; }
.main .introduce .closingText { text-shadow: 0 0 6px #fff, 0 0 14px rgba(255,255,255,.8); }
.main .introduce .introduceBreak_m { display: none; }
.main .introduce .list {display:flex; position:absolute; top:1295px; left:140px; width:820px; margin:0; flex-wrap:wrap; gap:8px;}
.main .introduce .list span {display:flex; align-items:center; justify-content:center; height:55px; padding:0 24px; box-sizing:border-box; border-radius:9px; background-color:#5629a7; color:#fff; font-family:'PretendardB'; font-size:42px; letter-spacing:-0.05em; box-shadow:3px 0 17px 3px #fff;}

/* lineUp */
.main .lineUp {padding:165px 0 180px; background-color:#fff;}
.main .lineUp .badge {display:flex; justify-content:center; align-items:center; position:relative; left:50%; transform:translateX(-50%); width:290px; height:60px; margin-bottom:50px; border:2px solid #5629a7; border-radius:50%; box-sizing:border-box; color:#5629a7; font-family:'PretendardB'; font-size:30px; letter-spacing:-0.07em;}
.main .lineUp .title {margin:0 0 90px; color:#2b223b; font-family:'PretendardR'; font-weight:400; letter-spacing:-0.07em; line-height:1.25; text-align:center;}
.main .lineUp .titleLead {display:block; font-size:45px;}
.main .lineUp .title strong { display: block; color: #5629a7; font-size:65px; font-family: 'PretendardB'; }
.main .lineUp .productList {display:grid; width:875px; margin:0 auto; background:url(/app/layout/web/images/main/lineUp_border.png) no-repeat center -26px / 100% 100%; grid-template-columns:repeat(3, 1fr);}
.main .lineUp .product {display:flex; justify-content:center; align-items:center; flex-direction:column; height:450px; min-height:0; padding:0; box-sizing:border-box; color:#2b223b; text-align:center;}
.main .lineUp .product:nth-child(4),.main .lineUp .product:nth-child(5){padding-top:26px;}
.main .lineUp .product img {width:auto; max-width:85%; height:205px; margin-bottom:15px; object-fit:contain;}
.main .lineUp .product h3 {margin-bottom:10px; color:#2b223b; font-family:'PretendardB'; font-size:40px; letter-spacing:-0.09em; line-height:1;}
.main .lineUp .product span {display:flex; align-items:center; justify-content:center; min-width:130px; height:36px; margin-bottom:6px; padding:0 14px; border-radius:8px; box-sizing:border-box; background-color:#5629a7; color:#fff; font-family:'PretendardB'; font-size:24px; line-height:1;}
.main .lineUp .product p {color:#5629a7; font-family:'PretendardB'; font-size:24px; letter-spacing:-0.08em; line-height:1.15;}
.main .lineUp .product.dark span { background-color: #2b223b; }
.main .lineUp .product.dark p { color: #2b223b; }

/* itemList */
.main .itemList .item {display:block; min-width:0; padding:0; box-sizing:border-box; background-repeat:no-repeat; background-position:center top; background-size:100% 100%;}
.main .itemList .contentsWrap {height:100%;}
.main .itemList .original .contentsWrap, .main .itemList .pdrn .contentsWrap, .main .itemList .ac .contentsWrap {max-width:1200px;}
.main .itemList .nexosome .contentsWrap {max-width:1240px;}
.main .itemList .heading {position:absolute; top:155px; width:650px; color:#2b223b;}
.main .itemList .original .heading {width:740px;}
.main .itemList .pdrn .heading {width:720px;}
.main .itemList .pore .heading {width:740px;}
.main .itemList .nexosome .heading {width:720px;}
.main .itemList .plus {display:none; width:110px; height:110px; margin:0 auto; background:linear-gradient(var(--accentColor), var(--accentColor)) center / 4px 100% no-repeat, linear-gradient(var(--accentColor), var(--accentColor)) center / 100% 4px no-repeat;}
.main .itemList .name {margin-bottom:20px; color:var(--accentColor); font-family:'PretendardB'; font-size:40px; letter-spacing:-0.06em;}
.main .itemList .name span {position:relative; top:5px;}
.main .itemList .heading h2 {font-family:'PretendardR'; font-size:45px; font-weight:400; letter-spacing:-0.07em; line-height:1.3;}
.main .itemList .heading h2 strong { font-family: 'PretendardB'; }
.main .itemList .heading h2 em { font-family: 'PretendardB'; color: var(--accentColor); font-style: normal; }
.main .itemList .body {position:relative; width:100%; height:100%; margin:0;}
.main .itemList .body img {position:absolute; top:0; width:auto; max-width:1011px; height:auto;}
.main .itemList .description {position:absolute; z-index:2; top:380px; color:#2b223b; font-family:'PretendardR'; font-size:30px; letter-spacing:-0.06em; line-height:1.35;}
.main .itemList .description::before {display:block; width:2px; height:140px; margin-bottom:30px; background:#2b223b; content:"";}
.main .itemList .description strong { font-family: 'PretendardB'; }
.main .itemList .itemBreak_m { display:none; }
.main .itemList .itemBreak_pc {display:initial;}
.main .itemList .original {height:780px; --accentColor:#ef486a; background-image:url(/app/layout/web/images/main/original_bg.png);}
.main .itemList .pdrn {height:762px; --accentColor:#9630d3; background-image:url(/app/layout/web/images/main/PDRN_bg.png);}
.main .itemList .ac {height:787px; --accentColor:#f14630; background-image:url(/app/layout/web/images/main/AC_bg.png);}
.main .itemList .brightening {height:792px; --accentColor:#ff8900; background-image:url(/app/layout/web/images/main/brightening_bg.png);}
.main .itemList .pore {height:773px; --accentColor:#c13d28; background-image:url(/app/layout/web/images/main/poreTightening_bg.png);}
.main .itemList .nexosome {height:780px; --accentColor:#6d8f96; background-image:url(/app/layout/web/images/main/nexosome_bg.png);}
.main .itemList .original .heading, .main .itemList .ac .heading, .main .itemList .pore .heading {left:40px; text-align:left;}
.main .itemList .pdrn .heading, .main .itemList .brightening .heading, .main .itemList .nexosome .heading {right:40px; text-align:right;}
.main .itemList .nexosome .heading {right:0;}
.main .itemList .original .body img {top:155px; right:15px; max-width:none;}
.main .itemList .pdrn .body img {top:145px; left:20px; max-width:none;}
.main .itemList .ac .body img {position:absolute; top:160px; left:560px; width:664px; max-width:calc(50vw + 24px); height:auto; transform:none;}
.main .itemList .brightening .body img, .main .itemList .pore .body img, .main .itemList .nexosome .body img {right:auto; width:auto; max-width:none; height:auto; transform:none;}
.main .itemList .brightening .body img {top:130px; left:40px;}
.main .itemList .pore .body img {top:155px; left:580px; width:610px; max-width:calc(50vw - 54px); height:auto;}
.main .itemList .nexosome .body img {top:115px; left:10px;}
.main .itemList .original .description {top:375px;}
.main .itemList .pdrn .description {top:435px;}
.main .itemList .original .description::before, .main .itemList .pdrn .description::before {margin-bottom:40px;}
.main .itemList .ac .description {top:440px;}
.main .itemList .ac .description::before {margin-bottom:40px;}
.main .itemList .pore .description {top:425px;}
.main .itemList .nexosome .description {top:390px;}
.main .itemList .pore .description::before, .main .itemList .nexosome .description::before {margin-bottom:40px;}
.main .itemList .original .description, .main .itemList .ac .description, .main .itemList .pore .description {left:40px; text-align:left;}
.main .itemList .pdrn .description, .main .itemList .brightening .description, .main .itemList .nexosome .description {right:40px; text-align:right;}
.main .itemList .nexosome .description {right:0;}
.main .itemList .pdrn .description::before, .main .itemList .brightening .description::before, .main .itemList .nexosome .description::before {margin-left:auto;}
.main .itemList .descriptionBreak_m {display:none;}

/* japan */
.main .japanPc {height:1675px; background:url(/app/layout/web/images/main/japan_bg.png) no-repeat center top / 100% 1675px;}
.main .japanPc .contentsWrap {height:100%;}
.main .japanPc h2 {position:absolute; margin:0; color:#2b223b; font-family:'PretendardR'; font-size:45px; font-weight:400; letter-spacing:-0.06em; line-height:1.3;}
.main .japanPc h2 strong {font-family:'PretendardB'; color:#5629a7;}
.main .japanPc .magazinePc h2 {top:380px; left:-40px; width:650px;}
.main .japanPc .magazinePc img {position:absolute; top:185px; left:600px; width:525px; height:auto;}
.main .japanPc .influencerPc img {position:absolute; top:800px; left:-10px; width:558px; height:auto;}
.main .japanPc .influencerPc h2 {top:1030px; right:-15px; width:560px; text-align:right;}
.main .japanPc .influencerPc .description {position:absolute; top:1300px; right:-15px; margin:0; color:#2b223b; font-family:'PretendardR'; font-size:30px; letter-spacing:-0.06em; line-height:1.4; text-align:right;}
.main .japanPc .influencerPc .description strong {font-family:'PretendardB';}
.main .magazine, .main .influencer {display:none;}

/* magazine */
.main .magazine { padding: 220px 0 125px; box-sizing: border-box; background: #fff; }
.main .magazine h2 { font-family: 'PretendardR'; font-weight: 400; color: #2b223b; margin-bottom: 100px; letter-spacing: -0.06em; line-height: 1.3; text-align: center;}
.main .magazine h2 strong { font-family: 'PretendardB'; color: #5629a7; }
.main .magazine img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }

/* influencer */
.main .influencer { min-height: 2050px; padding: 270px 0 236px; box-sizing: border-box; background: url(/app/layout/web/images/main/influencer_bg.png) no-repeat; background-position: bottom;background-size: cover;}
.main .influencer h2 { font-family: 'PretendardR'; font-weight: 400; color: #2b223b; margin-bottom: 115px; letter-spacing: -0.06em; line-height: 1.3; text-align: center; }
.main .influencer h2 strong { font-family: 'PretendardB'; color: #5629a7; }
.main .influencer img { display: block; width: 100%; height: auto; margin: 0 auto 110px; }
.main .influencer .description { font-family: 'PretendardR'; font-size: 70px; color: #2b223b; letter-spacing: -0.06em; line-height: 1.3; text-align: center; }
.main .influencer .description strong { font-family: 'PretendardB'; }

/* bottom */
.main .bottom {position:relative; height:1455px; background:url(/app/layout/web/images/main/bottom_bg.png) no-repeat center top / 1920px 1455px, linear-gradient(to right, #5629a7 0%, #5629a7 calc(50% - 960px), #9f6bfe calc(50% + 960px), #9f6bfe 100%);}
.main .bottom::before {display:none; content:""; position:absolute; top:80px; left:calc(50% - 500px); width:240px; aspect-ratio:625 / 110; background:url(/app/layout/web/images/main/text_collaster_white.png) no-repeat center / contain;}
.main .bottom .contentsWrap { height: 100%; color: #fff; text-align: center; }
.main .bottom h2 {position:absolute; top:775px; width:100%; margin:0; font-family:'PretendardR'; font-size:45px; font-weight:400; letter-spacing:-0.07em; line-height:1.3;}
.main .bottom h2 strong { font-family: 'PretendardB';}
.main .bottom .lineUpText {position:absolute; top:880px; width:100%; margin:0; font-family:'PretendardM'; font-size:30px; letter-spacing:-0.07em; line-height:1.35;}
.main .bottom .lineUpText strong { font-family: 'PretendardB'; }
.main .bottom .description {position:absolute; top:1030px; width:100%; margin:0; font-family:'PretendardM'; font-size:30px; letter-spacing:-0.07em; line-height:1.6;}
.main .bottom .description mark { padding: 3px 15px 5px; background: #fff; font-family: 'PretendardB'; }
.main .bottom .description mark span { color: #8757e3;}
.main .bottom img {position:absolute; top:1205px; left:50%; width:500px; transform:translateX(-50%);}

/* collasterReviewWrap */
.youtubeWrap .iframe img { width: 100%}
/*iframe 시 주석 풀기*/
/*
.youtubeWrap .youtubeArea .iframe { position: relative; padding-bottom: 56.25%}
.youtubeWrap .youtubeArea .iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
*/

/* infoTextWrap */
.infoTextWrap { background-color: #f6f6f6;}
.infoTextWrap .text { display: flex; align-items: center; justify-content: center;font-size: 40px; font-family: 'PretendardR';}
.infoTextWrap .text span { display: flex; align-items: center; justify-content: center; font-family: 'PretendardSB'; padding: 5px 10px; margin: 0 10px; box-sizing: border-box; /*border: 1px solid #070002;*/}

/*
    ****************** 서브 페이지  ******************
*/

.subVisual { width: 100%; max-width: 1920px; /*height: 9886px;*/ text-align: center; margin: 0 auto; background-size: cover; background-position: center top ; background-repeat: no-repeat;}
.subVisual.brightening { background-image: url("/app/layout/web/images/brighteningVisualNew.jpg");}
.subVisual.original { background-image: url("/app/layout/web/images/originalVisualNew.jpg");}
.subVisual.pore { background-image: url("/app/layout/web/images/poreVisualNew.jpg");}
.subVisual.nexosome { background-image: url("/app/layout/web/images/nexosomeNew.jpg");}
.subVisual.acSolution { background-image: url("/app/layout/web/images/acSolutionVisualNew.jpg");}
.subVisual.pdrn { background-image: url("/app/layout/web/images/pdrnVisualNew.jpg");}


/*
    ****************** findUs  ******************
*/

.findUs .subVisual img { width: 100%; }
.findUs .subVisual { height: auto; }

.findUs .tabArea { background: #393939; width: 100%; height: 60px; margin-bottom: 70px; }
.findUs .tabArea ul { width: 100%; height: 100%; max-width: 1200px; display: flex; align-items: center; margin: 0 auto;}
.findUs .tabArea ul li { height: 100%; width: calc(100%/7); text-align: center; }
.findUs .tabArea ul li.on { background: #afafaf; }
.findUs .tabArea ul li a { display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-family: 'PretendardB'; }

.findUs .contentWrap .pageTitle { display: flex; align-items: center; gap: 20px; font-size: 40px; color: #202020; font-family: 'PretendardB'; margin-bottom: 30px; }
.findUs .contentWrap .pageTitle .icon { display: flex; align-items: center; }

.findUs .contentWrap .gridWrapper {overflow:hidden; margin-bottom: 150px; }
.findUs .contentWrap .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 10px; }
.findUs .contentWrap .grid .gridCell {box-sizing:border-box;width:calc(100% / 4);border:0 solid transparent;border-width:0 20px 20px 0;}
.findUs .contentWrap .grid .gridCell .gridBox { display: flex; align-items: center; justify-content: center; height: 175px; border: 1px solid #d0d0d0; border-radius: 10px; box-sizing: border-box; }
.findUs .contentWrap .grid .gridCell .gridBox.on { background: #eeeeee; border: 3px solid #393939; }
.findUs .contentWrap .grid .gridCell .gridBox a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #202020; font-size: 30px; font-family: 'PretendardB'; }
.findUs .contentWrap .grid .gridCell .gridBox a:hover { border: 2px solid #888; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); background-color: #f9f9f9; font-weight: 600; border-radius: 10px;}


/*
    ****************** contact  ******************
*/
.contact {padding:300px 0; box-sizing: border-box; background-color: #f0f0f0;}
.contact .contentWrap{position: relative; display: flex; align-items: start; justify-content: space-between;}
.contact .contentWrap .pageTitle .mainTitle{color: #202020; font-size: 37px;font-family: 'PretendardB';letter-spacing: -0.03em; margin-top: 24px;}
.contact .formWrap{display: flex; flex-wrap: wrap; align-items: start; gap: 30px;}
.contact .formWrap .formRow{display: flex; flex-direction:column; gap: 18px;}
.contact .formWrap .formRow:not(:last-of-type){margin-bottom: 50px;}
.contact .formWrap .formRow .head{color: #333333; font-size: 20px;font-family: 'PretendardM';}
.contact .formWrap .formRow .head .text{position: relative;}
.contact .formWrap .formRow .head .text:after{position: absolute; top: 0; right: -10px; content: '*'; color: #393a39; display: block; }
.contact .formWrap .formRow .body{width: 342px; padding: 10px 12px; box-sizing: border-box; background-color: #fff;}
.contact .formWrap .formRow .body input{font-size: 13px;font-family: 'PretendardR'; width: 100%; border: 0;}
.contact .formWrap .formRow .body textarea{font-size: 13px;font-family: 'PretendardR'; width: 100%; height: 430px;resize: none;}
.contact .agreeWrap {position: absolute; left: 0; bottom: 0;}
.contact .agreeWrap .agreeCell{display: flex; align-items: center; gap:10px; margin-bottom: 25px;cursor: pointer;}
.contact .agreeWrap .agreeCell input[type="checkbox"]{width: 20px;height: 20px;cursor: pointer;}
.contact .agreeWrap .agreeCell label{color: #767676; font-size: 13px;font-family: 'PretendardR';}
.contact .agreeWrap .btnSubmit{color: #fff; font-size: 30px; font-family: 'PretendardM';width: 360px; height: 84px; display: flex; align-items: center; justify-content: center;gap:69px; padding-inline: 50px; box-sizing: border-box; border-radius: 50px; background-color: #393a39; cursor: pointer;}
.contact .agreeWrap .btnSubmit::after{content: "";width: 12px; height: 21px; display: inline-block; background: url("/app/layout/web/images/conact_iconArrowWhite.png") no-repeat top / 100% auto;}


@media (max-width: 1300px) {
    /*
       ****************** 헤더 ******************
   */
    .header .listArea {left: 0px; width: 100%;padding:  15px;}


}

@media (max-width:1024px) {
    /*
    *********************************** vands TV ************************************
    */
    #mainYoutube {width:100%; height:calc(100vw * 0.5625); margin-bottom:30px;}
    #mainYoutube > video {width:100%; height:100%;}
    #vandsTv {margin-bottom:50px;}
    #vandsTv .mainSectionTitle {margin-bottom:20px;}
    #vandsTv .slideArea {position:relative;}
    #vandsTv .swiper-container {}
    #vandsTv .swiper-slide {width:230px; cursor:pointer;}
    #vandsTv .swiper-slide .thumb {width:100%; height:auto;}
    #vandsTv .swiper-slide .playIcon {display:none;}
    #vandsTv .swiperArrow {position:absolute; top:50%; margin-top:-20px; cursor:pointer; z-index:10;}
    #vandsTv .swiperArrow img {width:40px;}
    #vandsTv .swiperArrow .over {display:none;}
    #vandsTv .swiperArrow:hover .normal {display:none;}
    #vandsTv .swiperArrow:hover .over {display:inline;}
    #vandsTv .swiperPrev {left:10px;}
    #vandsTv .swiperNext {right:10px;}

}

@media (max-width: 1200px) {
    .contentWrap { padding-left: 15px; padding-right: 15px; box-sizing: border-box;}
    .cl_collasterTitle { font-size: 45px; margin-bottom: 40px; }

    /*
        ****************** 헤더 ******************
    */
    .header .gnb .menuList .list { font-size: 18px;  margin-right: 22px;}
    .header .gnb .menuList .subList { top: 100px;}

    /*
       ****************** 푸터 ******************
   */
    .footerWrap .footer .midArea {  margin-left: 60px; margin-right: 150px;}

    /*
        ****************** 메인  ******************
    */

    /* collasterLine */
    .collasterLine { padding: 130px 30px; box-sizing: border-box; }
    .collasterLine .titleArea { margin-bottom: 100px; }
    .collasterLine .subText { font-size: 25px; }
    .collasterLine .mainText { font-size: 35px; }

    /*
        ****************** 서브 페이지  ******************
    */

    .subVisual { height: 7000px;}


    /*
        ****************** findUs  ******************
    */
    .findUs .tabArea ul li a { font-size: 18px; }
    .findUs .contentWrap .pageTitle { font-size: 34px; }
    .findUs .contentWrap .grid .gridCell .gridBox a { font-size: 24px; }

    /*
        ****************** contact  ******************
    */
    .contact .contentWrap {flex-direction: column; align-items: center;}
    .contact .contentWrap .pageTitle {text-align: center; margin-bottom: 25px;}
    .contact .contentWrap .pageTitle .icon img{width: 50%;}
    .contact .contentWrap .pageTitle .mainTitle {font-size: 24px;}
    .contact .agreeWrap {position: relative;display: flex;flex-direction: column;align-items: center; justify-content: center; margin-top: 30px;}
    .contact .agreeWrap .agreeCell {margin-bottom: 15px;}
    .contact .agreeWrap .btnSubmit {font-size: 20px; width: 200px; height: 50px; padding-inline: 20px;}

}

@media (max-width: 1000px) {
    .cl_pageWrap {  padding: 100px 0;}
    .cl_collasterTitle { font-size: 40px; margin-bottom: 30px;}

    /*
        ****************** 헤더 ******************
    */
    .header .logoArea { width: 170px;}
    .header .logoArea img { width: 100%;}
    .header .listArea {left: -20px; width: 120%;}

    .header .globalWrap .global .text { font-size: 18px; margin: 0 6px;}

    /*
        ****************** 푸터 ******************
    */

    .footerWrap .footer { font-size: 14px;}
    .footerWrap .footer .leftArea .logo  { margin-bottom: 35px;}
    .footerWrap .footer .leftArea .address .text { margin-bottom: 10px;}
    .footerWrap .footer .rightArea .callNumber { margin-right: 60px;}
    .footerWrap .footer .midArea {  margin-left: 40px; margin-right: 90px;}

    /*
        ****************** 메인  ******************
    */

    /* collasterLine */

    .collasterLine { padding: 90px 20px; }
    .collasterLine .titleArea { margin-bottom: 80px; }
    .collasterLine .subText { font-size: 20px; }
    .collasterLine .mainText { font-size: 30px; }
    .collasterLine .collasterSwiper .slideArea .textArea { font-size: 16px; margin-top: 10px; }
    .collasterLine .collasterSwiper .slideArea .textArea span { font-size: 20px; margin-bottom: 5px;}
    .collasterLine .collasterSwiper .collasterBtn.next { right: -20px; width: 40px; height: 40px; }
    .collasterLine .collasterSwiper .collasterBtn.prev { left: -20px; width: 40px; height: 40px; }

    /* collasterReviewWrap */
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid { margin-right: 5px;}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid.type1 .img:first-child { margin-bottom: 5px;}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid.type3 .img:first-child { margin-bottom: 5px;}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid.type3 .img.flex div { margin-right: 5px;}

    /* infoTextWrap */
    .infoTextWrap .text { font-size: 30px; }

    /*
       ****************** 서브 페이지  ******************
    */

    .subVisual { height: 6000px;}

    /*
        ****************** findUs  ******************
    */
    .findUs .tabArea { height: 50px; margin-bottom: 50px; }
    .findUs .tabArea ul li a { font-size: 16px; }

    .findUs .contentWrap .pageTitle { font-size: 24px; gap: 10px; }
    .findUs .contentWrap .pageTitle .icon img { width: 24px; }

    .findUs .contentWrap .grid .gridCell { width: calc(100%/3); }
    .findUs .contentWrap .grid .gridCell .gridBox a { font-size: 18px; }
    .findUs .contentWrap .grid .gridCell .gridBox {height: 110px; }


}

@media (min-width:1201px) {
.main .itemList .pore .name {margin-left:-40px;}
.main .itemList .pore .description::before {margin-left:10px;}
.main .itemList .nexosome .description::before {margin-right:120px;}
}

@media (min-width:769px) and (max-width:1200px) {
.main .contentsWrap {width:calc(100% - 40px); max-width:960px;}
.main .responsiveBreak {display:none;}

/* 메인비주얼 */
.main .hero {height:76.82vw; background-size:100% 100%;}
.main .hero .contentsWrap {height:100%;}
.main .heroSubTitle {top:9.1vw; width:37vw;}
.main .heroTitle {top:16.3vw; width:31.2vw;}
.main .speechBubble {bottom:30.5vw; width:30.1vw; height:11.8vw; padding:1.4vw 1vw 0; background-size:100% 100%;}
.main .speechBubble p {font-size:2.1vw;}
.main .speechBubble p span {font-size:1.8vw;}

/* 콜라스터 소개 */
.main .definition {height:auto; min-height:72.2vw; padding:8.3vw 0 4vw; background-size:100% 100%;}
.main .definition .contentsWrap {width:52vw; height:auto;}
.main .definition .iconQuestion {width:4.4vw; margin-bottom:2.9vw;}
.main .definition .title {font-size:3.2vw; margin-bottom:4.9vw;}
.main .definition .subTitle {height:auto; min-height:10.9vw; margin-bottom:7.8vw; padding:1vw 3vw; box-sizing:border-box;}
.main .definition .subTitleText p {font-size:2.1vw; line-height:1.4; margin-bottom:1vw;}
.main .definition .subTitleText strong {font-size:4.2vw;}
.main .definition .description {font-size:1.7vw; line-height:1.5;}
.main .definition .description .divider {height:9.6vw; margin:1.3vw 0 1.8vw 3px;}

/* 배경 비율을 유지하고 늘어난 높이는 상단 배경색으로 연결 */
.main .introduce {height:auto; min-height:81.9vw; padding:8.3vw 0 4vw; box-sizing:border-box; background:#f5f7fb url(/app/layout/web/images/main/intro_bg.png) no-repeat 10vw bottom / 100% auto;}
.main .introduce .contentsWrap {height:auto;}
.main .introduce .heading {position:relative; top:auto; left:auto; width:32.3vw; margin:0 auto; transform:none;}
.main .introduce .eyebrow {font-size:2.1vw; line-height:1.3; margin-bottom:1.6vw; padding-bottom:1.6vw;}
.main .introduce .title {width:32.3vw;}
.main .introduce .description {position:relative; top:auto; left:auto; width:43vw; font-size:1.7vw; margin:14vw 0 2vw 17.3vw;}
.main .introduce .description b {font-size:2.5vw;}
.main .introduce .introLead {display:block; width:26vw;}
.main .introduce .list {position:relative; top:auto; left:auto; width:43vw; margin:0 0 0 17.3vw; gap:0.5vw;}
.main .introduce .list span {height:auto; min-height:2.9vw; font-size:2.1vw; padding:0.4vw 1.25vw; border-radius:5px;}

/* 라인업 */
.main .lineUp {padding:8.6vw 0 9.4vw;}
.main .lineUp .badge {width:15.1vw; height:3.1vw; font-size:1.7vw; margin-bottom:2.6vw;}
.main .lineUp .title {font-size:3.1vw; margin-bottom:4.7vw;}
.main .lineUp .titleLead {font-size:2.4vw;}
.main .lineUp .title strong {font-size:3.4vw;}
.main .lineUp .productList {width:76vw; background-position:center top; background-size:100% 100%; grid-auto-rows:1fr;}
.main .lineUp .product {height:auto; min-height:23.4vw; padding:1vw 0.5vw;}
.main .lineUp .product:nth-child(4), .main .lineUp .product:nth-child(5) {padding-top:2.5vw;}
.main .lineUp .product img {height:10.7vw; margin-bottom:0.8vw;}
.main .lineUp .product h3 {font-size:2.1vw; line-height:1.2; margin-bottom:0.6vw;}
.main .lineUp .product span {min-width:6.8vw; height:auto; min-height:1.9vw; font-size:max(11px, 1.25vw); line-height:1.2; margin-bottom:0.3vw; padding:0.3vw 0.7vw; border-radius:4px;}
.main .lineUp .product p {font-size:max(11px, 1.25vw); line-height:1.3;}

/* 국문 좌우 배치와 비율 유지 */
.main .itemList {--itemUnit:min(1px, 0.125vw);}
.main .itemList .item {height:auto; background-size:100% 100%;}
.main .itemList .item .contentsWrap {display:grid; width:calc(740 * var(--itemUnit)); max-width:none; height:auto; min-height:calc(511 * var(--itemUnit)); padding:calc(87 * var(--itemUnit)) 0 calc(60 * var(--itemUnit)); grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:calc(28 * var(--itemUnit)) calc(24 * var(--itemUnit));}
.main .itemList .item .heading {position:static; width:auto; grid-column:1; grid-row:1;}
.main .itemList .name {font-size:calc(23 * var(--itemUnit)); line-height:1.3; margin-bottom:calc(11 * var(--itemUnit));}
.main .itemList .name span {top:calc(5 * var(--itemUnit));}
.main .itemList .heading h2 {font-size:calc(26 * var(--itemUnit)); line-height:1.35;}
.main .itemList .body {display:contents;}
.main .itemList .body picture {display:flex; align-items:center; justify-content:center; min-width:0; grid-column:2; grid-row:1 / 3;}
.main .itemList .item .body img {position:static; width:88%; max-width:none; height:auto; transform:none;}
.main .itemList .pdrn .body img {width:76%;}
.main .itemList .brightening .body img {width:68%;}
.main .itemList .item .description {position:static; width:auto; font-size:calc(19 * var(--itemUnit)); line-height:1.45; grid-column:1; grid-row:2;}
.main .itemList .item .description::before {width:calc(2 * var(--itemUnit)); height:calc(79 * var(--itemUnit)); margin-bottom:calc(40 * var(--itemUnit));}
.main .itemList .pdrn .heading, .main .itemList .brightening .heading, .main .itemList .nexosome .heading, .main .itemList .pdrn .description, .main .itemList .brightening .description, .main .itemList .nexosome .description {grid-column:2;}
.main .itemList .pdrn picture, .main .itemList .brightening picture, .main .itemList .nexosome picture {grid-column:1;}

/* 일본 소개 */
.main .japanPc {height:auto; padding:88px 0 90px; box-sizing:border-box; background-size:100% 100%;}
.main .japanPc .contentsWrap {height:auto;}
.main .japanPc article {display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:28px 40px;}
.main .japanPc .magazinePc {margin-bottom:100px;}
.main .japanPc h2 {position:static; font-size:30px;}
.main .japanPc .magazinePc h2 {width:auto;}
.main .japanPc .magazinePc img {position:static; width:311px; max-width:100%; height:auto; margin:auto;}
.main .japanPc .influencerPc img {position:static; width:317px; max-width:100%; height:auto; margin:auto; grid-row:1 / 3;}
.main .japanPc .influencerPc h2 {width:auto; align-self:end;}
.main .japanPc .influencerPc .description {position:static; width:auto; font-size:21px; align-self:start;}
.main .magazine, .main .influencer {display:none;}

/* 하단 소개 */
.main .bottom {height:auto; min-height:75.78vw; padding:40.4vw 0 6vw; box-sizing:border-box; background:url(/app/layout/web/images/main/bottom_bg.png) no-repeat center top / 100% auto, linear-gradient(90deg, #5629a7 0%, #6638bb 25%, #794ad2 50%, #8d5ce9 75%, #9f6bfe 100%);}
.main .bottom .contentsWrap {height:auto;}
.main .bottom h2 {position:static; font-size:2.4vw; margin-bottom:2.4vw;}
.main .bottom .lineUpText {position:static; font-size:1.8vw; margin-bottom:4vw;}
.main .bottom .description {position:static; font-size:1.8vw; margin-bottom:4vw;}
.main .bottom img {display:block; position:static; width:26vw; margin:0 auto; transform:none;}
}

@media (max-width:768px) {
.main .contentsWrap {width:94.118vw; max-width:none; height:auto;}
.main .responsiveBreak {display:none;}
.main .japanPc {display:none;}
.main .magazine, .main .influencer {display:block;}

/* 메인비주얼 */
.main .hero {height:140vw; background:url(/app/layout/web/images/main/main_bg_m.png) no-repeat center / 100% 100%;}
.main .hero .contentsWrap {height:100%;}
.main .heroSubTitle {top:18.529vw; width:80.882vw;}
.main .heroTitle {top:33.529vw; width:61.765vw;}
.main .speechBubble {top:68vw; bottom:auto; width:64vw; height:23.2vw; padding:2.647vw 1.5vw 0; background-size:100% 100%;}
.main .speechBubble p {height:auto; font-size:4.5vw; line-height:1.25;}
.main .speechBubble p span {display:block; font-size:3.8vw;}

/* 콜라스터 소개 */
.main .definition {height:auto; min-height:193vw; padding:12.9vw 0 40vw; background:#f7f6fd url(/app/layout/web/images/main/definition_bg_m.png) no-repeat right bottom / 100% auto;}
.main .definition .contentsWrap {width:94.118vw; height:auto;}
.main .definition .iconQuestion {left:auto; width:8.9vw; margin:0 auto 4vw; transform:none;}
.main .definition .title {font-size:7vw; line-height:1.2; margin-bottom:6.8vw;}
.main .definition .subTitle {width:82.6vw; height:auto; min-height:28.6vw; margin:0 auto 10.5vw; padding:2vw 4vw; box-sizing:border-box;}
.main .definition .subTitleText p {font-size:4.7vw; line-height:1.4; margin-bottom:1.5vw;}
.main .definition .subTitleText strong {font-size:11vw;}
.main .definition .description {font-size:4.1vw; line-height:1.6; margin:0; padding:0; text-align:center;}
.main .definition .description .divider {width:0; height:0; margin:3vw auto 0; background:none;}

/* 배경을 하단에 고정해 콘텐츠 증가 시 이미지 경계 노출 방지 */
.main .introduce {height:auto; min-height:152.5vw; padding:11.7vw 0 8vw; box-sizing:border-box; background:#f5f7fb url(/app/layout/web/images/main/intro_bg_m.png) no-repeat center bottom / 100% auto;}
.main .introduce .contentsWrap {display:flex; height:auto; min-height:132.8vw; padding:0 3.5vw; flex-direction:column;}
.main .introduce .heading {position:static; width:82.6vw; margin:0 0 5vw; transform:none; text-align:left; order:1;}
.main .introduce .eyebrow {font-size:7vw; line-height:1.25; margin-bottom:7vw; padding-bottom:4.5vw; border-color:#89858f;}
.main .introduce .title {display:block; width:56vw; clip-path:inset(0 0 31% 0);}
.main .introduce .koreanTitle_m {display:block; position:static; font-family:'PretendardR'; font-size:7.5vw; line-height:1; margin-top:-6vw;}
.main .introduce .description {display:contents;}
.main .introduce .description > br {display:none;}
.main .introduce .introLead {display:block; width:50vw; font-size:4vw; line-height:1.5; margin-bottom:4vw; order:2;}
.main .introduce .description b {font-size:6vw;}
.main .introduce .description .outro {display:block; position:static; width:85vw; font-family:'PretendardB'; font-size:5vw; line-height:1.5; margin-top:auto; padding-top:8vw; order:4;}
.main .introduce .list {position:static; width:50vw; margin:0; gap:0.7vw; order:3;}
.main .introduce .list span {height:auto; min-height:6.5vw; font-size:3.65vw; padding:0.7vw 1.4vw; border-radius:0.9vw; white-space:nowrap; letter-spacing:0; box-shadow:1px 0 6px 1px #fff;}

/* 라인업 */
.main .lineUp {padding:14.7vw 0 11.6vw;}
.main .lineUp .badge {width:22vw; height:5vw; font-size:max(11px, 2.7vw); margin-bottom:4.4vw; border-width:1px;}
.main .lineUp .title {font-size:7vw; line-height:1.25; margin-bottom:4.1vw;}
.main .lineUp .titleLead {font-size:inherit;}
.main .lineUp .title strong {font-size:7.3vw;}
.main .lineUp .productList {width:88.5vw; margin:0 auto; background-position:center -6vw; background-size:100% calc(100% + 6vw); grid-auto-rows:1fr;}
.main .lineUp .product {height:auto; min-height:47.2vw; padding:2.5vw 0.5vw;}
.main .lineUp .product:nth-child(4), .main .lineUp .product:nth-child(5) {padding-top:2.5vw;}
.main .lineUp .product img {width:auto; max-width:90%; height:20.5vw; margin-bottom:1.6vw;}
.main .lineUp .product h3 {font-size:4.1vw; line-height:1.2; margin-bottom:2vw;}
.main .lineUp .product span {min-width:13vw; height:auto; min-height:4.4vw; font-size:max(11px, 2.7vw); line-height:1.2; margin-bottom:0.5vw; padding:0.5vw 1vw; border-radius:0.7vw;}
.main .lineUp .product p {font-size:max(11px, 2.6vw); line-height:1.15;}

/* 제품별 세로 배치 */
.main .itemList .item {height:auto; min-height:173.382vw; padding:9.2vw 0 8vw; background-color:#f5f5fc; background-size:100% auto;}
.main .itemList .original {background-image:url(/app/layout/web/images/main/original_bg_m.png);}
.main .itemList .pdrn {min-height:173.529vw; background-image:url(/app/layout/web/images/main/PDRN_bg_m.png);}
.main .itemList .ac {background-image:url(/app/layout/web/images/main/AC_bg_m.png);}
.main .itemList .brightening {min-height:182.5vw; background-image:url(/app/layout/web/images/main/brightening_bg_m.png);}
.main .itemList .pore {background-image:url(/app/layout/web/images/main/poreTightening_bg_m.png);}
.main .itemList .nexosome {background-image:url(/app/layout/web/images/main/nexosome_bg_m.png);}
.main .itemList .item .contentsWrap {width:94.118vw; height:auto;}
.main .itemList .item .heading {position:static; width:100%; margin-bottom:5vw; text-align:center;}
.main .itemList .plus {display:block; width:5.9vw; height:5.9vw; margin-bottom:2.7vw; background-size:1px 100%, 100% 1px;}
.main .itemList .name {font-size:max(11px, 4vw); line-height:1.3; margin-bottom:5.6vw; letter-spacing:-0.05em;}
.main .itemList .name span {top:1vw;}
.main .itemList .heading h2 {font-size:7vw; line-height:1.4; letter-spacing:-0.075em; white-space:normal;}
.main .itemList .body {display:flex; position:static; width:100%; height:auto; margin:0; flex-direction:column; align-items:center; gap:7vw;}
.main .itemList .body picture {display:block; width:80vw; order:1;}
.main .itemList .ac .body picture, .main .itemList .brightening .body picture {width:84vw;}
.main .itemList .pore .body picture {width:79vw;}
.main .itemList .nexosome .body picture {width:86vw;}
.main .itemList .item .body img {display:block; position:static; width:100%; max-width:none; height:auto; transform:none;}
.main .itemList .original .body picture {transform:translateX(3vw);}
.main .itemList .pdrn .body picture {transform:translateX(-6vw);}
.main .itemList .ac .body picture, .main .itemList .brightening .body picture {transform:translateX(1vw);}
.main .itemList .pore .body picture, .main .itemList .nexosome .body picture {transform:translateX(-1vw);}
.main .itemList .item .description {position:static; width:100%; font-size:7vw; line-height:1.35; text-align:center; order:2;}
.main .itemList .description::before {display:none;}

/* 일본 소개 */
.main .magazine {padding:9vw 0 14vw;}
.main .magazine h2 {font-size:7vw; line-height:1.3; margin-bottom:5vw; white-space:normal;}
.main .magazine img {width:90vw; max-width:100%;}
.main .influencer {min-height:0; padding:9vw 0 7vw; background:url(/app/layout/web/images/main/influencer_bg_m.png) no-repeat center / cover;}
.main .influencer h2 {font-size:7vw; line-height:1.35; margin:0 0 5vw 7vw; text-align:left; white-space:normal;}
.main .influencer picture {display:block;}
.main .influencer img {width:88vw; max-width:none; margin:0 auto 7vw; transform:translateX(1.5vw);}
.main .influencer .description {font-size:5vw; line-height:1.35;}

/* 하단 소개 */
.main .bottom {height:auto; min-height:138.676vw; padding:76vw 0 8vw; box-sizing:border-box; background:url(/app/layout/web/images/main/bottom_bg_m.png) no-repeat center top / 100% auto, linear-gradient(90deg, #5629a7 0%, #6639ba 25%, #794ad2 50%, #8d5be9 75%, #9f6afe 100%);}
.main .bottom::before {display:block; top:4vw; left:9vw; width:21vw;}
.main .bottom .contentsWrap {height:auto;}
.main .bottom h2 {position:static; font-size:6.76vw; line-height:1.3; margin-bottom:4vw; white-space:normal;}
.main .bottom .lineUpText {position:static; font-size:4.5vw; line-height:1.4; margin-bottom:6vw;}
.main .bottom .description {position:static; font-size:4.6vw; line-height:1.45; margin-bottom:6vw;}
.main .bottom .description mark {display:inline; padding:0 2vw; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.main .bottom img {display:block; position:static; width:33vw; margin:0 auto; transform:none;}
}

@media (max-width: 768px) {
    .showMobile {display:block;}

    .cl_pageWrap {  padding: 50px 0;}
    .cl_collasterTitle { font-size: 20px; margin-bottom: 15px;}

    /*
        ****************** 헤더 ******************
    */
    .header { justify-content: center; height: 70px;}
    .header .logoArea { width: auto;}
    .header .gnb { display: none;}
    .header .gnbMenu { position: absolute; top: 50%; transform: translateY(-50%); left: 20px; cursor: pointer;}
    .header .globalWrap { display: none;}

    .mobileMenuWrap { display: none;position: fixed;top: 0; left:-100%;width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 9999}
    .mobileMenuWrap.on { display: block; left: 0;}
    .mobileMenuWrap .mobileMenu { position: relative; width: 90%; height: 100%; background-color: #fff; padding: 35px 25px; box-sizing: border-box;}
    .mobileMenuWrap .mobileMenu .logo { margin-bottom: 25px;}
    .mobileMenuWrap .mobileMenu .menuList .list:not(.only) { position: relative; width: 100%;margin-bottom: 25px; font-size: 13px; font-family: 'PretendardM'; background: url("/app/layout/web/images/gnbArrowUp.png") no-repeat 100% 8px; background-size: 10px 5px; cursor: pointer;}
    .mobileMenuWrap .mobileMenu .menuList .list:last-child { margin-bottom: 0;}
    .mobileMenuWrap .mobileMenu .menuList .list a {color: #202020}
    .mobileMenuWrap .mobileMenu .menuList .list.down { background: url("/app/layout/web/images/gnbArrowDown.png") no-repeat 100% 8px;background-size: 10px 5px;}
    .mobileMenuWrap .mobileMenu .menuList .subList { display: none; font-size: 11px; font-family: 'PretendardL'; padding-left: 10px; box-sizing: border-box;}
    .mobileMenuWrap .mobileMenu .menuList .subList li { margin-top: 15px;}

    .mobileMenuWrap .globalM { display: flex; align-items: center; margin-top: 25px;}
    .mobileMenuWrap .globalM .globalLogo { display: flex; width: 15px;}
    .mobileMenuWrap .globalM .globalLogo img{ width: 100%;}
    .mobileMenuWrap .globalM .text { font-size: 13px; font-family: 'PretendardM'; margin:0 8px;}
    .mobileMenuWrap .globalM .list { display: flex; align-items: center;}
    .mobileMenuWrap .globalM .list a{ display: flex; margin-right: 5px;}
    .mobileMenuWrap .globalM .list a:last-child{ margin-right: 0; }
    .mobileMenuWrap .mobileMenu .closeBtn { position: absolute; top: 5px; right: 5px; font-size: 20px;}

    /*
        ****************** 푸터 ******************
    */

    .footerWrap .footer { flex-direction: column; align-items: center; font-size: 14px;}
    .footerWrap .footer .leftArea { margin-bottom: 20px;}

    .footerWrap .footer .leftArea .logo  { margin-bottom: 20px;}
    .footerWrap .footer .leftArea .logo img { width: 160px}
    .footerWrap .footer .leftArea .address .text { margin-bottom: 3px; }
    .footerWrap .footer .leftArea .address .text.text1 { line-height: 1.3}
    .footerWrap .footer .midArea { margin-bottom: 20px; margin-left: 0 ;margin-right: 0; }
    .footerWrap .footer .midArea .address .text.tradeMarkComment {font-size:11px;}
    .footerWrap .footer .rightArea { flex-direction: column; }
    .footerWrap .footer .rightArea .callNumber { margin-right: 0; margin-bottom: 20px; line-height: 0.8}
    .footerWrap .footer .rightArea ul { display: flex;}
    .footerWrap .footer .rightArea ul li { margin-bottom: 0; margin-right: 15px;}
    .footerWrap .footer .rightArea ul li:last-child { margin-bottom: 0; margin-right: 0;}


    /*
        ****************** 메인  ******************
    */

    /* collasterLine */
    .collasterLine .titleArea { margin-bottom: 50px;}
    .collasterLine .subText { font-size: 15px; margin-bottom: 5px;}
    .collasterLine .mainText { font-size: 20px; }

    .collasterLine .collasterSwiper .slideArea .textArea { font-size: 12px; margin-top: 5px; }
    .collasterLine .collasterSwiper .slideArea .textArea span { font-size: 15px; margin-bottom: 0px;}
    .collasterLine .collasterSwiper .collasterBtn { display: none;}
    .collasterLine .collasterSwiper .swiper-pagination { display: block; left: 50%; transform: translateX(-50%)}
    .collasterLine .collasterSwiper .swiper-pagination .swiper-pagination-bullet { margin-right: 4px;}
    .collasterLine .collasterSwiper .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0;}
    .collasterLine .collasterSwiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #202020;}

    /* collasterReviewWrap */
    .collasterReviewWrap .reviewAreaWrap .reviewArea.pc { display: none;}
    .collasterReviewWrap .reviewAreaWrap .reviewArea.m { display: flex; flex-direction: column; align-items: center; justify-content: center}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid { margin-bottom: 5px; margin-right: 0;}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid:last-child { margin-bottom: 0;}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid.type3 { flex-direction: row; }
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid.type3 .img:first-child  { margin-bottom: 0;}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid.type3 .img { margin-right: 5px;  flex: 1}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid.type3 .img:last-child {margin-right: 0px;}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid.type3 .img.flex { flex-direction: column}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid.type3 .img.flex div { margin-right: 0; margin-bottom: 5px; }
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewGrid.type3 .img.flex div:last-child { margin-bottom: 0; }

    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewBox { display: flex; width: 100%; justify-content: flex-start;}
    .collasterReviewWrap .reviewAreaWrap .reviewArea .reviewBox > div {margin-right: 10px; /*position: relative;*/ width:calc(100% / 3);}

    /* infoTextWrap */

    .infoTextWrap { text-align: center; }
    .infoTextWrap .text { display: inline-flex;flex-direction: column;  font-size: 20px;  }
    .infoTextWrap .text span { display: block;padding: 4px 10px; margin: 5px 0;}
    .infoTextWrap .text span img { width: 70%; }
    /*
         ****************** 서브 페이지  ******************
    */

    .subVisual { height: auto; }
    .subVisual .mainImg { width: 100%}
    .subVisual.brightening { background-image: none;}
    .subVisual.original { background-image: none;}
    .subVisual.pore { background-image: none;}
    .subVisual.nexosome { background-image: none;}
    .subVisual.acSolution { background-image: none;}
    .subVisual.pdrn { background-image: none;}


    /*
        ****************** findUs  ******************
    */
    .findUs .tabArea { height: 50px; margin-bottom: 35px; }
    .findUs .tabArea ul { display: none; }

    .findUs .contentWrap .pageTitle { font-size: 20px; gap: 7px; margin-bottom: 15px; }
    .findUs .contentWrap .pageTitle .icon img { width: 20px; }

    .findUs .contentWrap .gridWrapper { margin-bottom: 70px; }
    .findUs .contentWrap .grid .gridCell { width: calc(100%/2); }
    .findUs .contentWrap .grid .gridCell .gridBox a { font-size: 15px; }
    .findUs .contentWrap .grid .gridCell .gridBox {height: 70px; }
    .findUs .contentWrap .grid .gridCell { border-width: 0 15px 15px 0; }

    .findUs .dropDownWrap { position: relative; height: 100%; padding: 0 15px; box-sizing: border-box; }
    .findUs .dropDownWrap a { height: 100%; display: flex; align-items: center; justify-content: space-between; color: #fff; font-family: 'PretendardB'; font-size: 16px; cursor: pointer; }

    .findUs .dropDownWrap .subMenuWrap { display: none; position: absolute; top: 50px; left: 0; width: 100%; box-sizing: border-box; padding: 10px 0; background: #393939; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); z-index: 10; }
    .findUs .dropDownWrap.on .subMenuWrap { display: block; }
    .findUs .dropDownWrap .subMenuWrap .subMenu { display: flex; flex-direction: column; }
    .findUs .dropDownWrap .subMenuWrap .subMenu li { width: 100%; padding: 12px 16px; box-sizing: border-box; transition: background-color 0.2s; }
    .findUs .dropDownWrap .subMenuWrap .subMenu li a { display: block; font-size: 15px; font-family: 'PretendardB'; text-align: left; transition: color 0.2s; }
    .findUs .dropDownWrap .subMenuWrap .subMenu li:hover a { color: #fff; font-weight: 600; }

    .findUs .dropDownWrap.on i { transform: rotate(180deg); transition: transform 0.2s; }
    .findUs .tabArea ul li.on { background: #afafaf; color: #fff; }

    /*
        ****************** contact  ******************
    */
.contact {padding:64px 0 45px;}
.contact .contentWrap {flex-direction:column; align-items:center; width:90%; padding:0;}
.contact .contentWrap .pageTitle {width:100%; text-align:left; margin-bottom:46px;}
.contact .contentWrap .pageTitle .icon {width:60%;}
.contact .contentWrap .pageTitle .icon img {display:block; width:100%;}
.contact .contentWrap .pageTitle .mainTitle {font-size:32px; line-height:1.2; margin-top:16px;}
.contact .contentWrap .contentArea {width:100%;}
.contact .formWrap {width:100%; flex-direction:column; gap:18px;}
.contact .formWrap > div {width:100%;}
.contact .formWrap .formRow {flex-direction:column; align-items:stretch; min-height:0; padding:0; gap:8px; box-sizing:border-box; background-color:transparent;}
.contact .formWrap .formRow:not(:last-of-type) {margin-bottom:18px;}
.contact .formWrap .formRow.alignStartM {align-items:stretch;}
.contact .formWrap .formRow .head {flex:0 0 auto; min-width:0; font-family:'PretendardR'; font-size:18px; line-height:24px; white-space:normal;}
.contact .formWrap .formRow .head .text::after {content:none;}
.contact .formWrap .formRow .body {flex:0 0 auto; width:100%; min-width:0; padding:16px; background-color:#fff;}
.contact .formWrap .formRow .body input {display:block; height:24px; line-height:24px;}
.contact .formWrap .formRow .body textarea {display:block;height:320px; line-height:24px;}
.contact .formWrap .formRow .body input::placeholder, .contact .formWrap .formRow .body textarea::placeholder {font-size:11px; color:#767676; opacity:1;}
    .contact .agreeWrap {width: 100%;}
    .contact .agreeWrap .agreeCell {gap: 5px;}
    .contact .agreeWrap .agreeCell label {font-size: 12px;}
    .contact .agreeWrap .agreeCell input[type="checkbox"] {width: 16px;height: 16px;}
    .contact .agreeWrap .btnSpace {width: 100%;}
    .contact .agreeWrap .btnSubmit {font-size: 15px; width: 100%; height: 44px; justify-content: center;}
    .contact .agreeWrap .btnSubmit::after {content: none;}


}

@media (max-width:480px) {
.contact {padding-top:40px;}
.contact .contentWrap .pageTitle {margin-bottom:30px;}
.contact .contentWrap .pageTitle .mainTitle {font-size:20px; margin-top:12px;}
.contact .formWrap .formRow .body {padding:12px;}
.contact .formWrap .formRow .head {font-size:16px;}
}