@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');html{scroll-behavior:smooth;}
#contents.contents_inner{width:100%;margin:0;padding-top:190px;}
.tradeServices *{letter-spacing:0;box-sizing:border-box;}
.tradeServices .wrap{position:relative;width:1440px;height:100%;margin:auto;}
.tradeServices .wrap:after{display:block;content:"";clear:both;}
.tradeServices section{width:100%;}
.tradeServices .visual{position:relative;width:100%;height:750px;background:linear-gradient(-45deg,#f8a186,#f285af,#85cce6,#56eac7);animation:visualBg 25s ease infinite;background-size:800% 800%;}
.tradeServices .visual .ptxt{padding-top:100px;font-size:70px;text-align:right;color:#FFF;font-family:'Monoton',sans-serif;;line-height:1.8;word-spacing:0.2em;overflow:hidden;}
.tradeServices .visual .ptxt:before{position:absolute;top:60px;left:0;display:block;content:"";width:528px;height:388px;background:url('../images/common/visualImg.png') no-repeat center center;background-size:100%;}
.tradeServices .visual .ptxt span[class*=slideTxt]{display:block;font-size:inherit;color:inherit;font-weight:inherit;opacity:0;transition:opacity 1s,transform 1s;transform:translateX(3vw);}
.tradeServices .visual .ptxt span.slideTxt1{transition-delay:0s;}
.tradeServices .visual .ptxt span.slideTxt2{transition-delay:0.5s;}
.tradeServices .visual .ptxt span.slideTxt3{transition-delay:1s;}
.tradeServices .visual .ptxt span.slideTxt4{transition-delay:1.5s;}
.tradeServices .visual .titleTxt{position:absolute;left:0;bottom:60px;}
.tradeServices .visual .titleTxt h1{margin-bottom:10px;font-size:40px;font-weight:900;color:#FFF}
.tradeServices .visual .titleTxt p{font-size:24px;line-height:1.3;color:#FFF;font-weight:300;}
.tradeServices .visual .titleTxt p strong,.tradeServices .visual .titleTxt p strong span{font-size:inherit;color:inherit;font-weight:inherit;font-weight:600;}
@keyframes visualBg{0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.tradeServices .menuWrap{position:relative;width:100%;padding:40px 0;}
.tradeServices .menuWrap h2{float:left;width:15%;padding-top:20px;color:#3a3a3a;font-size:35px;font-weight:600;}
.tradeServices .menuWrap .menu{float:right;width:85%;}
.tradeServices .menuWrap .menu>li{width:100%;border-bottom:1px solid #000;transition:all 0.7s;z-index:1;}
.tradeServices .menuWrap .menu>li:last-child{border-bottom:none;}
.tradeServices .menuWrap .menu>li .popBtn{position:relative;display:block;padding:30px 0 40px 50px;}
.tradeServices .menuWrap .menu>li .popBtn:before{position:absolute;top:50%;transform:translateY(-50%);right:50px;display:block;content:"";width:46px;height:34px;background:url('../images/common/arrow_b.png') no-repeat center center;background-size:100%;}
.tradeServices .menuWrap .menu>li .popBtn:after{position:absolute;top:0;left:0;display:block;content:"";width:0%;height:100%;background:#3a3a3a;transition:all 0.5s;}
.tradeServices .menuWrap .menu>li .popBtn .num{font-size:30px;font-weight:500;color:#3a3a3a;}
.tradeServices .menuWrap .menu>li .popBtn .menuName{font-size:50px;font-weight:600;color:#3a3a3a;line-height:1.5;}
.tradeServices .menuWrap .menu>li .popBtn .menuTxt{font-size:20px;font-weight:500;color:#3a3a3a;line-height:1.3;}
.tradeServices .menuWrap .menu>li:hover .num,.tradeServices .menuWrap .menu>li:hover .menuName,.tradeServices .menuWrap .menu>li:hover .menuTxt{color:#FFF;}
.tradeServices .menuWrap .menu>li:hover .popBtn:before{background:url('../images/common/arrow_w.png') no-repeat center center;}
.tradeServices .menuWrap .menu>li:hover .popBtn:after{width:100%;z-index:-1;}
.tradeServices .howweWrap{padding-bottom:230px;background:url('../images/common/howwebg.webp') no-repeat center center;background-size:1920px 100%;}
.tradeServices .howweWrap h2{padding:90px 0;text-align:center;font-size:72px;font-weight:800;color:#FFF;}
.tradeServices .howweWrap p{font-size:30px;color:#FFF;line-height:1.5;}
.tradeServices .howweWrap img{position:absolute;top:35%;right:0;animation:howwe 6s ease infinite;}
@keyframes howwe{0%{top:35%}
50%{top:45%}
100%{top:35%}
}
.tradeServices .benefitWrap{position:relative;width:100%;padding:100px 0;}
.tradeServices .benefitWrap h2{float:left;width:15%;color:#3a3a3a;font-size:35px;font-weight:600;}
.tradeServices .benefitWrap ul{float:left;width:85%;opacity:0;transition:all 1.3s;transform:translateY(4vw);}
.tradeServices .benefitWrap ul:after{display:block;content:"";clear:both;}
.tradeServices .benefitWrap ul li{float:left;width:30%;text-align:left;}
.tradeServices .benefitWrap ul li+li{margin-left:4%;}
.tradeServices .benefitWrap ul li strong{display:block;padding:25px 0 4px 0;font-size:30px;font-weight:600;color:#3a3a3a;}
.tradeServices .benefitWrap ul li p{font-size:20px;font-weight:500;color:#3a3a3a;line-height:1.3;}
@media all and (max-width:1440px){.contents_inner{padding:0;}
}
@media all and (min-width:1031px) and (max-width:1440px){.tradeServices .wrap{width:100%;padding:0 4vw;}
.tradeServices .visual .ptxt{padding-top:60px;font-size:65px;}
.tradeServices .visual .titleTxt{left:40px;bottom:38px;}
.tradeServices .visual .titleTxt h1{font-size:35px;}
.tradeServices .visual .titleTxt p{font-size:22px;}
.tradeServices .menuWrap h2{font-size:30px;}
.tradeServices .menuWrap .menu{width:80%;}
.tradeServices .menuWrap .menu>li .popBtn .num{font-size:26px;}
.tradeServices .menuWrap .menu>li .popBtn .menuName{font-size:47px;}
.tradeServices .menuWrap .menu>li .popBtn .menuTxt{font-size:18px;width:75%;}
.tradeServices .howweWrap{padding-bottom:200px;background-size:auto 100%;}
.tradeServices .howweWrap h2{padding:45px 0;}
.tradeServices .howweWrap img{width:40%;right:5%;}
.tradeServices .benefitWrap h2{font-size:30px;}
}
@media all and (max-width:1030px){.tradeServices .wrap{width:100%;padding:0 4vw;}
.tradeServices .visual{height:auto;}
.tradeServices .visual .ptxt{padding:10vw 0 5vw 0;font-size:6.6vw;}
.tradeServices .visual .ptxt:before{top:6vw;left:1vw;width:30%;height:45%;z-index:-1;}
.tradeServices .visual .titleTxt{position:relative;left:0;bottom:0;padding:0 0 5vw 0;}
.tradeServices .visual .titleTxt h1{margin-bottom:1vw;font-size:5.5vw;}
.tradeServices .visual .titleTxt p{font-size:3.5vw;}
.tradeServices .menuWrap h2{float:none;width:100%;padding:2vw 0;text-align:center;font-size:5vw;}
.tradeServices .menuWrap .menu{float:none;width:100%;}
.tradeServices .menuWrap .menu>li{width:100%;}
.tradeServices .menuWrap .menu>li .popBtn{padding:4vw 0 4vw 2vw;}
.tradeServices .menuWrap .menu>li .popBtn:before{right:3vw;display:block;content:"";width:4vw;height:4vw;background:url('../images/tradeservice/arrow_b.png') no-repeat center center;background-size:100%;}
.tradeServices .menuWrap .menu>li .popBtn .num{font-size:4.5vw;}
.tradeServices .menuWrap .menu>li .popBtn .menuName{margin-bottom:2vw;font-size:5.7vw;width:80%;line-height:1;}
.tradeServices .menuWrap .menu>li .popBtn .menuTxt{font-size:3.5vw;width:80%;}
.tradeServices .menuWrap .menu>li:hover .popBtn:before{background:url('../images/tradeservice/arrow_w.png') no-repeat center center;background-size:100%;}
.tradeServices .howweWrap{padding-bottom:15vw;background-size:auto 100%;}
.tradeServices .howweWrap h2{padding:5vw 0 12vw 0;font-size:6vw;}
.tradeServices .howweWrap p{font-size:3vw;}
.tradeServices .howweWrap img{width:45%;right:5%;}
.tradeServices .benefitWrap{position:relative;width:100%;padding:5vw 0 15vw 0;}
.tradeServices .benefitWrap h2{float:none;width:100%;padding:5vw 0;text-align:center;font-size:5vw;}
.tradeServices .benefitWrap ul{float:none;width:100%;}
.tradeServices .benefitWrap ul li{text-align:center;width:100%;}
.tradeServices .benefitWrap ul li+li{margin-left:0;margin-top:5vw;}
.tradeServices .benefitWrap ul li:after{display:block;content:"";clear:both;}
.tradeServices .benefitWrap ul li img{float:left;width:24%;margin-right:5vw;text-align:center;}
.tradeServices .benefitWrap ul li strong{padding:1vw 0 0.5vw 0;font-size:4vw;text-align:left;}
.tradeServices .benefitWrap ul li p{width:94%;font-size:3.5vw;text-align:left;line-height:1.1;}
}
@media all and (max-width:800px){.popWrap{top:120px;height:calc(100% - 120px);}
#contents.contents_inner{padding-top:120px;}
}