@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400; 0,700; 1,400& family=Montserrat:ital,wght@0,100..900; 1,100..900& family=Noto+Sans+KR:wght@100..900& display=swap'); @import url("../../../../../cdn.jsdelivr.net/gh/orioncactus/pretendard%40v1.3.6/dist/web/static/pretendard-dynamic-subset.css"); @import url('https://fonts.googleapis.com/css2?family=noto+serif+kr:wght@400; 700; 800& display=swap'); @font-face { font-family: 'LotteMartHappy'; font-style: normal; font-weight: 400; src: url('http://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyMedium.woff2') format('woff2'), url('http://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyMedium.woff') format('woff'); } 

@font-face { font-family: 'LotteMartHappy'; font-style: normal; font-weight: 700; src: url('http://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyBold.woff2') format('woff2'), url('http://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartHappy/LotteMartHappyBold.woff') format('woff'); } 

.lottemarthappy { font-family: 'LotteMartHappy', sans-serif; } 

video::-webkit-media-controls { display:none !important; } 


html,body, a, img { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } 

html,body { scroll-behavior: smooth; } 
html,body,div,span,p,h1,h2,h3,h4,h5,h6,sup,ul,ol,li,a,dt,dl,table,th,td,input,select,label,section,button,strong { font-family: 'Noto Sans KR', sans-serif; color: #333; font-size:16px; letter-spacing:-0.04em; line-height:1.45; hyphens:manual; } 
* { margin: 0; padding: 0; } 
html, body { overflow-x: hidden; } 
h1,h2,h3,h4,h5,h6 { font-size: 18px; } 
ol,ul, li { list-style: none; } 
em,address { font-style: normal; } 
fieldset { border: none; } 
caption, legend { text-indent: -999999px; width: 1px; height: 1px; overflow: hidden; font-size: 1px; line-height: 1px; position: absolute; left: 0; top: 0; } 
img { vertical-align: middle; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); outline:none; } 
input[type="checkbox"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="radio"] { vertical-align: middle; } 
button, input { padding: 0; margin: 0; border: 0; } 
a { text-decoration: none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); outline:none; } 
strong { font-family:inherit; } 


:root { --mainColor:#d63d17; --Color1:#ba8e7a; --Color2:#3f332c; --Color3:#82cdbe; --f-mont:'Montserrat'; --f-NNMJ:'Noto Serif KR'; } 

::selection { background-color: #f6e5df; } 

/* 모바일바로가기 */
#mobile-btn { position: fixed; right: 0; top: 200px; z-index: 150; } 
#mobile-btn > a { display: block; width: 210px; height: 60px; background: rgba(0,0, 0, 0.6) url(../image/main/mobile_on.html) right 15px top 26px no-repeat; color:#fff; border-radius: 20px 0 0 20px; transition: all 0.3s; } 
#mobile-btn > a:hover { background-color: rgba(191, 150, 106, 1); } 
/* #mobile-btn > a:hover p { display:block; opacity: 1; transition-delay: 0.2s } */
#mobile-btn > a > p { font-size: 18px; font-weight: 500; color: #fff; text-align: center; line-height: 60px } 



/* 공통 */
.wrap { width:1200px; margin:auto; max-width:100%; min-width:1200px; } 
.w1200 { width:1200px; margin:auto; max-width:100%; min-width:1200px; } 
body .bx-wrapper { box-shadow: 0 0 0 0; margin-bottom: 0; padding: 0; border: none; background-color: transparent; } 
strong { font-size: inherit; color: inherit; } 
.flex { display: flex; } 
.hidden { height:100%; min-height:100%; overflow:hidden !important; touch-action:none; } 
.f-mont { font-family:var(--f-mont) !important; } 
.m_show { display: none !important; } 
 br.m_br { display: none; } 
 br.pc_br { display: block; } 

/* 헤더 */

#header { width:100%; } 




/* 상담신청 */
.csTel .chk-case { position:relative; display:inline-block; width:100%; margin-top:15px;; } 
.csTel .chk-case:After { display:block; content:""; clear:both; } 
.csTel .chk-case .ck-form { color:rgba(255, 255, 255, .5); font-size:16px; float:right; } 
.csTel .quick-agree { cursor: pointer; color: rgba(255, 255, 255, .5); font-size: 15px; } 
.csTel .agree-box { position: absolute; width: 323px; padding: 10px; font-size: 16px; border: 1px solid #303030; background: #fff; z-index: 1; display: none; text-align: left; bottom: 20px; left: 20px; transition:none; } 
.csTel .q-consl .f_cs { width:100%; display:inline-block; padding:15px 0 30px; } 
#agree { vertical-align:middle; margin-right:3px; color:rgba(255, 255, 255, .5); } 
.ck-form input { vertical-align:middle; color:rgba(255, 255, 255, .5); font-size:16px; } 
.ck-form label { vertical-align:middle; color:rgba(255, 255, 255, .5); font-size:16px; } 
.ck-form input::placeholder { vertical-align:middle; color:rgba(255, 255, 255, .5); } 
.agree_tit { font-size:18px; color:#c80000; } 




.q-quickWrap { display:none; } 


.mainContainer section + section { padding-top:120px; } 
.mainContainer .mcTIT span { font-family:var(--f-mont); font-weight:600; font-size:16px; display:block; line-height:1; } 
.mainContainer .mcTIT h1 { font-size:45px; font-weight:normal; } 
.mainContainer .mcTIT h1 strong { color:var(--Color1); } 
.mainContainer .mcTIT p { font-size:20px; font-weight:600; line-height:1.45; } 
.mainContainer .mcTIT h1 + p { margin-top:30px; } 


.txtWrap>h2 { color:#333; font-size: 50px; font-weight: normal; margin:0; line-height: 1.4; white-space:pre; } 
h2>.ft_mont {font-size:50px;font-family:'montserrat';}

.mc01 { width:100%; height:auto; max-height:100vh; position:relative; overflow:hidden; } 
.mc01 .bg { content:""; display:block; background:#e6d6cc; width:100%; height:100vh; } 
.mc01 .bg video {  outline:none; border:none; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; position:relative; top:-30px; width:100%; } 
.mc01 .textWrap { width:auto; height:auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1; display:flex; justify-content:center; flex-direction:column; align-items:center; } 
/*.mc01 .textWrap span { font-family: var(--f-NNMJ); font-size:20px; font-weight:600; } */
.mc01 .textWrap span { background:url(../images/main/con01_Logo.png) center center no-repeat; width:45px; height:62px; background-size:cover; } 
.mc01 .textWrap h2 { font-family: var(--f-NNMJ); color:var(--Color2); font-size:65px; font-weight:normal; margin:40px auto; position:relative; } 
/*.mc01 .textWrap h2:after { content:"Basic Wellness Center"; font-family:'Bona Nova SC'; font-size:67px; color:var(--Color2); opacity:0.05; position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); white-space:pre; font-weight:400; letter-spacing:0; z-index:-1; } */
.mc01 .textWrap hr { width:1px; height:85px; background:#333; border:none; display:block; content:""; margin:40px auto; } 
.mc01 .textWrap div { margin:40px auto; } 
.mc01 .textWrap p,.mc01 .textWrap .ft_mont { font-size:24px; text-align:center; } 
.mc01 .textWrap p + p { margin-top:15px; } 
.mc01 .textWrap a { font-family:var(--f-mont); font-size:18px; font-weight:600; text-align:center; display:block; width:250px; line-height:60px; box-sizing:border-box; border:1px solid #333; border-radius:100vw; transition:all .3s ease; } 
.mc01 .textWrap a:hover { background:#333; color:#fff; transition:all .3s ease; } 







.mc02 { padding:150px 0; } 
.mc02 .wrap { max-width:1200px; margin:0 auto; } 
.mc02 .content { display:flex; align-items:center; gap:60px; } 
.mc02 .mcTIT { width:auto; background:#fff; } 
.mc02 .mcTIT img { width:70px; margin-bottom:25px; } 
.mc02 .mcTIT h1 { font-weight:600; font-family:var(--f-mont); } 
.mc02 .mcTIT p { font-weight:normal; } 
.mc02 .mc02slider { position:relative; flex:1; overflow:hidden; } 
.mc02 .mc02swiper .swiper-slide { width:100%; max-width:290px !important; cursor:pointer; } 
.mc02 .mc02swiper .swiper-slide img { width:100%; aspect-ratio:1/1; } 
.mc02 .mc02swiper .swiper-slide .txtWrap { position:absolute; left:35px; bottom:30px; } 
.mc02 .mc02swiper .swiper-slide p { font-size:30px; color:#fff; margin:0; font-weight:bold; } 
.mc02 .mc02swiper .swiper-slide ul { display:flex; flex-direction:column; gap:5px; height:0; opacity:0; transition:all .3s ease; } 
.mc02 .mc02swiper .swiper-slide ul li { color:#fff; font-size:16px; } 

.mc02 .mc02swiper .swiper-slide:hover .txtWrap ul { height:50px; margin-top:20px; transition:all .3s ease; opacity:1; } 
.mc02 .ifWrap { display:flex; align-items:center; margin-top:80px; gap:3px; } 
.mc02 .ifWrap > div { margin:0; position:relative; left:auto; top:auto; right:auto; bottom:auto; width:60px; height:60px; background:#fff; display:flex; align-items:center; justify-content:center; box-sizing:border-box; background:#999999; border-radius:50%; } 
.mc02 .ifWrap > div:last-child { background:var(--Color1); } 
.mc02 .ifWrap > div:after { font-family:'Material Icons'; color:#fff; font-size:26px; left:auto; top:auto; right:auto; bottom:auto; left:50%; top:50%; transform:translate(-50%, -50%); position:absolute; } 

.mc02 .ifWrap > div:first-child:after { content:'west'; } 
.mc02 .ifWrap > div:last-child:after { content:'east'; } 





.mc08 { padding:150px 0 0; } 
.mc08 .w-wrap { display:flex; width:100%; justify-content:space-between; position:relative; } 
.mc08 .Box { flex:1; position:relative; display:flex; align-items:center; justify-content:center; } 
.mc08 .Box .txtWrap { position:relative; } 
.mc08 .Box .txtWrap > span { font-family:var(--f-mont); color:var(--mainColor); font-size:18px; font-weight:bold; } 
.mc08 .Box .txtWrap > h2 { font-size:50px; font-weight:normal; margin:40px 0 50px; } 
.mc08 .Box .txtWrap > p { font-size:18px; color:#333; line-height:145%; } 
.mc08 .Box01 { justify-content:flex-end; margin-right:95px; } 
.mc08 .Box01 .txtWrap:before { content:""; display:block; width:244px; height:338px; background:url(../images/main/con02_L.png) center center no-repeat; background-size:244px; position:absolute; bottom:-40%; left:-40%; } 
.mc08 .Box02 { border-radius:70px 0 0 70px; overflow:hidden; } 
.mc08 .Box02 img { width:100%; height:auto; object-fit:cover; } 





.con03 { padding:150px 0 0; } 
.mainCon03Swiper { width:100%; } 
/* 슬라이더만 확실히 동작하게 */
.mainCon03Swiper .swiper-wrapper,
.mainCon04Swiper .swiper-wrapper { display: flex !important; }
.mainCon03Swiper .swiper-slide,
.mainCon04Swiper .swiper-slide { flex-shrink: 0; }
.mainCon03Swiper .swiper-slide { width:100%; display:flex; } 
.mainCon03Swiper .swiper-slide > * { width:50%; } 
.mainCon03Swiper .swiper-slide .txtWrap { display:flex; justify-content:Center; background:url(../images/contour/main/sec03_img.jpg) center center no-repeat; background-size:cover; flex-direction:column; box-sizing:border-box; padding-left:150px; } 
.mainCon03Swiper .swiper-slide .txtWrap > span { font-family:var(--f-mont); color:var(--mainColor); font-size:18px; font-weight:bold; } 
.mainCon03Swiper .swiper-slide .txtWrap > h2 { font-size:50px; font-weight:normal; margin:40px 0 50px; } 
.mainCon03Swiper .swiper-slide .txtWrap > p { font-size:18px; color:#333; line-height:145%; } 
.mainCon03Swiper .swiper-slide .txtWrap > a { box-sizing:border-box; border-bottom:1px solid #333; font-size:18px; margin-top:50px; display:inline-block; width:fit-content; padding:0 5px 5px; font-family:var(--f-mont); } 


.mainCon03Swiper .page { width:50%; position:absolute; bottom:90px; left:0; } 
.mainCon03Swiper .swiper-pagination { width:100%; height:1px; background:#fff; content:""; display:flex; position:relative; justify-content:center; gap:170px; box-sizing:border-box; padding:0 150px; } 
.mainCon03Swiper .swiper-pagination-bullet { flex:1; width:auto; height:auto; background:none; opacity:0.3; margin:0 !important; text-align:center; position:relative; } 
.mainCon03Swiper .swiper-pagination-bullet p { color:#fff; font-size:20px; font-weight:bold; transition:all 0.3s ease; position:absolute; bottom:50px; text-align:center; left:50%; transform:translateX(-50%); white-space:pre; } 
.mainCon03Swiper .swiper-pagination-bullet span { width:8px; height:8px; margin:0 auto; background:#fff; content:""; display:block; border-radius:50%; position:relative; margin-top:-3px; } 
.mainCon03Swiper .swiper-pagination-bullet span:after { width:22px; height:22px; background:#fff; opacity:0; content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); border-radius:50%; transition:all 0.3s ease } 
.mainCon03Swiper .swiper-pagination-bullet-active { opacity:1; } 
.mainCon03Swiper .swiper-pagination-bullet-active p { font-size:24px; transition:all 0.3s ease; } 
.mainCon03Swiper .swiper-pagination-bullet-active span:after { opacity:0.5; transition:all 0.3s ease; } 

.con04 { padding:150px 0 0; margin-bottom:55px; } 
.con04 .Box { width:50%; position:relative; } 
.con04 .w-wrap { display:flex; width:100%; justify-content:space-between; align-items:flex-end; } 
.con04 .ifWrap { display:none; } 
.mainCon04Swiper { width:100%; } 
.mainCon04Swiper .swiper-slide { width:560px; box-sizing:border-box; border-radius:40px; overflow:hidden; } 
.mainCon04Swiper .swiper-slide > div { width:560px; box-sizing:border-box; aspect-ratio:1/1.339; } 
.mainCon04Swiper .swiper-slide > div > img { width:110%; aspect-ratio:1/1.339; object-fit:contain; display:block; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:all 3s ease; } 
.mainCon04Swiper .swiper-slide.swiper-slide-active > div > img { width:100%; transition:all 3s ease; } 
.con04 .Box01 { display:flex; flex-direction:column; align-items:flex-end; } 
.con04 .Box01 .txtWrap { width:100%; max-width:615px; } 
.con04 .Box01 .txtWrap > h2 { color:#333; font-size:50px; font-weight:normal; margin:0; line-height:145%; white-space:pre; } 
.con04 .Box01 .txtWrap > p { font-size:18px; color:#333; line-height:145%; } 
.con04 .Box01 .txtWrap > a { padding-bottom:10px; box-sizing:border-box; border-bottom:1px solid #333; font-size:18px; color:#333; margin-top:55px; display:inline-block; } 
.con04 .Box01 .txtList { width:100%; max-width:615px; display:flex; flex-direction:column; margin-top:110px; position:relative; } 
.con04 .Box01 .txtList:before { content:"HM CelleX"; font-size:127px; font-family:'Abril Fatface'; color:var(--mainColor); opacity:0.05; position:Absolute; top:-220px; pointer-events:none; } 
.con04 .Box01 .txtList > div { width:100%; box-sizing:border-box; border-left:1px solid #999; padding:30px 50px; box-sizing:border-box; cursor:pointer; } 
.con04 .Box01 .txtList > div h5 { font-size:30px; font-weight:bold; color:#999999; } 
.con04 .Box01 .txtList > div p { font-size:18px; color:#999999; line-height:145%; margin-top:10px; } 
.con04 .Box01 .txtList > div.active { border-left:3px solid var(--Color1); } 
.con04 .Box01 .txtList > div.active h5 { color:var(--Color1); } 
.con04 .Box01 .txtList > div.active p { color:#333; } 
.con04 .Box02 { position:relative; } 
.con04 .Box02:before { content:""; display:block; width:200%; height:740px; background:#faf7f6; position:absolute; bottom:-7%; left:-135%; z-index:-1; } 

.con05 .w-wrap {padding: 100px 250px;}
.con05 .txtWrap {text-align: center;margin-bottom:100px;}
.con05 .txtWrap .desc {margin-top:20px;}

@keyframes marquee {  0% { transform: translate3d(0, 0, 0); }  100% { transform: translate3d(-50%, 0, 0); }  }

.main-content { position: relative; z-index: 4; overflow: hidden; margin-top: calc(var(--vh, 1vh) * 200); background: #fff; } 

.about-center-section { width: 100%; padding-top: 8vw; } 
.about-center-section .about-center-wrap { padding: 0 1.2vw; } 
.about-center-section .about-center-wrap .title-wrap { margin-bottom: 6.2vw; display: flex; flex-direction: column; align-items: center; color: #ba8e7a; } 
.about-center-section .about-center-wrap .title-wrap .title { font-size: 3.96vw; margin-bottom: 0.88vw; font-weight: 800; } 
.about-center-section .about-center-wrap .title-wrap .desc { font-size: 1.96vw; font-weight: 500; } 
.about-center-section .about-center-wrap .title-wrap .round-title { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.2vw; margin-top: 2.2vw; } 
.about-center-section .about-center-wrap .title-wrap .round-title::before { content: ""; width: 0.8vw; height: 0.8vw; border-radius: 100%; background: #ba8e7a; display: block; } 
.about-center-section .about-center-wrap .title-wrap .round-title h4 { font-size: 3.2vw; font-weight: 200; } 

.about-center-accordion { display: flex; justify-content: center; gap: 0.4vw; } 
.about-center-accordion .accordion-item { width: 17.3%; height: 38.8vw; padding: 3.4vw 0 3.4vw 2.6vw; border-radius: 1.84vw; transition: all 0.3s; background-color: #ba8e7a; background-repeat: no-repeat; background-size: cover; } 
.about-center-accordion .accordion-item .tit { font-size: 3.2vw; margin-bottom: 2.1vw; font-weight: 700; color: #fff; } 
.about-center-accordion .accordion-item .desc { font-size: 1.04vw; line-height: 1.2896vw; font-weight: 500; opacity: 0; transition: opacity 0.6s 0.3s; color: #fff; } 
.about-center-accordion .accordion-item a { display: block; width: 100%; height: 100%; background-image: url("https://h-mihak.com/images/contour/main/ico-accordian-02.png"); background-repeat: no-repeat; background-position: calc(100% - 2.92vw) calc(100% - 2.12vw); background-size: 4.16vw 4.16vw; } 
.about-center-accordion .accordion-item:nth-child(2) a { background-image: url("https://h-mihak.com/images/contour/main/ico-accordian-03.png"); } 
.about-center-accordion .accordion-item:nth-child(3) a { background-image: url("https://h-mihak.com/images/contour/main/ico-accordian-04.png"); } 
.about-center-accordion .accordion-item:nth-child(4) a { background-image: url("https://h-mihak.com/images/contour/main/ico-accordian-04.png"); } 
.about-center-accordion .accordion-item:hover, .about-center-accordion .accordion-item.active { width: 48%; padding-left: 3.48vw; background-image: url("https://h-mihak.com/images/contour/main/plastic.jpg"); } 
.about-center-accordion .accordion-item:hover a, .about-center-accordion .accordion-item.active a { background-image: url("https://h-mihak.com/images/contour/main/plastic.jpg"); background-size: 4.96vw 4.96vw; } 
.about-center-accordion .accordion-item:hover .desc, .about-center-accordion .accordion-item.active .desc { opacity: 1; } 
.about-center-accordion .accordion-item:hover:nth-child(2), .about-center-accordion .accordion-item.active:nth-child(2) { background-image: url("https://h-mihak.com/images/contour/main/plastic.jpg"); } 
.about-center-accordion .accordion-item:hover:nth-child(3), .about-center-accordion .accordion-item.active:nth-child(3) { background-image: url("https://h-mihak.com/images/contour/main/plastic.jpg"); } 
.about-center-accordion .accordion-item:hover:nth-child(4), .about-center-accordion .accordion-item.active:nth-child(4) { background-image: url("https://h-mihak.com/images/contour/main/plastic.jpg"); } 

@media (max-width: 2100px){
 .about-center-section { padding-top: 10.4166666667vw; } 
 .about-center-section .about-center-wrap { padding: 0 2.9166666667vw; } 
 .about-center-section .about-center-wrap .title-wrap { margin-bottom: 8.0729166667vw; } 
 .about-center-section .about-center-wrap .title-wrap .title { font-size: 5.15625vw; margin-bottom: 1.1458333333vw; } 
 .about-center-section .about-center-wrap .title-wrap .desc { font-size: 2.5520833333vw; } 
 .about-center-section .about-center-wrap .title-wrap .round-title { gap: 2.8645833333vw; margin-top: 2.8645833333vw; } 
 .about-center-section .about-center-wrap .title-wrap .round-title::before { width: 1.0416666667vw; height: 1.0416666667vw; } 
 .about-center-section .about-center-wrap .title-wrap .round-title h4 { font-size: 4.1666666667vw; font-weight: 200; } 
 .about-center-accordion { gap: 0.4166666667vw; } 
 .about-center-accordion .accordion-item { height: 45.2604166667vw; padding: 3.8020833333vw 1.4583333333vw 3.0208333333vw 2.5vw; border-radius: 2.3958333333vw; } 
 .about-center-accordion .accordion-item .tit { font-size: 1.875vw; margin-bottom: 2.5520833333vw; } 
 .about-center-accordion .accordion-item .desc { font-size: 1.3541666667vw; line-height: 1.875vw; } 
 .about-center-accordion .accordion-item a { background-position: calc(100% - 1.9270833333vw) 100%; background-size: 5.4166666667vw 5.4166666667vw; } 
 .about-center-accordion .accordion-item:hover, .about-center-accordion .accordion-item.active { padding-left: 3.9583333333vw; } 
 .about-center-accordion .accordion-item:hover .tit, .about-center-accordion .accordion-item.active .tit { font-size: 3.3333333333vw; } 
 .about-center-accordion .accordion-item:hover a, .about-center-accordion .accordion-item.active a { background-size: 6.4583333333vw 6.4583333333vw; } 
 }
@media (min-width: 1px) and (max-width: 768px){
 .main-content { margin-top: 0; } 
 .about-center-section { padding-top: 10.4166666667vw; min-height: auto; } 
 .about-center-section .about-center-wrap { padding: 0 4.1666666667vw; } 
 .about-center-section .about-center-wrap .title-wrap { margin-bottom: 7.5520833333vw; } 
 .about-center-section .about-center-wrap .title-wrap .title { font-size: 10.4166666667vw; margin-bottom: 4.1666666667vw; line-height: 13.5416666667vw; text-align: center; } 
 .about-center-section .about-center-wrap .title-wrap .desc { text-align: center; font-size: 5.2083333333vw; } 
 .about-center-section .about-center-wrap .title-wrap .round-title { gap: 12.5vw; margin-top: 12.5vw; } 
 .about-center-section .about-center-wrap .title-wrap .round-title::before { width: 2.0833333333vw; height: 2.0833333333vw; } 
 .about-center-section .about-center-wrap .title-wrap .round-title h4 { font-size: 6.25vw; font-weight: 200; text-align: center; } 
 .about-center-accordion { gap: 2.0833333333vw; flex-direction: column; } 
 .about-center-accordion .accordion-item { width: 100%;
 height: 16.6666666667vw; padding: 0 6.25vw; border-radius: 12px; transition: height 0.5s; } 
 .about-center-accordion .accordion-item .tit { font-size: 5.2083333333vw; margin-bottom: 0; } 
 .about-center-accordion .accordion-item .desc { margin-top: 2.0833333333vw; font-size: 4.1666666667vw; line-height: 6.6666666667vw; opacity: 1; display: none; } 
 .about-center-accordion .accordion-item a { background-position: calc(100% - 3.125vw) center; background-size: 10.4166666667vw 10.4166666667vw; display:flex; justify-content:flex-start; align-items:center; } 
 .about-center-accordion .accordion-item a .desc { display:none !important; } 
 .about-center-accordion .accordion-item:hover, .about-center-accordion .accordion-item.active {width:100%; background:#ba8e7a !important; padding: 0 6.25vw !important; } 
 .about-center-accordion .accordion-item a { background:url(../images/contour/main/ico-mob-arr-right.svg) no-repeat right center !important; } 
 .tit, .about-center-accordion .accordion-item.active .tit { font-size: 5.2083333333vw !important; } 
 .desc, .about-center-accordion .accordion-item.active .desc { display: block; } 
 
}

.visible-pc { display: block; } 

.visible-mo { display: none; } 

@media (min-width: 1px) and (max-width: 768px){
 .visible-pc { display: none; } 
 .visible-mo { display: block; } 
 }
@keyframes marquee { 
 0% { transform: translate3d(0, 0, 0); } 
 100% { transform: translate3d(-50%, 0, 0); } 
 }
.principle-section { min-height: 67.0833333333vw; position: relative; } 
.principle-section .principle-wrap { padding: 0 6vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.principle-section .title-wrap { color: #ba8e7a; } 
.principle-section .title-wrap .tit { font-size: 3.68vw; font-weight: 700; display: flex; align-items: center; justify-content: center; } 
.principle-section .title-wrap .tit .progress { display: inline-block; width: 54.92vw; height: 0.06vw; margin: 0 2.14vw; background: #ba8e7a; } 
.principle-section .title-wrap .desc { margin-top: 2.72vw; font-size: 1.48vw; line-height: 1.6428vw; font-weight: 500; text-align: center; } 
.principle-section .principle-list { display: flex; justify-content: center; position: relative; width: 100%; margin-top: 2.5vw; } 
.principle-section .principle-list .list-item { width: 28.32vw; height: 28.32vw; border-radius: 28.32vw; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } 
.principle-section .principle-list .list-item .text-box { opacity: 0; display: flex; gap: 0.68vw; flex-direction: column; align-items: center; justify-content: center; color: #fff; } 
.principle-section .principle-list .list-item .text-box img { margin-bottom: 0.92vw; width: 5vw; } 
.principle-section .principle-list .list-item .text-box .tit { font-size: 3.36vw; font-weight: 400; } 
.principle-section .principle-list .list-item .text-box .desc { font-size: 1.04vw; font-weight: 400; } 
.principle-section .principle-list .list-item .round { display: block; width: 100%; height: 100%; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 50%; z-index: -1; } 
.principle-section .principle-list .list-item:nth-child(1) .round { background: rgba(188, 156, 127, 0.9); } 
.principle-section .principle-list .list-item:nth-child(2) .round { background: rgba(188, 156, 127, 0.7); } 
.principle-section .principle-list .list-item:nth-child(3) .round { background: rgba(188, 156, 127, 0.4); } 

.principle-marquee { position: absolute; top: 1.2vw; display: flex; flex-wrap: nowrap; color: rgb(244, 239, 235); animation: marquee 60s linear infinite; font-family:'montserrat'; font-size: 6.32vw; font-weight: 700; width: 520vw; -webkit-text-fill-color: #FFF; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #ba8e7a; z-index: -1; }
.principle-marquee div { display: flex; flex-wrap: wrap; } 

@media (max-width: 2100px){
 .principle-section { min-height: 67.0833333333vw; margin-top: 19.4791666667vw; } 
 .principle-section .principle-wrap { padding: 0 10.7291666667vw; } 
 .principle-section .title-wrap .tit { font-size: 4.1666666667vw; } 
 .principle-section .title-wrap .tit .progress { width: 50.5729166667vw; height: 0.1041666667vw; margin: 0 2.5vw; } 
 .principle-section .title-wrap .desc { margin-top: 2.0833333333vw; font-size: 1.25vw; line-height: 1.3875vw; } 
 .principle-section .principle-list { margin-top: 3.125vw; } 
 .principle-section .principle-list .list-item { width: 26.0416666667vw; height: 26.0416666667vw; border-radius: 26.0416666667vw; } 
 .principle-section .principle-list .list-item .text-box { gap: 3.1770833333vw; } 
 .principle-section .principle-list .list-item .text-box img { margin-bottom: 1.6666666667vw; width: 6.25vw; } 
 .principle-section .principle-list .list-item .text-box .tit { font-size: 3.3333333333vw; } 
 .principle-section .principle-list .list-item .text-box .desc { font-size: 1.0416666667vw; } 
 .principle-marquee { margin-top: -19.4791666667vw; position: inherit; font-size: 7.2916666667vw; width: 677.0833333333vw; } 
 }
@media (min-width: 1px) and (max-width: 768px){
 .principle-section { min-height: auto; margin-top: 31.25vw; padding-top: 31.25vw; } 
 .principle-section .principle-wrap { position: static; padding: 0 6.25vw; transform: translate(0) !important; } 
 .principle-section .title-wrap .tit { font-size: 5.2083333333vw; opacity: 1 !important; } 
 .principle-section .title-wrap .tit .progress { width: 50vw; height: 0.5208333333vw; margin: 0 2.0833333333vw; display: none !important; } 
 .principle-section .title-wrap .desc { opacity: 1 !important; margin-top: 4.1666666667vw; font-size: 3.6458333333vw; line-height: 5.8958333333vw; } 
 .principle-section .principle-list { margin-top: 6.5104166667vw; flex-wrap: wrap; position: relative; height: 85.9375vw; } 
 .principle-section .principle-list .list-item { width: 46.875vw; height: 46.875vw; border-radius: 46.875vw; margin: 0 !important; transform: none !important; position: absolute; } 
 .principle-section .principle-list .list-item:first-child { left: 50%; transform: translateX(-50%) !important; } 
 .principle-section .principle-list .list-item:nth-child(2) { top: 39.0625vw; left: 0; } 
 .principle-section .principle-list .list-item:last-child { top: 39.0625vw; right: 0; } 
 .principle-section .principle-list .list-item .text-box { gap: 2.6041666667vw; opacity: 1 !important; } 
 .principle-section .principle-list .list-item .text-box img { width: 10.4166666667vw; margin-bottom: 2.0833333333vw; } 
 .principle-section .principle-list .list-item .text-box .tit { font-size: 6.25vw; } 
 .principle-section .principle-list .list-item .text-box .desc { font-size: 3.6458333333vw; text-align: center; } 
 .principle-section .principle-list .list-item .round { display: block; width: 46.875vw !important; height: 46.875vw !important; opacity: 1 !important; position: absolute; left: 50%; bottom: 0 !important; transform: translateX(-50%); border-radius: 50%; z-index: -1; } 
 .principle-marquee { margin-top: -31.25vw; margin-bottom: 31.25vw; position: inherit; font-size: 7.2916666667vw; width: 2604.1666666667vw; } 
 }
 
.visible-pc { display: block; } 

.visible-mo { display: none; } 

@media (min-width: 1px) and (max-width: 768px){
 .visible-pc { display: none; } 
 .visible-mo { display: block; } 
 }
@keyframes marquee { 
 0% { transform: translate3d(0, 0, 0); } 
 100% { transform: translate3d(-50%, 0, 0); } 
 }


.con07 { margin-bottom:150px; } 
.con07 .w-wrap { display:flex; width:100%; justify-content:space-between; max-width:1200px; margin:0 auto; gap:40px; flex-direction:column; align-items:center; } 
.con07 .Box01 .txtWrap > h2 { color:#333; font-size:50px; font-weight:normal; margin-bottom:50px; line-height:1; text-align:center; } 
.con07 .Box02 { display:flex; flex-direction:row; border:none; width:100%; gap:15px; flex-wrap:wrap; } 
.con07 .Box02 > div { display:flex; width:100%; justify-content:space-between; box-sizing:border-box; padding:40px; align-items:center; border-bottom:1px solid #ddd; cursor:pointer; } 
.con07 .Box02 > div { padding:0; width:calc(16.66% - 12.5px); } 
.con07 .Box02 .img { aspect-ratio:1/1; max-width:390px; width:100%; } 
.con07 .Box02 .img img { object-fit:cover; width:100%; height:100%; } 
.con07 .Box02 .date { display:flex; flex-direction:column; align-items:center; gap:20px; } 
.con07 .Box02 .date h2 { font-size:52px; font-weight:bold; color:#333; line-height:1; } 
.con07 .Box02 .date p { font-size:20px; color:#333; line-height:1; } 
.con07 .Box02 .txt { margin-left:90px; margin-right:30px; display:flex; flex-direction:column; gap:25px; width:730px; } 
.con07 .Box02 .txt p { font-size:20px; color:#333; font-weight:bold; } 
.con07 .Box02 .txt span { width: 100%; display:block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size:18px; color:#666666; } 
.con07 a.link { display:inline; text-align:center; font-size:18px; padding-bottom:8px; border-bottom:1px solid #333; width:fit-content; } 



#topBtn { position:absolute; bottom:60px; right:60px; z-index:1; width:60px; height:60px; } 
#topBtn img { width:60px; height:60px; object-fit:cover; cursor:pointer; } 



img.pc { display:block; } 
img.mo { display:none; }  


/* footer */


	footer{background:#333; padding:40px 0 55px; overflow:hidden; text-align:center;}
	footer ul{display:flex; align-items:Center; justify-content:center;}
	footer ul li{color:#999; font-size:14px; display:flex; align-items:Center; line-height:1;}
	footer ul li a{color:#ccc; font-size:16px; display:flex; align-items:Center; line-height:1;}
	footer ul li + li{margin-left:20px; padding-left:20px; border-left:1px solid #ccc; line-height:1;}
	footer .ft_logo{width:40px; margin:0 auto}
	footer .ft_logo img{width:100%;}
	footer .ft_link{margin:30px auto;}
	footer .ft_info{margin:30px auto 5px;}
	footer .ft_copy{color:#999; font-size:14px;}


	@media screen and (max-width:850px){

	.modal-Bg{position:fixed; content:""; width:1000vw; height:1000vh; background:rgba(0, 0, 0, 0.8); top:0; left:0; display:block; pointer-events:none; top:-9999vh; left:-9999vw; z-index:9;}
	.modal-Bg.active{top:0; left:0;}
	
	footer{background:#333; padding:8.00vw 0 26.67vw; overflow:hidden; text-align:center;}
	footer ul{display:flex; align-items:Center; justify-content:center; flex-wrap:wrap;}
	footer ul li{color:#999; font-size:3.80vw; display:flex; align-items:Center; line-height:1;}
	footer ul li a{color:#ccc; font-size:4.20vw; display:flex; align-items:Center; line-height:1;}
	footer ul li + li{margin-left:2.67vw; padding-left:2.67vw; border-left:0.13vw solid #ccc; line-height:1;}
	footer .ft_logo{width:6.00vw; text-align:center; display:block; margin:0 auto}	
	footer .ft_link{margin:4.00vw auto;}
	footer .ft_info{margin:4.00vw auto 0.67vw; padding:0 5.33vw; gap:2.67vw;}
	footer ul.ft_info li + li{border:none; padding:0;}
	footer .ft_copy{color:#999; font-size:3.80vw;}
	
	}