@charset "utf-8";


/*문의하기 폼*/
.main__inquiry {position:fixed; width:100%; z-index:10000; right:-100%; top:0; height:100vh; transition: all 0.3s ease-in-out;}
.main__inquiry.js-active {right:0;}
.main__inquiry-wrap {max-width:1024px; position:absolute; width:100%; right:0; height:100%; background-color:#fff;  z-index: 2; overflow-x: hidden;}
.main__inquiry-inner {overflow-y:auto; height:100%; padding:40px;}
.main__inquiry-dim {position:fixed;z-index:1; top:0;right:0;bottom:0;left:0;width:100%; background-color:rgba(0, 0, 0, 0.5);display: none;}
.main__inquiry.js-active .main__inquiry-dim {display:block;}


.main__inquery-header {position:relative; font-size:0; padding:0 100px 30px 0; border-bottom:1px solid #222; margin-bottom:20px;}
.main__inquery-header .image {padding:0 20px; display: inline-block; width:100px;}
.main__inquery-header .info {display: inline-block;  width:calc(100% - 100px);}
.main__inquery-header .info h4 {font-size:20px; font-weight:700; color:#000; }
.main__inquery-header .info p {font-size:17px; color:#433e35;margin-top:8px;  line-height: 1.3;}



.main__inquery-header .close {display:block; position: absolute; right: 0px; top: 0%; width: 60px; height: 66px; z-index:1002; padding:0; font-size:0;  transition: all 0.3s ease-in-out;overflow:hidden; cursor:pointer;}

.main__inquery-header .close svg {transition:all 0.3s ease-in-out; fill:#000;}

.main__inquery-header .close span:before,
.main__inquery-header .close span:after {content:''; display:block; width:28px; height:2px; background-color:#fff; position:absolute; top:50%; left:50%;transition: all 0.3s ease-in-out;}

.main__inquery-header .close span:before {transform:translate(-50%, -50%) rotate(45deg);}
.main__inquery-header .close span:after {transform:translate(-50%, -50%) rotate(-45deg);}

.main__inquery-header .close:hover span:before,
.main__inquery-header .close:focus span:before {transform:translateX(-50%) rotate(-45deg); background-color:#fff;}
.main__inquery-header .close:hover span:after,
.main__inquery-header .close:focus span:after {transform:translateX(-50%) rotate(45deg); background-color:#fff;}
.main__inquery-header .close:hover svg,
.main__inquery-header .close:focus svg {transform:rotate(180deg);  fill:#ed761d;}


.main__inquiry .newBoard__write-header .required:before { background-color: transparent; border-radius: 0%; background-image:url('../images/main/ico_inquiry03.png'); background-repeat: no-repeat; background-position: 50% 50%;}
.main__inquiry .newBoard__write-table .required span:before, 
.main__inquiry .newBoard__write-table .required label:before {content: ''; display: inline-block; width: 10px; height: 10px; background-image:url('../images/main/ico_inquiry03.png'); background-repeat: no-repeat; background-position: 50% 50%; margin-right: 6px; vertical-align: baseline; margin-bottom: 1px;}

.main__inquiry .newBoard__write-table .required span:after, 
.main__inquiry .newBoard__write-table .required label:after {display:none;}


.main__inquiry .newBoard__write-table th:first-child,
.main__inquiry .newBoard__write-table td {padding: 10px 0px;}
.main__inquiry .newBoard__write-table th {padding: 10px 20px;}

.main__inquiry .spamkey .base__form-text { display:inline-block; font-weight:500; margin:0 0 0 10px; color:#000;}

.main__inquiry .privacy {padding: 20px 20px 20px;}
.main__inquiry .privacy-wrap {margin-top: 20px; height: 160px;  font-size: 14px;}
.main__inquiry .privacy-header {background: #fff; padding: 20px 20px; margin-bottom: 30px;}


.main__inquiry .privacy-check {text-align: left; padding: 20px 0;}
.main__inquiry .newBoard__btn {padding:30px 0 0 0;}
.main__inquiry .newBoard__btn-wrap {margin:0;}
.main__inquiry .newBoard__btn .btn {border-radius:60px; font-weight:700;}


@media only screen and (max-width: 1024px){
	.main__inquiry-wrap {padding: 20px 0;}
	.main__inquiry-inner { padding:20px;}
}

@media only screen and (max-width: 768px){
	.main__inquery-header { padding:0 80px 20px 0;}
	.main__inquery-header .image {padding:0 10px; width:80px;}
	.main__inquery-header .info { width:calc(100% - 80px);}
	.main__inquery-header .info h4 {font-size:20px;}
	.main__inquery-header .info p {font-size:16px;}



	.main__inquery-header .close {width: 55px; height: 60px;}


	.main__inquery-header .close span:before,
	.main__inquery-header .close span:after { width:24px;}


	.main__inquiry .spamkey .base__form-text { display:block; margin:10px 0 0 0;}
}
@media only screen and (max-width: 480px){
	.main__inquery-header { padding:0 50px 20px 0;}
	.main__inquery-header .image {padding:0 10px 0 0; width:60px; vertical-align: top;}
	.main__inquery-header .info { width:calc(100% - 60px);}
	.main__inquery-header .info h4 {font-size:18px;}
	.main__inquery-header .info p {font-size:13px;}



	.main__inquery-header .close {width: 40px; height: 44px;}
	.main__inquery-header .close span:before,
	.main__inquery-header .close span:after { width:20px;}
}









.body-main,
section {position:relative;}




/*Main Visual*/
.main__visual { position:relative; overflow:hidden; min-height:100vh;}
.main__visual-wrap {width:auto; z-index:2; position:relative;   margin:0 auto;}


.slick-slider .slick-track, .slick-slider .slick-list {z-index:1; height:100%;}
.main__visual-item { font-size:0; white-space:nowrap; overflow:hidden; position:relative; height:100%; height:100vh; min-height:800px !important; text-align: center; }
.main__visual-item:before {content:''; display:inline-block; vertical-align:middle; width:0; height:100%; font-size:0;}


.main__visual-inner {display:inline-block;  white-space:normal; position:relative; z-index:10; word-break:keep-all;  vertical-align:middle; line-height:1.3;width:100%; max-width: 1440px; padding:0 20px;}

.main__visual-copy {position:relative; text-align:left; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0); }
.main__visual-copy > h2 {display: inline-block; position: relative;}
.main__visual-copy > h2::before {content:''; width: 126px; height: 126px; background: url('../images/main/img_circle01.png') no-repeat; position: absolute; top: 0%; right: 0%; z-index: -1; background-size: contain; animation: rotate_image2 10s linear infinite; transform: translate(100%, -100%);}
.main__visual-copy > p{ line-height:1.3; }
.main__visual-copy > .text1{margin-top:10px; font-weight:700;font-size:49px; color:#000;font-family: 'YUniverse', 'GmarketSans';}
.main__visual-copy > .text1 strong {color:#805727; vertical-align: baseline;}
.main__visual-copy > .text2{margin-top:30px; color:#805727; font-size:26px;font-family: 'GmarketSans';}
.main__visual-copy > .text2 strong {vertical-align: baseline; font-weight:400;}

.main__visual-copy > .text3{margin-top:-10px; font-weight:700;font-size:100px; color:#000; font-family: 'YUniverse', 'GmarketSans';}

.main__visual-item.nth-2 .main__visual-copy > .text2,
.main__visual-item.nth-3 .main__visual-copy > .text2 {font-weight:700; font-family: 'YUniverse';}


@media only screen and (max-width: 1440px){
	.main__visual-item {min-height:700px !important; }

	.main__visual-copy {margin-top:-8%;}
	.main__visual-copy > h2 img{ width:444px; }
	.main__visual-copy > h2::before { width: 100px; height: 100px; }
	.main__visual-copy > .text1{margin-top:10px; font-size:36px; }

	.main__visual-copy > .text2{margin-top:24px; font-size:22px;}

	.main__visual-copy > .text3{margin-top:-8px; font-size:90px;}

}
@media only screen and (max-width: 1280px){
	
	
}
@media only screen and (max-width: 1024px){
	.main__visual-item { min-height:600px !important;}

	.main__visual-copy > h2 img{ width:380px;}
	.main__visual-copy > h2::before { width: 80px; height: 80px; }
	.main__visual-copy > .text1{margin-top:10px; font-size:32px; }

	.main__visual-copy > .text2{margin-top:24px; font-size:20px;}

	.main__visual-copy > .text3{margin-top:-8px; font-size:80px;}

	
}
@media only screen and (max-width: 768px){
	.main__visual-item { min-height:500px !important;}

	.main__visual-copy {margin-top:-5%;}
	.main__visual-copy > h2 img{ width:317px;}
	.main__visual-copy > h2::before { width: 70px; height: 70px; }
	.main__visual-copy > .text1{margin-top:10px; font-size:26px; }

	.main__visual-copy > .text2{margin-top:20px; font-size:20px;}

	.main__visual-copy > .text3{margin-top:0px; font-size:60px;}
	
}

@media only screen and (max-width: 640px){
	
}

@media only screen and (max-width: 480px){
	
	.main__visual-item { min-height:480px !important;}
	
	.main__visual-copy {margin-top:-10%;}
	.main__visual-copy > h2 img{ width:240px;}
	.main__visual-copy > h2::before { width: 60px; height: 60px; }
	.main__visual-copy > .text1{margin-top:5px; font-size:20px; }

	.main__visual-copy > .text2{margin-top:15px; font-size:18px;}

	.main__visual-copy > .text3{margin-top:0px; font-size:48px;}
}

.main__visual-control {position:absolute; bottom:200px; left:0%; font-size:0; transition: all 0.3s ease-in-out; z-index:1000; white-space: nowrap;}
.main__visual-prev,
.main__visual-next {display:inline-block; margin:0px; opacity:1; background-position:50% 50%; background-repeat:no-repeat; width:20px; height:14px; text-indent:9999999px; overflow:hidden; transition:all 0.3s ease-in-out;}
.main__visual-prev {background-image:url('../images/main/arrow_prev.png'); background-position:0 50%;}
.main__visual-next {background-image:url('../images/main/arrow_next.png'); background-position:100% 50%;}

.main__visual-prev:hover,
.main__visual-prev:focus,
.main__visual-next:hover,
.main__visual-next:focus {opacity:1; cursor:pointer;}

.pagingNum {font-weight:100; font-size:20px; color:#222;z-index:1000000; display:inline-block; margin:0 10px;}
.pagingNum em,
.pagingNum i {font-style:normal; vertical-align:baseline;}
.pagingNum em {font-weight:700;}

.main__visual .pagingNum {opacity:1;}



@media only screen and (max-width: 1440px){
	.main__visual-control {bottom:100px;}
	.pagingNum {font-size:18px;}
}

@media only screen and (max-width: 1024px){
	.main__visual-control {bottom:60px;}
	.pagingNum {font-size:18px;}
}

@media only screen and (max-width: 768px){
	.main__visual-control {left:50%; transform:translate(-50%,0);}
	.pagingNum {font-size:16px;}
}




/*visaul dots*/
.main__visual-dots {display:inline-block;}
.main__visual-dots ul {display:block; font-size:0;}
.main__visual-dots li{display:inline-block;  cursor:pointer; margin:0 ;  }

.main__visual-dots button {display:inline-block; position:relative; width:0px; height:1px; border:0;  overflow:hidden;  background-color:rgba(128,87,39,0.17); box-sizing:border-box; transition:all .3s ease-in-out;  font-size:0; position:relative;}

.main__visual-dots button::after {content:''; display: inline-block; width:0; height:100%; position: absolute; background-color:rgba(128,87,39,1); top:0; left:0;}

.main__visual-dots li.slick-active {margin:0 10px;}
.main__visual-dots li.slick-active button {background-color:rgba(128,87,39,0.17); width:200px;}
.main__visual-dots li.slick-active button::after {animation: is-dot 10s linear;}

@keyframes is-dot {
	0% {width:0;}
	100% {width:100%;}
}



@media only screen and (max-width: 1024px){
	.main__visual-dots li.slick-active button {width:120px;}
}

@media only screen and (max-width: 480px){
	.main__visual-dots li.slick-active button {width:100px;}
}



.main__visual-scroll {position:absolute; bottom:60px; left:50%; transition: all 0.3s ease-in-out; z-index: 4;}
.main__visual-scroll a {display:block; font-size:10px; color:#fff; position:relative; width:22px; height:52px;}
.main__visual-scroll a:hover {color:#fff;}
.scroll-icon{animation-duration:2s; animation-iteration-count:infinite; animation-name:is-scroll; position:absolute; top:0; left:0%; width:22px; }

@keyframes is-scroll {
	0% {opacity: 1;}
	70% {
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}
	100% {
		opacity: 0;
	}
}
@media only screen and (max-width: 768px){
	.main__visual-scroll {bottom:20px !important;}
	.main__visual-scroll a {width:16px; height:38px;}

}

@media only screen and (max-width: 640px){
	
	
}


.main__visual-item > .bg {position:absolute; height:100%; width:100%; top:0; left:0; overflow:hidden; z-index:-1; }
.main__visual-item > .bg .main__visual-img{
	background-size:cover; background-position: 70% 0%; background-repeat: no-repeat;
	transition:all 10s ease-in-out;
	transform:scale(1) skew(0.001deg);
}
.slick-active > .bg .main__visual-img.is-scale{
	transition:all 10s ease-in-out;
	transform:scale(1.2) skew(0.001deg);
}
.main__visual-item.nth-1 .main__visual-img{background-image:url('../images/main/visual_bg01.jpg');}
.main__visual-item.nth-2 .main__visual-img{background-image:url('../images/main/visual_bg02.jpg');}
.main__visual-item.nth-3 .main__visual-img{background-image:url('../images/main/visual_bg03.jpg');}
.main__visual-img,
.main__visual-img img{width:100%; height:100%;}

.is-opacity {
  -webkit-animation-name: is-opacity;
  -webkit-animation-duration: 10s;
  -ms-animation-name: is-opacity;
  -ms-animation-duration: 10s;
  animation-name: is-opacity;
  animation-duration: 10s;
}

@keyframes is-opacity {
  0% { opacity:0; }
  100% { opacity:1; }
}
@-ms-keyframes is-opacity {
  0% { opacity:0; }
  
  100% { opacity:1; }
}
@-webkit-keyframes is-opacity {
  0% { opacity:0; }
  
  100% { opacity:1; }
}


@keyframes rotate_image {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes rotate_image2 {
	0% {
		transform: translate(100%, -100%) rotate(0);
	}
	100% {
		transform: translate(100%, -100%) rotate(360deg);
	}
}



/*Products*/
.main__product {background-image:url('../images/main/bg_pro01.png'); background-repeat:no-repeat; background-position:50% 50%; background-size:cover; min-height:100vh;}
.main__product-wrap {padding:120px 0 100px 0; z-index: 2; position: relative;}

.main__product-inner::before {content:''; width: 400px; height: 400px; background: url('../images/main/img_circle02.png') no-repeat; position: absolute; bottom: 10%; left: 0%; z-index: -1; background-size: contain; animation: rotate_image 10s linear infinite;}


.main__product-list {font-family: 'YUniverse';}
.main__product-list .stitle {text-align:center; color:#805727; margin-bottom:60px; padding:0 0 0 0;}
.main__product-list .stitle span {display:inline-block; position: relative; padding:0 90px; font-size:35px; font-weight:700;}
.main__product-list .stitle span::before,
.main__product-list .stitle span::after {content:''; display:block; width:74px; height:1px; background-color:#805727; position:absolute; top:50%;}
.main__product-list .stitle span::before {left:0;}
.main__product-list .stitle span::after {right:0;}

.main__product-list .list {font-size:0; text-align: center;}
.main__product-list .list .item {display:inline-block; width:33.3%; text-align:center; margin-bottom:80px; vertical-align: top;}
.main__product-list .list .item:last-child {margin-bottom:110px;}
.main__product-list .list .item a {display: block;}
.main__product-list .list .item .thumb {margin:0 0 20px 0; padding: 0 0 0 9%; transition: all 0.3s ease-in-out;}
.main__product-list .list .item .tit {font-size:28px; font-weight:700; color:#000; letter-spacing: -0.025em; text-transform: uppercase; vertical-align: top;}

.main__product-list .list .item a:hover .thumb {transform:translateY(-20px);}


.pro-alert {font-size:14px; color:#999; text-align: center; margin:40px 0 0 0; line-height:1.3; padding:0 10px;}




@media only screen and (max-width: 1024px){
	.main__product-wrap {padding:100px 0 80px 0;}
	.main__product-inner::before {content:''; width: 300px; height: 300px; bottom: 5%; left: 0%; }

	.main__product-list .stitle { margin-bottom:60px; padding:0 4% 0 0;}
	.main__product-list .stitle span { padding:0 80px; font-size:32px;}
	.main__product-list .stitle span::before,
	.main__product-list .stitle span::after { width:60px; }

	.main__product-list .list .item {width:33.3%; margin-bottom:80px;}
	.main__product-list .list .item:last-child {margin-bottom:110px;}
	.main__product-list .list .item .thumb {margin:0 0 20px 0; padding: 0 0 0 9%;}

	.main__product-list .list .item .tit {font-size:24px;}
	.main__product-list .list .item .tit img {max-width:122px;}


	.pro-alert {font-size:13px;}
}

@media only screen and (max-width: 960px){
	.main__product-wrap {padding:80px 0 60px 0;}
	.main__product-inner::before {width: 260px; height: 260px; bottom: 10%; }

	.main__product-list .stitle {margin-bottom:40px; padding:0 4% 0 0; text-align: center;}
	.main__product-list .stitle span { padding:0 70px; font-size:28px;}
	.main__product-list .stitle span::before,
	.main__product-list .stitle span::after { width:60px; }

	.main__product-list .list .item {width:50%; margin-bottom:60px;}
	.main__product-list .list .item:last-child {margin-bottom:80px;}
	.main__product-list .list .item .thumb {margin:0 0 15px 0; padding: 0 0 0 9%;}

	.main__product-list .list .item .tit {font-size:20px;}
	.main__product-list .list .item .tit img {max-width:108px;}



	
}

@media only screen and (max-width: 560px){
	.main__product-wrap {padding:60px 0 60px 0;}
	.main__product-inner::before {width: 180px; height: 180px; bottom: 10%; }

	.main__product-list .stitle {margin-bottom:40px; padding:0 4% 0 0; text-align: center;}
	.main__product-list .stitle span { padding:0 60px; font-size:20px;}
	.main__product-list .stitle span::before,
	.main__product-list .stitle span::after { width:50px; }

	.main__product-list .list .item {width:100%; margin-bottom:60px;}
	.main__product-list .list .item:last-child {margin-bottom:80px;}
	.main__product-list .list .item .thumb {margin:0 0 15px 0; padding: 0 0 0 9%;}

	.main__product-list .list .item .tit {font-size:20px;}
	.main__product-list .list .item .tit img {max-width:108px;}


}

@media only screen and (max-width: 480px){
	.main__product-inner::before {display:none;}

}


.main__product-list .mbtn {line-height:40px; height:40px; background-color:#9d6f33; display:inline-block; text-align:center; padding:0 20px 0 30px; border-radius: 40px; font-weight:400; color:#fff; margin-top:20px; position:relative; font-family: 'GmarketSans'; transition: all 0.3s ease-in-out;}
.main__product-list .mbtn span {font-size:16px; display: inline-block;}
.main__product-list .mbtn span::after {content:''; display: inline-block; width:20px; height:20px; vertical-align: middle; margin-left:10px; background:url('../images/main/ico_more.png') 50% 0 no-repeat;  transition: all 0.3s ease-in-out; }

.main__product-list a:hover .mbtn {background-color:#000; transform: translateY(10px);}
.main__product-list a:hover .mbtn span::after {background-position:0 -20px;}

@media only screen and (max-width: 768px) {
	.main__product-list .mbtn {line-height:34px; height:34px; padding:0 20px 0 25px;}
	.main__product-list .mbtn span {font-size:14px;}
	.main__product-list .mbtn span::after {width:18px; height:18px; margin-left:8px; background-size:18px auto;}
	.main__product-list a:hover .mbtn span::after {background-position:0 -18px;}
}



/*제품팝업*/
.product__pop {position:fixed; width:100%; z-index:10000; left:0; top:0%; height:100vh; transition: all 0.3s ease-in-out; transform:translateY(-100%);}
.product__pop.js-active {display:block; top:0; transform:translateY(0);}
.product__pop-wrap {background-color:#fff; padding:120px 0; position:absolute; z-index: 2; width:100%; top:50%; left:0; transform: translate(0, -50%);max-height:100vh; overflow-y:auto; }

.product__pop-dim {position:fixed;z-index:1; top:0;right:0;bottom:0;left:0;width:100%; background-color:rgba(0, 0, 0, 0.5);display: none;}
.product__pop.js-active .product__pop-dim {display:block;}


.pro__info-wrap {font-size:0; max-width: 1440px; margin:0 auto; padding:0 20px; }
.pro__info-wrap .image{display: inline-block; width:calc(60% - 40px); margin-right:40px; vertical-align: top;}
.pro__info-wrap .info{display: inline-block; width:40%; vertical-align: top;}

.pro__info-wrap .info .tit {font-size:48px; font-weight:700; color:#000; letter-spacing: -0.025em; text-transform: uppercase; font-family: 'YUniverse';}
.pro__info-wrap .info .tit img {vertical-align: top; display: inline-block;}
.pro__info-wrap .info .text {font-size:23px; font-weight:500; color:#000; letter-spacing: -0.025em; margin-top:10px; line-height:1.3;}
.pro__info-wrap .info .vol {line-height:50px; background-color:#9d6f33; display:inline-block; text-align:center; padding:0 30px; border-radius: 50px; font-weight:400; color:#fff; margin-top:20px;}
.pro__info-wrap .info .vol span {font-size:18px; display: inline-block; line-height:1.3;}
.pro__info-wrap .info .desc {margin-top:20px;}
.pro__info-wrap .info .desc > span {display:inline-block; width:100%; font-size:20px; color:#898683; line-height:1.3; padding:0 0 0 10px; position:relative; margin:0 0 8px 0;;}
.pro__info-wrap .info .desc > span::before {content:''; display:block; height:1px; width:6px; background-color: #898683; position:absolute; top:13px; left:0;}



.product__pop-control {position:absolute; top:50%; left:0%; z-index:4; transform:translateY(-50%); width:100%;}
.product__pop-prev,
.product__pop-next {display:inline-block; opacity:1; border-radius: 50%; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); background-color:#fff; position:absolute; top:50%; transform: translateY(-50%);  background-position:50% 50%; background-repeat:no-repeat; width:64px; height:64px; text-indent:9999999px; overflow:hidden; transition:all 0.3s ease-in-out;}
.product__pop-prev {background-image:url('../images/main/arrow_prev01.png'); left:5%;}
.product__pop-next {background-image:url('../images/main/arrow_next01.png'); right:5%;}

.product__pop-prev:hover,
.product__pop-prev:focus,
.product__pop-next:hover,
.product__pop-next:focus {opacity:1; cursor:pointer;transform: translateY(-60%);}

.product__pop .close {display:block; position: absolute; right: 40px; top: 40px; width: 60px; height: 66px; z-index:1002; padding:0; font-size:0;  transition: all 0.3s ease-in-out;overflow:hidden; cursor:pointer;}

.product__pop .close svg {transition:all 0.3s ease-in-out; fill:#000;}

.product__pop .close span:before,
.product__pop .close span:after {content:''; display:block; width:28px; height:2px; background-color:#fff; position:absolute; top:50%; left:50%;transition: all 0.3s ease-in-out;}

.product__pop .close span:before {transform:translate(-50%, -50%) rotate(45deg);}
.product__pop .close span:after {transform:translate(-50%, -50%) rotate(-45deg);}

.product__pop .close:hover span:before,
.product__pop .close:focus span:before {transform:translateX(-50%) rotate(-45deg); background-color:#fff;}
.product__pop .close:hover span:after,
.product__pop .close:focus span:after {transform:translateX(-50%) rotate(45deg); background-color:#fff;}
.product__pop .close:hover svg,
.product__pop .close:focus svg {transform:rotate(180deg);  fill:#ed761d;}



@media only screen and (max-width: 1440px) {
	.product__pop-wrap {padding:100px 0;}

	.pro__info-wrap .image{width:calc(50% - 30px); margin-right:30px;}
	.pro__info-wrap .info{width:50%;}


	.product__pop-prev {left:20px;}
	.product__pop-next {right:20px;}
	
	
	
	.product__pop .close {right: 20px; top: 20px;}

}


@media only screen and (max-width: 1280px) {


	.pro__info-wrap .info .tit {font-size:36px;}
	.pro__info-wrap .info .tit img {max-width:208px;}
	.pro__info-wrap .info .text {font-size:20px; margin-top:10px;}
	.pro__info-wrap .info .vol {line-height:40px; padding:0 25px; margin-top:20px;}
	.pro__info-wrap .info .vol span {font-size:17px; }
	.pro__info-wrap .info .desc {margin-top:20px;}
	.pro__info-wrap .info .desc > span {font-size:18px; padding:0 0 0 10px; margin:0 0 5px 0;;}
	.pro__info-wrap .info .desc > span::before { height:1px; width:6px; top:13px; left:0;}
}

@media only screen and (max-width: 1024px) {
	.product__pop-wrap {padding:100px 0 60px 0;}

	.pro__info-wrap .image{width:calc(50% - 30px); margin-right:30px;}
	.pro__info-wrap .info{width:50%;}



	.pro__info-wrap .info .tit {font-size:32px;}
	.pro__info-wrap .info .tit img {max-width:184px;}
	.pro__info-wrap .info .text {font-size:18px; margin-top:10px;}
	.pro__info-wrap .info .vol {line-height:36px; padding:0 25px; margin-top:15px;}
	.pro__info-wrap .info .vol span {font-size:16px; }
	.pro__info-wrap .info .desc {margin-top:15px;}
	.pro__info-wrap .info .desc > span {font-size:16px; padding:0 0 0 10px; margin:0 0 5px 0;;}
	.pro__info-wrap .info .desc > span::before { height:1px; width:6px; top:10px; left:0;}


	.product__pop-control {position:absolute; top:10px; left:0%; z-index:4; transform:translateY(0%);}
	.product__pop-prev,
	.product__pop-next {transform: translateY(0%); width:56px; height:56px; background-size:contain;}
	.product__pop-prev {left:10px;}
	.product__pop-next {right:10px;}

	.product__pop-prev:hover,
	.product__pop-prev:focus,
	.product__pop-next:hover,
	.product__pop-next:focus {transform: translateY(-10%);}



	.product__pop .close {width: 55px; height: 60px; left: 50%; top: 10px; margin: 0 0 0 -22px;}
	.product__pop .close span:before,
	.product__pop .close span:after { width:24px;}
}

@media only screen and (max-width: 768px) {
	.product__pop-wrap {padding:80px 0 60px 0;}

	.pro__info-wrap .image{width:100%; margin:0 0 30px 0; text-align:center;}
	.pro__info-wrap .image img {max-width:75%; display: inline-block;}
	.pro__info-wrap .info{width:100%;}



	.pro__info-wrap .info .tit {font-size:28px;}
	.pro__info-wrap .info .tit img {max-width:158px;}
	.pro__info-wrap .info .text {font-size:16px; margin-top:10px;}
	.pro__info-wrap .info .vol {line-height:30px; padding:0 20px; margin-top:15px;}
	.pro__info-wrap .info .vol span {font-size:14px; }
	.pro__info-wrap .info .desc {margin-top:15px;}
	.pro__info-wrap .info .desc > span {font-size:15px; padding:0 0 0 10px; margin:0 0 5px 0;;}
	.pro__info-wrap .info .desc > span::before { height:1px; width:5px; top:9px; left:0;}


}

@media only screen and (max-width: 480px) {
	.product__pop-wrap {padding:70px 0 40px 0;}

	.pro__info-wrap .image{margin:0 0 20px 0;}
	.pro__info-wrap .image img {max-width:90%;}

	.pro__info-wrap .info .tit {font-size:24px;}
	.pro__info-wrap .info .tit img {max-width:134px;}
	.pro__info-wrap .info .text {font-size:15px; margin-top:10px;}
	.pro__info-wrap .info .vol {line-height:30px; padding:0 20px; margin-top:15px;}
	.pro__info-wrap .info .vol span {font-size:13px; }
	.pro__info-wrap .info .desc {margin-top:15px;}
	.pro__info-wrap .info .desc > span {font-size:14px; padding:0 0 0 10px; margin:0 0 5px 0;;}
	.pro__info-wrap .info .desc > span::before { height:1px; width:5px; top:8px; left:0;}


	.product__pop-prev,
	.product__pop-next {transform: translateY(0%); width:40px; height:40px;}
	



	.product__pop .close {width: 40px; height: 44px; margin:0 0 0 -20px;}
	.product__pop .close span:before,
	.product__pop .close span:after { width:20px;}
}




.booster__header {position:fixed; top:-100%; left:0; width:100%; height:80px; z-index:10001;  transition: all 0.3s ease-in-out; transform:translateY(-100%);transition-delay:0.2s; background-color: #f3ede2;}
.booster__header.js-active {transform:translateY(0); top:0;}

.booster__header-logo {position:absolute; top:50%; left:40px;  transform:translateY(-50%);}

.product__pop-booster {position:fixed; width:100%; z-index:10000; left:0; top:-10%; height:100%; max-height:100vh; transition: all 0.3s ease-in-out; transform:translateY(-100%);}
.product__pop-booster.js-active { top:0; transform:translateY(0); min-height:320px;}
.booster-wrap {background-color:#fff; padding:120px 0 0 0; position:absolute; z-index: 2; width:100%; top:50%; left:0; transform: translate(0, -50%);max-height:100vh; overflow-y:auto; }

.product__pop-box {padding:10px;}
.product__pop-box .image{margin-top:40px;   text-align:center;}
.product__pop-box .image:first-child {margin-top:0;}
.product__pop-box .image span {border:1px solid #e1e1e1; display: inline-block;padding:6% ;box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); background-color:#fff;}



.allclose {display:block; position: absolute; right: 20px; top:50%; width: 60px; height: 66px; z-index:10002; padding:0; font-size:0;  transition: all 0.3s ease-in-out;overflow:hidden; cursor:pointer; transform:translateY(-50%);}



.allclose svg {transition:all 0.3s ease-in-out; fill:#000;}

.allclose span:before,
.allclose span:after {content:''; display:block; width:28px; height:2px; background-color:#fff; position:absolute; top:50%; left:50%;transition: all 0.3s ease-in-out;}

.allclose span:before {transform:translate(-50%, -50%) rotate(45deg);}
.allclose span:after {transform:translate(-50%, -50%) rotate(-45deg);}

.allclose:hover span:before,
.allclose:focus span:before {transform:translateX(-50%) rotate(-45deg); background-color:#fff;}
.allclose:hover span:after,
.allclose:focus span:after {transform:translateX(-50%) rotate(45deg); background-color:#fff;}
.allclose:hover svg,
.allclose:focus svg {transform:rotate(180deg);  fill:#ed761d;}



@media only screen and (max-width: 1440px) {
	.allclose {right: 20px; }
	.booster__header-logo {left:20px;}
}




@media only screen and (max-width: 1024px) {
	.booster__header {height:60px;}
	.booster__header-logo {max-width:300px;}
	.allclose {width: 40px; height: 44px;}
	.allclose span:before,
	.allclose span:after { width:22px;}
}


@media only screen and (max-width: 480px) {
	.booster__header-logo {max-width:230px;}
	.allclose {width: 40px; height: 44px;}
	.allclose span:before,
	.allclose span:after { width:20px;}
}




/*Technology*/
.main__tech {background-image:url('../images/main/bg_tech01.png'); background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}

.main__tech-wrap {padding:13% 0 10% 0; z-index: 2; position: relative;}


.main__tech-inner {margin:0 auto; max-width: 1440px; padding:0 20px; }
.main__tech-inner::after {content:''; display:block; clear:both;}
.main__tech-box {background-color:#000; padding:5.7%; max-width:700px; float:right; position:relative;  font-weight:400;}
.main__tech-box::before {content:'Technology'; font-size:82px; font-weight:500;  position:absolute; display:block; top:0; left:0; color:#000; transform: translate(-4%, -85%);}
.main__tech-title {width:70%; padding:30px 0; border-top:1px solid #3b3016; border-bottom:1px solid #3b3016; position:relative; line-height:1.3;}
.main__tech-title::before {content:''; display:block; position:absolute; top:0; left:calc(100% + 40px); width:300%; height:100%; background:#9d6f33 url('../images/main/img_tech01.png') 30px 50% no-repeat; background-size:auto;}
.main__tech-title::after {content:'';}

.main__tech-title .text {font-size:27px; font-weight: 400; color:#986a33; letter-spacing: -0.025em;}
.main__tech-title .tit {font-size:55px; font-weight: 400; color:#cb8600; letter-spacing: -0.025em; position: relative; display: inline-block;}
.main__tech-title .tit sup {font-size: 0.6em;}
.main__tech-title .tit::before,
.main__tech-title .tit::after { display:inline-block; font-family: 'GmarketSans'; width:20px; position:absolute; top:0;  }
.main__tech-title .tit::before {content:'“'; left:-25px; }
.main__tech-title .tit::after {content:'”'; right:-25px; }

.main__tech-info {line-height:1.5; font-family: 'GmarketSans'; letter-spacing: -0.025em; font-size:18px; color:#fff;}
.main__tech-info .item {margin-top:50px;}
.main__tech-info .item strong {display: block; color:#9d6f33; font-size:23px;}



.main__tech-info .mbtn {line-height:40px; height:40px; background-color:#9d6f33; display:inline-block; text-align:center; padding:0 20px 0 30px; border-radius: 40px; font-weight:400; color:#fff; margin-top:20px; position:relative; font-family: 'GmarketSans'; transition: all 0.3s ease-in-out;}
.main__tech-info .mbtn span {font-size:16px; display: inline-block;}
.main__tech-info .mbtn span::after {content:''; display: inline-block; width:20px; height:20px; vertical-align: middle; margin-left:10px; background:url('../images/main/ico_more.png') 50% 0 no-repeat;  transition: all 0.3s ease-in-out; }

.main__tech-info .mbtn:hover {background-color:#805727; transform: translateY(10px);}
.main__tech-info .mbtn:hover span::after {background-position:0 -20px;}

@media only screen and (max-width: 768px) {
	.main__tech-info .mbtn {line-height:34px; height:34px; padding:0 20px 0 25px;}
	.main__tech-info .mbtn span {font-size:14px;}
	.main__tech-info .mbtn span::after {width:18px; height:18px; margin-left:8px; background-size:18px auto;}
	.main__tech-info .mbtn:hover span::after {background-position:0 -18px;}
}




@media only screen and (max-width: 1440px) {
	.main__tech-wrap {padding:180px 0 120px 0; }

	.main__tech-box { padding:5.7%; float:right;}
	.main__tech-box::before {font-size:80px; top:0; left:0; transform: translate(-4%, -85%);}
	.main__tech-title {width:70%; padding:30px 0; }
	.main__tech-title::before {background-image:none;}
}
@media only screen and (max-width: 1280px) {

}


@media only screen and (max-width: 1024px) {
	.main__tech-wrap {padding:160px 0 100px 0; }

	.main__tech-box { padding:60px; float:right;}
	.main__tech-box::before {font-size:70px; top:0; left:0; transform: translate(-4%, -86%);}
	.main__tech-title {width:80%; padding:20px 0; }
	.main__tech-title::before {top:0; left:calc(100% + 30px);}


	.main__tech-title .text {font-size:24px; }
	.main__tech-title .tit {font-size:52px; }
	.main__tech-title .tit::before,
	.main__tech-title .tit::after { width:auto;}
	.main__tech-title .tit::before {left:-20px; }
	.main__tech-title .tit::after {right:-20px; }

	.main__tech-info {font-size:16px;}
	.main__tech-info .item {margin-top:40px;}
	.main__tech-info .item strong {font-size:20px;}
}

@media only screen and (max-width: 768px) {

	.main__tech-wrap {padding:120px 0 80px 0; }

	.main__tech-box { padding:50px; float:none; margin:0 auto;}
	.main__tech-box::before {font-size:60px; top:0; left:0; transform: translate(-4%, -85%);}
	.main__tech-title {width:90%; padding:20px 0; }
	.main__tech-title::before {top:0; left:calc(100% + 20px);}


	.main__tech-title .text {font-size:20px; }
	.main__tech-title .tit {font-size:48px; margin-top:5px;}
	.main__tech-title .tit::before {left:-20px; }
	.main__tech-title .tit::after {right:-20px; }

	.main__tech-info {font-size:15px;}
	.main__tech-info .item {margin-top:30px;}
	.main__tech-info .item strong {font-size:18px;}
	
}
@media only screen and (max-width: 640px) {
	
}

@media only screen and (max-width: 480px) {

	.main__tech-wrap {padding:100px 0 60px 0; }

	.main__tech-box { padding:40px 20px;}
	.main__tech-box::before {font-size:48px; top:0; left:0; transform: translate(-4%, -85%);}
	.main__tech-title {width:100%; padding:20px 0; text-align: center;}
	.main__tech-title::before {top:0; left:calc(100% + 0px);}


	.main__tech-title .text {font-size:16px; }
	.main__tech-title .tit {font-size:32px; margin-top:2px;}
	.main__tech-title .tit::before {left:-10px; }
	.main__tech-title .tit::after {right:-10px; }

	.main__tech-info {font-size:14px;}
	.main__tech-info .item {margin-top:25px;}
	.main__tech-info .item strong {font-size:18px;}
}



/*Title*/
.main__title {margin:0 0 4% 0; text-align:center;}
.main__title h2{font-size:60px; font-weight:500; line-height:1.3; color:#000;}
.main__title p{font-size:26px; font-weight:400; line-height:1.3; color:#a39b8f; margin-top:10px;}


@media only screen and (max-width: 1440px) {
	.main__title {margin:0 0 60px 0;}
	.main__title h2{font-size:56px;}
	.main__title p{font-size:22px; margin-top:5px;}
}

@media only screen and (max-width: 1024px) {
	.main__title {margin:0 0 40px 0;}
	.main__title h2{font-size:48px;}
	.main__title p{font-size:20px;}
}

@media only screen and (max-width: 768px) {
	.main__title h2{font-size:36px;}
	.main__title p{font-size:18px;}
}

@media only screen and (max-width: 480px) {
	
	.main__title h2{font-size:32px;}
	.main__title p{font-size:16px;}
}