/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_visual *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main_visual {background: url(/statics/images/img/main_visual01.jpg) no-repeat center center / cover; color: #57514f; overflow: hidden; box-sizing: border-box;}
.main_visual .flex_wrap {height: 100%; align-items: center;}
.main_visual .txt_box {width: 50%;}
.main_visual .txt_box h2 {font-weight: 400; font-size: var(--fz-76); line-height: 1.26em;}
.main_visual .txt_box h2 span {text-decoration: underline; text-underline-offset: 20px; text-decoration-thickness: 5px;}
.main_visual .txt_box p {font-size: var(--fz-22); line-height: 1.45em; margin-top: 50px;}
.main_visual .img_box {width: 50%; align-self: flex-start; text-align: right; position: relative; aspect-ratio: 1/1.35;}
.main_visual .img_box img {width: 135%; max-width: fit-content; position: absolute; top:  0; left: 50%; transform: translateX(-50%);}
 
@media all and (max-width: 1024px) {
    .main_visual .flex_wrap {flex-wrap: wrap; row-gap: 60px;}
    .main_visual .txt_box {width: 100%;}
    .main_visual .img_box {width: 100%; text-align: center; aspect-ratio: unset;}
    .main_visual .img_box img {transform: unset; width: 100%; position: static}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con01 & main_con02 공통사항 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main :is(.con01, .con02) {overflow: hidden;}
/*--- row01 ---*/
.main :is(.con01, .con02) .row01 .flex_wrap {padding: 140px 0 220px; gap: 100px;}
.main :is(.con01, .con02) .row01 .left {width: 50%;}
.main :is(.con01, .con02) .row01 .right {width: calc(50% - 100px);}
.main :is(.con01, .con02) .row01 .slogan h3 {font-weight: 300; font-size: var(--fz-62); line-height: 1.3em;}
.main :is(.con01, .con02) .row01 .slogan h3 span {text-decoration: underline; text-underline-offset: 15px; text-decoration-thickness: 3px;}
.main :is(.con01, .con02) .row01 .txt_box p {font-size: var(--fz-18); line-height: 1.55em; color: #666;}
/* view more btn */
.main :is(.con01, .con02) .row01 .btn_wrap {justify-content: flex-end; margin-top: 60px;}
.main :is(.con01, .con02) .row01 .btn_wrap .btn {gap: 20px;}
.main :is(.con01, .con02) .row01 .btn_wrap .btn span {font-family: var(--eng-font); font-weight: 700; font-size: var(--fz-24); line-height: 1.5em; letter-spacing: 0.05em; color: #1e2d64;}
.main :is(.con01, .con02) .row01 .btn_wrap .btn i {display: flex; align-items: center; justify-content: center; font-family: var(--eng-font); font-weight: 700; font-size: var(--fz-24); width: 3.25em; height: 3.25em; border-radius: 50%; border: 1px solid #1e2d64; font-style: normal; color: #1e2d64; line-height: 1em; transition: 0.25s;}
.main :is(.con01, .con02) .row01 .btn_wrap .btn:hover i {background-color: #1e2d64; color: #fff;}
/*--- row02 ---*/
.main :is(.con01, .con02) .row02 {background-color: #f0f0f0; height: 800px;}
.main :is(.con01, .con02) .row02 .flex_wrap {gap: 60px;}
/* img  */
.main :is(.con01, .con02) .row02 .img_box {position: relative; width: 50%;}
.main :is(.con01, .con02) .row02 .img_box img {position: absolute; top: 0; left: 50%; transform: translate(-50%);}
.main :is(.con01, .con02) .row02 .img_box img.gray {filter: grayscale(1);}
.main :is(.con01, .con02) .row02 .img_box img.color {clip-path: circle(100%); transition: 0.5s;}
.main :is(.con01, .con02) .row02 .txt_box {width: calc(50% - 60px); margin-top: -80px; padding: 75px; box-sizing: border-box; position: relative; z-index: 1;}
/* tab btn */
.main :is(.con01, .con02) .row02 .tab_btn {flex-wrap: wrap; justify-content: center; gap: 10px 25px;}
.main :is(.con01, .con02) .row02 .tab_btn .btn {font-weight: 700; font-size: var(--fz-20); line-height: 1.5em; position: relative; padding-bottom: 10px;}
.main :is(.con01, .con02) .row02 .tab_btn .btn::before {content: ''; position: absolute; width: 0; height: 1px; bottom: 0; left: 50%; transform: translate(-50%); transition: 0.25s}
.main :is(.con01, .con02) .row02 .tab_btn .btn.on::before,
.main :is(.con01, .con02) .row02 .tab_btn .btn:hover:before {width: 100%;}
/* tab con */
.main :is(.con01, .con02) .row02 .tab_con {margin-top: 100px;}
.main :is(.con01, .con02) .row02 .tab_con > * {min-height: 350px; display: none; flex-direction: column; justify-content: space-between;}
.main :is(.con01, .con02) .row02 .tab_con .on {display: flex;}
.main :is(.con01, .con02) .row02 .divider {width: 2px; height: 50px; margin: 10px 0 20px;}
.main :is(.con01, .con02) .row02 .heading .desc {padding-left: 10px; box-sizing: border-box;}
.main :is(.con01, .con02) .row02 .btn_wrap {justify-content: flex-end;}

@media all and (max-width: 1200px) {
    .main :is(.con01, .con02) .row02 .flex_wrap {gap: 0;}
    .main :is(.con01, .con02) .row02 .txt_box {width: 50%;}
}


@media all and (max-width: 1024px) {
    .main :is(.con01, .con02) .row01 .flex_wrap {flex-wrap: wrap; gap: 50px; padding: 140px 0;}
    .main :is(.con01, .con02) .row01 .left,
    .main :is(.con01, .con02) .row01 .right {width: 100%;}
    .main :is(.con01, .con02) .row02 {height: unset;}
    .main :is(.con01, .con02) .row02 .flex_wrap {flex-wrap: wrap;}
    .main :is(.con01, .con02) .row02 .img_box,
    .main :is(.con01, .con02) .row02 .txt_box {width: 100%;}
    .main :is(.con01, .con02) .row02 .img_box {text-align: center;}
    .main :is(.con01, .con02) .row02 .img_box img {position: static; transform: unset; width: 100%; max-width: fit-content;}
    .main :is(.con01, .con02) .row02 .img_box img.gray {display: none;}
    .main :is(.con01, .con02) .row02 .txt_box {padding: 75px 40px; margin-top: 0;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con01 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con01 .row02 .txt_box {background-color: #536b9c; color: #fff;}
.main .con01 .row02 .tab_btn .btn::before {background-color: #fff;}
.main .con01 .row02 .divider {background: linear-gradient(to bottom, #1e2d64 25%, #fff);}


@media all and (min-width: 1025px) {
    /* 부위별 포커스 */
    .main .con01 .color.eye {clip-path: circle(15% at 39% 29%) !important;}
    .main .con01 .color.baby {clip-path: circle(15% at 52% 46%) !important;}
    .main .con01 .color.line {clip-path: circle(15% at 58% 57%) !important;}
    .main .con01 .color.nose {clip-path: circle(15% at 44% 34%) !important;}
}

@media all and (max-width: 1400px) {
    .main .con01 .row02 .tab_btn {max-width: 300px; margin: auto;}
}

@media all and (max-width: 1024px) {
    .main .con01 .row02 .tab_btn {max-width: unset;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con02 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con02 .row02 .img_box {order: 1;}
.main .con02 .row02 .txt_box {background-color: #fff; border: 1px solid #1e2d64; color: #1e2d64; padding: 75px 60px;}
.main .con02 .row02 .tab_btn .btn::before {background-color: #1e2d64;}
.main .con02 .row02 .divider {background: linear-gradient(to top, #1e2d64, #fff);}

@media all and (min-width: 1025px) {
    /* 부위별 포커스 */
    .main .con02 .color.botox {clip-path: circle(15% at 15% 6%) !important;}
    .main .con02 .color.filler {clip-path: circle(15% at 13% 35%) !important;}
    .main .con02 .color.laser {clip-path: circle(15% at 24% 34%) !important;}
    .main .con02 .color.lifting {clip-path: circle(15% at 28% 48%) !important;}
}


@media all and (max-width: 1024px) {
    .main .con02 .row02 .img_box {order: 0;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con03 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con03 ul { display: grid; grid-template-columns: repeat(6, 1fr);}
.main .con03 .img_box,
.main .con03 .video_box {aspect-ratio: 1/1; box-sizing: border-box; position: relative;}
.main .con03 .video_box video,
.main .con03 .img_box img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.main .con03 .video_box {cursor: pointer;}
.main .con03 .video_box::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/statics/images/img/play_60x60.png) no-repeat center center; background-size: 60px 60px; opacity: 1; transition: 0.25s;}
.main .con03 .video_box:hover::before {opacity: 0;}
.main .con03 .main_tit {display: flex; align-items: center; justify-content: center; grid-area: 2 / 3 / 4 / 5; text-align: center; background: url(/statics/images/img/main_con03_bg.png)no-repeat center right -60px;}

@media all and (max-width: 1024px) {
    .main .con03 ul {grid-template-columns: repeat(4, 1fr);}
    .main .con03 .main_tit {display: none;}
}

/* YouTube 영상 및 썸네일 스타일 */
.video_container {
    position: relative;
}
.main_video {
    margin-bottom: 20px;
}
.thumbnails {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.thumbnail {
    cursor: pointer;
}
.thumbnail img {
    width: 100px; /* 필요한 크기에 맞게 조절 */
    height: auto;
}