@charset "UTF-8";
/******************************** setting **********************************/
body {
    font-size: 1em;
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.03em;
    --theme  : #E72525;
    --light1 : #FEF4F4;
    --light2 : #FAD3D3;
    --light3 : #EC5151;
    --dark1  : #CE2121;
    --dark2  : #B61D1D;
    --emph1  : #ff0000;
    --emph2  : #f13b0e;
    --emph3  : #ffbb00;
    --emph4  : #3ef11f;
    --emph5  : #7241B0;
    --ellipsis : 1;
}
.inner { max-width: 1680px; width: 100%; margin-left: auto; margin-right: auto; }
.ellipsis { overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: var(--ellipsis); -webkit-box-orient: vertical; word-break: keep-all; }
.mark { background: linear-gradient(to bottom, transparent 40%, var(--emph3) 40%); padding-right: 0.2em; padding-left: 0.2em; }
.color { color: var(--theme); }
.container { display: flex; align-items: center; justify-content: center; min-height: 75vh; color: #000; }
.container-title { text-align: center; font-size: 2em; font-weight: 700; margin-bottom: 1em; }

/******************************** content **********************************/
.header { position: fixed; left: 0; top: 0; width: 100%; background-color: #111; padding: 1em 0; z-index: 9999; }
.header * { display: flex; }
.header .inner { justify-content: space-between; align-items: center; }
.header .logo { width: 10%; }
.header .logo img { max-width: 100%; }
.header .gnb { gap: 3em; font-size: 1.25em; }
.header .gnb li:hover,
.header .gnb li.active { color: var(--emph3); }

.footer { background-color: #111; padding: 3em 0; font-weight: 300; text-align: center; line-height: 1.5; }
.footer .contact { font-size: 1.25em; font-weight: 700; margin: 1em 0; }
.footer .logo img { width: 15%; }
.footer .info { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-bottom: 0.5em; }
.footer .info span { white-space: nowrap; margin: 0 0.5em; }
.footer .copyright { margin-top: 2em; font-size: 0.9em; opacity: 0.5;}

.wrapper { font-size: 1em; font-family: 'GmarketSans'; color: #fff; }
.main { text-align: center; overflow: hidden; }
.section { min-height: 100vh; display: flex; align-items: center; padding-top: 5em; padding: 6em 0; }

.tline { text-shadow: var(--tshZ) var(--tshZ) 0 var(--tshC), var(--tshZ2) var(--tshZ2) 0 var(--tshC), var(--tshZ2) var(--tshZ) 0 var(--tshC), var(--tshZ) var(--tshZ2) 0 var(--tshC),0 var(--tshZ) 0 var(--tshC), 0 var(--tshZ2) 0 var(--tshC), 0 var(--tshZ) 0 var(--tshC), 0 var(--tshZ2) 0 var(--tshC),var(--tshZ) 0 0 var(--tshC), var(--tshZ2) 0 0 var(--tshC), var(--tshZ2) 0 0 var(--tshC), var(--tshZ) 0 0 var(--tshC); --tshZ2: calc(var(--tshZ) * -1); }

.visual { background: #000; }
.intro { background: url(../img/bg_intro.jpg) no-repeat center/cover }
.brand { background: url(../img/bg_brand.jpg) no-repeat center/cover }
.merit { background: url(../img/bg_merit.jpg) no-repeat center/cover }
.profit { background: url(../img/bg_profit.jpg) no-repeat center/cover }
.interior { background: url(../img/bg_interior.jpg) no-repeat center/cover }
.district { background: url(../img/bg_district.png) no-repeat center/cover }
.branch { background: url(../img/bg_branch.jpg) no-repeat center/cover }
.office { background: url(../img/bg_office.jpg) no-repeat center/cover }
.award { background: url(../img/bg_award.jpg) no-repeat center/cover }
.search { background: url(../img/bg_search.png) no-repeat center/cover }
.poster { background: url(../img/bg_poster.jpg) no-repeat center/cover }
.menu { background: url(../img/bg_menu.jpg) no-repeat center/cover }
.review { background: url(../img/bg_review.jpg) no-repeat center/cover }
.cost { background: url(../img/bg_cost.jpg) no-repeat center/cover }
.inquiry { background: url(../img/bg_inquiry.jpg) no-repeat center/cover }

.font1 { font-family: 'Pretendard', sans-serif; }
.font2 { font-family: 'SBAggro'; }
.serif { font-family: 'JSArirangPPURI'; }
.tit { margin-bottom: 3.5em; font-style: italic; font-family: 'SBAggro'; }
.tit h2 { font-size: 5em; font-weight: 700; text-shadow: 0.05em 0.05em 0.05em rgba(0,0,0,0.6); }
.tit h3 { font-size: 3.25em; font-weight: 700; }
.tit p { font-size: 1.5em; margin-top: 0.75em; }

.visual { overflow: hidden; position: relative; }
.visual video { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0.3; }
.visual .inner { position: relative; }
.visual h3 { font-size: 3.75em; font-weight: 700; color: var(--theme); margin-bottom: 1em; text-shadow: 0.05em 0.05em 0.05em rgba(0,0,0,0.6); }
.visual h2 { max-width: 35%; margin: auto; }
.visual h2 img { width: 100%; }
.visual p { font-size: 1.875em; margin-top: 5em; text-align: left; align-self: center; display: inline-block; line-height: 1.4; border-left: 0.25em solid #fff; padding: 0 0.8em; }

.intro .tit { font-size: 1.125em; }
.intro .tit h2 span { color: var(--emph3); }
.intro .con { display: flex; align-items: flex-end; justify-content: space-around; }
.intro .txt { display: flex; align-items: center; text-align: left; font-weight: 700; gap: 2.5em; --tshC: #000; --tshZ: 0.2em; }
.intro .txt span { color: var(--emph2); }
.intro .txt p { font-size: 3.25em;  }
.intro .txt h5 * { line-height: 1.25; }
.intro .txt h5 small { font-size: 2.875em; display: inline-block; vertical-align: top; }
.intro .txt h5 span { font-size: 6.25em; display: block; padding-top: 0.15em; }
.intro .con .img { width: 45%; }
.intro .con .img img { width: 100%; }

.brand .tit h2 { font-weight: 400; }
.brand .tit h2 span { color: var(--emph3); }
.brand .con { text-align: left; background-color: rgba(0,0,0,0.4); padding: 1.5em; max-width: 1100px; margin: auto; }
.brand .con p { font-size: 1.5em; line-height: 1.6; word-break: keep-all; margin-bottom: 0.75em; }
.brand .con p:last-child { margin-bottom: 0; }
.brand .con p b { font-size: 1.25em; font-weight: 700; }
.brand .con p span { border-bottom: 0.1em solid #fff; }
.brand .con p strong { color: var(--emph4); font-weight: 700; }

.merit .tit h2 span { color: var(--emph3); }
.merit .con { display: flex; justify-content: center; gap: 5%; }
.merit .arrow { font-weight: 700; background-color: var(--emph2); padding: 2em 3em 5em; clip-path: polygon(13% 0, 87% 0, 87% 50%, 100% 50%, 50% 100%, 0 50%, 13% 50%, 13% 0); position: relative; }
.merit .arrow p { font-size: 2em; --tshC: #921100; --tshZ: 0.07em; }
.merit .arrow p small { font-size: 0.9em; }
.merit .arrow h4 { font-size: 4.25em; line-height: 1; margin: 0.3em 0; color: var(--emph2); --tshC: #fff; --tshZ: 0.05em; }
.merit .list li { display: flex; background-color: var(--theme); border-radius: 10em; padding: 0.5em; align-items: center; margin-bottom: 1em; }
.merit .list h5 { width: 4em; font-size: 2.875em; font-weight: 700; padding-top: 0.15em; }
.merit .list p { text-align: left; background-color: #fff; color: #000; border-radius: 10em; padding: 0.5em 2em; flex-grow: 1; }
.merit .list p strong { font-size: 2em; display: block; font-weight: 800; }
.merit .list p span { font-size: 1.5em; }

.profit { padding-top: 8em; }
.profit .con { display: flex; }
.profit h3 { font-size: 2.875em; margin-bottom: 1.25em; }
.profit h3 b { font-weight: 700; background: linear-gradient(transparent 20%, var(--theme) 20%, var(--theme) 95%,transparent 95%); font-size: 1.375em; text-shadow: 0.1em 0.1em 0.05em rgba(0,0,0,0.6); }
.profit h3 span { color: var(--emph4); font-weight: 700; }
.profit h4 { font-size: 2.25em; }
.profit .box { width: 50%; }
.profit .box1 h3 { position: relative; text-align: left; }
.profit .box1 h3 img { position: absolute; right: 0; top: -0.5em; width: 30%; }
.profit .box1 h4 { font-weight: 700; position: relative; }
.profit .box1 h4 b { color: var(--theme); }
.profit .box1 h4 img { position: absolute; left: 0; bottom: -2em; width: 20%; z-index: 15; }
.profit .box1 .img { margin: 2em 0; }
.profit .box1 h5 { font-size: 3.5em; font-weight: 700; color: var(--emph1); display: inline-block; padding: 0.2em 1.25em 0; --tshC: #fff; --tshZ:0.05em; }
.profit .box2 .img { max-width: 80%; position: relative; display: inline-block; }
.profit .box2 .img img { max-width: 100%; }
.profit .box2 .img .slide { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; }
.profit .box2 .img .slide-list { width: 300%; display: flex; position: absolute; left: 0; top: 0; }
.profit .box2 .img .slide-list img { width: 33.33%; }
.profit .box2 .img .phone {  position: relative; z-index: 10; }

.interior .tit h2 span { color: var(--emph3); }
.interior .con { display: flex; justify-content: space-around; }
.interior .img { width: 60%; display: flex; gap: 1em; flex-wrap: wrap; justify-content: center; align-items: center; }
.interior .img img { width: 31%; border-radius: 1em; box-shadow: 0.3em 0.3em 0.6em rgba(0,0,0,0.4);}
.interior .txt { }
.interior .txt h4 { font-size: 3.25em; font-weight: 700; color: var(--emph5); }
.interior .txt h4 span { font: 0.8em; display: inline-block; border-radius: 5em; padding: 0.15em 0.75em 0; background-color: #fff; box-shadow: 0 0.2em 0 var(--emph5); }
.interior .txt h4 b { display: block; --tshC: #fff; --tshZ: 0.05em; margin-top: 0.5em;}
.interior .txt p { font-size: 2.25em; font-weight: 700; margin-top: 0.8em; }
.interior .txt p b { color: var(--emph3); background-color: #000; display: inline-block; padding: 0.15em 0.2em 0; margin-bottom: 0.15em; }
.interior .txt p span { display: block; --tshC: #000; --tshZ:0.06em; }

.district { color: #000; }
.district .tit { margin-bottom: 1.5em; }
.district .tit h2 span { color: var(--theme); }
.district .con h4 { font-size: 2.5em; font-weight: 700; }
.district .con h4 b { color: var(--emph2); }
.district .con h3 { font-size: 3em; font-weight: 700; color: var(--emph4); --tshC:#000; --tshZ:0.08em; }
.district .con ul { display: flex; justify-content: center; gap: 3%; margin: 1.5em 0 2.5em; }
.district .con li { max-width: 45%; padding: 0.3em; position: relative; }
.district .con li:nth-child(1) { background-color: #535353; }
.district .con li:nth-child(2) { background-color: var(--theme); }
.district .con li h5 { font-size: 2em; line-height: 1.6; padding-top: 0.2em; font-weight: 700; color: #fff; --tshC:#000; --tshZ:0.1em; }
.district .con li .img { width: 100%; }
.district .con li .maker {  position: absolute; left: 43%; top: 25%; width:9%; }
.district .con li .stamp { position: absolute; bottom: -20%; right: -20%; width: 63%; }

.branch { padding-bottom: 0; position: relative; }
.branch .inner { position: relative; padding-top: 18em; }
.branch .con { display: flex; align-items: flex-start; justify-content: center; gap: 3%; }
.branch .img { width: 40%; }
.branch .img img { width: 80%; }
.branch .txt { width: 55%; background-color: #111116; padding: 2em; text-align: left; display: flex; flex-direction: column; align-items: flex-start; transform: rotate(-3deg); }
.branch .txt h3 { display: inline-flex; flex-direction: column; }
.branch .txt h3 span { font-size: 2.75em; }
.branch .txt h3 b { font-size: 6.25em; font-weight: 700; padding-top: 0.12em; color: var(--emph3); }
.branch .txt h3 span:nth-child(3) { align-self: flex-end; }
.branch .txt p { font-size: 1.6em; line-height: 1.6; align-self: flex-end; margin-top: 3em; width: 70%; }
.branch .fist { width: 13.5%; position: absolute; bottom: 0; right: 42%; }
.branch .stamp { position: absolute; top: 0; left: 0; width: 27%; }

.office .con { display: flex; }
.office .list { width: calc(100% - 34em); display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; }
.office .list li { width: 30%; margin: 1.5em 0;}
.office .list li img { width: 100%; }
.office .list li p { padding-top: 0.15em; line-height: 2; font-size: 1.5em; background-color: var(--theme); color: #fff; }
.office .txt { width: 32em; background: url(../img/img_office_txt.png) no-repeat center/contain; font-weight: 700; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.office .txt h4 { font-size: 2.125em; }
.office .txt h4 span { color: var(--theme); }
.office .txt h2 { font-size: 5.875em; margin: 0.3em 0; }
.office .txt h3 { font-size: 3em; background-color: var(--theme); color: #fff; padding: 0.15em 1em 0; line-height: 1.4; border-radius: 10em; --tshC:#000; --tshZ:0.08em; }

.award { padding-bottom: 0; }
.award .tit { font-style: normal; }
.award .tit h2 { font-weight: 400; }
.award .tit h2 span { background-color: var(--theme); }
.award .tit h3 { font-weight: 400; } 
.award .con { display: flex; justify-content: space-around; align-items: center; }
.award .con .img { width: 18%; border: 0.3em solid var(--theme); }
.award .con .food { width: 68%; }

.search { padding-bottom: 0; }
.search .tit h2 span { position: relative; display: inline-block; }
.search .tit h2 span::after { content:""; display: block; width: 140%; height: 210%; background: url(../img/img_search_circle.png) no-repeat center/contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.search .keyword { position: relative; }
.search .keyword img { width: 25%; }
.search .keyword .box { position: absolute; background-color: #56C013; display: flex; left: 50%; bottom: 18%; transform: translateX(-50%); font-size: 2.5em; padding: 0.2em; align-items: center; box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.3); }
.search .keyword .js-typing { background-color: #fff; color: var(--theme); padding-top: 0.2em; width: 10em; }
.search .keyword i { padding: 0 0.5em; }
.search .img { display: flex; gap: 1em; justify-content: center; margin-top: 3em; }
.search .img img { border-radius: 1em 1em 0 0; box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.3); max-width: 48%; }

.poster .tit h2 { background: linear-gradient(#FFD25A 20%,#FF5C00); -webkit-background-clip: text; color: transparent; text-shadow: none; padding-top: 0.2em; }
.poster .con { display: flex; justify-content: space-around; }
.poster .con img { max-width: 30%; }

.menu .con { display: flex; flex-wrap: wrap; justify-content: center; }
.menu .con img { max-width: 50%; }
.menu .con img:nth-child(2),
.menu .con img:nth-child(4) { margin-left: -0.3125em; }
.menu .con img:nth-child(3),
.menu .con img:nth-child(4) { margin-top: -0.3125em; }

.review { position: relative; }
.review .tit span { color: var(--emph3); }
.review .tit h3 { background: linear-gradient(#fff,#FF5C00 60%); -webkit-background-clip: text; color: transparent; }
.review .swiper-box { position: relative; }
.review .swiper { width: 100%; }
.review .swiper-slide { width: 15%; }
.review .swiper-slide img { width: 94%; border-radius: 1.875em; }
.review .swiper-phone { position: absolute; width: 14.5%; left: 50%; top: -2%; z-index: 5; transform: translateX(-50%); }
.review .con { position: relative; margin-top: 6em; }
.review .big { height: 80%; position: absolute; left: 5%; z-index: 10; bottom: 10%; }
    .review .big img { height: 100%; }
 
.cost .txt { display: flex; justify-content: center; gap: 1em; margin-bottom: 3em; }
.cost .txt h2 { font-size: 8em; --tshC: #a00101; --tshZ: 0.05em; }
.cost .txt h3 { font-size: 4em; line-height: 1; --tshC: #000; --tshZ: 0.05em; color: #FFDE00; }
.cost .txt h3 small { font-size: 0.75em; color: var(--theme); }
.cost .con { display: flex; justify-content: space-around; align-items: center; }
.cost .con .img { width: 45%; position: relative; }
.cost .con .img .tbl { width: 100%; }
.cost .con .img .tbl_img {  width: 50%; position: absolute; }
.cost .con .img .tbl_img_01 { left: 25%; top: 23%; }
.cost .con .img .tbl_img_02 { right: 10%; bottom: 0; }
.cost .con .home { width: 45%; }

.banner { min-height: 0%; padding: 3em 0; background-color: #611717; text-align: center; }
.banner h3 { font-size: 3.25em; font-weight: 700; padding-top: 0.15em; }
.banner h3 span { color: #FFBA61; }

.inquiry { position: relative; }
.inquiry .red { color: red; }
.inquiry .food { position: absolute; right: 0; width: 45%; }
.inquiry .con { padding-right: 30%; }
.inquiry .frm-wrap { background-color: #fff; padding: 3em; color: #000; text-align: center; }
.inquiry .chk_box { text-align: left; display: block; }
.inquiry p { text-align: left; margin: 0.5em 0 2em; }
.inquiry .frm-box { font-size: 1.25em; display: flex; align-items: flex-start; text-align: left; margin-bottom: 0.875em; }
.inquiry .frm-label { width: 7em; line-height: 2.5; }
.inquiry .frm-box input,
.inquiry .frm-box textarea { flex-grow: 1; width: auto; }
.inquiry .btn-token { margin-top: 2em; background-color: #45C82F; border: 0; font-size: 1.375em; padding: 0.8em 1.5em 0.6em; }
.inquiry .chk_box b { display: inline-block; font-size: 0.875em; border: 1px solid #000; padding: 0.2em 0.5em 0; }

.sns { position: fixed; right: 3%; bottom: 30%; z-index: 55; display: flex; flex-direction: column; gap: 1em; }
.sns a {  width: 3.5em; height: 3.5em; -webkit-border-radius: 10em;-moz-border-radius: 10em;border-radius: 10em; overflow: hidden; background-color: var(--theme); display: inline-flex; align-items: center; justify-content: center; font-size: 1.125em; font-weight: 700; box-shadow: 0.05em 0.05em 1em rgba(0,0,0,0.5);}
.sns img { width: 100%; }


/******************************** effect **********************************/
/* fade */
.fade-up,
.fade-down,
.fade-right,
.fade-left { opacity: 0; }
.fade-up { transform: translateY(3rem); }
.fade-down { transform: translateY(-3rem); }
.fade-right { transform: translateX(-3rem); }
.fade-left { transform: translateX(3rem); }
.fade-up.on,
.fade-down.on { animation: fadeY 0.4s ease-out 0s 1 normal forwards; }
.fade-right.on,
.fade-left.on { animation: fadeX 0.4s ease-out 0s 1 normal forwards; }
@keyframes fadeY {
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes fadeX {
    100% { transform: translateX(0); opacity: 1; }
}

.scale { transform: scale(1.3); opacity: 0; display: inline-block; }
.scale.on { animation: scale 0.3s 0s 1 normal cubic-bezier(0.5, 0.05, 0.8, 0.05) forwards; }
@keyframes scale {
    100% { transform: scale(1);  opacity: 1; }
}

.animate__animated.animate__heartBeat {
    --animate-duration: 0.8s; animation-iteration-count: infinite;
}
.animate__animated.animate__bounce {
    --animate-duration: 1.4s; animation-iteration-count: infinite;
}
@keyframes bounce {
    0%,20%,53%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    40%,43% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-2em,0) scaleY(1.1);
        transform: translate3d(0,-2em,0) scaleY(1.1)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-1em,0) scaleY(1.05);
        transform: translate3d(0,-1em,0) scaleY(1.05)
    }

    80% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0) scaleY(.95);
        transform: translateZ(0) scaleY(.95)
    }

    90% {
        -webkit-transform: translate3d(0,-0.5em,0) scaleY(1.02);
        transform: translate3d(0,-0.5em,0) scaleY(1.02)
    }
}
.merit .arrow h4 { animation: color1 0.8s 0s infinite normal cubic-bezier(0.5, 0.05, 0.8, 0.05) forwards; }
@keyframes color1 {
    0% { color: var(--emph2); }
    50% { color: var(--dark2); }
    100% { color: var(--emph2); }
}
.intro .txt h5 span { animation: color2 0.8s 0s infinite normal cubic-bezier(0.5, 0.05, 0.8, 0.05) forwards; }
@keyframes color2 {
    0% { color: var(--emph2); }
    50% { color: #fff; }
    100% { color: var(--emph2); }
}

.interior .txt p b { animation: color3 0.8s 0s infinite normal cubic-bezier(0.5, 0.05, 0.8, 0.05) forwards; }
@keyframes color3 {
    0% { color: var(--emph3); }
    50% { color: #fff; }
    100% { color: var(--emph3); }
}

.office .txt h2 { animation: shake 0.8s 0s infinite normal ease-out forwards; }
@keyframes shake {
    0% { transform: rotate(0); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}

/* typing */
.visual .js-typing { --theme: #E72525; height: 2.5em; }
.search .js-typing { --theme: #E72525; height: 1.5em; }
.js-typing .typing-list { display: none; }
.js-typing .typing-txt::after { content:""; width: 0.07em; height: 1em; background-color: var(--theme); display: inline-block; vertical-align: middle; margin-top: -0.1em; margin-left: 0.1em; animation: typing-cursor 1.5s linear 0s infinite normal forwards; }
@keyframes typing-cursor {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.award .tit h2 span { animation: bgc 0.8s 0s infinite normal ease-out forwards; }

.cost .txt h3 span { animation: bgc 0.8s 0s infinite normal ease-out forwards; }
@keyframes bgc {
    0% { color: #fff; }
    50% { color: var(--emph3); }
    100% { color: #fff; }
}



.agreement_popup {
    transition:all 0.5s ease-in-out;
    opacity:0;
    z-index:-1;
    visibility: hidden;
    color:black;
    text-align:left;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: rgba(0,0,0,0.6);
}

.agreement_popup .agree_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: white;
    padding: 25px 20px 15px;
    width: 400px;
    height: 624px;
    display: flex;
    flex-direction: column;
    z-index: 9999;
}

.agreement_popup .agree_inner .title {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 16px;
    border-bottom: 3px solid black;
    margin-bottom: 25px;
    margin-left: 5px;
}

.agreement_popup .agree_inner .subtitle {
    line-height: 1.6;
    margin-bottom: 20px;
    margin-left: 5px;
}

.agreement_popup .agree_inner .scroll_area {
    height: 100%;
    overflow-y: auto;
    padding: 30px 25px;
    background: #f4f4f4;
    margin-bottom: 10px;
}

.agreement_popup .agree_inner .ok_btn {
    cursor:pointer;
    padding: 21px 0px;
    background: black;
    color: white;
    font-size: 18px;
    font-weight: 600;
    ;display: flex;
    justify-content: center;
    align-items: center;
}

/******************************** responsive **********************************/

@media screen and (max-width: 2050px){
    .visual video { height: 100%; width: auto; }
}
@media screen and (max-width: 1680px){
    .inner { width: 94%; }
    .header, .footer, .main { font-size: 1vw; }
}
@media screen and (max-width: 1180px){
    .header, .footer, .main { font-size: 1.25vw; }
    .section { min-height: 0; }
    .visual { min-height: 100vw; }
    .intro .con { flex-wrap: wrap; }
    .intro .con .img { margin-top: 3em; }
    .profit .con { flex-wrap: wrap; }
    .profit .box { width: 100%; }
    .profit .box1 { margin-bottom: 3em; }
    .profit .box1 h3 { text-align: center; }
    .interior .con { flex-wrap: wrap; }
    .interior .txt { margin-top: 3em; }

    .branch { padding-bottom: 8em; }
    .branch .inner { padding-top: 0; }
    .branch .con { flex-wrap: wrap; }
    .branch .img { width: 80%; }
    .branch .img img { width: 100%; }
    .branch .txt { width: 80%; margin-top: 0; }
    .branch .stamp { width: 35%; }
    .branch .fist { width: 17%; right: 66%; }
    .office .con { flex-wrap: wrap; }
    .office .list { width: 100%; }
    .office .txt { width: 100%; height: 37em; }
    .award { min-height: 0; padding-top: 10em; }
    .interior .img { width: 90%; }

    .review .big { height: 65%; }
}
@media screen and (max-width: 768px){
    .header .logo { width: 20%; }
    .profit .box1 .img img { width: 20%; }
    .agreement_popup {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background: rgba(0,0,0,0.6);
        z-index: 9999;
    }
    
    .agreement_popup .agree_inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: white;
        padding: 20px 15px 15px;
        width: 90%;
        height: 80vh;
        display: flex;
        flex-direction: column;
    }
    
    .agreement_popup .agree_inner .title {
        font-size: 18px;
        font-weight: 600;
        padding-bottom: 14px;
        border-bottom: 3px solid black;
        margin-bottom: 25px;
        margin-left: 5px;
    }
    
    .agreement_popup .agree_inner .subtitle {
        line-height: 1.6;
        margin-bottom: 15px;
        margin-left: 5px;
    }
    
    .agreement_popup .agree_inner .scroll_area {
        height: 100%;
        overflow-y: auto;
        padding: 20px 15px;
        background: #f4f4f4;
        margin-bottom: 10px;
    }
    
    .agreement_popup .agree_inner .ok_btn {
        padding: 15px 0px;
        background: black;
        color: white;
        font-size: 16px;
        font-weight: 600;
        ;display: flex;
        justify-content: center;
        align-items: center;
    }
    
}
@media screen and (max-width: 586px){
    .wrapper { word-break: keep-all; }

    .header .logo { width: 25%; } 
    .header, .footer, .main { font-size: 2vw; }
    .header .inner { flex-direction: column; width: 100%; }
    .header .gnb {margin-top: 1em; gap: 0; width: 100%; text-align: center; justify-content: space-around; }
    .header .gnb li { justify-content: center; }

    .visual { height: 150vw; }
    .visual h3 { font-size: 3.25em; }
    .visual h2 { max-width: 50%; }
    .visual p { border: 0; text-align: center; }
    .visual p br { display: none; }
    .intro .txt { flex-direction: column; }

    .brand .con p { font-size: 1.75em; }
    .brand .con p br { display: none; }

    .merit .con { flex-direction: column; }
    .merit .arrow { width: 80%; margin: 0 auto 3em;  padding-top: 3em; }
    .merit .arrow br { display: none; }
    .merit .arrow .mb { display: block; }
    .merit .list h5 { font-size: 2.5em; background-color: var(--theme); border-radius: 0.4em 0.4em 0 0; padding-top: 0.3em;}
    .merit .list li { display: block; background-color: transparent; }
    .merit .list p { border: 0.5em solid var(--theme); border-radius: 0; font-size: 1.125em; padding: 1em; }
    .merit .list p span { margin-top: 0.5em;display: block; }
    .profit .box1 h3 img { width: 25%; }
    .profit .box1 .img { flex-wrap: wrap; }
    .profit .box1 .img img { width: 35%; }
    .branch .txt h3 b { font-size: 4.65em; }
    .branch .txt p { width: 50%; }
    .branch .txt p br { display: none; }
    .branch .fist { width: 38%; right: 55%; }
    .office .list li { width: 45%; }
    .search .img { flex-direction: column; justify-content: center; align-items: center; }
    .search .img img { max-width: 80%; }
    .poster .con { flex-wrap: wrap; }
    .poster .con img { width: 45%; margin: 2%; }
    .menu .con img { max-width: 100%; }
    .review .swiper-slide { width: 31%; }
    .review .swiper-phone { width: 30.5%; }
    .review .con .big { display: none; }
    .cost .con { flex-wrap: wrap; }
    .cost .con .img,
    .cost .con .home { width: 80%; }
    .cost .con .home { margin-top: 3em; }
    .award .con { display: flex; flex-direction: column; }
    .award .con .img { width: 34%; }
    .award .con .food { width: 80%; margin-top: 3em; }
    .inquiry .food { width: 60%; right: -27%; top: 3%; }
    .inquiry .frm-wrap { padding: 2em; font-size: 1.375em; }
    .inquiry .con { padding-right: 0; }
    .inquiry .frm-box { flex-direction: column; }
    .inquiry .frm-box input, .inquiry .frm-box textarea { width: 100%; }



    .review .big { bottom: 5%; }
}