/* ***************  버튼  ***************** */
.cl_button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: 'NotoSansL';border: 1px solid #000; border-radius: 50px; box-sizing: border-box; padding: 20px 35px; cursor: pointer; }


/* ***************  페이지 타이틀   ***************** */

/*메인 타이틀*/
.cl_mainTitle .title { font-size: 74px; color: #191919; font-family:'AlbraTRIALR'; }
.cl_subTitle .title { font-size: 81px; color: #1d1d1d; font-family:'AlbraTRIALR';}
.cl_sectionTitle .title { font-size: 55px; color: #1d1d1d; font-family:'NotoSansB'; margin-bottom: 40px; }


/* ***************  subVisual   ***************** */
.cl_subVisual {  position: relative;width: 100%;height: 1160px; background-size: cover; background-position: center bottom; }
.cl_subVisual .textWrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; margin-left: -20vw; }
.cl_subVisual.white .textWrap { color: #fff; }
.cl_subVisual.center .textWrap { width: 100%; margin-left: 0; }
.cl_subVisual .mainText { font-size: 104px; font-family:'AlbraTRIALR'; }
.cl_subVisual .subText { font-size: 35px; font-family: 'NotoSansR'; }


/* ***************  subMainVisual   ***************** */
.cl_subMainVisual {max-width: 1920px; height: auto; margin: 0 auto; padding: 50px 50px 0 50px; box-sizing: border-box; background: none;}
.cl_subMainVisualInner { height: 695px; position: relative; border-radius: 30px; background-repeat: no-repeat !important; background-size: cover !important; background-position: center !important;}
.cl_subMainVisual .imgWrap {display: none;}
.cl_subMainVisual .textWrap {max-width: 900px; width: 100%; display: flex; flex-direction: column; align-items: start; position: absolute; top: 50%;left: 50%; right: auto; transform: translate(-50%, -50%); margin-left: 32%;}
.cl_subMainVisual .textWrap.txtCwihte > div {color: #fff;}
.cl_subMainVisual .tit {color: #000000; font-size: 42px; font-family:'SUITEB'; word-break: keep-all; margin-bottom: 15px;}
.cl_subMainVisual .txt {color: #909099; font-size: 26px; font-family:'SUITL'; word-break: keep-all;}
.cl_subMainVisual .cl_pageTitle{padding-top: 0;position: absolute;bottom: -35px;right: 0;}
.cl_subMainVisual .cl_pageTitle .subText {font-family:'SUITL'; }

.cl_subMainVisual.white .tit {color: #fff;}
.cl_subMainVisual.white .txt {color: #fff;}


/* ***************  페이지타이틀   ***************** */
.cl_pageTitle { padding-top: 135px; }
.cl_pageTitle .mainText { font-size: 50px; font-family: 'NotoSansB'; padding-bottom: 35px; border-bottom: 1px solid #000000; box-sizing: border-box; margin-bottom: 70px;  }
.cl_pageTitle .subText { font-size: 16px; font-family: 'NotoSansR'; color: #aaaaaa; text-align: right; }
.cl_pageTitle.titleList { margin-bottom: 200px; }
.cl_pageTitle .infoArea { display: flex; gap: 60px; }
.cl_pageTitle .infoArea .listArea li { display: flex; align-items: flex-start; gap: 6px; font-size: 21px; color: #1d1d1d; }
.cl_pageTitle .infoArea .listArea li .left { font-family: 'NotoSansR'; }
.cl_pageTitle .infoArea .listArea li .right { font-family: 'NotoSansB'; }


/* ***************  섹션타이틀   ***************** */
.cl_sectionTitle { z-index: 1; }
.cl_sectionTitle { margin-bottom: 80px; }
.cl_sectionTitle.center { text-align: center; }
.cl_sectionTitle .mainText { font-size: 82px; font-family:'AlbraTRIALR'; line-height: 80px; margin-bottom: 60px; }
.cl_sectionTitle.large .mainText { font-size: 132px; line-height: 130px; }
.cl_sectionTitle .subText.bold { font-size: 34px;  font-family: 'NotoSansB'; margin-bottom: 20px;  }
.cl_sectionTitle .subText { font-size: 21px; color: #1d1d1d; font-family: 'NotoSansR';}

.cl_sectionTitle .subText .blue { color: #5aa4b6; }


/* ***************  탭타이틀   ***************** */
.cl_tabTitle { flex: 1; }
.cl_tabTitle .subText.bold { color: #1d1d1d; font-size: 34px; font-family: 'NotoSansB'; margin-bottom: 35px; }
.cl_tabTitle .subText { color: #1d1d1d; font-size: 20px; font-family: 'NotoSansR'; letter-spacing: -0.8px; }
.cl_tabTitle .subText.small { font-size: 18px; }
.cl_tabTitle .subText .flexWrap { gap: 10px; }
.cl_tabTitle .subText.small .bold { font-family: 'NotoSansB'; }


/* ***************  탭서브타이틀   ***************** */

.cl_tabSubTitle .mainText { font-size: 55px; color: #1d1d1d; font-family:'AlbraTRIALR'; margin-bottom: 90px; }
.cl_tabSubTitle .subText.bold { font-size: 26px; font-family: 'NotoSansB'; margin-bottom: 20px; }
.cl_tabSubTitle .subText { font-size: 18px; color: #1d1d1d; font-family: 'NotoSansR';     letter-spacing: -0.8px;}

.cl_tabSubTitle .checkList { padding-left: 70px; }
.cl_tabSubTitle .checkList li { position: relative; font-size: 22px; color: #1d1d1d; font-family: 'NotoSansR'; margin-bottom: 30px; }
.cl_tabSubTitle .checkList li:before { content: ''; position: absolute; top: 50%; left: -70px; transform: translateY(-50%); background: url("/app/layout/web/images/sub/benefitIcon_green.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.pink li:before { background: url("/app/layout/web/images/sub/benefitIcon_pink.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.sky li:before { background: url("/app/layout/web/images/sub/benefitIcon_sky.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.grey li:before { background: url("/app/layout/web/images/sub/benefitIcon_grey.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.darkGrey li:before { background: url("/app/layout/web/images/sub/benefitIcon_darkGrey.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.purple li:before { background: url("/app/layout/web/images/sub/benefitIcon_purple.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.yellow li:before { background: url("/app/layout/web/images/sub/benefitIcon_yellow.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.blue li:before { background: url("/app/layout/web/images/sub/benefitIcon_blue.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.skyblue li:before { background: url("/app/layout/web/images/sub/benefitIcon_skyblue.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.mysticBlue li:before { background: url("/app/layout/web/images/sub/benefitIcon_mysticBlue.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.lavenderBlue li:before { background: url("/app/layout/web/images/sub/benefitIcon_lavenderBlue.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.lavenderPurple li:before { background: url("/app/layout/web/images/sub/benefitIcon_lavenderPurple.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.mintBlue li:before { background: url("/app/layout/web/images/sub/benefitIcon_mintBlue.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.brown li:before { background: url("/app/layout/web/images/sub/benefitIcon_brown.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.red li:before { background: url("/app/layout/web/images/sub/benefitIcon_red.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.peach li:before { background: url("/app/layout/web/images/sub/benefitIcon_peach.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.blueGrey li:before { background: url("/app/layout/web/images/sub/benefitIcon_blueGrey.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.beige li:before { background: url("/app/layout/web/images/sub/benefitIcon_beige.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.pastelBlue li:before { background: url("/app/layout/web/images/sub/benefitIcon_pastelBlue.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.navy li:before { background: url("/app/layout/web/images/sub/benefitIcon_navy.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.midnightBlue li:before { background: url("/app/layout/web/images/sub/benefitIcon_midnightBlue.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.lemonYellow li:before { background: url("/app/layout/web/images/sub/benefitIcon_lemonYellow.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.pinkLavender li:before { background: url("/app/layout/web/images/sub/benefitIcon_pinkLavender.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.darkGreen li:before { background: url("/app/layout/web/images/sub/benefitIcon_darkGreen.png")no-repeat; width: 46px; height: 42px; }
.cl_tabSubTitle .checkList.mintSkyblue li:before { background: url("/app/layout/web/images/sub/benefitIcon_mintSkyblue.png")no-repeat; }
.cl_tabSubTitle .checkList.orange li:before { background: url("/app/layout/web/images/sub/benefitIcon_orange.png")no-repeat; }
.cl_tabSubTitle .checkList.purple2 li:before { background: url("/app/layout/web/images/sub/benefitIcon_purple2.png")no-repeat; }


/* ***************  mainColorTitle   ***************** */
.cl_mainColorTitle { font-size: 151px; font-family:'AlbraTRIALR'; margin-bottom: 40px; line-height: 160px; }
.cl_mainColorTitle.big { font-size: 200px; font-family:'AlbraTRIALR'; margin-bottom: 100px; line-height: 160px; }
.cl_mainColorTitle.small { font-size: 100px; line-height: 110px; }
.cl_mainColorTitle.type2 { margin-bottom: 120px; }

.cl_mainColorTitle.emerald {  color: #108694; }
.cl_mainColorTitle.sky {  color: #b1cffa; }
.cl_mainColorTitle.brown {  color: #9f8a81; }
.cl_mainColorTitle.pink {  color: #ffafc0; }
.cl_mainColorTitle.purple {  color: #a899bb; }
.cl_mainColorTitle.grape {  color: #9160b0; }
.cl_mainColorTitle.violet {  color: #983283; }
.cl_mainColorTitle.yellow {  color: #f3bd20; }
.cl_mainColorTitle.blue {  color: #5595ff; }
.cl_mainColorTitle.gray {  color: #898c9a; }
.cl_mainColorTitle.darkPurple {  color: #5f5d76 ; }
.cl_mainColorTitle.skyBlue{ color: #6EA9D7}
.cl_mainColorTitle.sageGreen{ color: #9F9881 }
.cl_mainColorTitle.flameRed{ color: #ff5353 }
.cl_mainColorTitle.aquaMarine{ color: #9dc3e8 }
.cl_mainColorTitle.steelGray{ color: #8a8a8a }
.cl_mainColorTitle.royalPurple{ color: #2A2287 }
.cl_mainColorTitle.mistBlue{ color: #A1B3C6 }
.cl_mainColorTitle.lavenderPurple{ color: #b676bf }
.cl_mainColorTitle.lavenderPink{ color: #da6e6c }
.cl_mainColorTitle.navy{ color: #1b5184 }
.cl_mainColorTitle.red{ color: #a2102e }
.cl_mainColorTitle.peach { color: #feb4ad }
.cl_mainColorTitle.blueGrey { color: #5a7697 }
.cl_mainColorTitle.beige { color: #c1a887 }
.cl_mainColorTitle.pastelBlue { color: #a0bdea }
.cl_mainColorTitle.midnightBlue{ color: #235081}
.cl_mainColorTitle.lemonYellow{ color: #d7ba9a}
.cl_mainColorTitle.ultraMarineBlue{ color: #1f4ab1 }
.cl_mainColorTitle.fountainBlue{ color: #55C3B6 }
.cl_mainColorTitle.vividViolet{color: #553383}
.cl_mainColorTitle.portage{color: #8396d3}
.cl_mainColorTitle.turquoise{color: #006892}

/* *************** imgFlexArea   ***************** */
.cl_imgFlexArea { display: flex; padding-top: 200px; box-sizing: border-box; }
.cl_imgFlexArea.right { padding-bottom: 100px; }
.cl_imgFlexArea.between { justify-content: space-between; }
.cl_imgFlexArea .imgArea { width: 50%; margin-top: 10vh; }
.cl_imgFlexArea.right .imgArea { text-align: right; }
.cl_imgFlexArea .imgArea.small { width: 45%; }
.cl_imgFlexArea .imgArea img { width: 90%; }


.cl_imgFlexArea.type2 .imgArea { flex: 1; margin-top: -50vh; display: flex; align-items: center; justify-content: center; }
.cl_imgFlexArea.type2 .imgArea img { width: auto; }
.cl_imgFlexArea.type2 .cl_sectionTitle { flex: none; width: 55%; margin-top: -15vh;}

/* *************** cl_productFlexArea   ***************** */
.cl_introFlexArea { display: flex; justify-content: flex-start; gap: 100px; margin-top: -8vh !important; }
.cl_introFlexArea .cl_sectionTitle { width: 50%; }
.cl_introFlexArea .imgArea { flex: 1; margin-top: -25vh; }


/* *************** cl_beforeAfter   ***************** */
.cl_beforeAfter { background: #efefef; padding: 200px 0; box-sizing: border-box; }
.cl_beforeAfter .textArea { text-align: center; }
.cl_beforeAfter .textArea .mainText { font-size: 97px; font-family:'AlbraTRIALR'; }
.cl_beforeAfter .textArea .subText { font-size: 23px; color: #1d1d1d; font-family: 'NotoSansM'; margin-bottom: 80px; }
.cl_beforeAfter .gridWrapper {overflow:hidden;}
.cl_beforeAfter .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 10px; margin:-10px}
.cl_beforeAfter .grid .gridCell { flex-direction: column; box-sizing:border-box;width:calc(100% / 2);border:0 solid transparent;border-width:0 40px 10px 0;}

.cl_beforeAfter .grid .gridCell .imgArea { width: 100%; font-size: 0; }
.cl_beforeAfter .grid .gridCell .imgArea img { width: 100%; }
.cl_beforeAfter .grid .gridCell .textArea { width: 100%; font-family:'AlbraTRIALR'; font-size: 28px; padding: 5px 0; box-sizing: border-box; }
.cl_beforeAfter .grid .gridCell .textArea.before { color: #fff; background: #000; }
.cl_beforeAfter .grid .gridCell .textArea.after { color: #000; background: #fff; }

.cl_beforeAfter.type2 { background-color: #fff; }
.cl_beforeAfter.type2 .flexBox {; display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 30px; }
.cl_beforeAfter.type2 .flexBox img { width: 100%; }
.cl_beforeAfter.type2 .flexBox:nth-last-child(1) { margin-bottom: 0; }
.cl_beforeAfter.type2 .flexBox .leftArea { display: flex; align-items: center; justify-content: center; font-size: 44px; font-family: 'NotoSansB'; width: 550px; position: relative; }
.cl_beforeAfter.type2 .flexBox .rightArea { display: flex; align-items: center; justify-content: center; font-size: 44px; font-family: 'NotoSansB'; width: 550px; color: #76d5c4; }
.cl_beforeAfter.type2 .flexBox .info { display: flex; align-items: center; justify-content: center; width: 162px; height: 162px; position: absolute; top: -100px; left: -80px;text-align: center; font-size: 34px; font-family: 'NotoSansB'; line-height: 1.2; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;background-color: #f9faf9; border-radius: 50%; }
.cl_beforeAfter.type2 .textArea .mainText { line-height: 1.2; margin-bottom: 200px; font-size: 70px; font-family: 'NotoSansB'; }


/* *************** cl_boxFlexArea   ***************** */
.cl_boxFlexArea { width: 100%; max-width: 1330px; margin: 0 auto; display: flex; justify-content: center; gap: 85px; z-index: 1; }
.cl_boxFlexArea .imgArea { z-index: 1; }
.cl_boxFlexArea .boxArea { position: relative; display: flex; gap: 65px; padding: 160px 80px; box-sizing: border-box; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;background: #fff; }
.cl_boxFlexArea .boxArea .list { text-align: center;     display: flex;flex-direction: column;align-items: center; }
.cl_boxFlexArea .boxArea .list .textArea .mainText { color: #1d1d1d; font-size: 22px; font-family: 'NotoSansM'; margin-bottom: 10px; }
.cl_boxFlexArea .boxArea .list .textArea .subText { color: #1d1d1d; font-size: 18px; font-family: 'NotoSansL'; }

.cl_boxFlexArea .boxArea .topImg { position: absolute; top: -200px; left: -130px; }



/* *************** cl_equipment   ***************** */
.cl_equipment { padding-top: 130px; }
.cl_equipment .solution { width: 100%; max-width: 1330px; margin: 0 auto; margin-top: 100px; padding: 0 20px; box-sizing: border-box; }
.cl_equipment .cl_sectionTitle { background: url("/app/layout/web/images/sub/lifting/lifting1_bg2.png")no-repeat; background-position: right 50px; padding-bottom: 50px; }
.cl_equipment .cl_sectionTitle .mainText { width: 100%; max-width: 1330px; margin: 0 auto; }

/* *************** cl_differentPoint  ***************** */
.cl_differentPoint { background: #f9faf9; padding: 200px 0; box-sizing: border-box; margin-top: -110px; }
.cl_differentPoint.type2 { background: #f5f7f8; margin-top: -50px;}
.cl_differentPoint.type4 { background: #f5f7f8; margin-top: 0px;}
.cl_differentPoint.type5 { background: #fff9f0; margin-top: 0px;}
.cl_differentPoint .centerTitle { text-align: center; font-size: 55px; color: #1d1d1d; font-family: 'NotoSansL'; margin: 175px 0 110px 0; }
.cl_differentPoint .centerTitle .bold { font-family: 'NotoSansB'; }

.cl_differentPoint .cl_gridWrapper.type3 .grid .gridCell { width: calc(100% /4); border-width: 0 10px 10px 0; }


/* *************** cl_bgWrap  ***************** */
.cl_bgWrap { padding: 200px 0; box-sizing: border-box; position: relative; }
.cl_bgWrap.bgUse { padding: 0; }
.cl_bgWrap.bgUse .bgArea { padding: 200px 0 320px 0; box-sizing: border-box; }
.cl_bgWrap .mainText { font-size: 34px; color: #1d1d1d; font-family: 'NotoSansM'; margin-top: 60px; }
.cl_bgWrap .subText { font-size: 21px; color: #1d1d1d; font-family: 'NotoSansR'; margin-top: 60px; }
.cl_bgWrap .imgArea { width: 50%; z-index: 1; }
.cl_bgWrap .imgArea img { width: 100%; }


/* *************** cl_checkPoint  ***************** */
.cl_checkPoint { background: #f9faf9; padding: 200px 0; box-sizing: border-box; }
.cl_checkPoint .flexWrap { gap: 60px; }
.cl_checkPoint .numCircleArea { margin-bottom: 195px; }
.cl_checkPoint .numCircleArea .circle { width: 300px; height: 300px; display: flex; align-items: flex-start; justify-content: center; text-align: center; border: 1px solid #d1778a; border-radius: 50%; background: #fff; }
.cl_checkPoint .numCircleArea .circle .textArea { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cl_checkPoint .numCircleArea .circle .num { font-size: 30px; font-family: 'NotoSansB'; margin-bottom: 30px; }
.cl_checkPoint .numCircleArea .circle .num.pink { color: #d1778a; }
.cl_checkPoint .numCircleArea .circle .subText { font-size: 20px; color: #1d1d1d; font-family: 'NotoSansR'; }

.cl_checkPoint .imgCircleArea img { width: 100%; }



/* *************** cl_gridWrapper  ***************** */
.cl_gridWrapper {overflow:hidden;}
.cl_gridWrapper .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 10px; margin:-10px}
.cl_gridWrapper .grid .gridCell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;box-sizing:border-box;width:calc(100% / 3);border:0 solid transparent;border-width:0 10px 10px 0;}
.cl_gridWrapper .grid .gridCell .imgArea { display: flex; align-items: center; justify-content: center; height: 150px; }
.cl_gridWrapper .grid .gridCell .imgArea img { width: 100%; }
.cl_gridWrapper .grid .gridCell .mainText { font-size: 34px; color: #1d1d1d; font-family: 'NotoSansB'; margin-top: 60px; }
.cl_gridWrapper .grid .gridCell .subText { font-size: 18px; color: #1d1d1d; font-family: 'NotoSansR'; margin-top: 40px; letter-spacing: -0.8px; }


/*type2*/
.cl_gridWrapper.type2 .grid .gridCell { width: calc(100% /4); border-width: 0 40px 10px 0; }
/*type3*/
.cl_gridWrapper.type3 .grid .gridCell { width: calc(100% /4); border-width: 0 10px 10px 0; }
.cl_gridWrapper .circleNum { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; font-size: 20px; color: #ffffff; font-family:'AlbraTRIALR';background-color: #000000; border-radius: 50%; box-sizing: border-box; margin-top: 40px; }

/*typeOval1*/
.cl_gridWrapper.typeOval1 { margin-top: 100px; }
.cl_gridWrapper.typeOval1 .grid .gridCell .imgArea { margin-bottom: 0; height: auto; width: 80%;  }
.cl_gridWrapper.typeOval1 .grid .gridCell .mainText {font-size: 26px;color: #1d1d1d;font-family: 'NotoSansB';margin: 20px 0;}
.cl_gridWrapper.typeOval1 .grid .gridCell .subText {font-size: 18px;color: #1d1d1d;font-family: 'NotoSansR';margin-top: 0px;letter-spacing: -0.8px;}

/*typeStep*/
.cl_gridWrapper.typeStep .grid .gridCell .imgArea { height: auto; }
.cl_gridWrapper.typeStep .grid .gridCell .mainText { font-size: 23px; font-family: 'NotoSansM'; margin-top: 50px; }
.cl_gridWrapper.typeStep .grid .gridCell .subText { font-size: 20px; font-family: 'NotoSansR'; margin-top: 20px; }


/* ***************  텝 페이지 및 텝 버튼   ***************** */
.cl_tabBtnArea { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing: border-box; border-top: 1px solid #000; border-left: 1px solid #000;  background-color: #fff;}
.cl_tabBtnArea .tabBtn {  flex: 1; display: flex; justify-content: center ;align-items: center;  border-bottom: 1px solid #000;border-right: 1px solid #000; padding: 22px 0; box-sizing: border-box; color: #000;font-size: 20px; cursor: pointer; box-sizing: border-box; }
.cl_tabBtnArea.type2 .tabBtn { width: calc(100% / 6); flex: none; }
.cl_tabBtnArea.type4 .tabBtn { width: calc(100% / 5); flex: none; }
.cl_tabBtnArea .flexWrap { display: flex; }
.cl_tabBtnArea .tabBtn:nth-child(1) { }
.cl_tabBtnArea .tabBtn:hover,
/* 기본적으로 첫 버튼에만 class on 추가 */
.cl_tabBtnArea .tabBtn.on { background-color: #000; color: #fff; }


/*type3*/
.cl_tabBtnArea.type3 { border: none;}
.cl_tabBtnArea .linkTabBtn { flex: 1; display: flex; justify-content: center ;align-items: center; font-size: 20px; cursor: pointer; box-sizing: border-box; color: #fff; background: #686868; border: none; padding: 0;}
.cl_tabBtnArea .linkTabBtn a {color: #fff; width: 100%; height: 100%; display: block;text-align: center; padding: 22px 0;}


.cl_tabBtnArea .linkTabBtn:hover,
.cl_tabBtnArea .linkTabBtn.on { background-color: #2f7e85; color: #fff; }
.cl_tabBtnArea.type2 .tabBtn.type2 { border-top: 0; }
/*.cl_tabBtnArea.type2 .tabBtn.type2:nth-last-child(1) { border-right: 1px solid #000; }*/

/* 기본적으로 숨김 처리 첫 페이지에만 class on 추가 */

.cl_tabPage { padding: 150px 0; box-sizing: border-box; }
.cl_tabPage .tabPage { display: none; }
.cl_tabPage .tabPage.on { display: block;}
.cl_tabPage .topArea { display: flex; justify-content: space-between; align-items: center; margin-bottom: 130px; }
.cl_tabPage .topArea .imgArea { width: 50%; }
/*.cl_tabPage .leftArea {  margin-top: 8vh; }*/

.cl_tabPage.type3 { padding: 150px 0 0 0; }


/* *************** 서브 텝 페이지 및 서브 탭 버튼   ***************** */
.cl_subTabBtnArea { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing: border-box;background-color: #e7e7e7;}
.cl_subTabBtnArea .subTabBtn { font-family: 'PretendardB'; flex: 1; display: flex; justify-content: center ;align-items: center;  padding: 22px 0; box-sizing: border-box; color: #000;font-size: 28px; cursor: pointer; box-sizing: border-box; }
.cl_subTabBtnArea .subTabBtn:hover,
.cl_subTabBtnArea .subTabBtn.on { background-color: #000; color: #fff; }


.cl_subTabPage { padding: 150px 0; box-sizing: border-box; }
.cl_subTabPage .subTabPage { display: none; }
.cl_subTabPage .subTabPage.on { display: block;}


/*.cl_tabPage.type2 .leftArea { width: 100%; }*/
/* ***************  cl_archArea   ***************** */
.cl_archArea { gap: 170px; align-items: center; }
.cl_archArea .imgArea { position: relative; }
.cl_archArea .imgArea .centerImg { position: absolute; top: 0; right: -150px;}
.cl_archArea .textArea { width: 50%; }
.cl_archArea .textArea .mainText { font-size: 34px; font-family: 'NotoSansM'; margin-bottom: 70px; }
.cl_archArea .textArea .mainText .bold { font-family: 'NotoSansB'; }
.cl_archArea .textArea .listText { width: 100%; }
.cl_archArea .textArea .listText .list { display: flex; align-items: center; margin-bottom: 45px; }
.cl_archArea .textArea .listText .list:nth-last-child(1) { margin-bottom: 0; }
.cl_archArea .textArea .listText .left { width: 250px; font-size: 26px; font-family: 'NotoSansB'; letter-spacing: -0.8px; }
.cl_archArea .textArea .listText .right { position: relative; flex: 1; font-size: 18px; font-family: 'NotoSansR'; padding-left: 10px; }
.cl_archArea .textArea .listText .right:before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); width: 1px; height: 69px; background: #000000; }
.cl_archArea .textArea .listText .plusButton { font-size: 48px; color: #c2d0db; font-family: 'NotoSansB'; margin-left: -50px; }

.cl_archArea.type2 .listText .list { width: 100%; flex-direction: column; align-items: flex-start; gap: 20px; }
.cl_archArea.type2 .textArea .listText .left { width: 100%; }
.cl_archArea.type2 .textArea .listText .right { padding-left: 0; }
.cl_archArea.type2 .textArea .listText .right:before { display: none; }

.cl_archArea.type3 .textArea .listText .list { flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; }
.cl_archArea.type3 .textArea .listText .right:before { display: none; }
.cl_archArea.type3 .textArea .listText .right { padding-left: 0; }
.cl_archArea.type3 .textArea .listText .left { position: relative; }
.cl_archArea.type3 .textArea .listText .left:before { content: ''; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: #000000; }


/* ***************  cl_productDescribe   ***************** */
.cl_productDescribe { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cl_productDescribe.center { align-items: center; }
.cl_productDescribe.flexEnd { align-items: flex-end; }
.cl_productDescribe .textArea { width: 60%; }
.cl_productDescribe .imgArea { flex: 1; display: flex; justify-content: center; }

.cl_productDescribe.type2 { justify-content: center; }
.cl_productDescribe.type2 .textArea { width: 50%; display: flex; flex-direction: column; align-items: flex-end; }
.cl_productDescribe.type2 .textArea .maxContent { width: 100%; max-width: 665px; }
.cl_productDescribe.type2 .imgArea { width: 50%; padding-left: 10vw; box-sizing: border-box; }

.cl_productDescribe.type2 .cl_sectionTitle { margin-bottom: 0; }


/* ***************  cl_hashArea   ***************** */
.cl_hashArea { margin-top: 120px; margin-bottom: 160px; }
.cl_hashArea .imgArea { display: flex; align-items: center; justify-content: center; }
.hashWrap { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: -120px; }
.hashWrap.type2 { margin-top: 35px; justify-content: flex-start; }
.hashWrap.type3 { margin-top: 80px; justify-content: center; }
.cl_hash { display: inline-block; font-size: 21px; color: #1d1d1d; font-family: 'NotoSansR'; border: 1px solid #777777; border-radius: 50px; padding: 15px 35px; box-sizing: border-box; background: #fff; }


/* ***************  cl_benefit   ***************** */
.cl_benefit { padding-top: 200px; }
.cl_benefit .benefitArea { display: flex; justify-content: center; background: linear-gradient(to bottom, transparent, transparent 17%, #f9faf9 17%, #f9faf9 100%); padding-bottom: 80px; }
.cl_benefit .benefitArea .maxContent { width: 100%; max-width: 665px; }
.cl_benefit .benefitArea .textArea { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; width: 50%; }
.cl_benefit .benefitArea .imgArea { width: 50%; padding-left: 10vw; box-sizing: border-box; }
.cl_benefit .benefitArea .imgArea img { width: 100%; vertical-align: top; }

.cl_benefit .benefitArea .cl_tabSubTitle { padding-top: 130px; }

.cl_benefit.type2 { background: #f9faf9; padding-top: 0; margin-top: 100px; }
.cl_benefit.type2 .benefitArea { justify-content: space-between; width: 100%; max-width: 1330px; margin: 0 auto; background: none; }
.cl_benefit.type2 .benefitArea .textArea { align-items: flex-start; }
.cl_benefit.type2 .benefitArea .cl_tabSubTitle { padding-top: 70px; }
.cl_benefit.type2 .benefitArea .cl_tabSubTitle .mainText { margin-bottom: 0; }
.cl_benefit.type2 .benefitArea .imgArea { padding-left: 0; margin-top: -20vh; }
.cl_benefit.type2.center { margin-top: 0; }
.cl_benefit.type2.center .benefitArea { gap: 150px;  padding: 80px 0;}


/* ***************  cl_centerImg   ***************** */
.cl_centerImg .checkCircleWrap { display: flex; flex-direction: column; gap: 40px; z-index: 1; }
.cl_centerImg .checkCircleWrap.leftArea { margin-right: -50px; }
.cl_centerImg .checkCircleWrap.rightArea { margin-left: -50px; }
.cl_centerImg .checkCircle { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 306px; height: 306px; background: #f1f6fe; border-radius: 50%; }
.cl_centerImg .checkCircle .checkIcon { margin-bottom: 30px; }
.cl_centerImg .checkCircle .textArea { font-size: 23px; color: #1d1d1d; font-family: 'NotoSansL'; }
.cl_centerImg .checkCircle .textArea .bold { font-family: 'NotoSansR'; }

.cl_centerImg .checkSquareWrap { display: flex; flex-direction: column; justify-content: center; gap: 90px; z-index: 1; }
.cl_centerImg .checkSquareWrap.leftArea { margin-left: 50px; }
.cl_centerImg .checkSquareWrap.rightArea { margin-right: 50px; }
.cl_centerImg .checkSquare { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;width: 287px; height: 170px;padding: 10px; box-sizing: border-box; background: #f5f5f5; border-radius: 17px; }
.cl_centerImg .checkSquare .checkIcon { margin-bottom: 20px; }
.cl_centerImg .checkSquare .textArea { font-size: 21px; color: #1d1d1d; font-family: 'NotoSansR'; letter-spacing: -0.8px; }

.cl_centerImg.type2 .flexWrap { gap: 100px; }
.cl_centerImg .squareWrap { display: flex; flex-direction: column; justify-content: center; gap: 90px; z-index: 1; }
.cl_centerImg .squareWrap.leftArea { margin-left: 50px; }
.cl_centerImg .squareWrap.rightArea { margin-right: 50px; }
.cl_centerImg .square { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;width: 258px; height: 120px; border: 2px solid #abb7d1; border-radius: 33px; box-sizing: border-box; }
.cl_centerImg .square .textArea { font-size: 21px; color: #1d1d1d; font-family: 'NotoSansR'; letter-spacing: -0.8px; }


.cl_centerImg .checkHashWrap { display: flex; flex-direction: column; justify-content: center; gap: 30px; z-index: 1; }
.cl_centerImg .checkHashWrap .hash{ display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20px; width: 180px; height: 40px;background: #a1b3c6; border: 10px solid #c5d0db; border-radius: 50px; color: #fff; }
.cl_centerImg .checkHashWrap.leftArea { margin-left: 50px; }
.cl_centerImg .checkHashWrap.rightArea { margin-right: 50px; }

.cl_centerImg .hashCheck { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 190px; }
.cl_centerImg .hashCheck .mainText { font-size: 26px; font-family: 'NotoSansB'; }
.cl_centerImg .hashCheck .mainText.blue { color: #134c72; }
.cl_centerImg .hashCheck .cl_hash { width: 100%; padding: 15px; text-align: center; }


/* ***************  cl_circleArea   ***************** */
.cl_circleArea { display: flex; align-items: center; justify-content: center; gap: 40px; }
.cl_circleArea .flexWrap { gap: 40px; }
.cl_circleArea .circle { display: flex; align-items: center; justify-content: center; width: 205px; height: 205px; font-size: 24px; text-align: center; color: #ffffff; font-family: 'NotoSansM';background: #7b97c0; border-radius: 50%; box-sizing: border-box; }

.cl_circleArea.typeLine { gap: 20px; }
.cl_circleArea.typeLine .flexWrap { gap: 20px; }
.cl_circleArea.typeLine .circle { width: 250px; height: 250px; background: #fff; color: #1d1d1d; font-size: 20px; font-family: 'NotoSansR'; border: 1px solid #5f5d76; }
.cl_circleArea.typeLine.purple .circle { border: 1px solid #7326a4; }


/* ***************  페이지네이션   ***************** */

.cl_pagination { display: flex; justify-content: center; align-items: center; margin-top: 50px;}
.cl_pagination span { display: inline-flex; justify-content: center; align-items: center; ; width: 50px; height: 50px; font-size: 25px; color: #1e1e1e ; cursor: pointer;}
.cl_pagination span.on { color: #fff; background-color: #737373; border-radius: 100%; }
.cl_pagination span.on a{ color: #fff;}
.cl_pagination span:last-child { margin-right: 0;}


/* ***************  이유리스트   ***************** */
.cl_reasonStep .reason { display: flex; align-items: center; margin-bottom: 145px; }
.cl_reasonStep .reason:nth-last-child(1) { margin-bottom: 0; }
.cl_reasonStep .reason .textArea { flex: 1; position: relative; padding: 20px; box-sizing: border-box; }
.cl_reasonStep .reason .textArea:before { position: absolute; top: 50%; right: -20px; transform: translateY(-50%); content: ''; width: 20px; height: 100%; background-color: #3e3e3e; border-radius: 10px; }
.cl_reasonStep .reason .textArea .num { font-size: 36px; font-family: 'NotoSansB'; border-bottom: 1px solid #898989; padding-bottom: 20px; margin-bottom: 20px; box-sizing: border-box; }
.cl_reasonStep .reason .textArea .mainText { font-size: 34px; font-family: 'NotoSansB'; margin-bottom: 20px; }
.cl_reasonStep .reason .textArea .subText { font-size: 24px; font-family: 'NotoSansR'; }
.cl_reasonStep .reason .textArea .subText .bold { font-family: 'NotoSansB'; }

.cl_reasonStep.green .textArea:before { background-color: #68c5ad; }



/* ***************  그리드박스 사용하는 곳   ***************** */
.cl_useGridBox { background-color: #f9faf9; }
.cl_useGridBox .cl_sectionTitle .subText.bold { margin-bottom: 0; }
.cl_useGridBox .cl_sectionTitle .subText { font-size: 30px; }
.cl_useGridBox .textArea { text-align: center; }
.cl_useGridBox .cl_gridWrapper .grid .gridCell .imgArea { height: auto; }
.cl_useGridBox .gridBox { background-color: #fff; padding: 70px 20px; box-sizing: border-box; border: 1px solid #4e4e4e; }
.cl_useGridBox .cl_gridWrapper.type2 .grid .gridCell { border-width: 0 10px 10px 0; }
.cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .mainText { font-size: 21px; margin-top: 30px; }
.cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .imgArea img { width: auto; }
.cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .slash { margin-top: 20px; }
.cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .subText { font-size: 20px; margin-top: 20px; }
.cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .point { font-size: 21px; color: #fff; font-family: 'NotoSansB';border: 1px solid #4e4e4e; background-color: #9c9c9c; padding: 8px 30px; box-sizing: border-box; border-radius: 30px; margin-bottom: 30px; }
.cl_useGridBox .gridBox .flexWrap { gap: 40px; }
.cl_useGridBox .gridBox .subText { font-size: 30px; font-family: 'NotoSansR'; text-align: center; margin-top: 40px; }
.cl_useGridBox .gridBox .subText .bold { font-family: 'NotoSansM'; }

.cl_useGridBox .gridBox .textList .list { display: flex; align-items: center; gap: 10px; margin-bottom: 50px; }
.cl_useGridBox .gridBox .textList .list:nth-last-child(1) { margin-bottom: 0; }
.cl_useGridBox .gridBox .textList .list .listText { width: 200px; background-color: #000000; color: #fff; font-size: 29px;display: flex; align-items: center; justify-content: center; font-family: 'NotoSansB'; border-radius: 30px; padding: 5px 0; box-sizing: border-box; }
.cl_useGridBox .gridBox .textList .list .subText { font-size: 24px; font-family: 'NotoSansB'; margin-top: 0; }


/* ***************  키포인트 단락   ***************** */
.cl_keyPointsArea {padding: 130px 0 !important;}
.cl_keyPointsArea.gray {background: #f9faf9;}
.cl_keyPointsArea.sky {background: #eef7f6;}
.cl_keyPointsArea.pink {background: #fff5f5;}
.cl_keyPointsArea.org {background: #fff9f1;}


/*키포인트 타이틀*/
.cl_keyPointTitle {text-align: center; margin-bottom: 60px;}
.cl_keyPointTitle .keyPointTop {font-family: "AlbraSansTRIAL-R"; color: #aeaeae; font-size: 35px; margin-bottom: 60px;}
.cl_keyPointTitle .keyPointBot {font-size: 40px; line-height: 1.5; letter-spacing: -1px;}
.cl_keyPointTitle .keyPointBot .bold {font-family: 'NotoSansB';}
.cl_keyPointTitle .keyPointBot .blue {color: #00bfc2;}


@media (max-width: 1500px){
    /* ***************  페이지타이틀   ***************** */
    .cl_pageTitle .infoArea { gap: 40px; margin-bottom: 20px; }


    /* *************** cl_boxFlexArea   ***************** */
    .cl_boxFlexArea { gap: 40px; z-index: 1; padding: 0 20px; box-sizing: border-box; }
    .cl_boxFlexArea .boxArea .topImg { left: 0; }

    /* *************** cl_equipment   ***************** */
    .cl_equipment .cl_sectionTitle .mainText { padding-left: 20px; box-sizing: border-box; }


    /* ***************  cl_centerImg   ***************** */
    .cl_centerImg .checkCircleWrap.leftArea { margin-right: -100px; }
    .cl_centerImg .checkCircleWrap.rightArea { margin-left: -100px; }

    .cl_centerImg .checkSquareWrap.leftArea { margin-right: -100px; }
    .cl_centerImg .checkSquareWrap.rightArea { margin-left: -100px; }

    /* ***************  subMainVisual   ***************** */
    .cl_subMainVisual .textWrap {margin-left: 38%;}
}


@media (max-width: 1330px){

    /* ***************  페이지 타이틀   ***************** */

    /*메인 타이틀*/
    .cl_mainTitle .title { font-size: 64px; }
    .cl_subTitle .title { font-size: 71px; }


    /* ***************  subVisual   ***************** */
    .cl_subVisual { height: 1080px;  }
    .cl_subVisual .textWrap {  margin-left: -20vw; }
    .cl_subVisual .mainText { font-size: 70px; }
    .cl_subVisual .subText { font-size: 28px; }

    /* ***************  subMainVisual   ***************** */
    .cl_subMainVisual {padding: 20px; box-sizing: border-box;}

    /* ***************  페이지타이틀   ***************** */
    .cl_pageTitle { padding-top: 100px; }
    .cl_pageTitle .mainText { font-size: 42px; padding-bottom: 25px; margin-bottom: 50px;  }
    .cl_pageTitle .subText { font-size: 16px; }
    .cl_pageTitle.titleList { margin-bottom: 80px; }
    .cl_pageTitle .infoArea { gap: 40px;}
    .cl_pageTitle .flexWrap { flex-direction: column; }
    .cl_pageTitle .infoArea .listArea li { font-size: 18px; }

    /* ***************  섹션타이틀   ***************** */
    .cl_sectionTitle .mainText { font-size: 62px; line-height: 70px;  }
    .cl_sectionTitle.large .mainText { font-size: 70px; line-height: 80px; }
    .cl_sectionTitle .subText.bold { font-size: 28px;  margin-bottom: 20px; }
    .cl_sectionTitle .subText { font-size: 18px; margin-top: 40px; }


    /* ***************  탭타이틀   ***************** */
    .cl_tabTitle .subText.bold { font-size: 30px; margin-bottom: 25px; }
    .cl_tabTitle .subText { font-size: 18px; }
    .cl_tabTitle .subText.small { font-size: 16px; }


    /* ***************  탭서브타이틀   ***************** */
    /*.cl_tabSubTitle { padding: 0 20px; box-sizing: border-box; }*/
    .cl_tabSubTitle .mainText { font-size: 50px; margin-bottom: 80px; }
    .cl_tabSubTitle .subText.bold { font-size: 22px; }
    .cl_tabSubTitle .subText { font-size: 16px; }

    .cl_tabSubTitle .checkList li { font-size: 20px; }

    /* ***************  mainColorTitle   ***************** */
    .cl_mainColorTitle { font-size: 110px; font-family:'AlbraTRIALR'; margin-bottom: 40px; line-height: 120px; }
    .cl_mainColorTitle.big { font-size: 130px; margin-bottom: 50px; }
    .cl_mainColorTitle.small { font-size: 90px; margin-bottom: 0px; line-height: 100px; }
    .cl_mainColorTitle.type2 { margin-bottom: 70px; }


    /* ***************  cl_imgFlexArea   ***************** */
    .cl_imgFlexArea { padding-top: 150px; }
    .cl_imgFlexArea.type2 .imgArea { margin-top: -30vh; }
    .cl_imgFlexArea.type2 .imgArea img { width: 50%; }


    /* *************** cl_boxFlexArea   ***************** */
    .cl_boxFlexArea .boxArea { gap: 30px; padding: 100px 40px; }
    .cl_boxFlexArea .boxArea .topImg { top: -150px; }
    .cl_boxFlexArea .boxArea .topImg img { width: 360px; }


    /* *************** cl_beforeAfter   ***************** */
    .cl_beforeAfter { padding: 150px 0; }
    .cl_beforeAfter .textArea .mainText { font-size: 70px; }
    .cl_beforeAfter .textArea .subText { font-size: 20px; }
    .cl_beforeAfter .grid .gridCell { border-width:0 20px 10px 0;}
    .cl_beforeAfter .grid .gridCell .textArea { font-size: 22px; }

    .cl_beforeAfter.type2 .textArea .mainText { font-size: 60px; margin-bottom: 150px; }
    .cl_beforeAfter.type2 .flexBox .leftArea { font-size: 38px; }
    .cl_beforeAfter.type2 .flexBox .rightArea { font-size: 38px; }
    .cl_beforeAfter.type2 .flexBox .info { font-size: 30px; width: 130px; height: 130px; top: -20px; left: 0; }

    /* ***************  cl_differentPoint   ***************** */
    /*.cl_differentPoint { background: #f9faf9 url("/app/layout/web/images/sub/collagen_bg_M.png")no-repeat; background-position: right 0px; padding-top: 200px; box-sizing: border-box; margin-top: -110px; }*/
    .cl_differentPoint { padding: 150px 0; }
    .cl_differentPoint .centerTitle { font-size: 42px; margin: 125px 0 80px 0; }


    /* ***************  cl_bgWrap   ***************** */
    .cl_bgWrap { padding: 150px 0; }
    .cl_bgWrap.bgUse .bgArea { padding: 150px 0 270px 0; }
    .cl_bgWrap .mainText { font-size: 30px; }
    .cl_bgWrap .subText { margin-top: 30px; }


    /* *************** cl_checkPoint  ***************** */
    .cl_checkPoint { padding: 150px 0; }
    .cl_checkPoint .flexWrap { gap: 40px; }
    .cl_checkPoint .numCircleArea { margin-bottom: 150px; }
    .cl_checkPoint .numCircleArea .circle { width: 250px; height: 250px; }
    .cl_checkPoint .numCircleArea .circle .num { font-size: 26px; margin-bottom: 30px; }
    .cl_checkPoint .numCircleArea .circle .subText { font-size: 18px;}


    /* *************** cl_gridWrapper  ***************** */
    .cl_gridWrapper .grid .gridCell { width:calc(100% / 3); border-width:0 10px 10px 0;}
    .cl_gridWrapper .grid .gridCell .mainText { font-size: 28px; margin-top: 40px; }
    .cl_gridWrapper .grid .gridCell .subText { font-size: 14px; margin-top: 30px; }

    .cl_gridWrapper.type3 .grid .gridCell .subText { margin-top: 0; }
    .cl_gridWrapper.type2 .grid .gridCell { width: calc(100% /4); border-width: 0 20px 10px 0; }

    /*typeOval1*/
    .cl_gridWrapper.typeOval1 .grid .gridCell .imgArea { width: 100%; }
    .cl_gridWrapper.typeOval1 .grid .gridCell .mainText { font-size: 22px; }

    /*typeStep*/
    .cl_gridWrapper.typeStep .grid .gridCell .mainText { font-size: 20px; margin-top: 30px; }
    .cl_gridWrapper.typeStep .grid .gridCell .subText { font-size: 18px; margin-top: 10px; }

    /* ***************  텝 페이지 및 텝 버튼   ***************** */
    .cl_tabPage { padding: 130px 20px; }
    .cl_tabPage.type3 { padding: 130px 0 0 0; }

    /*.cl_tabPage.type2 .leftArea { width: 60%; }*/
    /*.cl_tabPage.type2 .topArea .imgArea { right: 20px; }*/
    /*.cl_tabPage.type2 .topArea .imgArea img { width: 250px; }*/

    /* ***************  cl_benefit   ***************** */
    .cl_benefit { padding-top: 150px; }
    .cl_benefit .benefitArea .imgArea { padding-left: 2vw; }
    .cl_benefit .cl_sectionTitle { padding: 0 20px; box-sizing: border-box; }
    .cl_benefit .benefitArea .cl_tabSubTitle { padding: 100px 20px 0 20px; box-sizing: border-box; }
    .cl_benefit.type2.center .benefitArea { gap: 50px; }

    /* ***************  cl_archArea   ***************** */
    .cl_archArea { gap: 130px; }
    .cl_archArea .imgArea img { width: 100%; }
    .cl_archArea .imgArea .centerImg { right: -200px; }
    .cl_archArea .imgArea .centerImg img { width: 80%; }
    .cl_archArea .textArea .mainText { font-size: 28px; }
    .cl_archArea .textArea .listText .left { font-size: 22px; width: 210px; }
    .cl_archArea .textArea .listText .right { font-size: 16px; }


    /* ***************  cl_productDescribe   ***************** */
    .cl_productDescribe .imgArea img { width: 100%; }

    .cl_productDescribe.type2 { padding: 0 0 0 20px; box-sizing: border-box; }
    .cl_productDescribe.type2 .imgArea { padding-left: 2vh; }

    /* ***************  cl_hashArea   ***************** */
    .cl_hashArea { margin-bottom: 120px; }
    .hashWrap { margin-top: -100px; }
    .hashWrap.type3 { margin-top: 70px; }
    .cl_hash { font-size: 17px; padding: 12px 20px; }


    /* ***************  cl_centerImg   ***************** */
    .cl_centerImg .checkCircleWrap { gap: 20px; }
    .cl_centerImg .checkCircleWrap.leftArea { margin-right: -140px; }
    .cl_centerImg .checkCircleWrap.rightArea { margin-left: -140px; }
    .cl_centerImg .checkCircle { width: 260px; height: 260px; }
    .cl_centerImg .checkCircle .checkIcon { margin-bottom: 20px; }
    .cl_centerImg .checkCircle .textArea { font-size: 20px; }

    .cl_centerImg .checkSquareWrap { gap: 20px; }
    .cl_centerImg .checkSquareWrap.leftArea { margin-right: -150px; }
    .cl_centerImg .checkSquareWrap.rightArea { margin-left: -150px; }
    .cl_centerImg .checkSquare { width: 260px; height: 160px; }
    .cl_centerImg .checkSquare .checkIcon { margin-bottom: 20px; }
    .cl_centerImg .checkSquare .textArea { font-size: 18px; }

    .cl_centerImg.type2 .flexWrap { gap: 40px; }
    .cl_centerImg .squareWrap { gap: 50px; }
    .cl_centerImg .square { width: 220px; height: 100px; }
    .cl_centerImg .square .textArea { font-size: 18px; }

    .cl_centerImg .checkHashWrap .imgArea img { width: 100%; }
    .cl_centerImg .checkHashWrap.leftArea { margin-right: -140px; }
    .cl_centerImg .checkHashWrap.rightArea { margin-left: -140px; }

    .cl_centerImg .hashCheck .mainText { font-size: 22px; }

    /* ***************  cl_circleArea   ***************** */
    .cl_circleArea .circle { width: 180px; height: 180px; font-size: 22px; }
    .cl_circleArea.typeLine .circle { width: 220px; height: 220px; }

    /* ***************  이유리스트   ***************** */
    .cl_reasonStep .reason { margin-bottom: 100px; }
    .cl_reasonStep .reason .textArea .num { font-size: 32px; }
    .cl_reasonStep .reason .textArea .mainText { font-size: 30px; }
    .cl_reasonStep .reason .textArea .subText { font-size: 22px; }


    /* ***************  그리드박스 사용하는 곳   ***************** */
    .cl_useGridBox .cl_sectionTitle .subText { margin-top: 0; font-size: 26px; }
    .cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .mainText { font-size: 18px; }
    .cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .subText { font-size: 16px; }
    .cl_useGridBox .gridBox .flexWrap .before img { width: 100%; }
    .cl_useGridBox .gridBox .flexWrap .after img { width: 100%; }
    .cl_useGridBox .gridBox .subText { font-size: 26px; }
    .cl_useGridBox .gridBox .textList .list .listText { font-size: 24px; width: 170px; }
    .cl_useGridBox .gridBox .textList .list .subText { flex: 1; font-size: 20px; }
    .cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .point { padding: 5px 25px; font-size: 18px; }
}

@media (max-width: 1024px) {
    /* ***************  텝 페이지 및 텝 버튼   ***************** */
    .cl_tabBtnArea .tabBtn { width: calc(100% / 2) !important; flex: none; }
    .cl_tabBtnArea .tabBtn { padding: 15px 0; font-size: 16px; }

    /*type3*/
    .cl_tabBtnArea .linkTabBtn { width: calc(100% / 3) !important; flex: none;}
    .cl_tabBtnArea.type3 .tabBtn a { padding: 15px 0;}
    

    /* ***************  서브 텝 페이지 및 서브 탭 버튼   ***************** */
    .cl_subTabBtnArea .subTabBtn { width: calc(100% / 2) !important; flex: none; font-size: 16px; padding: 15px 0;}

    .cl_subTabPage { padding: 70px 0; }


    /* ***************  subVisual   ***************** */
    /*.cl_subVisual { height: 1080px;  }*/
    .cl_subVisual .textWrap {  margin-left: -10vw; }
    .cl_subVisual .mainText { font-size: 60px; }
    .cl_subVisual .textWrap.left { text-align: left; margin-left: -15vw; }
    .cl_subVisual .subText { font-size: 24px; }

    /* ***************  subMainVisual   ***************** */
    .cl_subMainVisual .cl_subMainVisualInner {height: 100%; background-image: none !important;}
    .cl_subMainVisual .imgWrap {display: block; margin-bottom: 30px;}
    .cl_subMainVisual .imgWrap img {width: 100%;}
    .cl_subMainVisual .textWrap {text-align: center;position: relative;top: auto;left: auto;right: auto; transform: none; align-items: center; margin-left: 0; margin-bottom: 50px;}
    .cl_subMainVisual .tit {font-size: 30px;}
    .cl_subMainVisual .txt {font-size: 15px;}
    .cl_subMainVisual .cl_pageTitle {position: relative; bottom: auto; left: auto;}
    .cl_subMainVisual .cl_pageTitle .subText{text-align: left;}
    .cl_subMainVisual.white .tit {color: #000;}
    .cl_subMainVisual.white .txt {color: #000;}


    /* ***************  페이지타이틀   ***************** */
    .cl_pageTitle { padding-top: 70px; }
    .cl_pageTitle .mainText { font-size: 36px; padding-bottom: 20px;  margin-bottom: 40px; }
    .cl_pageTitle .subText { font-size: 14px; }
    .cl_pageTitle .flexWrap { margin-bottom: 40px; }
    .cl_pageTitle .infoArea { width: 100%; flex-direction: column; border-bottom: 1px solid #000; padding-bottom: 10px; gap: 20px; margin-bottom: 20px; }
    .cl_pageTitle .infoArea .listArea { border-bottom: 1px solid #e5e5e5; padding-bottom: 30px; }
    .cl_pageTitle .infoArea .listArea:nth-last-child(1) { border-bottom: 0; }


    /* ***************  섹션타이틀   ***************** */
    .cl_sectionTitle { padding-right: 20px; box-sizing: border-box; margin-bottom: 60px; }
    .cl_sectionTitle .mainText { font-size: 46px; line-height: 50px; margin-bottom: 40px; }
    .cl_sectionTitle.large .mainText { font-size: 50px; line-height: 60px; }
    .cl_sectionTitle .subText.bold { font-size: 20px;  margin-bottom: 10px; }
    .cl_sectionTitle .subText { font-size: 16px; margin-top: 20px; }

    /* ***************  탭서브타이틀   ***************** */
    .cl_tabSubTitle .mainText { font-size: 36px; margin-bottom: 30px; }
    .cl_tabSubTitle .subText.bold { font-size: 20px; }
    .cl_tabSubTitle .subText { font-size: 16px; }

    .cl_tabSubTitle .checkList { padding-left:50px; }
    .cl_tabSubTitle .checkList li { font-size: 18px; }
    .cl_tabSubTitle .checkList li:before { background-size: 35px 30px !important; width: 35px !important; height: 30px !important; left: -50px !important; }


    /* ***************  cl_mainColorTitle   ***************** */
    .cl_mainColorTitle { font-size: 110px; font-family:'AlbraTRIALR'; margin-bottom: 40px; }
    .cl_mainColorTitle.big { font-size: 110px; line-height: 110px; margin-bottom: 50px; }
    .cl_mainColorTitle.type2 { margin-bottom: 50px; }


    /* *************** cl_differentPoint   ***************** */
    .cl_differentPoint { padding: 100px 0; }
    .cl_differentPoint { margin-top: -70px; }
    .cl_differentPoint .centerTitle { font-size: 30px; margin: 50px 0; }
    .cl_differentPoint .cl_gridWrapper.type3 .grid .gridCell { width: calc(100% /2); border-width: 0 10px 10px 0; }
    .cl_differentPoint .cl_gridWrapper.type3 .grid .gridCell .imgArea { width: auto; }


    /* *************** cl_bgWrap   ***************** */
    .cl_bgWrap { padding: 100px 0; }
    .cl_bgWrap.bgUse .bgArea { padding: 100px 0 220px 0; }
    .cl_bgWrap .mainText { font-size: 24px; }
    .cl_bgWrap .subText { font-size: 18px; }


    /* *************** cl_introFlexArea   ***************** */
    .cl_introFlexArea .imgArea img { width: 100%; }


    /* *************** cl_beforeAfter   ***************** */
    .cl_beforeAfter { padding: 100px 0; }
    .cl_beforeAfter .textArea .mainText { font-size: 50px; }

    .cl_beforeAfter.type2 .textArea .mainText { font-size: 50px; margin-bottom: 100px; }
    .cl_beforeAfter.type2 .flexBox .leftArea { font-size: 30px; }
    .cl_beforeAfter.type2 .flexBox .rightArea { font-size: 30px; }
    .cl_beforeAfter.type2 .flexBox .info { font-size: 22px; width: 100px; height: 100px; }


    /* *************** cl_checkPoint   ***************** */
    .cl_checkPoint { padding: 100px 0; }
    .cl_checkPoint .numCircleArea { flex-direction: column; margin-bottom: 100px; gap: 20px; }
    .cl_checkPoint .numCircleArea .circle { width: 200px; height: 200px; }
    .cl_checkPoint .numCircleArea .circle .num { font-size: 20px; margin-bottom: 20px; }
    .cl_checkPoint .numCircleArea .circle .subText { font-size: 16px; }

    /* *************** imgFlexArea   ***************** */
    .cl_imgFlexArea { flex-direction: column-reverse; padding-top: 100px; }
    .cl_imgFlexArea .imgArea { width: 80%; margin-top: 5vh; }
    .cl_imgFlexArea .cl_sectionTitle { padding: 0 20px; box-sizing: border-box; }


    /* *************** cl_archArea   ***************** */
    .cl_archArea { gap: 30px; flex-direction: column; }
    .cl_archArea .imgArea .centerImg { top: auto; bottom: -30px; right: -100px; }
    .cl_archArea .textArea { width: 100%; }
    .cl_archArea .textArea .mainText { font-size: 22px; margin-bottom: 50px; }
    .cl_archArea .textArea .listText .left { font-size: 20px; }
    .cl_archArea .textArea .listText .right { font-size: 14px; }
    .cl_archArea .textArea .listText .plusButton { font-size: 32px; margin-left: 0px; }

    .cl_archArea.type3 .textArea .listText .list { padding-left: 50px; }


    /* ***************  cl_productDescribe   ***************** */
    .cl_productDescribe.type2 .imgArea { padding-left: 0; }


    /* *************** cl_boxFlexArea   ***************** */
    .cl_boxFlexArea .boxArea { gap: 20px; padding: 60px 15px; }
    .cl_boxFlexArea .boxArea .topImg { top: -90px; }
    .cl_boxFlexArea .boxArea .topImg img { width: 250px; }

    .cl_boxFlexArea .boxArea .list .textArea .mainText { font-size: 20px; }
    .cl_boxFlexArea .boxArea .list .textArea .subText { font-size: 15px; letter-spacing: -0.8px; }


    /* *************** cl_equipment   ***************** */
    .cl_equipment .cl_sectionTitle {  padding-bottom: 80px; background-size: contain; }


    /* *************** cl_gridWrapper  ***************** */
    .cl_gridWrapper .grid .gridCell { flex-direction: row; justify-content: center; width: 100%;}
    .cl_gridWrapper .grid .gridCell .imgArea { width: 15%;}
    .cl_gridWrapper.type3 .grid .gridCell .imgArea { width: 100%; }
    .cl_gridWrapper .grid .gridCell .textArea { flex: 1; }


    .cl_gridWrapper.type2 .grid .gridCell { flex-direction: column; }
    .cl_gridWrapper.type3 .grid .gridCell { flex-direction: column; }
    .cl_gridWrapper.type3 .grid .gridCell .mainText { font-size: 20px; }

    .cl_gridWrapper.type2 .grid .gridCell { width: calc(100% /2); border-width: 0 10px 10px 0; gap: 0; }
    .cl_gridWrapper.type3 .grid .gridCell { width: calc(100% /2); border-width: 0 10px 10px 0; gap: 0; }


    /*typeOval1*/
    .cl_gridWrapper.typeOval1 { margin-top: 70px; }
    .cl_gridWrapper.typeOval1 .grid .gridCell .mainText { font-size: 20px; margin: 15px 0; }
    .cl_gridWrapper.typeOval1 .grid .gridCell .subText { font-size: 16px; }


    /*typeStep*/
    .cl_gridWrapper.typeStep .grid .gridCell .imgArea { width: 90%; }
        /*.cl_gridWrapper .grid .gridCell .mainText { font-size: 28px; margin-top: 40px; }*/
    /*.cl_gridWrapper .grid .gridCell .subText { font-size: 14px; margin-top: 30px; }*/


    /* ***************  텝 페이지 및 텝 버튼   ***************** */
    .cl_tabPage { position: relative; padding: 70px 0; }

    /*.cl_tabPage .leftArea { padding-left: 20px; box-sizing: border-box; margin-top: 0vh; }*/

    .cl_tabPage .cl_imgFlexArea.between { flex-direction: column-reverse; }

    .cl_tabPage.type2 { padding: 80px 20px; box-sizing: border-box; }
    .cl_tabPage.type2 .leftArea { padding-left: 0; }
    .cl_tabPage.type2 .topArea .imgArea { flex: 1; position: static; }
    .cl_tabPage.type2 .topArea .imgArea img { width: 80%; }

    .cl_tabPage.type3 { padding: 70px 0 0 0; }


    /* ***************  cl_benefit   ***************** */
    .cl_benefit { padding-top: 100px; }
    .cl_benefit.type2 { margin-top: 50px; }
    .cl_benefit .benefitArea { flex-direction: column; background: linear-gradient(to bottom, transparent, transparent 10%, #f9faf9 10%, #f9faf9 100%); }
    .cl_benefit .benefitArea .textArea { width: 100%; align-items: flex-start; }
    .cl_benefit .benefitArea .imgArea { width: 100%; }
    .cl_benefit.type2 .benefitArea .imgArea { margin-top: 0; }
    .cl_benefit .benefitArea .cl_tabSubTitle { padding-top: 100px; }
    .cl_benefit.type2.center .benefitArea { gap: 0; }

    /* ***************  cl_centerImg   ***************** */
    .cl_centerImg .checkSquare { width: 180px; height: 115px;padding: 5px; }
    .cl_centerImg .checkSquare .textArea { font-size: 14px; }
    .cl_centerImg .checkSquare .checkIcon { margin-bottom: 10px; }
    .cl_centerImg .imgArea img { width: 100%; }
    .cl_centerImg .flexWrap { margin-top: -50px; }

    .cl_centerImg.type2 { margin-top: 100px; }
    .cl_centerImg.type2 .flexWrap { gap: 20px; align-items: center; }
    .cl_centerImg .squareWrap { gap: 20px; }
    .cl_centerImg .square { width: 180px; height: 80px; border-radius: 20px; }
    .cl_centerImg .square .textArea { font-size: 16px; }

    .cl_centerImg .checkHashWrap .hash { width: 150px; height: 30px; font-size: 17px; border: 5px solid #c5d0db; }

    .cl_centerImg .hashCheck .mainText { font-size: 18px; }
    .cl_centerImg .hashCheck .cl_hash { padding: 12px; }


    /* ***************  cl_hashArea   ***************** */
    .cl_hashArea { margin-bottom: 80px; margin-top: 60px; }
    .hashWrap { flex-wrap: wrap; margin-top: -70px; }
    .cl_hash { font-size: 14px; padding: 12px 25px; }


    /* ***************  cl_circleArea   ***************** */
    .cl_circleArea { flex-direction: column;  gap: 20px;}
    .cl_circleArea .flexWrap { gap: 20px; }

    .cl_circleArea .circle {font-size: 20px; }
    .cl_circleArea.typeLine .circle { font-size: 18px; }


    /* ***************  이유리스트   ***************** */
    .cl_reasonStep .reason { flex-direction: column; margin-bottom: 70px; }
    .cl_reasonStep .reason .imgArea { width: 100%; }
    .cl_reasonStep .reason .imgArea img { width: 100%; }
    .cl_reasonStep .reason .textArea { width: 100%; }
    .cl_reasonStep .reason .textArea .num { font-size: 28px; }
    .cl_reasonStep .reason .textArea .mainText { font-size: 26px; }
    .cl_reasonStep .reason .textArea .subText { font-size: 20px; text-align: center; }
    .cl_reasonStep .reason .textArea:before { width: 220px; height: 20px; bottom: -30px; top: auto; left: 50%; transform: translateX(-50%); }


    /* ***************  그리드박스 사용하는곳   ***************** */
    .cl_useGridBox .cl_gridWrapper .grid .gridCell .imgArea { width: 100%; }
    .cl_useGridBox .cl_sectionTitle .subText { font-size: 20px; }
    .cl_useGridBox .gridBox { padding: 50px 20px; }
    .cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .topArea { height: 73.5%; }
    .cl_useGridBox .cl_gridWrapper .grid .gridCell .rightArea { width: 50%; }
    .cl_useGridBox .gridBox .subText { font-size: 20px; }
    .cl_useGridBox.type2 .cl_gridWrapper .grid .gridCell .imgArea { width: auto; }
    .cl_useGridBox .gridBox .flexWrap { gap: 20px; flex-direction: column; }
    .cl_useGridBox .gridBox .flexWrap .arrow img { width: 40px; }

    .cl_useGridBox .gridBox .textList .list .listText { font-size: 20px; }
    .cl_useGridBox .gridBox .textList .list .subText { font-size: 16px; }

    /* ***************  키포인트 단락   ***************** */
    .cl_keyPointTitle .keyPointBot {font-size: 35px;}
    .cl_keyPointTitle .keyPointTop {font-size: 33px;}
}


@media (max-width: 768px){

    /* ***************  버튼  ***************** */
    .cl_button { font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: 'NotoSansL';border: 1px solid #000; border-radius: 50px; box-sizing: border-box; padding: 10px 20px; cursor: pointer; }
    .cl_button img { width: 19px; height: 13px; }


    /* ***************  페이지 타이틀   ***************** */

    /*메인 타이틀*/
    .cl_mainTitle .title { font-size: 37px; }
    .cl_mainTitle .title .iconArea img { width: 40px; }
    .cl_subTitle .title { font-size: 43px; }


    /* ***************  subVisual   ***************** */
    .cl_subVisual { height: 530px; }
    .cl_subVisual .textWrap { top: 60%; left: 15px; transform: translateX(0%); text-align: left; margin-left: 0; }
    .cl_subVisual .textWrap.left { margin-left: 0vw; }
    .cl_subVisual .mainText { font-size: 36px; }
    .cl_subVisual .subText { font-size: 18px; }


    /* ***************  subMainVisual   ***************** */
    .cl_subMainVisual {flex-direction: column; padding: 15px;}
    .cl_subMainVisual > div {width: 100%;}


    /* ***************  페이지타이틀   ***************** */
    .cl_pageTitle { padding-top: 50px; }
    .cl_pageTitle .mainText { font-size: 22px; padding-bottom: 20px; margin-bottom: 20px; }
    .cl_pageTitle .subText { font-size: 14px; text-align: left; }
    .cl_pageTitle .infoArea .listArea { padding-bottom: 20px; }
    .cl_pageTitle .infoArea .listArea li { font-size: 14px; }

    /* ***************  섹션타이틀   ***************** */
    /*.cl_sectionTitle { margin-bottom: 40px; }*/
    .cl_sectionTitle .mainText { font-size: 40px; line-height: 50px; margin-bottom: 30px; }
    .cl_sectionTitle.large .mainText { font-size: 42px; line-height: 52px; }
    .cl_sectionTitle .subText.bold { font-size: 17px;  }
    .cl_sectionTitle .subText { font-size: 14px; letter-spacing: -0.8px;  margin-top: 20px; }


    /* ***************  탭타이틀   ***************** */
    .cl_tabTitle .subText.bold { font-size: 17px; margin-bottom: 20px; }
    .cl_tabTitle .subText { font-size: 14px; }
    .cl_tabTitle .subText.small { font-size: 14px; }


    /* ***************  탭서브타이틀   ***************** */
    /*.cl_tabSubTitle { padding: 0px 15px; }*/
    .cl_tabSubTitle .checkList { padding-left: 35px; }
    .cl_tabSubTitle .checkList li { font-size: 16px; letter-spacing: -0.8px; margin-bottom: 20px; }
    .cl_tabSubTitle .checkList li:before { background-size: 23px 21px !important; width: 23px !important; height: 21px !important; left: -35px !important; }

    .cl_tabSubTitle .subText.bold { font-size: 14px; margin-bottom: 10px; }
    .cl_tabSubTitle .subText { font-size: 14px; }

    /* ***************  cl_mainColorTitle   ***************** */
    .cl_mainColorTitle { top: -20px; font-size: 71px; margin-bottom: 20px; line-height: 80px; }
    .cl_mainColorTitle.type2 { font-size: 63px; margin-bottom: 30px; }
    .cl_mainColorTitle.big { font-size: 75px; margin-bottom: 20px; line-height: 80px; }
    .cl_mainColorTitle.small { font-size: 60px; line-height: 60px; }
    .cl_mainColorTitle.emerald { color: rgba(16,134,148,0.7);  }

    /* *************** imgFlexArea   ***************** */
    .cl_imgFlexArea { padding-top: 50px; }
    .cl_imgFlexArea .imgArea { width: 100%; margin-top: 0vh;}
    .cl_imgFlexArea .cl_sectionTitle { padding: 0 15px; margin-bottom: 30px; }
    .cl_imgFlexArea .cl_sectionTitle .mainText { margin-bottom: 20px; }
    /*.cl_imgFlexArea .cl_sectionTitle { padding: 0 15px; box-sizing: border-box; }*/

    /*type2*/
    /*.cl_imgFlexArea.type2 { flex-direction: row; margin-top: -8vh; }*/
    /*.cl_imgFlexArea.type2 .imgArea { margin-top: -8vh; width: 45%; }*/
    /*.cl_imgFlexArea.type2 .imgArea img { width: 100%; }*/
    /*.cl_imgFlexArea.type2 .cl_sectionTitle { margin-top: 0; }*/

    /* *************** cl_beforeAfter   ***************** */
    .cl_beforeAfter { padding: 50px 0; }
    .cl_beforeAfter .textArea .mainText { font-size: 40px; }
    .cl_beforeAfter .textArea .subText { font-size: 13px; margin-bottom: 0px; }
    .cl_beforeAfter .gridWrapper { margin-top: 40px; }
    .cl_beforeAfter .grid .gridCell { border-width:0 10px 10px 0; padding-bottom: 0px; }
    .cl_beforeAfter .grid .gridCell .textArea { font-size: 15px; }

    .cl_beforeAfter.type2 .textArea .mainText { font-size: 26px; }

    .cl_beforeAfter.type2 .flexBox .leftArea { width: 100%; flex-direction: column; }
    .cl_beforeAfter.type2 .flexBox .rightArea { width: 100%; flex-direction: column; }
    .cl_beforeAfter.type2 .flexBox { flex-direction: column; margin-bottom: 20px; }
    .cl_beforeAfter.type2 .flexBox .info { position: static; width: 100px; height: 30px; border-radius: 15px; font-size: 15px;box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px; }
    .cl_beforeAfter.type2 .flexBox .text { font-size: 22px; margin-bottom: 0px; }
    .cl_beforeAfter.type2 .flexBox .flexWrap { width: 100%; display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; }


    /* *************** cl_boxFlexArea   ***************** */
    .cl_boxFlexArea { flex-direction: column-reverse; gap: 20px; padding: 0 15px; padding-bottom: 60px; margin-top: 20px; }
    .cl_boxFlexArea .boxArea { width: 80%; padding: 0; box-shadow: none; background: transparent; }
    .cl_boxFlexArea .boxArea .list .textArea .mainText { font-size: 14px; margin-bottom: 5px; }
    .cl_boxFlexArea .boxArea .list .textArea .subText { font-size: 12px; }
    .cl_boxFlexArea .boxArea .list .imgArea { display: flex; justify-content: center; }
    .cl_boxFlexArea .boxArea .list .imgArea img { width: 70%; }

    .cl_boxFlexArea .cl_sectionTitle { margin-bottom: 0; }


    /* *************** cl_equipment   ***************** */
    .cl_equipment { padding-top: 50px; }
    .cl_equipment .cl_sectionTitle { background: none; padding-bottom: 0; }
    .cl_equipment .solution { flex-direction: column; margin-top: 50px; padding: 0 15px; }
    .cl_equipment .solution .imgArea img { width: 100%; }


    /* ***************  cl_benefit   ***************** */
    .cl_benefit { padding-top: 50px; }
    .cl_benefit .cl_sectionTitle { padding: 0 15px; }
    .cl_benefit .benefitArea .cl_tabSubTitle { padding: 40px 15px 0 15px; }
    .cl_benefit.type2 .benefitArea .cl_tabSubTitle { padding-top: 40px; }
    .cl_benefit .benefitArea { padding-bottom: 50px; }
    .cl_benefit.type2 .benefitArea .imgArea { margin-left: 2vw; }

    .cl_benefit.type2.center .benefitArea { padding: 50px 0; }


    /* *************** cl_differentPoint  ***************** */
    /*.cl_differentPoint { background: #f9faf9 url("/app/layout/web/images/sub/collagen_bg_M.png")no-repeat; background-position: right 0px; padding-top: 120px; box-sizing: border-box; margin-top: -110px; }*/

    .cl_differentPoint { background: #f9faf9; padding: 100px 0 40px 0; box-sizing: border-box; margin-top: -70px; }
    .cl_differentPoint .centerTitle { font-size: 25px; margin: 40px 0; }
    .cl_differentPoint.type3 { margin-top: 0; padding-top: 50px; }
    .cl_differentPoint .cl_gridWrapper .grid .gridCell { gap: 30px; }
    .cl_differentPoint .cl_gridWrapper .grid .gridCell .textArea .mainText { text-align: left; }
    .cl_differentPoint .cl_gridWrapper .grid .gridCell .textArea .subText { text-align: left; }
    .cl_differentPoint .cl_gridWrapper.type3 .grid .gridCell .imgArea { width: 50%; height: auto; }
    .cl_differentPoint .cl_gridWrapper.type3 .grid .gridCell { gap: 20px; }

    /* *************** cl_bgWrap  ***************** */
    .cl_bgWrap { padding: 50px 0; }
    .cl_bgWrap .mainText { margin-top: 0; font-size: 17px; }
    .cl_bgWrap .subText { font-size: 14px; margin-top: 10px; }
    .cl_bgWrap.bgUse .bgArea { padding: 0px 0 220px 0; }

    /* *************** cl_introFlexArea   ***************** */
    .cl_introFlexArea { gap: 20px; }
    .cl_introFlexArea .cl_sectionTitle { width: 60%; padding-right: 0; }
    .cl_introFlexArea .imgArea { margin-top: -5vh; }


    /* *************** cl_checkPoint  ***************** */
    .cl_checkPoint { padding: 100px 0 70px 0; }
    .cl_checkPoint .flexWrap { gap: 20px; }
    .cl_checkPoint .numCircleArea { margin-bottom: 50px; gap: 10px; }
    .cl_checkPoint .numCircleArea .circle { width: 150px; height: 150px; }
    .cl_checkPoint .numCircleArea .circle .num { font-size: 16px; margin-bottom: 10px; }
    .cl_checkPoint .numCircleArea .circle .subText { font-size: 14px; }


    /* *************** cl_gridWrapper  ***************** */
    /*.cl_gridWrapper .grid { gap: 20px; }*/
    .cl_gridWrapper .grid .gridCell { gap: 10px; align-items: center; }
    .cl_gridWrapper .grid .gridCell .imgArea { width: 20%;}
    .cl_gridWrapper .grid .gridCell .imgArea img { width: 90%; }
    .cl_gridWrapper .grid .gridCell .textArea { flex: 1; }
    .cl_gridWrapper .grid .gridCell .mainText { font-size: 17px; margin-top: 0px; text-align: left; }
    .cl_gridWrapper .grid .gridCell .subText { font-size: 14px; margin-top: 20px; text-align: left; }

    .cl_gridWrapper.type2 .grid { gap: 0; }
    .cl_beforeAfter.type2 .textArea .mainText { margin-bottom: 50px; }
    /*.cl_gridWrapper.type2 .grid .gridCell { width: calc(100% /2); border-width: 0 10px 10px 0; gap: 0; }*/
    .cl_gridWrapper.type2 .grid .gridCell .subText { text-align: center; }
    .cl_gridWrapper.type3 .grid .gridCell .mainText { font-size: 18px; }
    .cl_gridWrapper.type3 .grid .gridCell .subText { font-size: 12px; }
    .cl_gridWrapper .circleNum { margin-top: 0; width: 30px; height: 30px; font-size: 11px; }
    /*.cl_gridWrapper.type3 .grid .gridCell { width: calc(100% /2); border-width: 0 10px 10px 0; gap: 0; }*/

    /*typeOval1*/
    .cl_gridWrapper.typeOval1 { margin-top: 50px; }
    .cl_gridWrapper.typeOval1 .grid .gridCell .mainText { text-align: center; font-size: 18px; margin-top: 15px; margin-bottom: 15px; }
    .cl_gridWrapper.typeOval1 .grid .gridCell .subText { text-align: center; font-size: 12px; margin-top: 0px; }

    /*typeStep*/
    .cl_gridWrapper.typeStep .grid .gridCell .imgArea { width: 60%; }
    .cl_gridWrapper.typeStep .grid .gridCell .mainText { text-align: center; font-size: 14px;margin-top: 0; }
    .cl_gridWrapper.typeStep .grid .gridCell .subText { text-align: center; font-size: 12px; }

    /* ***************  텝 페이지 및 텝 버튼   ***************** */

    .cl_tabBtnArea .tabBtn { padding: 10px 0; font-size: 14px; }
    .cl_tabBtnArea .linkTabBtn { width: calc(100% / 2) !important; font-size: 14px; }
    .cl_tabBtnArea.type3 .tabBtn a { padding: 10px 0;}
    /*.cl_tabPage .leftArea { padding: 0 15px; box-sizing: border-box; }*/
    .cl_tabPage .topArea { margin-bottom: 80px; }

    .cl_tabPage { position: relative; padding: 50px 0px; }
    .cl_tabPage.type2 { padding: 50px 15px; }
    /*.cl_tabPage.type2 .leftArea { width: 100%; }*/
    .cl_tabPage.type2 .topArea .imgArea { margin-bottom: 10px; }
    .cl_tabPage.type2 .topArea .imgArea img { width: 100%; }

    .cl_tabPage.type3 { padding: 50px 0 0 0; }

    /* ***************  서브 텝 페이지 및 서브 탭 버튼   ***************** */
    .cl_subTabBtnArea .subTabBtn { padding: 10px 0; font-size: 14px;}

    .cl_subTabPage { position: relative; padding: 50px 0px;}


    /* ***************  cl_centerImg   ***************** */
    .cl_centerImg .checkCircle { width: 153px; height: 153px; }
    .cl_centerImg .checkCircle .textArea { font-size: 15px; letter-spacing: -0.8px; }
    .cl_centerImg .checkCircleWrap { gap: 10px; }
    .cl_centerImg .checkCircleWrap.leftArea { margin-right: 0; }
    .cl_centerImg .checkCircleWrap.rightArea { margin-left: 0; }
    .cl_centerImg .checkCircle .checkIcon { margin-bottom: 5px; }
    .cl_centerImg .checkCircle .checkIcon img { background-size: 19px 15px; width: 19px; height: 15px; }

    .cl_centerImg .checkSquareWrap { gap: 10px; }
    .cl_centerImg .checkSquareWrap.leftArea { margin-right: 0; }
    .cl_centerImg .checkSquareWrap.rightArea { margin-left: 0; }
    .cl_centerImg .checkSquare .checkIcon { margin-bottom: 5px; }
    .cl_centerImg .checkSquare { width: 160px; height: 100px; }
    .cl_centerImg .checkSquare .textArea { font-size: 12px; }
    .cl_centerImg .checkSquare .checkIcon img { width: 10px; }

    .cl_centerImg.type2 { margin-top: 50px; }
    .cl_centerImg.type2 .imgArea { display: flex !important; align-items: center; justify-content: center; }
    .cl_centerImg.type2 .imgArea img { width: 80%; }
    .cl_centerImg.type2 .flexWrap { gap: 10px; }
    .cl_centerImg .square { width: 130px; height: 60px; }
    .cl_centerImg .square .textArea { font-size: 12px; }

    .cl_centerImg .checkHashWrap .hash { width: 105px; height: 21px; font-size: 13px; }
    .cl_centerImg .checkHashWrap.leftArea { margin-left: 20px; }
    .cl_centerImg .checkHashWrap.rightArea { margin-right: 20px; }

    /* ***************  cl_archArea   ***************** */
    .cl_archArea .imgArea .centerImg { right: -200px; }
    .cl_archArea .imgArea .centerImg img { width: 60%; }
    .cl_archArea .textArea .mainText { margin-bottom: 20px; font-size: 20px; }
    .cl_archArea .textArea .listText .left { font-size: 15px; width: 140px;}
    .cl_archArea .textArea .listText .right { font-size: 12px; }
    .cl_archArea .textArea .listText .right:before { height: 50px; }
    .cl_archArea .textArea .listText .list { margin-bottom: 20px; }
    .cl_archArea.type2 .listText .list {gap: 10px; }
    .cl_archArea.type3 .textArea .listText .left { width: 100%; }
    .cl_archArea.type3 .textArea .listText .list { padding-left: 20px; }
    .cl_archArea.type3 .textArea .listText .left:before { width: 5px; height: 5px; left: -15px; }

    /* ***************  cl_productDescribe   ***************** */
    .cl_productDescribe .textArea { width: 100%; }
    .cl_productDescribe .imgArea { text-align: center; flex: 1; }
    .cl_productDescribe .imgArea img { width: 80%; }

    .cl_productDescribe.type2 { padding: 0 15px; flex-direction: column; }
    .cl_productDescribe.type2 .textArea { width: 100%; }
    .cl_productDescribe.type2 .textArea .maxContent { width: 100%; max-width: 100%; }
    .cl_productDescribe.type2 .imgArea { width: 100%; }
    .cl_productDescribe.type2 .imgArea img { width: 100%; }

    /* ***************  cl_hashArea   ***************** */
    .cl_hashArea { margin-bottom: 80px; margin-top: 60px; }
    .cl_hashArea .imgArea { width: 80%; margin: 0 auto; }
    .cl_hashArea .imgArea img { width: 100%; }
    .hashWrap { flex-wrap: wrap; margin-top: 30px; }
    .hashWrap.type3 { margin-top: 30px; }
    .cl_hash { font-size: 12px; padding: 10px 20px; }

    /* ***************  cl_hashArea   ***************** */
    .cl_circleArea { margin-top: 20px; gap: 10px; }
    .cl_circleArea.typeLine { gap: 10px; }
    .cl_circleArea .circle { width: 130px; height: 130px; font-size: 15px; }
    .cl_circleArea.typeLine .circle { width: 160px; height: 160px; font-size: 14px; }
    .cl_circleArea .flexWrap { gap: 10px; }
    .cl_circleArea.typeLine .flexWrap { gap: 10px; }


    /* ***************  페이지네이션   ***************** */

    .cl_pagination {  margin-top: 25px;}
    .cl_pagination span { width: 25px; height: 25px; font-size: 18px; ;}
    .cl_pagination .arrow  { width: 9px;}
    .cl_pagination .arrow.prev { margin-right: 5px;}
    .cl_pagination .arrow.next { margin-left: 5px;}
    .cl_pagination .arrow img { width: 100%;}

    /* ***************  이유리스트   ***************** */
    .cl_reasonStep .reason { margin-bottom: 70px; }
    .cl_reasonStep .reason:nth-last-child(1) { margin-bottom: 50px; }
    .cl_reasonStep .reason .textArea { padding: 0; }
    .cl_reasonStep .reason .textArea:before { width: 110px; height: 10px; bottom: -25px; }
    .cl_reasonStep .reason .textArea .num { font-size: 18px; margin-bottom: 10px; padding-bottom: 10px; }
    .cl_reasonStep .reason .textArea .mainText { font-size: 17px; margin-bottom: 10px; }
    .cl_reasonStep .reason .textArea .subText { font-size: 14px; letter-spacing: -0.8px; }
    .cl_reasonStep .reason .textArea .subText.left { text-align: left; }

    /* ***************  cl_useGridBox   ***************** */
    .cl_useGridBox .cl_sectionTitle .subText { font-size: 14px; }
    .cl_useGridBox .cl_sectionTitle .subText.bold { font-size: 17px; }
    .cl_useGridBox .gridBox { background-color: transparent; border: 0; padding: 0 0px; }
    .cl_useGridBox .cl_gridWrapper .grid { margin: 0 !important; padding: 0 !important; }
    .cl_useGridBox .cl_gridWrapper .grid .gridCell { justify-content: flex-start; gap: 45px; flex-direction: row; width: 100%; border-width: 0 !important;background-color: #fff; border: 1px solid #4e4e4e !important; padding: 20px; box-sizing: border-box; margin-bottom: 20px; }
    .cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .imgArea img { width: 80px; }
    .cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .slash { margin-top: 10px; }
    .cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .mainText { text-align: center; font-size: 15px; margin-top: 0px; }
    .cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .mainText img { width: 70px; }
    .cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .subText { text-align: center; font-size: 14px; margin-top: 10px; }
    .cl_useGridBox .gridBox .cl_gridWrapper .grid .gridCell .point { font-size: 12px; width: 70px; height: 20px; padding: 0; }
    .cl_useGridBox .cl_gridWrapper .grid .gridCell .rightArea { flex: 1; }
    .cl_useGridBox .gridBox .flexWrap { background-color: #fff; border: 1px solid #4e4e4e; padding: 15px; box-sizing: border-box; }
    .cl_useGridBox .gridBox .subText { font-size: 14px; margin-top: 0; letter-spacing: -0.8px; }
    .cl_useGridBox .gridBox .flexWrap .imgArea img { width: 100%; }

    .cl_useGridBox .gridBox .textList .list { margin-bottom: 25px; }
    .cl_useGridBox .gridBox .textList .list .listText { width: 110px; height: 25px; font-size: 15px; }
    .cl_useGridBox .gridBox .textList .list .subText { font-size: 15px; }

    /* ***************  키포인트 단락   ***************** */
    .cl_keyPointsArea {padding: 65px 0 !important;}
    .cl_keyPointTitle {margin-bottom: 30px;}
    .cl_keyPointTitle .keyPointTop {font-size: 25px; margin-bottom: 30px;}
    .cl_keyPointTitle .keyPointBot {font-size: 20px;}
}