/* section */
section {padding: 5vw 0;}
section .area_title {margin-bottom: 3vw;z-index: 3;display: block;}
section .area_title .other_txt {font-size: max(4.5* (1vw + 1vh) / 2, 40px);position: relative;font-family: "Lato", sans-serif;}
section .area_title .other_txt:before{content:'';width: 16px;height: 16px;position: absolute;background: var(--primary);border-radius: 50%;box-shadow: 0 16px var(--secondary);left: -40px;top: 30px;}
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: 25px;letter-spacing: .2rem;font-weight: 500;color: var(--info);margin: 0;}
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); }

/* service_area */
#service_area {position: relative;}
#service_area:before{content:url(/images/00/img-circle1.png);position: absolute;left: 100px;bottom: 0;animation-name: circle2;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes circle2{0%{top:2%}100%{top:7%}}
#service_area:after{content:'';background-repeat: no-repeat;background-position: 5% 50%;background-size: cover;background-image: url(/images/00/aboutbottom.png);width: 100%;position: absolute;bottom: 0;height: 666px;z-index: -1;}
#service_area .photoBox{position:absolute;width: 22%;height: 63%;right: 0;}
#service_area .photoBox img{animation:moveObject 100s linear infinite;height:100%;object-fit:cover}
@keyframes moveObject{0%{object-position:0% 50%}50%{object-position:100% 50%}100%{object-position:0% 50%}}
#service_area .workframe{width: min(90%, 1400px);margin: 0;display: grid;align-items: center;justify-content: space-between;grid-template-columns: 60% 40%;}
#service_area .area_title {margin-left: -1vw;}
#service_area .area_title p {letter-spacing: 0;font-weight: 300;font-size: 16px;line-height: 2.2;margin: 35px 0;}
#service_area .custom_list li.slick-current { -webkit-transform: scale(1); transform: scale(1); }
#service_area .arrow_btns_box .arrow { border: 1px var(--dark) solid; box-shadow: 0 0 5px rgb(125 125 125 / 50%); bottom: 240px; }
#service_area .arrow_btns_box .arrow.prev { left: calc((100% - 520px) / 2); }
#service_area .arrow_btns_box .arrow.next { right: calc((100% - 520px) / 2); }

/* product_area */
#product_area {padding:3vw 0;}
#product_area .video-bg{width:100%;height: 100%;top: 0;z-index: -1;left: 0;overflow: hidden;}
#product_area .video-bg video{ width:100%}
#product_area .top_bg {width: 100%;top: 0;left: 0;height: 100%;background: #042762;opacity: .7;z-index: 0;}
#product_area .workframe {width: 93%;margin: 0 0 0 auto;display: grid;grid-template-columns: 25% 70%;align-items: center;justify-content: space-between;}
#product_area .area_title .other_txt, #product_area .area_title h3{color:#fff;}
#product_area .area_title{margin:0}
#product_area .area_title .other_txt:before{box-shadow: 0 16px #fff;left: -40px;top: 30px;}
#product_area .info_box h3{height:auto;font-size: 20px;margin-top: 30px;letter-spacing: 0;font-weight: 400;}
#product_area .info_box p{height:auto;font-size: 15px;letter-spacing: 0;font-weight: 300;-webkit-line-clamp: 2;color: #fff;margin: 10px 0 45px;}
#product_area .btn{display:flex;padding: 0;position: absolute;bottom: 0;left: 0;}
#product_area .btn a:not(:last-child){margin-right:10px}
#productlist li a{margin-left: 40%;}
#product_area .more_btn, #product_area .more_btn b{border-color:rgb(255 255 255 / 40%)}
#product_area #product_list li >div {margin: 0 10px;}
#product_area #product_list li img {aspect-ratio: 5 / 4;}
#product_area #product_list li .info_box {display: none;}
#product_area #product_list li .info_box p { font-weight: 300; font-size: 15px; }
#product_area #product_list li .info_box p.old { text-decoration: line-through; }
#product_area #product_list li .info_box h3 {width: 100%;height: auto;font-weight: 500;font-size: 19px;color: #fff;}


/* discount_area */
#discount_area {padding-top: 0;margin-top: -2vw;padding-bottom: 3vw;}
#discount_area .workframe {width: 90%;margin: 0;display: grid;grid-template-columns: 40% 52%;justify-content: space-between;}
#discount_area .top_bg img{width:100%;height: 100%;object-fit: cover;}
#discount_area .area_title .more_btn{position:absolute;right: 0;bottom: 0;}
#discount_area .diamond_svg { top: -60px; z-index: 5; }
#discount_area #discount_list .info_box a{position:relative;z-index: 10;background: rgb(191 191 191 / 20%);color: #676767;font-size: 16px;padding: 7px 20px;}
#discount_area #discount_list .info_box h3 {height: auto;font-size: 24px;font-weight: 400;margin: 10px 0;}
#discount_area #discount_list .info_box p {font-size: 17px;color: #949393;-webkit-line-clamp: 2;height: 61px;}
#discount_area #discount_list .info_box .more { padding: 5px; border-radius: 20px; }
#discount_area #picture_box >div {border-top: 1px solid #ddd;padding: 30px 0;display: grid;grid-template-columns: 145px 1fr 145px;gap: 0 25px;align-items: center;}
#discount_area #picture_box >div:last-child{border-bottom:1px solid #ddd}
#discount_area #picture_box >div:before{content:'';position: absolute;top: 0;width: 0;height: 2px;background: var(--secondary);}
#discount_area #picture_box >div:hover:before{width:100%}
#discount_area #picture_box >div:hover .date b{color:var(--secondary)}
#discount_area #picture_box >div:hover .info_box a{background:var(--secondary);color:#fff}
#discount_area #picture_box >div:hover >span{background:var(--secondary);}
#discount_area #picture_box >div:hover >span svg{fill:#fff}
#discount_area #picture_box >div >span{background:#eee;width: 50px;aspect-ratio: 1 / 1;display: inline-flex;align-items: center;justify-content: center;border-radius: 50px;margin-left: 50px;}
#discount_area #picture_box >div >span svg{width:25px;height: 25px;fill: #797676;}
#discount_area #picture_box img { width: 100%; }
#discount_area #freight_box img { width: 100%; height: 100%; border-radius: 30px; }
#discount_area .date {display:flex;flex-direction: column;align-items: center;}
#discount_area .date b{font-size: 58px;font-family: "Lato", sans-serif;color: #676767;}
#discount_area .date span{font-family: "Lato", sans-serif;font-size: 17px;color: #676767;}

/* book_area */
#book_area:after{content:url(/images/00/img-circle1.png);position: absolute;right: 40px;bottom: 0;animation-name: circle;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes circle{0%{bottom:0}100%{bottom:7%}}
#book_area .workframe{width: min(90%, 1300px);}
#book_area .area_title{padding: 0 20px;}
#book_area .more_btn{position:absolute;bottom: 0;right: 0;}
#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 #book_list li >div .img{}
#book_area #book_box #book_list li >div .img a{bottom: 15px;right: 15px;background: var(--secondary);color: var(--light);padding: 15px 30px;border-radius: 50px;font-size: 15px;letter-spacing: 1px;}
#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 li >div {margin: 0 20px;}
#book_area #book_box #book_list li >div img {width: 100%;aspect-ratio: 3.8 / 3;object-fit: cover;}
#book_area #book_box #book_list li >div h3 {height: 70px;font-weight: 400;font-size: 22px;-webkit-line-clamp: 2;margin: 15px 0 0;}
#book_area #book_box #book_list li >div p {height: auto;font-weight: 300;font-size: 16px;-webkit-line-clamp: 2;margin: 15px 0 0;color: #545451;}

/* 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 (max-width: 1680px) {
	#service_area .photoBox{width: 11%;}
}
@media screen and (max-width: 1500px){
	#product_area .workframe{grid-template-columns: 30% 65%;}
	#book_area:after, #service_area .photoBox{display:none;}
}
@media screen and (max-width: 1400px){
	#discount_area .workframe{width:95%;}
	#service_area .area_title{margin:0;}
	#service_area:after{height: 500px;}
}
@media screen and (max-width: 1160px){
	#discount_area .workframe{grid-template-columns: 1fr;width: 100%;gap: 30px;}
	#discount_area .rightBox{width: 85%;margin: 0 auto;}
	#product_area #product_list li >div{margin:0 20px;}
	#product_area .video-bg video{width:auto;height: 100%;}
	#product_area #product_list li .info_box{display: block;}
	#product_area .btn{left: unset;right:0;}
	#product_area .workframe{display: block;width: 80%;margin: 0 auto;}
	#product_area .area_title{margin-bottom: 5vw;}
	#productlist{display:none;}
	#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; }
}
@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){
	section {padding: 10vw 0;}
	#service_area .area_title{width:90%;margin: 0 auto;}
	#service_area:after{height: 430px;bottom: unset;top: 20vw;}
	#service_area .workframe{grid-template-columns:1fr;width: 100%;}
	#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){
	#book_area { flex-wrap: wrap; }
	#book_area .area_title { width: 100%; }
}
@media screen and (max-width: 640px){
	#discount_area #discount_list .info_box h3{font-size:22pxfooter .top_box #f_logo}
	#discount_area {padding-bottom: 9vw;}
	#service_area .area_title{width: 80%;margin: 20px auto 0;}
	#service_area:after{height: 260px;}
	#product_area .btn{position:relative;margin-top: 30px;}
	#book_area .area_title{margin-bottom: 45px;}
	#book_area .more_btn{position: relative;margin-top: 30px;}
	section .area_title .other_txt:before, #product_area .area_title .other_txt:before{top: 20px;left: -26px;}
	#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; }
	#product_area .info_box p{margin-bottom:15px}
}

@media screen and (max-width: 550px){
	#discount_area #discount_list .info_box a{position:absolute;font-size: 14px;top: 25px;right: 0;}
	#discount_area #picture_box >div >span{display:none;}
	#discount_area #discount_list .info_box{padding:0;margin-top: 15px;}
	#discount_area #picture_box >div{display:block;}
	#discount_area .date b{font-size: 17px;margin-right: 5px;}
	#discount_area .date{display:flex;flex-direction: row;}
	#discount_area .area_title {padding: 0 20px;}
	#discount_area .rightBox{margin-top:20px;}
	#discount_area .workframe{display:block;}
	#discount_area .area_title .more_btn{display:none;}
	#service_area .area_title .other_txt{line-height:1.3}
	#service_area:before{zoom: 70%;}
	#product_area{padding: 9vw 0;}
	section .area_title h3{font-size:20px;}
	#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 .workframe { flex-wrap: wrap; }
	#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 {margin: 30px 0 0;}
	#book_area #book_box #book_list li >div .img a{padding: 8px 15px;}
}