* { margin: 0; padding: 0; } 

ul { list-style: none; } 

/* common */
.inner { width: 100%; max-width: 1400px; margin: auto; } 

header { padding: 0 10rem; height: 100px; justify-content: center; line-height: 100px; display: flex; } 
.logo a { width: 10vw; display: block; } 
.logo img { width: 100%; vertical-align: middle; } 

.sns_section { min-width: 20rem; display: flex; justify-content: flex-start; align-items: center; } 

.sns_list { display: flex; } 

.sns_list li { width: auto; margin-left: 0.625rem; } 

.sns_list li a { padding: 0; } 

.spotmenu1 a { width: 100px; height: 40px; background: var(--primary); color: #fff; border-radius: 50px; padding: 1rem; } 

/* nav */
nav { width: 100%; } 

nav::before { content: ''; left: 0; top: 100px; width: 100%; position: absolute; background: var(--background); transition: all 0.5s; height: 0; z-index: 11; } 

.gnb { display: flex; position: relative; z-index: 13; width: 880px; } 

.gnb a { color: var(--text1); display: block; font-weight: bold; } 

.gnb > li > a { color: var(--text1); } 

.gnb li { width: 25%; text-align: center; } 

.sub { height: 0; overflow: hidden; } 

.sub li { width: 100%; text-align: center; line-height: 2.5; } 

.gnb:hover .sub { height: inherit; } 

header:hover :before {content: ''; height: 350px; } 

/* 배너 */
.banner .slide { width: 100%; height: calc(100vh - 100px); } 

.bx-controls-direction { display: none; } 

.bx-pager { display: none; } 

.banner .slide_wrap img { width: 100%; height: calc(100vh - 100px); } 

/* 메인 */
main .s1 { height: 100vh; display: flex; flex-direction: row; justify-content: center; margin-top: -2px; } 

main section.menu { position: relative; width: 100%; height: 100vh; } 

main section.menu .menu_img { position: absolute; width: 30vw; left: 50%; top: 0%; transform: translateX(-50%); z-index: 999; } 

main section.menu .menu_img img { width: 80%; } 

main .s1 .selectomenu1 { width: 100%; color: #fff; padding: 10rem; background: url(../images/c-signature-bg-1.jpg) no-repeat center center/cover; } 

main .s1 .selectomenu1 h2 { font-size: 7rem; font-weight: bold; } 

main .s1 .selectomenu1 ul { margin-top: 40px; } 

main .s1 .selectomenu1 ul li a { color: #fff; font-weight: bold; font-size: 3rem; line-height: 7rem; } 

main .s1 .selectomenu2 { width: 100%; padding: 14rem 22rem; background: var(--background); position: relative; } 

main .s1 .selectomenu2 h2 { font-size: 4rem; font-weight: bold; margin-left: 46px; } 

main .s1 .selectomenu2 p { font-size: 2rem; margin-top: 40px; margin-left: 46px; } 

main .s1 .selectomenu2 .cf_img_box1 { display: flex; margin-left: 30px; } 

main .s1 .selectomenu2 .cf_img img { max-width: 100%; height: auto; flex-direction: column; } 
.buttons li { position: relative; } 
.buttons li:before { content: ''; position: absolute; width: 0px; height: 10px; background: #d7d5d5; bottom: 0; transition: all 0.5s; } 
.buttons li.on:before { width: 100px; } 
.beverage,
.coffee,
.cookie { display: none; } 
.topping2,
.topping3,
.topping4 { display: none; } 

.c2,
.c3,
.c4 { display: none; } 

.topping { width: 100%; position: relative; } 

.topping p { font-size: 2rem; font-weight: bold; line-height: 5rem; border-bottom: 2px solid var(--primary); } 

.topping > div > p ~ ul { display: flex; justify-content: flex-start; gap: 4rem; padding: 2rem; margin-left: 4rem; } 

.topping > div > p ~ ul li { flex: 1 1 15%; text-align: center; } 

.topping > div > p ~ ul li * { display: block; } 
.topping > div > p ~ ul li img { width: 10rem; } 

.section_title h2 { font-size: 7rem; letter-spacing: -2px; line-height: 0.8; text-align: center; padding: 1rem; font-weight: 800; } 
.section_title { margin: 16rem 0; display: flex; flex-direction: column; } 

main .s3 .cf_img { background: url(../images/m-3rd_sec-bg.jpg); height: 80vh; max-width: 100%; background-size: cover; } 

main .row { display: flex; position: relative; width: 100%; height: 490px; border: 1px solid #d7d5d5; } 

main .row .left { width: 40%; border-right: 1px solid #d7d5d5; } 

main .row .left h2 { font-size: 9rem; text-align: center; align-items: center; padding: 1rem; font-weight: bold; } 

main .row .right { position: absolute; right: 0; width: 60%; margin: 3rem -8rem; line-height: 4rem; } 

main .row .right .textbox1 { height: 163px; display: flex; flex-direction: column; } 

.e1 a { color: var(--secondary); font-size: 2rem; text-decoration: none; } 

.e2 a { font-size: 2.5rem; text-decoration: none; } 

main .row .right .textbox2 { height: 163px; display: flex; flex-direction: column; } 

main .textbox span { display: flex; flex-direction: column; margin: 20px; } 

main .s3 .any li { width: 100%; display: flex; text-align: center; align-items: center; padding: 2rem; font-size: 3rem; letter-spacing: -0.5px; } 

main .s4 { display: flex; justify-content: center; width: 100%; align-items: center; flex-direction: column; } 

main .s4 .sns_header { flex-direction: row; } 

main .sns_img { display: flex; gap: 1rem; padding: 0 7rem; justify-content: center; align-items: center; } 

main .sns_img a { flex-basis: 33.33%; } 

main .sns_img a img { flex-direction: column; width: 100%; } 

footer { background: var(--primary); text-align: center; } 

.footer_nav { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 3rem; } 

footer .footer_logo { flex-basis: 80%; } 

footer .footer_logo li { width: 100%; align-items: center; justify-content: center; margin: auto; padding: 1rem; } 

footer .footer_sns_list { display: flex; align-items: center; gap: 20px; } 

footer .footer_info .fx { padding: 20px 40px; flex-direction: column; justify-content: center; align-items: center; } 

footer .footer_info * { color: #fff; } 

footer .last { flex-basis: 50%; } 

footer .fx .top { text-align: center; font-weight: bold; } 

footer .fx .mid { display: flex; margin: auto; align-items: center; justify-content: center; padding: 0.8rem; flex-wrap: wrap; max-width: 80%; } 

footer .fx .mid li { position: relative; color: #fff; } 

footer .fx .mid li a { display: block; padding: 1rem; } 

footer .fx .mid li:not(:last-child):before { position: absolute; content: ''; background: var(--background); width: 1px; height: 34%; right: 0%; top: 50%; transform: translateY(-40%); } 

/* 팝업 */
.popup {position: fixed;z-index: 999;width: 55rem;height: 20rem;background: rgba(255, 255, 255, 0.8);top: 30%;left: 50%;transform: translateY(-50%) translateX(-50%);border-radius: 10px;backdrop-filter: blur(20px);box-shadow: 0px 0px 5px var(--text1); } 

.popup .textbox {width: 100%;height: 20rem;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;line-height: 1.75;font-family: 'NanumBarunGothic'; } 

.popup a {display: block; } 

.popup .close {position: absolute;top: 2rem;right: 2rem; } 


.top_btn a { width: 64px; height: 64px; position: fixed; right: 112px; bottom: 48px; color: #ff845b; border: 1px solid #ff845b; border-radius: 50%; text-align: center; line-height: 64px; font-size: 20px; font-weight: 500; }