@charset "utf-8";

/* main_visual 텍스트 박스: 한글 400 weight 매핑 */
@font-face {
    font-family: 'VisualText';
    font-style: normal;
    font-weight: 400;
    src: url('font/Town10Display-Regular.otf') format('opentype');
    unicode-range: U+AC00-U+D7AF, U+4E00-U+9FFF;
}

/* main_visual 텍스트 박스: 영문/숫자 600 weight 매핑 (Inter SemiBold) */
@font-face {
    font-family: 'VisualText';
    font-style: normal;
    font-weight: 600;
    src: url('font/Inter-SemiBold.ttf') format('truetype');
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F;
}

/* =====================================================
 * 1페이지 헤더: 호버하지 않은 기본 상태에서도 로고·메뉴 텍스트를 검은색으로 표시
 * (common.css의 #header.transparent 흰색 기본값을 페이지 전용 선택자로 덮는다)
 * 이 파일은 p=1 에서만 로드되므로 다른 페이지에는 영향이 없다.
 * ===================================================== */
#header.main-header.transparent .header_top{color: #000}
#header.main-header.transparent:not(.nav-open) .header_top .logo a{
    background-image: url(/inc/img/logo_clair_header_b.svg?v=2026100101);
    background-position: center;
}
#header.main-header.transparent:not(:hover):not(.nav-open) .header_top .left ul li a,
#header.main-header.transparent:not(:hover):not(.nav-open) .header_top .user_menu ul li a,
#header.main-header.transparent:not(:hover):not(.nav-open) nav .deps_1 > li > a{
    color: #000;
}
/* 1페이지 헤더: 호버하지 않은 상태의 굵기 — 1번째 줄 350, 2번째 줄(nav) 400 */
#header.main-header.transparent:not(:hover):not(.nav-open) .header_top .left ul,
#header.main-header.transparent:not(:hover):not(.nav-open) .header_top .left ul li a,
#header.main-header.transparent:not(:hover):not(.nav-open) .header_top .left ul li a *,
#header.main-header.transparent:not(:hover):not(.nav-open) .header_top .user_menu ul,
#header.main-header.transparent:not(:hover):not(.nav-open) .header_top .user_menu ul li a,
#header.main-header.transparent:not(:hover):not(.nav-open) .header_top .user_menu ul li a *{
    font-weight: 350 !important;
}
#header.main-header.transparent:not(:hover):not(.nav-open) nav .deps_1 > li > a,
#header.main-header.transparent:not(:hover):not(.nav-open) nav .deps_1 > li > a *{
    font-weight: 400 !important;
}

.main_visual{overflow: hidden; position: relative; width: 100%; height: 100svh; padding-top: 0}
html.device-tablet .main_visual{height: 40vmax}
@media (orientation: landscape) {
    html.device-tablet .main_visual{height: 100svh; height: 100dvh}
}
.main_visual .swiper-container{width: 100%; height: 100%}
.main_visual .swiper-slide{height: auto; display: flex; justify-content: center; align-items: center}
.main_visual .swiper-slide a{display: block; position: relative; width: 100%; height: 100%}
.main_visual .swiper-slide .slide_bg{display:block; position:relative; overflow:hidden; height: 100%; width: 100%;}
.main_visual .swiper-slide .slide_bg > img{display:block; width:100%; height:100%; object-fit:cover; object-position:center;}

.main_visual .swiper-slide .text_box{position: absolute; top:0; left: 0; z-index: 1; width: 100%; height: 100%}
.main_visual .swiper-slide .text_box_wrap{display: flex; flex-direction: column; justify-content: flex-end; width: calc(100% - 160px); max-width: 1480px; height: 100%; padding: 0 20px; padding-bottom: max(calc(4.6875% + 80px), 140px); margin: 0 auto; color: #000;}
.main_visual .swiper-slide .text_box_padding {position:relative;height:100%;}
.main_visual .swiper-slide .text_box span{font-size: 22px; display: block; margin-bottom: 0px; font-weight: 200}
.main_visual .swiper-slide .text_box .en3{font-size: 18px; font-family: 'outfit';}
.main_visual .swiper-slide .text_box p{opacity: 0; transform: translateY(50px); font-family: 'outfit', 'VisualText', 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.3em; transition: opacity 0.5s 0.5s}
/* 슬라이드 문구 색: 관리자 배너 색상(bd_color1~3)이 문단 인라인 스타일로 내려오므로 검은색으로 고정한다. */
.main_visual .swiper-slide .text_box p{color: #000 !important}
.main_visual .swiper-slide .text_box p.main_tit{margin-top: 11px; font-size: 36px; font-weight: 500}
.main_visual .swiper-slide .text_box .bg_text{position: absolute; left: 50%; top: 0; transform: translate(-50%,-80%); font-size: 240px; opacity: 0.1; white-space: nowrap; line-height: 1}
.main_visual .swiper-slide.swiper-slide-active .text_box p{animation: fadetext 1.3s cubic-bezier(.4,0,.2,1) both; animation-delay: 0.3s}
.main_visual .swiper-slide.swiper-slide-active .text_box p.main_tit{animation-delay: 0.5s; font-weight: 500}
@keyframes fadetext {
    0% {opacity: 0; transform: translateY(50px)}
    100% {opacity: 1; transform: translateY(0)}
}
.main_visual .swiper-slide.swiper-slide-prev .text_box p{animation: fadetext2 1s both; animation-delay: 0s}
.main_visual .swiper-slide.swiper-slide-prev .text_box p.main_tit{animation-delay: 0s}
.main_visual .swiper-slide.swiper-slide-next .text_box p{animation: fadetext2 1s both; animation-delay: 0s}
.main_visual .swiper-slide.swiper-slide-next .text_box p.main_tit{animation-delay: 0s}
@keyframes fadetext2 {
    0% {opacity: 1; transform: translateY(0)}
    100% {opacity: 0; transform: translateY(0)}
}
/*
.main_visual .swiper-slide .view_btn{position: absolute; bottom: 62px; left: 50%; z-index: 2; transform: translateX(-50%); padding-bottom: 2px; color: #fff; font-size: var(--sub-txt); line-height: 1em;}
.main_visual .swiper-slide .view_btn::before{content: ''; position: absolute; bottom: 0; width: 0%; height: 1px; margin-left: 100%; background: #fff; transition: width 0.3s, margin-left 0.3s}
*/
.main_visual .control div{position: absolute; top: 50%; transform: translateY(-50%); width: 68px; height: 68px; margin-top: 0; background: rgba(255, 255, 255, 0.4)}
.main_visual .control div.swiper-button-prev{left: 0}
.main_visual .control div.swiper-button-next{right: 0}
.main_visual .control div::after{display: none}
.main_visual .control div i{color: #333; font-size: 28px}


    .main_visual .control div svg,
    .formula .control div svg,
    .real_model .control div svg{color: #333; font-size: 28px}
    .before_sect .control div svg{color: #333; font-size: 60px; font-weight: 100}

    /* 1페이지 슬라이더 화살표: 설화수 레퍼런스의 68px 얇은 이미지 기준 */
    .main_visual .control div.swiper-button-prev,
    .formula .control div.swiper-button-prev{
        background-image: url('/assets/icons/page1-angle-left.png?v=2026090906');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 68px 68px;
    }
    .before_sect .control div.swiper-button-prev{
        background-image: url('/assets/icons/page1-beforeafter-angle-left.png?v=2026090906');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 68px 68px;
    }
    .main_visual .control div.swiper-button-next,
    .formula .control div.swiper-button-next{
        background-image: url('/assets/icons/page1-angle-right.png?v=2026090906');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 68px 68px;
    }
    .before_sect .control div.swiper-button-next{
        background-image: url('/assets/icons/page1-beforeafter-angle-right.png?v=2026090906');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 68px 68px;
    }
    .main_visual .control div > i,
    .main_visual .control div > svg,
    .formula .control div > i,
    .formula .control div > svg,
    .before_sect .control div > i,
    .before_sect .control div > svg{
        display: none !important;
    }

.main_visual .progress_wrap{display: flex; align-items: center; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; width: calc(100% - 160px); max-width: 1480px; padding: 0 20px; margin-bottom: max(5.08%, 72px); pointer-events: none}
.main_visual .progress_wrap i{font-size: 1em}
.main_visual .progress_wrap .swiper-pagination{position: static; width: min(420px, 40%); height: 4px; background: rgba(0, 0, 0, 0.08)}
.main_visual .progress_wrap .swiper-pagination .swiper-pagination-progressbar-fill{background: #000}
.main_visual .progress_wrap div:not(.swiper-pagination){padding: 1px; margin-left: 12px; width: 30px; height: 30px; color: #000; font-size: 14px; line-height: 1; cursor: pointer; pointer-events: all;display:flex;align-items:center;}
.main_visual .progress_wrap div:not(.swiper-pagination).off{display: none}
.main_visual .progress_wrap .swiper-start:not(.swiper-pagination) img{height: 11px}
.main_visual .progress_wrap .swiper-stop:not(.swiper-pagination) img{height: 10px}

.formula .progress_wrap{display: flex; align-items: center; top: auto; bottom: -1.5%; 
left: 0;  width: 430px; max-width: 100%; position: absolute; left: 50%; transform: translateX(-50%);justify-content:space-between;}

.formula .progress_wrap i{font-size: 1em}
.formula .progress_wrap .swiper-pagination{position: static; height: 4px; 
background: rgb(221, 221, 221)}
.formula .progress_wrap .swiper-pagination .swiper-pagination-progressbar-fill{background: #000}
.formula .progress_wrap div:not(.swiper-pagination){padding: 1px; width: 30px; height: 30px; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; pointer-events: all;display:flex;align-items:center;justify-content:center;}
.formula .progress_wrap div:not(.swiper-pagination).off{display: none}
.formula .progress_wrap div:not(.swiper-pagination) img{height: 10px}

.formula .swiper-pagination{top: auto; bottom: 0; left: 0%;  width: 410px; max-width: 100%; height: 4px; background: rgb(221, 221, 221)}
.formula .swiper-pagination .swiper-pagination-progressbar-fill{background: #000}

/* 태블릿에서도 PC처럼 진행 바를 카드보다 작게 표시하고 중앙에 배치 */
html.device-tablet .formula .progress_wrap {
    left: calc(50% + 4.95px);
    width: calc(28.3333% + 21.6px);
    justify-content: flex-start;
    column-gap: 0;
}

html.device-tablet .formula .progress_wrap .swiper-pagination {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
}

html.device-tablet .formula .progress_wrap div:not(.swiper-pagination) {
    flex: 0 0 28.6px;
    width: 28.6px;
    margin-left: 0;
}


.main_contents{padding-bottom: 129px}

section{padding-top: 120px}
section .inner{width: 1480px; padding: 0 15px; margin: 0 auto; position:relative;}
section h3{margin-bottom: 20px; font-size: var(--h5-tit); font-weight: 500}
section .more{display: inline-block; width: 130px; padding: 12px 0 11px 0; margin-top: 30px; border: 1px solid #000; font-size: 14px; font-weight: 300; text-align: center; line-height: 1em; transition: all 0.3s}

/* 디에트 포뮬라 */
.formula{}
.formula .swiper-container{padding-bottom: 4rem}
.formula .swiper-slide a{display: block;}
.formula .swiper-slide{width: 478px; flex-shrink: 0;}
.formula .swiper-slide .img{position: relative; width: 478px; height: 478px; padding-top: 0}
.formula .swiper-slide .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover}
.formula .swiper-slide .txt{margin-top: 21px;}
.formula .swiper-slide .txt strong{display: block; font-size: 20px; font-weight: 500; text-align: center; font-family: 'outfit', 'Noto Sans KR', sans-serif; line-height: 1}
.formula .swiper-slide .txt strong em.outfit{font-size: 20px; font-weight: 450; line-height: 1}
.formula .swiper-slide .txt span{display: block; margin-top: 15px; color: #888; font-size: 16px; font-family: 'outfit'; text-align: center; line-height: 1;font-weight:350;}
.formula .swiper-slide .txt span + span{color: #000; margin-top: 14px}
.formula .swiper-slide .txt span.regist{position: relative; line-height: 1}
.formula .swiper-slide .txt span.regist::after{content: '®'; display: inline-block; margin-top: -2px; font-size: 17px; vertical-align: top}
.formula .control{position: absolute; width: 100%; padding-top: 478px; top: 0}
.formula .control div{position: absolute; top: 50%; transform: translateY(-50%); width: 68px; height: 68px; margin-top: 0; background: rgba(255, 255, 255, 0.4)}
.formula .control div.swiper-button-prev{left: 0}
.formula .control div.swiper-button-next{right: 0}
.formula .control div.swiper-button-disabled{display: none}
.formula .control div::after{display: none}
.formula .control div i{color: #333; font-size: 28px}


/* AI DATA */
.ai_data.pc_only{padding-top:126px}
.ai_data .cont{position: relative; padding-top: max(370px, 40%);}
.ai_data .cont img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: left;}
.ai_data .cont .txt_wrap{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 97px 104px 0 min(12%, 200px); text-align: right}
.ai_data .cont .txt_wrap strong{margin: 0; font-size: 32px; font-weight: 500; line-height: 1; font-family: 'Noto Sans KR', sans-serif}
.ai_data .cont .txt_wrap p{margin: 23px 0 0 0; font-size: 18px; font-weight: 400; line-height: 1; font-family: 'Noto Sans KR', sans-serif}
.ai_data .cont .txt_wrap p + p{margin: 10px 0 0 0}
.ai_data .cont .txt_wrap p em.outfit{font-size: 18px; font-weight: 350}
.ai_data .cont sup {font-size:calc(var(--remark)*0.7); font-weight:450;}
.ai_data .cont ul{display: flex; flex-wrap: wrap; align-content: space-between; justify-content: space-between; width: 455px; height: 65%}
.ai_data .cont ul li{width: calc(50% - 6px); text-align: right; } 
.ai_data .cont ul li:nth-child(2n){width: calc(50%); text-align: right; } 
.ai_data .cont ul li span{font-size: 18px; font-weight: 500; font-family: 'outfit', 'Noto Sans KR', sans-serif}
.ai_data .cont ul li p{font-size: 18px; font-weight: 500;padding-right:8px;line-height:1; font-family: 'outfit', 'Noto Sans KR', sans-serif}
.ai_data .cont ul li p strong{margin-right: 0.2em; font-size: 36px; font-family: 'outfit'; font-weight: 350}
/* 리얼모델 */
.real_model{}
.real_model .swiper-wrapper{align-items: stretch}
.real_model .swiper-slide{width: 50%}
.real_model .swiper-slide a{display: block; overflow: hidden; position: relative; width: 100%; padding-top: 75%; border: 1px solid #dbdbdb}
.real_model .swiper-slide-active a{}
.real_model .swiper-slide a img{position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0%); width: 100%; height: 100%; object-fit: cover; transition: height 0.3s}
.real_model .swiper-slide a .txt_wrap{position: absolute; bottom: 0; transform: translateY(calc(100% + 1.2em)); width: 100%; text-align: center; transition: transform 0.3s}
.real_model .swiper-slide a .txt_wrap::before{content: ''; position: absolute; top: -1.2em; left: -10%; width: 120%; height: 160%; background: #fff; border-radius: 100% 100% 0 0}
.real_model .swiper-slide a .txt_wrap div{position: relative; z-index: 1; padding: 0 3.5em 1.25em 3.5em; font-size: calc(var(--sub-txt))}
.real_model .swiper-slide a .txt_wrap div p{font-weight: 500}
.real_model .swiper-slide a .txt_wrap div span{display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.5em; font-size: 0.9em}
.real_model .control{position: absolute; width: 100%; padding-top: calc((50% + 2px)*0.75); top: 0}
.real_model .control div{position: absolute; top: 50%; transform: translateY(-50%); width: 68px; height: 68px; margin-top: 0; background: rgba(255, 255, 255, 0.4)}
.real_model .control div.swiper-button-prev{left: 0}
.real_model .control div.swiper-button-next{right: 0}
.real_model .control div::after{display: none}
.real_model .control div i{color: #333; font-size: 28px}
/* NEW 230524 */
.real_model .cont{    text-align: center;
    font-size: 18px;
    background: #fff;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
	flex-wrap:wrap;}
.real_model .cont .item{flex:1;}
.real_model .cont .item:nth-child(2){flex:2;margin:0 8px;}
.real_model .cont .item a{display: block; cursor: default}

	
.real_model .cont .item .txt{margin-top: 21px}
.real_model .cont .item .txt p{display: block; font-size: 20px; font-weight: 500; text-align: center; line-height: 1; font-family: 'outfit', 'Noto Sans KR', sans-serif;}
/* .real_model .cont .item .txt span{display: block; color: #888; font-size: calc(var(--sub-txt)*0.8); text-align: center; line-height: calc(var(--h6-tit)*0.9*1.5)} */
.real_model .cont .item .txt span{display: block; margin-top: 17px; color: #888; font-size: 18px; line-height:1;font-family: 'outfit', 'Noto Sans KR', sans-serif; text-align: center;font-weight:normal;}

.real_model .beforeafterLink{
    background-image: url('/assets/icons/diet-interview-plus.png?v=2026090911');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 48px 48px;
}

/* 디에트밀 & La Maison EDITON */
.package{padding-top:129px}
.package ul{display: flex; flex-wrap: wrap; justify-content: space-between}
.package ul li{flex: 1 1 calc(50% - 4px); text-align: center}
.package ul li:nth-child(2n){margin-left: 8px}
.package ul li .img{position: relative; padding-top: 84.5%}
.package ul li .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover}
.package ul li p{display: flex; align-items: baseline; justify-content: center; margin-top: 22px; font-size: var(--h5-tit); font-weight: 500; text-align: center; transition: font 0.3s}
.package ul li p em.outfit{font-weight: 450}
.package ul li p img{width: 3em; margin-right: 4px}
.package .more{margin-top:18px;}

/* #with diète */
.before_sect {padding-top: 120px;}
.before_sect h3{font-weight: 450; margin-bottom: 18px;}
.before_sect h3 em.outfit{font-weight: 450;}
.before_sect .swiper-slide{}
.before_sect .swiper-slide:before{position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background-color: #cdcdcd; opacity: 0; z-index: 3; transition: all .3s; display: none}
.before_sect .swiper-slide .img_wrap{display: flex; position: relative}
.before_sect .swiper-slide-next:before{opacity: 0; visibility: hidden}
.before_sect .swiper-slide .img_box{}
.before_sect .swiper-slide .img_box a{display: block; overflow: hidden; position: relative; width: 100%; padding-top: 100%}
/* 230526 숨김처리
.before_sect .swiper-slide .img_box a::before{content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid rgba(0, 0, 0, 0.05)}
*/
.before_sect .swiper-slide .img_box img{position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0%); width: 100%; height: 100%; object-fit: cover; transition: height 0.3s}
.before_sect .swiper-slide .img_box .txt_wrap{position: absolute; bottom: 0; transform: translateY(calc(100% + 1.2em)); width: 100%; text-align: center; transition: transform 0.3s}
.before_sect .swiper-slide .img_box .txt_wrap::before{content: ''; position: absolute; top: -1.2em; left: -10%; width: 120%; height: 160%; background: #fff; border-radius: 100% 100% 0 0}
.before_sect .swiper-slide .img_box .txt_wrap div{position: relative; z-index: 1; padding-bottom: 10px; text-align: center}
.before_sect .swiper-slide .img_box .txt_wrap div p{font-size: var(--remark)}
.before_sect .swiper-slide .img_box .txt_wrap div span{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 1.5em; font-size: var(--sub-txt); font-weight: 500}


.before_sect .swiper-slide .blur{;filter: blur(4px);-webkit-filter: blur(4px); margin: -5px}
.before_sect .swiper-slide .blur:before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; content: ""; opacity: 0.6; transition: all .3s}
.before_sect .swiper-slide .text{ position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); color: #fff ;text-align: center; width: 50%; font-family: 'outfit', 'Noto Sans KR', sans-serif}
.before_sect .swiper-slide .text p{margin-top: 20px}
.before_sect .swiper-slide .text a{border-bottom: 1px solid #fff}
.before_sect .control{position: absolute; top: 0; width: 100%; height: 100%}
.before_sect .control div{position: absolute; top: 0; width: 68px; height: 100%; margin-top: 0; background: rgba(255, 255, 255, 0.4)}
.before_sect .control div.swiper-button-prev{left: 0}
.before_sect .control div.swiper-button-next{right: 0}
.before_sect .control div.swiper-button-disabled{display: none}
.before_sect .control div::after{display: none}
.before_sect .control div i{color: #333; font-size: 60px; font-weight: 100}


/* 학술저서 */
.media{padding-top: 126px;}
.media .cont{}
.media .cont a{display: block; position: relative; padding-top: 40%; transition: padding 0.6s}
.media .cont img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover}
.media .cont .txt_wrap{display: flex; flex-direction: column; justify-content: flex-end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 0 100px 150px}
.media .cont .txt_wrap strong{margin: 0; font-size: var(--h5-tit); font-weight: 500; line-height: 1; transition: font 0.3s; font-family: 'outfit', 'Noto Sans KR', sans-serif}
.media .cont .txt_wrap strong em.outfit{font-weight: 450}
.media .cont .txt_wrap p{margin: 23px 0 0 0; font-size: var(--sub-txt); color: #000; line-height: 1; transition: font 0.3s}
.media .cont .txt_wrap p + p{margin: 10px 0 0 0}
.media .cont .more{width: 115px; padding: 12px 0 11px 0; margin: 32px 0 0 0; line-height: 1;}

.fix_btn_box{position: fixed; right: 40px; bottom: 40px; opacity: 0; z-index: 5 ; transition: all .3s; transform: translateY(100px); pointer-events: none}
.fix_btn_box.show{transform: translateX(0); opacity: 1; pointer-events: inherit}
.fix_btn_box .menu_btn_box{background-color: #000; width: 110px; min-height: 110px;border-radius: 55px; display: flex; align-items: center; justify-content: center;
    padding: 35px 10px; box-shadow: 2px 1px 25px rgb(0 0 0 / 25%);color: #fff; cursor: pointer; position: relative; transition: all .3s}
.fix_btn_box .menu_btn_box > i{display: block; font-size: 32px; position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);transition: all .3s}
.fix_btn_box .menu_btn_box ul{max-height: 0; overflow: hidden; transition: max-height 500ms , opacity .3s; opacity: 0}
.fix_btn_box .menu_btn_box ul li a{display: flex; align-items: center}
.fix_btn_box .menu_btn_box ul li + li{margin-top: 30px}
.fix_btn_box .menu_btn_box ul li .icon{ color: #fff; font-size: 15px; display: flex;align-items: center; justify-content: flex-end; opacity: 0.4; transition: all .3s; width: 25px; flex-shrink: 0}
.fix_btn_box .menu_btn_box ul li .icon img{width: 15px}
.fix_btn_box .menu_btn_box ul li .icon + span{color: #fff;display: block; font-size: 13px; margin-left: 5px; text-align: center; width: 100%}
.fix_btn_box .menu_btn_box ul .text_li{text-align: center; margin-top: 20px}
.fix_btn_box .menu_btn_box ul .text_li .call{font-size: 15px; font-weight: 700; color: #e1582c; letter-spacing: -1px; margin-bottom: 20px}
.fix_btn_box .menu_btn_box ul .text_li .time_box{font-size: 13px}
.fix_btn_box .menu_btn_box ul .text_li .time_box + .time_box{margin-top: 20px}
.fix_btn_box .meal_btn{width: 110px; height: 110px; border-radius: 50%; overflow: hidden; display: block; margin-top: 30px; background-color: #ae9776; display: flex; align-items: center; justify-content: center}
.fix_btn_box .meal_btn img{height: 70%}
.fix_btn_box .top_btn_box{width: 110px; height: 110px; border-radius: 50%;box-shadow: 2px 1px 25px rgb(0 0 0 / 15%);background-color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 30px; overflow: hidden; transition: background 0.3s ease-in-out}
.fix_btn_box .top_btn_box .top_btn{font-size: 32px; cursor: pointer; width: 100%; height: 100%; overflow: hidden}
.fix_btn_box .top_btn_box i{transition: 0.3s ease-in-out}

.beforeafterLink{position:absolute;top: 0;right: 0;width: calc(var(--h5-tit) * 1.5); height: calc(var(--h5-tit) * 1.5);}


@media (min-width: 1025px){

    .main_visual .swiper-slide.swiper-slide-active .slide_bg{/*animation: fadezoom 4s ease-in-out;*/}
    @keyframes fadezoom{
        0%{transform: scale(1.15)}
        100%{transform: scale(1)}
    }

    .main_visual .swiper-slide .view_btn:hover::before{width: 100%; margin-left: 0%; transition: width 0.3s}

    /*
    .real_model .swiper-slide a:hover img{height: 90%}
    .real_model .swiper-slide a:hover .txt_wrap{transform: translateY(0%)}

    .before_sect .swiper-slide:hover .img_box img{height: 90%}
    .before_sect .swiper-slide:hover .img_box .txt_wrap{transform: translateY(0%)}
    */

    .fix_btn_box .top_btn_box:hover{box-shadow: none; background: #000}
    .fix_btn_box .top_btn_box:hover i{color:#fff}
    .fix_btn_box .menu_btn_box:hover ul{max-height: 700px; opacity: 1}
    .fix_btn_box .menu_btn_box:hover >i{opacity: 0;visibility: hidden}
    .fix_btn_box .menu_btn_box ul li a:hover .icon{opacity: 1}

	
}




/* 모바일 */










/* PC글자 굵기 조절 */
@media (min-width: 1025px){
	section .more,
	.media .cont .txt_wrap p,
	.media .cont .more{font-weight:normal;}
}
/* 화면이 767px 이하일 경우 적용될 스타일 */


.inline_span span {display: inline-block !important;margin-top: 0 !important;}

	.mo_only_in{display:none !important;}
	.pc_only_in{display:flex !important;}



.no-scroll {position: fixed;width: 100%;}