@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {width:100%; max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}
.contain2 { width:100%; max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto; }
.contain:after {content:""; display:block; clear:both;}

#container>div { overflow: hidden;}
#ws-wrapper {display:flex; min-height:100vh;}

#ws-header {width:200px; background:#fafafa; box-shadow:0 0 5px rgba(0,0,0,.2);}

.ws-menu .ui {display:block; padding:13px 0; background:#5e31a1; color:#fff; font-size:18px; font-weight:700; line-height:1.5em; letter-spacing:-.03em; text-align:center; border-bottom:2px solid #3c2065;}
.ws-menu h2 {font-family:"Roboto",sans-serif; font-size:15px; color:#fff; line-height:1.3em; padding:7px 0; text-align:center; background:#7952b3; }
.ws-menu ul {display:flex; flex-wrap:wrap;}
.ws-menu ul li {width:100%; border-bottom:1px solid #e5e5e5;}
.ws-menu ul li.w50 {width:50%; border-right:1px solid #e5e5e5;}
.ws-menu ul li.w50:nth-child(2n) {border-right:0;}
.ws-menu ul li a {display:block; color:#333; text-decoration:none; font-size:13px; font-weight:300; line-height:1.4em; letter-spacing:-.04em; padding:5px 5px 5px 11px;}
.ws-menu ul li a:hover,
.ws-menu ul li.active a {background:#eee; color:#653ba4; font-weight:500; padding-left:14px;}

#ws-content {flex:1 1 auto; min-width:0; width:1%; padding:30px;}

.ws-title {display:flex; align-items:center; padding-bottom:15px; margin-bottom:50px; border-bottom:1px solid #ddd;}
.ws-title h2 {flex:1 1 auto; min-width:0; width:1%; font-size:30px; line-height:1.3em; letter-spacing:-.04em;}

.btn-psd-download {display:inline-block; padding:8px 20px; font-family:"Roboto",sans-serif; color:#fff; font-size:16px; font-weight:500; line-height:1.3em; background:#7952b3; border-radius:4px;}
 
.ws-real-cont {max-width:1200px; margin:0 auto;}

/* header */
#header {position:sticky; top:-131px; width:100%; z-index:101; transition: .2s; }

.hd-top { background: #f2f2f2; }
.hd-top .links { display: flex; justify-content: flex-end; gap: 20px; }
.hd-top .links a { display: flex; height: 40px; align-items: center; font-size: 14px; font-weight: 500; line-height: 1em; padding-left: 11px; position: relative; }
.hd-top .links a::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 3px; border-radius: 3px; background: #505050; bottom: 0; margin: auto; }

.hd-mid { position: relative; height: 90px; display: flex; align-items: center;}

.sitelogo {position:absolute; z-index:2; background-image:url("../images/common/logo.png"); background-size: contain; background-repeat: no-repeat; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.sitelogo a {display: block;}
.sitelogo img {visibility: hidden;}

.healthpromotion .sitelogo { background-image: url(../images/center_common/logo.png);}

.hd-swiper { max-width: 288px; position: relative; margin: 0; }
.hd-swiper .item a { display: flex; align-items: flex-start; width: 100%; padding: 0 30px; }
.healthpromotion .hd-swiper .item a { align-items: center;}
.hd-swiper .item .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 12px; }
.hd-swiper .item .info .tt { font-weight: 600; color: #121212; }
.hd-prev::after, .hd-next::after { display: none; }
.hd-prev, .hd-next { top: 50%; transform: translateY(-50%); margin-top: 0; width: 10px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.hd-prev { left: 0; background-image: url(../images/common/hd-prev.png);}
.hd-next { right: 0; background-image: url(../images/common/hd-next.png);}

.hd-btm { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fff; }
.hd-btm .contain { display: flex; align-items: center; }
.hd-btm .contain::after { content: none;}
#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%; padding-left: 40px; } 
#gnb>ul {display:flex; justify-content:flex-end; } 
#gnb>ul>li { padding: 0 0; flex: 1;}
#gnb>ul>li:last-child { padding-right: 0; }
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction: column; justify-content:center; height:60px; color:#121212; font-size:var(--font-size18); font-weight:600; line-height:1.75em; }
#gnb>ul>li:hover>a { color: var(--color-primary);}

.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff;}
#gnb .submenu { display: none; max-width: 1460px; position: absolute; left: 0; right: 0; width: 100%; margin: auto; text-align: left; z-index: 1; }
#gnb .submenu .fx { display: flex; padding: 40px 30px 70px; align-items: flex-start; width: calc(100% - 370px); height: 100%; margin-right: 370px; }
#gnb .submenu .left { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 40px; height: 100%; }
#gnb .submenu .left h4 { font-size: var(--font-size22); line-height: 1.4em; color: #121212; font-weight: 700; }
#gnb .submenu .left p { font-size: var(--font-size18); line-height: 1.5em; }
#gnb .submenu .left ul { display: flex; flex-wrap: wrap; gap: 30px; padding-top: 30px; margin-top: 25px; border-top: 1px solid #ddd; position: relative; }
#gnb .submenu .left ul::before { content: ""; position: absolute; left: 0; top: -2px; width: 50px; height: 3px; background: var(--color-primary);}
#gnb .submenu .left ul>li { width: calc(100%/5 - 24px); }
.healthpromotion #gnb .submenu .left ul>li { width: calc(100%/4 - 23px); }
#gnb .submenu .left ul>li>a { display: block; padding: 10px 15px; border-radius: 4px; background: #F5F5F5; font-size: var(--font-size20); font-weight: 500; line-height: 1em; color: #121212; margin-bottom: 10px; }
#gnb .submenu .left .links a { display: block; position: relative; padding: 4px 0; padding-left: 13px; font-size: var(--font-size18); line-height: 1.5em;}
#gnb .submenu .left .links a:hover { color: var(--color-primary);}
#gnb .submenu .left .links a::before { content: ""; position: absolute; left: 0; top: 15px; width: 5px; height: 5px; border-radius: 5px; background: #ddd; }

/* 공유 우측 패널 — .submenu-bg 내부 */
.gnb-right-panel { display: flex; justify-content: flex-end; position: absolute; top: 0; right: 0; max-width: 1460px; margin: 0 auto; padding: 40px 30px; pointer-events: none; z-index: 1; width: 100%; left: 0; }
.gnb-right-panel .right { pointer-events: auto; max-width: 340px; width: 100%; }
.hd-reserve-bnr { width: 100%; height: 200px; background: url(../images/common/submenu-ban-bg.jpg) center no-repeat; background-size: cover; border-radius: 16px; }
.hd-reserve-bnr a { display: flex; flex-direction: column; justify-content: space-between; color: #fff; padding: 20px; height: 100%; align-items: flex-start;}
.hd-reserve-bnr .info { color: #fff; }
.hd-reserve-bnr .info .tt { font-size: var(--font-size18); line-height: 1.444em; font-weight: 600; }
.hd-reserve-bnr .info .txt { font-size: 14px; font-weight: 400; line-height: 1.3em; }
.hd-reserve-btn { display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0;}
.hd-reserve-btn a { display: flex; align-items: center; justify-content: center; width: calc(100%/2 - 10px); height: 66px; border-radius: 8px; border: 1px solid #DDD; color: #878787; line-height: 1.62em; font-weight: 400; }
.hd-reserve-btn a:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary);}
.hd-reserve-call { position: relative; }
.hd-reserve-call a { display: block; padding: 33px 20px; border-radius: 16px; background: #3f72a0; color: #fff; overflow: hidden;}
.hd-reserve-call .txt { font-size: 14px; line-height: 1.6em; font-weight: 400; margin-bottom: 10px; }
.hd-reserve-call .tt { font-size: var(--font-size36); line-height: 1em; font-weight: 600; }
.hd-reserve-call img { position: absolute; right: -15px; bottom: -30px; }

.list-icon { width:26px; height:22px; text-align:center; text-indent:-9999em; z-index:50; transition:all 0.5s linear; display: inline-block; position: relative; background: url(../images/common/menu.png) center no-repeat; background-size: contain; }
.list-icon.on { width: 22px; background-image: url(../images/common/menu-close.png);}

.mobile-navigation {display:none; position:fixed; top:0; left:0; right:0; width:100%; max-height:100vh; overflow-y:auto; background:#fff; z-index:9999; padding: 40px 0;}
.mobile-navigation .group { margin-bottom: 80px; }
.mobile-navigation .group:last-child { margin-bottom: 0; }
.mobile-navigation .group h4 { position: relative; color: #121212; font-weight: 700; line-height: 1.2em; padding-left: 15px; margin-bottom: 7px; font-size: var(--font-size22);}
.mobile-navigation .group h4::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 5px; background: var(--color-primary);}
.mobile-navigation .group p { font-size: var(--font-size18); line-height: 1.5em; }
.mobile-navigation .group ul { display: flex; flex-wrap: wrap; gap: 36px; padding-top: 30px; margin-top: 25px; border-top: 1px solid #ddd; position: relative; }
.mobile-navigation .group ul::before { content: ""; position: absolute; left: 0; top: -2px; width: 50px; height: 3px; background: var(--color-primary);}
.mobile-navigation .group ul>li { width: calc(100%/6 - 30px); }
.healthpromotion .mobile-navigation .group ul>li { width: calc(100%/4 - 27px); }
.mobile-navigation .group ul>li>a { display: block; padding: 10px 15px; border-radius: 4px; background: #F5F5F5; font-size: var(--font-size20); font-weight: 500; line-height: 1em; color: #121212; margin-bottom: 10px; }
.mobile-navigation .group .links a { display: block; position: relative; padding: 4px 0; padding-left: 13px; font-size: var(--font-size18); line-height: 1.5em;}
.mobile-navigation .group .links a:hover { color: var(--color-primary);}
.mobile-navigation .group .links a::before { content: ""; position: absolute; left: 0; top: 15px; width: 5px; height: 5px; border-radius: 5px; background: #ddd; }

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-overlay {display:block; top:0;}

/* 키비주얼관리 */
.main-visual {position:relative; height:570px;}
.main-visual .slick-slide {position:relative; height:570px; overflow:hidden;}
.main-visual .item {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-visual .item img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}

.main-visual .caption { position: absolute; left: 0; text-align: left; width: 100%; top: 40%; transform: translateY(-50%); }
.main-visual .caption .txt { width: 100%; transform:translateX(-50px); opacity: 0; transition:opacity 0s 2s, transform 0s 2s; color: #fff; }
.main-visual .items .slick-active .caption .txt { transform:translateX(0); opacity:1; transition:opacity 2s, transform 1s; transition-delay:0.6s;}
.main-visual .items .reset-animation .caption .txt { transform:translateX(-50px); opacity:0; transition:all 0s}
.main-visual .caption h4 { line-height: 1.66em; font-weight: 500; font-size: var(--font-size22); margin-bottom: 5px; }
.main-visual .caption h4 span { font-weight: 700; }
.main-visual .caption h2 { font-size: 64px; font-weight: 700; line-height: 1.34em; }
.main-visual .caption .chk { margin-top: 18px; }
.main-visual .caption .chk p { position: relative; padding-left: 30px; line-height: 1.5em; font-size: var(--font-size22); font-weight: 400; margin-bottom: 5px; }
.main-visual .caption .chk p:last-child { margin-bottom: 0; }
.main-visual .caption .chk p::before { content: ""; position: absolute; left: 0; width: 18px; height: 18px; top: 8px; background: url(../images/center_main/visual-chk.png) center no-repeat; background-size: contain;}

.main-visual .slick-dots { z-index: 50; position: absolute; max-width: 1460px; padding-left: 30px; padding-right: 30px; left: 0; right: 0; margin: auto; bottom: 30%; }
.main-visual .slick-dots li { display: inline-block; margin: 0 10px; }
.main-visual .slick-dots li button { width: 10px; height: 10px; padding: 0; margin: 0; cursor: pointer; text-indent: -9999px; overflow: hidden; border: none; transition: .3s; background: rgba(255,255,255,0.64); border-radius: 8px; }
.main-visual .slick-dots li.slick-active { position: relative; }
.main-visual .slick-dots li.slick-active button { background: #fff; width: 60px; }

.main-visual .reserve { position: absolute; max-width: 720px; width: 100%; position: absolute; bottom: 80px; right: 20px; border-radius: 16px; border: 2px solid #323D51; background: rgba(50, 61, 81, 0.80); backdrop-filter: blur(2px); padding: 30px; display: flex; align-items: center;}
.main-visual .reserve .info { flex: 1 1 auto; min-width: 0; width: 1%; display: flex; justify-content: space-between; align-items: center; }
.main-visual .reserve .info .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding: 0 20px;}
.main-visual .reserve .info .txtbox .tt { font-size: var(--font-size22); font-weight: 600; line-height: 1.36em; margin-bottom: 9px; color: #fff; }
.main-visual .reserve .info .txtbox .txt { color: rgba(255,255,255,0.8); font-size: var(--font-size18); font-weight: 500; line-height: 1.55em; }
.main-visual .reserve .info .btns { width: 140px; }
.main-visual .reserve .info .btns a { display: flex; width: 100%; height: 46px; align-items: center; justify-content: center; color: #fff; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.70); font-weight: 500; line-height: 1.62em; margin-bottom: 12px; }
.main-visual .reserve .info .btns a:last-child { margin-bottom: 0; }

/* 메인 퀵메뉴 */
.main-quick { position: relative; z-index: 1; margin-top: -60px; overflow: unset !important;}
.main-quick .inbox { height: 120px; background: #fff; border-radius: 16px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16); overflow: hidden; display: flex; align-items: center;}
.main-quick .inbox .tt { height: 100%; width: 90px; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; line-height: 1em; }
.main-quick .inbox .long { flex: 1 1 auto; min-width: 0; width: 1%; display: flex; justify-content: space-between; padding-left: 60px; height: 100%; align-items: center;}
.main-quick .inbox .info h5 { line-height: 1.4em; font-size: 16px; font-weight: 600; color: var(--color-primary); margin-bottom: 5px; }
.main-quick .inbox .info h4 { line-height: 1.2em; font-size: var(--font-size24); font-weight: 400; color: #121212; }
.main-quick .inbox .info h4 strong { font-weight: 700; }
.main-quick .inbox .links { display: flex; height: 100%; }
.main-quick .inbox .links a { height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 60px; gap: 12px; font-size: var(--font-size18); font-weight: 600; color: #121212; line-height: 1em; position: relative; }
.main-quick .inbox .links a::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 2px; height: 20px; background: #ddd; }
.main-quick .inbox .links a:last-child::after { display: none; }

/* 메인 공통 */
.main-pd { padding: 120px 0; }
.main-prev::after, .main-next::after { display: none; }
.main-prev, .main-next { width: 64px; height: 64px; border-radius: 64px; margin-top: 0; background-color: #fff; background-repeat: no-repeat; background-position: center; border: 1px solid #ddd; background-size: 10px; transition: .3s;}
.main-prev { background-image: url(../images/main/main-prev.png);}
.main-prev:hover { background-color: var(--color-primary); border-color: var(--color-primary); background-image: url(../images/main/main-prev-w.png);}
.main-next { background-image: url(../images/main/main-next.png);}
.main-next:hover { background-color: var(--color-primary); border-color: var(--color-primary); background-image: url(../images/main/main-next-w.png);}
.main-titbox { margin-bottom: 60px; }
.main-titbox.tc { text-align: center; }
.main-titbox.fx { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; align-items: flex-end;}
.main-tit { font-size: var(--font-size48); line-height: 1.3em; font-weight: 700; color: #121212; margin-bottom: 24px; }
.main-txt { font-size: var(--font-size20); line-height: 1.6em; font-weight: 400; }
.main-view { padding: 17px 40px 16px; display: inline-block; border-radius: 8px; border: 1px solid #DDD; color: #878787; font-weight: 500; line-height: 1.3em; transition: .3s;}
.main-view:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary);}
.main-view.black { background: #fff; border-color: #121212; color: #121212; }
.main-view.black:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.main-view.bg { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.main-view.bg2 { background: #878787; border-color: #878787; color: #fff; }

/* 메인 */
.sec1 { overflow: unset !important; background: url(../images/main/sec1-bg.jpg) center no-repeat; background-size: cover; padding-top: 180px; }
.sec1-swp { position: relative; margin: 0 -10px;}
.sec1 .main-prev { left: -114px;}
.sec1 .main-next { right: -114px;}
.sec1-swiper { padding: 30px 10px;}
.sec1-swiper .item { transition: .3s;}
.sec1-swiper .item a { border-radius: 16px; background: #FFF; position: relative; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16); overflow: hidden; padding: 40px; display: block; }
.sec1-swiper .item a::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border-radius: 16px; border: 2px solid var(--color-primary); opacity: 0; transition: .3s;} 
.sec1-swiper .item .num { text-align: right; line-height: 1em; font-size: var(--font-size20); font-weight: 700; color: #505050; margin-bottom: 45px; }
.sec1-swiper .item .tt { margin: 30px 0; font-size: var(--font-size24); font-weight: 600; line-height: 1.33em; color: #121212; }
.sec1-swiper .item:hover { transform: translateY(-30px);}
.sec1-swiper .item a:hover::before { opacity: 1; }
.sec1-swiper .item a:hover .main-view { background: var(--color-primary); color: #fff; border-color: var(--color-primary);}

.sec2 { padding-top: 120px; }
.sec2 .main-tit { margin-bottom: 0; }
.sec2-tab { display: flex; justify-content: flex-end; gap: 10px; }
.sec2-tab li { width: auto;}
.sec2-tab li a { display: inline-flex; align-items: center; justify-content: center; padding: 0 30px; height: 48px; border-radius: 24px 8px; border: 1px solid #DDD; font-weight: 600; color: #878787; font-weight: 600; }
.sec2-tab li.active a,
.sec2-tab li a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.sec2-swiper .item a { display: block; }
.sec2-swiper .item .thumb { padding-bottom: 56%; display: block; overflow: hidden; position: relative; border-radius: 16px; }
.sec2-swiper .item .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.sec2-swiper .item .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 16px; border: 1px solid #ddd;}
.sec2-swiper .item .fx { display: flex; margin: 30px 0 20px; gap: 24px; font-size: 14px; font-weight: 400; line-height: 1em; }
.sec2-swiper .item .fx .ctr { position: relative; color: var(--color-primary); font-weight: 600; }
.sec2-swiper .item .fx .ctr::after { content: ""; position: absolute; right: -13px; width: 1px; height: 18px; background: #ddd; top: 0; bottom: 0; margin: auto; }
.sec2-swiper .item .fx .date { color: #878787;}
.sec2-swiper .item .tt { font-size: var(--font-size20); line-height: 1.5em; font-weight: 600; color: #121212; max-height:3em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.sec2-btbox { margin-top: 40px; display: flex; align-items: center;}
.sec2-btbox .btns { position: relative; margin-right: 50px; display: flex; gap: 10px; }
.sec2-prev, .sec2-next { position: relative; top: auto; left: auto !important; right: auto !important ;}
.sec2 .swiper-pagination-progressbar { flex: 1 1 auto; min-width: 0; width: 1%; position: relative; bottom: auto !important; top: auto !important; height: 2px; background: #ddd; }
.sec2 .swiper-pagination-progressbar-fill { background: #878787; }

.sec3 { position: relative; overflow: unset !important;}
.sec3 .contain { position: relative; }
.sec3::before { content: ""; position: absolute; z-index: -1; background: linear-gradient(180deg, rgba(227, 99, 7, 0.00) 60%, #E36307 100%); width: 100%; left: 0; bottom: 0; height: 67vh; opacity: 0.2; }
.healthpromotion .sec3::before { display: none; }
.sec3-wrap { display: flex; gap: 20px; flex-wrap: wrap;}
.sec3-wrap .item { width: calc(100%/4 - 15px); }
.sec3-wrap .item a { display: block; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.16); }
.sec3-wrap .item img { width: 100%; }
.sec3-wrap .item .front { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32); font-size: var(--font-size32); font-weight: 600; line-height: 1.2em; opacity: 1; transition: .3s;}
.sec3-wrap .item .back { position: absolute; width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 16px; color: #fff; left: 0; top: 0; background: linear-gradient(180deg, rgba(227, 113, 7, 0.90) 0%, var(--main_01, rgba(227, 99, 7, 0.90)) 100%); opacity: 0; transition: .3s;}
.sec3-wrap .item .back .tt { font-size: var(--font-size32); line-height: 1.2em; font-weight: 700; }
.sec3-wrap .item .back .txt { margin: 25px 0 60px; font-size: var(--font-size18); line-height: 1.44em; font-weight: 400; }
.sec3-wrap .item .back .view { display: inline-block; width: 50px; height: 50px; margin: auto; background: url(../images/main/sec3-view.png) center no-repeat; background-size: contain; }
.sec3-wrap .item a:hover .front { opacity: 0; }
.sec3-wrap .item a:hover .back { opacity: 1; }
.sec3-symbol { position: absolute; right: 0; bottom: -320px; }

/* .sec4 { overflow: unset !important;} */
.sec4-top { margin-bottom: 120px; position: relative; }
.sec4-top::before { content: ""; position: absolute; left: 0; top: 130px; width: 220px; height: 2px; background: var(--color-primary); opacity: 0.4; }
.sec4-top-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 39px; position: relative; z-index: 1; }
.sec4-top-wrap .col { width: calc(100%/3 - 26px); border-radius: 16px; background: #FFF; box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.16); transition: .3s; position: relative; overflow: hidden; }
.sec4-top-wrap .col a { padding: 50px; display: block; }
.sec4-top-wrap .col>* { position: relative; z-index: 1; }
.sec4-top-wrap .col::after { content: ""; position: absolute; inset: 0; border-radius: 16px; opacity: 0; transition: opacity .3s; background-size: cover; background-position: center; z-index: 0; }
.sec4-top-wrap .col:hover::after { opacity: 1; }
.sec4-top-wrap .col.title { box-shadow: none; background: transparent; border-radius: 0; padding: 0; }
.sec4-top-wrap .col.title .main-tit { font-size: var(--font-size56); margin-bottom: 0; }
.sec4-top-wrap .col h4 { font-size: var(--font-size18); line-height: 1.2em; color: var(--color-primary); font-weight: 400; margin-bottom: 10px; transition: .3s;}
.sec4-top-wrap .col h3 { font-size: var(--font-size26); color: #121212; font-weight: 700; line-height: 1.2em; margin-bottom: 50px; transition: .3s;}
.sec4-top-wrap .col .fx { display: flex; justify-content: space-between; align-items: center;}
.sec4-top-wrap .col .fx img { transition: opacity .3s; }
.sec4-top-wrap .col:hover .fx img { opacity: 0; }
.sec4-top-wrap .col .txt { font-size: var(--font-size18); line-height: 1.44em; transition: .3s;}
.sec4-top-wrap .col .view { display: inline-block; width: 50px; height: 50px; margin: auto; background: url(../images/main/sec3-view.png) center no-repeat; background-size: contain; opacity: 0; visibility: hidden; transition: opacity .3s; display: none; margin: 0; }
.sec4-top-wrap .col:hover .view { opacity: 1; visibility: visible; }
.sec4-top-wrap .col.jt { display: flex; justify-content: center; text-align: left; font-size: var(--font-size24); line-height: 1.58em;}
.sec4-top-wrap .col.jt strong { font-weight: 600; color: var(--color-primary);}
.sec4-top-wrap .col.bg1::after { background-image: url(../images/main/sec4-top-on1.jpg);}
.sec4-top-wrap .col.bg2::after { background-image: url(../images/main/sec4-top-on1.jpg);}
.sec4-top-wrap .col.bg3::after { background-image: url(../images/main/sec4-top-on1.jpg);}
.sec4-top-wrap .col.bg4::after { background-image: url(../images/main/sec4-top-on1.jpg);}
.sec4-top-wrap .col a:hover h4 { color: #fff;}
.sec4-top-wrap .col a:hover h3 { color: #fff;}
.sec4-top-wrap .col a:hover .txt { color: #fff;}
.sec4-top-wrap .col a:hover .fx .img { display: none; }
.sec4-top-wrap .col a:hover .fx .view { display: inline-block; }
.sec4-btm { position: relative; }
.sec4-btm .circle { width: 500px; height: 500px; position: absolute; left: -340px; top: -140px; border-radius: 100%; background: rgba(227, 99, 7, 0.10); filter: blur(40px); }
.sec4-btm-wrap { display: flex; gap: 20px; }
.sec4-btm-wrap .item { width: calc(100%/4 - 15px); transition: .3s; overflow: hidden; position: relative; }
.sec4-btm-wrap .item>* { position: relative; z-index: 1; }
.sec4-btm-wrap .item::after { content: ""; position: absolute; inset: 0; border-radius: 16px; opacity: 0; transition: opacity .3s; background-size: cover; background-position: center; z-index: 0; }
.sec4-btm-wrap .item.bg1::after { background-image: url(../images/main/sec5-bg1.jpg);}
.sec4-btm-wrap .item.bg2::after { background-image: url(../images/main/sec5-bg2.jpg);}
.sec4-btm-wrap .item.bg3::after { background-image: url(../images/main/sec5-bg3.jpg);}
.sec4-btm-wrap .item.bg4::after { background-image: url(../images/main/sec5-bg4.jpg);}
.sec4-btm-wrap .item:hover::after { opacity: 1; }
.sec4-btm-wrap .item a { display: block; padding: 60px 40px; border-radius: 16px; border: 1px solid #ddd; position: relative; transition: 0;}
.sec4-btm-wrap .item .tt { font-size: var(--font-size28); color: #121212; font-weight: 700; line-height: 1.2em; transition: .3s;}
.sec4-btm-wrap .item .txt { line-height: 1.5em; color: #878787; margin: 25px 0 30px; transition: .3s;}
.sec4-btm-wrap .item .hash { display: flex; margin-bottom: 100px; gap: 10px; flex-wrap: wrap;}
.sec4-btm-wrap .item .hash span { padding: 6px 8px; line-height: 1.2em; font-size: 14px; color: #878787; display: inline-block; border-radius: 4px; background: #F4F4F4; letter-spacing: -.04em; transition: .3s;}
.sec4-btm-wrap .item .view { display: inline-block; padding-right: 15px; position: relative; line-height: 1em; color: var(--color-primary); font-weight: 600; font-size: 14px; transition: .3s;}
.sec4-btm-wrap .item .view::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 5px; height: 10px; background: url(../images/main/sec5-view.png) center no-repeat; background-size: contain; transition: .3s;}
.sec4-btm-wrap .item .icon { position: absolute; right: 0; bottom: 0; opacity: 1; }
.sec4-btm-wrap .item a:hover .tt { color: #fff;}
.sec4-btm-wrap .item a:hover .txt { color: #fff;}
.sec4-btm-wrap .item a:hover .hash span { color: #fff; background: rgba(255, 255, 255, 0.10);}
.sec4-btm-wrap .item a:hover .view { color: #fff;}
.sec4-btm-wrap .item a:hover .view::after { background-image: url(../images/main/sec5-view-w.png);}
.sec4-btm-wrap .item a:hover .icon { opacity: 0; }

.sec5 { background: #faf7f5; }
.sec5-flex { display: flex; }
.sec5-flex .video-wrapper { width: 64.2%; }
.sec5-flex .video-wrapper .video-container { border-radius: 16px; }
.sec5-flex .info { width: 35.8%; padding-left: 50px; }
.sec5-flex .info .col { margin-bottom: 20px; }
.sec5-flex .info .col:last-child { margin-bottom: 0; }
.sec5-flex .info .col a { display: flex; align-items: center;}
.sec5-flex .info .col .thumb { width: 155px; margin-right: 30px; }
.sec5-flex .info .col .thumb>div { position: relative; padding-bottom: 100%; display: block; overflow: hidden; border-radius: 16px; }
.sec5-flex .info .col .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.sec5-flex .info .col .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; }
.sec5-flex .info .col .txtbox .hash { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.sec5-flex .info .col .txtbox .hash span { line-height: 1em; font-size: 14px; font-weight: 400; color: #878787; }
.sec5-flex .info .col .txtbox .tt { font-size: var(--font-size20); line-height: 1.5em; font-weight: 600; color: #121212; margin: 10px 0 20px; max-height:3em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.sec5-flex .info .col .txtbox .date { font-size: 14px; line-height: 1em; }

.sec6 { padding-top: 0; position: relative; }
.sec6::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; background: #FAF7F5; z-index: -1; }
.sec6-flex { display: flex; align-items: flex-end; position: relative; top: -100px; }
.sec6-flex .info { width: 58%; text-align: right; padding-right: 60px; }
.sec6-btns { display: flex; position: relative; gap: 10px; margin: 80px 0 40px; justify-content: flex-end;}
.sec6-flex h5 { line-height: 1.2em; font-weight: 400; font-size: 16px; margin-bottom: 7px; transition: opacity 0.3s ease; }
.sec6-flex h3 { font-size: var(--font-size40); line-height: 1.2em; color: #121212; font-weight: 600; transition: opacity 0.3s ease; }
.sec6-flex h5.txt-fade, .sec6-flex h3.txt-fade { opacity: 0; }
.sec6-prev, .sec6-next { position: relative; top: auto; margin-top: 0; }
.sec6-prev { left: auto;}
.sec6-next { right: auto;}
.sec6-img { display: flex; gap: 10px; }
.sec6-img .img { width: calc(100%/3); border-radius: 16px; overflow: hidden;}
.sec6-flex .image { width: 60.7%; margin-right: -20%; border-radius: 16px 0 0 16px; overflow: hidden;}
.sec6-flex .image img { width: 100%; }

/* sub */ 
.sub-visual {position:relative; height:350px; background-repeat: no-repeat; background-position: center; background-size: cover; display: block; }

.sub-visual.bg1-1-1 {background-image:url("../images/sub/sub-visual1-1-1.jpg");}
.sub-visual.bg1-1-2 {background-image:url("../images/sub/sub-visual1-1-2.jpg");}
.sub-visual.bg1-1-3 {background-image:url("../images/sub/sub-visual1-1-3.jpg");}
.sub-visual.bg1-1-4 {background-image:url("../images/sub/sub-visual1-1-4.jpg");}
.sub-visual.bg1-1-5 {background-image:url("../images/sub/sub-visual1-1-5.jpg");}
.sub-visual.bg1-1-6 {background-image:url("../images/sub/sub-visual1-1-6.jpg");}
.sub-visual.bg1-1-7 {background-image:url("../images/sub/sub-visual1-1-7.jpg");}
.sub-visual.bg1-2-1 {background-image:url("../images/sub/sub-visual1-2-1.jpg");}
.sub-visual.bg1-2-2 {background-image:url("../images/sub/sub-visual1-2-2.jpg");}
.sub-visual.bg1-2-3 {background-image:url("../images/sub/sub-visual1-2-3.jpg");}
.sub-visual.bg1-4 {background-image:url("../images/sub/sub-visual1-4.jpg");}
.sub-visual.bg1-5 {background-image:url("../images/sub/sub-visual1-5.jpg");}
.sub-visual.bg2-1-1 {background-image:url("../images/sub/sub-visual2-1.jpg");}
.sub-visual.bg2-1-2 {background-image:url("../images/sub/sub-visual2-2.jpg");}
.sub-visual.bg2-1-3 {background-image:url("../images/sub/sub-visual2-3.jpg");}
.sub-visual.bg2-2-1 {background-image:url("../images/sub/sub-visual2-4.jpg");}
.sub-visual.bg2-2-2 {background-image:url("../images/sub/sub-visual2-5.jpg");}
.sub-visual.bg2-2-3 {background-image:url("../images/sub/sub-visual2-6.jpg");}
.sub-visual.bg2-2-4 {background-image:url("../images/sub/sub-visual2-7.jpg");}
.sub-visual.bg2-2-5 {background-image:url("../images/sub/sub-visual2-8.jpg");}
.sub-visual.bg2-2 {background-image:url("../images/sub/sub-visual2-9.jpg");}
.sub-visual.bg2-3 {background-image:url("../images/sub/sub-visual2-10.jpg");}
.sub-visual.bg2-4 {background-image:url("../images/sub/sub-visual2-11.jpg");}
.sub-visual.bg2-5 {background-image:url("../images/sub/sub-visual2-12.jpg");}
.sub-visual.bg2-6 {background-image:url("../images/sub/sub-visual2-13.jpg");}
.sub-visual.bg3-1 {background-image:url("../images/sub/sub-visual3-1.jpg");}
.sub-visual.bg3-2-1 {background-image:url("../images/sub/sub-visual3-2.jpg");}
.sub-visual.bg3-2-2 {background-image:url("../images/sub/sub-visual3-3.jpg");}
.sub-visual.bg3-2-3 {background-image:url("../images/sub/sub-visual3-4.jpg");}
.sub-visual.bg3-2-4 {background-image:url("../images/sub/sub-visual3-5.jpg");}
.sub-visual.bg3-2-5 {background-image:url("../images/sub/sub-visual3-6.jpg");}
.sub-visual.bg3-2-6 {background-image:url("../images/sub/sub-visual3-7.jpg");}
.sub-visual.bg3-2-7 {background-image:url("../images/sub/sub-visual3-8.jpg");}
.sub-visual.bg3-2-8 {background-image:url("../images/sub/sub-visual3-9.jpg");}
.sub-visual.bg3-3 {background-image:url("../images/sub/sub-visual3-10.jpg");}
.sub-visual.bg3-4-1 {background-image:url("../images/sub/sub-visual3-11.jpg");}
.sub-visual.bg3-4-2 {background-image:url("../images/sub/sub-visual3-12.jpg");}
.sub-visual.bg4-5-1 {background-image:url("../images/sub/sub-visual4-5-1.jpg");}
.sub-visual.bg4-5-2 {background-image:url("../images/sub/sub-visual4-5-2.jpg");}
.sub-visual.bg4-5-3 {background-image:url("../images/sub/sub-visual4-5-3.jpg");}
.sub-visual.bg4-6 {background-image:url("../images/sub/sub-visual4-6.jpg");}
.sub-visual.bg4-9 {background-image:url("../images/sub/sub-visual4-9.jpg");}
.sub-visual.bg4-10 {background-image:url("../images/sub/sub-visual4-10.jpg");}
.sub-visual.bg5-2 {background-image:url("../images/sub/sub-visual5-2.jpg");}
.sub-visual.bg5-5 {background-image:url("../images/sub/sub-visual5-5.jpg");}
.sub-visual.bg5-6 {background-image:url("../images/sub/sub-visual5-6.jpg");}
.sub-visual.bg6-1 {background-image:url("../images/sub/sub-visual6-1.jpg");}
.sub-visual.bg6-2 {background-image:url("../images/sub/social-event.jpg");}
.sub-visual.bg7-3 {background-image:url("../images/sub/sub-visual7-3.jpg");}
.sub-visual.bg7-4 {background-image:url("../images/sub/sub-visual7-4.jpg");}
.sub-visual.bg7-5-1 {background-image:url("../images/sub/sub-visual7-5-1.jpg");}
.sub-visual.bg7-5-2 {background-image:url("../images/sub/sub-visual7-5-2.jpg");}
.sub-visual.bg7-8 {background-image:url("../images/sub/sub-visual7-8.jpg");}
.sub-visual.bg7-9 {background-image:url("../images/sub/sub-visual7-9.jpg");}

.healthpromotion .sub-visual.bg1-1-1 {background-image:url("../images/center_sub/sub-visual1-1-1.jpg");}
.healthpromotion .sub-visual.bg1-1-2 {background-image:url("../images/center_sub/sub-visual1-1-2.jpg");}
.healthpromotion .sub-visual.bg1-1-3 {background-image:url("../images/center_sub/sub-visual1-1-3.jpg");}
.healthpromotion .sub-visual.bg1-1-4 {background-image:url("../images/center_sub/sub-visual1-1-4.jpg");}
.healthpromotion .sub-visual.bg1-1-5 {background-image:url("../images/center_sub/sub-visual1-1-5.jpg");}
.healthpromotion .sub-visual.bg1-1-6 {background-image:url("../images/center_sub/sub-visual1-1-6.jpg");}
.healthpromotion .sub-visual.bg1-1-7 {background-image:url("../images/center_sub/sub-visual1-1-7.jpg");}
.healthpromotion .sub-visual.bg1-1-8 {background-image:url("../images/center_sub/sub-visual1-1-8.jpg");}
.healthpromotion .sub-visual.bg1-2-1 {background-image:url("../images/center_sub/sub-visual1-2.jpg");}
.healthpromotion .sub-visual.bg1-2-2 {background-image:url("../images/center_sub/sub-visual1-3.jpg");}
.healthpromotion .sub-visual.bg1-2-3 {background-image:url("../images/center_sub/sub-visual1-4.jpg");}
.healthpromotion .sub-visual.bg1-3 {background-image:url("../images/center_sub/sub-visual1-5.jpg");}
.healthpromotion .sub-visual.bg2 { background-image: url("../images/center_sub/sub-visual2-1.jpg");}
.healthpromotion .sub-visual.bg3-1 { background-image: url("../images/center_sub/sub-visual3-1.jpg");}
.healthpromotion .sub-visual.bg3-2 { background-image: url("../images/center_sub/sub-visual3-2.jpg");}
.healthpromotion .sub-visual.bg3-3 { background-image: url("../images/center_sub/sub-visual3-3.jpg");}
.healthpromotion .sub-visual.bg5-1 { background-image: url("../images/center_sub/sub-visual5-1.jpg");}
.healthpromotion .sub-visual.bg5-4 { background-image: url("../images/center_sub/sub-visual5-4.jpg");}

.path-wrap {position:relative; z-index:50; margin: 20px 0 40px; }
.path-wrap .wrap {max-width:1400px; margin:0 auto; }
.path-wrap .inner { display:flex; gap: 25px; align-items: center;}
.path-wrap .home a {display:block; width:24px; height:24px; background:url("../images/sub/home.png") 50% 50% no-repeat; background-size:contain; text-indent:-999em; overflow:hidden; }
.path-wrap .part {position:relative; min-width:auto; z-index:50;}
.path-wrap .part::before { content: ""; position: absolute; left: -15px; top: 0; bottom: 0; margin: auto; width: 5px; height: 5px; border-radius: 5px; background: #ccc; }
.path-wrap .part > a {display:flex; align-items:center; position:relative; color:#878787; font-size:16px; font-weight:700; line-height:1.3em; padding-right: 34px;}
.path-wrap .part > a:after {content:""; position:absolute; top:50%; right:0; margin-top:-13px; width:24px; height:24px; background:url("../images/sub/path-down.png") 50% 55% no-repeat; border-radius: 24px; border: 1px solid #ddd; background-size: 9px; transition: .3s;}
.path-wrap .part ul {display:none; position:absolute; left:-1px; right:-1px; z-index:50; min-width: 200px; padding: 14px 0; border-radius: 16px; background: var(--color-primary); top: 30px; transform-origin: top center; }
.path-wrap .part ul.path-open { animation: pathDropOpen 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.path-wrap .part ul.path-close { animation: pathDropClose 0.18s ease-out forwards; }
@keyframes pathDropOpen { from { opacity: 0; transform: translateY(-8px) scaleY(0.9); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
@keyframes pathDropClose { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-5px); } }
.path-wrap .part ul li {color:rgba(255,255,255,0.7); line-height:1.3em; }
.path-wrap .part ul li a {display:block; padding:6px 20px;}
.path-wrap .part ul li a:hover,
.path-wrap .part ul li.active a { color: #fff; font-weight: 700; padding-left: 25px; }
.path-wrap .part.active>a::after { transform: rotate(180deg);}
.path-wrap .part:last-child .page-name { color: #121212;}

.lnb-wrap { max-width: 1400px; margin: auto; margin-bottom: 40px; }
.lnb-wrap.mg { margin-bottom: 0; }
.lnb ul {display:flex; gap: 10px; }
.lnb ul li { text-align:center; transition: .3s; width: auto; flex: 1;}
.lnb ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:50px; padding:0 10px; color:#878787; font-size:18px; font-weight:600; line-height:1.44em; letter-spacing:-.03em; border-radius: 8px; background: #eee; transition: .2s;}
.lnb ul li.active a,
.lnb ul li a:hover { color: #fff; background: var(--color-primary); }

#contArea {max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.sub-title { position: relative; text-align: center; margin-bottom: 40px; }
.sub-title h2 { font-size: var(--font-size48); font-weight: 700; line-height: 1.2em; color: #121212; }
.sub-title.mg { margin-bottom: 0; }

.real-cont {min-height:300px; padding: 120px 0 180px;}
.real-cont.p0 { padding-top: 0; }
.real-cont2 { padding-bottom: 0; }

.sub-quick { padding: 50px 0; background: #F4F4F4; }
.sub-quick .contain { display: flex; flex-wrap: wrap; gap: 20px; }
.sub-quick .contain::after { content: none;}
.sub-quick .item { width: calc(100%/2 - 10px); }
.sub-quick .item a { display: flex; align-items: center; padding: 50px; border-radius: 16px; border: 1px solid #ddd; background: #fff; }
.sub-quick .item .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 20px; }
.sub-quick .item .tt { font-size: var(--font-size28); color: #121212; font-weight: 600; line-height: 1.35em; }
.sub-quick .item .txt { line-height: 1.4em; font-size: var(--font-size18); font-weight: 400; margin: 20px 0 25px;}
.sub-quick .item .view { display: inline-flex; height: 50px; align-items: center; padding: 0 30px; color: #fff; border-radius: 8px; background: #878787; line-height: 1em; font-size: var(--font-size18); font-weight: 600; transition: .3s}
.sub-quick .item a:hover .view { background: var(--color-primary);}

/* footer */
#footer { width: 100%; z-index: 1; position: relative;}
#footer .contain { display: flex; justify-content: space-between; }
#footer .contain::after { content: none;}
.ft-top { background: #232a38; }
.ft-top .top { color: #fff; padding: 25px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.20); }
.ft-top .top ul { display: flex; gap: 40px; }
.ft-top .top ul li { display: flex; align-items: center; font-size: var(--font-size18); line-height: 1.2em; font-weight: 400; gap: 12px; position: relative; }
.ft-top .top ul li::after { content: ""; position: absolute; right: -21px; width: 1px; height: 20px; background: rgba(255,255,255,0.7); top: 2px; }
.ft-top .top ul li:last-child::after { display: none; }
.ft-top .top ul li .txt strong { font-weight: 600; }
.ft-top .btm { padding: 25px 0;}
.ft-top .btm .links { display: flex; gap: 30px; }
.ft-top .btm .links a { display: inline-block; font-weight: 400; color: rgba(255,255,255,0.7); line-height: 1.2em; position: relative; }
.ft-top .btm .links a::after { content: ""; position: absolute; right: -15px; width: 1px; height: 15px; background: rgba(255,255,255,0.7); top: 2px; }
.ft-top .btm .links a:last-child::after { display: none; }
.ft-btm { position: relative; }
.ft-btm .contain { display: block !important ; }
.ft-btm .top { padding: 30px 0; display: flex; justify-content: space-between; align-items: center;}
.familysite {position:relative; display:inline-block; width:160px; z-index: 9; }
.familysite .toggle-button {display:flex; justify-content:space-between; align-items:center; width:100%; height: 45px; padding:0 20px; background:none; border:1px solid #ddd; color:#878787; font-weight:400; line-height:1em; text-align:left; font-size: 15px; border-radius: 8px; }
.familysite .toggle-layer {display:none; position:absolute; left:0; width:100%; background:#fff; border:1px solid #ddd; border-radius: 8px; top: 50px; padding: 10px 0; background: #fff; }
.familysite .toggle-layer a {display:block; padding:4px 15px; color:#878787; font-weight:400; line-height:1.5em; font-size: 15px; }
.familysite .toggle-layer a:hover { color: var(--color-primary); font-weight: 600; }
.familysite.active .toggle-button img {transform:scaleY(-1);}
.ft-btm .mid { padding: 30px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; display: flex;}
.ft-btm .mid ul { display: flex; width: 100%; }
.ft-btm .mid ul li { flex: 1; }
.ft-btm .mid ul li>a { display: block; font-size: var(--font-size18); font-weight: 600; line-height: 1.2em; margin-bottom: 25px; }
.ft-sub a { display: block; color: #878787; line-height: 1.5em; margin-bottom: 15px; }
.ft-sub a:last-child { margin-bottom: 0; }
.ft-sub a:hover { color: var(--color-primary); }
.ft-btm .btm { padding: 30px 0; display: flex; justify-content: space-between; align-items: flex-start;}
.ft-text { margin-bottom: 55px; }
.ft-text span { display: inline-block; padding-right: 30px; position: relative; margin-bottom: 10px; line-height: 1.44em; font-size: var(--font-size18); color: #878787; }
.ft-text span::after { content: ""; position: absolute; right: 14px; width: 1px; height: 16px; background: #878787; top: 4px; }
.ft-text span.af::after { display: none; }
.ft-text span strong { display: inline-block; color: #505050; font-weight: 700; padding-right: 10px; }
.ft-text span.fz { font-size: 16px; padding-right: 20px; }
.ft-text span.fz::after { right: 8px; top: 5px; height: 13px; }
.cpr { color: #878787; font-size: 14px; font-weight: 400; line-height: 1.2em; }
.cpr span { display: inline-block; padding-right: 30px; position: relative; }
.cpr a { display: inline-block; }
.ft-ars { text-align: right; }
.ft-ars h5 { color: #878787; font-size: 16px; font-weight: 600; line-height: 1.2em; margin-bottom: 12px; }
.ft-ars h3 { color: var(--color-primary); font-weight: 600; font-size: var(--font-size40); line-height: 1em; margin-bottom: 40px; }
.ft-sns { display: flex; gap: 5px 15px; flex-wrap: wrap; justify-content: flex-end;}
.ft-sns a { display: inline-block; }
.scroll-top { width: 60px; height: 60px; border-radius: 60px; background: #fff5ed; text-align: center; padding-top: 31px; line-height: 1em; font-size: 12px; font-weight: 700; color: rgba(227, 99, 7, 0.68); display: block; position: relative; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.20); margin: auto; }
.scroll-top::before { content: ""; position: absolute; left: 0; right: 0; margin: auto; width: 12px; height: 9px; background: url(../images/common/top.png) center no-repeat; background-size: contain; top: 17px; }
.quick { position: fixed; z-index: 999; width: 140px; text-align: center; right: 10px; bottom: 40px; }
.quick-btn { display: inline-flex; width: 60px; height: 60px; border-radius: 72px; align-items: center; justify-content: center; background: var(--color-primary); transition: .2s; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.20); margin-bottom: 10px; }
.quick-btn img { transition: .2s;}
.quick-btn.active { background: #505050;}
.quick-btn.active img { transform: rotate(45deg);}
.quick .list { position: absolute; bottom: calc(100% + 10px); left: 0; width: 100%; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px) scale(0.95); transform-origin: bottom center; pointer-events: none; transition: opacity .25s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.quick .list.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.quick .list a { display: flex; align-items: center; justify-content: flex-start; text-align: left; margin-bottom: 10px; height: 48px; border-radius: 24px; background: var(--color-primary); color: #fff; padding-left: 30px; gap: 8px; }
.quick .list span { font-size: 15px; font-weight: 500; line-height: 1em; padding-top: 2px; display: inline-block; }