/* wrap */
#wrap{position:relative;}
#wrap:before{content:'';position: absolute;width: 480px;height: 110px;background: var(--primary);border-radius: 0 0 109px 0;}

/* section */
section {padding: 5vw 0;}
section.section_pad {padding: 60px 0;}
section >* { z-index: 3; }
section .title_box { margin-bottom: 40px; }
section .title_box .area_title {font-weight: 400;font-size: 50px;color: #222121;line-height: 130%;}
section .title_box .sub_title { font-weight: 300; font-size: 23px; }

/* bg_box */
.bg_box { width: 100%; height: 100%; background: no-repeat 50% / cover; background-attachment: fixed; opacity: .3; top: 0; left: 0; }
.bg_box:before { width: 100%; height: 100%; display: block; background: rgba(var(--primary-rgb), .2); content: ""; }
.bg_box.white:before { background: rgba(var(--white-rgb), .2); }

/* about_area */
#about_area{background: var(--secondary);}
#about_area .workframe{width: 92%;margin: 0 0 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#about_area .track{width:100vw;max-width:100%;height:210px;overflow:hidden;white-space:nowrap}
#about_area .track p{font-weight:600;font-size: 120px;margin:0;text-transform:uppercase;letter-spacing:2px;line-height:1;will-change:transform;animation: marquee 20s linear infinite;color: #282727;font-family: "Days One", sans-serif;display: flex;align-items: center;}
#about_area .track p img{margin-left: 180px;margin-right: 80px;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
#about_area .info_box{margin:0;width: 30%;}
#about_area .info_box .tt h3{font-size: 50px;line-height: 130%;font-weight: 400;}
#about_area .info_box .tt p{margin: 85px 0;font-size: 18px;font-weight: 200;}
#about_area .img_box{width: 75%;margin-left: 0;margin-right: -10%;}
#about_area .img_box .img_scale {overflow:hidden;margin: 0 20px;height: 640px;border-radius: 70px;}
#about_area .img_box .img_scale img{height: 100%;}

/* product_area */
#product_area {padding-top:0;}
#product_area .title_box .area_title{text-align:left;}
#product_list li{margin: 10px 25px 40px;box-shadow: 15px 10px 15px 5px #f7f7f7;border: 10px solid #f0f0f0;border-radius: 40px;padding: 20px 0;}
#product_list li:hover{box-shadow:none;border-color:var(--primary)}
#product_list li .info_box{display: flex;flex-direction: column;align-items: center;}
#product_list li .info_box h3{color: var(--white);height: auto;background: var(--primary);font-size: 18px;padding: 8px 25px;border-radius: 50px;font-weight: 400;}
#product_list li .info_box img{background-size:contain;margin: 20px 0;}
#product_list li .info_box article{border-top:1px solid #ddd;width: 100%;height: auto;text-align: center;padding-top: 20px;color: #222121;font-size: 14px;}


/* news_area */
#news_area .workframe{display:flex;flex-wrap: wrap;justify-content: space-between;width: 1100px;margin: 0 15% 0 auto;}
#news_area .title_box{width:20%;}
#news_area .list_box{width: 65%;}
#news_area .list_box li{border-bottom:1px solid #ededed}
#news_area .list_box li:first-child{border-top:1px solid #ededed}
#news_area .list_box .info_box {padding: 40px 0;display: flex;flex-direction: column;justify-content: center;}
#news_area .list_box .info_box p a { margin-right: 10px; max-width: calc(100% - 100px); font-weight: 400; z-index: 2; }
#news_area .list_box .info_box p .time {width: 90px;font-weight: 400;font-size: 15px;color: #222121;text-align: left;}
#news_area .list_box .info_box h3 {height: auto;font-size: 16px;color: #222121;width: 90%;margin-top: 5px;}
#news_area .list_box .info_box b{background: var(--primary);width: 45px;height: 45px;display: inline-flex;justify-content: center;align-items: center;border-radius: 50px;position: absolute;right: 0;}
#news_area .list_box li:hover .info_box b{right:10px;}
#news_area .list_box .info_box b svg{width: 15px;height: 15px;fill: var(--white);}

/* book_area */
#book_area .list_box img { height: 450px; }
#book_area .list_box .img_box { border: var(--white) solid; border-width: 0 1px 1px 0; }
#book_area .list_box .img_box:before , #book_area .list_box .img_box:after { position: absolute; width: 100%; height: 100%; background: var(--white); z-index: 9; opacity: .4; content: ""; }
#book_area .list_box .img_box:after { right: 0; bottom: 0; }
#book_area .list_box .atag_item { z-index: 10; }
#book_area .list_box .badge { margin: auto; padding: 10px 20px; max-width: calc(80% - 40px); height: 34px; line-height: 36px; font-size: 20px; }

/* youtube_box */
#youtube_box { min-height: 1px; padding-bottom: 30%; }
#youtube_box a { position: absolute; background: var(--white); display: flex; top: 50%; left: 50%; z-index: 99; }
#youtube_box a i { margin: auto; font-size: 30px; color: var(--primary); }
#youtube_box iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; }

/* custom_area */
#custom_area {margin: 0;padding: 3vw 0;}
#custom_area:before{content:'';width: 100%;height: 1px;position: absolute;top: 40%;left: 0;background: #dedede;}
#custom_area .workframe, #product_area .workframe{width: var(--width-xl);}
#custom_box li .row {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
#custom_box li .img{width: 60%;height: 530px;border-radius: 70px;overflow: hidden;}
#custom_box li .img img{height:100%;width: 100%;object-fit: cover;}
#custom_box li .tt{width: 35%;}
#custom_box li .tt h2 {font-size: 35px;line-height: 140%;font-weight: 400;height: 150px;overflow: hidden;}
#custom_box li .tt article {margin: 60px 0 60px;line-height: 170%;font-size: 16px;font-weight: 200;}
#custom_box .slick-prev{left: -105px;top: 35%;}
#custom_box .slick-prev:before{content:url(/images/40/arrow-left.png);opacity: 1;display: block;width: 52px;height: 52px;}
#custom_box .slick-next{right: -105px;top: 35%;}
#custom_box .slick-next:before{content:url(/images/40/arrow-right.png);opacity: 1;display: block;width: 52px;height: 52px;}

@-webkit-keyframes spineer { 0% { -webkit-box-shadow: 0 0 0 0 var(--info); } 70% { -webkit-box-shadow: 0 0 0 20px transparent; } 100%{ -webkit-box-shadow: 0 0 0 0 transparent; } }
@keyframes spineer { 0% { box-shadow: 0 0 0 0 var(--info); } 70% { box-shadow: 0 0 0 20px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }

@media screen and (min-width: 1281px){
	#book_area .list_box li:hover .badge { background: var(--primary); color: var(--white); }
}
@media screen and (max-width: 1680px){
	#wrap:before{width: 290px;}
}
@media screen and (max-width: 1440px){
	#wrap:before{height: 50px;}
	#about_area .info_box .tt p{margin: 55px 0;}
}
@media screen and (max-width: 1280px){
	#news_area .workframe{width: 80%;margin: 0 auto;}
	#about_area .workframe{width:95%;}
	#custom_area .workframe, #product_area .workframe{width:90%;}
}
@media screen and (max-width: 1024px){
	#about_area .workframe{width: 100%;}
	#about_area .info_box{width:90%;margin: 0 auto 30px;}
	#about_area .img_box{width:100%;margin: 0;}
	#about_area .img_box .img_scale{height: 400px;}
	#custom_area:before{top: 28%;}
}
@media screen and (max-width: 768px){
	#about_area .img_box .img_scale{height: 330px;border-radius: 35px;}
	#about_area .info_box .tt p{margin: 30px 0 50px;}
	#about_area .track p img{width: 130px;margin-right: 40px;}
	#news_area .title_box{width:auto;margin: 25px 0 40px;}
	#news_area .workframe{width:90%;display: block;}
	#news_area .list_box{width:100%;}
	#wrap:before{width: 220px;}
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row {display: block;}
	#custom_box li .img{width:100%;}
	#custom_box li .tt{width:100%;margin-top: 30px;}
	#about_area .track{height:130px;margin-bottom: 20px;}
	#about_area .track p{font-size:80px;}
	#custom_box li .tt article{margin-top:25px;}
	#custom_box li .tt h2{height:auto;}
}
@media screen and (max-width: 640px){
	#about_area .track{height:100px;}
	#about_area .track p img{width: 100px;}
	#about_area .track p{font-size:60px;}
	#custom_area, section{padding:50px 0;}
	#custom_box li .img{height: 250px;border-radius: 35px;}
	#about_area .info_box .tt h3, #custom_box li .tt h2, section .title_box .area_title{font-size: 27px;}
	#book_area .list_box img { height: 65vw; }
}
@media screen and (max-width: 450px){
	#product_area .bgBox { width: 100%; object-fit: cover; }
}