@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@600&family=Kanit:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+TC:wght@300&family=Open+Sans:wght@300&display=swap');

/* section */
section {margin: 100px 0;}
section.section_pad { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box { margin-bottom: 40px; }
section .title_box .area_title {font-weight: 600;font-size: 42px;color: var(--black);}
section .title_box .sub_title {font-weight: 300;font-size: 18px;text-transform: uppercase;display: flex;align-items: center;font-family: 'Archivo', sans-serif;color: var(--primary);}
section .title_box .sub_title:after{content:'';right: 0;width: 50px;height: 1px;background: var(--primary);margin-left: 11px;}

/* 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 .workframe{display:flex;align-items: stretch;flex-wrap: wrap;justify-content: space-between;}
#about_area .img_box{width: 45%;margin: 0;}
#about_area .info_box{width: 50%;}
#about_area .info_box article {margin-bottom: 30px;width: 100%;line-height: 200%;letter-spacing: 1.5px;font-weight: 300;margin-top: 200px;}
#about_area #webSeo{position:absolute;top: calc(50% - 190px);width: 100%;z-index: -1;padding: 0;}
#about_area #webSeo .seo{font-size: 200px;font-family: 'Archivo Black', sans-serif;color: #f3f3f3;line-height: 100%;}
#photo_list, #photo_list .img_scale, #photo_list .img_scale img{height:100%;}
#photo_list{width: 80%;border: 10px solid #f3f3f3;}

/* product_area */
#product_area .slick-list { overflow: visible; }

/* news_area */
#news_area .list_box img { height: 320px; }
#news_area .list_box .info_box { padding: 15px 30px; }
#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: 300; }
#news_area .list_box .info_box h3 { height: 34px; font-size: 20px; }

/* 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: 80px 0;background: #f3f3f3;text-align: center;}
#custom_area .sub_title{display:block;font-family: 'Archivo Black', sans-serif;color: var(--white);font-size: 150px;line-height: 100%;} 
#custom_area .sub_title:after{display:none;} 
#custom_area .area_title{font-size: 20px;letter-spacing: 6px;font-weight: 500;margin-top: -70px;}
#custom_box {margin-top: 90px;border-top: 1px solid #fff;border-bottom: 1px solid #fff;position: relative;}
#custom_box ul{display:flex;flex-wrap: wrap;}
#custom_box li{width: calc(100%/4);}
#custom_box li .row {padding: 40px;position: relative;border-right: 1px solid #fff;margin: 0;}
#custom_box li:hover .row{background: var(--primary);}
#custom_box li:first-child .row, #custom_box li:nth-child(5) .row{border-left: 1px solid #fff;}
#custom_box li:nth-child(1) .row, #custom_box li:nth-child(2) .row, #custom_box li:nth-child(3) .row, #custom_box li:nth-child(4) .row{border-bottom: 1px solid #fff;}
#custom_box li .row a{position:absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}
#custom_box li .row h2 {font-size: 20px;color: #1d1d1d;}
#custom_box li:hover .row h2, #custom_box li:hover .row article{color:var(--white)}
#custom_box li .row article {margin-top: 30px;line-height: 150%;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;color: #828282;font-size: 14px;}
#custom_box li .photo{width:50px;margin-bottom: 15px;}
#custom_box li:hover .photo{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#custom_area .more_btn, #contact_area .more_btn{margin-top: 60px;}

/* contact_area */
#contact_area{text-align: center;margin: 0;padding: 50px 0;}
#contact_area .sub_title{display:block;font-family: 'Archivo Black', sans-serif;color: rgb(223 223 223 / 50%);font-size: 150px;line-height: 100%;}
#contact_area .sub_title:after{display:none;}
#contact_area .area_title{font-size: 20px;letter-spacing: 6px;font-weight: 500;color: var(--primary);}
#contact_area .area_title:after{content:'';display: block;width: 50px;height: 2px;background: var(--primary);margin: 20px auto 0;}
#contact_area .info{padding: 70px 0;background-color:#fff;box-shadow: 10px 10px 30px #ededed, -30px -30px 40px #fff;margin-top: 50px;}
#contact_area .info h3{font-size:24px;text-align: center;letter-spacing: 5px;}
#contact_area .info >p{font-size: 14px;text-align: center;}
#contact_area .info .bottom{margin-top: 40px;display: flex;flex-wrap: wrap;justify-content: center;}
#contact_area .info .bottom .tel p{margin: 0 70px;}
#contact_area .info .bottom .tel p a{display: flex;flex-direction: column;}
#contact_area .info .bottom .tel p b{font-size: 25px;font-family: 'Archivo', sans-serif;}

/* particle-canvas */
#particle-canvas{width:100%;height:100%;position: absolute !important;top: 0;left: 0;z-index: -3;opacity: .25;}
#particle-canvas canvas{width:100%;height:100%;}

@-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: 1280px){
	#contact_area .info .bottom .tel p{margin:0 40px;}
}
@media screen and (max-width: 1024px){
	#custom_area .sub_title, #contact_area .sub_title{font-size: 130px;}
	#custom_box li{width:50%;}
	#custom_box li:nth-child(3) .row, #custom_box li:nth-child(7) .row{border-left: 1px solid #fff;}
}
@media screen and (max-width: 768px){
	#custom_area .sub_title, #contact_area .sub_title{font-size: 90px;}
	#custom_area .area_title{margin-top:-40px;}
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row {padding: 30px;}
	#about_area .img_box{width:100%;}
	#photo_list{width: 90%;margin: 0 auto 50px;}
	#about_area .workframe{display:flex;flex-direction: column;}
	#about_area .info_box{margin:0;width:100%;}
	#about_area .info_box article{margin-top:80px;}
	#about_area #webSeo{top: calc(75% - 190px);}
	#contact_area .info .bottom{display:flex;flex-direction: column;align-items: center;}
	#contact_area .info .bottom .tel p{margin: 5px 0;}
	#contact_area .info .bottom .tel p a{display:flex;flex-direction: row;align-items: center;}
}
@media screen and (max-width: 640px){
	#contact_area .info{padding: 30px;}
	#contact_area .info h3{line-height: 140%;margin-bottom: 10px;}
	#custom_box li{width: 100%;}
	#custom_box li .row{border-bottom: 1px solid #fff;border-left: 1px solid #fff;}
	#custom_box{margin-top:50px;}
	#custom_area .area_title{margin-top: 5px;}
	#custom_area .sub_title, #contact_area .sub_title{font-size: 50px;}
	section .title_box{margin:0 0 40px;width: 100%;}
	#about_area #webSeo{top: calc(60% - 140px);}
	#about_area #webSeo .seo{font-size: 90px;}
	#custom_area{padding:40px 0;}
	section {margin: 40px 0;}
	#book_area .list_box img { height: 65vw; }
	#contact_area .info .bottom{margin-top: 20px;}
}