@charset "utf-8";
p,ul,li,div,section,dl,dt,dd,h1,h2,h3,h4,h5,h6,ol,label,address{
	margin:0;
}
a:hover{
	text-decoration:none;
}

body{
  font-family: "Noto Sans KR", sans-serif;
}


/* page */
.page{
  width: 100%;
  min-height: 100vh;
}
.page button{all: unset;}
.page button:focus {outline: none;}
.page ul{
  list-style: none;
  padding: 0;
}
.page img{width: 100%;}
.page .inner{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 3px solid #775438;
  border-radius: 20px;
}
@media (max-width:1200px) {
  .page .inner{ max-width: 625px;}
}


/* page1 */
.page1{
  background: url(/_img/page1_bg.png) repeat center center / auto auto;
}
.page1 > div:first-child{
  position: fixed;
  top: 134px; left: 0;
  width: 100%;
  padding: 0 15px;
  text-align: center;
  z-index: 1;
}
.page1 > div:first-child img{max-width: 1176px;}
.page1 > div:last-child{
  position: relative;
  max-width: 1272px;
  width: 100%;
  margin: 0 auto;
  padding: 854px 15px 96px;
}
.page1 a{
  display: inline-block;
  position: absolute;
  top: 89.4%;
  width: 27.5%;
  height: 5.4%;
  background: red;
  opacity: .5;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
}
.page1 .view{left: 21.1%;}
.page1 .purchase{left:50.7%;}
@media (max-width:1280px) {
  .page1 > div:first-child{top: 90px;}
  .page1 > div:first-child img{max-width: 900px;}
  .page1 > div:last-child{
    max-width: 973px;
    padding: 640px 15px 90px;
  }
  .page1 a{top: 88.2%;}
}



/* page2 */
.page2{
  padding: 145px 15px 130px;
  background: url(/_img/page2_bg.png) no-repeat center center / cover;
}
.page2 > div:first-child{
  position: relative;
  max-width: 858px;
  width: 100%;
  margin: 0 auto 140px;
  text-align: center;
}
.page2 #query{
  position: absolute;
  top: 82%;
  left: 5.4%;
  width: 47%;
  height: 16%;
  padding: 0;
  font-size: 26px;
  color: #6a4325;
  background: rgba(221, 122, 221, .5);
  outline: none;
  border: none;
}
.page2 #query::placeholder{color: #cccccc;}
.page2 .submit{
  position: absolute;
  top: 79%;
  left: 82%;
  width: 18%;
  height: 21%;
  padding: 0;
  outline: none;
  border: none;
  border-radius: 40px;
}
.page2 > div:last-child{
  position: relative;
  max-width: 1035px;
  width: 100%;
  margin: 0 auto;
}
.page2 .btn{
  position: absolute;
  top: 57.5%;
  width: 3%;
  height: 5%;
  padding: 0;
}
.page2 .prev{left: 0;}
.page2 .next{right: 0;}
.page2 .list{
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 29.7%;
  left: 13.3%;
  width: 73.2%;
  height: 60.5%;
}
.page2 .list ul{
  display: flex;
  flex-wrap: wrap;
  width: 40.2%;
  height: 100%;
}
.page2 .list ul li{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: calc(100%/8);
  text-align: center;
  font-size: 22px;
  color: #6a4325;
}
.page2 .list ul li.active{
  color: #f8539f;
}
@media (max-width:1200px) {
  .page2 {padding: 90px 15px 81.25px;}
  .page2 > div:first-child{
    max-width: 536px;
    margin-bottom: 87.5px;
  }
  .page2 #query{top: 81.1%; font-size: 22px;}
  .page2 > div:last-child{max-width: 646px;}
  .page2 .list ul li{font-size: 18px;}
}
@media (max-width:576px) {
  .page2 > div:first-child{margin-bottom: 60px;}
  .page2 #query{font-size: 18px;}
  .page2 .list ul li{font-size: 14px;}
}


/* page3 */
.page3{
  padding: 130px 15px;
  background:#f9dbe8;
}
.page3 .inner{padding:110px 20px 85px;}
.page3 .inner img{max-width: 801px;}
@media (max-width:1200px) {
  .page3{padding: 81px 15px;}
  .page3 .inner{padding:68px 20px 53px;}
  .page3 .inner img{max-width: 500px;}
}


/* page4 */
.page4{
  padding: 130px 15px 95px;
  background:#ffb0d2;
}
.page4 .inner{padding:110px 20px 60px;}
.page4 .inner img:first-of-type{max-width: 801px;}
.page4 .inner img:nth-of-type(2){max-width: 241px;}
.page4 .inner img:last-of-type{max-width: 813px;}
.page4 .space{padding-top: 7.34%;}
.page4 .space2{padding-top: 4.72%;}
.page4 .bx{
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  max-width: 703px;
  width: 100%;
  margin: 0 auto;
}
.page4 .bx div{
  width: calc((100%/3) - 17px); 
  padding-top: 35.2%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 2px solid #6a3500;
  border-radius: 13px;
}
@media (max-width:1200px) {
  .page4{padding: 81px 15px 60px;}
  .page4 .inner{padding:68px 20px 37.5px;}
  .page4 .inner img:first-of-type{max-width: 500px;}
  .page4 .inner img:nth-of-type(2){max-width: 150px;}
  .page4 .inner img:last-of-type{max-width: 508px;}
  .page4 .bx{
    gap: 15px;
    max-width: 439px;
  }
  .page4 .bx div{
    width: calc((100%/3) - 10px); 
    padding-top: 35%;
  }
}


/* page5 */
.page5{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 15px;
  background:url(/_img/page5_bg.png) no-repeat center top / cover;
}
.page5 div{
  max-width: 1000px;
  width: 100%;
}
@media (max-width:1200px) {
  .page5 div{max-width: 625px;}
}


/* page6 */
.page6{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 130px 15px 120px;
  background:url(/_img/page6_bg.png) no-repeat center top / cover;
}
.page6 .bx{
  position: relative;
  max-width: 667px;
  width: 100%;
  margin: 0 auto;
}
.page6 .form{
  position: absolute;
  left: 32.2%;
  width: 63%;
  height: 5%;
  font-size: 28px;
  color: #6a4325;
  background: #fff;
  outline: none;
  border: none;
}
.page6 .form::placeholder{color: #cccccc;}
.page6 .form1{top: 55.2%;}
.page6 .form2{top: 65.9%;}
.page6 .form3{
  top: 76.6%;
  padding: 0;
}
.page6 .form3 p{
  position: relative;
  height: 100%;
}
.page6 input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.page6 input[type="file"]::-webkit-file-upload-button,
.page6 input[type="file"]::file-selector-button {
  width: 0;
  margin: 0;
  padding: 0;
  color: transparent;
  background: transparent;
  font: inherit;
  border: none;
  cursor: pointer;
}
.page6 label {
  display: inline-block;
  width: 100%; height: 100%;
  color: #cccccc;
  cursor: pointer;
}
.page6 label.selected {color: #6a4325;}
.page6 .btn{
  position: absolute;
  top: 90.1%;
  left: 22.7%;
  width: 54.3%;
  height: 10%;
}
@media (max-width:1200px) {
  .page6{padding: 81px 15px 75px;}
  .page6 .inner{max-width: 416px;}
  .page6 .form{font-size: 18px;}
}


/* page7 */
.page7{
  padding: 220px 15px 50px;
  background: url(/_img/page7_bg.png) repeat center center / auto auto;
}
.page7 .inner{padding:80px 20px 60px;}
.page7 .inner img{max-width: 739px;}
.page7 .bx{
  max-width: 899px;
  width: 100%;
  height: 1008px;
  margin: 70px auto 0;
  padding: 0 20px 0 40px;
  overflow-y: auto;
}
.page7 .bx::-webkit-scrollbar {
  width: 27px;   
  height: 27px; 
}
.page7 .bx::-webkit-scrollbar-track {
  background: #e5e5e5;
  background-clip: content-box;
  border-radius: 13.5px;
}
.page7 .bx::-webkit-scrollbar-thumb {
  background: #fff;
  border: 6px solid transparent;
  background-clip: content-box;
  border-radius: 15px;
}
.page7 .bx::-webkit-scrollbar-thumb:hover {
  background-color: #fff;
}
.page7 .bx > div{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px;
  background: #e6e6e6;
  border-radius: 15px;
}
.page7 .bx > div div{
  width: calc((100%/3) - 8px); 
  padding-top: 39.65%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #fff;
  border: 3px solid #6a3500;
  border-radius: 5px;
}
@media (max-width:1200px) {
  .page7{padding: 137px 15px 60px;}
  .page7 .inner{padding:50px 20px;}
  .page7 .inner img{max-width: 461px;}
  .page7 .bx{
    max-width: 561px;
    height: 630px;
    margin: 45px auto 0;
    padding: 0 12.5px 0 25px;
  }
  .page7 .bx::-webkit-scrollbar {
    width: 17px;   
    height: 17px; 
  }
  .page7 .bx::-webkit-scrollbar-thumb {border: 4px solid transparent;}
  .page7 .bx > div {
    gap: 7.5px;
    padding: 12.5px;
  }
  .page7 .bx > div > div{
    width: calc((100%/3) - 5px); 
    padding-top: 38.7%;
  }
}
@media (max-width:576px) {
  .page7{padding: 80px 15px 60px;}
  .page7 .bx{
    padding: 0 6px 0 12px;
    height: 340px;
  }
  .page7 .bx::-webkit-scrollbar {
    width: 12px;   
    height: 12px; 
  }
  .page7 .bx::-webkit-scrollbar-thumb {border: 2px solid transparent;}
  .page7 .bx > div {padding: 10px;}
}


/* page8 */
.page8{
  padding: 50px 15px;
  background: url(/_img/page8_bg.png) repeat center center / auto auto;
}
.page8 .inner{padding:100px 20px 55px;}
.page8 img{max-width: 856px;}
@media (max-width:1200px) {
  .page8{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page8 .inner{padding:60px 20px 34px;}
  .page8 img{max-width: 535px;}
}


/* page9 */
.page9{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 15px;
  background: #f9dae8;
  overflow: hidden;
}
.page9 .img{
  max-width: 731px;
  margin-bottom: 80px;
}
.page9 .mySwiper{position: relative;}
.page9 .swiper-slide img{width: auto;}
.page9 .sw-btn{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.page9 .sw-btn img{max-width: 29px;}
@media (max-width:1200px) {
  .page8{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page8 .inner{padding:60px 20px 34px;}
  .page8 img{max-width: 535px;}
}


/* page10 */
.page10{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 65px 15px;
  color: #fff;
  background: #333333;
}
.page10 div{
  max-width: 880px;
  width: 100%;
  font-weight: 400; 
  font-size: 16.3px;
  line-height: 23px;
  letter-spacing: -0.065em
}
.page10 div b{font-size: 19px;}
.page10 div p{
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.page10 div p::before{
  content: '-';
}
@media (max-width:1200px) {
  
}