.service_wrap{display:flex;justify-content:space-between;gap:20px;margin-top:80px}
.service_thum,.service_info{width:calc(50% - 10px);display:flex;flex-direction:column;justify-content:space-between;position:relative}
.service_info_01{border:1px solid #fff;padding:2em 1.5em;background:#000;color:#fff;height:calc(100% - 100px)}
.service_info_01 h3.h3_service_info{font-size:28px;font-weight:700;text-align:center;margin-bottom:16px;line-height:1.2}
.service_info_01 p{font-size:16px;line-height:1.8;font-weight:500}
.service_info_02{border:1px solid #000;padding:.6em 2em .8em;background:#fff;color:#000;margin-top:20px;position:relative}
.service_info_02 h4{font-weight:800}
.service_info_02 p{padding-top:.1em;font-size:16px;line-height:1.3;font-weight:800;letter-spacing:0;position:relative;overflow:visible}
.service_info::before{content:"";position:absolute;bottom:80px;right:0;width:20px;height:39px;background-image:url(../images/triangle-right.svg);background-size:contain;background-repeat:no-repeat;pointer-events:none}
@media (min-width: 769px) and (max-width: 960px) {
.service_info_01 p{font-size:15px;line-height:1.8;text-align:left}
.service_info_02 p{font-size:15px;line-height:1.3;text-align:left}
.service_info_02{height:100px}
}
@media (max-width: 768px) {
.service_info_02{margin-top: 10px;}
.service_wrap{flex-direction:column;margin-top:60px;gap:10px}
.service_thum,.service_info{width:100%}
.service_info_01 h3.h3_service_info{font-size:20px;line-height:1.3;text-align:left}
.service_info::before{bottom: 78px;}
}
@media (max-width: 428px) {
.service_info_02 p{font-size:14px}
.service_info_02{height:100px}
.service_info::before{content:"";position:absolute;bottom:86px}
}
@media (min-width: 769px) {
.service_wrap{background-image:url(../images/triangle.svg),url(../images/triangle-flip.svg);background-position:top center,bottom center;background-repeat:no-repeat,no-repeat}
.image-mask-bg{position:relative;overflow:hidden;padding:1em;width:100%;height:100%;background-size:cover;background-position:center;clip-path:polygon(0 0,calc(100% - 33px) 0,100% 33px,100% calc(100% - 33px),calc(100% - 33px) 100%,0 100%)}
}
.image-mask-bg img{filter:drop-shadow(0 0 0.8px white) drop-shadow(0 0 0.8px white)}
@media (max-width: 768px) {
.image-mask-bg{position:relative;overflow:hidden;padding:1em;width:100%;height:15em;background-size:cover;background-position:center;clip-path:polygon(0 0,100% 0,100% 100%,33px 100%,0 calc(100% - 33px))}
.service_thum::before{content:"";position:absolute;bottom:-25px;left:0;width:20px;height:39px;background-image:url(../images/triangle-left.svg);background-size:contain;background-repeat:no-repeat;pointer-events:none}
}
.service_info_01{position:relative;overflow:hidden;background-size:cover;background-position:center;clip-path:polygon(33px 0,100% 0,100% calc(100% - 33px),calc(100% - 33px) 100%,0 100%,0 33px)}
.service_info_01::before{content:"";position:absolute;top:32px;left:-1px;width:46px;height:40px;border-top:1.5px solid #fff;transform:rotate(-45deg);transform-origin:top left;pointer-events:none}
.service_info_01::after{content:"";position:absolute;bottom:32px;right:-1px;width:46px;height:40px;border-bottom:1px solid #fff;transform:rotate(-45deg);transform-origin:bottom right;pointer-events:none}
.service_info_02{position:relative;overflow:hidden;width:100%;background-size:cover;background-position:center;clip-path:polygon(0 0,calc(100% - 33px) 0,100% 33px,100% 100%,33px 100%,0 calc(100% - 33px))}
.service_info_02::before{content:"";position:absolute;top:32px;right:-1px;width:46px;height:40px;border-top:1.5px solid #000;transform:rotate(45deg);transform-origin:top right;pointer-events:none}
@media (min-width: 769px) {
.service_info_02::after{content:"";position:absolute;bottom:32px;left:-1px;width:46px;height:40px;border-bottom:1px solid #000;transform:rotate(45deg);transform-origin:bottom left;pointer-events:none}
}
@media (max-width: 768px) {
.service_info_02{position:relative;overflow:hidden;width:100%;background-size:cover;background-position:center;clip-path:polygon(0 0,calc(100% - 33px) 0,100% 33px,100% 100%,0 100%)}
}
@media (min-width: 769px) {
.image-mask-bg.mask-bg_01{background-image:url(../images/service_thum01.jpg)}
}
@media (max-width: 768px) {
.image-mask-bg.mask-bg_01{background-image:url(../images/service_thum01_sp.jpg)}
}
.image-mask-bg.mask-bg_02{background-image:url(../images/service_thum02.jpg)}
.image-mask-bg.mask-bg_03{background-image:url(../images/service_thum03.jpg)}
.service_name{width:auto;height:100%}
.business_activities{position:relative;max-width:860px;padding:1em 3.5em 1em 1em;width:calc(90% - 120px)}
.business_activities::before{content:"";position:absolute;width:100%;height:100%;top:0;right:0;border:1px solid #000;background:#F9CF00;clip-path:polygon(0 0,calc(100% - 33px) 0,100% 33px,100% 100%,0 100%);pointer-events:none}
.business_activities::after{content:"";position:absolute;top:0;right:0;width:33px;height:33px;background-image:url(../images/triangle_business.svg);background-size:contain;background-repeat:no-repeat;pointer-events:none}
.business_activities h2,.business_activities h3,.business_activities p{position:relative}
.business_activities p{font-weight:700;margin-top:5px}
.business_activities_wrap{margin-top:100px;position:relative}
@media (min-width: 769px) {
.business_activities_wrap .panda{position:absolute;top:0;right:-50px}
}
@media (max-width: 768px) {
.business_activities{width:100%;padding:1em 1em 2em}
.business_activities_wrap .panda{position:absolute;bottom:-220px;right:0;width:200px}
}
.h2business_activities{max-width:658px;padding-right:2em}
#page-service{position:relative;overflow:visible;z-index:0}
#page-service .panda{position:absolute;z-index:5;pointer-events:none}
@media (min-width: 769px) {
#page-service .panda{top:-20px;right:-50px;width:280px}
}
@media (max-width: 768px) {
.business_activities{width:100%;padding:1em 1em 2em}
#page-service .panda{bottom:-173px;right:-20px;width:170px}
.common_background{padding-bottom:30vh!important}
}
@media (max-width: 495px) {
.common_background{padding-bottom:20vh!important}
.service_info_01 p{font-size:14px}
}