section {position: relative;padding: 5vw 0;}
section .page_title,section .page_title span {margin-bottom: 20px;text-align: left;font-weight: 600;font-size: 46px;color: #363636;line-height: 120%;letter-spacing: 1px;position: relative;}
section .page_title span{color: #4fa1c9;vertical-align: baseline;}
section .more_box >* { padding: 5px 30px; border: 1px rgba(255, 255, 255, .3) solid; display: inline-block; color: #fff; }

.more_btn {margin-top: 0px;}
.more_btn a {width: 200px;padding: 15px 20px;color: #fff;border: 2px solid #4fa1c9;display: flex;align-items: center;justify-content: space-between;position: relative;overflow: hidden;background-color: #4fa1c9;}
.more_btn font {text-align: left;font-weight: 400;text-transform: uppercase;letter-spacing: 3px;color: #fff;}
.more_btn.white a:before {content: "";width: 0;height: 100%;background: #4fa1c9;border-radius: 50px;display: block;position: absolute;bottom: 5px;left: 0;z-index: -1;-webkit-transform: translate(0,5px);-ms-transform: translate(0,5px);transform: translate(0,5px);-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
.more_btn.white span {right: 30px;position: absolute;width: 80px;height: 1px;background: #000;display: block;right: 0;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
.more_btn.white:after {width: 252px;}
.more_btn.white span {position: absolute;width: 40px;height: 1px;background: #4f3c30;display: block;right: 20px;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
.more_btn.white span:before {position: absolute;width: 0;height: 0;border-style: solid;border-width: 0 16px 7px 0;border-color: transparent transparent #4f3c30 transparent;right: -1px;bottom: 50%;content: "";}
.more_btn.white svg {width: 30px;height: 30px;fill: #ffffff;}


/* AboutSF */
#AboutSF{position:relative;padding: 5vw 0 10vw;}
#AboutSF:before{content:'';position: absolute;width: 500px;height: 300px;background: #4fa1c9;bottom: 010%;}
#AboutSF .title_box{position:relative}
#AboutSF .title_box p{position:absolute;left: -110px;top: 0px;}
#AboutSF .nowrap_box{display:flex;align-items:flex-start;flex-direction: row-reverse;justify-content: space-between;}
#AboutSF .nowrap_box .deck02,#AboutSF .nowrap_box .deck03{position:absolute;z-index:10}
#AboutSF .nowrap_box .deck02{left:-520px;bottom:-170px}
#AboutSF .nowrap_box .deck02 img,#AboutSF .nowrap_box .deck03 img{width:100%}
#AboutSF .nowrap_box .deck03{bottom:-120px;right:-170px}
#AboutSF .nowrap_box .info_item{text-align:left;width: 45%;margin: 0;}
#AboutSF .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}
#AboutSF .img_item{order:1;width: 50%;}
#AboutSF .img_item img{width:100%}
#AboutSF .info_item article{margin-bottom:30px;line-height:180%;letter-spacing:0.5px;font-weight:300;color:#000;}
#AboutSF .info_item article p{font-size:18px}
#AboutSF .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%}
#AboutSF .info_item article .info p,#productBox .info .title_box h3{width:100%;margin-top:20px;letter-spacing:0px;font-weight: 400;font-size: 16px;}
#AboutSF .info_item article .info .textEditor{margin-top:30px;width:90%}
#AboutSF .info_item article .info .textEditor ol{display:flex;flex-direction:row;flex-wrap:wrap}
#AboutSF .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}
#AboutSF.tooolong .aboutAreaBG{width:70%}
#AboutSF: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}
#AboutSF .more_btn{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

/* 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; }

/* productBox */
#productBox{padding:5vw 8vw 0;background-image:url(/images/38/img-bg01.png)}
#productBox .page_title{position:relative;text-align:center;width:fit-content;margin:0 auto 50px}
#productBox .list_box{position:relative}
#productBox .relat_box:before{position:absolute;width:100%;height:100%;background:rgb(0 0 0 / .25);display:block;top:0;left:0;z-index:3;content:""}
#productBox ul li{margin:0 10px}
#productBox ul li .img_box_cover img { height: 490px; }
#productBox ul li .info_box.abso_box {height: 100%;top: calc((100% - 40px) / 2);left: 0;}
#productBox ul li .info_box >* {margin: 5px auto;width: 70%;text-align: center;}
#productBox ul li .info_box h4 {height: 40px;font-weight: 400;font-size: 26px;color: #fff;}
#productBox ul li .info_box article {margin: 80px auto 15px;width: 60%;color: rgb(255 255 255);line-height: 170%;font-size: 17px;opacity: 0;}
#productBox ul li .info_box .more_box { opacity: 0; }
#productBox .btn a {position: absolute;width: 26px;height: 26px;border: solid #444;display: block;top: 40%;}
#productBox .btn a#product_prev { border-width: 1px 0 0 1px; transform: rotate(-45deg); left: -50px; }
#productBox .btn a#product_next { border-width: 1px 1px 0 0; transform: rotate(45deg); right: -50px; }
#productBox .slick-slider { margin-bottom: 60px; }
#productBox .slick-dots li button:before { width: 12px; height: 12px; background: transparent; border: 1px #000 solid;  border-radius: 50%; text-align: center; opacity: 1; content: ""; }
#productBox .slick-dots li.slick-active button:before { background: #000; }

/* Service */
#Service{background-image:url(/images/38/img-bg02.png);background-size:cover;background-repeat:no-repeat}
#Service .page_title,#Cases .page_title,#Reviews .page_title{position:relative;text-align:center;width:fit-content;margin:0 auto 30px}
#Service .page_title:before,#Cases .page_title:before,#Reviews .page_title:before,#productBox .page_title:before{content:'';position:absolute;width:15px;height:15px;background:#fef614;right:-20px;top:-15px;transform:rotate(45deg);animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s}
#Service ul{display:grid;grid-template-columns:repeat(3,1fr);width:80%;margin:60px auto 0;gap:50px 50px;align-items:start}
#Service li .clip{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:20px;margin-bottom:25px}
#Service li .clip .img{width:70px;aspect-ratio:1/1;background:#4fa1c9;border-radius:50px;display:flex;align-items:center;justify-content:center}
#Service li .clip img,#Service li .clip svg{width:35px;aspect-ratio:1/1;height:auto;-webkit-filter:contrast(0) brightness(150%);filter:contrast(0) brightness(200%)}
#Service li h3{font-size:20px;letter-spacing:1px;line-height:1.6}
#Service li article{font-size:17px;color:#555}
#Service li:last-child{background:#4fa1c9;padding:12.5px 30px;position:relative}
#Service li:last-child a{position:absolute;width:100%;height:100%;top:0;left:0;z-index:2}
#Service li:last-child *{color:#fff;margin:0}
@keyframes fish{0%{transform-origin:right bottom;transform:rotate(30deg)}
100%{transform-origin:right bottom;transform:rotate(60deg)}
}
/* Cases */
#Cases{margin-top:50px;}
#Cases .slick-slider{margin-bottom:0}
#Cases li{margin:10px;aspect-ratio: 4/3;display:flex;box-shadow: #b5b5b540 -2px 2px 5px 2px;}
#Cases li .text{padding:25px 30px;position:relative}
#Cases li img{object-fit:contain}
#Cases li h3{line-height:100%;margin:10px 0;font-weight:400}
#Cases li p{color:#f7d323;line-height:100%;font-size:14px;letter-spacing:2px}
#Cases li article{overflow:hidden;height:auto;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;font-size:15px;margin-top:20px}
#Cases .slick-dots{position:relative;margin-top:15px;bottom:0}
#Cases .slick-dots li{display:inline-flex;outline-offset:unset;outline:unset;background:unset;box-shadow: unset;}

/* Reviews */
#Reviews{padding-bottom:80px}
#Reviews:before{content:'';position:absolute;background:#f1faff;width:450px;height:680px;right:0;top:-30%}
#shareBox{margin-top:3vw}
#shareBox .item{background:#f3f3f3;position:relative;margin:15px 20px;padding:30px;height: 400px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:#b5b5b540 -2px 2px 5px 2px}
#shareBox .item .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:10px}
#shareBox .item .top .people{width:calc(100% - 90px)}
#shareBox .item .top .people h3{color:#323232;font-size:18px}
#shareBox .item .top .people span{display:block;color:#fbb03b}
#shareBox .item .bot{display:flex;justify-content:center}
#shareBox .item .bot img{width:250px;aspect-ratio:1/1;object-fit:contain}
#photo_area .item img{object-fit:cover;width:300px;aspect-ratio:3/2}
#photo_area .item article{height:auto;font-size:15px;text-align:justify}
#photo_area .tt{padding:50px 0}
#Contact{padding:0;background-color:#f1faff}
#ContactBox{display:grid;grid-template-columns:42% 40%;justify-content:space-between;gap:100px;align-items:center;width:90%;margin:0 0 0 auto}
#Contact .page_title:before{content:'';position:absolute;width:15px;height:15px;background:#fef614;left:190px;top:-15px;transform:rotate(45deg);animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s}
#ContactBox .Contact_txt{margin-bottom:60px;font-size:18px}
#ContactBox .contact_btn{display:flex;flex-direction:row;gap:20px}
#ContactBox .contact_btn .botn{width:200px;display:flex;justify-content:center;align-items:center;border:2px #4fa1c9 solid}
#ContactBox .contact_btn .botn:hover{background:#4fa1c9}
#ContactBox .contact_btn .botn a{text-align:center;padding:20px;width:100%;color:#4fa1c9}
#ContactBox .contact_btn .botn:hover a{color:#fff}
#ContactBox .Contact_right img{width: 1024px;object-fit:cover;aspect-ratio:1/1}

@media screen and (max-width:1500px){
	#aboutBox .left_box{width:calc(47.5vw - 25px)}
}
@media screen and (min-width:1281px){
	#productBox ul li:hover .relat_box:before{background:rgb(79 161 201 / 70%)}
	#productBox ul li:hover .info_box.abso_box{top:calc((100% - 240px) / 2)}
	#productBox ul li:hover .info_box article{margin:30px auto 15px;height:180px;opacity:1}
	#productBox ul li:hover .info_box .more_box{opacity:1}
}
@media screen and (max-width:1280px){
	#AboutSF{padding:10vw 0 4vw}
	#AboutSF:before{display:none}
	#AboutSF .nowrap_box{display:flex;flex-direction:column}
	#AboutSF .nowrap_box .info_item{width:100%}
	#AboutSF .img_item{width:100%;margin:50px 0 0px auto}
	#Reviews:before{display:none}
	#productBox ul li.slick-current .relat_box:before{background:rgb(79 161 201 / .8)}
	#productBox ul li.slick-current .info_box.abso_box{top:calc((100% - 280px) / 2)}
	#productBox ul li.slick-current .info_box article{margin:30px auto 30px;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}
	#shareBox .item{height: 380px;}
	#ContactBox{grid-template-columns:repeat(1,1fr);gap:80px;justify-content:center;padding-top:80px;width:100%;margin:0}
	#ContactBox .area{width:85%;margin:0 auto}
	#ContactBox .Contact_right img{width:1280px;height:unset;aspect-ratio:1 / 1}
}
@media screen and (max-width:1024px){
	#AboutSF h2,#AboutSF h2 span{font-size:25px}
	#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}
	#Service ul{grid-template-columns:repeat(2,1fr)}
	#mshareBox .workframe{width:100%}
	#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:768px){
	section .page_title,section .page_title span{font-size:36px}
	#AboutSF .more_btn{repeat(2,1fr):grid;grid-template-columns:1fr}
	#productBox .btn a#product_prev{left:-30px}
	#productBox .btn a#product_next{right:-30px}
	#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}
	#Service{background-image:none}
	#Service ul{grid-template-columns:repeat(1,1fr)}
	#ContactBox .contact_btn{flex-direction:column;align-items:center}
	#ContactBox .contact_btn .botn{width:100%}
	#Contact .page_title:before{left:150px}
}
@media screen and (max-width:640px){
	section{padding:10vw 0}
	#productBox{padding:10vw 8vw 0}
	#Service .page_title,#Cases .page_title,#Reviews .page_title{margin-bottom:20px}
	#productBox .page_title{margin-bottom:20px}
	#Cases{margin-top:0px}
	#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:550px){
	#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%}
}
@media screen and (max-width:425px){
	#shareBox .item{height: 45vh;}
	#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%}
}