@charset "UTF-8";
body {
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.02em;
    --theme  : #E1251B;
    --light1 : #FEF4F3;
    --light2 : #F9D3D1;
    --light3 : #E75149;
    --dark1  : #C82118;
    --dark2  : #B11D15;
    --mark   : #F3B000;
    --emph   : #F3B000;
}
.color { color: var(--theme); }
.emph { color: var(--emph); }
.inner { max-width: 1200px; }

.footer { text-align: center; padding: 3em 0; font-family: 'GmarketSans'; font-size: 0.9em; line-height: 1.6; color: #888; margin-bottom: 5em;}

.main { font-family: 'GmarketSans'; text-align: center; }
.section { padding: 8em 0; }
.tit { margin-bottom: 3em; }
.tit h2 { font-size: 3.75em; font-weight: 700; }
.tit h3 { font-size: 2.25em; font-weight: 700; }
.tit p { font-size: 1.5em; font-weight: 300; margin-top: 0.5em; line-height: 1.6; }
.tit p b { font-weight: 500; }
.tit::after { content:""; width: 18em; height: 1px; display: block; margin: 1em auto 0; }

.visual { position: relative; width: 100%; height: 100vh; overflow: hidden; background-color: #000; color: #fff; display: flex; align-items: center; justify-content: center;}
.visual .bg { height: 115%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0.35; }
.visual .inner { position: relative; text-align: center; }
.visual .logo img { width: 60%; max-width: 418px; }
.visual p { font-size: 2em; margin-top: 1em; }

.brand { background-color: #004E59; color: #fff; }
.brand .tit::after { background-color: var(--emph); }
.brand .con { display: flex; max-width: 1100px; margin: auto; }
.brand .txt { width: 60%; background: url(../img/img_brand.png) no-repeat center/cover; display: flex; flex-direction: column; text-align: left; justify-content: center; padding: 3em; }
.brand .txt .logo img { width: 50%; }
.brand .txt p { font-size: 1.25em; margin-top: 2em; font-weight: 300; line-height: 1.6;}
.brand .video { width: 40%; padding-top: 50%; overflow: hidden; position: relative; }
.brand .video video { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }

.merit { background-color: var(--emph); }
.merit .tit { color: #004E59; }
.merit .tit img { height: 0.875em; vertical-align: top; }
.merit .swiper-slide { display: flex; }
.merit .swiper-slide > div { position: relative; overflow: hidden; }
.merit .swiper-slide video { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.merit .swiper-slide .video { width: 55%; padding-top: 50%; }
.merit .swiper-slide .video video { width: 100%; }
.merit .swiper-slide .txt { width: 45%; background-color: #000; text-align: left; padding: 3em; display: flex; align-items: center; }
.merit .swiper-slide .txt video { width: 100%; opacity: 0.2; }
.merit .swiper-slide .txt ul { position: relative; color: #fff; }
.merit .swiper-slide .txt li {  margin-bottom: 2.5em; }
.merit .swiper-slide .txt li:last-child { margin-bottom: 0; }
.merit .swiper-slide .txt h5 { font-size: 1.25em; display: inline-flex; border: 0.2em solid var(--theme); border-radius: 5em; padding: 0.5em 1em 0.3em; margin-bottom: 1em; font-weight: 700; }
.merit .swiper-slide .txt p { font-size: 1.375em; line-height: 1.4; word-break: keep-all; }

.menu { background: url(../img/bg_menu.png) no-repeat center/cover; color: #fff; }
.menu .tit { color: #aaa; }
.menu .tit::after { background-color: #004E59; }
.menu .tab ul { font-size: 1.125em; display: flex; justify-content: center; }
.menu .tab li { margin: 1em; }
.menu .tab a { display: flex; padding: 0 1.5em; height: 2.6em; line-height: 2.6; border: 1px solid #fff; border-radius: 5em; }
.menu .tab li.active a { background-color: #004E59; }
.menu .list { display: flex; flex-wrap: wrap; } 
.menu .item { width: 31.333%; margin: 1%; border: 1px solid var(--theme); border-radius: 1em; overflow: hidden; } 
.menu .txt { padding: 2.5em 1em 1.5em; }
.menu .txt h5 { font-size: 2em; }
.menu .txt p { font-size: 1.375em; color: #aaa; line-height: 1.4; word-break: keep-all; margin-top: 0.75em; }
.menu .thumb { padding-top: 75%; background: no-repeat center/cover; }

.point { background-color: #004E59; }
.point .con { color: #fff; position: relative; border-radius: 2em; padding-top: 58%; box-shadow: inset 0 0 10em #000;}
.point .tab { font-size: 1em; display: flex; justify-content: center; position: absolute; bottom: 5%; left: 0; width: 100%; }
.point .tab li { margin: 1em; display: flex; padding: 0 1.5em; height: 2.6em; line-height: 2.6; border: 1px solid #fff; border-radius: 5em; cursor: pointer; }
.point .tab li.active { background-color: #004E59; }
.point .txt { width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap; }
.point .txt p { font-size: 2em; line-height: 1.6; display: none; }
.point .con1 { background: url(../img/img_point_01.png) no-repeat center/cover; }
.point .con1 .txt p:nth-child(1) { display: block; }
.point .con2 { background: url(../img/img_point_02.png) no-repeat center/cover; }
.point .con2 .txt p:nth-child(2) { display: block; }

.cost { padding-bottom: 15em; background: url(../img/bg_cost.png) no-repeat center/cover; }
.cost .con table { background-color: #fff; width: 100%; }
.cost .con thead { background-color: #004E59; color: #fff; }
.cost .con caption { color: #fff; text-align: right; margin-bottom: 0.5em; font-size: 0.9em; }
.cost .con td { font-size: 1.25em; border: 1px solid #888; padding: 0.7em 1em 0.5em; }
.cost .con p { font-size: 0.9em; line-height: 1.6; text-align: left; color: #fff; margin-top: 0.5em; }

.inquiry { background: linear-gradient(to top, #F3B000 80%, transparent 80%), url(../img/bg_inquiry.png) no-repeat center top/100%; margin-top: -12em; padding-top: 15em; }
.inquiry .con { font-size: 1.125em; max-width: 600px; margin: auto; --theme: #004E59; }
.inquiry .con li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5em; }
.inquiry .con li label { width: 8em; text-align: right; }
.inquiry .con li input,
.inquiry .con li select { width: calc(100% - 9em); height: 3em; }
.inquiry .con .chk_box { width: calc(100% - 9em); margin-right: 0; margin-left: auto; display: block; text-align: left; }
.inquiry .con .chk_box span { margin-right: 0.3em; vertical-align: middle; margin-top: -0.1em; }
.inquiry .con .btn_confirm { margin-top: 2em; }
.inquiry .con .btn_submit { height: 2.8em; line-height: 2.8; padding: 0 2.5em; }

/* quick */
.quick { padding: 1em 0; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; background-color: #000; color: #fff; }
.quick ul { display: flex; gap: 0.5em; font-size: 1.125em; }
.quick li { flex: 1 1 0; height: 2.8em; }
.quick li:nth-child(1) {align-self: center; flex-grow: 0; height: auto; }
.quick li:nth-child(5) { white-space: nowrap; align-self: center; flex-grow: 0; height: auto; }
.quick li > label { display: none; }
.quick li input,
.quick li select { width: 100%; height: 100%; }
.quick img { height: 1.5em; }
.quick .chk_box label { font-size: 0.9em; }
.quick .chk_box label small { display: block; width: 100%; background-color: #666; color: #fff; text-align: center; }
.quick .btn_submit { height: 100%; background-color: var(--emph); font-weight: 700; font-size: 1.25em; border: 0; width: 100%; color: #000; }

/* 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; }
}


/******************************** 반응형 **********************************/
br.mb { display: none; }
@media screen and (max-width: 1280px){
    .inner { padding-left: 3%; padding-right: 3%; }
    .main { font-size: 1.25vw; }
}
@media screen and (max-width: 1024px){
    .main { font-size: 1.375vw; }
    .quick { font-size: 2.25vw; }
    .quick li:nth-child(1) { display: none; }
    .quick ul { flex-wrap: wrap; }
    .quick li { flex: 30% 1 0; }
}
@media screen and (max-width: 768px){

}
@media screen and (max-width: 586px){
    br { display: none; }
    br.mb { display: block; }
    
    .main { font-size: 2.25vw; }
    .visual p { margin-top: 1.5em; line-height: 1.6; }

    .brand .con { flex-direction: column-reverse; }
    .brand .txt,
    .brand .video { width: 100%; }
    .brand .video { padding-top: 65%; }
    .brand .txt { padding: 4em 3em; }
    .brand .txt p { font-size: 1.5em; }

    .merit .swiper-slide { flex-direction: column; }
    .merit .swiper-slide .video,
    .merit .swiper-slide .txt { width: 100%; }
    .merit .swiper-slide .video { padding-top: 65%; }
    .merit .swiper-slide .txt { padding: 4em 3em; }

    .menu .item { width: 48%; }
    .point .con { padding-top: 70%; }
    .point .txt { white-space: wrap; top: 45%; }
    .point .txt p { font-size: 1.5em; }
    .point .tab { flex-wrap: wrap; }
    .point .tab li { margin: 0.5em; }

    .cost .con td { word-break: keep-all; }
    .cost .con td:nth-child(1) { white-space: nowrap; }

    .inquiry { padding-top: 12em; }
    .inquiry .con { font-size: 1.375em; }
    .inquiry .con li { flex-direction: column; margin-bottom: 1em; }
    .inquiry .con li label,
    .inquiry .con li input,
    .inquiry .con li select,
    .inquiry .con .chk_box { width: 100%; text-align: left; }
    .inquiry .con li label { margin-bottom: 0.5em; }

    .quick { font-size: 3.5vw; transform: translateY(82%); -webkit-transition: 0.4s;-moz-transition: 0.4s;-ms-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s; }
    .quick.on { transform:translateY(0); }
    .quick li { flex: 100% 1 0; }
    .quick li:nth-child(1) { display: block; text-align: center; margin-bottom: 0.5em; }
}