﻿@charset "UTF-8";

/*Common*/
.spoutline{
    width:100%;
    height:auto;
    float:left;
}
.spmain-outline{
    width:100%;
    height:auto;
    float:left;
}
.spmain-block{
    width:80%;
    height:auto;
    padding:100px 0 200px 0;
    height:auto;
    display:block;
    margin:0 auto;
}
.sp-title{
    width:100%;
    height:70px;
    float:left;
    color:white;
    font-size:30px;
    text-align:center;
    line-height:70px;
}
.sp-title.blue{
    width:100%;
    height:70px;
    float:left;
    background-color:#011833;
    border-bottom:2px solid #000012;
}
.sp-title.grown{
    width:100%;
    height:70px;
    float:left;
    background-color:#ac7d0b;
    border-bottom:2px solid #7c5904;
}

.sp-product-info{
    width:100%;
    height:auto;
    float:left;
    margin:0 0 100px 0;
}
.sp-product-info>img{
    width:auto;
    height:auto;
    display:block;
    margin:0 auto;
}

.sp-product-intro-block{
    width:auto;
    max-width:500px;
    height: auto;
    position: absolute;
}
.sp-product-intro-block.left{
    float:left;
}
.sp-product-intro-block.right{
    float:right;
}
.sp-product-intro-block:nth-last-child(3){
    margin-top:200px;
    left:300px;
}
.sp-product-intro-block:nth-last-child(2){
    margin-top:400px;
    right:150px;
}
.sp-product-intro-block:nth-last-child(1){
    right:200px;
}

.sp-product-intro-title{
    width:100%;
    height:36px;
    float:left;
}
.sp-product-intro-title>div{
    width:36px;
    height:36px;
    float:left;
    border-radius:500px;
    background:#011833;
    color:white;
    font-size:22px;
    text-align: center;
    line-height:36px;
    margin-right:8px;
}
.sp-product-intro-title>span{
    width:auto;
    height:36px;
    float:left;
    color:#011833;
    font-size:25px;
    line-height:36px;
    font-weight:700;
}
.sp-product-intro-tips{
    width:calc(100% - 45px);
    height:auto;
    float:left;
    padding-left: 45px;
    margin-top:8px;
}
.sp-product-intro-tips>div{
    width:50px;
    height:29px;
    float:left;
    margin-right:8px;
}
.sp-product-intro-tips>span{
    width:auto;
    height:29px;
    float:left;
    color:#1b3c64;
    font-size:20px;
    line-height:29px;
    font-weight:400;
}
.sp-product-intro-tips>li{
    width:100%;
    height:auto;
    float:left;
    color:#333;
    font-size:17px;
    font-weight:lighter;
    margin-top:8px;
    list-style:none;
}
.sp-product-intro-tips>li.sub{
    width:100%;
    height:auto;
    float:left;
    color:#999;
    font-size:15px;
    font-weight:lighter;
    margin-top:10px;
    list-style:none;
}
.sp-product-intro-tips>img{
    width:auto;
    max-width:200px;
    height:auto;
    float:left;
    margin-top:20px;
}

.sp-product-set-title{
    width:100%;
    height:auto;
    float:left;
    color:#ac7d0b;
    font-size:25px;
    font-weight:700;
    margin-bottom:60px;
    
}
.sp-product-set-title>span{
    width:100%;
    height:auto;
    float:left;
    font-size:20px;
    color:#333;
    font-weight:lighter;
}
.sp-product-set-out{
    width:100%;
    height:auto;
    float:left;
}
.sp-product-set-block{
    width:28%;
    height:auto;
    float:left;
}
.sp-product-set-block>img{
    width:100%;
    height:auto;
    display:block;
   margin-bottom:45px
}
.sp-product-set-block>img.step{
    width:auto;
    height:auto;
    display:block;
    margin:0 auto;
}
.sp-product-set-next{
    width:8%;
    height:auto;
    float:left;
    position: relative;
    transform:translateY(250%);
    top:50%;
}
.sp-product-set-next>img{
    width:90%;
    height:auto;
    display:block;
    margin:0 5%;
}
.sp-product-step-title{
    width:100%;
    height:auto;
    display:block;
    margin-bottom:20px;
    font-size:20px;
    font-weight:700;
    color:#ac7d0b;
    text-align:center;
}
.sp-product-step-title.sub{
    width:100%;
    height:auto;
    display:inline-block;
    margin-top:10px;
    font-size:16px;
    color:#ac7d0b;
    text-align:center;
}
.sp-product-step-title.sub>span{
    width:auto;
    height:auto;
    color:#ac7d0b;
    font-size:25px;
    float:none;
    display:inline-block;
}

.sp-adv-block{
    width:100%;
    height:auto;
    float:left;
    margin-bottom:70px;
}
.sp-adv-pic-block{
    width:55%;
    height:auto
}
.sp-adv-word-block{
    width:45%;
    height:auto;  
}
.sp-adv-word-block.pl{
    width:calc(45% - 20px);
    padding-left:20px;  
}
.sp-adv-word-block.pr{
    width:calc(45% - 20px);
    padding-right:20px;  
}


.left{
    float:left;
}
.right{
    float:right;
}
.sp-adv-title{
    width:100%;
    height:auto;
    float:left;
    margin-bottom:30px;
    font-size:25px;
    color:#ac7d0b;
    font-weight:700;
}
.sp-adv-main{
    width:100%;
    height:auto;
    float:left;
    margin-bottom:70px;
    font-size:20px;
    color:#333;
    font-weight:normal;
}
.sp-adv-sub{
    width:100%;
    height:auto;
    float:left;
    font-size:16px;
    color:#999;
    font-weight:lighter;
}

.sp-airgroove-link{
    width:500px;
    height:55px;
    display:block;
    margin:0 auto;
    background:#ac7d0b;
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    text-align:center;
    line-height:55px;
    color: white !important;;
    font-size:20px;
    border-radius:5px;
    text-decoration: none!important;
    margin-bottom:100px;
}

/*Common*/





/*RWD*/

/*電腦*/
@media screen and (min-width:1366px) and (max-width:1900px){

    .sp-product-intro-block{
        width:33.3%;
        max-width:33.3%;
        height: auto;
        position: relative;
        float: left;
    }
    .sp-product-intro-block.left{
        float:left;
    }
    .sp-product-intro-block.right{
        float:left;
    }
    .sp-product-intro-block:nth-last-child(3){
        margin-top:0px;
        left:0px;
    }
    .sp-product-intro-block:nth-last-child(2){
        margin-top:0px;
        right:0px;
    }
    .sp-product-intro-block:nth-last-child(1){
        margin-top:0px;
        right:0px;
    }

}
/*電腦*/

/*IPAD PRO*/
@media screen and (min-width:1024px) and (max-width:1365px){

    .sp-product-intro-block{
        width:33.3%;
        max-width:33.3%;
        height: auto;
        position: relative;
        float: left;
    }
    .sp-product-intro-block.left{
        float:left;
    }
    .sp-product-intro-block.right{
        float:left;
    }
    .sp-product-intro-block:nth-last-child(3){
        margin-top:0px;
        left:0px;
    }
    .sp-product-intro-block:nth-last-child(2){
        margin-top:0px;
        right:0px;
    }
    .sp-product-intro-block:nth-last-child(1){
        margin-top:0px;
        right:0px;
    }

    .sp-product-set-block>img.step{
        width: 100%;
    }

}
/*IPAD PRO*/

/*IPAD*/
@media screen and (min-width:768px) and (max-width:1023px){

    .spmain-block{
        width:90%;
        height:auto;
        padding:100px 0 200px 0;
        height:auto;
        display:block;
        margin:0 auto;
    }
    .sp-product-intro-block{
        width:100%;
        max-width:100%;
        height: auto;
        position: relative;
        float: left;
        margin-bottom:70px;
    }
    .sp-product-intro-block.left{
        float:left;
    }
    .sp-product-intro-block.right{
        float:left;
    }
    .sp-product-intro-block:nth-last-child(3){
        margin-top:0px;
        left:0px;
    }
    .sp-product-intro-block:nth-last-child(2){
        margin-top:0px;
        right:0px;
    }
    .sp-product-intro-block:nth-last-child(1){
        margin-top:0px;
        right:0px;
    }

    .sp-product-set-block>img.step{
        width: auto;
    }

    .sp-product-set-block{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:100px;
    }
    .sp-product-set-block>img{
        width:auto;
        height:auto;
        display:block;
        margin:0 auto 35px auto;
    }

    .sp-product-set-next{
        display:none;
    }



    .sp-adv-block{
        margin-bottom:200px;
    }
    .sp-adv-pic-block{
        width:100%;
        height:auto
    }
    .sp-adv-word-block{
        width:100%;
        height:auto;  
        margin-bottom:20px;
    }
    .sp-adv-word-block.pl{
        width:99%;
        padding:0 0.5%;  
    }
    .sp-adv-word-block.pr{
        width:99%;
        padding:0 0.5%;
    }
    
    
    .left{
        float:left;
    }
    .right{
        float:left;
    }
    .sp-adv-title{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:30px;
        font-size:25px;
        color:#ac7d0b;
        font-weight:700;
    }
    .sp-adv-main{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:30px;
        font-size:20px;
        color:#333;
        font-weight:normal;
    }
    .sp-adv-sub{
        width:100%;
        height:auto;
        float:left;
        font-size:16px;
        color:#999;
        font-weight:lighter;
    }

}
/*IPAD*/

/*大手機*/
@media screen and (min-width:540px) and (max-width:767px){

    .spmain-block{
        width:90%;
        height:auto;
        padding:100px 0 200px 0;
        height:auto;
        display:block;
        margin:0 auto;
    }
    .sp-product-intro-block{
        width:100%;
        max-width:100%;
        height: auto;
        position: relative;
        float: left;
        margin-bottom:70px;
    }
    .sp-product-info>img{
        width:90%;
        margin:0 5%;
    }
    .sp-product-intro-block.left{
        float:left;
    }
    .sp-product-intro-block.right{
        float:left;
    }
    .sp-product-intro-block:nth-last-child(3){
        margin-top:0px;
        left:0px;
    }
    .sp-product-intro-block:nth-last-child(2){
        margin-top:0px;
        right:0px;
    }
    .sp-product-intro-block:nth-last-child(1){
        margin-top:0px;
        right:0px;
    }

    .sp-product-set-block>img.step{
        width: auto;
    }

    .sp-product-set-block{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:100px;
    }
    .sp-product-set-block>img{
        width:90%;
        height:auto;
        display:block;
        margin:0 5% 35px 5%;
    }

    .sp-product-set-next{
        display:none;
    }



    .sp-adv-block{
        margin-bottom:200px;
    }
    .sp-adv-pic-block{
        width:100%;
        height:auto
    }
    .sp-adv-word-block{
        width:100%;
        height:auto;  
        margin-bottom:20px;
    }
    .sp-adv-word-block.pl{
        width:99%;
        padding:0 0.5%;  
    }
    .sp-adv-word-block.pr{
        width:99%;
        padding:0 0.5%;
    }
    
    
    .left{
        float:left;
    }
    .right{
        float:left;
    }
    .sp-adv-title{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:30px;
        font-size:25px;
        color:#ac7d0b;
        font-weight:700;
    }
    .sp-adv-main{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:30px;
        font-size:20px;
        color:#333;
        font-weight:normal;
    }
    .sp-adv-sub{
        width:100%;
        height:auto;
        float:left;
        font-size:16px;
        color:#999;
        font-weight:lighter;
    }

}
/*大手機*/


/*iphone Plus*/
@media screen and (min-width:414px) and (max-width:539px){

    .spmain-block{
        width:90%;
        height:auto;
        padding:100px 0 200px 0;
        height:auto;
        display:block;
        margin:0 auto;
    }
    .sp-product-intro-block{
        width:100%;
        max-width:100%;
        height: auto;
        position: relative;
        float: left;
        margin-bottom:70px;
    }
    .sp-product-info>img{
        width:90%;
        margin:0 5%;
    }
    .sp-product-intro-block.left{
        float:left;
    }
    .sp-product-intro-block.right{
        float:left;
    }
    .sp-product-intro-block:nth-last-child(3){
        margin-top:0px;
        left:0px;
    }
    .sp-product-intro-block:nth-last-child(2){
        margin-top:0px;
        right:0px;
    }
    .sp-product-intro-block:nth-last-child(1){
        margin-top:0px;
        right:0px;
    }

    .sp-product-set-block>img.step{
        width: auto;
    }

    .sp-product-set-block{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:100px;
    }
    .sp-product-set-block>img{
        width:90%;
        height:auto;
        display:block;
        margin:0 5% 35px 5%;
    }

    .sp-product-set-next{
        display:none;
    }



    .sp-adv-block{
        margin-bottom:200px;
    }
    .sp-adv-pic-block{
        width:100%;
        height:auto
    }
    .sp-adv-word-block{
        width:100%;
        height:auto;  
        margin-bottom:20px;
    }
    .sp-adv-word-block.pl{
        width:99%;
        padding:0 0.5%;  
    }
    .sp-adv-word-block.pr{
        width:99%;
        padding:0 0.5%;
    }
    
    
    .left{
        float:left;
    }
    .right{
        float:left;
    }
    .sp-adv-title{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:30px;
        font-size:25px;
        color:#ac7d0b;
        font-weight:700;
    }
    .sp-adv-main{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:30px;
        font-size:20px;
        color:#333;
        font-weight:normal;
    }
    .sp-adv-sub{
        width:100%;
        height:auto;
        float:left;
        font-size:16px;
        color:#999;
        font-weight:lighter;
    }

    .sp-airgroove-link{
        width:90%;
        height:55px;
        display:block;
        margin:0 auto;
        background:#ac7d0b;
        box-shadow:0 0 20px rgba(0,0,0,0.3);
        text-align:center;
        line-height:55px;
        color: white !important;;
        font-size:20px;
        border-radius:5px;
        text-decoration: none!important;
        margin-bottom:100px;
    }

}
/*iphone Plus*/

/*iphone*/
@media screen and (min-width:375px) and (max-width:413px){

    .sp-title{
        height: 50px !important;;
        line-height: 50px;
        font-size:22px;
        font-weight:700;
    }
    .spmain-block{
        width:90%;
        height:auto;
        padding:100px 0 200px 0;
        height:auto;
        display:block;
        margin:0 auto;
    }
    .sp-product-intro-block{
        width:100%;
        max-width:100%;
        height: auto;
        position: relative;
        float: left;
        margin-bottom:70px;
    }
    .sp-product-info>img{
        width:90%;
        margin:0 5%;
    }
    .sp-product-intro-block.left{
        float:left;
    }
    .sp-product-intro-block.right{
        float:left;
    }
    .sp-product-intro-block:nth-last-child(3){
        margin-top:0px;
        left:0px;
    }
    .sp-product-intro-block:nth-last-child(2){
        margin-top:0px;
        right:0px;
    }
    .sp-product-intro-block:nth-last-child(1){
        margin-top:0px;
        right:0px;
    }

    .sp-product-set-block>img.step{
        width: 70%;
    }

    .sp-product-set-block{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:100px;
    }
    .sp-product-set-block>img{
        width:90%;
        height:auto;
        display:block;
        margin:0 5% 35px 5%;
    }

    .sp-product-set-next{
        display:none;
    }



    .sp-adv-block{
        margin-bottom:50px;
    }
    .sp-adv-pic-block{
        width:100%;
        height:auto
    }
    .sp-adv-word-block{
        width:100%;
        height:auto;  
        margin-bottom:10px;
    }
    .sp-adv-word-block.pl{
        width:99%;
        padding:0 0.5%;  
    }
    .sp-adv-word-block.pr{
        width:99%;
        padding:0 0.5%;
    }
    
    
    .left{
        float:left;
    }
    .right{
        float:left;
    }
    .sp-adv-title{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:30px;
        font-size:25px;
        color:#ac7d0b;
        font-weight:700;
    }
    .sp-adv-main{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:30px;
        font-size:20px;
        color:#333;
        font-weight:normal;
    }
    .sp-adv-sub{
        width:100%;
        height:auto;
        float:left;
        font-size:16px;
        color:#999;
        font-weight:lighter;
    }

    .sp-airgroove-link{
        width:90%;
        height:55px;
        display:block;
        margin:0 auto;
        background:#ac7d0b;
        box-shadow:0 0 20px rgba(0,0,0,0.3);
        text-align:center;
        line-height:55px;
        color: white !important;;
        font-size:20px;
        border-radius:5px;
        text-decoration: none!important;
        margin-bottom:100px;
    }
    .sp-product-intro-title>div{
        width:20px;
        height:20px;
        font-size:18px;
        line-height:20px;
    }
    .sp-product-intro-title>span{
        height:20px;
        line-height:20px;
        font-size:20px;
    }
    .sp-product-intro-tips{
        padding-left:30px;
        width:calc(100% - 30px);
    }
    .sp-product-intro-tips>span{
        font-size:18px;
    }

}
/*iphone*/

/*iphone SE*/
@media screen and (max-width:370px){

    .sp-title{
        height: 50px !important;;
        line-height: 50px;
        font-size:22px;
        font-weight:700;
    }
    .spmain-block{
        width:90%;
        height:auto;
        padding:100px 0 200px 0;
        height:auto;
        display:block;
        margin:0 auto;
    }
    .sp-product-intro-block{
        width:100%;
        max-width:100%;
        height: auto;
        position: relative;
        float: left;
        margin-bottom:70px;
    }
    .sp-product-info>img{
        width:90%;
        margin:0 5%;
    }
    .sp-product-intro-block.left{
        float:left;
    }
    .sp-product-intro-block.right{
        float:left;
    }
    .sp-product-intro-block:nth-last-child(3){
        margin-top:0px;
        left:0px;
    }
    .sp-product-intro-block:nth-last-child(2){
        margin-top:0px;
        right:0px;
    }
    .sp-product-intro-block:nth-last-child(1){
        margin-top:0px;
        right:0px;
    }

    .sp-product-set-block>img.step{
        width: 70%;
    }

    .sp-product-set-block{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:100px;
    }
    .sp-product-set-block>img{
        width:90%;
        height:auto;
        display:block;
        margin:0 5% 35px 5%;
    }

    .sp-product-set-next{
        display:none;
    }



    .sp-adv-block{
        margin-bottom:50px;
    }
    .sp-adv-pic-block{
        width:100%;
        height:auto
    }
    .sp-adv-word-block{
        width:100%;
        height:auto;  
        margin-bottom:10px;
    }
    .sp-adv-word-block.pl{
        width:99%;
        padding:0 0.5%;  
    }
    .sp-adv-word-block.pr{
        width:99%;
        padding:0 0.5%;
    }
    
    
    .left{
        float:left;
    }
    .right{
        float:left;
    }
    .sp-adv-title{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:30px;
        font-size:25px;
        color:#ac7d0b;
        font-weight:700;
    }
    .sp-adv-main{
        width:100%;
        height:auto;
        float:left;
        margin-bottom:30px;
        font-size:20px;
        color:#333;
        font-weight:normal;
    }
    .sp-adv-sub{
        width:100%;
        height:auto;
        float:left;
        font-size:16px;
        color:#999;
        font-weight:lighter;
    }

    .sp-airgroove-link{
        width:90%;
        height:55px;
        display:block;
        margin:0 auto;
        background:#ac7d0b;
        box-shadow:0 0 20px rgba(0,0,0,0.3);
        text-align:center;
        line-height:55px;
        color: white !important;;
        font-size:20px;
        border-radius:5px;
        text-decoration: none!important;
        margin-bottom:100px;
    }

    .sp-product-intro-title>div{
        width:20px;
        height:20px;
        font-size:18px;
        line-height:20px;
    }
    .sp-product-intro-title>span{
        height:20px;
        line-height:20px;
        font-size:20px;
    }
    .sp-product-intro-tips{
        padding-left:30px;
        width:calc(100% - 30px);
    }
    .sp-product-intro-tips>span{
        font-size:18px;
    }

}
/*iphone SE*/


/*RWD*/