@charset "UTF-8";

#wrap #main {width:100%;position: relative;z-index: 2;}
#wrap #main #section1 {width:100%;}
#wrap #main #section1 .wrap {width:100%;}
#wrap #main #section1 .wrap .gap {width:100%;}
#wrap #main #section1 .wrap .gap .content {width:100%;background: url(/portfolio/narapay/img/narapay_terminal/section1_banner.jpg)no-repeat 50% 50%;background-size: cover;}
#wrap #main #section1 .wrap .gap .content .title-wrap {width:100%;text-align: center;}
#wrap #main #section1 .wrap .gap .content .title-wrap > h3 {font-family: 'engn';font-size: 47px;font-weight: 400;color:#fae445;position: relative;z-index: 3;line-height: 120%;}
#wrap #main #section1 .wrap .gap .content .title-wrap > img {width:300px;position: relative;z-index: 2;}
#wrap #main #section1 .wrap .gap .content .title-wrap > p {font-size: 19px;font-weight: 400;color:#fff;padding-top:20px;line-height: 130%;letter-spacing: -1px;}

#wrap #main #section2 {width:100%;}
#wrap #main #section2 .wrap {width:auto;max-width:1200px;padding:0 10px;margin:0 auto;}
#wrap #main #section2 .wrap .gap {width:100%;padding:100px 0;}
#wrap #main #section2 .wrap .gap .content {width:100%;}
#wrap #main #section2 .wrap .gap .content .title-wrap {width:100%;}
#wrap #main #section2 .wrap .gap .content .title-wrap .head-text {width:100%;}
#wrap #main #section2 .wrap .gap .content .title-wrap .head-text > h3 {font-size: 15px;font-weight: 300;color:#31b7bc;text-align: left;letter-spacing: 5px;}
#wrap #main #section2 .wrap .gap .content .title-wrap .body-text {width:100%;margin-top:5px;}
#wrap #main #section2 .wrap .gap .content .title-wrap .body-text .left-wrap {float:left;width:50%;}
#wrap #main #section2 .wrap .gap .content .title-wrap .body-text .left-wrap > h2 {font-size: 47px;font-weight: 700;color:#303030;text-transform: uppercase;letter-spacing: -3px;line-height: 140%;}
#wrap #main #section2 .wrap .gap .content .title-wrap .body-text .left-wrap > h2 > span {font-size: 47px;font-weight: 300;color:#303030;letter-spacing: -3px;line-height: 140%;}
#wrap #main #section2 .wrap .gap .content .title-wrap .body-text .right-wrap {float:left;width:50%;padding:40px 0 60px 0; }
#wrap #main #section2 .wrap .gap .content .title-wrap .body-text .right-wrap > p {font-size: 19px;font-weight: 400;color:#303030;letter-spacing: -2px;line-height: 150%;}
#wrap #main #section2 .wrap .gap .content .title-wrap .body-text .right-wrap > p > span {font-size: 19px;font-weight: 700;color:#303030;letter-spacing: -2px;line-height: 150%;}
#wrap #main #section2 .wrap .gap .content .body-content {width:100%;position: relative;background-color: #fafafa;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box {width:80%;height:700px;position: relative;float:right;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box {width:280px; height:496px;position: absolute;left:50%;transform: translateX(-50%);top:100px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box > img {position: absolute;left:50%;transform: translateX(-50%);width:280px;top:0;z-index: 2;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box > img.ter-mid {display: block;top:137px;left:50%;width:211px;z-index: 4;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box > img.paper {width:155px;z-index: 2;top:140px;transition: all 1s ease-in;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box > img.card {width:155px;top:400px;z-index: 1;opacity: 0;transition: all 1.5s ease-in-out;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box > img.card2 {width:234px;z-index: 3;top:-10px;opacity: 0;transition: all 1.5s ease-in-out;}

#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .paper-wrap:hover ~ img.paper {top:00px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .card-wrap:hover ~ img.card {top:320px;opacity: 1;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .card2-wrap:hover ~ img.card2 {top:220px;opacity: 1;}

#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .over-wrap {position: absolute;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .paper-wrap {left:50%;transform: translateX(-105px);top:30px;z-index: 6;width:200px;height:100px;background-color: transparent;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .card-wrap {left:50%;transform: translateX(-104px);top:423px;z-index: 6;width:200px;height:100px;background-color: transparent;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .card2-wrap {left:50%;transform: translateX(95px);top:130px;z-index: 6;width:70px;height:250px;background-color: transparent;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .ra-wrap {position: absolute;top:-50px;left:0;width:25px;height:25px;background-color: #fae445;border-radius: 50%;z-index: 5;text-align: center;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .ra-wrap > span {font-size: 17px;font-weight: 800;color:#303030;display: inline-block;line-height: 25px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .ra-ter {left:50%;transform: translateX(-16px);top:5px;z-index: 2;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .ra-paper {left:50%;transform: translateX(-16px);top:110px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .ra-paper > img {position: absolute;top:-160px;left:-8px;width:40px;animation: updownMove1 2s infinite;transform: rotate(180deg);}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .ra-mid {left:50%;transform: translateX(-90px);top:245px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .ra-card {left:50%;transform: translateX(-20px);top:463px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .ra-card > img {position: absolute;top:-80px;left:-8px;width:40px;animation: updownMove2 2s infinite;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .ra-card2 {left:50%;transform: translateX(103px);top:245px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-box .temineal-box .ra-card2 > img {position: absolute;top:-170px;left:-8px;transform: rotate(180deg);width:40px;animation: updownMove3 2s infinite;}
#wrap #main #section2 .wrap .gap .content .body-content .img-text-box {float:right;width:20%;background-color: #eee;height:700px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-text-box .text-row {display: block;width:100%;margin-left:25px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-text-box .text-row:nth-child(1) {margin-top:100px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-text-box .text-row:nth-child(2) {margin-top:30px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-text-box .text-row:nth-child(3) {margin-top:80px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-text-box .text-row:nth-child(4) {margin-top:30px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-text-box .text-row:nth-child(5) {margin-top:30px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-text-box .text-row .row-gap {display:inline-block;margin:0 auto;}
#wrap #main #section2 .wrap .gap .content .body-content .img-text-box .text-row .row-gap .ra-wrap {width:20px;height:20px;background-color: #fae445;border-radius: 50%;z-index: 5;text-align: center;font-size: 17px;font-weight: 800;color:#303030;display: inline-block;line-height: 20px;}
#wrap #main #section2 .wrap .gap .content .body-content .img-text-box .text-row .row-gap > p {font-size: 19px;font-weight: 700;color:#303030;letter-spacing: -2px;line-height: 200%;}
#wrap #main #section2 .wrap .gap .content .fot-wrap {width:100%;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap {width:100%;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal {width:25%;float: left;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal .gal-gap {width:auto;margin-top:50px;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal:first-child .gal-gap {margin-left:0;margin-right:45px;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal:nth-child(2) .gal-gap {margin-left:15px;margin-right:30px;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal:nth-child(3) .gal-gap {margin-left:30px;margin-right:15px;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal:last-child .gal-gap {margin-right:0;margin-left:45px;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal .gal-gap .gal-content {width:100%;background-color: #eee;height:220px;border-radius: 30px;text-align: center;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal .gal-gap .gal-content .content-box {width:100%;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal:nth-child(1) .gal-gap .gal-content .content-box > img {width:35.686284%;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal:nth-child(2) .gal-gap .gal-content .content-box > img {width:28.627456%;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal:nth-child(3) .gal-gap .gal-content .content-box > img {width:44.313728%;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal:nth-child(4) .gal-gap .gal-content .content-box > img {width:31.372549%;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal .gal-gap .gal-content .content-box > h2 {font-size: 21px;font-weight: 800;color:#303030;padding:20px 0 15px 0;letter-spacing: -1px;}
#wrap #main #section2 .wrap .gap .content .fot-wrap ul.gal-wrap li.gal .gal-gap .gal-content .content-box > h3 {font-size: 19px;font-weight: 600;color:#303030;letter-spacing: -1px;}
@keyframes updownMove1 {
    0%    {top:-60px;}
    50%   {top:-70px;}
    100%  {top:-60px;}
}
@keyframes updownMove2 {
    0%    {top:25px;}
    50%   {top:35px;}
    100%  {top:25px;}
}
@keyframes updownMove3 {
    0%    {top:-60px;}
    50%   {top:-70px;}
    100%  {top:-60px;}
}

#wrap #main #section3 {width:100%;background:url(../img/narapay_terminal/section3_bg.jpg) no-repeat 50% 50%;background-size:cover ;}
#wrap #main #section3 .wrap {width:auto;max-width: 1200px;padding:0 10px;margin: 0 auto;}
#wrap #main #section3 .wrap .gap {width:100%;padding:100px 0;}
#wrap #main #section3 .wrap .gap .content {width:100%;}
#wrap #main #section3 .wrap .gap .content .box-container {width:100%;}
#wrap #main #section3 .wrap .gap .content .box-container .title-wrap {width:100%;}
#wrap #main #section3 .wrap .gap .content .box-container .title-wrap > h2 {font-size: 21px;font-weight: 800;color:#303030;line-height: 160%;text-align: left;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal1 {width:100%;margin-top:30px;margin-bottom:50px;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal1 li.gal-wrap {width:33%;float: left;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal1 li.gal-wrap .gal-gap {width:auto;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal1 li.gal-wrap:nth-child(1) .gal-gap {margin-right:16px;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal1 li.gal-wrap:nth-child(2) .gal-gap {margin:0 8px;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal1 li.gal-wrap:nth-child(3) .gal-gap {margin-left:16px;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal2 {width:100%;margin-top:30px;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal2 > li.gal-wrap {width:50%;float: left;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal2 li.gal-wrap .gal-gap {width:auto;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal2 li.gal-wrap:nth-child(1) .gal-gap {margin-right:20px;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal2 li.gal-wrap:nth-child(2) .gal-gap {margin-left:20px;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal2 li.gal-wrap .gal-gap .gal-content {width:100%;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal li.gal-wrap .gal-gap .gal-content {width:100%;background-color:#fff;height:400px;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal li.gal-wrap .gal-gap .gal-content .img-box {height:80%;width:100%;overflow: hidden;text-align: center;position: relative;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal li.gal-wrap .gal-gap .gal-content .img-box > img {height:100%;position: absolute;left:50%;transform: translateX(-50%);}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal li.gal-wrap .gal-gap .gal-content .text-box {width:100%;height:20%;text-align: center;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal li.gal-wrap .gal-gap .gal-content .text-box > h2 {font-size: 19px;font-weight: 800;color:#303030;line-height: 80px;letter-spacing: -1px;}
#wrap #main #section3 .wrap .gap .content .box-container ul.gal li.gal-wrap .gal-gap .gal-content .text-box > h2 > span {font-size: 19px;font-weight: 400;color:#303030;letter-spacing: -1px;}

#wrap #main #section4 {width:100%;}
#wrap #main #section4 .wrap {width:auto;max-width:1200px;padding:0 10px;margin:0 auto;}
#wrap #main #section4 .wrap .gap {width:100%;padding:100px 0;}
#wrap #main #section4 .wrap .gap .content {width:100%;}
#wrap #main #section4 .wrap .gap .content .title-wrap {width:100%;}
#wrap #main #section4 .wrap .gap .content .title-wrap .head-text {width:100%;}
#wrap #main #section4 .wrap .gap .content .title-wrap .head-text > h3 {font-size: 15px;font-weight: 300;color:#31b7bc;text-align: left;letter-spacing: 5px;}
#wrap #main #section4 .wrap .gap .content .title-wrap .body-text {width:100%;margin-top:5px;}
#wrap #main #section4 .wrap .gap .content .title-wrap .body-text .left-wrap {float:left;width:50%;}
#wrap #main #section4 .wrap .gap .content .title-wrap .body-text .left-wrap > h2 {font-size: 47px;font-weight: 700;color:#303030;text-transform: uppercase;letter-spacing: -3px;line-height: 140%;}
#wrap #main #section4 .wrap .gap .content .title-wrap .body-text .left-wrap > h2 > span {font-size: 47px;font-weight: 300;color:#303030;letter-spacing: -3px;line-height: 140%;}
#wrap #main #section4 .wrap .gap .content .title-wrap .body-text .right-wrap {float:left;width:50%;padding:60px 0 40px 0;}
#wrap #main #section4 .wrap .gap .content .title-wrap .body-text .right-wrap > p {font-size: 19px;font-weight: 400;color:#303030;letter-spacing: -2px;line-height: 150%;}
#wrap #main #section4 .wrap .gap .content .title-wrap .body-text .right-wrap > p > span {font-size: 19px;font-weight: 700;color:#303030;letter-spacing: -2px;line-height: 150%;}
#wrap #main #section4 .wrap .gap .content .content-wrap {width:100%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal {width:100%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap {width:25%;float:left;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap .gal-gap {width:auto;margin-top:15px;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(4n-3) .gal-gap {margin-right:15px;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(4n-2) .gal-gap {margin-right:10px;margin-left:5px;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(4n-1) .gal-gap {margin-right:5px;margin-left:10px;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(4n) .gal-gap {margin-left:15px;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap .gal-gap .gal-content {width:100%;border-radius: 50%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(1) .gal-gap .gal-content {background-color: #d2edee;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(2) .gal-gap .gal-content {background-color: #faf3c3;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(3) .gal-gap .gal-content {background-color: #d2edee;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(4) .gal-gap .gal-content {background-color: #faf3c3;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(5) .gal-gap .gal-content {background-color: #faf3c3;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(6) .gal-gap .gal-content {background-color: #d2edee;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(7) .gal-gap .gal-content {background-color: #faf3c3;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(8) .gal-gap .gal-content {background-color: #d2edee;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap .gal-gap .gal-content .paddigbox {text-align: center;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap .gal-gap .gal-content .paddigbox .imgbox {width:100%;line-height:120px;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap .gal-gap .gal-content .paddigbox .imgbox > img {}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(1) .gal-gap .gal-content .paddigbox .imgbox > img {width:40%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(2) .gal-gap .gal-content .paddigbox .imgbox > img {width:42%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(3) .gal-gap .gal-content .paddigbox .imgbox > img {width:38%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(4) .gal-gap .gal-content .paddigbox .imgbox > img {width:31%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(5) .gal-gap .gal-content .paddigbox .imgbox > img {width:36%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(6) .gal-gap .gal-content .paddigbox .imgbox > img {width:44%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(7) .gal-gap .gal-content .paddigbox .imgbox > img {width:35%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap:nth-child(8) .gal-gap .gal-content .paddigbox .imgbox > img {width:24%;}
#wrap #main #section4 .wrap .gap .content .content-wrap ul.gal li.gal-wrap .gal-gap .gal-content .paddigbox > h2 {font-size: 21px;font-weight: 700;color:#303030;width:100%;line-height: 110%;padding-bottom:10px;padding-top:10px;}