.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline:none }
.slides, .flex-control-nav, .flex-direction-nav { margin:0; padding:0; list-style:none }
@font-face { font-family:'flexslider-icon'; src:url(https://www.asustor.com/fonts/flexslider-icon.eot); src:url(https://www.asustor.com/fonts/flexslider-icon.eot?#iefix) format("embedded-opentype"), url(https://www.asustor.com/fonts/flexslider-icon.woff) format("woff"), url(https://www.asustor.com/fonts/flexslider-icon.ttf) format("truetype"), url(https://www.asustor.com/fonts/flexslider-icon.svg#flexslider-icon) format("svg"); font-weight:400; font-style:normal }
.flexslider { margin:0; padding:0 }
.flexslider .slides > li { display:none; -webkit-backface-visibility:hidden }
.flexslider .slides img { z-index:-1 }
.flex-pauseplay span { text-transform:capitalize }
.slides:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0 }
html[xmlns] .slides { display:block }
* html .slides { height:1% }
.no-js .slides > li:first-child { display:block }
.flexslider { margin:0; background:#fff; border:0 solid #fff; position:relative; zoom:1 }
.flex-viewport { max-height:2000px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease }
.loading .flex-viewport { max-height:300px }
.flexslider .slides { zoom:1 }
.carousel li { margin-right:5px }
.flex-direction-nav { *height:0
}
.flex-direction-nav a { text-decoration:none; display:block; width:60px; height:60px; margin:0; position:absolute; top:50%; z-index:10; overflow:hidden; opacity:0; cursor:pointer; color:rgba(0,0,0,0.8); -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease }
.flex-direction-nav .flex-prev { left:-50px; background:url(../images/assets/prev.png) no-repeat }
.flex-direction-nav .flex-next { right:-50px; background:url(../images/assets/next.png) no-repeat }
.flexslider:hover .flex-prev { opacity:.7; left:20px }
.flexslider:hover .flex-next { opacity:.7; right:10px }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity:1 }
.flex-direction-nav .flex-disabled { opacity:0!important; filter:alpha(opacity=0); cursor:default }
.flex-direction-nav a:before { font-family:"flexslider-icon"; font-size:0; line-height:1; display:inline-block; content:'\f001' }
.flex-direction-nav a.flex-next:before { content:'\f002' }
.flex-pauseplay a { display:block; width:20px; height:20px; position:absolute; bottom:5px; left:10px; opacity:.8; z-index:10; overflow:hidden; cursor:pointer; color:#000 }
.flex-pauseplay a:before { font-family:"flexslider-icon"; font-size:20px; display:inline-block; content:'\f004' }
.flex-pauseplay a:hover { opacity:1 }
.flex-pauseplay a.flex-play:before { content:'\f003' }
.flex-control-nav { width:100%; position:absolute; bottom:15px; text-align:center; z-index:9000 }
.flex-control-nav li { margin:0 10px; display:inline-block; zoom:1; *display:inline
}
.flex-control-paging li a { width:15px; height:15px; display:block; background:#FFF; cursor:pointer; text-indent:-9999px; -webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px; -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow:inset 0 0 3px rgba(0,0,0,0.3); box-shadow:inset 0 0 3px rgba(0,0,0,0.3) }
.flex-control-paging li a:hover { background:#0079c0; background:rgba(0,121,192,0.7) }
.flex-control-paging li a.flex-active { background:#0079c0; cursor:default }
.flex-control-thumbs { margin:5px 0 0; position:static; overflow:hidden }
.flex-control-thumbs li { width:25%; float:left; margin:0 }
.flex-control-thumbs img { width:100%; display:block; opacity:.7; cursor:pointer }
.flex-control-thumbs img:hover { opacity:1 }
.flex-control-thumbs .flex-active { opacity:1; cursor:default }
@media screen and (max-width:860px) {
.flex-direction-nav .flex-prev { opacity:1; left:10px }
.flex-direction-nav .flex-next { opacity:1; right:10px }
}
.nav-list { margin-bottom:0 }
.img-rwd { max-width:100%; height:auto }
.img-toBg, #banner { width:100%; height:100%; -moz-background-size:100% auto; -o-background-size:100% auto; -webkit-background-size:100% auto; background-size:100% auto }
.fleximg { width:100%; margin:0 auto; position:relative; image-rendering:optimizeQuality }
.fleximg:before { display:block; content:" "; width:100%; background-size:100%; background-position:center center; background-repeat:no-repeat; image-rendering:optimizeQuality }
.img_bk { overflow:hidden; margin-bottom:15px }
.collapseImg { width:90%; padding:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box }
.bg-cover, .img-toBg, #banner, .icon:before { -moz-background-size:cover; -o-background-size:cover; -webkit-background-size:cover; background-size:cover }
.bg-cont { -moz-background-size:contain; -o-background-size:contain; -webkit-background-size:contain; background-size:contain }
.bg-nrp, .img-toBg, #banner, .icon:before { background-repeat:no-repeat }
.bg-pos-center, .img-toBg, #banner, .icon:before { background-position:50% 50% }
html, body { font-size:16px }
#page h1, #page h2, #page h3, #page h4, #page h5, #page h6 { margin:0; padding:0 }
.text-shadow { text-shadow:0 1px 5px rgba(0,0,0,0.55) }
.icon { display:inline-block }
.icon:before { content:""; display:inline-block }
#page { width:100%; overflow:hidden }
#banner { padding-bottom:35px }
#banner .title { font-size:48px; font-weight:400; margin:0; margin-bottom:15px }
#banner .sub-title { line-height:1.3 }
@media (max-width:767px) {
#banner .sub-title { font-weight:600 }
}
#banner .feature-list { list-style-position:inside; list-style-type:disc; font-size:18px; line-height:1.7 }
.section.font_white { color:#fff }
.section.font_black { color:#000 }
.section.no_pad { padding:0 }
.section, #collapse_bk { padding:35px 0 }
@media (max-width:767px) {
.section, #collapse_bk { padding:25px 0 }
}
.section .section-title, .section .section-descript, .section .img, #collapse_bk .section-title, #collapse_bk .section-descript, #collapse_bk .img { text-align:center; font-weight:400; line-height:1.5 }
@media (max-width:767px) {
.section .section-title, .section .section-descript, .section .img, #collapse_bk .section-title, #collapse_bk .section-descript, #collapse_bk .img { font-weight:600; text-align:left; line-height:1.4 }
}
.section header, #collapse_bk header { max-width:950px; margin:0 auto }
.section header.tal > *, .section .section-title.tal, .section .section-descript.tal, #collapse_bk header.tal > *, #collapse_bk .section-title.tal, #collapse_bk .section-descript.tal { text-align:left }
.section .section-descript, #collapse_bk .section-descript { margin-top:15px; width:100% }
.section .section-descript > *, #collapse_bk .section-descript > * { max-width:900px; display:inline-block; text-align:left }
.section .section-descript h4, #collapse_bk .section-descript h4 { line-height:1.4 }
@media (min-width:768px) {
.vmiddle { position:relative; padding-top:10% }
.vmiddle > * { top:50%; -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%) }
}
.hr { background-color:#ddd; height:1px; margin-top:3%; margin-bottom:3% }
.center-block { text-align:center }
#banner { color:#fff; padding:4% 0 }
@media (max-width:767px) {
#banner { padding:8% 0 }
}
#banner .title { font-size:40px; color:#fff }
@media (max-width:767px) {
#banner .title { font-size:48px; color:#fff }
}
#banner .sub-title { margin-bottom:15px; color:#fff }
@media (max-width:991px) {
#banner #banner_img { width:100%; margin-top:15px }
}
@media (min-width:768px) and (max-width:991px) {
#banner #banner_img { width:100%; height:421px; margin-top:0 }
}
@media (min-width:992px) and (max-width:1199px) {
#banner #banner_img { width:100%; height:421px; margin-top:-35px }
}
@media (min-width:1200px) {
#banner #banner_img { width:138%; height:421px; margin-top:-35px }
}
#banner .note-info ol { margin-left:-25px }
#banner .note-info ol li { margin-bottom:15px }
#banner .note-info ol a, #banner .note-info ol a:hover { color:#fff }
.nav-list { margin-bottom:0 }
.img-rwd { max-width:100%; height:auto }
.img-toBg, #banner { width:100%; height:100%; -moz-background-size:100% auto; -o-background-size:100% auto; -webkit-background-size:100% auto; background-size:100% auto }
.fleximg { width:100%; margin:0 auto; position:relative; image-rendering:optimizeQuality }
.fleximg:before { display:block; content:" "; width:100%; background-size:100%; background-position:center center; background-repeat:no-repeat; image-rendering:optimizeQuality }
.img_bk { overflow:hidden; margin-bottom:15px }
.collapseImg { width:90%; padding:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box }
.bg-cover, .img-toBg, #banner, .icon:before { -moz-background-size:cover; -o-background-size:cover; -webkit-background-size:cover; background-size:cover }
.bg-cont { -moz-background-size:contain; -o-background-size:contain; -webkit-background-size:contain; background-size:contain }
.bg-nrp, .img-toBg, #banner, .icon:before { background-repeat:no-repeat }
.bg-pos-center, .img-toBg, #banner, .icon:before { background-position:50% 50% }
html, body { font-size:16px }
#page h1, #page h2, #page h3, #page h4, #page h5, #page h6 { margin:0; padding:0 }
.text-shadow { text-shadow:0 1px 5px rgba(0,0,0,0.55) }
.icon { display:inline-block }
.icon:before { content:""; display:inline-block }
#page { width:100%; overflow:hidden }
#banner { padding-bottom:35px }
#banner .title { font-size:48px; font-weight:400; margin:0; margin-bottom:15px }
#banner .sub-title { line-height:1.3 }
@media (max-width:767px) {
#banner .sub-title { font-weight:600 }
}
#banner .feature-list { list-style-position:inside; list-style-type:disc; font-size:18px; line-height:1.7 }
.section.font_white { color:#fff }
.section.font_black { color:#000 }
.section.no_pad { padding:0 }
.section, #collapse_bk { padding:35px 0 }
@media (max-width:767px) {
.section, #collapse_bk { padding:25px 0 }
}
.section .section-title, .section .section-descript, .section .img, #collapse_bk .section-title, #collapse_bk .section-descript, #collapse_bk .img { text-align:center; font-weight:400; line-height:1.5 }
@media (max-width:767px) {
.section .section-title, .section .section-descript, .section .img, #collapse_bk .section-title, #collapse_bk .section-descript, #collapse_bk .img { font-weight:600; text-align:left; line-height:1.4 }
}
.section header, #collapse_bk header { max-width:950px; margin:0 auto }
.section header.tal > *, .section .section-title.tal, .section .section-descript.tal, #collapse_bk header.tal > *, #collapse_bk .section-title.tal, #collapse_bk .section-descript.tal { text-align:left }
.section .section-descript, #collapse_bk .section-descript { margin-top:15px; width:100% }
.section .section-descript > *, #collapse_bk .section-descript > * { max-width:900px; display:inline-block; text-align:left }
.section .section-descript h4, #collapse_bk .section-descript h4 { line-height:1.4 }
@media (min-width:768px) {
.vmiddle { position:relative; padding-top:10% }
.vmiddle > * { top:50%; -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%) }
}
.hr { background-color:#ddd; height:1px; margin-top:3%; margin-bottom:3% }
.center-block { text-align:center }
#banner { color:#fff; padding:4% 0 }
@media (max-width:767px) {
#banner { padding:8% 0 }
}
#banner .title { font-size:48px; color:#fff }
@media (max-width:767px) {
#banner .title { font-size:48px; color:#fff }
}
#banner .sub-title { margin-bottom:15px; color:#fff }
@media (max-width:991px) {
#banner #banner_img, #style_5 #banner_img { width:100%; margin-top:15px }
}
@media (min-width:768px) and (max-width:991px) {
#banner #banner_img, #style_5 #banner_img { width:100%; height:421px; margin-top:0 }
}
@media (min-width:992px) and (max-width:1199px) {
#banner #banner_img, #style_5 #banner_img { width:110%; height:421px; margin-top:35px }
}
@media (min-width:1200px) and (max-width:1399px) {
#banner #banner_img, #style_5 #banner_img { width:100%; height:421px; margin-top:60px; }
}
@media (min-width:1400px) {
#banner #banner_img, #style_5 #banner_img { width:138%; height:421px; margin-top:90px; }
}
#banner .note-info ol { margin-left:-25px }
#banner .note-info ol li { margin-bottom:15px }
#banner .note-info ol a, #banner .note-info ol a:hover { color:#fff }
#banner .title, #banner .sub-title { font-family:"Open Sans", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "新細明體", Verdana, sans-serif }
@media (max-width:767px) {
.flexslider .slides > li { height:127vw }
#banner .title { font-weight:300; line-height:1.3em; font-size:32px }
#banner .sub-title { font-weight:300; font-size:20px; line-height:34px }
#banner-59 .title { font-family:"Open Sans", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "新細明體", Verdana, sans-serif; font-weight:300; line-height:1.3em; font-size:32px; margin-top:15% }
#banner-63 .pull-right { float:left!important }
}
@media (min-width:768px) and (max-width:991px) {
.flexslider .slides > li { height:750px }
#banner .title { font-weight:300; line-height:1.3em; font-size:40px }
#banner .sub-title { font-weight:300; font-size:24px; line-height:34px }
#banner-64 .title { font-size:38px }
#banner-59 .title { font-family:"Open Sans", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "新細明體", Verdana, sans-serif; font-weight:300; line-height:65px; font-size:58px; margin-top:15% }
#banner-62 #banner { padding:0 }
#banner-62 .img img { width:50% }
}
@media (min-width:992px) {
#banner .title { font-weight:300; line-height:1.3em; font-size:40px }
#banner .sub-title { font-weight:300; font-size:24px; line-height:34px }
}
@media (min-width:992px) and (max-width:1199px) {
.flexslider .slides > li { height:500px }
#banner-58 .banner_img2 { width:95% }
#banner-59 .title { font-family:"Open Sans", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "新細明體", Verdana, sans-serif; font-weight:300; line-height:55px; font-size:48px }
#banner-61 #banner { padding:10% 0 }
#banner-63 .title { font-size:33px }
}
@media (min-width:1200px) {
.flexslider .slides > li { height:600px }
#banner-59 .title { font-family:"Open Sans", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "新細明體", Verdana, sans-serif; font-weight:300; line-height:55px; font-size:48px }
}
/*=====index===*/
body { font-size:15px }
.top_8 p { font-size:14px }
.back_color_blue p, .back_color_green p, .back_color_dust p, .back_color_blue a, .back_color_green a, .back_color_dust a { font-size:14px; min-height:50px }
.back_color_green h4, .back_color_dust h4 { line-height:1.4 }
.abgne_tip_gallery_block { margin:0 auto; margin-bottom:5px; padding:0; width:100%; overflow:hidden; position:relative }
.abgne_tip_gallery_block img { text-align:center; width:100% }
.abgne_tip_gallery_block .caption { position:absolute; top:77%; width:100%; padding:0 10px 10px; cursor:pointer; color:#fff; background:rgba(0,0,0,.7) }
.abgne_tip_gallery_block .caption h2 { margin-top:-7px; padding:0 }
.abgne_tip_gallery_block .caption h2 a { text-decoration:none; color:#FFF; font-size:16px }
.abgne_tip_gallery_block .caption h2 a:hover { text-decoration:none }
body { background-color:#FFF; overflow-y:scroll; 　overflow-x:hidden }
#abgneBlock { width:940px; height:279px; position:relative; overflow:hidden; border:1px solid #ccc }
#abgneBlock ul.list { padding:0; margin:0; list-style:none; position:absolute; width:9999px; height:100% }
#abgneBlock ul.list li { float:left; width:940px; height:100% }
#abgneBlock .list img { width:100%; height:100%; border:0 }
#abgneBlock ul.playerControl { margin:0; padding:0; list-style:none; position:absolute; bottom:5px; right:5px; height:14px }
#abgneBlock ul.playerControl li { float:left; width:23px; height:14px; cursor:pointer; margin:0 2px; background:url(images/rect_ctrl.png) no-repeat 0 0 }
#abgneBlock ul.playerControl li.current { background-position:-23px 0 }
.oneByOne_item span.txt3 { clear:left; position:absolute; top:190px; left:20px; padding:.4em; color:#333; font-size:1.2em; text-align:left; width:570px }
.banner_as6212rd { position:relative; padding-top:6% }
.banner_as6212rd img { top:30% }
.frame { text-align:center; border-radius:1px; background-color:#f5f5f5; width:108%; margin-bottom:10px }
.frame h3 { margin-top:0; margin-bottom:0; padding:8px 0 }
.frame img { width:100% }
.box_shadow { transition:all .3s ease }
.box_shadow:hover { box-shadow:4px 4px 12px 4px rgba(10%,10%,20%,0.2); -webkit-transform:translateX(-1px); transform:translateX(-2px); -webkit-transform:translateY(-1px); transform:translateY(-2px) }
@media (max-width:991px) {
.banner_as6212rd img { max-width:100% }
}
@media (min-width:992px) and (max-width:1460px) {
.banner_as6212rd img { position:relative; right:-3%; max-width:620px }
}
@media (min-width:1460px) and (max-width:1920px) {
.banner_as6212rd img { position:relative; right:-6%; max-width:876px }
}
h3 { font-size:20px }
.flexslider { background:#fff; overflow:hidden }
.slides li { background-size:cover; background-position:50% 100% }
.white h1, .white h2 { color:#fdce00 }
.white h2 { color:#FFF }
.style_58 h1 { color:#264592; font-weight:lighter; font-size:36px; line-height:45px }
.style_58 h2 { font-size:20px; line-height:30px; color:#000 }
.style_60 h1 { color:#fff; font-weight:400; font-size:36px; line-height:45px }
.style_60 h2 { font-size:18px; line-height:30px; color:#53bfa6 }
.top h1, .top h2 { color:#fff; text-align:center }
.top h2 { color:#e0ed38; text-align:center; line-height:30px }
.back_color_green { background:#b1e8e8; background-image:-moz-radial-gradient(center 45deg, circle cover, #fff, #b1e8e8); background-image:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#fff), to(#b1e8e8)); border-left:#FFF thin solid; border-right:#FFF thin solid; height:100%; z-index:100 }
.back_color_dust { background:#e1d9d4; background-image:-moz-radial-gradient(center 45deg, circle cover, #fff, #e1d9d4); background-image:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#fff), to(#e1d9d4)); border-left:#FFF thin solid; border-right:#FFF thin solid; height:100%; z-index:100 }
.back_color_blue { background:#b1d8e8; background-image:-moz-radial-gradient(center 45deg, circle cover, #fff, #b1d8e8); background-image:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#fff), to(#b1d8e8)); border-left:#FFF thin solid; border-right:#FFF thin solid; height:100%; z-index:100 }
a { color:#00a8ff }
a:hover { color:#23527c; text-decoration:none }
.top_8 a { color:#000 }
.top_8 a:hover { color:#008fd9 }
.flex-control-nav flex-control-paging { z-index:9999 }
h6 { margin-top:0; font-size:14px }
.right_8 { display:table-row; float:left; width:49.4% }
.right_8 img { margin-top:10px }
#top_8 a:hover div { background-color:#F4F7F9 }
.top_8 .layer1 { border:thin solid #eee; margin-top:-18px; padding-bottom:5px }
.top_8 .layer2 { vertical-align:central; vertical-align:text-top; height:30px }
.cover_section { background-color:#242424; height:30px; position:relative; top:-30px; z-index:9988; margin-bottom:-60px }
.grid12_12 { margin-top:30px }
.grid12_12 img { max-width:755px; margin:0 auto }
.grid6_6 { margin-top:80px }
.grid6_6_alc img { max-width:500px; margin:0 auto }
.grid6_6_img { margin-top:40px }
.banner_img2 { display:inline!important; margin-top:15px }
.flex-direction-nav { display:block }
@media (max-width:600px) {
.index_banner_img, .index_banner_img2 { max-width:300px }
.index_banner_img img, .index_banner_img2 img { max-width:300px }
.best_buy { margin:0 auto; text-align:center }
.grid12_12 { margin-top:45px }
.grid6_6 { margin-top:0 }
.flex-direction-nav { display:none }
}
.best_buy { display:none }
.top_8 best_buy .col-md-8 { max-height:140px; overflow:hidden }
.hot_product_btn { float:right; position:relative; top:10px }
.hot_product_btn a { float:left; width:40px; margin:10px }
.top_8 best_buy_new { margin-left:3px; margin-top:-3px; height:12px }
.index_tool { overflow:hidden }
.top4 { padding:0 2px }
.top4_row { max-width:1200px }
#top h1 { margin-top:30px }
#top img { margin:30px 0 }
.style_65 h1 { color:#e6674a }
.style_65 h2 { color:#333 }
#btn_pre { width:30px; height:30px; line-height:30px; display:block; background-image:url(../images/templates/btn/page_left.png); background-size:initial; background-repeat-x:no-repeat; background-repeat-y:no-repeat; background-attachment:initial; background-origin:initial; background-clip:initial; background-color:initial; background-position-x:0; background-position-y:0; cursor:pointer }
#btn_pre:hover { background-image:url(../images/templates/btn/page_left.png); background-size:initial; background-repeat-x:no-repeat; background-repeat-y:no-repeat; background-attachment:initial; background-origin:initial; background-clip:initial; background-color:initial; background-position-x:-30px; background-position-y:0 }
#btn_next { width:30px; height:30px; line-height:30px; display:block; background:url(../images/templates/btn/page_right.png) no-repeat; background-position:0 0; cursor:pointer }
#btn_next:hover { background:url(../images/templates/btn/page_right.png) no-repeat; background-position:-30px 0 }
.top_8 best_buy a span { font-size:14px }
@media only screen and (max-width:992px) {
.grid12_12 { margin-top:45px }
.grid6_6 { margin-top:50px }
.flex-direction-nav { display:none }
.top4 { padding:0 }
.abgne_tip_gallery_block .caption { position:absolute; top:67% }
}
@media only screen and (max-width:768px) {
.grid12_12 { margin-top:45px }
.grid6_6 { margin-top:0 }
.flex-direction-nav { display:none }
.top4 { padding:0 2px }
.abgne_tip_gallery_block .caption { position:absolute; bottom:0 }
#top h1 { font-size:26px }
}
@media only screen and (max-width:480px) {
.grid12_12 { margin-top:45px }
.grid6_6 { margin-top:0 }
.flex-direction-nav { display:none }
.top4 { padding:0 }
.abgne_tip_gallery_block .caption { position:absolute; top:80% }
#top h1 { font-size:26px }
.frame { width:100% }
}
@media only screen and (max-width:320px) {
.grid12_12 { margin-top:45px }
.grid6_6 { margin-top:0 }
.flex-direction-nav { display:none }
.top4 { padding:0 }
.abgne_tip_gallery_block .caption { position:absolute; top:80% }
#top h1 { font-size:26px }
.frame { width:100% }
}
.right_8 div, .right_8 img { text-align:center }
.top_8 best_buy span { font-size:14px }
@media (max-width:767px) {
#banner-65 h1 { font-size:32px }
#banner-65 h2 { font-size:20px }
.banner_position { position:inherit; top:inherit; left:inherit; transform:inherit }
#top h1 { font-size:28px }
#top h2 { font-size:20px }
}
@media (min-width:768px) {
#banner-65 h1 { font-size:48px }
#banner-65 h2 { font-size:28px }
.banner_position { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) }
#top h1 { font-size:48px; font-weight:400 }
#top h2 { font-size:24px }
}
/*=======index_full=====*/
.container-fluid { background-color:#f6f6f6 }
.gird_4, .mid_2, .tool_wrap { margin:-3px 0; background-color:#FFF }
.mid_3 { margin:3px -27px }
.flex { display:flex }
.title_height { width:100%; position:absolute; top:70%; left:50%; transform:translate(-50%, -50%) }
.title_height p { line-height:1.2; color:#333 }
.gird_4 h2, .gird_4 h3, .gird_4 p { color:#333; text-align:center }
.gird_4 p { min-height:40px }
.mid_2 h2, .mid_3 h2 { position:absolute; color:#FFF; bottom:20px; left:20px }
.tool_wrap h2 { color:#555; position:relative }
.tool_wrap h3 { color:#555; position:relative }
.tool_wrap { background-color:#fff; text-align:center }
.tool_wrap p { margin:0 auto }
.hover12 { background:#000 }
.hover12 img { opacity:1; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; -webkit-filter:brightness(.8) }
.hover12:hover img { opacity:.5 }
.blue_box { background:#b1d8e8; background-image:-moz-radial-gradient(center 45deg, circle cover, #fff, #b1d8e8); background-image:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#fff), to(#b1d8e8)); z-index:100; text-align:center; padding:10px 20px; margin:3px -28px }
.green_box { background:#b1e8e8; background-image:-moz-radial-gradient(center 45deg, circle cover, #fff, #b1e8e8); background-image:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#fff), to(#b1e8e8)); z-index:100; text-align:center; padding:10px 20px; margin:3px -28px }
.blue_box h3, .green_box h3 { text-align:left }
.top_four { background-color:#f9f9f9 }
mw1920 { max-width:1920px }
.top_four div { overflow:hidden }
.top_four p { padding:0 20px 10px; min-height:80px; font-size:15px }
.top_four h3 { padding-left:20px; padding-right:20px }
.top_four div img { transition:all .3s ease; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out }
.top_four div img:hover, .top_four div .active { -webkit-filter:brightness(1); -webkit-transform:scale(1.1); transform:scale(1.1) }
.box_shadow:hover { box-shadow:1px 2px 6px 2px rgba(10%,10%,20%,0.25) }
.back_color_blue p, .back_color_green p, .back_color_dust p, .back_color_blue a, .back_color_green a, .back_color_dust a { font-size:16px; min-height:50px }
@media (max-width:767px) {
.banner_position { position:inherit; top:inherit; left:inherit; transform:inherit }
#banner .title { font-weight:300; line-height:1.3em; font-size:32px }
#banner .sub-title { font-weight:300; font-size:20px; line-height:34px }
}

/*============================*/
@media (max-width:767px) {
#banner .title { font-weight:300; line-height:1.3em; font-size:32px }
#banner .sub-title { font-weight:300; font-size:20px; line-height:34px }
#big_img { /*position:relative;
	top:45px;*/
	margin-bottom:60px; padding-bottom:60px; }
}
@media (min-width:768px) {
#banner .title { font-weight:300; line-height:1.3em; font-size:32px }
#banner .sub-title { font-weight:300; font-size:20px; line-height:34px }
}


/*============================*/
@media (min-width:768px) and (max-width:991px) {
#banner .title { font-weight:300; line-height:1.3em; font-size:32px }
#banner .sub-title { font-weight:300; font-size:20px; line-height:34px }
#big_img { position:relative; top:45px; }
#big_img_left { position:relative; margin-top:60px; }
}
@media (min-width:992px) and (max-width:1199px) {
#banner .title { font-size:40px; font-weight:400; margin:0; margin-bottom:15px }
#banner .sub-title { line-height:1.3; font-size:24px; }
#big_img { position:relative; top:90px; }
#big_img_left { position:relative; left:-60px; }
}
@media (min-width:1200px) and (max-width:1399px) {
#banner .title { font-size:48px; font-weight:400; margin:0; margin-bottom:15px }
#banner .sub-title { line-height:1.3; font-size:28px; }
#big_img { position:relative; top:90px; }
#big_img_left { position:relative; left:-100px; }
}
@media (min-width:1400px) {
#banner .title { font-size:48px; font-weight:400; margin:0; margin-bottom:15px }
#banner .sub-title { line-height:1.3; font-size:28px; }
#big_img { width:130%; position:relative; }
#big_img_left { width:130%; position:relative; left:-120px; }
}
 @media(max-width: 767px) {
.flex-box { display: block; }
}
@media(min-width: 768px) {
.flex-box { display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
}
/*===========================*/



.hompage-tools-icon__item { display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:left; justify-content:left; font-size:14px; line-height:20px; color:#282828; border-right:0; margin-top:25px; margin-bottom:25px }
.col-sm-2:last-child > .hompage-tools-icon__item { border-right:0 }
.hompage-tools-icon__item:hover .icon, .hompage-tools-icon__item:focus .icon { -ms-background-position-y:0; background-position-y:0 }
.icon { display:inline-block; content:""; width:54px; height:54px; background-image:url(../images/index/homepage__tools-icon.png); -webkit-background-size:324px 108px; background-size:324px 108px; cursor:pointer; -ms-background-position-y:54px; background-position-y:54px; margin-right:5px }
.icon__nas-selector { background-position-x:0 }
.icon__nvr-selector { background-position-x:-54px }
.icon__compatibility { background-position-x:-108px }
.icon__raid-calculator { background-position-x:-162px }
.icon__downloads { background-position-x:-216px }
.icon__online-support-form { background-position-x:-270px }
@media (min-width:767px) {
.hompage-tools-icon__item { display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:left; justify-content:left; font-size:14px; line-height:20px; color:#282828; margin-top:25px; margin-bottom:25px }
}
@media (min-width:992px) {
.hompage-tools-icon__item { display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; font-size:14px; line-height:20px; color:#282828; margin-top:25px; margin-bottom:25px }
}
.hompage-tools a:hover { color:#57c1d4 }
a.hompage-tools-icon__item:hover { color:#57c1d4 }
figure.small_banner { overflow:hidden; background:rgba(0,0,0,0.9); color:#fff; text-align:center; box-shadow:0 0 5px rgba(0,0,0,0.15); margin:3px -12px }
figure.small_banner * { -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out }
figure.small_banner img { max-width:100%; position:relative; opacity:.9 }
figure.small_banner figcaption { position:absolute; top:85%; left:7%; right:7%; bottom:10%; border-width:0 1px 1px }
figure.small_banner .heading { overflow:hidden; -webkit-transform:translateY(-50%); transform:translateY(-50%) }
figure.small_banner h3 { display:table; margin:0 auto; padding:0 10px; position:relative; text-align:center; width:auto; font-weight:600; font-size:1.5em; padding:8px 20px; border-radius:1px }
figure.small_banner h3 span { font-weight:800 }
figure.small_banner h3:before { left:-1000% }
figure.small_banner h3:after { right:-1000% }
figure.small_banner p { top:50%; font-weight:500; -webkit-transform:translateY(-50%); transform:translateY(-50%); position:absolute; width:100%; padding:0 20px; margin:0; opacity:0; color:#CCC }
figure.small_banner a { left:0; right:0; top:0; bottom:0; position:absolute; z-index:1 }
figure.small_banner img { -webkit-filter:brightness(.8) }
figure.small_banner:hover img, figure.small_banner.hover img { opacity:.25; -webkit-transform:scale(1.1); transform:scale(1.1) }
figure.small_banner:hover figcaption, figure.small_banner.hover figcaption { top:50%; bottom:10% }
figure.small_banner:hover p, figure.small_banner.hover p { opacity:1; -webkit-transition-delay:.35s; transition-delay:.35s }
.back_color_dust, .back_color_blue, .back_color_green { border-left:none; border-right:none; padding:15px 45px }
.back_color_dust h2, .back_color_blue h2, .back_color_green h2 { font-weight:500 }
.tool_thumb, .tool_thumb img, .tool_thumb p { display:inline-block }
.tool_thumb { text-align:center }
@media (max-width:767px) {
.border_r { border-right:none }
.index_padding { padding:inherit }
}
@media (min-width:768px) {
.border_r { border-right:thin solid #999 }
.index_padding { padding-left:1.5px; padding-right:1.5px }
}
.tool_thumb a { color:#242424 }
.icon_bg { background-image:url(https://www.asustor.com/images/product_feature/AS62/AS6204RS_RD/bg-banner.jpg); background-size:cover; opacity:.8; margin:2px 2px 0; padding:40px 0 }
.icon_bg img { width:30%; height:auto; margin-right:3px }
.hompage-tools-icon { background-color:#f6f6f6; margin:3px 3px 0 }
.container-fluid { background-color:#FFF }
.four_banner { position:relative; float:left; overflow:hidden; margin:3px -12px; background-color:#051a28; text-align:left; color:#fff; box-shadow:0 0 5px rgba(0,0,0,0.15); font-size:16px }
.four_banner * { -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition:all .3s ease-out; transition:all .3s ease-out }
.four_banner > img, .four_banner .image img { -webkit-transform:scale(1.05); transform:scale(1.05); width:100% }
.four_banner > img { vertical-align:top; position:relative; -webkit-filter:blur(5px); filter:blur(5px); opacity:.6 }
.four_banner figcaption, .four_banner .image { -webkit-transition-delay:.2s; transition-delay:.2s }
.four_banner .image { position:absolute; top:0; bottom:20%; right:0; left:0; overflow:hidden; box-shadow:0 1px 5px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.2) }
.four_banner .image img { position:absolute; top:0 }
.four_banner figcaption { position:absolute; top:78%; bottom:-28%; left:20px; right:20px; padding-top:4%; z-index:1 }
.four_banner h3, .four_banner p { margin:0 }
.four_banner h3 { font-weight:500; margin-bottom:5px; text-align:center }
.four_banner p { font-weight:400; opacity:0; text-align:center; line-height:1.2 }
.four_banner .read-more { display:block; opacity:0; -webkit-transform:translateX(-20px); transform:translateX(-20px); line-height:48px; text-transform:uppercase; letter-spacing:1px; padding:0 20px; color:#fff; right:0; bottom:0; font-weight:500; position:absolute }
.four_banner a { left:0; right:0; top:0; bottom:0; position:absolute; z-index:1 }
.four_banner:hover .read-more, .four_banner.hover .read-more, .four_banner:hover figcaption, .four_banner.hover figcaption { opacity:1; -webkit-transform:translateX(0px); transform:translateX(0px) }
.four_banner:hover figcaption, .four_banner.hover figcaption, .four_banner:hover .image, .four_banner.hover .image { -webkit-transition-delay:0; transition-delay:0 }
.four_banner:hover figcaption, .four_banner.hover figcaption { top:65% }
.four_banner:hover .image, .four_banner.hover .image { bottom:35% }
.four_banner:hover p, .four_banner.hover p { opacity:1; -webkit-transition-delay:.2s; transition-delay:.2s }
.hompage-tools-icon { background-color:#f9f9f9; margin:1px 3px 3px }
@media (max-width:767px) {
h2 { font-size:20px }
h3 { font-size:20px }
}
.gird_4 h3 { font-weight:500 }
.back_color_dust { background:-webkit-linear-gradient(#eee, #d8d8d8); /forsafari51to60/background:-o-linear-gradient(#eee, #d8d8d8);
/foropera111to120/background:-moz-linear-gradient(#eee, #d8d8d8);
/forfirefox36to15/background:linear-gradient(#eee, #d8d8d8)
}
.back_color_green { background:-webkit-linear-gradient(#e3f7f1, #f3fbf8); /forsafari51to60/background:-o-linear-gradient(#e3f7f1, #f3fbf8);
/foropera111to120/background:-moz-linear-gradient(#e3f7f1, #f3fbf8);
/forfirefox36to15/background:linear-gradient(#e3f7f1, #f3fbf8)
}
.back_color_blue { background:-webkit-linear-gradient(#d7eef2, #f1f8fb); /forsafari51to60/background:-o-linear-gradient(#d7eef2, #f1f8fb);
/foropera111to120/background:-moz-linear-gradient(#d7eef2, #f1f8fb);
/forfirefox36to15/background:linear-gradient(#d7eef2, #f1f8fb)
}
.homepage__bottom-banner { margin-top:-4px; margin-bottom:2px; transition:all .3s ease; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out }
.homepage__bottom-banner:hover { -webkit-filter:brightness(1.04) }
@media (max-width:767px) {
.homepage__bottom-banner a h2, .homepage__bottom-banner h2, .homepage__bottom-banner a { color:#333; min-height:inherit; margin-bottom:inherit }
}
@media (min-width:768px) {
.homepage__bottom-banner a h2, .homepage__bottom-banner h2, .homepage__bottom-banner a { color:#333; min-height:70px; margin-bottom:0 }
}
@media (min-width:1200px) {
.flexslider .slides > li { height:700px }
#banner-59 .title { font-weight:300; line-height:55px; font-size:48px }
}
@media (max-width:1920px) {
.top_four { max-width:480px }
.mw1920 { max-width:1920px; margin:0 auto }
}
@media (min-width:1921px) {
.top_four { max-width:none }
.mw1920 { max-width:none }
}
#iff { display:none; }
.sub-title ul li { list-style-type:disc; margin-left:-15px; }