/*----螢幕寬度小於1300px時----*/
/*---------------------------*/
@media screen and (max-width: 1500px){
    .btnTop-Wrap{right: 52px;}

}


/*----螢幕寬度小於1200px時----*/
/*---------------------------*/
@media screen and (max-width: 1200px){
    .s1-wrap .theme-title{left: 60%;}

}


/*----螢幕寬度小於於1245px時----*/
/*----------------------------*/
@media screen and (max-width: 1245px){

    #s3.s-content > div{ 
        flex-direction: column;
        padding-bottom: 0px;}

    #s3.s-content > div > div{ width: 100%;}
    /*#s3.s-content > div > div:nth-of-type(1){ margin-bottom: 40px;}*/

    #s5.s-content > div > div{ margin: 10px 120px 40px;}
    #s5.s-content > div > div > span::after{right: -60%;}
    #s5.s-content > div > div:nth-of-type(2) > span::after{display: none;}

}


/*----螢幕寬度小於於1235px時----*/
/*----------------------------*/
@media screen and (max-width: 1235px){
    .rightBN-wrap{
        left: initial;
        transform: initial;
        right: -46px;}

}


/*----螢幕寬度小於於1140px時----*/
/*----------------------------*/
@media screen and (max-width: 1400px){

    #s4.s-content > div{min-width: initial;}
    #s4.s-content > div > img{width: 100%;}

}


/*----螢幕寬度小於於1000px時----*/
/*----------------------------*/
@media screen and (max-width: 1000px){
    #s5.s-content > div > div{ margin: 10px 50px 40px;}
    #s5.s-content > div > div > span::after{right: -30%;}

    .form-step3{padding: 30px;}

}


/*----螢幕寬度小於於970px時----*/
/*----------------------------*/
@media screen and (max-width: 970px){
    .s1-wrap .theme-title > div{
        margin: 0 auto;
        background: rgba(255,255,255,0.8);
        padding: 70px 0 20px;}

    .s1-wrap .theme-title{
        padding: 10px 0;
        left: 50%;
        top: 70%;
        padding-right: initial;}

    .s1-wrap .theme-bg:nth-of-type(4) > div{
        background: url(../images/wj-banner-9.jpg) center right 25% no-repeat;
        background-size: cover;}

    .s1-wrap .theme-bg:nth-of-type(3) > div{
        background: url(../images/wj-banner-13.jpg) center right 25% no-repeat;
        background-size: cover;}     

    .s1-wrap .theme-bg:nth-of-type(2) > div{
        background: url(../images/wj-banner-7.jpg) center right 20% no-repeat;
        background-size: cover;}        

    .s1-wrap .theme-bg:nth-of-type(1) > div{
        background: url(../images/wj-banner-8.jpg) center right 20% no-repeat;
        background-size: cover;}     
   
}


/*----螢幕寬度小於於935px時----*/
/*---------------------------*/
@media screen and (max-width: 935px){
    /*顧問聯繫提示*/
    #s7 .note{text-align: left;}

}

/*----螢幕寬度小於於860px時----*/
/*---------------------------*/
@media screen and (max-width: 860px){

    .s-wrap{padding: 40px 0 30px;}

    .scrollbarStyle{
        display: inline-block;
        width: 100%;
        overflow-x: auto;}

    /* scrollbar樣式*/
    .scrollbarStyle::-webkit-scrollbar {height:6px;}         
    .scrollbarStyle::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(255, 153, 153, 0.6); 
            border-radius: 10px;}
         
    .scrollbarStyle::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(255, 153, 153, 0.6);}

    #s1.s-content > .scrollbarStyle > div{
        width: 1120px;
        margin: 0 auto;}

    .deco-arrows{display: block;}
    .deco-band{
        width: 10%;
        right: 0;}

}


/*----螢幕寬度小於於800px時----*/
/*---------------------------*/
@media screen and (max-width: 800px){
    .tips > div:nth-of-type(2){width: 45%;}
    .tips-wrap .tips{padding: 0 30px;}

    #s4.s-content > div{width: 100%;}
    #s4.s-content > div:nth-of-type(2){margin-top: -20%;}
    #s4.s-content > div > img{width: 100%;}
    .deco-eng.eng4{top: 50px;}

    /* 表單1 */
    .form-step1{padding: 0;}
    .from-wrap,
    .from-wrap input[type="text"],
    .from-wrap input[type="number"],
    .from-wrap select,
    .from-wrap select option{
        font-size: 22px;}

    .from-wrap input[type="text"]::placeholder,
    .from-wrap input[type="number"]::placeholder,
    .agreement-wrap{
        font-size: 17px;}
    
    /* 表單2 */
    .form-step2 > h2,
    .form-step2 > h3,
    .form-step3 > h2,
    .form-step3 > h3,
    .confirm-wrap > p{font-size: 22px;}
    .confirm-wrap{padding: 20px 10px 30px;;}
    .form-step2 > h3,
    .form-step3 > h3{margin: 10px 0;}

     /* 表單3 */   
     .form-step3{padding: 0;}

    /*-- 選單 --*/
    .navi-warp{       
        position: fixed;
        display: block;
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        bottom: 0 !important;
        z-index: 1;
        background: rgba(231, 125, 125, 0.8);
        line-height: 30px;}

    .navi-warp ul {
        margin: 0 auto;
        padding: 10px;}
        
    .navi-warp ul li{
        color: #fff;
        border: 1px #fff solid;
        margin: 0 5px;
        text-shadow: 0 0 5px rgba(199, 104, 104, 0.8);}

    .navi-warp ul li:nth-of-type(5) {
        border: 1px solid #fffb1b;
        color: #ff615a;
        background: #fffb1b;
        text-shadow: 0 0 5px rgba(199, 104, 104, 0);}

    .navi-warp ul li:hover,
    .navi-warp ul li:active{
        color: #404040;
        background: #Fff;
        text-shadow: 0 0 5px rgba(199, 104, 104, 0);}

    .navi-warp ul li:nth-of-type(5):hover,
    .navi-warp ul li:nth-of-type(5):active{
        color: #404040;
        background: #fffb1b;
        text-shadow: 0 0 5px rgba(199, 104, 104, 0);}

    .navi-warp ul li:hover span, .navi-warp ul li:active span{
        color: #0e586e;}

    .navi-warp ul li:hover a,
    .navi-warp ul li:active a{color: #824505;}    

}
        

/*----螢幕寬度小於於760px時----*/
/*---------------------------*/
@media screen and (max-width: 760px){

    #s2.s-content{ padding: 20px 0 0; }
    .tips-wrap .tips { padding: 0 10px;}
    .tips > div:nth-of-type(1){
        display: block;
        max-width: 100%;
        padding: 5px 0 20px;
        margin:20px 0 50px;
        height: 340px;}

    .tips > div:nth-of-type(2){
        display: block;
        max-width: 100%;
        width: 70%;
        margin: 0 auto 20px;}

    .slick-dotted.slick-slider{margin-bottom: 0;}
}



/*----螢幕寬度小於於720px時----*/
/*---------------------------*/
@media screen and (max-width: 720px){
    .subNote{text-align: left;}
}

/*----螢幕寬度小於於670px時----*/
/*---------------------------*/
@media screen and (max-width: 670px){

    .form-step1 > div{ flex-direction: column;}
    .form-step1 > div > div{ 
        width: 100%;
        margin: 10px auto 30px;
        padding: 0 10px;}

    .agreement-wrap{padding: 30px 10px;}
    .agreement-wrap .agreement > p{display: block;}


    .agent-profile .deco-eng{
        width: 50%;
        max-width: 155px;}
    .agent-profile .deco-eng > img{ width: 100%;}
    .agent-wrap{ padding: 0;}
    .agent-wrap .agent-pic{
        position: relative;
        width: 170px;
        height: 170px;}

    .agent-profile h4{font-size: 22px;}
    .agent-profile h4::before{
        content: '';
        display: inline-block;
        width: 5px;
        height: 28px;
        margin-right: 10px;
        margin-bottom: 3px;
        vertical-align: middle;
        background: #f6c3cb;}

    .agent-profile div{padding: 15px 30px;}

    .navi-warp ul li{
        width: 80px;
        padding: 10px 5px;
        line-height: 20px;}

    .navi-warp ul li .breakspace{display: block;}

    /*顧問聯繫提示*/
    #s7 .note{text-align: center;}

    footer{margin-bottom: 100px;}
}


/*----螢幕寬度小於於650px時----*/
/*---------------------------*/
@media screen and (max-width: 650px){
    #s5.s-content > div > div{ margin: 10px 20px 40px;}
    #s5.s-content > div > div > span::after{right: -15%;}
}


/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){

    .s1-wrap .theme-title > div{
        width: 100%;
        max-width: 320px;}

    .s1-wrap .theme-title > div > span:nth-of-type(1){
        font-size: 22px;
        margin: 10px;}

    .s1-wrap .theme-title > div > h3{
        font-size: 30px;}
        
    .s1-wrap .theme-title > div > h1{ 
        font-size: 30px;
        padding: 10px 0;
        margin: 20px 0 10px;}

    .s1-wrap .theme-title > div > h3:nth-of-type(1)::after {
        right: -20px;
        top: 0px;}        

    .deco-eng.eng4{width: 50%;}
    .deco-eng.eng4 > img {width: 100%;}

    /*字型調整*/
    #s1.s-content > h2{
        text-align: left;
        font-size: 16px;
        margin: 20px 0 50px;}

    #s1.s-content > h2 > span{ display: initial;}
    #s1.s-content > h2 > span::before{content: '，';}
    #s1.s-content > h2 > span:nth-of-type(2):before{content: '；';}
    #s1.s-content > h2 > span:nth-of-type(2)::after{content: '。';}

    .tips-h2{
        font-size:20px;}    
    .tips-p{
        font-size:18px;
        line-height: 24px;}

    @supports (-webkit-touch-callout: none) {
        /* CSS specific to iOS devices */ 
        .tips-h2{
            font-size: 1.3em;}    
        .tips-p{
            font-size: 1.1em;
            line-height: 1.5em;}
        .tips-p > span{font-size: 0.7em;}

    }

    /* 了解更多鈕 */
    .btn-wrap .btn-more{font-size: 24px;}

    /*footer*/
    footer {
        text-align: left;
        margin-bottom: 85px;}

    footer .announce{text-align: left;}
    .rightBN-wrap{
        width: 120px;
        height: 128px;
        top: -120px;}

    .deco-leashadow1,
    .deco-leashadow2{width: 150px;}
    .btnRight{
        width: 75px;
        display: none;}

    .tips-wrap{padding-top: 60px;}

    /* deco-eng*/
    .deco-eng{
        left: 10px;
        top: -30px;
        opacity: 0.5;}

    #s3.s-content > div{padding: 10px 0 0;}
    #s5.s-content{padding-top: 30px;}
    #s6.s-content{padding: 30px 20px 20px;}
    #s7.s-content{padding: 30px 0 20px}
    .subNote{font-size: 18px;}
    .form-step2{padding: 0 30px;}
    .btn-wrap.s3{margin-bottom: 30px;}
    .rules-wrap{padding: 30px 20px 20px;} 

    #s3.s-content > div > div.s3-table > div:nth-of-type(1){display: none;}
    #s3.s-content > div > div.s3-table > div:nth-of-type(2){display: inline-block;}

}



/*----螢幕寬度小於於530px時----*/
/*--------------------------*/
@media (max-width: 530px){
    .navi-warp ul li{padding: 5px 0px;}

    #s5.s-content > div > div{ margin: 10px 10px 20px;}
    #s5.s-content > div > div > span::after{display: none;}

}


/*----螢幕寬度小於於515px時----*/
/*--------------------------*/
@media (max-width: 515px){
    /*顧問聯繫提示*/
    #s7 .note{
        padding: 10px;
        text-align: left;}
}


/*----螢幕寬度小於於500px時----*/
/*--------------------------*/
@media (max-width: 500px){
    .tips > div:nth-of-type(2){width: 80%;}
    .note{text-align: left;}
    .section-btnTop{bottom: 14%;}
}


/*----螢幕寬度小於於480px時----*/
/*--------------------------*/
@media (max-width: 480px){
    #s5.s-content > div > div{width: 44%;}
    #s5.s-content > div > div > span{width: 100%;}
    #s5.s-content > div > div > span > img{width: 100%;}
    #s5.s-content > div > div > h3{
        font-size: 18px;
        padding: 10px 0;}

    #s5.s-content > div > div > p {text-align: left;}
    #s5.s-content > div > div > p > .breakspace{display: inline-block;}
    #s5.s-content > div > div > p > .breakspace::before{display: inline-block;}

    /* 表單2*/
    .form-step2{padding: 0;}
    .form-step2 .input-bg .btn-send{
        transform: translateX(-50%);
        left: 50%;
        bottom: 60px;}

    .form-step2 .input-bg > input{margin-top: 40px;}
}


/*----螢幕寬度小於於465px時----*/
/*--------------------------*/
@media (max-width: 465px){

    #rule1 > h3 > div{display: block;}
    #rule1 > h3 {text-align: center;}
}



/*----螢幕寬度小於於420px時----*/
/*--------------------------*/
@media (max-width: 420px){

    #s1.s-content > .scrollbarStyle > div {
        width: 1000px;}

    #s1.s-content > div > div > div{
        width: 320px;
        height: 480px;}

    .s1-declaration div:nth-of-type(1) p,
    .s1-declaration div:nth-of-type(2) p{min-height: 120px;}
        
    #s6.s-content{padding: 30px 0 0;}

    .btn-s1Arrow{top: 15px;}
    
    /* 了解更多鈕 */
    .btn-wrap .btn-more{font-size: 20px;}

}


/*----螢幕寬度小於於380px時----*/
/*--------------------------*/
@media (max-width: 380px){
    .navi-warp ul li{
        font-size: 16px;    
        margin: 0 2px;} 

}


/*----螢幕寬度小於於375px時----*/
/*--------------------------*/
@media (max-width: 375px){  

    #s1.s-content > .scrollbarStyle > div {
        width: 950px;}

    #s1.s-content > div > div > div{
        width: 290px;
        height: 480px;}

    #rule1 > h3{font-size: 16px;}


}


/*------------螢幕寬度小於於360px時-------*/
/*---------------------------------------*/
@media screen and (max-width: 360px){
    .reviewCard{
        width: 280px;
        padding: 20px 20px 80px;}

}


/*------------螢幕寬度小於於350px時-------*/
/*---------------------------------------*/
@media screen and (max-width: 350px){
    #s1.s-content > .scrollbarStyle > div {
        width: 900px;}

    #s1.s-content > div > div > div{
        width: 280px;
        height: 530px;}

    /* 了解更多鈕 */
    .btn-wrap .btn-more{font-size: 20px;}
}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 335px){
    #s1.s-content > .scrollbarStyle > div {
        width: 800px;}

    #s1.s-content > div > div > div{
        width: 255px;}

    .s1-tag{display: inline-block;}
    .stitle{font-size: 24px;}

    .s1-declaration div:nth-of-type(1) p{min-height: 140px;}

}