﻿@charset "utf-8";


/*inCommon----------------------------------*/
.inMain .titleMain h1{font-size: 40px; text-align: center; margin: 90px auto 50px auto; position: relative;}
.inMain .titleMain h1::after{position: absolute; content: ''; width: 100px; height: 2px; background: #0089d1; left: 50%;  top: 65px; transform: translateX(-50%);}
.inMain .titleMain small{font-size: 20px; text-align: center; margin: 25px auto 60px auto; display: block;}
.inMain .container{margin: 0 auto 90px auto;}
@media screen and (max-width: 1199px){
.inMain .titleMain small{margin: 25px auto 30px auto;}
}
@media screen and (max-width: 991px){
.inMain .titleMain h1{font-size: 30px; margin: 60px auto 40px auto;}
.inMain .titleMain h1::after{top: 50px;}
.inMain .titleMain small{font-size: 18px; margin: 25px auto 35px auto;}
.inMain .container{margin: 0 auto 40px auto;}
}
@media screen and (max-width: 480px){
.inMain .titleMain small{font-size: 16px; margin: 25px auto 35px auto;}
}




/*indexAd----------------------------------*/
.indexAd {}
.indexAd .img{ width: 100%; height: 750px; margin: 100px 0 0 0; overflow: hidden; background-repeat: no-repeat; background-position: center top; background-size: cover;}
.indexAd .img img{ width: 100%; height: auto;}
@media screen and (max-width: 1680px){
.indexAd .img{height: 650px;   }
}
@media screen and (max-width: 1440px){
.indexAd .img{height: 550px;}
}
@media screen and (max-width: 1199px){
.indexAd .img{height: 450px;  margin: 70px 0 0 0; }
}
 @media screen and (max-width: 991px){
.indexAd .img{height: 350px; }
}
 @media screen and (max-width: 768px){
.indexAd .img{height: 300px;}
}
 @media screen and (max-width: 680px){
.indexAd .img{height: 220px; }
}



/*inMyAccount----------------------------------*/
.inMyAccount{background: url(../images/index/in_my_account_bg.jpg) center bottom no-repeat; background-attachment: fixed !important; background-size: cover;}
.inMyAccount .titleMain h1{color: #fff;}
.inMyAccount .titleMain h1::after{background: #fff;}
.inMyAccount .titleMain small{color: #fff;}
.inMyAccount .card{width: 95%; height: 340px; margin: 0 auto; padding: 50px 0 30px 0; border: 1px solid #fff; display: inline-block;}
.inMyAccount .card-img{width: 160px; height: 160px; border-radius: 99em; text-align: center; vertical-align: middle; margin: 0 auto;
	background: #fefefe; /* Old browsers */
	background: -moz-linear-gradient(top, #fefefe 0%, #d3d3d3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #fefefe 0%,#d3d3d3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #fefefe 0%,#d3d3d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */ 
}
.inMyAccount .card-img img{position: relative; top:50%; transform:translateY(-50%); width: 60%; margin: 0 auto;}
.inMyAccount .card-body{width: 190px; margin: 15px auto; display: block;}
.inMyAccount .card-title{font-size: 30px; color: #fff; text-align: center; line-height: 1.3;}
.inMyAccount p{font-size: 17px; color: #fff; text-align: center; line-height: 1.5;}
.inMyAccount .card:hover{background-color:rgba(0, 137, 209, 0.5); border: 1px solid #0089d1;}
@media screen and (max-width: 991px){
.inMyAccount{background-attachment: inherit !important; }
.inMyAccount .card{height: 300px; padding: 30px 0; }
.inMyAccount .card-title{font-size: 22px;}
.inMyAccount p{font-size: 15px;}
}
@media screen and (max-width: 580px){
.inMyAccount .card{height: 270px; }
.inMyAccount .card-img{width: 140px; height: 140px;  }
.inMyAccount .card-img img{width: 55%;}
}
@media screen and (max-width: 450px){
.inMyAccount .card-title{font-size: 20px;}
.inMyAccount .card-img{width: 110px; height: 110px;  }
.inMyAccount .card-body{width: 120px;}
}



/*inNews----------------------------------*/
.inNews{}
.inNews .row{padding: 0 12%; }
.inNews .titleMain small{margin: 25px auto 25px auto!important; }
.inNews .card{border-bottom: 1px solid #cacaca; padding: 0 0 20px 0; margin: 0 0 15px 0;}
.inNews .card-body{}
.inNews .releaseDate{font-size: 20px; color: #0089d1; margin:0;}
.inNews .card-title{font-size: 17px; color: #333; margin:0; line-height: 1.5;}
.inNews a:hover .releaseDate{color: #00c8f7;}
.inNews a:hover .card-title{color: #999; }
@media screen and (max-width: 768px){
.inNews .releaseDate{font-size: 18px; }	
.inNews .card-title{font-size: 16px; }
}