/* ------------------------------------------------

Layout : main
1. slide
2. best
3. brand
4. recipe
5. teatime

-*-*-*-*-*-*-

media query
pc : 1600, 1440, 1280
tablet : 1024, 834, 768
mobile : 580, 414, 360

color
Background
- F7F7F9, rgb 247,247,249
Khaki light
- B7BAA9
Khaki dull
- 817E6B, rgb 129,126,107
Khaki dark
- 67665E
Black
- 383838
error
- fd6d5e

font
Adobe Caslon Pro, Playfair Display, serif
Avenir Next LT Pro, Noto Sans KR, sans-serif

------------------------------------------------ */

/* ================================================
Layout : main
================================================ */

#main section{width:100%; height:100vh; position:relative; overflow:hidden;}
.section1 {background-color: #F7F7F9;}
.section2 {background-color: #F7F7F9; z-index:1;}
.section3 {background-color: #ffffff; z-index:2;}
.section4 {background-color: #ffffff; z-index:3;}
.section5 {background-color: #F7F7F9; z-index:4;}

@media only screen and (max-width: 1025px) {
  #main .section1, #main .section2, #main .section3, #main .section4{
	height:50rem;
  }
  #main .section5{
	height:52.5rem;
  }
}
@media only screen and (max-width: 834px) {
  #main .section2{
	height:85rem;
  }
  #main .section4{
	height:100rem;
  }
  #main .section5{
	height:77rem;
  }
}
@media only screen and (max-width: 580px) {
  #main .section5{
	height:112.5rem;
  }
}
@media only screen and (max-width: 414px) {
  #main .section1{
	height:30rem;
  }
  #main .section2{
	height:64rem;
  }
  #main .section3{
	height:30rem;
  }
  #main .section4{
	height:80rem;
  }
  #main .section5{
	height:90rem;
  }
}

/* -----------------------------------------------------------------
1. slide
----------------------------------------------------------------- */

.main-slide {
  height: 100vh;
  position: relative;
}
@media only screen and (max-width: 1025px) {
  .main-slide{
	height:calc(50rem - 4rem);
	margin-top:4rem;
  }
}
@media only screen and (max-width: 414px) {
  .main-slide{
	height:calc(30rem - 4rem);
	margin-top:4rem;
  }
}
.main-slide-container {
  height:100%;
}
.main-slide .half-slider {
  height:100%;
  padding: 0;
}
.main-slide .half-slider__item {
  height: 100%;
}
.main-slide .half-slider__caption {
  width:30%;
  height:100%;
  padding-top: 12rem;
  padding-left: 3rem;
  background-color:rgba(247,247,249,0.75);
  z-index:50;
  position:absolute;
  top:0; right:0;
}
@media only screen and (max-width: 1600px) {
  .main-slide .half-slider__caption{
	width:35%;
  }
}
@media only screen and (max-width: 1025px) {
  .main-slide .half-slider__caption{
    width:100%; height:25%;
    padding-top: 1rem;
	z-index:50;
    position:absolute;
    top:75%; right:0;
  }
}
.main-slide .half-slider__caption .title_overhead{
  margin-bottom:2.5rem;
}
@media only screen and (max-width: 1025px) {
  .main-slide .half-slider__caption .title_overhead{
    margin-bottom:0;
    padding: 2% 0;
    white-space: nowrap;
  }
  .main-slide .half-slider__caption .title_h1{
    margin-bottom: 0;
    padding: 2% 0;
    white-space: nowrap;
	font-size:2.75rem;
	position:absolute;
	bottom:0;
  }
}
@media only screen and (max-width: 414px) {
  .main-slide .half-slider__caption .title_overhead{
    display:none;
  }
  .main-slide .half-slider__caption .title_h1{
    font-size:2.25rem;
  }
}
.main-slide .half-slider__caption .description {
  width: 100%;
  word-break:keep-all;
}
@media only screen and (max-width: 1440px) {
  .main-slide .half-slider__caption .description{
	width: 75%;
  }
}
@media only screen and (max-width: 1025px) {
  .main-slide .half-slider__caption .description{
	width: 55%;
	position:absolute;
	bottom:2rem; right:calc(2% + 1rem);
	text-align:right;
  }
}
@media only screen and (max-width: 580px) {
  .main-slide .half-slider__caption .description{
	display:none;
  }
}
.main-slide .half-slider__caption .btn-link{
	color:#000000;
}
.main-slide .half-slider__caption .btn-link:hover{
	color:#000000;
}
@media only screen and (max-width: 1025px) {
  .main-slide .half-slider__caption .btn-link{
	display:none;
  }
}
.main-slide .half-slider__image {
  flex: 0 0 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
.main-slide .control-half-slider {
  position: absolute;
  right:30%; bottom:100px;
  width:12%;
  margin-right:-6%;
  background-color:#B7BAA9;
  color:#67665E;
  font-weight:700;
  z-index:50;
}
@media only screen and (max-width: 1600px) {
  .main-slide .control-half-slider{
	right:35%;
	width:10rem;
    margin-right:-5rem;
  }
}
@media only screen and (max-width: 1025px) {
  .main-slide .control-half-slider{
	position:absolute;
	top:71%; right:2%;
	margin-right:0;
  }
}
@media only screen and (max-width: 414px) {
  .main-slide .control-half-slider{
	top:68%; right:2%;
  }
}

/* -----------------------------------------------------------------
2. best
----------------------------------------------------------------- */

#best h2{
	text-align:center;
	width:80%;
	margin-top:100px;
	margin-right:7%;
	margin-left:13%;
}
@media only screen and (max-width: 1440px) {
  #best h2{
	width:75%;
	margin-right:10%;
	margin-left:15%;
  }
}
@media only screen and (max-width: 1025px) {
  #best h2{
	margin-right:auto;
	margin-left:auto;
  }
}
ul.items{
	width:80%;
	margin:0 7% 0 13%;
	display:flex;
	flex-flow: row wrap;
	align-content:space-around;
	justify-content:space-around;
}
@media only screen and (max-width: 1440px) {
  ul.items{
	width:75%;
	margin:0 10% 0 15%;
  }
}
@media only screen and (max-width: 1025px) {
  ul.items{
	width:96%;
	margin-right:auto;
	margin-left:auto;
  }
}
#best ul.items li{
	width:24%;
	text-align:center;
	margin-bottom:7vh;
}
@media only screen and (max-width: 1025px) {
  #best ul.items li{
	margin-bottom:1rem;
  }
}
@media only screen and (max-width: 834px) {
  #best ul.items li{
	width:49%;
  }
}
#best ul.items li a{
	display:block;
	width:100%;
	height:30vh;
	display:flex;
	flex-direction:column;
	align-content:center;
	justify-content:center;
}
@media only screen and (max-width: 1025px) {
  #best ul.items li a{
	height:16rem;
  }
}
@media only screen and (max-width: 414px) {
  #best ul.items li a{
	height:12rem;
  }
}
#best ul.items li:nth-child(1) a{
	background-image:url(../image/tea/tea_herbal_0045_box.png);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
#best ul.items li:nth-child(1) a:hover{
	background-image:url(../image/tea/tea_herbal_0045_leaves_.png);
}
#best ul.items li:nth-child(2) a{
	background-image:url(../image/tea/tea_green_0072_box.png);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
#best ul.items li:nth-child(2) a:hover{
	background-image:url(../image/tea/tea_green_0072_leaves_.png);
}
#best ul.items li:nth-child(3) a{
	background-image:url(../image/tea/tea_herbal_0067_box.png);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
#best ul.items li:nth-child(3) a:hover{
	background-image:url(../image/tea/tea_herbal_0067_leaves_.png);
}
#best ul.items li:nth-child(4) a{
	background-image:url(../image/tea/tea_green_0039_box.png);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
#best ul.items li:nth-child(4) a:hover{
	background-image:url(../image/tea/tea_green_0039_leaves_.png);
}
#best ul.items li:nth-child(5) a{
	background-image:url(../image/tea/tea_black_0055_box.png);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
#best ul.items li:nth-child(5) a:hover{
	background-image:url(../image/tea/tea_black_0055_leaves_.png);
}
#best ul.items li:nth-child(6) a{
	background-image:url(../image/tea/tea_herbal_0024_box.png);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
#best ul.items li:nth-child(6) a:hover{
	background-image:url(../image/tea/tea_herbal_0024_leaves_.png);
}
#best ul.items li:nth-child(7) a{
	background-image:url(../image/tea/tea_green_0096_box.png);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
#best ul.items li:nth-child(7) a:hover{
	background-image:url(../image/tea/tea_green_0096_leaves_.png);
}
#best ul.items li:nth-child(8) a{
	background-image:url(../image/tea/tea_black_0047_box.png);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
#best ul.items li:nth-child(8) a:hover{
	background-image:url(../image/tea/tea_black_0047_leaves_.png);
}
#best ul.items li a .caption{
	display:none;
	width:100%;
	height:100%;
	position:relative;
}
#best ul.items li a .caption h6{
	position:absolute;
	bottom:1rem; left:0;
	width:100%;
	text-align:center;
	margin:0;
}
#best ul.items li a .caption h4{
	position:absolute;
	top:0.75rem; left:0;
	width:100%;
	text-align:center;
	margin:0;
	font-size:1rem;
}
#best ul.items li a:hover .caption{
	display:block;
}
@media only screen and (max-width: 1025px) {
  #best ul.items li a .caption{
	  display:block;
  }
  #best ul.items li a .caption h4{
	  display:block;
	  top:-1rem;
  }
  #best ul.items li a .caption h6{
	  display:none;
  }
}

/* -----------------------------------------------------------------
3. brand
----------------------------------------------------------------- */

.video_caption{
	position:absolute;
	top:37.5%; left:10%;
	width:80%;
	z-index:10;
	text-align:center;
}
@media only screen and (max-width: 1025px) {
  .video_caption{
	  top:30%; left:25%;
	  width:50%;
  }
}
@media only screen and (max-width: 834px) {
  .video_caption{
	  top:25%;
	  left:2%;
	  width:96%;
  }
}
.video_caption .title{color:#ffffff; word-break:keep-all;}
.video_caption .description{color:#ffffff; word-break:keep-all;}
.video_caption .btn{margin-top:2rem;}
@media only screen and (max-width: 834px) {
  .video_caption .title_h1{font-size:2.25rem;}
}

/* -----------------------------------------------------------------
4. recipe
----------------------------------------------------------------- */

#recipe ul.items{
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	margin:0;
	display:flex;
	flex-flow: row wrap;
	align-content:space-around;
	justify-content:space-around;
}
#recipe ul.items li{
	width:50%; height:50%;
	text-align:center;
	position:relative;
}
@media only screen and (max-width: 834px) {
  #recipe ul.items li{
	width:100%; height:25rem;
	text-align:center;
	position:relative;
  }
}
@media only screen and (max-width: 414px) {
  #recipe ul.items li{
	height:20rem;
  }
}
#recipe ul.items li:nth-child(1){
	background-image:url(../image/recipe/mocktail_red_herring.jpg);
	background-size:cover;
}
#recipe ul.items li:nth-child(2){
	background-image:url(../image/recipe/mocktail_big_hibiscus_lemonade.jpg);
	background-size:cover;
}
#recipe ul.items li:nth-child(3){
	background-image:url(../image/recipe/mocktail_rising_sun.jpg);
	background-size:cover;
}
#recipe ul.items li:nth-child(4){
	background-image:url(../image/recipe/latte_chocolate_peppermint.jpg);
	background-size:cover;
}
#recipe ul.items li a{
	display:block;
	position:absolute;
	bottom:0; left:0;
	width:100%; height:0;
	background-color:rgba(0,0,0,0.5);
	overflow:hidden;
	opacity:0;
	transition:all .5s;
}
#recipe ul.items li a .caption{
	width:70%; height:70%;
	margin:12.5% auto;
	text-align:center;
	color:#ffffff;
}
@media only screen and (max-width: 1440px) {
  #recipe ul.items li a .caption{
	width:40%;
	margin:10% auto;
  }
  #recipe ul.items li a .caption .title_h1{
	font-size: 3rem;
  }
}
@media only screen and (max-width: 1280px) {
  #recipe ul.items li a .caption .title_h1{
	font-size: 2.75rem;
  }
}
@media only screen and (max-width: 1025px) {
  #recipe ul.items li a .caption{
	width:90%; height:100%;
	margin-top:100px;
	margin-left:5%;
	margin-right:5%;
  }
}
@media only screen and (max-width: 768px) {
  #recipe ul.items li a .caption .title_h1{
	font-size: 2.25rem;
  }
}
@media only screen and (max-width: 580px) {
  #recipe ul.items li a .caption{
	margin-top:5rem;
  }
}
#recipe ul.items li a .caption .title_overhead{
	color:#ffffff; margin-bottom:2rem;
}
#recipe ul.items li a .caption .description {
	word-break:keep-all;
}
@media only screen and (max-width: 414px) {
  #recipe ul.items li a .caption .description {
	display:none;
  }
}
#recipe ul.items li:hover a{
	height:100%;
	opacity:1;
}
@media only screen and (max-width: 1025px) {
  #recipe ul.items li a{
	height:100%;
	opacity:1;
	background-color:rgba(0,0,0,0.1);
  }
}

/* -----------------------------------------------------------------
5. teatime
----------------------------------------------------------------- */

#teatime h2{
	text-align:center;
	width:80%;
	margin-top:100px;
	margin-right:7%;
	margin-left:13%;
}
@media only screen and (max-width: 1440px) {
  #teatime h2{
	width:75%;
	margin-right:10%;
	margin-left:15%;
  }
}
@media only screen and (max-width: 1025px) {
  #teatime h2{
	margin-right:auto;
	margin-left:auto;
  }
}
#teatime ul.items li{
	width:19%; height:29vh;
	margin-bottom:1rem;
	text-align:center;
	position:relative;
	display:flex;
	flex-direction:column;
	align-content:space-around;
	justify-content:space-around;
}
@media only screen and (max-height: 900px) {
  #teatime ul.items li{
	height:27vh;
  }
}
@media only screen and (max-height: 800px) {
  #teatime ul.items li{
	height:25vh;
  }
}
@media only screen and (max-width: 1280px) {
  #teatime ul.items li{
	width:24%;
  }
  #teatime ul.items li:nth-child(9),
  #teatime ul.items li:nth-child(10){
	display:none;
  }
}
@media only screen and (max-width: 1025px) {
  #teatime ul.items li{
	width:19%; height:12rem;
  }
  #teatime ul.items li:nth-child(9),
  #teatime ul.items li:nth-child(10){
	display:block;
  }
}
@media only screen and (max-width: 834px) {
  #teatime ul.items li{
	width:32.5%; height:16rem;
  }
  #teatime ul.items li:nth-child(10){
	display:none;
  }
}
@media only screen and (max-width: 580px) {
  #teatime ul.items li{
	width:49%; height:16rem;
  }
  #teatime ul.items li:nth-child(10){
	display:block;
  }
}
@media only screen and (max-width: 414px) {
  #teatime ul.items li{
	height:11.75rem;
  }
}
#teatime ul.items li:nth-child(1){
	background:url(../image/sns/insta_01.png) no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
#teatime ul.items li:nth-child(2){
	background:url(../image/sns/insta_02.png) no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
#teatime ul.items li:nth-child(3){
	background:url(../image/sns/insta_03.png) no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
#teatime ul.items li:nth-child(4){
	background:url(../image/sns/insta_04.png) no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
#teatime ul.items li:nth-child(5){
	background:url(../image/sns/insta_05.png) no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
#teatime ul.items li:nth-child(6){
	background:url(../image/sns/insta_06.png) no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
#teatime ul.items li:nth-child(7){
	background:url(../image/sns/insta_07.png) no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
#teatime ul.items li:nth-child(8){
	background:url(../image/sns/insta_08.png) no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
#teatime ul.items li:nth-child(9){
	background:url(../image/sns/insta_09.png) no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
#teatime ul.items li:nth-child(10){
	background:url(../image/sns/insta_10.png) no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
#teatime ul.items li a{
	display:block;
	width:100%; height:100%;
	position:relative;
}
#teatime ul.items li a .insta{
	position:absolute;
	bottom:0; left:0;
	width:100%; height:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:rgba(0,0,0,0.5);
	color:#ffffff;
	font-size:1.25rem;
	overflow:hidden;
	opacity:0;
	z-index:1;
	transition:all .5s;
}
#teatime ul.items li a:hover .insta{
	height:100%;
	opacity:1;
}
@media only screen and (max-width: 1025px) {
  #teatime ul.items li a .insta{
	height:100%;
	opacity:1;
	background-color:rgba(0,0,0,0.1);
  }
}
@media only screen and (max-width: 580px) {
  #teatime ul.items li a .insta{
	display:none;
  }
}