@charset "utf-8";
.container-xl { max-width: 980px; } 
#header .container-xl {max-width: 1280px;}
.point { color: var(--point); } 
section img {width: auto;}
.font-kisah {font-family: 'Kisah';}
.font-mbc {font-family: 'MBC 1961';}
.font-deli {font-family: 'Deli';}
.point2 { color: var(--point2); } 
.yellow {background: var(--point);color: #fff;font-weight: 700;padding: 0 1%;}
.cursive {font-family: "Playwrite AU NSW", cursive;}

.section-1 { background: url(../images/franchise/hero-img.jpg) no-repeat center; background-size: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; height: 100vh; background-size: cover;} 
.section-1 img { width: auto; } 
.section-1 h1 { font-size: 80px; font-weight: 700; margin-bottom: 80px; line-height: 1.4; margin-top: 60px; } 
.section-1 p { font-size: 44px; font-weight: 500; } 
.section-2 { background: #333; padding: 150px 0; color: #fff; font-size: 22px; } 
.section-2 .counter { font-size: 143px; font-weight: 200; color: #febf4c; line-height: 1.25;} 
.section-2 .col-6:last-child { text-align: right; } 
.section-3 { background: #6d6d6d; padding: 140px 110px; text-align: center;} 
.section-3 .meaning { color: #fff; font-size: 35px; display: flex; font-weight: 300; justify-content: center; margin-bottom: 22px;} 
.section-3 .meaning .point { font-weight: 600; margin-left: 9px; } 
.section-3 h1 {margin-bottom: 60px;}
.section-3 .about-txt {font-size: 45px;color: #fff;margin-bottom: 80px;letter-spacing: -0.02em;}
.section-3 .panel { background: #fff; border: 3px solid var(--point); position: relative; padding: 90px 0 80px; height: 100%;} 
.section-3 .col-6 { padding: 0 5px; flex-grow: 1;} 
.section-3 .panel .round-img { width: 136px; border: 3px solid var(--point); border-radius: 100px; position: absolute; top: -68px; left: calc(50% - 68px); } 
.section-3 .panel h5 { font-weight: 300; line-height: 1.3; font-size: 22px; letter-spacing: -0.03em; } 
.section-3 .panel h2 { font-size: 40px; color: var(--point); letter-spacing: -0.03em; line-height: 1.3; } 
.section-3 .panel p { color: #6d6d6d; font-weight: 300; font-size: 20px; margin-top: 20px; letter-spacing: -0.03em; } 
.section-4 { background: linear-gradient(180deg, #ffecc9 0%, transparent 30%); padding: 120px 0; text-align: center; } 
.section-4 > h2 { text-align: center; font-size: 70px; font-weight: 700; line-height: 1.25; margin-bottom: 90px; } 
.section-4 .bubble-wrap {position: relative;max-height: 452px;height: 30vw;margin: 0 auto;margin-bottom: 80px;} 
.section-4 .bubble-wrap img:nth-child(2) {position: absolute;left: 50%;z-index: 1;width: 41.46%;max-width: 622px;margin-left: -20%;} 
.section-4 .bubble-wrap img:nth-child(3) {position: absolute;left: 50%;top: 20px;width: 36.66%;max-width: 550px;margin-left: 17%;} 
.section-4 .bubble-wrap img:nth-child(1) {position: absolute;right: 50%;top: 20px;width: 36.66%;max-width: 550px;margin-right: 17%;} 
.section-4 h4 { font-size: 42px; } 
.section-4 h4 strong { background: var(--point); padding: 0 10px; } 
.section-4 h1 { font-size: 70px; line-height: 1.3; margin-top: 30px; font-weight: 700; color: #333; } 
.section-4 .vs-wrap {position: relative;font-size: 42px;max-width: 1585px;margin: 150px auto 200px;padding: 0 60px;} 
.section-4 .vs-wrap .vs-row>div {max-width: 660px;width: 40%;border: 1px solid #6d6d6d;border-radius: 20px;display: inline-block;overflow: hidden;} 
.section-4 .vs-wrap .vs-row .vs-right {border: 12px solid var(--point);}
.section-4 .vs-wrap h5 { font-weight: 600; line-height: 1.4; font-size: inherit; } 
.section-4 .vs-wrap p.gray { color: #afafaf; font-weight: 500; line-height: 1.4; } 
.section-4 .vs-wrap .row>* {width: auto;background: #fff;padding: 0 20px;position: relative;} 
.section-4 .vs-wrap .row { justify-content: space-between; position: relative; color: #514f4e; margin: 38px 0; } 
.section-4 .vs-wrap .row::after { content: ''; position: absolute; width: 100%; height: 1px; background: #514f4e; top: 50%; left: 0; z-index: -1; } 
.section-4 .vs-wrap .percent {color: #514f4e;line-height: 1.4;} 
.section-4 .vs-wrap .percent strong { background: #514f4e; font-size: 80px; font-weight: 500; color: #fff; padding: 0 10px; } 
.section-4 .vs-wrap .vs-right .percent strong { background: var(--point); } 
.section-4 .vs-wrap .vs-right span.point { font-weight: 800; } 
.section-4 .vs-wrap .row i {font-size: 16px;color: var(--point);position: absolute;right: 0;top: 0;}
.section-4 .vs-wrap .vs-row {display: flex;justify-content: space-between;} 
.section-4 .vs-wrap .vs {position: absolute;top: 50%;left: 50%;width: 30%;margin-top: -17%;margin-left: -15%;} 
.section-4 .vs-wrap .vs img {width: 100%;}
.section-4 .vs-wrap p.info { font-size: 25px; text-align: left; margin-top: 20px; color: #514f4e; font-weight: 300; } 
.section-4 .beans-wrap { max-width: 1585px; margin: 0 auto; } 
.section-4 .beans-wrap h5 { font-size: 35px; font-weight: 400; margin-top: 3vw; } 
.section-4 .beans-wrap h2 { color: #eb7526; font-size: 60px; margin-top: 20px; margin-bottom: 64px; line-height: 1.25; font-weight: 700; } 
.section-4 .beans-wrap p { font-size: 22px; font-weight: 400; line-height: 1.85; } 
.section-5 {background: var(--point);padding: 30px 0;text-align: center;display: flex;align-items: center;justify-content: center;height: 435px;}
.section-5 h3 {font-size: 50px;color: #333;margin-top: 30px;}
.section-5 h1 {color: #fff;font-size: 200px;line-height: 1;}
.section-5 .txt-wrap {position: relative;z-index: 1;}
.section-5 img.arrow {position: absolute;}
.section-6 { background: #f0f0f0; text-align: center; padding: 160px 0; } 
.section-6 h1 { font-size: 70px; font-weight: 700; color: #333; margin-bottom: 90px; } 
.section-6 .check-point {font-size: 50px;color: #333;margin-bottom: 50px;}
.section-6 .check-point .chk {position: relative;width: 73px;display: inline-block;}
.section-6 .check-point .chk::after {content:'';background: url(../images/franchise/check.png) no-repeat;width: 73px;height: 73px;position: absolute;left: 0;bottom: -7px;background-size: cover;} 
.section-6 .check-point span { font-weight: 600; } 

.section-7 {text-align: center;position: relative;z-index: 0;}
.section-7 .top-wrap {padding-top: 100px;background: #fff;padding-bottom: 120px;}
.section-7 p {margin-top: 30px;font-size: 50px;line-height: 1.45;}
.section-7 h1 {font-size: 167px;color: #fff;line-height: 1.3;}
.section-7 h1 img {width: 100%;vertical-align: top;max-width: 660px;}
.section-7 .specialty .section-title-lg { text-align: center; margin-bottom: 16px; } 
.section-7 .specialty .subtxt { font-size: 20px; font-weight: 200; text-align: center; margin-bottom: 50px;} 
.section-7 .specialty .row > div.col-12 {padding: 0 26px;}
.section-7 .special-card {position:relative;width: 100%;max-height: 536px;height:36vw;transform-style: preserve-3d;transition:all 0.5s;cursor: pointer;} 
.section-7 .special-card-front, .special-card-back {position: absolute;width: 100%;height: auto;backface-visibility: hidden;display: flex;justify-content: center;align-items: center;font-size: 30px;border-radius: 10px;color : white;font-weight: bold;} 
.section-7 .special-card-back { transform: rotateY(180deg); } 
.section-7 .specialty .row > div.col-12:hover .special-card {transform: rotateY(180deg); } 
.section-7 .special-card img {width: 100%;display: block;}
.section-7 .special-card-mb {display: none;}
.section-7 .special-card-mb .card-mb {position: relative;}
.section-7 .special-card-mb .card-mb img.point {position: absolute;bottom: 15.77%;left: 13.25%;width: 73.5%;}
.section-7 .coffee-wrap {position: relative;margin: 0 0 30px;}
.section-7 .coffee-wrap::before {content: '';background: url(../images/franchise/bg-yellow-1.jpg);width: 100%;position: absolute;height: 500px;z-index: -1;left: 0;top: calc(77% - 250px);background-size: cover;background-position: top;}
.section-7 .coffee-wrap .coffee-mb {display: none;}
.section-7 .coffee-wrap .coffee-mb-bg {position: absolute;left: 0;aspect-ratio: 1200 / 864;display: none;}
.section-7 .bg-wrap {background: var(--point);}
.section-7 .specialty {margin-top: 90px;}
.section-7 .specialty .container-xxl {max-width: 1475px;}
.section-7 .quality {margin-top: 10vw;position: relative;z-index: 0;}
.section-7 .quality h1 {margin-top: 20px;} 
.section-7 .quality h5 { margin-top: 150px; } 
.section-7 .quality::after {content: '';background: url(../images/franchise/bg-yellow-2.jpg);width: 100%;position: absolute;height: 500px;z-index: -1;left: 0;top: calc(77% - 250px);background-size: cover;background-position: center;}
.section-7 .quality .row { justify-content: space-between; } 
.section-7 .quality .row > div:first-child {width: 46.15%;max-width: 606px;} 
.section-7 .quality .row > div:nth-child(2) {width: 50.7%;} 
.section-7 .signature { position: relative; background: #fff; padding-bottom: 160px;} 
.section-7 .signature::before { content: ''; position: absolute; width: 200%; height: 400px; transform: rotate(173deg); background: #fff; left: -90%; top: -150px; z-index: -1; } 
.section-7 .signature h1 {color: #333;position: relative;z-index: 0;font-size: 10vw;}
.section-7 .signature h1 .cursive {position: absolute;font-size: 4.5vw;color: #eb7526;top: max(-4.5vw, -80px);transform: rotate(-5deg);z-index: -1;}
.section-7 .signature .color-text {font-size: 5.2vw;}
.section-7 .signature .color-text .yellow {font-weight: 700;padding: 0 20px;}
.section-7 .signature .color-text .point {font-size: 8.2vw;font-family: 'MBC 1961';display: inline-block;}
.section-7 .signature .color-text .orange {background: #eb7526;color: #fff;font-weight: 700;padding: 0 20px;}
.section-7 .desc-text p {margin: 0;}
.section-7 .desc-text {margin-top: 50px;}
.section-7 .desc-text .underline {position: relative;z-index: 1;}
.section-7 .desc-text .underline::after {content:'';background: url(../images/franchise/underline.png) no-repeat center bottom;width: 100%;height: 73px;position: absolute;left: 0;bottom: -4px;z-index: -1;} 

.section-8 {padding-top: 120px;padding-bottom: 140px;background: linear-gradient(180deg, #ffecc9 0%, transparent 100%);text-align: center;}
.section-8 .marquee {width: 100%;overflow: hidden;margin-bottom: 140px;}
.section-8 .marquee .marquee-item {width: 313px;display: inline-block;margin-right: 65px;}
.section-8 h1 {font-size: 80px;margin-bottom: 60px;line-height: 1.3;}
.section-8 h1 strong {position: relative;}
.section-8 h1 strong .new {position: absolute;z-index: -1;font-size: 82px;color: var(--point);top: -58px;right: 0px;letter-spacing: 2px;font-weight: 400;font-style: italic;}
.section-8 p {font-size: 22px;line-height: 1.8;color: #333;}

.section-9 {text-align: center;padding-top: 100px;background: #333;color: #fff;padding-bottom: 60px;}
.section-9 h1 {font-size: 80px;margin-bottom: 100px;}
.section-9 h1 span {background: var(--point);padding: 10px 20px;font-style: italic;}
.section-9 .row {font-size: 30px;align-items: center;margin-bottom: 40px;}
.section-9 img {width: 100%;}

.section-10 {text-align: center;padding-top: 220px;padding-bottom: 130px;border-bottom: 23px solid var(--point);margin-bottom: 23px;}
.section-10 h1 {font-size: 80px;font-weight: 700;margin-bottom: 140px;}
.section-10 h1 .why {position: relative;z-index: -1;}
.section-10 h1 .font-kisah {position: absolute;color: var(--point);left: -12px;font-size: 100px;z-index: -1;top: -77px;font-weight: 400;font-style: italic;}
.section-10 .row { align-items: center; max-width: 1650px; margin: 0 auto; } 
.section-10 h6 { font-size: 35px; font-weight: 400; margin-bottom: 20px; line-height: 1.3; } 
.section-10 h2 { color: #eb7526; font-size: 60px; font-weight: 700; line-height: 1.3; margin-bottom: 62px; } 
.section-10 p { font-size: 22px; line-height: 1.8; } 

.section-11 {border-top: 23px solid var(--point);text-align: center;padding-top: 170px;position: relative;background: #f0f0f0;z-index: 1;padding-bottom: 180px;}
.section-11 h1 { font-size: 80px; font-weight: 700; line-height: 1.2; margin-bottom: 110px; } 
.section-11 h1 .cursive { color: #eb7526; font-weight: 400; } 
.section-11 h1 .font-kisah { color: var(--point); font-weight: 400; font-style: italic; font-size: 100px; } 
.section-11 .video { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; position: relative;} 
.section-11 .video iframe {aspect-ratio: 16 / 9;height: auto;width: 100%;}
#ytmute { position: absolute; top: 20px; right: 20px; font-size: 30px; background: #00000066; color: #fff; border: none; border-radius: 30px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; line-height: 0;} 
#ytmute.unmute i::before {content:'\F60B';}
.section-11 .video .marquee-txt {background: var(--point);padding: 30px 0;display: block;overflow: hidden;} 
.section-11 .video::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; background: #fff; height: 40%; z-index: -1; } 
.section-11 .video .marquee-txt img { margin-right: 50px; } 
.section-11 .interview-wrap {max-width: 1600px;margin: 0 auto;background: #fff;padding: 85px 0;} 
.section-11 .interview-wrap img {width: 150px;}
.section-11 .interview-wrap .row { justify-content: center; align-items: center; text-align: left; margin: 0 auto 60px; max-width: 1200px;} 
.section-11 .interview-wrap .txt-round {font-size: 32px;font-weight: 600;color: #fff;background: var(--point);display: inline-block;border-radius: 10px;padding: 0 10px;margin-bottom: 18px;} 
.section-11 .interview-wrap .font-mbc {font-size: 30px;color: var(--point);margin-bottom: 5px;line-height: 1.4;} 
.section-11 .interview-wrap .comment {font-size: 18px;padding-left: 22px;letter-spacing: -0.02em;} 
.section-11 .interview-wrap .row:nth-child(2) { text-align: right; } 
.section-11 .interview-wrap .row:nth-child(2) .txt-round { background: var(--point2); } 
.section-11 .interview-wrap .row:nth-child(2) .font-mbc { color: var(--point2); } 
.section-11 .interview-wrap .row:nth-child(3) .txt-round { background: #e84848; } 
.section-11 .interview-wrap .row:nth-child(3) .font-mbc { color: #e84848; } 


.section-12 { padding-top: 210px; } 
.section-12 h1 { font-size: 80px; font-weight: 700; text-align: center; margin-bottom: 60px; line-height: 1.3; } 
.section-12 h5 { text-align: center; font-size: 40px; } 

.section-13 h1 { text-align: center; font-size: 80px; font-weight: 700; margin-bottom: 20px; margin-top: 30px; } 

main .section-main-heading {margin-bottom: 60px;}
main .section-main-heading p { font-size: 21px; margin-bottom: 12px; } 
main .process-wrap {padding-bottom: 50px;}
main .process-wrap .process-box {text-align: center;border: 1px solid var(--main);border-radius: 10px;overflow: hidden;flex: 1 1 auto;} 
main .process-wrap .process-box .process-head h3 { color: #fff; font-size: 22px; font-weight: 500; } 
main .process-wrap .process-box .process-head { background: var(--point); padding: 10px 0; border-bottom: 1px solid var(--main); } 
main .process-wrap .process-box .process-head h2 { font-size: 24px; font-weight: 700; } 
main .process-wrap .process-box .process-body {padding-top: 40px;padding-bottom: 40px;font-size: 17px;height: calc(100% - 94px);display: flex;flex-direction: column;justify-content: center;row-gap: 20px;} 
main .process-wrap .process-col {display: flex;width: calc(33.3333% - 40px);position: relative;} 
main .process-wrap .row {column-gap: 60px;margin-bottom: 70px;} 
main .process-wrap .row.reverse {flex-direction:row-reverse}
main .process-wrap .process-box .process-body .icon::before {content: '';width: 70px;height: 1px;background: var(--main);position: absolute;bottom: 0;left: calc(50% - 35px);}
main .process-wrap .process-box .process-body .icon {position: relative;padding-bottom: 10px;}
main .process-wrap .process-box .process-body .icon img {height: 100%;} 
main .process-wrap .row .process-col::after {width: 40px;height: 40px;position: absolute;background: #434343;border-radius: 40px;font-family: xeicon;color: #fff;font-size: 30px;display: flex;align-items: center;justify-content: center;}
main .process-wrap .row:first-child .process-col:nth-child(1)::after, 
main .process-wrap .row:first-child .process-col:nth-child(2)::after {content: '\e93f';right: -50px;top: calc(50% - 20px);}
main .process-wrap .row:nth-child(2) .process-col:nth-child(2)::after, 
main .process-wrap .row:nth-child(2) .process-col:nth-child(3)::after {content: '\e93c';right: -50px;top: calc(50% - 20px);}
main .process-wrap .row:last-child .process-col:nth-child(2)::after, 
main .process-wrap .row:last-child .process-col:nth-child(3)::after {content: '\e93f';left: -50px;top: calc(50% - 20px);}
main .process-wrap .row:first-child .process-col:last-child::after {content: '\e942';right: calc(50% - 20px);bottom: -55px;}
main .process-wrap .row:last-child .process-col:first-child::after {content: '\e942';right: calc(50% - 20px);top: -55px;}
main .cost-table-wrap {margin-bottom: 70px;}
main .cost-table-wrap h5 { color: var(--point); font-weight: 700; line-height: 1.2; font-size: 19px;} 
main .cost-table-wrap h3 { font-size: 24px; font-weight: 700; font-family: 'Pretendard'; margin-bottom: 10px; } 
main .cost-table-wrap .cost-table {overflow-x: auto;}
main .cost-table-wrap .cost-table table { border: 1px solid #ccc; width: 100%;border-collapse: collapse; min-width: 500px;} 
main .cost-table-wrap .cost-table table tr { font-size: 17px; color: #777; } 
main .cost-table-wrap .cost-table table tr td {padding: 15px;text-align: center;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;vertical-align: middle;font-weight: 500;} 
main .cost-table-wrap .cost-table table th {background: var(--point);color: #fff;text-align: center;padding: 15px 0;border-right: 1px solid #ccc;} 
main .cost-table-wrap .cost-table table tr td:nth-child(2) { text-align: left; } 
main .cost-table-wrap .cost-table table tr td:last-child { border-right: 0; } 
main .cost-table-wrap .cost-table table tr:last-child td {border-bottom: 0;background: #e3e3e3;font-size: 21px;font-weight: 400;text-align: center;} 
main .cost-table-wrap .cost-table table th td { border: 0;text-align: center; } 
main .cost-table-wrap .cost-table table tr:last-child td:first-child {color: var(--main);font-weight: 600;} 
main .cost-table-wrap .cost-table table tr td del {text-decoration: none;position: relative;white-space: nowrap;}
main .cost-table-wrap .cost-table table tr td del::after {content:'';width:120%;height:3px;background:red;position:absolute;left:-10%;top:50%;margin-top:-2px;}
main .cost-table-wrap .cost-table table tr td .red {font-weight: 600;color: red;font-size: inherit;}
main .cost-table-wrap .cost-table table tr td ul {list-style: disc;padding-left: 30px;}
main .cost-table-wrap ul.txt-red {color: #dc0f00;margin-top: 15px;font-size: 15px;}

.section-14 {padding-top: 100px;background: var(--point);padding-bottom: 180px;}
.section-14 h1 {font-size: 80px;font-weight: 700;text-align: center;}
.contact-form-wrap {padding: 70px;background: #fff;margin-top: 80px;border-radius: 42px;}
.contact-form .table-form {display: block; width: 100%}
.contact-form .table-form > tbody {display: flex; margin-left: -1.5rem; margin-right: -1.5rem; flex-wrap: wrap}
.contact-form .table-form > tbody > tr {height: auto !important; margin-bottom: 32px; max-width: 100%; flex: 0 0 100%; padding-left: 1.5rem; padding-right: 1.5rem}
.contact-form .table-form > tbody > tr > td {display: block; width: 100% !important; font-family: inherit !important; text-align: left !important}
.contact-form .table-form > tbody > tr > td br {display: none}
.contact-form .table-form > tbody > tr:not([height]) {display: none}
.contact-form .table-form .formmail_title_bgcolor {font-size: 16px; font-weight: 600; color: var(--main); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; background-color: transparent}
.contact-form .table-form .formmail_title_bgcolor font {font-family: inherit !important; font-size: inherit !important}
.contact-form .table-form input[type='text'], .contact-form .table-form input[type='password'], .contact-form .table-form select, .contact-form .table-form textarea {display: block; width: 100%; height: 56px; padding: 0 16px; font-family: inherit !important; font-size: 16px; font-weight: 500; color: var(--gray-800); letter-spacing: -0.02em; border: 1px solid transparent; background-color: var(--white-200); outline: 0; transition: color .3s, border-color .3s, background-color .3s}
.contact-form .table-form input[type='text']:focus, .contact-form .table-form input[type='password']:focus, .contact-form .table-form select:focus, .contact-form .table-form textarea:focus {color: var(--main); border-color: var(--main); background-color: var(--white-100)}
.contact-form .sel-wrap {position: relative;}
.contact-form .sel-wrap::after {content:'\F282';font-family:'bootstrap-icons';position: absolute;right: 12px;top:17px;font-size: 14px;color: #333;}
.contact-form .table-form select {cursor: pointer; padding-right: 28px; background-image: url(../images/common/select_dropdown_arrow.svg); background-position: right 16px center; background-size: 16px 16px; background-repeat: no-repeat}
.contact-form .table-form textarea {padding: 16px; height: auto !important; min-height: 210px}
.contact-form .submit-button {padding-top: 40px}
.contact-form .submit-button .button-submit {display: block; width: 100%; height: 64px; font-size: 20px; font-weight: 600; color: var(--white-100); letter-spacing: -0.02em; padding: 0; border: 0; background-color: var(--main); outline: 0; transition: background-color .3s}
.contact-form .submit-button .button-submit:hover {background-color: var(--main)}
#privacyModal .term-content p {color: var(--gray-800); letter-spacing: -0.02em; line-height: 1.8}
#privacyModal .term-content p + p {margin-top: 16px}
.contact-form {max-width: 760px;margin: 0 auto;}
.contact-form .submit-button .button-submit.yellow {height: 48px;background: #ffd383;border-radius: 5px;font-size: 17px;font-weight: 500;color: #333;}
.contact-form .submit-button .button-submit.yellow:hover {background: var(--point);}
.contact-form .formmail_cell_bgcolor.flex-line {display: flex;align-items: center;gap: 10px;}
.contact-form .formmail_cell_bgcolor.flex-line input[type=text],
.contact-form .formmail_cell_bgcolor.flex-line select {max-width: 200px !important;}
.contact-form .formmail_cell_bgcolor.zipcode-line input:first-child {width: 30%;max-width: 150px !important;display: inline-block !important;}
.contact-form .formmail_cell_bgcolor.zipcode-line br + input {margin-top: 10px;}
.contact-form .formmail_cell_bgcolor.file-desc {font-size: 0 !important;}
.contact-form .formmail_cell_bgcolor.file-desc > * {font-size: 1rem !important;}
.contact-form .formmail_cell_bgcolor.change-direction {flex-direction: column;gap: 0;}
.contact-form .formmail_cell_bgcolor.change-direction .line-break {width: 100%;display: block;margin: 0;}
.contact-form .formmail_cell_bgcolor.change-direction .line-break .label-group {display: inline-block;margin-bottom: 18px;margin-right: 10px;}
.contact-form .file-desc input[type=file] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip:rect(0,0,0,0);border: 0;}
.contact-form .file-desc .file-upload {display: inline-block;margin-right: 5px;margin-bottom: 10px;width: 100%;} 
.contact-form .file-desc .file-upload label { display: inline-block; padding: 11px 17px; font-size: 15px; line-height: normal; vertical-align: middle; cursor: pointer; font-weight: 500; background: var(--gray-50); transition: all .3s; } 
.contact-form .file-desc .file_attach_del { display: inline-block; padding: 9px 17px; font-size: 15px; line-height: normal; vertical-align: middle; cursor: pointer; background: var(--main); transition: all .3s; color: var(--white-100); transition: all .3s; border: 2px solid var(--main)}
.contact-form .file-desc .file_attach_del:hover { background:var(--white-100); color: var(--main); } 
.contact-form .file-desc .file-upload label:hover { background: var(--gray-900); color: var(--white-100); } 
.contact-form .file-desc .file-upload .upload-name.exist { background: var(--gray-50); color: var(--gray-400); border-color: var(--white-200); } 
.contact-form .file-desc .file-upload .upload-name.exist + label { background: var(--gray-50); color: var(--gray-300); } 
.contact-form .file-desc .file-upload .upload-name { display: inline-block; padding: 8px 12px; font-size: inherit; font-family: inherit; line-height: normal; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: calc(100% - 100px); margin-right: 10px; height: 46px; border: 1px solid var(--gray-100); background: none; } 
.contact-form .formmail_cell_bgcolor textarea {width: 100%;border: 1px solid var(--gray-100);padding: 6px 16px;transition: .3s;}
.contact-form .formmail_cell_bgcolor textarea:focus {border-color: var(--primary);outline: none;}
.contact-form .select-group {width: 100%;display: flex;align-items: center;gap: 10px;}
.contact-form select {padding-right: 0;}
.contact-form input[type=checkbox]:not(.custom-check) {display: none;}
.contact-form input[type=checkbox] + label {display: inline-block;position: relative;padding-left: 30px;}
.contact-form input[type=checkbox] + label::before {content:'';width: 24px;height: 24px;background: var(--gray-50);position: absolute;left:0;}
.contact-form input[type=checkbox] + label::after {content:'\F272';font-family: 'bootstrap-icons';font-size: 18px;width: 24px;height: 24px;text-align: center;position: absolute;left: 0;top:0;color: var(--gray-300)}
.contact-form input[type=checkbox]:checked + label::after {color: var(--white-100);}
.contact-form input[type=checkbox]:checked + label::before {background: var(--gray-900);}
.contact-form input[type=radio] {display: none;}
.contact-form input[type=radio] + label {display: inline-block;position: relative;padding-left: 30px;}
.contact-form input[type=radio] + label::before {content:'';border-radius: 30px;width: 22px;height: 22px;border: 2px solid var(--gray-100);position: absolute;left:0;top: 1px;}
.contact-form input[type=radio]:checked + label::after {content: '';width: 10px;height: 10px;text-align: center;position: absolute;left: 6px;top: 7px;background: var(--gray-900);border-radius: 10px;}
.contact-form input[type=radio]:checked + label::before {border-color: var(--gray-900);}


@media (min-width: 1500px) {
    .section-4 .bubble-wrap img:nth-child(1) {margin-right: 215px;}
    .section-4 .bubble-wrap img:nth-child(2) {margin-left: -311px;}
    .section-4 .bubble-wrap img:nth-child(3) {margin-left: 215px;}
    .section-7 .signature h1 {font-size: 167px;}
    .section-7 .signature h1 .cursive {font-size: 82px;}
    .section-7 .signature .color-text {font-size: 87px;}
    .section-7 .signature .color-text .point {font-size: 140px;}
}
@media (max-width: 1200px) {
    .section-1 h1 {font-size: 52px;margin-top: 35px;margin-bottom: 45px;}
    .section-1 img {width: 170px;}
    .section-1 p {font-size: 30px;}
    .section-2 {font-size: 20px;padding: 100px 60px;}
    .section-2 .counter {font-size: 105px;}
    .section-3 {padding: 140px 60px;}
    .section-3 .meaning {font-size: 30px;}
    .section-3 h1 img {width: 540px;}
    .section-3 .about-txt {font-size: 35px;}
    .section-3 .panel h2 {font-size: 30px;}
    .section-3 .panel h5 {font-size: 20px;}
    .section-3 .panel p {font-size: 18px;}

    .section-4 > h2 {font-size: 50px;margin-bottom: 50px;}
    .section-4 h4 {font-size: 32px;}
    .section-4 h1 {font-size: 50px;margin-top: 20px;}
    .section-4 .vs-wrap {margin-top: 70px;font-size: 32px;padding: 0 40px;}
    .section-4 .vs-wrap .row {margin: 25px 0;font-size: 28px;}
    .section-4 .vs-wrap .percent {font-size: 28px;}
    .section-4 .vs-wrap .percent strong {font-size: 60px;}
    .section-4 .vs-wrap .vs {width: 24%;margin-left: -12%;margin-top: -14%;}
    .section-4 .vs-wrap p.info {font-size: 15px;}   
    .section-4 .beans-wrap h2 {font-size: 50px;margin-top: 10px;margin-bottom: 30px;}
    .section-4 .beans-wrap h5 {font-size: 28px;}
    
    .section-5 h3 {font-size: 38px;}
    .section-5 h1 {font-size: 150px;}
    .section-5 img.arrow {transform: scale(0.8);}
    .section-5 {height: 350px;}
    .section-5 h3 { font-size: 38px; } 
    .section-5 h1 { font-size: 150px; } 
    .section-5 img.arrow { transform: scale(0.8); } 
    .section-5 { height: 350px; } 

    .section-6 { padding: 100px 0; } 
    .section-6 h1 {font-size: 55px;margin-bottom: 50px;} 
    .section-6 .check-point { font-size: 34px; margin-bottom: 30px; } 
    .section-6 .check-point .chk {width: 50px;}
    .section-6 .check-point .chk::after {width: 50px;height: 50px;bottom: -4px;} 

    .section-7 .top-wrap { padding: 80px 0 60px; } 
    .section-7 p { font-size: 33px; } 
    .section-7 .coffee-wrap .coffee-mb, .section-7 .coffee-wrap .coffee-mb-bg {display: block;}
    .section-7 .coffee-wrap .coffee {display: none;}
    .section-7 h1 {font-size: 130px;}
    .section-8 h1 {font-size: 70px;}
    .section-9 h1 {font-size: 70px;}
    .section-10 {padding-top: 160px;padding-bottom: 100px;}
    .section-10 h1 {font-size: 70px;margin-bottom: 90px;}
    .section-10 h1 .font-kisah {font-size: 90px;top: -68px}
    .section-10 h2 {font-size: 52px;margin-bottom: 42px;}
    .section-10 h6 {font-size: 31px;margin-top: 15px;}

    .section-11 {padding-top: 120px;padding-bottom: 120px;}
    .section-11 h1 {font-size: 70px;}
    .section-11 h1 .font-kisah {font-size: 82px;}
    .section-11 .interview-wrap .row {flex-direction: column;text-align: center !important;row-gap: 30px;}
    .section-11 .interview-wrap .row:nth-child(2) {flex-direction: column-reverse;}

    .section-12 {padding-top: 140px;}
    .section-12 h5 {font-size: 36px;}
    .section-12 h1,
    .section-13 h1 {font-size: 64px;}
    main .process-wrap {padding-bottom: 20px;}
    .section-14 {padding: 70px 0 100px;}
    .section-14 h1 {font-size: 64px}
    .contact-form-wrap {margin-top: 50px;}
}

@media (max-width: 991px) {
    .section-3 .row {row-gap: 20px;}
    .section-3 .panel {padding: 20px 0 30px;}
    .section-3 .panel .round-img {width: 110px;position: static;margin: 0 auto 20px;}
    .section-4 .vs-wrap { margin-bottom: 120px; } 
    .section-4 .vs-wrap .vs-row {flex-direction: column;align-items: center;row-gap: 20vw;}
    .section-4 .vs-wrap .vs-row .vs-left {margin-left: 22vw;width: 60vw;max-width: 530px;}    
    .section-4 .vs-wrap .vs-row .vs-right {margin-right: 22vw;width: 60vw;max-width: 530px;}
    .section-4 .vs-wrap .vs {width: 31vw;margin-top: -18vw;margin-left: -15vw;}
    .section-4 .bubble-wrap {display: flex;flex-direction: column;height: auto;max-height: 100%;} 
    .section-4 .bubble-wrap img:nth-child(1) { position: static; width: 50%; } 
    .section-4 .bubble-wrap img:nth-child(2) { position: static; margin-top: -22%; width: 55%; margin-left: 45%; } 
    .section-4 .bubble-wrap img:nth-child(3) { position: static; width: 45%; margin-top: -13%; } 
    .section-4 .beans-wrap img {max-width: 700px;width: 100%;}

    .section-5 h3 { font-size: 34px; } 
    .section-6 { padding: 80px 0; } 
    .section-6 h1 { font-size: 45px; margin-bottom: 40px; } 
    .section-6 .check-point { font-size: 30px; margin-bottom: 20px; } 

    .section-7 .special-card-mb {display: block;}
    .section-7 .special-card {display: none;}
    .section-7 .specialty .row > div.col-12 {padding: 10px;}
    .section-7 .quality .row > div {width: 100%;}
    .section-7 .quality h5 {margin-top: 30px;}
    .section-7 .quality {padding-bottom: 300px;}
    .section-7 .quality::after {top: unset;bottom: 0;height: 300px;}
    .section-7 .signature h1 {font-size: 16vw;}
    .section-7 .signature h1 .cursive {font-size: 7vw;top: -6.7vw;}
    .section-7 .signature .color-text {font-size: 7.5vw;margin-top: 3vw;}
    .section-7 .signature .color-text .point {font-size: 12vw;}
    .section-7 p { font-size: 30px; } 
    span.mb-br {display: block;}

    .section-9 .row .text {max-height: 300px;height: 54vw;display: flex;align-items: center;justify-content: center;font-size: 34px;}
    .section-9 .row.reverse {flex-direction: column-reverse;}
    .section-9 { padding-bottom: 0; } 
    .section-9 .row { margin-bottom: 0; } 
    .section-9 h1 { font-size: 60px; } 

    .section-10 { padding-top: 130px; } 
    .section-10 h1 { font-size: 58px; margin-bottom: 20px; } 
    .section-10 h1 .font-kisah { font-size: 80px; } 


    .section-11 h1 { font-size: 60px; } 
    .section-11 h1 .font-kisah { font-size: 72px; } 
    .section-11 .interview-wrap {padding: 40px 0;}
    .section-11 .interview-wrap .txt-round { font-size: 28px; } 
    .section-11 .interview-wrap .font-mbc { font-size: 30px; } 
    .section-11 .interview-wrap .comment { font-size: 22px; } 
    .section-11 .video .marquee-txt img {width: 300px;margin-right: 33px;}

    .section-12 h1, .section-13 h1 { font-size: 52px; } 
    .section-12 h5 { font-size: 32px; } 
    .section-12 { padding-top: 110px; } 

    .section-14 h1 { font-size: 58px; } 
    .contact-form-wrap { margin-top: 32px; padding: 60px 40px; } 

    main .section-main-heading {margin-bottom: 50px;}
    main .process-wrap .process-box .process-head h3 {font-size: 19px;}
    main .process-wrap .process-box .process-head h2 {font-size: 21px;}
    main .process-wrap .row {column-gap: 30px;margin-bottom: 50px;}
    main .process-wrap .process-col {width: calc(33.3333% - 20px)}
    main .process-wrap .row .process-col::after {width:34px;height:34px;font-size: 24px;}
    main .process-wrap .row:first-child .process-col:nth-child(1)::after, 
    main .process-wrap .row:first-child .process-col:nth-child(2)::after,
    main .process-wrap .row:nth-child(2) .process-col:nth-child(2)::after, 
    main .process-wrap .row:nth-child(2) .process-col:nth-child(3)::after {right: -32px;}
    main .process-wrap .row:last-child .process-col:nth-child(2)::after, 
    main .process-wrap .row:last-child .process-col:nth-child(3)::after {left: -32px;}
    main .process-wrap .row:first-child .process-col:last-child::after {bottom: -43px;}
    main .process-wrap .row:last-child .process-col:first-child::after {top: -43px;}
    main .process-wrap .process-box .process-body {padding: 20px 0;}
}

@media (max-width: 767px) {
    .section-4 .vs-wrap .vs {margin-top: -22vw;}

    main .process-wrap .process-col {width: 100%;margin-bottom: 50px;}
    main .process-wrap .row {column-gap: 0;margin-bottom: 0;}
    main .process-wrap .row .process-col::after {content: '\e942' !important;top: unset !important;bottom: -43px !important;left: calc(50% - 17px) !important;right: unset !important;}
    main .process-wrap .row:last-child .process-col:last-child::after {content: none !important;}
    main .process-wrap .process-box .process-head h2 {font-size: 19px;}
    main .process-wrap .process-box .process-body .icon {height: 92px;}
    main .cost-table-wrap h3 {font-size: 21px;}
    main .cost-table-wrap h5 {font-size: 17px;}
    main .cost-table-wrap .cost-table table tr {font-size: 15px;}
    main .cost-table-wrap .cost-table table th {padding: 10px 0;}
    main .cost-table-wrap .cost-table table tr td {padding: 10px;}
    main .cost-table-wrap .cost-table table tr:last-child td {font-size: 18px;}
    .contact-form-wrap {padding: 40px 30px;}
    .contact-form .table-form > tbody {margin-left: -12px; margin-right: -12px}
    .contact-form .table-form > tbody > tr {padding-left: 12px; padding-right: 12px}
    .contact-form .table-form .formmail_title_bgcolor {font-size: 14px}
    .contact-form .table-form input[type='text'], .contact-form .table-form input[type='password'], .contact-form .table-form select, .contact-form .table-form textarea {font-size: 14px}
    .contact-form .submit-button .button-submit {height: 60px; font-size: 18px}
    .contact-form .submit-button .button-submit.yellow {font-size: 15px;}
}

@media (max-width: 575px) {
    .contact-form .table-form > tbody > tr {flex: 0 0 100%; max-width: 100%; margin-bottom: 24px}
    .contact-form .submit-button {padding-top: 24px}

    .section-1 img { width: 120px; } 
    .section-1 h1 {font-size: 36px;padding: 0 20px;} 
    .section-1 p {font-size: 23px;padding: 0 20px;} 
    .section-2 {padding: 70px 0;font-size: 15px;} 
    .section-2 .counter {font-size: 62px;} 
    .section-3 .meaning { font-size: 21px; } 
    .section-3 .meaning .point { margin-left: 5px; } 
    .section-3 .panel h2 { font-size: 26px; line-height: 1.6; } 
    .section-3 .panel p { margin-top: 10px; padding: 0 10px; font-size: 17px; } 
    .section-3 { padding: 90px 30px; } 
    .section-3 .about-txt {font-size: 23px;margin-bottom: 60px;} 
    .section-3 h1 {margin-bottom: 34px;} 
    .section-4 { padding: 90px 0; } 
    .section-4 .vs-wrap .vs-row .vs-right {border-width: 8px;width: 80vw;margin-left: 40px;margin-right: unset;} 
    .section-4 .vs-wrap .vs-row .vs-left {width: 80vw;margin-right: 40px;margin-left: unset;} 
    .section-4 .vs-wrap .vs-row { row-gap: 30vw; } 
    .section-4 > h2 {font-size: 40px;margin-bottom: 30px;} 
    .section-4 .bubble-wrap img:nth-child(1) { width: 65%; margin-left: -4%; } 
    .section-4 .bubble-wrap img:nth-child(2) { width: 62%; margin-left: 43%; } 
    .section-4 .bubble-wrap img:nth-child(3) { width: 67%; margin-left: 10%; } 
    .section-4 .bubble-wrap { margin-bottom: 70px; } 
    .section-4 .vs-wrap .vs {margin-top: -30vw;width: 40vw;margin-left: -20vw;}
    .section-4 h4 {font-size: 26px;} 
    .section-4 h4 strong { padding: 0 5px; } 
    .section-4 h1 {font-size: 42px;margin-top: 12px;} 
    .section-4 .vs-wrap { margin-top: 50px; } 
    .section-4 .beans-wrap h5 { font-size: 26px; } 
    .section-4 .beans-wrap h2 { font-size: 40px; margin-top: 5px; margin-bottom: 20px; } 
    .section-4 .beans-wrap p {font-size: 18px;padding: 0 20px;line-height: 1.68;} 
    .section-5 h3 {font-size: 27px;margin-top: 10px;} 
    .section-5 {height: 260px;} 
    .section-5 img.arrow { transform: scale(0.6); } 
    .section-5 h1 {font-size: 110px;} 
    .section-6 h1 {font-size: 38px;line-height: 1.3;} 
    .section-6 {padding: 60px 0 40px;} 
    .section-6 .check-point {font-size: 20px;margin-bottom: 18px;line-height: 1.4;} 
    .section-6 .check-point .chk {width: 32px;} 
    .section-6 .check-point .chk::after {width: 32px;height: 32px;bottom: -2px;} 
    .section-7 p {font-size: 22px;padding: 0 10px;} 
    .section-7 h1 {font-size: 60px;} 
    .section-7 .top-wrap { padding: 70px 0 40px; } 
    .section-7 .specialty { margin-top: 70px; } 
    .section-7 .quality::after { height: 200px; } 
    .section-7 .quality { padding-bottom: 150px; } 
    .section-7 .signature { padding-bottom: 80px; } 
    .section-8 h1 {font-size: 44px;margin-bottom: 30px;} 
    .section-8 h1 strong .new { font-size: 62px; top: -38px; margin-right: -10px; } 
    .section-8 p { font-size: 20px; padding: 0 20px; } 
    .section-8 {padding-bottom: 100px;} 
    .section-8 .marquee { margin-bottom: 110px; } 
    .section-9 h1 {font-size: 42px;margin-bottom: 60px;} 
    .section-9 h1 span { padding: 8px 10px; } 
    .section-9 { padding-top: 90px; } 
    .section-9 .row .text { font-size: 28px; } 
    .section-10 h1 {font-size: 38px;} 
    .section-10 h1 .font-kisah {font-size: 54px;top: -46px;} 
    .section-10 h6 {font-size: 24px;margin-bottom: 12px;} 
    .section-10 h2 {font-size: 38px;padding: 0 20px;margin-bottom: 26px;} 
    .section-10 p {font-size: 18px;padding: 0 20px;line-height: 1.62;} 
    .section-10 {border-width: 16px;margin-bottom: 16px;padding-top: 110px;padding-bottom: 80px;} 
    .section-11 { border-width: 16px; padding-top: 90px; } 
    .section-11 h1 {font-size: 38px;margin-bottom: 60px;} 
    .section-11 h1 .font-kisah {font-size: 50px;} 
    .section-11 .video .marquee-txt { padding: 20px 0; } 
    .section-11 .video .marquee-txt img { width: 240px; margin-right: 30px; } 
    .section-11 .interview-wrap img { width: 120px; } 
    .section-11 .interview-wrap .txt-round {font-size: 22px;margin-bottom: 18px;} 
    .section-11 .interview-wrap .font-mbc {font-size: 26px;padding: 0 20px;margin-bottom: 10px;} 
    .section-11 .interview-wrap .comment {font-size: 18px;padding: 0 20px;} 
    .section-11 .interview-wrap .row { row-gap: 15px; } 
    .section-12 {padding-top: 80px;} 
    .section-12 h5 {font-size: 26px;} 
    .section-12 h1, .section-13 h1 {font-size: 38px;margin-bottom: 44px;} 
    .section-14 h1 {font-size: 42px;} 
    #ytmute {font-size: 25px;width: 40px;height: 40px;}
}