/* 공통수정 */
:root {
    --pointcolor : #e85a14;
    --subcolor : #e9e2da;
    --linecolor: #e2d7c8;
}

.flexList { --x-gap:1.500rem; --y-gap:1.500rem;   display:flex;  flex-wrap:wrap;  gap:var(--y-gap) var(--x-gap);}
.flexList > .box{width:calc(100% / var(--count) - (var(--x-gap) * (var(--count) - 1)) / var(--count)); }
.flexList[layoutStyle="fullbox"] {--x-gap:0; --y-gap:10px; }
.flexList[layoutStyle="fullbox"] > .box{  width:calc(100% / var(--count)) }

.flexList[layoutStyle="big"]{--x-gap:3.75rem;}
/* boxCout */
[boxCount="1"]{ --count:1; }
[boxCount="2"]{ --count:2; }
[boxCount="3"]{ --count:3; }
[boxCount="4"]{ --count:4; }
[boxCount="5"]{ --count:5; }
[boxCount="6"]{ --count:6; }

@media (max-width:1580px){
    .lg-direction{flex-direction: column;}
    .lg-w100{width:100%}
    .lg-w90{width:90%}
    .lg-w80{width:80%}
    .lg-order{order: 1}

    .lg-wrap3{--count:3}
    .lg-wrap2{--count:2}
    .lg-wrap1{--count:1}
}
@media (max-width:1240px){
    .md-direction{flex-direction: column;}
    .md-w100{width:100%}
    .md-w90{width:90%}
    .md-w80{width:80%}
    .md-order{order: 1}

    .md-wrap3{--count:3}
    .md-wrap2{--count:2}
    .md-wrap1{--count:1}
}
@media (max-width:990px){
    .flexList[layoutStyle="big"]{--x-gap:1.500rem}
    .sm-direction{flex-direction: column;}
    .sm-w100{width:100%}
    .sm-w90{width:90%}
    .sm-w80{width:80%}
    .sm-order{order: 1}

    .sm-wrap3{--count:3}
    .sm-wrap2{--count:2}
    .sm-wrap1{--count:1}
}
@media (max-width:768px){
    .xs-direction{flex-direction: column;}
    .xs-w100{width:100%}
    .xs-w90{width:90%}
    .xs-w80{width:80%}
    .xs-order{order: 1}

    .xs-wrap3{--count:3}
    .xs-wrap2{--count:2}
    .xs-wrap1{--count:1}
}
@media (max-width:500px){
    .xxs-direction{flex-direction: column;}
    .xxs-w100{width:100%}
    .xxs-w90{width:90%}
    .xxs-w80{width:80%}
    .xxs-order{order: 1}

    .xxs-wrap2{--count:2}
    .xxs-wrap1{--count:1}
}

.font-19 {font-size: 1.1875rem !important;}
.font-21 {font-size: 1.3125rem !important;}
.font-24 {font-size: 1.5rem !important;}
.font-36 {font-size: 2.25rem !important;}
.font-40 {font-size: 2.5rem !important;}
.font-50 {font-size: 3.125rem !important;}

@media(max-width:768px) {
    .font-16 {font-size: 1.375rem !important;}
    .font-19 {font-size: 1.5rem !important;}
    .font-21 {font-size: 1.5rem !important;}
    .font-24 {font-size: 1.75rem !important;}
    .font-36 {font-size: 2rem !important;}
    .font-40 {font-size: 2.25rem !important;}
    .font-50 {font-size: 2.5rem !important;}
}

.lh-12 {line-height: 1.2 !important;}
.lh-13 {line-height: 1.3 !important;}
.lh-15 {line-height: 1.5 !important;}
.lh-17 {line-height: 1.7 !important;}

.width100 {width: 100%;}

.cont_box {margin-top: 3.125rem !important; width: 100% !important;}

.neumor {border-radius: 2rem !important; margin: 15px;}

p,h2,h3,h4,h5 {font-weight: 400;}

.section {padding: 150px 0 !important;}

@media(max-width: 1280px) {
    .section {padding: 100px 0 !important;}
}

.pb-0 {padding-bottom: 0 !important;}
.pt-0 {padding-top: 0 !important;}

.section-left {padding-left: calc((100% - 1240px) / 2);}
.section-right {padding-right: calc((100% - 1240px) / 2);}

@media(max-width:1800px) {
    .section-left {padding-left: 5%;}
    .section-right {padding-right: 5%;}
}

.swiper-pagination.custom {position: initial; width: 100%; height: 4px; background: var(--subcolor);}
.swiper-pagination.custom .swiper-pagination-progressbar-fill {background: var(--pointcolor);}

.submoreBtn {display: flex; align-items: center; gap: 1rem; color: #fff; background: var(--pointcolor); width: fit-content; padding: 1rem 2rem; border-radius: 10px; transition: .3s;}
.submoreBtn:hover {background: #896553;}

/* 서브페이지 */
.subStandard .cont_box {max-width: 1100px; width: 100%; margin: 3.125rem auto 0;}
.subStandard .item {padding: 2.5rem; display: flex; margin-top: 20px;}
.subStandard .item .subTit {display: flex; align-items: flex-start; gap: .75rem; width: 40%;}
.subStandard .item .subTit .Num {font-size: 13px; width: 1.75rem; height: 1.75rem; background: var(--subcolor); display: flex; align-items: center; justify-content: center; font-weight: 700; margin-top: 4px;}
.subStandard .item .subDesc {width: 60%;}

@media(max-width:768px) {
    .subStandard .item {flex-direction: column; gap: 2rem;}
    .subStandard .item .subTit,
    .subStandard .item .subDesc {width: 100%;}

    .subStandard .item .subTit .Num {width: 2rem; height: 2rem;}
    .subStandard .item .subDesc {padding-left: 2.75rem;}
}

.subLineup .swiper {overflow: hidden;}
.subLineup .cont_box {margin-top: calc(3.125rem - 20px) !important;}
.subLineup .inner {display: flex; align-items: center; overflow: hidden; border-radius: 2rem; margin-left: 10px; margin-right: 10px;}
.subLineup .swiper-slide-active .inner {margin-left: 15px;}

.subLineup .imgbox {width: 35%;}
.subLineup .textbox {width: 65%; padding: 2rem 3rem;}
.subLineup .textbox .line {width: 100%; height: 1px; background: var(--subcolor); display: block;}

@media(max-width: 768px) {
    .subLineup .inner {flex-direction: column;}
    .subLineup .imgbox,
    .subLineup .textbox {width: 100%;}
}

.subPoint {background-size: cover; background-position: center; background-repeat: no-repeat;}
.subPoint.effects {background-image: url("/img/sub/collagenBooster/effects_subPoint.jpg");}
.subPoint.redTouch {background-image: url("/img/sub/collagenBooster/redTouch_subPoint.jpg");}

@media(max-width:768px) {
    .subPoint {background-position: 70% center;}
}

@media(max-width: 500px) {
    .subPoint {position: relative;}
    .subPoint:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: rgba(0, 0, 0, 0.5);}
    .subPoint .wrap {position: relative; z-index: 1;}
}

.subCare .item {display: flex; overflow: hidden; margin-top: 20px;}
.subCare .textbox {width: 55%; padding: 4rem 7.5%;}
.subCare .textbox .spc {width: fit-content; display: block; background: var(--pointcolor); padding: .375rem 1.25rem; color: #fff;}
.subCare .imgbox {width: 45%;}
.subCare .imgbox img {height: 100%; object-fit: cover;}

@media(max-width:768px) {
    .subCare .item {flex-direction: column;}
    .subCare .textbox,
    .subCare .imgbox {width: 100%;}

    .subCare .textbox {padding: 3.75rem;}
}

@media(max-width:500px) {
    .subCare .textbox {padding: 3.75rem 2.5rem;}
}

.subReason .flexList {max-width: 940px; width: 100%; margin: auto; --y-gap: 2.5rem;}
.subReason .box .subTit {padding: 1.25rem; color: #fff; display: block;}
.subReason .box.left .subTit {background: var(--pointcolor);}
.subReason .box.right .subTit {background: #896553;}

.subCheck .wrap {display: flex; gap: 1.5rem;}
.subCheck .textbox {width: 60%;}
.subCheck .textbox li {padding: 1.25rem 1.25rem 1.25rem 4.5rem; border-radius: 1rem !important; position: relative; margin-left: 15px !important;}
.subCheck .textbox li:after {position: absolute; left: 2rem; top: 1.25rem; content: ""; width: 1.5rem; height: 100%; background-image: url("/img/landing07/checkMark.png"); background-size: contain; background-repeat: no-repeat;}
.subCheck .imgbox {width: 40%; border-radius: 1.5rem; overflow: hidden;}
.subCheck .imgbox img {height: 100%; object-fit: cover;}

@media(max-width:768px) {
    .subCheck .wrap {flex-direction: column; gap: 2.5rem;}
    .subCheck .textbox,
    .subCheck .imgbox {width: 100%;}
    .subCheck .textbox li:after {top: 1.625rem;}
}

.subReverse {position: relative;}
.subReverse:after {position: absolute; left: 50%; top: 150px; width: 1px; height: calc(100% - 150px); transform: translateX(-50%); content: ""; background: var(--linecolor);}
.subReverse .flexList {--x-gap: 0rem; --y-gap: 3.5rem;}
.subReverse .box.left {padding-right: 6.25%;}
.subReverse .box.right {padding-left: 6.25%;}
.subReverse .imgbox {border-radius: 2.5rem !important; overflow: hidden;}
.subReverse .textbox {position: relative; padding-left: 3rem;}
.subReverse .textbox li {padding: 1.25rem 2rem; border-radius: 1rem !important; width: fit-content; margin-left: 0;}
.subReverse .textbox .en {font-size: 7rem; color: var(--subcolor); font-weight: 700; position: absolute; left: 0; top: -1rem; z-index: -1; opacity: .5;}

@media(max-width:990px) {
    .subReverse .box.left {padding-right: 5%;}
    .subReverse .box.right {padding-left: 5%;}
}

@media(max-width:768px) {
    .subReverse:after {display: none;}
    .subReverse .box.left {padding-right: 0%;}
    .subReverse .box.right {padding-left: 0%;}

    .subReverse .textbox .en {font-size: 5rem;}
}

.subFAQ .cont_box {border-top: 1px solid var(--linecolor); margin-top: 1.5rem !important; padding-top: 2.5rem;}
.subFAQ .item {padding: 3.5rem; margin-top: 20px;}

.subFAQ .item .Qbox,
.subFAQ .item .Abox {position: relative; padding-left: 4.5rem;}
.subFAQ .item .Qbox:after,
.subFAQ .item .Abox:after{position: absolute; left: 0; top: -.5rem; font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 700;}

.subFAQ .item .Qbox:after {content: "Q.";}
.subFAQ .item .Abox:after {content: "A."; color: var(--pointcolor);}

.subFAQ .item .line {width: 100%; height: 1px; border: 1px dashed var(--linecolor)}

@media(max-width:768px) {
    .subFAQ .item {padding: 3rem 2rem;}
    .subFAQ .item .Qbox,
    .subFAQ .item .Abox {padding-left: 3.5rem;}
}

.subYtb .imgbox img {width: 100%; max-width: 100%; display: block;}
.subYtb .cont_box {border-top: 1px solid var(--linecolor); margin-top: 1.5rem !important; padding-top: 2.5rem;}
.subYtb .swiper-pagination.custom .swiper-pagination-progressbar-fill {background: #000;}