/* 커스텀 CSS */
*, *::before, *::after {
text-wrap-style: balance;
word-break: keep-all;
}
.soundonly {
display:none;
}
#container {
margin-top: 90px !important;
}
#sub_visual,
body:not(:has(#sub_visual)) .scontents {
padding-top: 60px !important;
}
body {
font-family:"Noto Sans KR"!important;
}
@media screen and (max-width: 1099px) {
#container {
margin-top: 60px !important;
}
#sub_visual,
body:not(:has(#sub_visual)) .scontents {
padding-top: 20px !important;
}
}
#header,
#header[class~=header_on] {
background: #FFF !important;
transition: unset !important;
}
#header h1 {
z-index: 1;
}
#header h1 > a:after {
content: "";
display: block;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
width: 100%;
aspect-ratio: 1 / 0.18;
background-size: 100% 100%;
position: absolute;
top: 65%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
#header[class~=header_on] h1 > a:after,
[class~=jbFixed] [class~=header_in] h1:has( + #lnb:hover) > a:after {
opacity: 1;
}
#lnb {
float: unset;
display: flex;
justify-content: center;
width: 100%;
}
#lnb [class~=lnb_wrap] > ul > li > a {
color: #000;
text-align: center;
}
#lnb [class~=lnb_wrap] > ul > li[class~=current] > a,
#lnb [class~=lnb_wrap] > ul > li[class~=actived] > a {
color: #000;
}
#lnb [class~=lnb_sub] li a {
color: #000;
}
#lnb [class~=lnb_sub] li a:hover {
color: #000;
}
#gnbb {
position: absolute;
top: 20px;
}
#mobile_header [class~=inner] {
background: #FFF;
}
#mobile_header [class~=m_gnb] li[class~=category] a i {
color: #000;
}
/* 문의 버튼 */
.btn-nutri8,
[class~=jbFixed] [class~=header_in] #gnbb a.btn-nutri8 {
position: relative;
display: inline-flex;
height: auto;
padding: 0.75rem !important;
justify-content: center;
align-items: center;
border-radius: 3.75rem;
background: linear-gradient(180deg, #FF7E46 0%, #D64000 100%);
color: #FFF !important;
font-size: 1.125rem !important;
font-style: normal;
font-weight: 600;
line-height: normal !important;
overflow: hidden;
transition: all 0.3s;
}
#gnbb a.btn-nutri8,
[class~=jbFixed] [class~=header_in] #gnbb a.btn-nutri8 {
padding: 0.75rem 3rem !important;
}
.btn-nutri8:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00000010;
transform: translateY(100%);
transition: transform 0.3s ease-in-out;
}
.btn-nutri8:hover:after {
transform: translateY(0);
}
/* */
.more-button {
display: inline-flex;
align-items: center;
margin-top: 5.56rem;
color: #000;
font-size: 1.5rem;
font-style: normal;
font-weight: 900;
line-height: 150%; /* 2.25rem */
text-transform: uppercase;
}
.more-button .ico-arrow {
margin-left: 0.63rem;
}
.more-button:hover .ico-arrow {
transform: translateX(0.5rem);
}
.ico-arrow {
display: inline-block;
background: url('data:image/svg+xml,') no-repeat;
width: 2.7rem;
height: 1rem;
transition: transform 0.3s;
}
.desktop-view {
display: block;
}
.mobile-view {
display: none;
}
.mobile-img-wrap {
width:100%;
}
.mobile-img-wrap img {
width:100%;
}
@media screen and (max-width: 768px) {
.more-button {
margin-top: 5.8667vw;
font-size: 3.7333vw;
}
.more-button .ico-arrow {
margin-left: 1.8667vw;
}
.desktop-view {
display: none;
}
.mobile-view {
display: block;
}
}
/* */
.menu-section {
width: 100%;
padding: 0 5rem;
margin: 0 auto;
max-width: 1300px;
}
.menu-wrap {
width: 100%;
margin: 0 auto;
margin-top: 4.74rem;
padding: 0 5rem;
max-width: 1720px;
}
.menu-title {
color: #000;
font-size: 2.23244rem;
font-style: normal;
font-weight: 700;
line-height: 2.3625rem;
letter-spacing: 0.02125rem;
text-transform: uppercase;
margin-bottom: 1.6rem;
display: block;
}
/*.menu-title:has( + .menu-opt-content) {
margin-bottom: 3.2552vw;
}
.menu-title:has( + .menu-opt-content .menu-opt-desc) {
margin-bottom: 3.2552vw;
}*/
.menu-opt-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 2.5rem;
}
.menu-opt-desc {
color: #444;
font-size: 1.2rem;
font-style: normal;
font-weight: 400;
line-height: 1.64rem; /* 153.162% */
letter-spacing: 0.017rem;
}
.menu-opt-items {
flex: 1;
}
.menu-opt-tag-list {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 0.2rem;
margin-top: 1.58rem;
}
.menu-opt-tag-list > li {
padding: 0.45rem 0.85rem;
border-radius: 1.5rem;
color: #838383;
font-size: 0.88595rem;
font-style: normal;
font-weight: 400;
line-height: 1.08rem; /* 121.905% */
letter-spacing: 0.017rem;
border: 1px solid #DDD;
transition: all 0.3s;
}
.menu-opt-tag-list > li:before {
content: '#';
}
.menu-opt-tag-list > li.active {
color: #FFF;
border-color: #000;
background: #000;
font-weight: 600;
}
.menu-btn-more {
color: #000;
font-size: 0.8rem;
font-style: normal;
font-weight: 700;
line-height: 1.12rem; /* 140% */
letter-spacing: 0.017rem;
margin-bottom: 0.5rem;
}
.menu-btn-more > svg {
transition: transform 0.2s ease-in;
}
.menu-btn-more:hover > svg {
transform: translateX(6px);
}
@media screen and (max-width: 768px) {
.menu-section {
padding: 0 5.3385vw;
}
.menu-wrap {
margin-top: 19.5313vw;
padding: 0 5.3385vw;
}
.menu-title {
font-size: 4.6875vw;
line-height: 5.2083vw;
letter-spacing: 0.0000vw;
margin-bottom: 3.2552vw;
}
.menu-title:has( + .menu-opt-content) {
margin-bottom: 3.2552vw;
}
.menu-opt-content {
margin-bottom: 2.6042vw;
}
.menu-opt-desc {
font-size: 2.8vw;
line-height: 3.46vw;
letter-spacing: 0.0000vw;
}
.menu-opt-tag-list {
margin-top: 3.1250vw;
gap: 0.7813vw;
}
.menu-opt-tag-list > li {
padding: 0.7813vw 1.3021vw;
border-radius: 3vw;
font-size: 2.1vw;
line-height: 2.6vw;
letter-spacing: 0.0000vw;
}
.menu-btn-more {
font-size: 1.8229vw;
line-height: 2.0833vw;
letter-spacing: 0.0000vw;
margin-bottom: 0.7813vw;
}
}
/* 랜딩 공통 */
.menu-bg {
position: relative;
width: 100%;
}
.menu-bg > h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFF;
/*font-family: Prata;*/
font-size: 4rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 6rem */
text-transform: uppercase;
}
.menu-bg > img {
width: 100%;
height: auto;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.menu-bg {
height: 350px;
}
.menu-bg > h2 {
font-size: 9.0667vw;
width: 100%;
text-align: center;
}
.menu-bg > img {
height: 100%;
}
}
.kakao_opentalk_wrap {position: fixed;bottom: 20px;right: 70px;width: 80px;height: 80px;cursor: pointer;z-index: 1000;}
.kakao_opentalk_wrap img {width:100%; height:100%;}
.one_minutes {display:none;}
.nav-tabs { display: none;
padding-bottom: 5rem;
/*display: flex;*/
justify-content: center;
}
.nav-tabs .nav-link {display: none;
padding-left:20px;
padding-right:20px;
color:#666;
}
.nav-tabs .nav-link.active {display: none;
color:#000;
}
.tab-content {
padding-top: 20px;
}
.about-slide {overflow:hidden;margin:0 auto;}
.about-section-content {overflow:hidden;}
.board_top_section {
margin-top: 90px;
padding: 4rem 0;
display: flex;
flex-direction: column;
align-items: center;
background: #171717;
overflow: hidden;
}
.board_top_section .title {
font-size: clamp(2.5rem, 4vw, 3.75rem);
font-weight:600;
color:#fff;
}
.board_top_section .context p {
font-size: clamp(1rem, 2vw, 1.5rem);
color:#fff;
text-align:center;
}
.board_top_section .context p:first-child {
margin-top:2rem;
}
.board_top_section .hashtag {
margin-top:2rem;
display:flex;
align-items: center;
}
.board_top_section .hashtag li {
font-size: clamp(0.75rem, 1vw, 1rem);
color: #fff;
text-align: center;
border: 1px solid #fff;
border-radius: 1.5rem;
padding: clamp(0.2rem, 0.5vw, 0.3rem) clamp(0.75rem, 2vw, 1rem);
margin: 0 clamp(0.3rem, 1vw, 0.5rem);
}
.board_top_section .hashtag li.active {
color: #000;
background: #fff;
}
@media screen and (max-width: 1099px) {
.board_top_section {
margin-top: 0;
padding-top: 6rem;
}
}
@media (min-width: 1300px) {
.about-slide {
width:1300px;
}
}
@media screen and (max-width: 768px) {
.kakao_opentalk_wrap {display:none;bottom: 70px;right: 20px;width: 70px;height: 70px;}
.one_minutes {
display:block;
position:fixed;
bottom:0;left:0;
z-index:1000;
background: linear-gradient(90deg, #FB956A, #FF7E46, #DD5D26 );
width:100%;
color:#fff;
font-size:1.2rem;
font-weight: 600;
padding:1rem 0;
text-align:center;
text-decoration: none;
animation-name: gradient;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.one_minutes:before {
content: "";
z-index: -1;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(90deg, #FB956A, #FF7E46, #DD5D26 );
background-size: 400%;
opacity: 0;
transition: 0.5s;
}
.one_minutes:before {
opacity: 1;
animation-name: gradient;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.board_top_section {
margin-top: 0;
padding: 7rem 0 3.5rem;
font-size: 2rem;
}
.nav-tabs {
padding-bottom: 3rem;
display: none;
}
}
@keyframes gradient {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}