/* search_box */
#openform { background: rgba(var(--white-rgb), .3); }

/* section */
section { margin: 5vw 0 3vw; }
section.section_pad { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box {margin-bottom: 40px;}
section .title_box .area_title {font-size: 30px;letter-spacing: 10px;color: #fff;border-bottom: 1px solid #2d2d2d;padding-bottom: 30px;margin-bottom: 50px;position: relative;}
section .title_box .area_title:after{content:'';position:absolute;left: 0;width: 60px;height: 4px;background: #e11415;bottom: 0;}
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;top: 0;left: 0;}
.bg_box:before {width: 100%;height: 100%;display: block;background: #171717;content: "";}
.bg_box.white:before { background: rgba(var(--white-rgb), .2); }

/* about_area */
#about_area .info_box article { margin-bottom: 30px; width: 90%; line-height: 210%; letter-spacing: 1.5px; font-weight: 300; }
#about_area .about_wrap { width: 100%; flex-direction: row-reverse; justify-content: center;}
#about_area .title { margin: 0 20px; align-items: flex-start; flex-direction: row-reverse; border-left: 1px solid #eee; padding-left: 30px; margin-left: 50px; position:relative;}
#about_area .title:after{content:'';position:absolute;left: 0;width: 4px;height: 60px;background: #e11415;}
#about_area .title p{ font-family: 'Lato', sans-serif; margin-left: 10px; letter-spacing: 1px;}
#about_area .writing { -ms-writing-mode: tb-rl -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
#about_area .talign_lg_left { text-align: left;}
#about_area .title h2 { font-size: 30px; letter-spacing: 10px;}
#about_area .info article { letter-spacing: .5em; font-size: 17px; height: 300px; line-height: 220%; font-weight: 300; text-align: justify;}
#about_area .info h4{ letter-spacing: .5em; font-size: 18px; height: 300px; line-height: 3em;}

/* product_area */
#product_area .slick-list { overflow: visible; }
#product_area #product_list li .shadow{ border-radius: 15px; overflow: hidden;}

/* news_area */
#news_area{margin-bottom:0;}
#news_area .list_box .over_hid {background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#news_area .list_box .info_box {padding: 15px;}
#news_area .list_box .info_box p a {margin-right: 10px;max-width: calc(100% - 100px);font-weight: 400;z-index: 2;color: #fff;}
#news_area .list_box .info_box p .time {width: 90px;font-weight: 300;color: #797979;}
#news_area .list_box .info_box h3 {height: 34px;font-size: 20px;color: #fff;}

/* 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: 5vw 0 3vw; }
#custom_area:before { position: absolute; width: 100%; height: 75%; background: rgba(var(--primary-rgb), .1); display: block; bottom: 0; left: 0; opacity: .3; content: ""; }
#custom_box { padding: 8vw 0 5vw; }
#custom_box li .row { margin: 30px 20px; padding: 30px; border-bottom: 2px var(--primary) solid; }
#custom_box li .row h2 { font-size: 20px; }
#custom_box li .row article { margin-top: 30px; line-height: 200%; }

/* pandr-title */
#pandr-title{color:#fff;background: #e11415;}
#pandr-title .webframe{width: 1300px;margin: 0 auto;overflow: hidden;}
#pandr-title .title-set{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; padding: 0; list-style: none;}
#pandr-title .title-set >div{ width: calc((100%/4) - 20px); position: relative; padding: 10px; clear: both;}
#pandr-title .title-set >div .free{ overflow: hidden;}
#pandr-title .title-set >div .free .num{ width: 32px; height: 32px; background: #efefef; border: 1px solid #dedede; border-radius: 50%; text-align: center; color: #454545; font-size: 13px; line-height: 30px; letter-spacing: 0; position: absolute; bottom: 10px; left: 90px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
#pandr-title .title-set >div:hover .free .num{ background: #7cbac1; color: #fff; }
#pandr-title .title-set >div .free .right{ float: right; width: calc(100% - 60px);}
#pandr-title .title-set >div .free .icon{ width: 45px; height: 45px; float: left; margin-right: 15px; position: relative; overflow: hidden;}
#pandr-title .title-set >div .free .icon img{ width: 100%; position: absolute; top: -1px; left: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: inline-block;}
#pandr-title .title-set >div:hover .free .icon img{ top: -52px;}
#pandr-title .title-set h2{font-weight:400;color: #fff;font-size: 15px;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}
#pandr-title .title-set h2 b{font-size: 12px;letter-spacing: 0.25px;margin-left: 4px;color: #fff;text-transform: uppercase;}
#pandr-title .title-set h3{color: #fff;font-size: 14px;line-height: 20px;overflow: hidden;}
#pandr-title .small-talk{float:right}
#pandr-title .small-talk p{text-align:right;font-size:16px;color:#e19dc5;line-height:180%;width:280px}


@-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); }
	#custom_box li:hover .row { box-shadow: 0 4px 17px 0 rgba(var(--black-rgb), .2); }
}
@media screen and (min-width: 641px){
    #about_area .d_lg_flex{display:flex;}
}
@media screen and (max-width: 1300px){
    #pandr-title .webframe{width:95%;}
}
@media screen and (max-width: 768px){
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row { margin: 10px 15px; padding: 10px 0; }
	#pandr-title .title-set >div{ width: calc(50% - 20px);}
}
@media screen and (max-width: 640px){
	#book_area .list_box img { height: 65vw; }
    #about_area .writing{ -ms-writing-mode: tb-rl -webkit-writing-mode: vertical-rl; writing-mode: unset;}
    #about_area .title{border-left: 0;padding-left: 0;margin-left: 0;border-bottom: 1px solid #eee;padding-bottom: 30px;margin-bottom: 30px;}
    #about_area .title:after{width: 60px;height: 4px;bottom: 0;}
    #about_area .info article{height:auto;letter-spacing: 1px;}
}
@media screen and (max-width: 450px){
	#pandr-title .title-set >div{ width: calc(100% - 20px);}
	#product_area .bgBox { width: 100%; object-fit: cover; }
}