/* section */
section { padding: 5vw 0 3vw; border-bottom: 1px var(--light_gary) solid; }
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 .area_title .more_btn { padding: 11px 30px 13px 60px; line-height: 1; border-radius: 30px; }
section .area_title .more_btn font { border-right: 1px #fff solid; line-height: 1; font-size: 15px; color: #fff; }
section .area_title .more_btn svg { width: 12px; height: 12px; fill: none; stroke: #fff; }
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 { padding-top: 8vw; background: no-repeat 50% -1px / cover; }
#service_area .area_title { margin-bottom: 4vw; }
#service_area .custom_list li { text-align: center; -webkit-transform: scale(.65); transform: scale(.65); }
#service_area .custom_list li >div { border-radius: 10%; }
#service_area .custom_list li img { width: 480px; height: 480px; }
#service_area .custom_list li .info_box { padding: 10px 20px; width: 100%; background: rgb(255 255 255 / 80%); bottom: 10%; left: 0; }
#service_area .custom_list li .info_box h3 { height: 39px; line-height: 1.3; letter-spacing: .2rem; font-weight: 400; font-size: 30px; }
#service_area .custom_list li .info_box p { height: 24px; font-weight: 300; font-size: 14px; }
#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-bottom: 60px; }
#product_area .top_bg { width: 246px; height: 451px; background: no-repeat 0; top: -7vw; left: 0; -webkit-animation: product_bg 3s linear infinite; animation: product_bg 3s linear infinite; }
#product_area .area_title.left { flex: 1 auto; width: 1%; }
#product_area #product_list .slick-list { overflow: visible; margin-top: 30px; }
#product_area #product_list li { opacity: .5; }
#product_area #product_list li >div { margin: 30px; filter: drop-shadow(-1px 0 10px rgba(0, 0, 0, .2)); }
#product_area #product_list li img { border-radius: 50% 50% 0 0; border: 13px #fff solid; }
#product_area #product_list li .info_box { padding: 0 10px; background: #fff; border: 13px #fff solid; }
#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: 39px; border-bottom: 1px #a5a5a5 solid; font-weight: 500; font-size: 19px; }
#product_area #product_list li .slick-track { padding-top: 30px; }
#product_area #product_list li.slick-active { opacity: 1; }
#product_area #product_list li.slick-current { filter: drop-shadow(-1px 0 20px rgba(0, 0, 0, .2)); -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 1; }
#product_area #product_list .slick-dots { bottom: -20px; }
#product_area #product_list .slick-dots li button { width: 10px; height: 10px; background: var(--info); border-radius: 50%; }
#product_area #product_list .slick-dots li button:before { content: ""; }

/* discount_area */
#discount_area { border-bottom: 0; }
#discount_area .bgs_box >div:nth-child(2) { z-index: 2; }
#discount_area .bgs_box >div:nth-child(3) { z-index: 3; }
#discount_area .bgs_box >div:nth-child(1) img { top: 6%; left: -5%; }
#discount_area .bgs_box >div:nth-child(2) img { top: 5%; right: 5%; }
#discount_area .bgs_box >div:nth-child(3) img { top: auto; right: -2%; bottom: 20%; }
#discount_area .bgs_box >div:nth-child(4) img { top: 8%; right: -5%; }
#discount_area .workframe { z-index: 10; }
#discount_area .area_title .other_txt { -webkit-transform: rotate(-11deg) translate(131%, 1em); transform: rotate(-11deg) translate(131%, 1em); }
#discount_area #discount_list { margin-top: 4vw; grid-template-columns: 1fr 43%; grid-template-rows: repeat(2, 1fr); grid-gap: 0 50px; }
#discount_area .diamond_svg { top: -60px; z-index: 5; }
#discount_area #discount_list .info_box { padding: 30px 20px; width: 240px; background: rgb(255 255 255 / 70%); bottom: 20%; left: 5%; }
#discount_area #discount_list .info_box h3 { height: 42px; font-size: 25px; }
#discount_area #discount_list .info_box p { font-size: 14px; }
#discount_area #discount_list .info_box .more { padding: 5px; border-radius: 20px; }
#discount_area #picture_box { grid-row-start: 1; grid-row-end: 3; }
#discount_area #picture_box >div { border-radius: 30px; }
#discount_area #picture_box img { width: 100%; }
#discount_area #freight_box img { width: 100%; height: 100%; border-radius: 30px; }
#discount_area #slogan_box { padding-bottom: 40px; }
#discount_area #slogan_box:before { position: absolute; width: 65%; height: 1.5px; background: var(--primary); display: block; top: 23%; left: -70px; content: ""; opacity: .5; }
#discount_area #slogan_box .row { padding-left: 130px; background: url(/images/00/img_dis_sub_txt_bg.png) no-repeat 0 50%; }
#discount_area #slogan_box p { letter-spacing: .2rem; font-weight: 300; font-size: 28px; }
#discount_area #slogan_box article { width: 300px; font-weight: 300; font-size: 17px; }

/* 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: 1501px) {
	#book_area .area_title { padding: 5vw 40px 6vw calc((100% - 1440px) / 2); width: 650px; }
}
@media screen and (max-width: 1500px){
	#service_area .workframe { width: 100vw; }
	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: 1160px){
	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 .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){
	#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){
	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 .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 20px; }
	#book_area #book_box #book_list li >div img { width: 65vw; }
}