/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {margin-bottom: 40px;text-align: center;}
section .title_box .area_title {font-size: 70px;font-weight: 600;background: linear-gradient(100deg, var(--primary), var(--secondary));-webkit-background-clip: text;color: transparent;display: inline-block;letter-spacing: 7px;}
section .title_box .sub_title {font-weight: 500;font-size: 31px;color: #727272;letter-spacing: 3px;}

/* 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 {display: flex;flex-wrap: wrap;justify-content: flex-end;align-items: flex-end;padding-top: 0;margin-top: -3vw;padding-bottom: 2vw;}
#about_area:before{content:url(/images/40/img-money2.png);position: absolute;right: 90px;z-index: 2;bottom: 45px;animation-name: money2;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes money2{0%{bottom:10px;}100%{bottom:45px;}}
#about_area:after{content:url(/images/40/img-about-black.png);position: absolute;bottom: -20px;right: 0;}
#about_area >div{width: 55%;}
#about_area >div:first-child{left: 0;position: absolute;}
#about_area .info_box{width: 40%;margin: 50px 5% 50px 0;}

/* news_area */
#news_area{background-image: url(/images/40/img-news-bg.png);background-repeat: no-repeat;background-position: 50% 0%;background-size: cover;padding: 8vw 0;}
#news_area:before{content:'';position:absolute;top: 0;width: 100%;height: 150px;background-image: url(/images/40/img-news-before.png);background-repeat: no-repeat;background-position: 50% 0%;background-size: contain;}
#news_area:after{content:url(/images/40/img-good.png);animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;position: absolute;top: 10%;right: 4%;}
@keyframes fish{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}
#news_area >.photo{position:absolute;left: -30px;}
#news_area .workframe{width: 42%;margin-right: 10%;}
#news_area .title_box{text-align:left;position: relative;margin: 7vw 90px 85px;}
#news_area .more_btn{position:absolute;right: 105px;bottom: 0;}
#news_area .list_box .img_scale {background: #fff;padding: 50px 50px;border-radius: 60px;box-shadow: 0 0 50px rgb(0 0 0 / 15%);margin: 50px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#news_area .list_box article{width: 67%;font-size: 18px;font-weight: 600;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;color: #000000;letter-spacing: 1px;line-height: 200%;}
#news_area .list_box .info_box {width: 25%;display: flex;flex-direction: column;align-items: center;}
#news_area .list_box .info_box >div{border-radius: 160px;}
#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 {font-size: 24px;margin-top: 10px;}
#news_area .list_box .info_box p{font-size: 30px;color: #ffeb46;line-height: 100%;}
#news_area .slick-prev{width:39px;height:69px;}
#news_area .slick-prev:before{content:url(/images/40/arrow-left.png)}
#news_area .slick-next{width:39px;height:69px;}
#news_area .slick-next:before{content:url(/images/40/arrow-right.png)}

/* page-form */
#page-form{background-image: url(/images/40/img-contact-bg.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: 80%;padding: 9vw 0;}
#page-form:after{content:url(/images/40/img-dot.png);position: absolute;right: -50px;}
#page-form .workframe{width: 750px;}
#page-form .title_box{margin-bottom:20px;}
#page-form .title_box .area_title{line-height:150%;}
#page-form form,#page-form fieldset{margin:0;padding:0;border:0}
#page-form fieldset:first-child{display:flex;flex-wrap: wrap;justify-content: space-between;}
#page-form fieldset p{overflow:hidden;color:#000;font-size:16px;margin: 10px 0;width: calc(50% - 10px);}

#page-form fieldset p.flex{display:flex;width: 100%;justify-content: space-between;align-items: center;}
#page-form fieldset p.one{width: 100%;}
#page-form .btn{display:flex;justify-content: center;flex-wrap: wrap;}
#page-form .btn p{width: auto;margin: 20px 10px 0;}
#page-form label{float:left;width:100px;text-align:right;padding:5px 0}
#page-form span{display:block}
#page-form .ra span{width:auto;float:left;margin-left:10px;padding:5px 0}
#page-form input[type="text"],#page-form select{width:calc(100% - 32px);padding: 15px;border: 1px solid #4f4f4f;color: #727272;background: none;font-size: 16px;border-radius: 8px;font-weight: 700;}
#page-form input#Checknum{margin: 0 20px;width: calc(80% - 60px);}
#page-form select{width:calc(100% - 1px);-webkit-appearance:none;background: url(/images/40/arrow.png) no-repeat scroll 99% center transparent;background-repeat:no-repeat;background-position:97% 50%;padding: 20px 17px;border-radius: 8px;}
#page-form p.send input{background: linear-gradient(90deg, var(--primary), var(--secondary));color:#fff;text-align:center;width:100%;padding: 10px 80px;font-size: 24px;outline:none;cursor:pointer;border-radius: 50px;border: 0;font-weight: 500;letter-spacing: 2px;}
#page-form .btn p.phone a{background: var(--secondary);color:#fff;text-align:center;padding: 16px 40px;font-size: 16px;letter-spacing: 2px;display: flex;justify-content: center;align-items: center;}
#page-form .btn p.line a{background: #12b508;color:#fff;text-align:center;padding: 16px 40px;font-size: 16px;outline:none;cursor:pointer;letter-spacing: 2px;display: flex;justify-content: center;align-items: center;}
#page-form .btn p a svg{width:20px;height: 20px;margin-right: 10px;}
#page-form p.send input:hover, #page-form .btn p a:hover{opacity:.8}
#page-form article{font-size:15px;line-height:170%}
#page-form h2 img{margin-right:5px;vertical-align:bottom}
#page-form h2 b{display:inline-block;font-size:24px;color:#353535;margin-right:10px;vertical-align:baseline}

/* 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-top: -100px;background-image: url(/images/40/img-service-bg.png);background-repeat: no-repeat;background-position: 50% 0%;background-size: cover;z-index: 5;}
#custom_area .workframe{width: 1560px;}
#custom_area:before{content:url(/images/40/img-money.png);position: absolute;top: -20px;left: 135px;animation-name: money;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes money{0%{top:-20px;}100%{top:10px;}}
#custom_area .title_box{margin-top: 90px;}
#custom_box{position:relative;display: flex;justify-content: center;align-items: center;}
#custom_box ul {display: flex;flex-wrap: wrap;justify-content: space-between;position: absolute;width: 100%;}
#custom_box li  {width: calc((100%/2) - 380px);order: 2;margin: 40px 0;margin-right: 10%;}
#custom_box li:nth-child(2n){margin-right:0;margin-left:10%;}
#custom_box li .row{background:#fff;margin: 0;padding: 40px 50px;border-radius: 60px;text-align: center;position: relative;}
#custom_box li a{position:absolute;width: 100%;height: 100%;z-index: 2;top: 0;left: 0;}
#custom_box li h2 {font-size: 48px;text-align: center;background: linear-gradient(100deg, var(--primary), var(--secondary));-webkit-background-clip: text;color: transparent;display: inline-block;}
#custom_box li article {margin-top: 10px;line-height: 160%;word-spacing: 100vw;max-width: 100%;text-align: center;font-size: 30px;color: #727272;letter-spacing: 2px;}
#custom_box li:hover article{color:var(--primary)}
#custom_box li:hover{margin-top:30px;}

@-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 rgb(215 207 207 / 70%);}
}
@media screen and (max-width: 1680px){
	#news_area >.photo{width: 55%;left: -50px;}
	#news_area .workframe{width:45%}
	#news_area .list_box .info_box h3,#news_area .list_box .info_box p{font-size: 20px;}
	#news_area .list_box article{font-size: 16px;}
	#news_area .list_box .img_scale{padding:50px 35px;}
	#custom_box li .row{padding:40px 20px;}
	#custom_area .workframe{width:95%;}
	#custom_box li{width: calc((100%/2) - 300px);}
	#custom_box li h2{font-size:40px;}
	#custom_box li article{font-size: 27px;}
	#page-form{padding-top: 4vw;background-position: 50% 85%;}
	#page-form .title_box{margin-bottom: 3vw;}
	#about_area >div:first-child{left:-5%;width: 50%;}
	#about_area .info_box{width: 48%;}
	#page-form:after{display:none;}
}
@media screen and (max-width: 1440px){
	section .title_box .area_title{font-size: 60px}
	section .title_box .sub_title{font-size: 28px}
}
@media screen and (max-width: 1280px){
	#about_area >div:first-child{top: -2%;}
	section .title_box .area_title{font-size: 45px}
	section .title_box .sub_title{font-size: 22px}
	#custom_box .photo{width: 45%;}
	#custom_box li{width: calc((100%/2) - 200px);}
	#news_area .more_btn{position:relative;right: 0;margin-top: 10px;}
	#news_area .title_box{margin-bottom: 0;}
	#news_area .workframe{margin-right:5%;width: 50%;}
}
@media screen and (max-width: 1024px){
	#page-form{background-size: 100%;}
	#news_area .workframe{width: 60%;}
	#news_area .title_box{margin-left: 170px;}
	#custom_box li h2{font-size: 30px;}
	#custom_box li article{font-size: 20px;}
	#custom_area:before{zoom: 75%;}
}
@media screen and (max-width: 768px){
	#page-form .workframe{width:90%;}
	#page-form{background:none;}
	#news_area .title_box{margin: 0 auto;width: calc(100% - 100px);}
	#news_area .workframe{width: 90%;margin: 0 auto;}
	#news_area:after{display:none;}
	#news_area >.photo{position:relative;width: 85%;}
	#news_area{background-size: 160%;background-position: 10% 0%;padding-bottom: 0;}
	#custom_box{display:flex;flex-direction: column;align-items: center;}
	#custom_box .photo{width: 100%;}
	#custom_box ul{position:relative;}
	#custom_box li, #custom_box li:nth-child(2n){width: calc((100%/2) - 20px);margin: 20px 0;}
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row {padding: 40px 20px;}
	#news_area:before{background-size: cover;height: 111px;}
	#custom_area:before{left:60%}
}
@media screen and (max-width: 640px){
	#about_area:before{display:none;}
	#page-form fieldset p.flex{display:flex;flex-wrap: wrap;}
	#page-form fieldset p{width:100%;}
	#page-form input#Content{width:100%;margin-bottom: 20px;}
	#news_area .list_box article{width:100%;}
	#news_area .list_box .img_scale{padding:50px 35px;box-shadow: 0 0 25px rgb(0 0 0 / 15%);margin: 25px;display: flex;flex-direction: column;align-items: center;}
	#news_area .list_box .info_box{width:100%;}
	#custom_box li, #custom_box li:nth-child(2n){width:100%;margin-bottom: 0;}
	#custom_area .workframe{width: 90%;}
	#custom_area{margin-top:0;}
	#custom_area:before{zoom: 40%;left: unset;right: -30px;}
	#book_area .list_box img { height: 65vw; }
	#page-form input#Checknum{margin-left:0;}
}