/* wrap */
#wrap{background-image: url(/images/00/bg.jpg);background-repeat: repeat;background-position: 50% 50%;background-size: 100%;}

/* section */
section {padding: 5vw 0;}
section .area_title .other_txt { font-size: 72px; -webkit-transform: rotate(-11deg) translate(60%, .8em); transform: rotate(-11deg) translate(60%, .8em); }
section .area_title h2 { border-bottom: 1px var(--primary) solid; line-height: 1; letter-spacing: .4rem; font-weight: 300; font-size: 90px; }
section .area_title h3 { font-size: 32px; letter-spacing: .4rem; font-weight: 400; }
section .area_title p { letter-spacing: .2rem; font-weight: 300; font-size: 18px; }
section .arrow_btns_box .arrow { width: 40px; height: 40px; border-radius: 50%; }
section .arrow_btns_box .arrow svg { width: 100%; height: 100%; -webkit-transform: scale(.4); transform: scale(.4); }
section .arrow_btns_box .arrow.next { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
section .title_box{padding-bottom:3vw;text-align:center;display: flex;flex-direction: column;align-items: center;}
section .title_box h2{color:#9c8b79;font-size: 17px;font-family: "Lato", sans-serif;letter-spacing: 1px;font-weight: 400;text-transform: uppercase;}
section .title_box h3{font-size: 40px;font-weight: 300;display: inline-flex;align-items: center;justify-content: center;}
section .title_box h3:before{content:'';width: 1px;height: 50%;background: #515050;position: absolute;left: -40px;transform: skewX(40deg);}
section .title_box h3:after{content:'';width: 1px;height: 50%;background: #515050;position: absolute;right: -40px;transform: skewX(-40deg);}

/* service_area */
#service_area {padding-top: 0;margin-top: -65px;}
#service_area .workframe{text-align:center;width: 1380px;}
#service_area .dc-circle{animation: 12s linear infinite rotation;display: inline-block;}
@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}
#service_area .topBox{margin: 30px 0 0;}
#service_area .topBox *{ text-align: center;}
#service_area .topBox h3{font-size:32px;font-weight: 400;}
#service_area .topBox p{font-size:14px;font-family: "Archivo", sans-serif;text-transform: uppercase;margin-top: 10px;}
#service_area .area_title{flex-wrap: wrap;justify-content: space-between;align-items: center;margin-top: -40px;}
#service_area .area_title .photo{width:45%}
#service_area .area_title .infoo{width:50%;}
#service_area .area_title .infoo p{color:#353535;letter-spacing: 0;font-size: 16px;line-height: 230%;font-weight: 400;margin-bottom: 30px;}
#service_area .more_btn {padding: 10px 10px 10px 55px;border-radius: 50px;border: 1px solid #d9d9d9;}
#service_area .more_btn b{background: var(--primary);width: 45px;height: 45px;display: inline-flex;justify-content: center;align-items: center;border-radius: 50px;margin-left: 35px;}
#service_area .more_btn b svg{width: 15px;height: 15px;fill: var(--light);}
#service_area .more_btn:hover{background: var(--primary);color: var(--light);border-color: var(--primary);}
#service_area .more_btn:hover b{margin-right: 20px;margin-left: 15px;background: var(--primary);}

/* product_area */
#product_area {padding-bottom: 60px;background-repeat: no-repeat;background-position: 50% bottom;background-size: cover;}
#product_area .workframe{width: 1600px;}
#product_area ul {overflow: hidden;}
#product_area ul button { display: none; }
.slick-prev { width: auto; }
.slick-prev, .slick-next { position: absolute; margin-top: -10px; padding: 0; color: transparent; border: none; outline: none; background: transparent; line-height: 0; font-size: 0; cursor: pointer; top: -110px; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); }
#product_area ul li {position: relative;transition: all linear .3s;-webkit-animation: anim-scale .5s ease-out;animation: anim-scale .5s ease-out;}
#product_area ul li .bookStyle:before{content:url(/images/00/img-head.png);position: absolute;z-index: 1;right: -290px;top: 8%;animation-name: head;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;opacity: 0;transition: opacity .5s, transform 1s;}
#product_area ul li.slick-center .bookStyle:before{opacity:1;right: -170px;top: 8%;}
@keyframes head{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}
#product_area ul li .bookStyle {margin: 90px auto 0;position: relative;-webkit-transition-delay:0s;transition-delay:0s;display: flex;flex-direction: column;align-items: center;padding: 0 10px;}
#product_area ul li .bookStyle a{z-index:2}
#product_area ul li .info {padding-bottom: 0;-webkit-transition: opacity 0.15s,-webkit-transform 0.15s;transition: opacity 0.15s,transform 0.15s;display: flex;flex-direction: column;align-items: center;position: relative;}
#product_area ul li .info h3 {overflow: hidden;padding: 0;font-weight: 400;text-overflow: ellipsis;white-space: nowrap;color: #616161;}
#product_area ul li .info h3 {letter-spacing: 4px;text-align: center;-ms-writing-mode: tb-lr;writing-mode: vertical-lr;margin-bottom: 30px;display: flex;align-items: center;}
#product_area ul li .info h3 font {margin: 15px 0;display: inline-block;letter-spacing: 4.5px;font-weight: 500;font-size: 22px;}
#product_area ul li .info h3 span {display: inline-block;font-weight: 500;font-size: 22px;margin-left: 4px;}
#product_area ul li .info p {margin: -50px 90px 20px;display: block;text-align: center;letter-spacing: .8px;font-weight: 400;font-size: 15px;color: #3d3a3a;opacity: 0;-webkit-transition-delay:0s;transition-delay:0s;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
#product_area ul li.slick-center .info p {margin: 0 90px 20px;opacity: 1;-webkit-transition-delay:.5s;transition-delay:.5s;}
#product_area ul li.slick-center .bookStyle {margin: 0;-webkit-transition-delay:.5s;transition-delay:.5s;}
#product_area .btn{position: relative;display: block;}
#product_area .btn a {position: absolute;width: 26px;height: 26px;border: solid #363636;display: block;top: calc(100% - 290px);z-index: 20;}
#product_area .btn a#product_prev {border-width: 1px 0 0 1px;transform: rotate(-45deg);left: -20px;}
#product_area .btn a#product_next {border-width: 1px 1px 0 0;transform: rotate(45deg);right: -20px;}

/* news_area */
#news_area .workframe{width:1100px;}
#news_area li .row{margin: 15px 20px;}
#news_area li .imgbox{position:relative;}
#news_area li .imgbox b{position:absolute;display: flex;flex-direction: column;align-items: center;width: 77px;height: 77px;right: -10px;top: -10px;background: var(--primary);justify-content: center;font-size: 14px;color: #fff;font-family: "Lato", sans-serif;font-weight: 400;}
#news_area li .imgbox b span{display:block;color: #fff;font-size: 27px;line-height: 100%;font-family: "Lato", sans-serif;font-weight: 600;}
#news_area li .info_box{margin: 15px;}
#news_area li .info_box h3{font-size:19px;height: auto;}
#news_area li .info_box .bbox{margin-top:10px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#news_area li .info_box .bbox p{color: #757475;-webkit-line-clamp: 2;font-size: 14px;height: 50px;width: calc(100% - 60px);line-height: 190%;}
#news_area li .info_box .bbox b{width: 50px;height: 50px;display: flex;background: var(--secondary);border-radius: 50px;align-items: center;justify-content: center;}
#news_area li:hover .info_box .bbox b{margin-right:-10px;}
#news_area li .info_box .bbox b svg{fill: #fff;width: 20px;height: 20px;}

/* custom_area */
#custom_area ul{display:flex;flex-wrap: wrap;justify-content: center;}
#custom_area ul li >div {margin: 0 20px;box-shadow: 0 0 10px rgb(0 0 0 / 15%);padding: 40px 50px;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;display: flex;align-items: center;justify-content: center;filter: saturate(70%);}
#custom_area ul li >div a{z-index:5;}
#custom_area ul li >div:before{content:'';width: calc(100% - 30px);height: calc(100% - 30px);position: absolute;background: #000;border: 1px solid #ebebeb;opacity: .4;z-index: 1;}
#custom_area ul li .clip { width: 250px; height: 250px; -webkit-clip-path: url(#clip_custom); clip-path: url(#clip_custom); }
#custom_area ul li h3 {display: flex;align-items: center;font-size: 25px;font-weight: 400;color: #fff;position: relative;z-index: 2;}
#custom_area ul li article { font-weight: 300; font-size: 14px; }
#custom_area li b{width:50px;height: 50px;display: flex;background: #efefef;border-radius: 50px;align-items: center;justify-content: center;margin-left: 100px;}
#custom_area li:hover b{margin-left: 80px;}
#custom_area li svg{width:17px;height: 17px;fill: #333131;}

/* book_area */
#book_area { margin-bottom: -1px; padding: 0; border-bottom: 0; }
#book_area .area_title { padding: 5vw 3vw; width: 390px; background: no-repeat right 50% / cover; z-index: 3; }
#book_area .area_title .other_txt { -webkit-transform: rotate(-11deg) translate(101%, 1.2em); transform: rotate(-11deg) translate(101%, 1.2em); }
#book_area .area_title h2 { border-color: var(--light); }
#book_area .area_title p { margin: 0 40px 80px 0; }
#book_area .area_title .more_btn font { border-right-color: #5b616b; color: #5b616b; }
#book_area .area_title .more_btn svg { stroke: #394250; }
#book_area #book_box { width: 1%; flex: 1 auto; -webkit-transform: translateX(5vw); transform: translateX(5vw); }
#book_area #book_box .top_tit { text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 1px #dbdbdb; text-stroke: 1px #6b6b6b; line-height: 1; letter-spacing: 3rem; font-size: 10vmax; color: transparent; opacity: .5; -webkit-transform: translate(-7vw, -1vmax); transform: translate(-7vw, -1vmax); -webkit-animation: book_element 2.5s linear infinite; animation: book_element 2.5s linear infinite; }
#book_area #book_box #book_list { margin: 7vmax 0 4vw; }
#book_area #book_box #book_list li >div { margin: 0 15px; }
#book_area #book_box #book_list li >div img { width: 100%; border-radius: 20px; }
#book_area #book_box #book_list li >div h3 { height: 34px; font-weight: 300; font-size: 20px; }

/* animation */
@-webkit-keyframes product_bg { 0% , 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-10%); } }
@keyframes product_bg { 0% , 100% { transform: translateY(0); } 50% { transform: translateY(-10%); } }
@-webkit-keyframes book_element { 0% , 100% { -webkit-transform: translate(-7vw, -1vmax); } 50% { -webkit-transform: translate(-6vw, -1vmax); } }
@keyframes book_element { 0% , 100% { transform: translate(-7vw, -1vmax); } 50% { transform: translate(-6vw, -1vmax); } }

@media screen and (min-width: 1025px) {
	#wrap{background-attachment: fixed;}
}
@media screen and (max-width: 1680px){
	#product_area .workframe{width:80%;}
}
@media screen and (max-width: 1500px){
	#product_area ul li .info p, #product_area ul li.slick-center .info p{margin-left:60px;margin-right:60px;}
	#product_area ul li:before{zoom: 70%;}
	#product_area ul li.slick-center:before{top:18%}
	#service_area .workframe {width: 75%;}
	#service_area .area_title{margin-top:0;}
	section .area_title .other_txt { font-size: 4vmax; }
	section .area_title h2 { font-size: 4.2vmax; }
	section .area_title h3 { font-size: 2vmax; }
}
@media screen and (max-width: 1366px){
	#product_area .workframe{width:90%;}
}
@media screen and (max-width: 1280px){
	#custom_area ul li >div{margin: 0 5px;}
}
@media screen and (max-width: 1160px){
	#custom_area li b, #custom_area li:hover b{margin-left: 40px;}
	#custom_area ul li h3{font-size:20px;}
	#service_area .area_title{margin-top:50px;}
	#service_area .workframe, #news_area .workframe {width: 90%;}
	section .area_title h2 { font-size: 6vmax; }
	section .area_title .other_txt { font-size: 5.5vmax; }
	section .area_title h3 { font-size: 3vmax; }
	#discount_area { padding-bottom: 5vw; }
	#discount_area #discount_list { grid-template-rows: 55% 45%; }
	#discount_area #discount_list .info_box { padding: 20px; }
	#discount_area #slogan_box { padding-bottom: 30px; }
	#discount_area #slogan_box:before { display: none; }
	#discount_area #slogan_box .row { padding-left: 80px; }
	#book_area .area_title { width: 400px; }
}


@media screen and (max-width: 1024px){
	#discount_area .bgs_box >div:nth-child(1) img { width: 19vw; }
	#discount_area .bgs_box >div:nth-child(2) img { width: 8vw; }
	#discount_area .bgs_box >div:nth-child(3) img { width: 9vw; bottom: 0; }
	#discount_area .bgs_box >div:nth-child(4) img { width: 40vw; }
	#discount_area .diamond_svg { width: 6vw; top: -6vw; left: 7vw; }
}
@media screen and (max-width: 980px){
	#service_area .area_title .infoo{width:100%;margin-top: 30px;}
	#service_area .area_title .photo{width:100%;}
	#product_area .btn{display: none;}
	#service_area .custom_list li img { width: 45vw; height: 45vw; }
	#service_area .arrow_btns_box .arrow { bottom: 20vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 25vw; }
	#service_area .arrow_btns_box .arrow.next { right: 25vw; }
	#discount_area #discount_list { grid-template-columns: 1fr; grid-template-rows: 400px 250px; grid-gap: 30px 50px; align-content: center; }
	#discount_area #picture_box { grid-row-end: inherit; }
	#discount_area #picture_box img { height: 400px; }
	#discount_area #slogan_box , #discount_area .diamond_svg { display: none; }
}
@media screen and (max-width: 768px){
	#custom_area li{width: 80%;margin: 15px 0;}
	#book_area { flex-wrap: wrap; }
	#book_area .area_title { width: 100%; }
}
@media screen and (max-width: 640px){
	#service_area .topBox h3{font-size:22px}
	section {padding: 10vw 0;}
	#service_area .custom_list li img { width: 60vw; height: 60vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 15vw; }
	#service_area .arrow_btns_box .arrow.next { right: 15vw; }
	#service_area .arrow_btns_box .arrow { bottom: 30vw; }
}
@media screen and (max-width: 550px){
	#wrap{background-size:300%;}
	section .title_box h3{font-size:35px;}
	section .area_title .more_btn { padding-left: 40px; }
	#service_area .custom_list li img { width: 80vw; height: 80vw; }
	#service_area .custom_list li .info_box h3 { height: 1.5em; font-size: 7vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 5vw; }
	#service_area .arrow_btns_box .arrow.next { right: 5vw; }
	#product_area .title_box {margin-bottom: 40px;}
	#product_area .area_title.left { width: 100%; }
	#product_area .area_title.arrow_btns_box { margin-bottom: 1rem; width: 100%; justify-content: end; }
	#product_area #product_list li >div { padding: 0; }
	#book_area #book_box #book_list li >div img { width: 65vw; }
}