@import"reset.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
/*all*/
*, input, select, button{box-sizing: border-box;font-family: 'Noto Sans KR', sans-serif;}
img{width: 100%;}
.title-text{font-size: 5vw !important; color: #000;}
/* gift_css */
.gift_wrap{background: linear-gradient(to bottom, #ffffff 0%,#e6fff3 40%,#a4c6ff 100%); padding-bottom: 20%; width: 100%; overflow-x: hidden;}
/**/
.fix_wrap{position: relative; width: 100%; padding-bottom: 90%; background-image: url(img/back_fix01.png); background-size: contain; background-attachment: fixed; background-repeat: no-repeat; background-position: center;}
.fix_wrap li{position: absolute;}
.fix_wrap li:nth-child(1){width: 50%; top: -6%; right: -2%; animation: fix_ani 1.5s alternate cubic-bezier(0.65, 0.05, 0.36, 1) infinite;}
.fix_wrap li:nth-child(2){width: 75%; top: 33%; left: -30%; animation: fix_ani 1.5s alternate ease-in-out infinite; animation-delay: 1.5s;}
.fix_wrap li:nth-child(3){width: 80%; top: 30%; right: 5%;}
/*animation*/
@keyframes fix_ani{0%{ transform: translateY(-25%);}}
.owl-carousel{padding: 5% 0;}
.item {opacity: 0.7;transition: 0.4s ease all;transform: scale(0.9); box-shadow: 0px 3px 6px rgba(0, 0, 0, .3);border-radius: 10px; overflow: hidden;}
.active .item {opacity: 1;transform: scale(1); box-shadow: none;}
.inner {position: absolute;bottom: 8%;left: 0;right: 0;text-align: center;}
.inner a {display: block;width: 60%;margin: auto;padding: 3%;font-size: 3.5vw;color: #fff;transition: 0.3s ease; background-color: #1b1b1b; box-shadow: 0px 0px 5px rgba(0, 0, 0, .3); border-radius: 6px; font-weight: 500;}
.owl-carousel:after {content: "";display: block;position: absolute;width: 15%;top: 0;bottom: 0;left: 50%;pointer-events: none;}
/********************************************************/
header .main{font-size: 0;}
header .translation-links{background-color: #1b1b1b;display: flex; align-items: center; justify-content: space-between; padding: 5% 2%;}
header .translation-links li{flex: 1; margin: 0 1%;}
header .translation-links li a{display: block;text-align: center; font-weight: 400; color: #fff; font-size: 3vw; width: 100%; padding-top: 70%; background-repeat: no-repeat; background-position: center top; background-size: contain;}
header .translation-links li:nth-child(1) a{background-image: url(img/ko.png);}
header .translation-links li:nth-child(2) a{background-image: url(img/vi.png);}
header .translation-links li:nth-child(3) a{background-image: url(img/ch.png);}
header .translation-links li:nth-child(4) a{background-image: url(img/en.png);}
/*toggle-nav*/
.toggle-nav{position: fixed; bottom: 5%; right: 5%; width: 60px; height: 60px; z-index: 99999;}
.toggle-nav ul{position: relative; width: 100%; height: 100%;}
.toggle-nav ul li{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;background: no-repeat center/contain; transition: .3s; cursor: pointer;}
.toggle-nav ul li:nth-child(1){z-index: 50;}
.toggle-nav ul li a{display: block; width: 100%; height: 100%; border-radius: 500px; background-color: #1b1b1b; background: no-repeat center/contain;}
.toggle-nav ul li.wechat{display: none;}
.toggle-nav ul li.star{background-image: url(img/star-icon.png);}
.toggle-nav ul li.kakao a{background-image: url(img/kakao-icon.png);}
.toggle-nav ul li.facebook a{background-image: url(img/facebook.png);}
.toggle-nav ul li.call a{background-image: url(img/call-icon.png);}
.toggle-nav ul li.wechat a{background-image: url(img/wechat.png);}
/**/
.toggle-nav ul li.kakao.pick{left: -75%; top: 80%;}
.toggle-nav ul li.facebook.pick{left: -45%; top: -28%;}
.toggle-nav ul li.wechat.pick{left: -45%; top: -28%;}
.toggle-nav ul li.call.pick{left: 60%; top: -75%;}

/********************************************************/
.main-title{background-image: url(img/red-icon01.png); background-repeat: no-repeat; background-position: left top 25%; background-size: 20%; display: flex; align-items: flex-end; justify-content: center; padding: 20% 3% 10%;}
.main-title p{font-weight: 700; text-align: center; font-size: 6vw;}
.main-title span{font-weight: 400; font-size: 4vw; margin-bottom: 1%; margin-left:2%;}
.main-title02{padding-top: 15% !important; background-image: url(img/red-icon02.png);background-position: 92% 10%; background-size: 22%;}
.main-title03{background: none !important; padding-top: 10%;}
.box{margin: 0 0 15%;}
.box ul{width: 85%; background-color: #e9f5f4; border-radius: 20px; padding: 6% 4% 4%; margin: 0 auto; box-shadow: 5px 5px 10px #08928441;}
.box ul li{display: flex; align-items: center; justify-content: space-between;}
.box ul li .gift_whBox{width: 54%; background-color: #fff; display: flex; align-items: center; justify-content: space-around; color: #14c4b2; font-weight: 400; border-radius: 500px; font-size: 2.3vw; padding: 2%;}
.box ul li .gift_whBox img{width: 15%;}
.box ul li>img{width: 45%;}
.box ul li>p{font-weight: 700; font-size: 1.5rem;}
.box ul li:nth-child(2){padding: 8% 0;}
.box ul li:nth-child(2) div{display: flex; align-items: center; justify-content: flex-start;}
.box ul li:nth-child(2) div img{width: 20%;}
.box ul li:nth-child(2) div p{font-weight: 400; font-size: 3vw;}
.box ul li:nth-child(3){border-top: 3px solid #14c4b2; padding-top:4%; justify-content: space-around;}
.box ul li:nth-child(3) p{color: #14c4b2; font-size: 7vw;}
.box ul li:nth-child(3) a{width: 50%; display: block; background-color: #14c4b2; text-align: center; border-radius: 10px; color: #fff; font-weight: 700; padding: 2%; font-size: 1.5rem;box-shadow: 3px 3px 8px #08928441; }
/*or_box*/
ul.or_box{background-color: #ffefd9; box-shadow: 5px 5px 10px #7838003f;}
ul.or_box li .gift_whBox{ color: #ff7f0d;}
ul.or_box li:nth-child(3){border-top: 3px solid #ff7f0d;}
ul.or_box li:nth-child(3) p{color: #ff7f0d;}
ul.or_box li:nth-child(3) a{background-color: #ff7f0d; box-shadow: 3px 3px 8px #7838003f;}
/*page*/
.list{background-color: #fae7c2;padding: 20% 0 5%;}
.form{padding: 20% 0 30%;}
.list>p, .form>p{font-weight: 700; text-align: center; font-size: 6vw;}
.list>span, .form>span{display: block; width: 35%; height: 5px; background-color: #ff7f0d; margin: 5px auto;}
.form>span{background-color: #14c4b2; width: 55%; margin: 5% auto 5%;}
.list ul{width: 95%; margin: 10% auto; display: flex; align-items: center; justify-content: space-between;}
.list ul li{flex: 1; background-color: #fff !important; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6% 1% 3%; margin: 0 .5%; box-shadow: 5px 5px 10px #7838003f; background: no-repeat top left/25%;}
.list ul li div{flex: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 10%;}
.list ul li div img{width: 80%;}
.list ul li p{font-weight: 400; font-size: 3vw; text-align: center;}
.list ul li:nth-child(4) p{ font-size: 3.3vw; }
/*page-num*/
.list ul li:nth-child(1){background-image: url(img/page-num01.png);}
.list ul li:nth-child(2){background-image: url(img/page-num02.png);}
.list ul li:nth-child(3){background-image: url(img/page-num03.png);}
.list ul li:nth-child(4){background-image: url(img/page-num04.png); padding: 11.5% 0 ; background-size: 100%; background-position: center;}
/**/
.lodePage{margin: 10% 0% 0%;}
/**/
.accordion-wrap{background-color: #fae7c2; padding-bottom: 20%;}
.accordion{ position: relative;box-shadow: 5px 5px 10px #7838003f; background-color: #fff; width: 90%;margin: 0 auto; border-radius: 10px; overflow: hidden;}
.accordion > p{padding: 5% 4% 4%; font-weight: 400; font-size: 4.2vw; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
.accordion > p img{width: 10%;}
.accordion ul{background-color: #e4f0c3; padding: 0% 3% 0%;height: 0px; transition: .2s;}
.accordion ul.on{ padding: 4% 3% 2%;height: auto;}
.accordion ul li{ display: flex; align-items: center; justify-content:flex-start; padding: 2% 3%; background-color: #fff; border-radius: 15px; margin-bottom: 3%; }
.accordion ul li p{font-weight: 400; font-size: 2.6vw;}
.accordion ul li>img{width: 30%; margin-right: 8%;}
.accordion ul li div.accordion-icon{display: flex; align-items: center; margin-bottom: 20px;}
.accordion ul li div.accordion-icon img{width: 40px; margin-right: 2px;}
/*form*/
.dotted-line{width: 90% !important; border-top: 5px dashed #14c4b2 !important; display: block; margin: 15% auto !important; background-color: transparent !important;}
form label{width: 90%; border-radius: 15px; background-color: #e9f5f4; display: flex; align-items: center; justify-content: space-between; padding: 2% 3%; margin: 0 auto 5%;}
form label p{font-weight: 400; font-size: 4vw; color: #14c4b2;}
form label input{width: 80%; padding: 3%; border: none; background-color: transparent;}
button{width: 100%; background-color: #14c4b2; color: #fff; padding: 3%; font-weight: 700; font-size: 8vw; text-align: center; margin-top: 10%; position:fixed; bottom: 0; left: 50%; transform: translateX(-50%);}
/**/
.br-banner{font-size: 0; padding-top: 20%; background: url(img/red-icon03.png) no-repeat left 5% top/25%;}