section { position: relative; padding: 5vw 0; background: no-repeat 50% / cover; }
section .page_title,section .page_title span {margin-bottom: 30px;text-align: left;font-weight: 600;font-size: max(3.5 * (1vw + 1vh) / 2, 32px);color: #363636;word-spacing: 100vw;line-height: 1.2;}
section .title_box p{color: #4eb9bc;font-size: 19px;}
section .more_box >* { padding: 5px 30px; border: 1px rgba(255, 255, 255, .3) solid; display: inline-block; color: #fff; }

/* Advantages */
#Advantages{padding: 12vw 0 5vw;}
#Advantages .title_box{position:relative}
#Advantages .title_box .page_title span{color: #4eb9bc;}
#Advantages .nowrap_box{display:flex;align-items:flex-start;flex-direction: row;justify-content: space-between;}
#Advantages .nowrap_box .deck02,#Advantages .nowrap_box .deck03{position:absolute;z-index:10}
#Advantages .nowrap_box .deck02{left:-520px;bottom:-170px}
#Advantages .nowrap_box .deck02 img,#Advantages .nowrap_box .deck03 img{width:100%}
#Advantages .nowrap_box .deck03{bottom:-120px;right:-170px}
#Advantages .nowrap_box .info_item{width: 45%;margin: 0;flex-direction: column;}
#Advantages .aboutAreaBG{position:absolute;height:100%;width:0;top:0;left:0;background:#ccbcad;opacity:0.3;z-index:0;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}
#Advantages .img_item img{width: 600px;aspect-ratio: 6/5;object-fit: contain;}
#Advantages .info_item article{margin-bottom:30px;line-height:180%;letter-spacing:0.5px;font-weight:300;color:#000;margin-left: 17px;}
#Advantages .info_item article ul{padding-left: 5px;list-style-position: outside;}
#Advantages .info_item article ul li{font-size: max(1.3 * (1vw + 1vh) / 2, 17px);font-weight: 400;}
#Advantages .info_item article ul li::marker{color: #4eb9bc;}
#Advantages .info_item article p{font-size:18px}
#Advantages .info_item article .info h3{padding:5px 0 10px 0;font-size:26px;color:var(--primary);font-weight:600;letter-spacing:0.5px;line-height:160%}
#Advantages .info_item article .info p,#productBox .info .title_box h3{width:100%;margin-top:20px;letter-spacing:0px;font-weight: 400;font-size: 16px;}
#Advantages .info_item article .info .textEditor{margin-top:30px;width:90%}
#Advantages .info_item article .info .textEditor ol{display:flex;flex-direction:row;flex-wrap:wrap}
#Advantages .info_item article .info .textEditor ol li{line-height:180%;font-weight:400;letter-spacing:2.5px;padding:6px 20px;width:auto;text-align:center;margin-right:15px;margin-bottom:15px;background-color:#4c3d33;color:#fff;font-size:20px}
#Advantages.tooolong .aboutAreaBG{width:70%}
#Advantages:after{content: '';background-image: url(/images/38/img-01.png);position:absolute;background-size: contain;background-repeat: no-repeat;width: 160px;aspect-ratio: 1/1;bottom: 13%;right: 3%;z-index:0;animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s}
#Advantages .more_btn{background: #4fbaba;width: fit-content;border-radius: 50px;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
#Advantages .more_btn:hover{background: #e79035;}
#Advantages .more_btn a{display:flex;align-items: center;justify-content: center;padding: 10px 20px;gap: 10px;}
#Advantages .more_btn:hover a{gap: 15px;}
#Advantages .more_btn a font{color:#fff;}
#Advantages .deco02{position:absolute;top: -30%;right: 0;}
#Advantages .deco03{position:absolute;bottom: 0%;left: 0;}

/* secabout */
#secabout { margin-top: 50px; }
#secabout:before { position: absolute; width: 60%; height: 100%; background: #dc8661; display: block; top: 0; left: 0; content: ""; }
#secabout >div { width: 50%; display: inline-block; vertical-align: top; }
#secabout .customBox ul { margin: 0 auto; width: 500px; }
#secabout .customBox ul li { padding: 60px 0; }
#secabout .customBox ul li .page_sub_title { margin-bottom: 25px; font-weight: 400; font-size: 36px; color: #fff; }
#secabout .customBox ul li article { font-weight: 200; font-size: 18px; color: #ece4e0; }
#secabout .youtubeBox { top: 45px; }
#secabout .youtubeBox iframe { width: 90%; height: 350px; }

/* Service */
#Service{margin: 5vw 0 0;}
#Service .workframe {display:grid;grid-template-columns: 26% 67%;gap: 20px 50px;justify-content: space-between;}
#Service .title_box p,#Service .page_title,#Service .info_item article{color:#fff;}
#Service .Service_box{display:grid;grid-template-columns: repeat(3, 1fr);justify-items: center;gap: 40px 40px;align-items: center;}
#Service .Service_box .S_box{display:flex;flex-direction: column;align-items: center;gap: 15px;background-color: #fff;width: 100%;height: 100%;justify-content: center;padding: 10px 10px;text-align: center;} 
#Service .Service_box .S_box:hover{color:#4eb9bc;}
#Service .Service_box .S_box img{filter: brightness(0);}
#Service .Service_box .S_box:hover img{filter: unset;}
#Service .notice{color: #fff;display: flex;align-items: center;font-size: max(1 * (1vw + 1vh) / 2, 20px);margin-top: 20px;animation: fade 600ms infinite;-webkit-animation: fade 1500ms infinite;flex-direction: column;text-align: center;}
#Service .notice b{background: #121110;padding: 4px 20px;display: inline-block;border-radius: 50px;font-weight: 400;margin-top: 5px;}
#Service .notice h1{font-size: max(1 * (1vw + 1vh) / 2, 19px);}
#Service .service_bg{position:absolute;top: 20px;}
#Service .service_bg img{border-radius: 0 20px 20px 0;}
#Service .more_btn{background: #131110;width: fit-content;border-radius: 50px;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;margin-top: 20px;}
#Service .more_btn:hover{background: #e79035;}
#Service .more_btn a{display:flex;align-items: center;justify-content: center;padding: 10px 20px;gap: 10px;}
#Service .more_btn:hover a{gap: 15px;}
#Service .more_btn a font{color:#fff;}
@keyframes fade{from{opacity:1.0} 50%{opacity:0.4} to{opacity:1.0}}
@-webkit-keyframes fade{from{opacity:1.0} 50%{opacity:0.4} to{opacity:1.0}}

/* Areas */
#Areas{padding:4vw 0;}
#Areas .workframe{display: grid;grid-template-columns: 70% 24%;width: min(90%,1500px);margin-left: 170px;align-items: center;justify-content: space-between;gap: 50px;}
#Areas .img_item{position:relative;}
#Areas .img_item:before{content:'';position:absolute;];bottom: 10px;right: -20px;width: 140px;height: 140px;background-image: url(/images/38/img-logo.png);background-size: contain;background-repeat: no-repeat;z-index: 0;}
#Areas .img_item img{width:1020px;object-fit: contain;}
#Areas .info_item{}
#Areas .info_item article{font-size: max(1.5 * (1vw + 1vh) / 2, 17px);}
#Areas .info_item article span{font-size: max(1.5 * (1vw + 1vh) / 2, 23px);font-weight: 500;} 

/* Process */
#Process{padding: 0 0 5vw;}
#Process .workframe{display:flex;flex-direction: column;align-items: center;}
#Process .title_box{display:flex;align-items: center;flex-direction: column;}
#Process .Process_box ul{display: grid;grid-template-columns: repeat(6, 1fr);gap: 100px;}
#Process .Process_box ul li{position:relative;}
#Process .Process_box ul li:not(:last-child):before{content:'';position:absolute;top: 50px;right: -60px;width: 20px;height: 20px;background-image: url(/images/38/img-tri.png);background-size: contain;background-repeat: no-repeat;z-index: 0;}
#Process .Process_box ul .relat_box{display:flex;flex-direction: column;align-items: center;gap: 17px;}
#Process .Process_box ul .relat_box img{filter: brightness(0);}
#Process .Process_box ul .relat_box:hover img{filter: unset;-webkit-animation: bounce-top 0.9s both;animation: bounce-top 0.9s both;}
#Process .Process_box ul .relat_box h4{font-size:18px;letter-spacing: 1px;font-weight: 400;}
#Process .Process_box ul .relat_box:hover h4{color:#4eb9bc;}
#Process .bar{position:absolute;width: 100px;height: 680px;background:#4eb9bc;right: 0;bottom: 0;}
#Process .deco04{position:absolute;right: 0;bottom: -30%;}

@-webkit-keyframes bounce-top{0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}
24%{opacity:1}
40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
25%,55%,75%,87%{-webkit-transform:translateY(0px);transform:translateY(0px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
100%{-webkit-transform:translateY(0px);transform:translateY(0px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}
}@keyframes bounce-top{0%{-webkit-transform: translateY(-20px);transform: translateY(-20px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}
24%{opacity:1}
40%{-webkit-transform: translateY(-16px);transform: translateY(-16px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
25%,55%,75%,87%{-webkit-transform:translateY(0px);transform:translateY(0px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
100%{-webkit-transform:translateY(0px);transform:translateY(0px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}
}

/* Evaluation */
#Evaluation{padding: 5vw 0 10vw;}
#Evaluation ul li{position: relative;margin: 20px 15px 20px 0;background: #fff;outline: 1px solid #dcdcdc;outline-offset: -5px;}
#Evaluation ul li .deco05{position:absolute;top: -10px;left: 30px;}
#Evaluation ul li.slick-current .deco05 img{filter: unset;opacity: 1;}
#Evaluation ul li .deco05 img{filter: grayscale(1);opacity: .5;}
#Evaluation ul li .text{position:relative;padding: 60px 40px 20px 40px;}
#Evaluation ul li .text article{margin-bottom: 40px;}
#Evaluation ul li h3{font-weight:400;}
#Evaluation ul li p{color:#fed400;}
#Evaluation .Evaluation_bg {position:absolute;width: 72%;height: 80%;background: #f8f8f8;right: 0;top: 9%;border-radius: 20px;z-index: -1;}
#Evaluation .circle{position:absolute;width: 20%;aspect-ratio: 1/1;background: #e6831e;border-radius: 50%;z-index: -999;left: -10%;}

/* newsBox */
#newsBox ul li { margin: 20px 15px 20px 0; width: calc((100% - 30px) / 2); display: inline-block; }
#newsBox ul li:nth-child(2n) { margin: 20px 0 20px 15px; }
#newsBox ul li .img_box_cover , #newsBox ul li .img_box_cover img { height: 250px; }
#newsBox ul li .info_box { margin-top: 15px; }
#newsBox ul li .info_box h4 { height: 33px; font-weight: 500; font-size: 21px; }
#newsBox ul li .info_box article { margin: 10px 0 0; color: #111; }
#newsBox ul li .info_box .time { color: #8f8f8f; }

/* bookBox */
#bookBox ul { margin: 0 auto; width: 1200px; display: grid; grid-gap: 0; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
#bookBox ul li { overflow: hidden; }
#bookBox ul li img { height: 275px; }
#bookBox ul li:first-child { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
#bookBox ul li:nth-child(8) { grid-column-start: 4; grid-column-end: 5; grid-row-start: 2; grid-row-end: 4; }
#bookBox ul li:first-child img , #bookBox ul li:nth-child(8) img { height: 550px; }

@media screen and (max-width: 1680px){
	#Advantages .deco03{bottom: -9%;}
	#Areas .workframe{margin: 0 auto;}
	#Process .deco04{bottom: -60%;}
}
@media screen and (max-width: 1470px){
	#Advantages .nowrap_box{display: flex;justify-content: center;gap: 30px;align-items: center;}
	#Service{margin: 8vw 0 0;}
	#Service .service_bg{position:absolute;height: 100%;top: 0;}
	#Service .service_bg img{height:100%;object-fit: cover;border-radius: 0;}
	#Areas .workframe{grid-template-columns: 50% 45%;}
	#Areas .info_item article{width:80%;}
	#Process .deco04{bottom: -69%;}
}
@media screen and (min-width: 1281px){
	#productBox ul li:hover .relat_box:before  { background: rgba(0, 55, 122, .85); }
	#productBox ul li:hover .info_box.abso_box { top: calc((100% - 178px) / 2); }
	#productBox ul li:hover .info_box article { margin: 30px auto 15px;  height: 44px; opacity: 1; }
	#productBox ul li:hover .info_box .more_box { opacity: 1; }
}
@media screen and (max-width: 1280px){
	#productBox ul li.slick-current .relat_box:before  { background: rgba(0, 55, 122, .85); }
	#productBox ul li.slick-current .info_box.abso_box { top: calc((100% - 178px) / 2); }
	#productBox ul li.slick-current .info_box article { margin: 30px auto 15px;  height: 44px; opacity: 1; }
	#productBox ul li.slick-current .info_box .more_box { opacity: 1; }
	#bookBox ul { width: 90%; }
	#bookBox ul li img { height: 22.5vw; }
	#bookBox ul li:first-child img , #bookBox ul li:nth-child(8) img { height: 45vw; }
	#Advantages .deco02{width: 180px;top: 10%;right: -5%;}
	#Advantages .deco03{display:none;}
	#Service .Service_box{grid-template-columns: repeat(2, 1fr);}
	#Areas .img_item:before{display:none;}
	#Process .Process_box ul{grid-template-columns: repeat(3, 1fr);}
	#Process .Process_box ul li:nth-child(3):before{display:none;}
	#Process .deco04{display:none;}
	#Process .bar{bottom: -20%;}
}
@media screen and (max-width: 1024px){
	#aboutBox .left_box { width: calc(60vw - 25px); }
	#aboutBox .right_box { width: 35vw; }
	#aboutBox .right_box .list_box { width: calc(100% - 1px); }
	#aboutBox .right_box .list_box .img_box_cover , #aboutBox .right_box .list_box .img_box_cover img { height: 300px; }
	#aboutBox .right_box .list_box:nth-child(2n) .info_box h4 { margin: 15px 0; }
	#secabout:before { width: 90%; height: calc(100% - 300px); }
	#secabout >div{ width: 95%; }
	#secabout .customBox ul { width: 80%; }
	#secabout .youtubeBox { width: 100%; text-align: right; top: 0; }
	#productBox ul li .img_box_cover img { height: 400px; }
}
@media screen and (max-width:980px){
	#Advantages .nowrap_box{display: flex;flex-direction: column;}
	#Advantages .nowrap_box .info_item{width: 100%;}
	#Advantages .img_item img{width:100%;}
	#Advantages .deco02{top: 46%;}
	#Service .workframe{grid-template-columns: 1fr;gap: 10;}
	#Service .info_item{margin-bottom: 40px;}
	#Service .blank{display:none;}
	#Areas .workframe{display:flex;flex-direction: column-reverse;}
	#Process .bar{display:none;}
	#Evaluation .title_box p,#Evaluation .title_box .page_title{text-align:center;}
	#Evaluation .Evaluation_bg{width:100%;height: 90%;z-index: -9999;top: 0;}
}
@media screen and (max-width: 768px){
	#Process{padding: 0 0 10vw;}
	#aboutBox .img_box_cover , #aboutBox .img_box_cover img { height: 380px; }
	#aboutBox .left_box { margin-bottom: 50px; width: 100%; height: auto; }
	#aboutBox .right_box { width: 100%; }
	#aboutBox .right_box .list_box { width: calc((100% - 1px) / 2); border-left: 0; border-right: 1px #ccc solid; }
	#aboutBox .right_box .list_box:nth-child(2n) { border-right: 0; }
	#aboutBox .right_box .list_box .relat_box { margin: 0 15px; }
	#aboutBox .right_box .list_box .img_box_cover , #aboutBox .right_box .list_box .img_box_cover img , #aboutBox .right_box .list_box:nth-child(2n) .img_box_cover , #aboutBox .right_box .list_box:nth-child(2n) .img_box_cover img { height: 50vw; }
	#aboutBox .right_box .list_box .info_box h4 { height: 30px; font-size: 18px; }
	#newsBox ul li { margin: 20px 5px 20px 0; width: calc((100% - 10px) / 2); }
	#newsBox ul li:nth-child(2n) { margin: 20px 0 20px 5px; }
	#bookBox ul { grid-template-rows: repeat(4, 1fr); }
	#bookBox ul li:first-child { grid-column-end: 4; }
	#bookBox ul li:nth-child(8) { grid-column-start: 3; grid-column-end: 5; grid-row-start: 3; grid-row-end: 5; }
}
@media screen and (max-width: 640px){
	#bookBox ul { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); }
	#bookBox ul li:first-child { grid-column-end: 3; }
	#bookBox ul li:nth-child(8) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 5; grid-row-end: 6; }
	#bookBox ul li:nth-child(7) { grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 5; }
	#bookBox ul li img , #bookBox ul li:nth-child(8) img { height: 30vw; }
	#bookBox ul li:first-child img , #bookBox ul li:nth-child(7) img { height: 60vw; }
}
@media screen and (max-width: 480px){
	#secabout:before { width: 100%; }
	#productBox .list_box { margin: 0 auto; width: 350px; }
	#productBox .btn { display: none; }
	#newsBox ul li , #newsBox ul li:nth-child(2n) { margin: 20px 0; width: 100%; }
	#Process .Process_box ul{grid-template-columns: repeat(2, 1fr);gap: 40px 60px;}
	#Process .Process_box ul li:not(:nth-child(even)):before{display: block;right: -43px;}
	#Process .Process_box ul li:nth-child(even):before{display:none;}
}
@media screen and (max-width: 425px){
	#productBox .list_box { width: 100%; }
}
@media screen and (max-width: 320px){
	#aboutBox .right_box .list_box { width: 100%; border-right: 0; }
	#productBox .list_box { width: 100%; }
}