@media 
	only screen and (max-width:319px),
	only screen and (min-width:320px) and (max-width:480px) and (orientation:portrait),
	only screen and (min-width:320px) and (max-width:480px) and (orientation:landscape) ,
	only screen and (min-width:481px) and (max-width:767px)  
{


.wh.hp .flxItmSec2 {width:30%; border:1px solid #ffa400; margin-right:10px; height:200px; background: transparent}

.wh.hp .pgMtr.jContainer {
	background:#fff;	
	xx-background: linear-gradient(-45deg, #ffa400, transparent, transparent, #ffb500);
	xx-background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	xx-background:linear-gradient(45deg,#009,#003366 , transparent, #ffa400);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
	}

@keyframes xx-gradientBG {
	0% {		background-position: 0% 50%;	}
	50% {		background-position: 100% 50%;	}
	100% {		background-position: 0% 50%;	}
}


.wh.hp .colFrame {
	padding: 50px 20px;
}

.wh.hp .colFrame .hstBxs {
	flex-wrap:wrap;
}

.wh.hp .hstBxs_li {
    position: relative;
    top: 0;
    margin-bottom: 30px;
    old-height: 202px;
    height: 80px;
	width:100%; 
}

.wh.hp .hstTypBx {
    position: relative;
    top: 0;
    height: 100%;
    background: xx-red;
    border: 1px solid rgba(0, 75, 100, .25);
    overflow: hidden;
    box-shadow: 0px 5px 15px -5px #999;
	width: 100%;
}

.wh.hp .hstTypBx .topBx {
    position: relative;
    top: 0;
    height: 35%;
    background: transparent;
    padding: 10px 20px;
    transition: all .2s ease-in-out;
}

.wh.hp .spn1 {
    /* font-family: 'OpenSansBold'; */
    /* font-weight: bold; */
    font-size: 1.125rem;
    line-height: 1.25;
    color: rgba(0, 75, 100, 1);
    transition: all .2s ease-in-out;
    display: block;
}

.wh.hp .hstTypBx .btmBx {
    position: relative;
    top: 0;
    height: 65%;
    xx-background: rgba(3, 169, 244, 1);
    --background: var(--heroBnrBgCol01);
    padding: 0 20px;
    transition: all .2s ease-in-out;
}

.wh.hp .spn2 {
    font-family: 'OpenSansRegular';
    font-weight: normal;
    font-size: 75%;
    line-height: .5;
    position: relative;
    top: 7px;
    transition: all .2s ease-in-out;
    color: #f90;
}

.wh.hp .wspBnrBxs_btn {
    display: block;
    width: 40%;
    font-family: 'OpenSansSemiBold';
    font-weight: bold;
    font-size: 100%;
    line-height: 1.5em;
    color: #03a9f4;
    background: rgba(0, 75, 100, 1);
    border: 0 solid #03a9f4;
}

.wh.hp .wspBnrBxs_btn > a {
    /* display: block; */
    padding: 16px 10px;
    xx-color: #fff;
    color: #f90;
}

.wh.hp .wspBnrBxs_btn > a:hover {
color:#f90;
    background: rgba(255,255,255,1);
}


/* .wh.hp .hstTypBx:hover .topBx {
    height: 45%;
    background: rgba(3,169,244,0);
    transition: all .2s ease-in-out;
} 

.wh.hp .hstTypBx:hover .topBx .spn1 {
    color: rgba(3,169,244,1);
    font-family: 'OpenSansBold';
    font-size: 90%;
    transition: all .2s ease-in-out;
}

.wh.hp .hstTypBx:hover .btmBx {
	top:10px;
    height: 55%;
    background: transparent;
    color: rgba(3,169,244,1);
    transition: all .2s ease-in-out;
}

.wh.hp .hstTypBx:hover .btmBx .spn2 {
    display: inline-block;
    font-size: 80%;
    margin-bottom: 0px;
    color: red;
    top: -10px;
    transition: all .2s ease-in-out;
}

.wh.hp .hstTypBx:hover .btmBx .wspBnrBxs_btn {
    display: block;
    transition: all .2s ease-in-out;
}*/

/* x319 i320-x480-P i320-x480-L i481-x767 */
}




@media only screen and (min-width:360px) and (max-width:767px) and (orientation: landscape) {

.wh.hp .flipBxGrpCan {
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 0 25px 0;
}
.wh.hp .scene {
    width: 48%;
	height: 150px;
	}

.wh.hp .cfBkHd {
	padding: 10px 10px;
    background: #ffa500;
    border-left: 5px solid #003366;
    color: #fff;
    margin: 0 0 5px 0;
    text-align: left;
}


.wh.hp .cfBack .btmBtnsPnl {
	position: absolute;
	top: 0;
	left: initial;
	width: initial;
	right: 0;
	margin: 0 auto;
	padding: 0px;
	height: 100%;
}


.wh.hp .cfBack .btmBtnsPnl .rvt {
    display: block;
    position: absolute;
    right: 0;
    border: 0 solid #fff;
    border-radius: 50px;
    width: 50px;
    height: 50px margin: 3px;
    overflow: hidden;
    opacity: .5;
    bottom: 0;
    height: 50px;
    zoom:0.75;
}


.wh.hp .cfBack .btmBtnsPnl .kmBtnDv {
    position: relative;
    right: 0;
    top: 0;
    display: block;
    border: 0px solid #aaa;
    border-radius: 0px;
    width: 45px;
    height: 45px;
    opacity: .5;
    margin: 0;
    background: #ffd500;
    zoom: .9;
}

/* i360-x767-L*/
}







@media only screen and (min-width:768px) and (max-width:992px) {

    .wh.hp .flxItmSec2 {width:30%; border:1px solid #ffa400; margin-right:10px; height:200px; background: transparent}
    
    .wh.hp .pgMtr.jContainer {
        background:#f7f8f9;	
        xx-background: linear-gradient(-45deg, #ffa400, transparent, transparent, #ffb500);
        xx-background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        xx-background:linear-gradient(45deg,#009,#003366 , transparent, #ffa400);
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
        }
    
    @keyframes xx-gradientBG {
        0% {		background-position: 0% 50%;	}
        50% {		background-position: 100% 50%;	}
        100% {		background-position: 0% 50%;	}
    }
    
    .wh.hp .colFrame {
        padding: 50px 0px;
    }
    
    .wh.hp .colFrame .hstBxs {
        flex-wrap:wrap;
    }
    
    .wh.hp .hstBxs_li {
        position: relative;
        top: 0;
        margin-bottom: 30px;
        old-height: 202px;
        height: 190px;
        width:30%; 
        flex-direction: column;
    }
    
    
    
    .wh.hp .hstTypBx {
        position: relative;
        top: 0;
        min-height: 100%;
        background: #f7f8f9;
        border: 1px solid rgba(0, 75, 100, .25);
        overflow: hidden;
        box-shadow: 0px 5px 15px -5px #999;
    }
    
    
    .wh.hp .hstTypBx .topBx {
        position: relative;
        top: 0;
        height: 60%;
        background: transparent;
        padding: 20px 20px;
        transition: all .2s ease-in-out;
    }
    .wh.hp .hstBxs_li:hover .hstTypBx { background: #fff; border: 1px solid rgba(255, 169, 39, .25);}
    
    .wh.hp .hstBxs_li:hover .topBx {  height: 40%; }
    .wh.hp .hstBxs_li:hover .btmBx {  height: 20%; padding: 0px 20px;}
    
    .wh.hp .hstBxs_li:hover  .wspBnrBxs_btn {display:block; position: relative; top:-65px; width:80%; margin:0 auto; } 
    
    
    .wh.hp .spn1 {
        display:block; 
        xx-font-family: 'OpenSansBold';
        xx-font-weight: bold;
        font-size: 110%;
        line-height: 1.0;
        xx-color: rgba(0, 75, 100, 1);
        transition: all .2s ease-in-out;
    }
    
    .wh.hp .hstTypBx .btmBx {
        position: relative;
        top: 0;
        height: 45%;
        background: rgba(0, 70, 100, 1);
	    background: var(--heroBnrBgCol01);
        padding: 20px 20px;
        transition: all .2s ease-in-out;
    }
    
    .wh.hp .spn2 {
        font-family: 'OpenSansRegular';
        font-weight: normal;
        font-size: 100%;
        line-height: 1.25em;
        position: relative;
        top: 0px;
        transition: all .2s ease-in-out;
        color:#fff;
    }
    
    .wh.hp .wspBnrBxs_btn {
        display: none;
        width: 100%;
        font-family: 'OpenSansSemiBold';
        font-weight: bold;
        font-size: 125%;
        line-height: 1.0em;
        color: rgba(0, 75, 100, 1);
        background: #ffa900;
        border: rgb(255, 204, 100);
        border-radius: 3px;
    text-align: center;
    }
    
    .wh.hp .wspBnrBxs_btn > a {
        display: block;
        /* padding: 15px 20px; */
        line-height: 2.25;
        color: #faebd7;
        /* padding: 0 20px; */
    }
    /*
    
    .wh.hp .hstTypBx:hover .topBx {
        height: 45%;
        background: rgba(3,169,244,0);
        transition: all .2s ease-in-out;
    }
    */
    .wh.hp .hstBxs_li:hover .topBx .spn1 {
        color: rgba(0, 75, 100, 1);
        font-family: 'OpenSansBold';
        font-size: 100%;
        transition: all .2s ease-in-out;
        color: #ffa900;
    }
    /**/
    .wh.hp .hstBxs_li:hover .btmBx {
        top:10px;
        height: 55%;
        background: transparent;
        color: rgba(3,169,244,1);
        transition: all .2s ease-in-out;
    }
    
     .wh.hp .hstBxs_li:hover .btmBx .spn2 {
        display: inline-block;
        font-size: 90%;
        margin-bottom: 0px;
        color: #ffa900;
        top: -10px;
        transition: all .2s ease-in-out;
    } 
    
    /* .wh.hp .hstTypBx:hover .btmBx .wspBnrBxs_btn {
        display: block;
        transition: all .2s ease-in-out;
    } */
    
    /* i1200 */
    }











@media only screen and (min-width:992px) and (max-width:1199px) {

    .wh.hp .flxItmSec2 {width:30%; border:1px solid #ffa400; margin-right:10px; height:200px; background: transparent}
    
    .wh.hp .pgMtr.jContainer {
        background:#f7f8f9;	
        xx-background: linear-gradient(-45deg, #ffa400, transparent, transparent, #ffb500);
        xx-background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        xx-background:linear-gradient(45deg,#009,#003366 , transparent, #ffa400);
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
        }
    
    @keyframes xx-gradientBG {
        0% {		background-position: 0% 50%;	}
        50% {		background-position: 100% 50%;	}
        100% {		background-position: 0% 50%;	}
    }
    
    .wh.hp .colFrame {
        padding: 50px 0px;
    }
    
    .wh.hp .colFrame .hstBxs {
        flex-wrap:wrap;
    }
    
    .wh.hp .hstBxs_li {
        position: relative;
        top: 0;
        margin-bottom: 30px;
        old-height: 202px;
        height: 200px;
        width:24%; 
        flex-direction: column;
    }
    
    
    
    .wh.hp .hstTypBx {
        position: relative;
        top: 0;
        min-height: 100%;
        background: #f7f8f9;
        border: 1px solid rgba(0, 75, 100, .25);
        overflow: hidden;
        box-shadow: 0px 5px 15px -5px #999;
    }
    
    
    .wh.hp .hstTypBx .topBx {
        position: relative;
        top: 0;
        height: 60%;
        background: transparent;
        padding: 20px 20px;
        transition: all .2s ease-in-out;
    }
    .wh.hp .hstBxs_li:hover .hstTypBx { background: #fff; border: 1px solid rgba(255, 169, 39, .25);}
    
    .wh.hp .hstBxs_li:hover .topBx {  height: 40%; }
    .wh.hp .hstBxs_li:hover .btmBx {  height: 20%; padding: 0px 20px;}
    
    .wh.hp .hstBxs_li:hover  .wspBnrBxs_btn {display:block; position: relative; top:-70px; width:80%; margin:0 auto; } 
    
    
    .wh.hp .spn1 {
        display:block; 
        xx-font-family: 'OpenSansBold';
        xx-font-weight: bold;
        font-size: 1.5rem;
        line-height: 1.0em;
        xx-color: rgba(0, 75, 100, 1);
        transition: all .2s ease-in-out;
    }
    
    .wh.hp .hstTypBx .btmBx {
        position: relative;
        top: 0;
        height: 45%;
        background: rgba(0, 70, 100, 1);
	    background: var(--heroBnrBgCol01);
        padding: 20px 20px;
        transition: all .2s ease-in-out;
    }
    
    .wh.hp .spn2 {
        font-family: 'OpenSansRegular';
        font-weight: normal;
        font-size: 100%;
        line-height: 1.25em;
        position: relative;
        top: 0px;
        transition: all .2s ease-in-out;
        color:#fff;
    }
    
    .wh.hp .wspBnrBxs_btn {
        display: none;
        width: 100%;
        font-family: 'OpenSansSemiBold';
        font-weight: bold;
        font-size: 125%;
        line-height: 1.0em;
        color: rgba(0, 75, 100, 1);
        background: #ffa900;
        border: rgb(255, 204, 100);
        border-radius: 3px;
    text-align: center;
    }
    
    .wh.hp .wspBnrBxs_btn > a {
        display: block;
        xx-padding: 15px 20px;
        color: #faebd7;
    }
    /*
    
    .wh.hp .hstTypBx:hover .topBx {
        height: 45%;
        background: rgba(3,169,244,0);
        transition: all .2s ease-in-out;
    }
    */
    .wh.hp .hstBxs_li:hover .topBx .spn1 {
        color: rgba(0, 75, 100, 1);
        font-family: 'OpenSansBold';
        font-size: 90%;
        transition: all .2s ease-in-out;
        color: #ffa900;
    }
    /**/
    .wh.hp .hstBxs_li:hover .btmBx {
        top:10px;
        height: 55%;
        background: transparent;
        color: rgba(3,169,244,1);
        transition: all .2s ease-in-out;
    }
    
     .wh.hp .hstBxs_li:hover .btmBx .spn2 {
        display: inline-block;
        font-size: 90%;
        margin-bottom: 0px;
        color: #ffa900;
        top: -10px;
        transition: all .2s ease-in-out;
    } 
    
    /* .wh.hp .hstTypBx:hover .btmBx .wspBnrBxs_btn {
        display: block;
        transition: all .2s ease-in-out;
    } */
    
    /* i1200 */
    }







@media only screen and (min-width:1200px) {

.wh.hp .flxItmSec2 {width:30%; border:1px solid #ffa400; margin-right:10px; height:200px; background: transparent}

.wh.hp .pgMtr.jContainer {
	background:#f7f8f9;	
	xx-background: linear-gradient(-45deg, #ffa400, transparent, transparent, #ffb500);
	xx-background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	xx-background:linear-gradient(45deg,#009,#003366 , transparent, #ffa400);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
	}

@keyframes xx-gradientBG {
	0% {		background-position: 0% 50%;	}
	50% {		background-position: 100% 50%;	}
	100% {		background-position: 0% 50%;	}
}

.wh.hp .colFrame {
	padding: 50px 0px;
}

.wh.hp .colFrame .hstBxs {
	flex-wrap:wrap;
}

.wh.hp .hstBxs_li {
    position: relative;
    top: 0;
    margin-bottom: 30px;
    old-height: 202px;
    height: 220px;
	width:24%; 
	flex-direction: column;
}



.wh.hp .hstTypBx {
    position: relative;
    top: 0;
    min-height: 100%;
    background: #f7f8f9;
    border: 1px solid rgba(0, 75, 100, .25);
    overflow: hidden;
    box-shadow: 0px 5px 15px -5px #999;
}


.wh.hp .hstTypBx .topBx {
    position: relative;
    top: 0;
    height: 60%;
    background: transparent;
    padding: 20px 20px;
    transition: all .2s ease-in-out;
}
.wh.hp .hstBxs_li:hover .hstTypBx { background: #fff; border: 1px solid rgba(255, 169, 39, .25);}

.wh.hp .hstBxs_li:hover .topBx {  height: 40%; }
.wh.hp .hstBxs_li:hover .btmBx {  height: 20%; padding: 0px 20px;}

.wh.hp .hstBxs_li:hover  .wspBnrBxs_btn {display:block; position: relative; top:-75px; width:85%; margin:0 auto; } 


.wh.hp .spn1 {
	display:block; 
    xx-font-family: 'OpenSansBold';
    xx-font-weight: bold;
    xx-font-size: 100%;
    line-height: 1.5;
    xx-color: rgba(0, 75, 100, 1);
    transition: all .2s ease-in-out;
}

.wh.hp .hstTypBx .btmBx {
    position: relative;
    top: 0;
    height: 45%;
    --background: rgba(0, 70, 100, 1);
    background: var(--heroBnrBgCol01);
    padding: 20px 20px;
    transition: all .2s ease-in-out;
}

.wh.hp .spn2 {
    font-family: 'OpenSansRegular';
    font-weight: normal;
    font-size: 100%;
    line-height: 1.25em;
    position: relative;
    top: 0px;
    transition: all .2s ease-in-out;
	color:#fff;
}

.wh.hp .wspBnrBxs_btn {
    display: none;
    width: 100%;
    font-family: 'OpenSansSemiBold';
    font-weight: bold;
    font-size: 125%;
    line-height: 1.0em;
    color: rgba(0, 75, 100, 1);
	background: rgb(255, 204, 0);
	background: #ffa900;
    border: rgb(255, 204, 100);
    border-radius: 3px;
    text-align: center;
}

.wh.hp .wspBnrBxs_btn > a {
    display: block;
    padding: 0 20px;
    color: #fff;
    color: #faebd7;
    line-height: 2.5;
}


/*

.wh.hp .hstTypBx:hover .topBx {
    height: 45%;
    background: rgba(3,169,244,0);
    transition: all .2s ease-in-out;
}
*/
.wh.hp .hstBxs_li:hover .topBx .spn1 {
    color: rgba(0, 75, 100, 1);
    font-family: 'OpenSansBold';
    font-size: 90%;
    transition: all .2s ease-in-out;
    color: #ffa900;
}
/**/
.wh.hp .hstBxs_li:hover .btmBx {
	top:10px;
    height: 55%;
    background: transparent;
    color: rgba(3,169,244,1);
    transition: all .2s ease-in-out;
}

 .wh.hp .hstBxs_li:hover .btmBx .spn2 {
    display: inline-block;
    font-size: 90%;
    margin-bottom: 0px;
    color: #ffa900;
    top: -10px;
    transition: all .2s ease-in-out;
} 

/* .wh.hp .hstTypBx:hover .btmBx .wspBnrBxs_btn {
    display: block;
    transition: all .2s ease-in-out;
} */

/* i1200 */
}