@import url(css/common.css);

html{scroll-behavior:smooth;}

body{
  margin: 0;
  font-family: 'Noto Serif', serif;
  font-family: 'Noto Serif KR', serif;
  color: #222;
  background-color: rgb(189, 189, 169);
}
/* top 버튼 */
.top{
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 5;
}
.top a{
  display: block;
  width: 60px;
  height: 60px;
  background: url(../image/top2.png) no-repeat;
  transition: 0.35s;
}
.top a:hover{background-image: url(../image/top_on2.png);}


/* header______________________ */
header{
  position: relative;
  width: 100%;
  height: 50px;
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

#header_in{
  width: 1200px;
  height: inherit;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo{
  position: absolute;
  background: url(../image/logo4.png) no-repeat;
  width: inherit;
  height: inherit;
}

.gnb{
  position: absolute;
  top: 0;
  right: 0;
}

.gnb li{
  display: inline-block;
  padding: 0 20px;
}

.gnb li a{
  color: #222;
  list-style-type: none;
  text-decoration: none;
  position: relative;
  transition: 0.35s;

}

.gnb li a:before{
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0.5px;
  transition: 0.35s;
  margin-top: 2px;
}
.gnb li a:hover::before{width: 100%; background-color: olive;}
.gnb li a:hover{color: olive;}

.gnb li i{font-size: 22px;transition: 0.35s;}
.gnb li i:hover{
  color: olive;
  cursor: pointer;
}

/* main______________ */
main{
  background: url(../image/main3.jpg) no-repeat center center;
  width: 100%;
  height: 1300px;
  transition: 1s;
  position: relative;
  display: flex;
  text-align: center;
  justify-content: center;
}

main:hover{
  background: url(../image/main4.jpg) no-repeat center center;
  width: 100%;
  height: 1300px;
  color: white;
}
main .main_text1,
main .main_text2{
  font-size: 36px;
  font-weight: 300;
  margin-top: 130px;
  padding: 20px;
  animation: main_pic 3s linear;
}

main .main_text1{
  left: 900px;
}

main .main_text2{
  left: 820px;
}

@keyframes main_pic{
0%{opacity: 0;}
25%{opacity: 0.2;}
50%{opacity: 0.5;}
75%{opacity: 0.8;}
100%{opacity: 1;}
}

/* section__________________________ */
/* info */
#sec1{/* 부모 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}


.sec1_info{/* 자식 */
  width: 1200px;
  height: 1400px;
  margin-top: 200px;
  position: relative;
}

.sec1_info span{
  display: inline-block;
  transform: rotate(90deg);
  position: relative;
  font-size: 20px;
}

.sec1_info span::after{
  content: '';
  position: absolute;
  display: inline-block;
  border: 1px solid #444;
  top: 50%;
  width: 250px;
  margin-left: 15px;
}
.sec1_info span, .sec1_info span::after{
padding-left: 50px;
}
.sec1_info h3, .sec1_info p, .sec1_info a
{
  margin-left: 100px;
  box-sizing: border-box;
}

.sec1_info h3{
  margin-bottom: 0;
  font-size: 96px;}
.sec1_info p{
  width: 500px;
  font-weight: 300;
  font-size: 22px;}

#sec1 a{
  display: inline-block;
  text-decoration: none;
  font-weight: 200;
  font-size: 22px;
  color: #222;
  transition: 0.35s;
}

.sec1_arrow{
  display: inline-block;
  width: 200px;
  height: 20px;
  position: relative;
  transition: 0.35s;
}
.sec1_arrow em{/* 화살표 */
  position: absolute;
  top: 60%;
  border: 1px solid #000;
  width: 30px;
  height: 2px;
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin-left: 20px;
  transition: 0.35s;
}

.sec1_arrow i{/* 화살표 */
  position: absolute;
  left: 35px;
  top: 6px;
  width: 10px;
  height: 15px;
  transform: rotate(45deg);
  border: 1px solid #000;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

#sec1 a:hover + .sec1_arrow{/* 화살표움직임 */
  cursor: pointer;
  transform: translateX(10px);
}
.sec1_text{display: inline-block;}

.sec1_img p{/* 사진전체 */
  display: inline-block;
}
.sec1_img p:first-of-type{
  position: absolute;
  top: 50px;
  left: 60%;
  background: url(../image/section2img-4.jpg);
  width: 600px;
  height: 800px;
  transition: 0.35s;
  box-shadow: 0 0 20px #666;
}
.sec1_img p:hover:first-of-type{
  transform: scale(1.1);
  box-shadow: 20px 20px 30px #666;
}

.sec1_img p:nth-of-type(2){
  position: absolute;
  top: 35%;
  left: 45%;
  background: url(../image/section2img-2.5.jpg);
  width: 450px;
  height: 260px;
  box-shadow: rgba(58, 58, 67, 0.8) 0px 10px 29px 0px;
}/* 위에사진이랑 독같이하기 */

.sec1_img p:nth-of-type(3){
position: absolute;
top: 45%;
right: 70%;
background:url(../image/section2img-6.jpg);
width: 800px;
height: 600px;
box-shadow: rgba(58, 58, 67, 0.8) 0px 10px 29px 0px;
transition: 0.35s;
}
.sec1_img p:hover:nth-of-type(3){
  transform: scale(1.1);
  box-shadow: 20px 20px 30px #666;
}

/* Story */

#sec2{/* 부모 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: rgb(245, 245, 245);
}


.sec2_story{/* 자식 */
  width: 1200px;
  height: 1600px;
  position: relative;
}


.sec2_story span{
  display: inline-block;
  transform: rotate(90deg);
  position: relative;
  font-size: 20px;
  margin-top: 100px;
}

.sec2_story span::after{
  content: '';
  position: absolute;
  display: inline-block;
  border: 1px solid #444;
  top: 50%;
  width: 250px;
  margin-left: 15px;
}
.sec2_story span, .sec2_story::after{
padding-left: 50px;
}

.sec2_story h3,   .sec2_story p,
.sec2_story a{ margin-left: 100px;}

.sec2_story h3{
  margin-bottom: 0;
  font-size: 96px;}
  .sec2_story p{
  width: 900px;
  font-weight: 300;
  font-size: 22px;}

  .sec2_story a{
  margin-left: 100px;
  display: inline-block;
  text-decoration: none;
  font-weight: 200;
  font-size: 22px;
  color: #222;
  transition: 0.35s;
  margin-bottom: 80px;
}

.sec2_arrow{
  display: inline-block;
  width: 200px;
  height: 20px;
  position: relative;
  transition: 0.35s;
}
.sec2_arrow em{/* 화살표 */
  position: absolute;
  top: 60%;
  border: 1px solid #000;
  width: 30px;
  height: 2px;
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin-left: 20px;
  transition: 0.35s;
}

.sec2_arrow i{/* 화살표 */
  position: absolute;
  left: 35px;
  top: 6px;
  width: 10px;
  height: 15px;
  transform: rotate(45deg);
  border: 1px solid #000;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

#sec2 a:hover + .sec2_arrow{/* 화살표움직임 */
  cursor: pointer;
  transform: translateX(10px);
}

.sec2_img{
  width: 100%;
  position: relative;
  margin-left: 0;
}

.sec2_image{
  position: absolute;
  width:1200px;
  height:860px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
}
.sec2_image li{
  list-style-type: none;
  transition: 0.5s;
  filter: grayscale(1);
}

.sec2_image li:nth-child(1){
  background: url(../image/section2img-7.jpg);
  flex: 1;
}
.sec2_image li:nth-child(2){
  background: url(../image/section2img-8.jpg);
  flex: 1;
}
.sec2_image li:nth-child(3){
  background: url(../image/section2img-9.jpg);
  flex: 1;
}
.sec2_image li:nth-child(4){
  background: url(../image/section2img-10.jpg);
  flex: 1;
}

.sec2_image li:hover{
  flex: 3;
  filter: none;
  cursor: pointer;
}

.sec2_image li h4{
  margin: 150px 50px;
  font-size: 24px;
  color: #555;
}
.sec2 .sec2_img ul li:nth-child(1) h4{
  color: #bbb;
}

.sec2_image li:hover h4{
  color: #333;
}

.sec2 .sec2_img ul li:nth-child(1):hover h4{
  color: #eee;
}

.sec2_image li:nth-child(3):hover h4{
  color: #222;
}


/* product */
#sec3{
  width: 100%;
  height: 1300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(189, 189, 169);
}
.tab-inner{
  position: relative;
  width: 1200px;
  height: 1050px;
}
.tab-inner h2:first-of-type{
  font-weight: bold;
  position: absolute;
  font-size: 300px;
  color: rgb(169, 169, 151);

  position: absolute;
  bottom:-150px;
  left: -400px;
}
.tab-inner h2:nth-child(2){ left:-2070px;}
.tab-inner h2:nth-child(3){ left:-1290px;}
.tab-inner h2:nth-child(4){ left:-520px;}
.tab-inner h2:nth-child(5){ left:250px;}
.tab-inner h2:nth-child(6){ left:1020px;}
.tab-inner h2:nth-child(7){ left:1790px;}
.tab-inner h2:nth-child(8){ left:2580px;}


.tab-inner h2:nth-child(2),
.tab-inner h2:nth-child(3),
.tab-inner h2:nth-child(4),
.tab-inner h2:nth-child(5),
.tab-inner h2:nth-child(6),
.tab-inner h2:nth-child(7),
.tab-inner h2:nth-child(8)
{
  position: absolute;
  top: -280px;
  font-size: 150px;
  color: whitesmoke;
  animation: product 5.5s linear 1s infinite alternate-reverse;
}
@keyframes product{
  0%{transform: translateX(0);}
  25%{transform: translateX(125px);}
  50%{transform: translateX(250px);}
  75%{transform: translateX(375px);}
  100%{transform: translateX(500px);}

}
input[name=tabmenu]{display: none;}

.content{
  opacity: 0;
  transition: 0.5s;
  position: absolute;
  top: 0;
  left: 0;
}

.btn{
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 10px;
}
.btn label{
  background-color: lightgray;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

input[id=tab1]:checked ~.slide1,
input[id=tab2]:checked ~.slide2,
input[id=tab3]:checked ~.slide3{
  opacity: 1;
}

input[id=tab1]:checked ~ .btn label[for=tab1],
input[id=tab2]:checked ~ .btn label[for=tab2],
input[id=tab3]:checked ~ .btn label[for=tab3]{
  background-color: olive;
}

/* review */
#sec4{
  width: 100%;
  height: 1100px;
  display: flex;
  position: relative;
  background-color: rgb(245, 245, 245);
}
#sec4 h2:first-of-type{
  font-weight: bold;
  position: absolute;
  font-size: 200px;
  color: rgb(245, 245, 245);
  text-shadow: -1px 0 olive, 0 1px olive, 1px 0 olive, 0 -1px olive;
  position: absolute;
  top:-300px;
  right:0px;
}
#sec4 h2:last-of-type{
  font-weight: bold;
  position: absolute;
  font-size: 200px;
  color: rgb(245, 245, 245);
  text-shadow: -1px 0 olive, 0 1px olive, 1px 0 olive, 0 -1px olive;
  position: absolute;
  top:-120px;
  right: -430px
}
.sec4_image{
  width: 1200px;
  height: 1100px;
  transform: translateX(65%);
}

.sec4_img{
  position: absolute;
  background: url(../image/section4img-5.png)center center no-repeat;
  width: 1200px;
  height: 1100px;
  top: -16%;
  left: -50%;
  z-index: -5;
}
.sec4_img::after{
  content: '';
  position: absolute;
  width: 1200px;
  height: 1100px;
  top: 0%;
  left: 0%;
  background-color: rgba(0, 0, 0, 0.3);
}

.sec4_text{
  width: 1200px;
  height: 500px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.sec4_text h3{
  font-size: 96px;
  margin-bottom: 10px;
  transform: translateY(-50px);
}

.sec4_text span::after{
  content: '';
  position: absolute;
  display: inline-block;
  border: 1px solid #444;
  top: 10px;
  width: 500px;
  margin-left: 15px;
}

.sec4_review{
  /* border: 1px solid #000; */
  width: 1200px;
  height: 500px;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
}
.sec4_review_item{
  position: relative;
  width: 400px;
  height: 250px;
  margin: 10px;
}


.front, .back{
  position: absolute;
  top: 0;
  width: 100%;
  height: inherit;
  text-align: center;
  transition: 0.5s;
  cursor: pointer;
}

  .sec4_review_item:hover .front{top: -50%;}
  .sec4_review_item:hover .back{
    top: 50%;
    opacity: 1;
  }


.front{
  background-color: rgba(232, 232, 232, 0.9);
  /* background-color: rgb(232, 232, 232); */
  border-radius: 0 40px 0 0 ;
  z-index: 1;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.front img:nth-child(1){
  border-radius: 50%;
  margin: 20px;
  margin-top: 40px;
}
.front img:nth-of-type(2){
  margin-top: 15px;
}
.front span{
  display: block;
  font-size: 14px;
  color: #333;
  font-size: 16px;
}

.back{
  background-color:  rgb(189, 189, 169);
  color: #000;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  border-radius: 0 0 0 40px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.back p{
  margin-top: 20px;
  text-align: left;
}
.back a:hover{background-color: #000;}

button{
  width: 120px;
  height: 40px;
  background-color: transparent;
  border: 1px solid #000;
  cursor: pointer;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.35s;
  margin-top: 50px;
}
button:hover{
  color:  white;
  background-color: rgb(147, 147, 68);
  border: none;
}


/* 체험단 */
#sec5{
  background: url(../image/section5-2.jpg) center center no-repeat fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 800px;
  position: relative;
}
#sec5::before{
  content: '';
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  width: 100%;
  height: 800px;
}
.sec5_items{
  width: 1200px;
  height: 1000px;
  display: flex;
}
.sec5_text{
  margin-top: 100px;
  margin-left: 50px;
  width: 500px;
}

.sec5_text h3{
  font-size: 64px;
}
.sec5_text p{
  font-size: 18px;
  
}

.sec5_form{
  /* border: 1px solid #000; */
  background-color: white;
  border-radius: 0 20% 0 20%;
  opacity: 0.62;
  margin-top: 150px;
  width: 600px;
  height: 700px;
  z-index: 1;
  margin-left: 20px;
  transform: translateX(100px);
}
.sec5_form:not(input li:first-of-type){padding-left: 50px;}

.sec5_form input:not(:last-child){
  display: block;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #000;
  font-size: 20px;
  margin-bottom: 50px;
  width: 400px;
  margin: 40px;
  outline: none;
}

.sec5_form input::placeholder{color: #444;}

.sec5_form input:last-child{
  border: 1px solid #000;
  padding: 10px 50px;
  background-color: transparent;
  transform: translateX(200px);
  transition: 0.35s;
  margin-top: 50px;
}

.sec5_form input[id=check]{
  border: 1px solid red;
}

.sec5_form input:focus::placeholder{opacity: 0;}

.sec5_form input:last-child:hover{
  color: rgb(73, 114, 172);
  border: 1px solid rgb(73, 114, 172);
  /* background-color: olive; */
  cursor: pointer;
}
.sec5_form input:first-child{
  margin-top: 150px;
  margin-bottom: 80px;
}
.sec5_form input:nth-child(2),
.sec5_form input:nth-child(3)
{margin-bottom: 80px;}

/* 풋터 */
.footer{
  width: 100%;
  height: 300px;
  background-color: #888;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer_last{
  width: 1200px;
  height: 300px;
}
.footer_last .last1{
  display: flex;
  justify-content: space-between;
  margin: 80px 20px 40px 20px;
}

.spans span{
  font-size: 18px;
  display: inline-block;
  transition: 0.35s;
}
.spans span:hover{color:rgb(177, 177, 146); cursor: pointer;}

.last2{margin: 0 20px}

.last2 address{
  font-style: normal;
  font-size: 14px;
  font-weight: 100;
  color: #f4f4f4;
  font-weight: 300;
}
.last2 p{
  font-size: 12px;
  font-weight: normal;
  color: #555;
}
address b{
  color: #444;
  font-weight: bold;
}