@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Noto Sans KR', sans-serif; font-size:14px; color:#333; }
li { list-style:none; }
img { vertical-align:middle; }
a { text-decoration:none; }


h1 { font-size:3.2em; margin-bottom:5px; }
h2 { font-size:2.7em; }
h3 { font-size:2em; }
h4 { font-size:1.3em; }
h5{ font-size:1.1rem; color:#666; margin-top:20px; line-height:1.5; font-weight: 500;}
h6 { font-size:1rem; color:#666; margin-top:20px; line-height:2; }
button {border:none; border-radius:25px; cursor:pointer;}
button>a { color:#fff; }

header h5{margin-top: 14px !important;}
.inner { width:1170px; margin:0 auto; padding-top:70px; }




/*==================== index.html ==========================*/

/** section **/
.left { float:left; width:49%; margin-left:1%; padding-top:80px; }
.left .txtline{width: 25px; height: 1px; background: #888; margin: 40px 0 15px 0;}
.right { float:right; width:49%; margin-right:1%; }
.right img { width:100%; padding-left:120px; }

#section1 { height:100vh; padding-top:100px; background:#e0f0b1;}
#section1 button:hover { background:#fff; }
#section2 { height:100vh; padding-top:100px; background:#d4f5f3;}
#section3 { height:100vh; padding-top:100px; background:#f5e5bd; }
#section4 { height:100vh; padding-top:100px; background:#f9f9f9 url(../img/main_allo.png) no-repeat center bottom; }

#section4 { text-align:center; position:relative; }
#section4 .inner { padding-top:20px; }
.text-box h3 { letter-spacing:0.5rem; color:#bbb; font-size:20px; font-weight:400; }
.text-box h2 { margin-top:20px; padding-bottom:10px; font-size:3.3em; font-weight:500; line-height:4rem;}
.text-box h4 { margin-top:20px; font-weight:400; font-size:1.6em; }
.btn-4 { margin-top:40px; text-align:center; }



/** instagram **/
#instagram { text-align:center; padding:30px 0 100px; background:#fff; }
#instagram h4 { margin-bottom:15px; letter-spacing:0.3rem; }
.instagram-space { width:80%; height:900px; margin:0 auto; }
.instagram-space li { float:left; width:31.333%; height:32.4%; margin:1%; background:#fff; border: 1px solid #eee; overflow: hidden; }

.instagram-space li img { width:100%; transition: transform .5s;}
.instagram-space li a:hover img {  filter: brightness(90%); transform: scale(1.1);}

/** review **/
#review { text-align:center; padding:30px 0 100px; background:#fff; }
#review h3 { letter-spacing:0.5rem; color:#ddd; }
#review h4 { margin:0 0 60px; letter-spacing:0.5rem; color:#feb72e; }
.review-space li { position:relative; float:left; width:32.6%; margin-right:1%; padding:0 12px 20px; border-radius:10px; background:#fff; box-shadow:0px 6px 10px #999; }
.review-space li:last-child { margin-right:0; }
.review-space li div { margin-top:70px; text-align:center; font-weight:600; }
.r-bar { width:50px; height:1px; background:#999; margin:40px auto 30px; }
.review-space li img { position:absolute; top:-30px; left:160px; width:80px; }
#naver-review { position:static; width:80%; }

/** index.html footer **/
footer { padding:50px 0; background:#e6e6e6; text-align:center; }
footer p:nth-child(2) { padding-top:20px; }


/*==========================================================*/









/*==================== story.html ==========================*/
/* bg 컬러 #fff8ed */

#story { text-align:center; }
#story h4 { padding:0 0 15px; font-weight:400; color:#ddd; letter-spacing:0.3rem; }
#story h2 { padding-bottom:10px; font-size:3.3em; font-weight:500; color:#feb72e; line-height:4rem; }
#story h2 strong { color:#666; }
#story h6 { font-weight:400; color:#888; }

#story .inner { padding-top:120px; }


/* contents1-allo food lab */
#s-contents1 { height:100vh; background:#fff8ed; }
#s-contents1 h4 { margin-top:100px; }
#s-contents1 h6 { margin-top:50px; color:#777; font-size:24px; }
#s-contents1 p { margin-top:280px; color:#b1b0b0; }
.buttonPosition {
    position: relative;
    text-align: center;
    z-index: 99;
    animation-name: scrlDwnIndc;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes scrlDwnIndc {
  0%    {bottom: -260px;}
  20%   {bottom: -264px;}
  40%   {bottom: -268px;}
  60%   {bottom: -272px;}
  80%   {bottom: -274px;}
  100%  {bottom: -264px;}
}
#s-contents1 .inner { height:100%; background:url(../img/story_allo.png) no-repeat right bottom; }


/* contents2-pure drink */
#s-contents2 { height:100vh; background:#fff; }
#s-contents2 .inner { height:100%; background:url(../img/story_ingredient.png) no-repeat center bottom; }


/* contents3-recipe */
#s-contents3 { height:100vh; margin-bottom:40px; background:#fff; }
#s-contents3 .s-c3_text { padding-top:0; }
#s-contents3 h2 { margin-top:0; }
#s-contents3 p { font-size:0.9rem; line-height:1rem; color:#888; }
#s-contents3 h5 { font-size:1.3rem; margin-top:2px; font-weight:700; color:#333; }

.allo-tea { margin-top:60px; }
#s-contents3 li:nth-child(1) { background:#e0f0b1; }
#s-contents3 li:nth-child(2) { background:#d4f5f3; }
#s-contents3 li:nth-child(3) { background:#f5e5bd; margin-right:0; }
#s-contents3 li { float:left; width:32%; height:200px; margin-right:2%; border-radius:20px; text-align:left; overflow:hidden; position:relative; }
#s-contents3 img { width:95%; padding-top:30px; padding-left:220px; transition:transform 0.5s; }
#s-contents3 li:hover img { transform:scale(1.1);}
#s-contents3 li div { position:absolute; left:30px; top:35px; }
#s-contents3 li h5 { margin-bottom:60px;}
#s-contents3 li a { width:80px; font-size:0.9rem; font-weight:500; color:#333; }



/*==========================================================*/












/*================= allo-tea1,2,3.html (상세 구조) =====================*/





/*================== allo-tea1(기감차플러스) 시작 ==================*/

/**** #d-contents1 ****/
.d-contents1 { height:1000px; background:url(../img/dtail1_contents1.png) center bottom no-repeat; margin:100px 0; text-align:center; }
.d-contents1 h1 { padding:10px 0; line-height:1.3em; font-weight:500; color:#feb72e; }
.d-contents1 h1 strong { color:#333; }
.d-contents1 h6 { font-weight:500; line-height:1.8; }


/**** #d-contents2 ****/
.d-contents2 { height:1000px; padding-bottom:150px; background:#fff; text-align:center; }
.d-contents2 img { margin-top:100px; padding-right:100px; }
.d-c2_top { position:relative; width:500px; margin:0 auto; }
.d-c2_top h2 { margin-top:20px; font-weight:500; font-size:3.3em; line-height:1.3em; }
.d-c2_top strong { color:#feb72e; font-weight:900; }
.d-c2_top>img { position:absolute; z-index:9; }
.d-c2_top>img:last-child { top:0; right:0; }
.d-c2_top img { padding:0; margin:0; }

.d-c2_middle { margin:60px auto 30px; width:410px; height:13px; background:#feb72e; position:relative; }
.d-c2_middle h4 { position:absolute; bottom:0; left:7px; font-size:1.8em; font-weight:500; }
.d-c2_bottom { width:487px; height:71px; margin:0 auto;  background:url(../img/dtail1_contents2-2.png) no-repeat; }
.d-c2_bottom h6 { font-weight:500; line-height:1.8; }


/**** #d-contents3 ****/
.d-contents3 { height:1100px; padding:150px 0 100px; background:#fff8ed; text-align:center; }
.d-contents3 ul { padding:20px 0; }
.d-contents3 ul:nth-child(2) { padding-left:150px; }
.d-contents3 li { float:left; width:290px; }
.d-contents3 .d-c3_circle { margin-left:76px; }
.d-contents3 li h4 { margin:10px 0 2px; font-size:1.4rem; font-weight:900; }
.d-contents3 li p { margin-bottom:10px; font-size:1rem; }
.d-contents3>.inner>p { margin-top:100px; }


/**** #d-contents4 ****/
.d-contents4 { height:1500px; padding:150px 0 200px; background:#fff; text-align:center; }
.d-c4-text { margin:30px 0 50px; }
.d-c4-text h2 { font-weight:500; line-height:1.3em; }
.d-c4-text h2 strong { color:#feb72e; font-weight:900; }
.d-c4-text>div { margin:30px auto 20px; }
.d-c4-text h6 { font-weight:500; line-height:1.8; }

.d-c4-icon { padding-left:290px; }
.d-c4-icon li { float:left; width:22%; }
.d-c4-icon>li>div { margin-left:16px; }
.d-c4-icon li img { width:60px; margin-top:46px; }
.d-c4-icon li h4 { margin:10px 0; font-size:1.4rem; font-weight:900; }
.d-c4-icon li p { font-size:1rem; }
.d-contents4>.inner>p { margin-top:80px; }


/**** #d-contents5 ****/
.d-contents5 { height:1400px; padding:100px 0;  background:#fff8ed; text-align:center; }
.d-contents5 h2 { font-size:3.2em; font-weight:500; line-height:1.3em; }
.d-contents5 strong { color:#feb72e; font-weight:500; }
.d-contents5>div>div { margin:30px auto; } 
.d-contents5 h6 { margin-bottom:50px; font-weight:500; line-height:1.8; }


/**** #d-contents6 ****/
.d-contents6 { padding:100px 0 0;  background:#fff; text-align:center; }
.d-contents6 h2 { font-size:3.2em; font-weight:500; line-height:1.3em; }
.d-contents6>div>h2>strong { color:#feb72e; font-weight:900; }
.d-contents6>div>div { margin:30px auto; }
.d-contents6>div:nth-child(2) { position:relative; width:800px; margin:30px auto 0; }
.d-contents6>div:nth-child(2)>img { width:100%; position:absolute; top:0; left:0; }
.d-contents6 ul { margin:300px 0 0; padding:200px 0 0; }
.d-contents6 ul .inner { width:500px; margin:0 auto; padding:0; }
.d-contents6 li { margin:20px 0; text-align:left; }
.d-contents6 li img { width:25px; }
.d-contents6 ul span { margin-left:10px; font-size:1.2rem; font-weight:400; }
.d-contents6 ul


/**** #d-contents7 ****/
#d-contents7 { height:1400px; padding:100px 0 200px; background:#fff; }
.d-c7-text { text-align:center; margin:10px 0 40px; }
.d-c7-text h6 { margin-bottom:50px; font-weight:500; line-height:1.8; }
.d-c7-icon { width:500px; margin:0 auto 100px; }
.d-c7-icon li { float:left; width:50%; text-align:center; }
.d-c7-icon li h4 { margin:10px 0 5px; font-size:1.4rem; font-weight:700; }
.d-c7-icon li p { font-size:1rem; }

.d-c7-process { text-align:center; }
.d-c7-process h3 { font-size:2.5em; font-weight:500; }
.d-c7-process h3 strong { color:#feb72e; }
.d-c7-process ul { width:800px; margin:50px auto 0; }
.d-c7-process li { float:left; width:15%; margin-right:2%; }
.d-c7-process li img { width:70%; }
.d-c7-process li:last-child { margin-right:0; }
.d-c7-process li p { padding:10px 0; font-size:1rem; }


/**** #d-contents8 ****/
#d-contents8 { height:1100px; padding:200px 0; background:linear-gradient(0deg,#fff,#fff8ed); text-align:center; }
#d-contents8 h2 { font-weight:500; line-height:1.3em; color:#feb72e; margin-bottom:20px; }
#d-contents8 h3 { font-weight:500; }
#d-contents8 h3 strong { font-weight:500; color:#feb72e; }
#d-contents8 h4 { margin-bottom:20px; font-size:1.7em; font-weight:500; }


/**** #d-contents9 ****/
.d-contents9 { padding:100px 0 0 0;  background:#fff; text-align:center; }
.d-contents9 h2 { font-size:3.2em; font-weight:500; line-height:1.3em; }
.d-contents9>div>h2>strong { color:#feb72e; font-weight:900; }
.d-contents9>div>div { margin:30px auto; }
.d-contents9 h6{font-weight:500;  line-height:1.8;}
.d-contents9 h6 span{font-weight: 700; font-size: 1.2em;}
.d-contents9 h6 strong{font-weight: 700; color: #f8763a;}
.d-contents9 img{width: 650px;}
/*================== allo-tea1(기감차플러스) 끝 ==================*/








/*================== allo-tea2(대니차) 시작 ==================*/

#d2-c1 { height:1100px; background:url(../img/d2_contents1.png) center bottom no-repeat; margin:100px 0; text-align:center; }
#d2-c1 h1 { padding:10px 0; line-height:1.3em; font-weight:500; color:#4bb9a6; }
#d2-c1 h1 strong { color:#333; }
#d2-c1 h6 { font-weight:500; line-height:1.8; }

#d2-c2 { height:100%; padding:100px 0 200px; background:#d4f5f3; text-align:center; }
#d2-c2>div>img { width:50%; }
#d2-c2 .d-c2_top { width:500px; margin:0 auto; }
#d2-c2 .d-c2_top img { margin-top:30px; position:static; }
#d2-c2 .d-c2_top h2 { margin-top:20px; font-weight:500; font-size:2.2em; line-height:1.3em; }
#d2-c2 .d-c2_top strong { color:#4bb9a6; font-size:3rem; line-height:1.3; font-weight:900; }
#d2-c2_inner>div:nth-child(3) { margin:60px auto 30px; width:430px; height:13px; background:#93e1d4; position:relative; }

#d2-c3 { height:500px; background:#fff; padding:0; }
#d2-c3>div { padding:0; position:relative; }
#d2-c3_box { position:absolute; top:-200px; left:0; width:100%; height:275px; margin-top:70px; padding-bottom:50px; background:#fff8ed; position:relative; }
#d2-c3_box>div>div { position:absolute; top:-30px; left:43.9%; width:100%; margin:0; }
#d2-c3_box h4 { margin:0; padding-top:115px; }

#d2-c4 { height:100%; padding-top:0; }
#d2-c4>div { padding-top:0; }
#d2-c4>div>div { margin-top:0; }
#d2-c4>div>ul { padding-left:0; width:900px; margin:0 auto; }
#d2-c4>div>ul>li { width:25%; }
#d2-c4>div>ul>li>div { margin-left:30px; } 

#d2-c5 { height:100%; }
#d2-c5 strong { color:#4bb9a6; }
#d2-c5>div>img { width:40%; }

#d2-c6>ul { height:540px; margin-top:400px; padding-top:230px; }

/*================== allo-tea2(대니차) 끝 ==================*/





/*================== allo-tea3(완밥차) 시작 ==================*/


/** #d-contents2 **/

#d3-c2_inner h2 { position:absolute; left:0; top:0; text-align:left; margin-left:10px; }
#d3-c2_inner h2 span { font-size:1.4em; }
#d3-c2_inner h2 strong { color:#f8763a; }
#d3-quote { display:inline-block; margin-bottom:30px; }
#d3-c2_inner h4 { position:absolute; right:10px; bottom:0; text-align:right; font-size:1.6em; }

#d3-c3 { background:#f2fad9; padding:100px 0; text-align:center; }
#d3-c3>div { padding-top:0; }
#d3-c3>div>h4 { padding:0 0 40px; }
#d3-c3>div>p { padding-top:50px; }
#d3-c3 ul { width:870px; margin:0 auto; }
#d3-c3 li { float:left; width:290px; }
#d3-c3 .d-c3_circle { margin-left:76px; }
#d3-c3 li h4 { margin:10px 0 2px; font-size:1.4rem; font-weight:900; }
#d3-c3 li p { margin-bottom:10px; font-size:1rem; }

#d3-c4_inner { padding:0; }
#d3-c4_inner>div { height:497px;}
#d3-c4_inner>div>h2 { padding-top:400px; }
#d3-c4_inner h2 strong { color:#f8763a; }
#d3-c4_inner>ul { margin-top:200px; }
#d3-c4_inner li img { margin-top:54px; }

#d3-c5 { padding:100px 0 200px; background:#f2fad9; text-align:center; }
#d3-c5 h2 { font-size:3.2em; font-weight:500; line-height:1.3em; }
#d3-c5 h2 strong { color:#f8763a; font-weight:500; }
#d3-c5>div>div { margin:30px auto; } 
#d3-c5 h6 { margin-bottom:50px; font-weight:500; line-height:1.8; }

#d3-c7-process strong { color:#f8763a; }

#d3-c8-text h3 strong { color:#f8763a; }

/*================== allo-tea3(완밥차) 끝 ==================*/