@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,700;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {--swiper-theme-color: #000;}
html {--top-spacing: 8rem; scroll-padding-top: var(--top-spacing);}
html, body {font-size: 10px;}
body, html, .wrapper, .content, .main {height: 100%;}
a {display: block; text-decoration: none; color: #fff; margin: 0;}
img {width: 100%;}
p {font-size: 1.9rem;}
p:last-of-type,
p:only-child {margin-bottom: 0;}
ul {list-style: none; margin: 0; padding: 0;}
[class*="col"] img {border-radius: 1.5rem;}

.wrapper {width: 100%; margin: 0 auto;}
.grid-wrap {position: relative; display: flex; width: 100%; height: 100%; }
/* GNB */
.topNav {position: fixed; top: 0; left: 0; height: 11.6rem; width: 100%; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 2.5rem 2rem 0; background-color: rgba(255, 255, 255, 0); -webkit-transition: all .3s; transition: all .3s; color: #fff; }
.topNav h1 {display: flex; align-items:center; font-family: 'Righteous', cursive; text-transform: uppercase; letter-spacing:0.1rem; font-size: 4rem; margin: 0; padding-bottom:2.5rem;}
.topNav nav {display: flex; flex-direction: column; align-items: flex-end;}
.topNav ul:not(.subNav) {display: flex; flex-wrap: wrap; margin: 0; font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-weight: 500; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.1rem;}
.topNav ul a {display: block; position: relative;}
.topNav ul.gNav > li {position: relative;}
.topNav ul.gNav > li > a {padding: 1rem 1rem 2.5rem; -webkit-transition: all .5s; transition: all .5s;}
.topNav ul.gNav > li:hover > a,
.topNav ul.gNav > li > a:hover {color:rgba(168, 42, 42, 1)}
.topNav ul.gNav > li > a::after {position: absolute; bottom: 2rem; left: 0; right: 0; margin: auto; color: transparent; background-color: rgba(168, 42, 42, 0.6); content: ''; width: 0; height: 0.2rem; -webkit-transition: all .5s; transition: all .5s;}
.topNav ul.gNav > li:hover > a::after {width: 100%;}
.topNav ul.subNav {display: none; height:0; border-radius: 1rem; position: absolute; top: 4.5rem; left: 50%; -webkit-transform: translateX(-50%); background-color: rgba(255, 255, 255, .7); padding: 1rem 0; -webkit-transition: all .3s; transition: all .3s;}
.topNav ul.subNav a {color: #000; font-size: 1.4rem; padding: 0.5rem 1.5rem;}
.topNav ul.subNav a:hover {background-color: rgba(168, 42, 42, 0.6); color: #fff;}
.topNav ul.gNav > li:hover ul.subNav {display: flex; flex-direction: column; height: auto; -webkit-transition: all .3s; transition: all .3s;}
.topNav ul.lang li:not(:first-child) {margin-left: 1rem;}
.topNav [data-lang] {display: flex; align-items: center; font-size: 1.3rem; line-height: 1; padding: 0.6rem 1rem;}
.topNav [data-lang].on {position: relative; background-color: rgba(255, 255, 255, .5); border-radius: 2.5rem; color: #000; font-weight: 600;}
.topNav [data-lang]::after {content: ''; width: 1.6rem; height: 1.2rem; display: block; background-size: cover; background-position: center center; margin-left: 0.5rem; overflow:hidden; }
.topNav [data-lang="en"]::after {background-image: url('../images/ca.svg');}
.topNav [data-lang="kr"]::after {background-image: url('../images/kr.svg');}
.topNav [data-lang="de"]::after {background-image: url('../images/de.svg');}
.topNav.shrink h1 {padding-bottom: 1.5rem;}
.topNav.shrink {height: 8.5rem; padding: 1.5rem 2rem 0; background-color: rgba(255, 255, 255, 1); -webkit-transition: all .3s; transition: all .3s; border-bottom: 1px solid #dfdfdf;}
.topNav.shrink ul.gNav > li > a {padding: 1rem 1rem 1.5rem;}
.topNav.shrink ul.gNav > li > a::after {width: 0;}
.topNav.shrink .logo a {color: #000;}
.topNav.shrink a {color: #000;}
.topNav.shrink [data-lang].on {background-color: rgba(168, 42, 42, 0.5); color: #fff;}
.topNav.shrink ul.subNav {top: 4.7rem; border: 1px solid #ccc; border-top:none; border-top-right-radius: 0; border-top-left-radius: 0;}
.cta {padding-top: 8rem; position: absolute; bottom: 4rem; left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%); z-index: 5;}
.cta .arrow {position: absolute; top: 0; left: 50%; width: 2.4rem; height: 2.4rem; margin-left: -1.2rem; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: arrow 2s infinite; animation: arrow 2s infinite; opacity: 0; box-sizing: border-box;}
.cta .arrow:nth-of-type(1) {-webkit-animation-delay: 0s; animation-delay: 0s;}
.cta .arrow:nth-of-type(2) {top: 1.6rem;-webkit-animation-delay: .15s;animation-delay: .15s;}
.cta .arrow:nth-of-type(3) {top: 3.2rem; -webkit-animation-delay: .3s; animation-delay: .3s;}
@-webkit-keyframes arrow {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes arrow {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* content section */
.container {max-width: 102.4rem; margin:0 auto;}
.row + .row {margin-top: 2.4rem;} 
.card {border:none; border-radius: 1.5rem; overflow: hidden;}
.card-header:first-child {padding: 2rem; font-family: 'Montserrat', 'Noto Sans KR', sans-serif;  font-size: 1.8rem; color: #fff; text-transform: uppercase;}
.card-header h4 {font-weight: 600; font-size: 2.4rem; margin: 0; line-height: 1.4;}
.row [class*="col-"] .card-header:first-child {background-color: rgba(107,83,68, 1);}
[class*="col-"] .card-body {padding: 2.5rem 2.5rem 3rem;}
[class*="col-"] .card-body p {font-size: 1.6rem; line-height: 1.6;}
[class*="col-"] .card-body.light {background-color: rgba(167,156,142, .5); }
[class*="col-"] .card-body.dark {background-color: rgba(241,187,186, .4);}

section[data-type] {position: relative; display: flex; }
section[data-type]::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(144, 144, 144, 0); z-index:1;}
section[data-type="background"] {width: 100%; margin: auto; background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
section[data-type="background"] article {z-index: 10;}
section[data-type="background"] h3 {text-align:center; color:#fff; margin: 100px 0 50px;}

.img-sec01 {height: 100%; background-image: url('../images/35.jpg');}
.img-sec02 {min-height: 350px; background-image: url('../images/20.jpg');}    
.img-sec02 + .article {background-color: #e3dddd; color: #8b0606}
.img-sec03 {min-height: 500px; background-image: url('../images/41.jpg');}
.img-sec04 {min-height: 400px; background-image: url('../images/8.jpg');}   
.img-sec04 + .article {background-color: #dddde3; color: #20205a;} 
.img-sec05 {min-height: 400px; background-image: url('../images/16.jpg');}
.img-sec05 + .article {color: rgba(107,83,68, 1);}
.img-sec06 {min-height: 650px; background-image: url('../images/13.jpg');}
section[data-type].img-sec01::after {background: rgb(0,212,255); background: linear-gradient(180deg, rgba(255,255,255,0) 0%,  rgba(179, 179, 179, 0.1) 40%, rgba(134, 134, 134, 0.2) 60%, rgba(2,0,0,.6) 100%);}
.headline {display: flex; flex-direction: column; align-items: center; max-width: 1024px; width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif; text-transform: uppercase; font-size: 18px; line-height: 1.3; color: #fff; font-weight: 400; letter-spacing: 2px; padding-bottom: 30px;}
.headline .logo {max-width: 130px;}
.headline > h2 {text-align: center; width: 100%; font-size: 60px; line-height: 1.3; font-family: 'Righteous', cursive;}
.article {padding: 110px 50px; min-height: 580px;}
article {width: 100%; max-width: 1024px; margin: 0 auto;}
.article.min {min-height: 200px;}
article h3 {font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 56px; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 30px;}
article p {font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-size: 19px; line-height: 1.7;}
article p > span {font-size: 16px; display: block;}
article p:only-of-type {margin: 0;}
article h4,
.swiper h4 {font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 25px; display: flex; align-items: center;}
:lang(ko) article h4 {line-height: 1.5;}
article h4 > i {margin-right: 1rem; font-size: 2.7rem;}
article div ~ .grid {margin-top: 50px;}
article .grid {display: flex; align-items: center;}
article .grid:not(:last-child),
article .p-block:not(:last-child) {margin-bottom: 50px;}

.contact .row {background-color: rgba(255, 255, 255, .7); min-height: 30rem; border-radius: 2rem; padding: 3rem; margin-bottom: 10rem;}
.contact dl {display: flex; flex-wrap: wrap; align-items: center;}
.contact dt {width: 15%; flex: 0 0 15%; font-size: 2.4rem;}
.contact dd {width: 85%; flex: 1 0 85%; font-size: 1.4rem; line-height: 1.2; margin: 0; font-family: 'Montserrat', 'Noto Sans KR', sans-serif; }
form .form-floating label {font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-size: 1.4rem; font-weight: 600;}
form .form-control {background-color: rgba(255, 255, 255, .7); font-size: 1.8rem;}
.form-floating>.form-control-plaintext:focus, 
.form-floating>.form-control-plaintext:not(:placeholder-shown), 
.form-floating>.form-control:focus, 
.form-floating>.form-control:not(:placeholder-shown) {padding-top: 3.625rem; padding-bottom: 1.625rem;}
.form-floating>textarea.form-control:not(:placeholder-shown)~label {transform: none; color:rgba(var(--bs-body-color-rgb),1);}
.form-floating>textarea.form-control:focus:not(:placeholder-shown)~label {transform: scale(.85) translateY(-.5rem) translateX(.15rem); color: rgba(var(--bs-body-color-rgb),.65);}
.form-floating>textarea.form-control:not(:placeholder-shown)~label::after {display: none}
.form-floating>textarea.form-control:focus:not(:placeholder-shown)~label::after {display: block; position: absolute; inset: 1rem 0.375rem; z-index: -1; height: 1.5em; content: "";  background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius);}
form textarea.form-control {height: 150px !important;resize: none;}
form .submit {border: none; background-color: rgba(134, 134, 134, 1); border-radius: .4rem; padding: .8rem 5rem; color: #fff; font-family: 'Montserrat', 'Noto Sans KR', sans-serif;  font-size: 1.6rem; font-weight: 600;}
form .submit:hover {background-color: rgba(0, 0, 0, .6)}

.slider-wrapper {display: flex; justify-content: center;}
.wide {width: 100%; max-width: 1024px; margin: 0 auto; position: relative; padding: 0;}
.swiper {overflow: hidden; font-family: 'Montserrat', 'Noto Sans KR', sans-serif; padding-bottom: 7rem;}
.swiper h4 {margin-bottom: 4rem; text-transform: uppercase;}
.swiper p {font-size: 1.6rem; line-height: 1.6;}
.swiper h4 i {margin-right: .8rem;}
.swiper h5 {font-size: 1.8rem; font-weight: 700;}
.swiper .tab-pane p {font-size: 1.6rem; line-height: 1.6;}
.swiper .tab-content p~h5 {padding-top: 1.5rem;}
.swiper .nav-pills .nav-link {font-size: 1.7rem; color: rgba(193, 130, 130, 0.8); position: relative; min-width: 19rem; display: flex; align-items: center;}
.swiper .nav-pills .nav-link.active, 
.nav-pills .show>.nav-link {background-color:#c18282; color: #fff;}
.swiper .nav-pills .nav-link.active::before, 
.nav-pills .show>.nav-link::before {display: block; margin-right: .2rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); font-family:"Material Symbols Outlined"; content:'\f10d'; font-size: 1.8rem; font-variation-settings: 'GRAD' 0, 'wght' 400;}
.swiper .tab-content .tab-pane {overflow: hidden; padding: 3rem 1rem;}
.swiper-slide {width: 100%; overflow: hidden;}
.swiper [class*="swiper-button-"] {color: #000;}
.swiper-button-next, .swiper-rtl .swiper-button-prev {right: -5rem;}
.swiper-button-prev, .swiper-rtl .swiper-button-next {left: -5rem;}
.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev::after {font-family: 'Material Symbols Outlined'; content: "\e941"; font-size:5.2rem; line-height:1;  font-variation-settings: 'GRAD' 0, 'wght' 200;}
.swiper-button-prev::after {transform: rotate(-180deg);} 
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {left: var(--swiper-scrollbar-sides-offset,0)}
.swiper-scrollbar-drag {background: var(--swiper-scrollbar-drag-bg-color,#000)}
.ranking {display: flex; align-items: stretch; color:#8b0606; border-radius: 1.5rem;}
.ranking .card-header {background-color: #8b0606; font-size: 1.6rem; display: flex; text-align: center; justify-content: center; padding: 1.5rem 0;}
.ranking .card-header i {font-size: 5rem; margin-top:.5rem;}
.ranking .card-body {padding: 2rem;}
span.icon {display: flex; flex-direction: column; text-transform: uppercase; font-size: 18px; font-weight: bold; align-items: center; line-height: 1.7; justify-content: center;}
.ranking ul li {font-size: 16px; font-family: 'Montserrat', 'Noto Sans KR', sans-serif; margin-bottom: 5px;}

.material-symbols-outlined {font-size:3rem; font-variation-settings:'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48}
.material-symbols-outlined:first-child {margin-right: .8rem;}


footer {padding: 50px; background-color:#c18282;}
footer .row {max-width: 1024px; margin: 0 auto;}
footer .row em {display: block; margin-bottom: .5rem; font-family: 'Montserrat', 'Noto Sans KR', sans-serif; text-align: right; font-size: 2.2rem; letter-spacing:1px; font-style: normal; text-transform: uppercase; font-weight: 700; color: #fff;}
footer .row .list-group li i {font-size: 2.8rem;}
footer .row .list-group li i.fa-instagram:before {font-size: 3rem;}
footer .row p {font-family: 'Montserrat', 'Noto Sans KR', sans-serif; color: #fff; font-size: 1.4rem; }
footer .row .list-group li a:hover {color: rgba(177, 69, 128, 0.57)}
footer .row .list-group li:not(:last-child) {margin-right: 1.5rem;}
footer img{ width: 165px;}


.fixed-nav {position: fixed; z-index: 50; display: none; opacity: 0; flex-direction:column; align-items: center; -webkit-transition: all 1s; transition: all 1s;}
.fixed-nav.show {display: flex;}
.fixed-nav.fadeshow {opacity: 1; -webkit-transition: opacity 1s; transition: opacity 1s;}
.fixed-nav a {width: 100%; height: 100%; display: flex; flex-direction:column; justify-content: center; align-items: center;}
.fixed-nav a:not(:first-of-type) {margin-top:15px;}
.chat {bottom: 30%; right: 20px;}
.chat .whatsapp {width: 50px; height: 50px; /* padding: 5px; background-color: rgba(255, 255, 255, .9); border-radius: 50%; border: 1px solid rgba(37, 211, 102, .5); */}
.chat [class*="fa-"] {font-size: 4rem; color: #25d366;}
.chat .kakao {width: 4rem; height: 4rem; background-color:#fee501; border-radius: 50%;}
.chat .kakao [class*="fa-"] {font-size: 2rem; color:#000}
.chat .kakao img {width: 100%;}
.chat span { font-size: 12px; font-family: 'Montserrat', 'Noto Sans KR', sans-serif; text-transform: uppercase; font-weight: bold;  color: #1caa50;}
.gtt {bottom: 2%; right: 20px;}
.gtt [class*="fa-"] {font-size: 50px; color: rgba(117, 112, 112, 0.7);}
.gtt a {display: flex;}
.gtt a:hover,
.chat a:hover {opacity: 0.7;}

@media screen and (min-width:1280px) {
    .swiper {position: static;}
    .topNav .navbar {display: none;}
}

@media screen and (min-width: 360px) and (max-width:1279px) {
    .img-sec02,
    .img-sec03,
    .img-sec04,
    .img-sec05 {min-height: 30rem;}
    .row {margin: 0}
    .headline {max-width: 100%; padding: 0 2rem; text-align: center;}
    .headline > h2 {font-size: 3.6rem; margin-bottom: 1.5rem;}
    .article { padding: 10rem 2rem; min-height: auto;}
    article h3 {font-size: 3rem; text-align: center;}
    article h4, .swiper h4 {font-size: 1.8rem; flex-wrap: wrap; text-align: center;}
    article h4 {justify-content: center;  margin-bottom: 1rem;}
    .card-header h4 {font-size: 2rem;}
    h4 > i,
    h4 > span {width: 100%; flex: 0 0 100%; text-align: center; margin-bottom: .5rem;}
    .nav-pills,
    .swiper .nav-pills .nav-link,
    .swiper h4 {justify-content: center;}
    .swiper h5,
    .swiper p {text-align: center;}
    .swiper .tab-pane p,
    article p,
    .swiper p {text-align: center; font-size: 1.5rem; line-height: 1.6;}
    .col-lg:last-child {margin-top: 2.4rem;}
    [class*="col"] img {margin-bottom: 2rem;}
    .ranking {margin-top: 2.5rem;}
    .contact .row {margin: 0 2rem 4rem; padding: 2rem;}
    footer {padding: 5rem 3rem;}
    footer .row em {text-align: center;}
    footer img {width: 9rem;}
    footer .row .list-group li i {font-size: 2rem;}
    footer .row .list-group li:not(:last-child) {margin-right: 1rem;}
    .chat,
    .gtt {right: 1rem;}
    .gtt [class*="fa-"] {font-size: 4rem;}
    .topNav .globalNav {display: none;}
    .container {padding: 0;}
    .row [class*="col"] {padding-left: 0; padding-right: 0;}
    article h4 > i,
    .material-symbols-outlined:first-child {margin-right: 0;}
    [class*="col"] img {max-height: 40rem; object-position: right bottom; object-fit: cover;}
    .bg-body-tertiary {background-color: transparent !important; }
    .ranking ul li {font-size: 1.4rem;}
    .topNav,
    .topNav.shrink {padding: 1rem 2rem;}
    .topNav h1,
    .topNav.shrink h1 {padding-bottom: 0; font-size: 3rem;}
    .topNav.shrink {height: 5rem;}
    .topNav.shrink .navbar.fixed-top {top: .6rem;}
    .navbar-toggler {border-color: transparent !important;}
    .navbar-toggler-icon {width: 2.5rem; height: 2rem; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
    .topNav.shrink .navbar-toggler-icon {background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
    .navbar.fixed-top {left: auto; top: 2.2rem; right: .4rem;}
    .topNav {height: 8rem;}
    .offcanvas a {color: #000;}
    .topNav .offcanvas [data-lang].on {background-color: rgba(177, 69, 128, 0.57)}
    .topNav .offcanvas .lang {justify-content: flex-end;}
    .topNav .offcanvas ul.subNav {position: relative; position: relative; display: flex; flex-direction: column; height: auto; top: auto; border: none; padding: 0;}
    .offcanvas .btn-close {width: 1.5rem; height: 1.5rem; background: transparent var(--bs-btn-close-bg) center/1.5em auto no-repeat;}
    .offcanvas .navbar-nav {margin-left: .5rem !important;}
    .list-group-horizontal {justify-content: center;}
    section[data-type="background"] {background-attachment: initial;}
}

@media screen and (min-width: 821px) and (max-width:1279px) {
    .col-lg:last-child {margin-top: 0;}
    h4 > i,
    h4 > span {width: auto; flex: 0 0 auto; margin-bottom: 0;}
    .row [class*="col"] {padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5);}
    .list-group-horizontal {justify-content: flex-start;} 
}

@media screen and (max-width: 767px) {
    html {--top-spacing: 6rem;}
    footer .col-auto:last-child {margin-top: 3rem;}
    footer .row {justify-content: center !important;}
    [class*="col"] img {max-height: 30rem;}
}

@supports (-webkit-touch-callout : none) { 
    section[data-type="background"] {background-attachment: scroll;}
}