/*
    Date     2016.4.15
    Author   Tom



    Img Url    asustor\images\nvr_beta\..		
*/


/*boostrap reset*/
*{
	margin: 0;
	padding: 0;
}
body{
	font-family: segoe ui,Helvetica,sans-serif,微軟正黑體,Arial,'Open Sans Condensed', Heiti TC,"Microsoft JhengHei",微软雅黑,"Microsoft YaHei","Lucida Sans Unicode",Verdana,Tahoma,sans-serif,Arial,微軟雅黑體;
}
h1,h2,h3,h4,h5,h6{
	margin-top: 0;
	margin-bottom: 0;
	line-height: 0;
}
a,a:hover,a:focus,a:active{
	text-decoration: none;
}
.row,.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
	margin-right: 0;
	margin-left: 0;
	padding-left: 0;
	padding-right: 0;
}
.img-responsive{
	display: inline-block;
}
/*5 colum*/
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-3-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-3-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-3-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-3-15 {
        width: 20%;
        float: left;
    }
}
/*Img Url*/

/*Banner & Row background*/
.bannerCont{
	background-color: #1E1D56;
	background-image:url(../../images/nvr_beta/banner_bg.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size:cover;
    margin-top: 66px;
}
#row4{
	background-image:url(../../images/nvr_beta/row4_bg.png);
}
#row6{
	background-image:url(../../images/nvr_beta/row6_bg.png);
}
#row9{
	background-image:url(../../images/nvr_beta/row9_bg.png);
	background-size:cover;
}


/*BannerIcon sprite */
.sprite {
    background-image: url(../../images/nvr_beta/spritesheet.png);
    background-repeat: no-repeat;
}

.sprite-bannerIcon01 {
    width: 82px;
    height: 82px;
    background-position: -5px -5px;
}

.sprite-bannerIcon01:hover {
    width: 82px;
    height: 82px;
    background-position: -97px -5px;
}

.sprite-bannerIcon02 {
    width: 82px;
    height: 82px;
    background-position: -189px -5px;
}

.sprite-bannerIcon02:hover {
    width: 82px;
    height: 82px;
    background-position: -281px -5px;
}

.sprite-bannerIcon03 {
    width: 82px;
    height: 82px;
    background-position: -5px -97px;
}

.sprite-bannerIcon03:hover {
    width: 82px;
    height: 82px;
    background-position: -97px -97px;
}

.sprite-bannerIcon04 {
    width: 82px;
    height: 82px;
    background-position: -189px -97px;
}

.sprite-bannerIcon04:hover {
    width: 82px;
    height: 82px;
    background-position: -281px -97px;
}

.sprite-bannerIcon05 {
    width: 82px;
    height: 82px;
    background-position: -5px -189px;
}

.sprite-bannerIcon05:hover {
    width: 82px;
    height: 82px;
    background-position: -97px -189px;
}

.sprite-bannerIcon06 {
    width: 82px;
    height: 82px;
    background-position: -189px -189px;
}

.sprite-bannerIcon06:hover {
    width: 82px;
    height: 82px;
    background-position: -281px -189px;
}

.sprite-bannerIcon07 {
    width: 82px;
    height: 82px;
    background-position: -5px -281px;
}

.sprite-bannerIcon07:hover {
    width: 82px;
    height: 82px;
    background-position: -97px -281px;
}

.sprite-bannerIcon08 {
    width: 82px;
    height: 82px;
    background-position: -189px -281px;
}

.sprite-bannerIcon08:hover {
    width: 82px;
    height: 82px;
    background-position: -281px -281px;
}

.sprite-bannerIcon09 {
    width: 82px;
    height: 82px;
    background-position: -373px -5px;
}

.sprite-bannerIcon09:hover {
    width: 82px;
    height: 82px;
    background-position: -373px -97px;
}

.icon01{
	background-position: 0 0;
}

/*Module Style-------------------------------------------------*/

/*g*/
a,a:hover,a:active,a:focus{ text-decoration: none; }

ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* IE < 8 */
}
.pr{position: relative;}
.pa{position: absolute;}
/*margin*/
.mt5{margin-top: 5px;}
.mb5{margin-bottom: 5px;}
.mt30{margin-top: 30px;}
.mb30{margin-bottom: 30px;}
.mt50{margin-top: 50px;}
.mb50{margin-bottom: 50px;}
.mt100{margin-top: 100px;}
.mb100{margin-bottom: 100px;}
.mt150{margin-top: 150px;}
/*padding*/
.pt30{padding-top: 30px;}
.pb30{padding-bottom: 30px;}
.pt50{padding-top: 50px;}
.pb50{padding-bottom: 50px;}
.pl30{padding-left: 30px;}
.pr30{padding-right: 30px;}
/*block seprate*/
.blk_sp15{
    padding: 15px;
    box-sizing: border-box;
}
/*text-align*/
.tac{text-align: center;}
.tal{text-align: left;}
.tar{text-align: right;}
/*div center*/
.dc{
	margin: 0 auto;
}
/*width*/
.d950{max-width: 950px;}
.d850{max-width: 850px;}
.d750{max-width: 750px;}
/*border*/
.bdt{border-top: 1px solid #767676; margin-bottom: 8px; padding-bottom: 8px;}
.bdb{border-bottom: 1px solid #767676; margin-bottom: 8px; padding-bottom: 8px;}
/*font-size*/
.fz16{font-size: 16px;}
.centerWrap{
	max-width: 1200px;
	margin: 0 auto;
}
/*color tone*/
.f_purple{
	color: #424f9b;
}
.f_wh{
	color: white;
}

.f_blk{
	color: black;
}
.bg_gray{
	background-color: #f3f3f3;
}
/*
----------------------------------------------------
			Main style
----------------------------------------------------	
*/
.bannertitle{
	margin-top: 9%;
}

.bannertitle h1{
	font-size: 50px;
	margin-bottom: 20px;
	font-weight: 500;
}
.bannertitle h2{
	line-height: 2.5em;
    font-weight: lighter;
	font-size: 36px;
}

.bannerMain{
	margin: 40px 0;
}

.bannerIcon{
	display: inline-block;
	height: 130px;
    vertical-align: bottom;
}
.bannerIcon:not(:last-child){
	margin-right: 20px;
}
.bannerIcon span{
	display: block;
	color: #FFF;
	margin-top: 5px;
}
.bannerIcon a:hover,
.bannerIcon span:hover{
	color: #FFF;
	text-decoration: none;
}

/*
------------------------------------
       row content
------------------------------------
*/

#row1,#row2,#row3,#row4,#row5,#row6,#row7,#row8,#row9{
	padding: 4em 0;
}
.row_title{
	line-height: 1.5em;
	font-size: 2.6em;
	padding-bottom: 20px;
	font-weight: 500;
}
.row_content{
	font-size: 1.3em;
	line-height: 1.8em;
	max-width: 950px;
	margin: 0 auto;
}
#row4 .imgTune{
	margin-top: 67px;
}

#row6 .tuchList{
	margin-bottom: 15px;	
}
#row7{
	background-color: #003f89;
}
#row8{
	background-color: #61bdd7;
}
#row9{
    min-height: 500px;
}

/*共用區塊*/

/*
------------------------------------
navigator
------------------------------------
*/
.mobilemenu_open{ display: none;}
.mobilemenu{ display: none;}
.navigator{
	width: 100%;
	position: fixed;
	z-index: 999;
	top: 0;
	background: #FFF;
	opacity: .9;
	background: rgba(255,255,255,.9);
}
.logo{ padding-top: 3px; }
#asustor_rss,
#twitter,
#facebook,
#googleplus,
#youtube{
	display: inline-block;
	width: 30px;
    height: 60px;
    line-height: 30px;
    margin-right: 15px;
    background-position: center center;	
}

#asustor_rss:hover,
#twitter:hover,
#facebook:hover,
#googleplus:hover,
#youtube:hover{
	background-position: -30px 17px;
}
#asustor_rss {
    
    background: url(../../images/success_story/afterrain/button/rss.png) no-repeat 0 17px;
}
#twitter {
    background: url(../../images/success_story/afterrain/button/twitter.png) no-repeat 0 17px;
}
#facebook {
    background: url(../../images/success_story/afterrain/button/facebook.png) no-repeat 0 17px;
}
#googleplus {
    background: url(../../images/success_story/afterrain/button/googleplus.png) no-repeat 0 17px;
}
#youtube {
    background: url(../../images/success_story/afterrain/button/youtube.png) no-repeat 0 17px;
}

.col-md-3-15
{
	margin:20px 0px;
	
}


/*
------------------------------------
footer
------------------------------------
*/
footer{
	background: #191919;
	padding-top: 50px;
	padding-bottom: 120px;
	margin-bottom:-100px;
}
.footerLink a:hover{
	color: #2995F3;
}
.copyright{
	display: block;
	color: #777;
	margin-top: 30px;
	line-height: 1.5em;
}





/*
------------------------------------
       mobile
------------------------------------
*/

@media only screen and (max-width: 1280px) {
	.bannerCont{
		
	}
}
@media only screen and (min-width: 1024px) {
	.bannerIconCont_mobile{
		display: none;
	}
}
@media only screen and (max-width: 1024px) {
	
	/*module tune*/
	.mt100{
		margin-top: 2.5em;
	}
	/*padding set*/
   	.row {
	    padding-left: 1em;
	    padding-right: 1em;
	    box-sizing: border-box;
	}
	/*banner*/
	.bannerCont{
		background-size: cover;
		background-position: center;
		height: auto;
	}
	.bannertitle h1 {
	    line-height: 1.1em;
	    font-size: 4.5rem;
	}
	.bannertitle h2 {
	    line-height: 2em;
	    font-size: 32px;
	}
	/*row*/
	#row1 .dsp_n{
		display: none;
	}
	#row4{
		background-size: cover;
		background-position: center;
	}
	#row6 .tuchList{
		font-size: 1.3em;
	}
	#row6 .tuchList:first-child{
		margin-top: 50px;
	}
	.row9_brand{
		margin-bottom: 15px;
		padding: 15px;
	}
}

@media only screen and (max-width: 1024px) {
	/*navigator*/
	.logo{
		
	}
	.mobilemenu_close{
		font-size: 30px;
		color: #FFF;
		cursor: pointer;
	}
	.mobilemenu_open{ display: block; padding-top: 18px; cursor: pointer;}
	.mobilemenu{
		transition:  all 1s ease-in-out;
		background: #000;
		opacity: 0;
		position: fixed;
		z-index: 9999;
		width: 45%;
		height: 100vh;
		top: 0;
		right: 0;
		padding-top: 15px;
	}
	.menu_show{
		opacity: 1;
		display: block;
	}
	.third-party_link{
		display: none;
	}
	.third-party_link_mobile{
		display: block;
		border-top: 1px solid #777;
	}
	.bannerIconCont{
		display: none;
	}
	.bannerIcon:not(:last-child){
		margin-right: 0;
	}
	.bannerIconCont_mobile{
		display: block;
	}
	.sprite{
		display: inline-block;
	}
	#youtube, #twitter, #facebook, #googleplus{
		margin-right: 25px;
	}
	#asustor_rss{
		margin-right: 0;
	}
}
@media only screen and (max-width: 768px){
	.mobilemenu{
		width: 100%;
		display: none;
	}
}