html { scroll-behavior:smooth; }
.mb { display:none; }
.project_wrap .criteria { width:1280px; height:100%; margin:0 auto; }
.project_wrap h3 { margin-bottom:50px; font-size:48px; font-weight:700; text-align:center; }
.project_wrap header { height:80px; background:#00FFCA; }
.project_wrap header .criteria { display:flex; align-items:center; justify-content:space-between; }
.project_wrap header .criteria p { font-size:30px; font-weight:700; }
.project_wrap header .criteria a { width:100px; height:38px; line-height:38px; text-align:center; color:#fff; border:0; border-radius:50px; background:#1a1a1a; }
/********** side **********/
.project_wrap .side { position:fixed; bottom:20px; right:20px; z-index:100; }
.project_wrap .side div button { width:70px; height:70px; margin-top:10px; font-weight:500; font-size:12px; border:0; border-radius:50%; box-shadow:0 0 3px 1px rgba(0,0,0,0.2); display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; }
.project_wrap .side div button img { width:18px; margin-bottom:5px; }
.project_wrap .side div button.talk { background:#1a1a1a; color:#fff; }
/**************************/
.project_wrap .content1 { height:calc(100vh - 80px); position:relative; background:#00FFCA; }
.project_wrap .content1 h1 { height:220px; font-size:70px; font-weight:700; line-height:110px; text-align:center; white-space:nowrap; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.project_wrap .content1 h1::after { content: "|"; font-weight:600; animation: blink 0.5s step-end infinite; margin-left:2px; }
.project_wrap .content2 { padding:120px 0; background:#FAFAFA; }
.project_wrap .content2 ul { display:flex; flex-wrap:wrap; }
.project_wrap .content2 ul li { width:calc((100% - 50px) / 3); height:200px; margin-right:25px; padding:50px; border-radius:30px; position:relative; }
.project_wrap .content2 ul li:nth-child(3n) { margin-right:0; }
.project_wrap .content2 ul li:nth-child(n+4) { margin-top:25px; }
.project_wrap .content2 ul li.navy { color:#fff; background:#0A4D68; }
.project_wrap .content2 ul li.sky { background:#05BFDB; }
.project_wrap .content2 ul li.mainC { background:#00FFCA; }
.project_wrap .content2 ul li p { font-size:24px; font-weight:700; display:inline-block; }
.project_wrap .content2 ul li .img_box { width:150px; height:150px; position:absolute; top:50%; right:50px; transform:translateY(-50%); background:url('/image/web/con1.svg')no-repeat; }
.project_wrap .content2 ul li.invoice .img_box { background-position:-150px 0; }
.project_wrap .content2 ul li.app .img_box { background-position:-300px 0; }
.project_wrap .content2 ul li.trace .img_box { background-position:0 -150px; }
.project_wrap .content2 ul li.total .img_box { background-position:-150px -150px; }
.project_wrap .content2 ul li.calculate .img_box { background-position:-300px -150px; }
.project_wrap .content2 ul li.stock .img_box { background-position:0 -300px; }
.project_wrap .content2 ul li.talk .img_box { background-position:-150px -300px; }
.project_wrap .content2 ul li.api .img_box { background-position:-300px -300px; }
.project_wrap .content3 { padding:120px 0; }
.project_wrap .content3 .criteria { display:flex; justify-content:space-between; align-items:center; }
.project_wrap .content3 .criteria .text_box h3 { margin-bottom:0; text-align:left; line-height:70px; }
.project_wrap .content3 .criteria .text_box p { margin-top:30px; font-size:18px; line-height:27px; color:#666; }
.project_wrap .content3 .criteria .text_box a { margin-top:30px; font-size:20px; font-weight:700; color:#666; display:inline-block; }
.project_wrap .content4 { padding:80px 0; background:url('/image/web/con4.jpg')no-repeat 90% 50% #F4F6F9; }
.project_wrap .content4 .criteria { align-items:center; justify-content:space-between; }
.project_wrap .content4 .criteria h3 { margin:0; text-align:left; }
.project_wrap .content4 .criteria p { margin:30px 0 0 0; font-size: 24px;}
.project_wrap .content4 .criteria button { width:150px; height:60px; color:#fff; border:0; border-radius:10px; font-size:18px; font-weight:700; background:#1a1a1a; }
.project_wrap footer { padding:50px 0; }
.project_wrap footer p { color:#666; text-align:center; }
.project_wrap footer p span { font-weight:700; color:#1a1a1a; }
.project_wrap footer p:last-child { margin-top:15px; }

@keyframes blink {
    50% {
        opacity: 0;
    }
}

@media only screen and (max-width:768px){
    .mb { display:block; }
    .project_wrap h3 { font-size:25px; margin-bottom:40px; }
    .project_wrap .criteria { width:90%; }
    .project_wrap header .criteria p { font-size:20px; }
    .project_wrap header .criteria a { width:80px; height:32px; line-height:32px; }
    .project_wrap .content1 h1 { height:90px; font-size:30px; line-height:45px; }
    .project_wrap .content2 { padding:50px 0; }
    .project_wrap .content2 ul li { width:calc((100% - 25px) / 2); height:120px; padding:20px; border-radius:20px; }
    .project_wrap .content2 ul li:nth-child(3n) { margin-right:25px; }
    .project_wrap .content2 ul li:nth-child(n+4) { margin-top:0; }
    .project_wrap .content2 ul li:nth-child(2n) { margin-right:0; }
    .project_wrap .content2 ul li:nth-child(n+3) { margin-top:25px; }
    .project_wrap .content2 ul li p { font-size:18px; }
    .project_wrap .content2 ul li .img_box { width:90px; height:90px; right:20px; top:60%; background-size:270px; }
    .project_wrap .content2 ul li.invoice .img_box { background-position:-90px 0; }
    .project_wrap .content2 ul li.app .img_box { background-position:-180px 0; }
    .project_wrap .content2 ul li.trace .img_box { background-position:0 -90px; }
    .project_wrap .content2 ul li.total .img_box { background-position:-90px -90px; }
    .project_wrap .content2 ul li.calculate .img_box { background-position:-180px -90px; }
    .project_wrap .content2 ul li.stock .img_box { background-position:0 -180px; }
    .project_wrap .content2 ul li.talk .img_box { background-position:-90px -180px; }
    .project_wrap .content2 ul li.api .img_box { background-position:-180px -180px; }
    .project_wrap .content3 { padding:50px 0; }
    .project_wrap .content3 .criteria { flex-wrap:wrap; }
    .project_wrap .content3 .criteria .text_box h3 { line-height:35px; }
    .project_wrap .content3 .criteria .text_box p { margin-top:15px; font-size:14px; line-height:20px; }
    .project_wrap .content3 .criteria .text_box a { margin-top:15px; font-size:16px; }
    .project_wrap .content3 .criteria .img_box { width:100%; }
    .project_wrap .content3 .criteria .img_box img { width:100%; margin-top:20px; }
    .project_wrap .content4 { padding:50px 0; background:#F4F6F9; }
    .project_wrap .content4 .criteria { margin-bottom:40px; flex-wrap:wrap; position:relative; }
    .project_wrap .content4 .criteria h3 { line-height:32px; }
    .project_wrap .content4 .criteria p { font-size: 18px; }
    .project_wrap .content4 .criteria h3 span { display:none; }
    .project_wrap .content4 .criteria button { width:100px; height:38px; font-size:14px; position:absolute; top:60px; right:0; }
    .project_wrap footer { padding:35px 0; }
    .project_wrap footer p { font-size:13px; }
    .project_wrap footer p:last-child { margin-top:10px; }
}

@media only screen and (max-width:480px){
    .pc { display:none; }
    .project_wrap h3 { font-size:23px; margin-bottom:30px; }
    .project_wrap .content1 h1 { height:135px; }
    .project_wrap .content2 ul li { width:calc((100% - 15px) / 2); margin-right:15px; }
    .project_wrap .content2 ul li:nth-child(3n) { margin-right:15px; }
    .project_wrap .content2 ul li:nth-child(n+4) { margin-top:0; }
    .project_wrap .content2 ul li:nth-child(2n) { margin-right:0; }
    .project_wrap .content2 ul li:nth-child(n+3) { margin-top:15px; }
    .project_wrap .content2 ul li p { font-size:16px; }
    .project_wrap .content2 ul li .img_box { width:70px; height:70px; right:10px; top:65%; background-size:210px; }
    .project_wrap .content2 ul li.invoice .img_box { background-position:-70px 0; }
    .project_wrap .content2 ul li.app .img_box { background-position:-140px 0; }
    .project_wrap .content2 ul li.trace .img_box { background-position:0 -70px; }
    .project_wrap .content2 ul li.total .img_box { background-position:-70px -70px; }
    .project_wrap .content2 ul li.calculate .img_box { background-position:-140px -70px; }
    .project_wrap .content2 ul li.stock .img_box { background-position:0 -140px; }
    .project_wrap .content2 ul li.talk .img_box { background-position:-70px -140px; }
    .project_wrap .content2 ul li.api .img_box { background-position:-140px -140px; }
    .project_wrap .content3 .criteria .text_box h3 { line-height:30px; }
    .project_wrap .content4 .criteria { margin-bottom:0; flex-wrap:wrap; }
    .project_wrap .content4 .criteria h3 { width:100%; line-height:30px; }
    .project_wrap .content4 .criteria h3 span { display:inline-block; }
    .project_wrap .content4 .criteria p { font-size: 16px; }
    .project_wrap .content4 .criteria button { margin-top:15px; position:initial; }
    .project_wrap footer p { font-size:12px; }
}


/*
@media only screen and (max-width:1440px){
    .project_wrap .criteria { width:90%; }
}
@media only screen and (max-width:1280px){
    .project_wrap h3 { font-size:35px; }
    .project_wrap header .criteria p { font-size:25px; }
    .project_wrap .content1 h1 { height:150px; font-size:50px; line-height:75px; }
    .project_wrap .content2 { padding:100px 0; }
    .project_wrap .content2 ul li { height:170px; padding:30px; }
    .project_wrap .content2 ul li p { font-size:20px; }
    .project_wrap .content2 ul li .img_box { width:120px; height:120px; background-size:360px; }
    .project_wrap .content2 ul li.invoice .img_box { background-position:-120px 0; }
    .project_wrap .content2 ul li.app .img_box { background-position:-240px 0; }
    .project_wrap .content2 ul li.trace .img_box { background-position:0 -120px; }
    .project_wrap .content2 ul li.total .img_box { background-position:-120px -120px; }
    .project_wrap .content2 ul li.calculate .img_box { background-position:-240px -120px; }
    .project_wrap .content2 ul li.stock .img_box { background-position:0 -240px; }
    .project_wrap .content2 ul li.talk .img_box { background-position:-120px -240px; }
    .project_wrap .content2 ul li.api .img_box { background-position:-240px -240px; }

}
*/