@import url("https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto.css");

@media screen and (min-width: 1024px) {
#rog_black_style #theme-layout > .tempBg {
	position: absolute;
	background-color: #000;
	width: 100%;
	top: 0;
	left: 0;
	height: 50px;
	z-index: 1;
}
}
#rog_black_style #overview-top-nav.fixed {
	background-color: #000 !important;
}
#theme-layout #hd_main body {
	margin: 0;
	padding: 0;
	background-color: white;
	color: white;
	font-family: 'Lato-Medium', sans-serif;
	font-size: 22px;
}
#theme-layout #hd_main p {
	margin: 0px;
}
#theme-layout #hd_main ul {
	padding: 0;
	text-align: center;
	list-style-type: none;
}
#theme-layout #hd_main img {
	vertical-align: bottom;
}
#theme-layout #hd_main ul li {
	margin: 0 auto;
	padding: 0;
}
#theme-layout #hd_main figure {
	margin: 0px;
}
#theme-layout #hd_main figcaption {
	margin-top: 10px;
	text-align: center;
	display: inline-block;
}
#theme-layout #hd_main .D_section, #theme-layout #hd_main #E_section {
	padding: 72px 0;
	margin: 0 auto;
	text-align: center;
	color: #FFF;
	vertical-align: center;
	position:relative;
}
#setup_pic {
	width: 90%;
	margin: 0 auto;
	padding-top: 50px;
}
#setup_pic li {
	width: 95%;
	max-width: 337px;
	vertical-align: middle;
}
#setup_pic .next {
	margin: 24px auto;
}
#setup_pic figcaption {
	margin-top: 12px;
}
#theme-layout #hd_main #header {
	width: 100%;
	background-color: white;
}
#theme-layout #hd_main p {
	font-family: 'Lato-Medium', sans-serif;
	font-size: 21px;
}
#theme-layout #hd_main h3 {
	font-family: 'Lato-Medium', sans-serif;
	font-size: 50px;
}
#theme-layout #hd_main h2 {
	font-family: 'Lato-Medium', sans-serif;
	;
	font-size: 32px;
}
#setup_pic p {
	font-family: 'Lato-Medium', sans-serif;
	font-size: 18px;
}
#theme-layout #hd_main ul li {
	font-family: 'Lato-Medium', sans-serif;
	font-size: 16px;
	line-height: 25px;
}
/*nav */

#theme-layout #hd_main nav {
	width: 100%;
	background-color: #FFF;
}
#theme-layout #hd_main nav ul li {
	width: 15%;
	padding: 20px 0;
	display: inline-block;
}
#theme-layout #hd_main nav ul li {
	color: #5497d7;
	text-decoration: none;
	font-family: 'Lato-Medium', sans-serif;
	font-size: 20px;
	font-weight: 600;
}
#theme-layout #hd_main nav ul li:hover {
	color: rgb(40, 107, 165);
	cursor: pointer;
}
#theme-layout #hd_main ul li a:hover {
	text-shadow: 0 0 25px rgb(170, 237, 255), 0 0 25px rgb(170, 235, 255), 0 0 25px rgb(166, 235, 255);
}
.phone_button li {
	margin-top: 10px;
}
.font_width .font_p {
	padding: 0% 8% 2% 8%;
}
#theme-layout #hd_main .modal {
	width: 100%;
	margin: 0 auto;
	background-color: transparent;
	border-radius: 10px;
}
#theme-layout #hd_main #header .modal.fade.in {
	top: 0;
}
#theme-layout #hd_main #header .fade.in {
	opacity: 1;
}
#theme-layout #hd_main #header .modal-backdrop, #theme-layout #hd_main #header .modal-backdrop.fade.in {
	opacity: 1;
	filter: alpha(opacity=100);
	background-color: #FFF;
}
#theme-layout #hd_main #header .modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000;
}
#theme-layout #hd_main #header .modal-backdrop.fade {
	filter: alpha(opacity=0);
	opacity: 0;
}
#theme-layout #hd_main #header .fade {
	opacity: 0;
	-webkit-transition: opacity .15s linear;
	-o-transition: opacity .15s linear;
	transition: opacity .15s linear;
}
#theme-layout #hd_main #header .modal-backdrop.in {
	opacity: 0.5;
}
/* Scroll Up Style */

#theme-layout #hd_main #scrollUp {
	position: fixed;
	z-index: 100;
	right: 30px;
	bottom: 60px;
	display: none;
	width: 45px;
	height: 45px;
	color: rgba(16, 78, 151, 0.8);
	text-align: center;
	font-size: 16px;
	line-height: 42px;
	cursor: pointer;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border: 2px solid rgba(16, 78, 151, 0.8);
}
#scrollUp:hover {
	border: 2px solid #c9e981;
	background-color: rgba(211, 255, 128, 0.5);
	color: #fff;
}
#theme-layout #hd_main a:hover, #theme-layout #hd_main a:focus {
	outline: 0;
	color: #1d2124;
	text-decoration: none;
}
#theme-layout #hd_main a:hover {
	text-decoration: none;
}
/* Scroll Up Style */

#theme-layout #hd_main .scrollUp_2 {
	position: fixed;
	z-index: 100;
	right: 30px;
	bottom: 10px;
	width: 45px;
	height: 45px;
	color: rgba(16, 78, 151, 0.8);
	text-align: center;
	font-size: 16px;
	line-height: 42px;
	cursor: pointer;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border: 2px solid rgba(16, 78, 151, 0.8);
}
#theme-layout #hd_main .scrollUp_2:hover {
	border: 2px solid #a7fc98;
	background-color: rgba(222, 255, 148, 0.5);
	color: #fff;
}
#theme-layout #hd_main a:hover, #theme-layout #hd_main a:focus {
	outline: 0;
	color: #1d2124;
	text-decoration: none;
}
#theme-layout #hd_main a:hover {
	text-decoration: none;
}
 @keyframes shine {
 0% {
 opacity: 0;
}
 50% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
#theme-layout #hd_main #A_section_2 h3 {
	margin: 0 0 35px;
}
#theme-layout #hd_main .A_section_icon p {
	font-size: 19px;
}
.groud_btn {
	font-size: 24px;
	background-color: rgb(151, 180, 190);
	border-bottom: 5px #97b4be solid;
}
.groud_btn:hover {
	background-color: rgb(172, 195, 203);
	border-bottom-color: #06b5d5;
	cursor: pointer;
}
.pic_mask {
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.display_pic:hover {
	cursor: pointer;
}
.display_pic:hover .pic_title {
	color: rgb(6, 181, 213);
}
.pic_title {
	text-align: center;
}
.pic_content {
	position: relative;
	width: 100%;
	background-color: rgb(151, 180, 190);
	display: none;
}
.p_pic_content {
	position: relative;
	padding: 15px;
	background-color: rgb(151, 180, 190);
}
#pro_list a {
	color: #104658;
	text-decoration: none;
}
#pro_list img {
	border-color: white;
	border-bottom: 5px rgba(255, 255, 255, 0) solid;
}
#pro_list img:hover {
	border-bottom: 5px #06b5d5 solid;
}
.badge_hd {
	font-weight: bold;
	color: #fff;
	line-height: 1;
	vertical-align: baseline;
	text-align: center;
	font-size: 78px;
	position: absolute;
	top: -20px;
	left: -12px;
}
.scroll_nav {
	font-size: 28px;
	position: relative;
	color: #97b4be;
	list-style-type: disc;
}
.scroll_nav span {
	position: absolute;
	top: 9px;
	font-size: 14px;
	text-align: right;
	width: 140px;
	right: 32px;
	display: none;
}
#theme-layout #hd_main .navbar-fixed-top {
	margin: 0;
}
#theme-layout #hd_main #header .button_hd {
	border: 2px #808080 solid;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0);
	color: #808080;
	font-size: 18px;
	min-width: 230px;
}
#theme-layout #hd_main #header .button_hd:hover {
	border-style: solid;
	border-radius: 12px;
	border-width: 2px;
	border-color: #808080;
	background-color: #FFF;
	cursor: pointer;
}


#theme-layout #hd_main #header_1 .button_hd {
	border: 2px #808080 solid;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0);
	color: #808080;
	font-size: 18px;
}
#theme-layout #hd_main #header_1 .button_hd:hover {
	border-style: solid;
	border-radius: 12px;
	border-width: 2px;
	border-color: #808080;
	background-color: #FFF;
	cursor: pointer;
}

#theme-layout #hd_main #A_section .button_hd {
	border: 2px #fff solid;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0);
	color: #fff;
	font-size: 18px;
	min-width: 230px;
}
#theme-layout #hd_main #A_section .button_hd:hover {
	border-style: solid;
	border-radius: 12px;
	border-width: 2px;
	background-color: rgba(230, 230, 230, 0.3);
	cursor: pointer;
}


#theme-layout #hd_main #A_section_1 .button_hd {
	border: 2px #fff solid;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0);
	color: #fff;
	font-size: 18px;
	min-width: 230px;
}
#theme-layout #hd_main #A_section_1 .button_hd:hover {
	border-style: solid;
	border-radius: 12px;
	border-width: 2px;
	background-color: rgba(230, 230, 230, 0.3);
	cursor: pointer;
}

#theme-layout #hd_main #A_section_1 .max_width .hand{
	position: absolute;
	right: 15%;
	bottom:0;
	max-width:350px;
}


#theme-layout #hd_main #F_section_1 .button_hd {
	border: 2px #808080 solid;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0);
	color: #808080;
	font-size: 18px;
	min-width: 230px;
}
#theme-layout #hd_main #F_section_1 .button_hd:hover {
	border-style: solid;
	border-radius: 12px;
	border-width: 2px;
	border-color: #808080;
	background-color: #FFF;
	cursor: pointer;
}

#theme-layout #hd_main #A_section_1 .keylist_sec {
	padding:3% 0;
}
#theme-layout #hd_main #A_section_1 .keylist_sec ul li{
	padding:1% 0;
}

#theme-layout #hd_main .container_1 button .close {
	color: #FFF;
}
#theme-layout #hd_main .container_1 .button_QR:hover {
	font-size: 18px;
	font-family: 'Lato-Medium', sans-serif;
	background-color: #FFF;
	color: #0090C9;
	border-radius: 10px;
	border: 2px solid #0090C9;
}
#theme-layout #hd_main .container_1 .button_QR {
	font-size: 18px;
	font-family: 'Lato-Medium', sans-serif;
	background-color: #0090C9;
	color: #FFF;
	border-radius: 10px;
	border: 2px solid #FFF;
	font-weight: 600;
}
#theme-layout #hd_main .container_1 .button_QR:hover {
	font-size: 18px;
	font-family: 'Lato-Medium', sans-serif;
	background-color: #FFF;
	color: #0090C9;
	border-radius: 10px;
	border: 2px solid #0090C9;
}
.bg_icons {
	width: 85%;
	margin: 0 auto;
}
.app_icons_hd .bg_icons_m {
	width: 80%;
	margin: 0 auto;
	border: 2px solid rgba(91, 206, 184, 0.5);
	background-color: #FFF;
	border-radius: 15px;
}
.bg_icons_m:hover {
	width: 80%;
	margin: 0 auto;
	border: 2px solid rgba(91, 206, 184, 0.5);
	background-color: rgba(91, 206, 184, 0.3);
	color: #FFF;
	border-radius: 15px;
}
.app_icons_hd {
	float: left;
	width: 18%;
	margin-right: 2%;
}
.app_icons_hd_2 {
	float: left;
	width: 31%;
}
.app_icons_hd_3 {
	float: left;
	width: 31%;
}
.app_icons_hd_4 {
	float: left;
	width: 56.1%;
	margin-left: 3.9%;
}
.icon_hd p {
	color: #808080;
}
.icon_hd li {
	color: #808080;
}
.hd_icon_1 {
	text-align: left;
	padding: 0% 2% 1% 1%;
	width: 65%;
}
#theme-layout #hd_main .row {
	margin-left: -15px;
	margin-right: -15px;
}
.hd_center_12 {
	max-width: 920px;
	float: none;
	margin: 0 auto;
	display: block;
}
.hd_center_12_2 {
	max-width: 1035px;
	float: none;
	margin: 0 auto;
	display: block;
}
.bg_icons_2 {
	display: none;
}
.img2 {
	display: none;
}
.bg_icons:hover .img2 {
	display: block;
}
.bg_icons:hover .img1 {
	display: none;
}
.height_hd {
	padding: 40% 20% 0% 20%;
}
.pc_open_hd {
	display: block;
}
.mobile_open_hd {
	display: none;
}
.pc_open_hd_767 {
	display: block;
}
.mobile_open_hd_767 {
	display: none;
}
.pc_open_hd_767_2 {
	display: block;
}
.mobile_open_hd_767_2 {
	display: none;
}
.mobile_open_hd_767_992 {
	display: none;
}
.top_header {
	position: absolute;
	left: 17%;
	top: 2%;
	width: 40%;
}
.demo_hd {
	position: absolute;
	color: #26696D;
	font-family: 'Lato-Medium', sans-serif;
	font-size: 27px;
	bottom: 22%;
	left: 42%;
	z-index: 999;
	width: 87px;
	text-align: center;
}
.demo_hd2 {
	position: absolute;
	color: #26696D;
	font-family: 'Lato-Medium', sans-serif;
	font-size: 27px;
	bottom: 38%;
	left: 36%;
	z-index: 999;
	text-align: center;
}
.time_title_hd {
	position: absolute;
	color: #26696D;
	font-family: 'Lato-Medium', sans-serif;
	font-size: 27px;
	bottom: 64%;
	width: 100%;
	z-index: 999;
	text-align: center;
	font-size: 25px;
}

.time_title_hd2 {
	position: absolute;
	color: #26696D;
	font-family: 'Lato-Medium', sans-serif;
	font-size: 30px;
	bottom: 55%;
	width: 100%;
	z-index: 999;
	text-align: center;
	font-size: 25px;
}

.time_title_hd3 {
	position: absolute;
	color: #26696D;
	font-family: 'Lato-Medium', sans-serif;
	font-size: 30px;
	bottom: 55%;
	width: 100%;
	z-index: 999;
	text-align: center;
	font-size: 25px;
}

.pc_shield {
	position: relative;
	display: inline-block;
	text-align: initial;
}
.mobile_shield {
	display: none;
}
.row .col-md-12.cycle_wave {
	width: 1000px;
	padding: 0;
	float: none;
	margin-top: 75px;
    margin-right: 0;
    margin-bottom: 75px;
    margin-left: 0;
	overflow: hidden;
}
#navbar-main {
	box-shadow: -9px -6px 50px #888888;
	z-index: 99999999;
}
#theme-layout #hd_main li.setup figure img {
	width: 100%;
	max-width: 270px;
	margin-left: -10%;
}
#theme-layout #hd_main li.next img.table_dis {
	width: 75%;
}
#theme-layout #hd_main li.next img.phone_dis {
	width: 100%;
}
.pc_open_hd_i5 {
	display: block;
}
.mobile_open_hd_i5 {
	display: none;
}
#theme-layout #hd_main .modal-header, #theme-layout #hd_main h4, #theme-layout #hd_main .close {
	background-color: #5393d0;
	color: white !important;
	text-align: center;
	font-size: 30px;
}
.modal-footer {
	background-color: #f9f9f9;
}
.rotation_360_1 {
	position: absolute;
	-webkit-animation-name: example;
	/* Chrome, Safari, Opera */
	-webkit-animation-duration: 25s;
	/* Chrome, Safari, Opera */
	-webkit-animation-iteration-count: infinite;
	/* Chrome, Safari, Opera */
	-webkit-animation-direction: normal;
	/* Chrome, Safari, Opera */
	-webkit-animation-timing-function: linear;
	/* Chrome, Safari, Opera */
	animation-name: example;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
	width: 100%;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes example {
 0% {
 transform: rotate(0deg);
}
 100% {
 transform: rotate(360deg);
}
}
.rotation_360_2 {
	position: absolute;
	-webkit-animation-name: example;
	/* Chrome, Safari, Opera */
	-webkit-animation-duration: 13s;
	/* Chrome, Safari, Opera */
	-webkit-animation-iteration-count: infinite;
	/* Chrome, Safari, Opera */
	-webkit-animation-direction: normal;
	/* Chrome, Safari, Opera */
	-webkit-animation-timing-function: linear;
	/* Chrome, Safari, Opera */
	animation-name: example;
	animation-duration: 13s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
	width: 100%;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes example {
 0% {
 transform: rotate(360deg);
}
 100% {
 transform: rotate(0deg);
}
}
.rotation_360_3 {
	position: absolute;
	-webkit-animation-name: example;
	/* Chrome, Safari, Opera */
	-webkit-animation-duration: 5s;
	/* Chrome, Safari, Opera */
	-webkit-animation-iteration-count: infinite;
	/* Chrome, Safari, Opera */
	-webkit-animation-direction: normal;
	/* Chrome, Safari, Opera */
	-webkit-animation-timing-function: linear;
	/* Chrome, Safari, Opera */
	animation-name: example;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
	width: 100%;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes example {
 0% {
 transform: rotate(0deg);
}
 50% {
 transform: rotate(180deg);
}
 100% {
 transform: rotate(360deg);
}
}
.rotation_360_hd_1 {
	position: absolute;
	top: 10px;
	left: 10px;
}
.rotation_360_4 {
	position: absolute;
}
.rotation_360 {
	position: absolute;
	z-index: 99999;
}
.animation_hd {
	background-image: url('../img/app_hd/chart.png');
	position: absolute;
	top: 39%;
	left: 23%;
	z-index: 2;
	-webkit-animation: mymove 20s infinite linear;
	/* Chrome, Safari, Opera */
	animation: mymove 20s infinite linear;
	width: 268px;
	height: 123px;
	background-size: cover;
	overflow: hidden;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
 from {
 background-position-x: 268px;
}
to {
	background-position-x: 0px
}
}
 @keyframes mymove {
 from {
 background-position-x: 268px;
}
to {
	background-position-x: 0px
}
}
 @media screen and (min-width: 1500px) {
#shield_pic {
	height: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	max-height: 630px;
}
#C_section_2_txt {
	width: 70%;
}
.height_hd {
	padding: 46% 20% 0% 20%;
}
#A_section {
	height: 850px;
}

}

@media screen and (max-width: 1500px){
#A_section_1 .D_section .max_width .hd_icon_1 p{
	width: 50%;
}

}

 @media (min-width:767px) and (max-width: 1500px) {
.hd_icon_1 {
	width: 80%;
}

#shield_pic {
	width: 40%;
	position: absolute;
	bottom: 0;
	right: 0;
}
#C_section_2_txt {
	width: 60%;
}
.top_header {
	position: absolute;
	left: 13%;
	top: 0.5%;
	width: 45%;
}
}
 @media screen and (min-width: 1200px) {
.slogan_txt {
	font-size: 46px;
	font-family: 'Lato-Medium', sans-serif;
}
#pro_list li {
	width: 12%;
	margin: 0 1%;
	display: inline-block;
	vertical-align: top;
}
}

@media screen and (max-width: 1024px){

#theme-layout #hd_main #A_section_1 .max_width .hand{
	right:5%;
	max-width:322px;
}

}

@media screen and (max-width: 480px){

#A_section_1 .D_section .max_width .hd_icon_1 p{
	width:100%;
}

#theme-layout #hd_main #A_section_1 .max_width .hand{
	display: block;
    position: relative;
    right: 0;
    margin:0 auto;
}
#theme-layout #hd_main .D_section {
padding:0;

}
#A_section_1 .D_section .max_width .container_1 {
	width:100%;
	text-align: center;
}

}

 @media (min-width:992px) and (max-width: 1200px) {
.height_hd {
	padding: 62% 10% 0% 10%;
}
.slogan_txt {
	font-size: 42px;
	font-family: 'Lato-Medium', sans-serif;
}
#E_section .max_width {
	width: 90%;
	margin: 0 auto;
}
#pro_list li {
	width: 12%;
	margin: 0 1%;
	display: inline-block;
	vertical-align: top;
}
}
 @media (min-width:767px) and (max-width: 992px) {
.demo_hd {
	float: left;
	position: absolute;
	color: #26696D;
	font-family: 'Lato-Medium', sans-serif;
	font-size: 27px;
	top: 68%;
	right: 58%;
	z-index: 999;
}
.time_title_hd {
	position: absolute;
	color: #26696D;
	font-family: 'Lato-Medium', sans-serif;
	bottom: 64%;
	width: 100%;
	z-index: 999;
	text-align: center;
	font-size: 20px;
}
.time_title_hd p {
	font-size: 24px;
}
.mobile_open_hd {
	display: block;
}
.pc_open_hd {
	display: none;
}
.slogan_txt {
	font-size: 28px;
	font-family: 'Lato-Medium', sans-serif;
}
#pro_list li {
	width: 23%;
	margin: 0 1%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 24px;
}
.app_icons_hd {
	float: left;
	width: 27.3%;
	margin-bottom: 20px;
}
.app_icons_hd_2 {
	float: left;
	width: 33.33%;
}
.app_icons_hd_3 {
	float: left;
	width: 33.33%;
}
.app_icons_hd_4 {
	float: left;
	width: 82%;
}
}
 @media screen and (max-width: 767px) {
#theme-layout #hd_main .page_title_style {
	margin: 0 auto;
	font-size: 35px;
	margin-bottom: 20px;
}
.font_left_hd {
	text-align: left;
}
#theme-layout #hd_main p {
	font-family: 'Lato-Medium', sans-serif;
	font-size: 20px;
}
.time_title_hd p {
	font-size: 18px;
}
.pc_open_hd_i5 {
	display: none;
}
.mobile_open_hd_i5 {
	display: block;
}
.demo_hd {
	float: left;
	position: absolute;
	color: #26696D;
	font-family: 'Lato-Medium', sans-serif;
	font-size: 18px;
	top: 67%;
	right: 44%;
	z-index: 999;
}
.time_title_hd {
	position: absolute;
	color: #26696D;
	font-family: 'Lato-Medium', sans-serif;
	bottom: 64%;
	width: 100%;
	z-index: 999;
	text-align: center;
	font-size: 16px;
}
.app_icons_hd {
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
.app_icons_hd_2 {
	float: left;
	width: 50%;
}
.app_icons_hd_3 {
	float: left;
	width: 100%;
}
.hd_icon_1 {
	width: 100%;
}
.mobile_open_hd {
	display: block;
}
.pc_open_hd {
	display: none;
}
.height_hd {
	padding: 70% 5% 0% 5%;
}
.max_width {
	width: 90%;
	margin: 0 auto;
}
nav ul li {
	width: 141px;
}
nav ul #last_li {
	width: 225px;
}
#A_bg {
	padding: 0 5% 0 5%;
	padding-top: 10px;
	padding-bottom: 10px;
}
#A_section {
	padding-top: 24px;
}
#A_bg_pic {
	background-color: #84b1be;
}
.A_section_icon li {
	width: 100%;
	margin: 12px 2%;
	vertical-align: top;
	display: block;
}
#header_2 .app_phone_img img {
	margin: 0 auto;
	width: 50%;
}
.A_section_icon img {
	margin: 0 auto;
}
.tel {
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
}
.tel img {
	width: 188px;
}
.txt_content {
	width: 90%;
	padding: 0px 5%;
	padding-bottom: 200px;
}
#B_section ul {
	margin: 32px auto;
}
.groud_btn {
	width: auto;
	padding: 12px 10px;
	display: inline-block;
}
#C_section_2 {
	padding: 72px 0;
}
#C_section_tel {
	width: 100%;
}
#C_section_txt {
	width: 90%;
	padding: 20% 5% 0 5%;
}
#C_section_2_txt {
	width: 100%;
}
#shield_pic {
	width: 50%;
	float: right;
	min-width: 238px;
}
#pro_list li {
	width: 40%;
	display: inline-block;
	vertical-align: top;
	margin: 0 5% 24px 5%;
}
#setup_pic li {
	width: 95%;
	max-width: 337px;
	vertical-align: middle;
}
#setup_pic figcaption p {
	padding-left: 40px;
}
.badge {
	padding: 1px 6px;
	left: 0px;
}
.txt_style {
	font-size: 22px;
	margin: 0;
	padding: 20px 0;
}
.title_style {
	font-size: 35px;
}
.slogan_txt {
	font-size: 22px;
	margin: 5px 0;
}
.page_title_style {
	margin: 0 auto;
	font-size: 30px;
}
.p_display_pic img {
	width: 100%;
	display: inline-block;
	vertical-align: bottom;
}
.pic_title {
	width: 48%;
	font-size: 22px;
	padding: 0 1%;
	vertical-align: middle;
	position: relative;
	z-index: 200;
	float: right;
	margin: 10% 0 0 0;
}
.table_dis {
	display: none;
}
p {
	font-family: 'Lato-Medium', sans-serif;
	font-size: 20px;
}
#header .button_hd {
	border: 2px #808080 solid;
	border-radius: 12px;
	background-color: #FFF;
	color: #808080;
	font-size: 16px;
	min-width: 200px;
}
#header .button_hd:hover {
	border-style: solid;
	border-radius: 12px;
	border-width: 2px;
	border-color: #808080;
	color: #FFF;
	background-color: rgba(159, 159, 159, 0.8);
	cursor: pointer;
}
.font_p2 {
	padding: 4% 0;
}
}
 @media screen and (min-width: 767px) {
#theme-layout #hd_main .max_width {
	width: 75%;
	margin: 0 auto;
}
#theme-layout #hd_main .display_pic {
	width: 50%;
	display: inline-block;
	position: relative;
}
#theme-layout #hd_main #phone_display {
	display: none;
}
#theme-layout #hd_main #theme-layout #hd_main nav ul li {
	width: 225px;
}
#theme-layout #hd_main #A_bg {
	padding: 0 5% 0 11%;
	padding-top: 48px;
	padding-bottom: 48px;
}
#theme-layout #hd_main #A_bg_pic {
	background-image: url();
}
#theme-layout #hd_main .A_section_icon {
	text-align: center;
	width: 100%;
}
#theme-layout #hd_main .A_section_icon li {
	width: 28%;
	margin: 20px 1%;
	vertical-align: top;
	display: inline-block;
}
#theme-layout #hd_main .A_section_icon img {
	margin: 0 auto;
}
#theme-layout #hd_main .B_section_pic {
	width: 75%;
	margin: 0 auto 60px;
	min-width: 700px;
}
#theme-layout #hd_main #B_section ul {
	margin: 0 auto;
	width: 100%;
}
#theme-layout #hd_main .groud_btn {
	width: 33.33%;
	padding: 12px 0px;
	display: inline-block;
}
#theme-layout #hd_main .display_pic img {
	width: 100%;
}
#theme-layout #hd_main #B_section h3 {
	margin: 35px 0 0;
	margin-bottom: 20px;
}
#theme-layout #hd_main .tel {
	width: 30%;
	display: inline-block;
	padding: 36px 5%;
	padding-bottom: 0;
	text-align: center;
	vertical-align: bottom;
}
#theme-layout #hd_main .tel img {
	width: 100%;
	max-width: 350px;
}
#theme-layout #hd_main .txt_content {
	width: 50%;
	display: inline-block;
	padding: 0px 5% 11px;
}
#theme-layout #hd_main #C_section_tel,  #theme-layout #hd_main #C_section_txt {
	width: 50%;
	display: inline-block;
}
#theme-layout #hd_main #C_section_2 {
	padding: 72px 0;
}
#theme-layout #hd_main #setup_pic .setup {
	width: 20%;
	display: inline-block;
	vertical-align: top;
}
#theme-layout #hd_main #setup_pic figcaption p {
	padding-left: 40px;
}
#theme-layout #hd_main #setup_pic .next {
	width: 9%;
	margin: 0 1%;
	display: inline-block;
	vertical-align: top;
}
#theme-layout #hd_main .badge {
	padding: 0px 14px;
}
#theme-layout #hd_main .txt_style {
	font-size: 25.74px;
	margin: 0;
	padding: 25px 0;
}
#theme-layout #hd_main .title_style {
	font-size: 48px;
}
#theme-layout #hd_main .txt_content .title_style {
	font-size: 36px;
}
#theme-layout #hd_main .title_style li {
	font-size: 25.74px;
}
#theme-layout #hd_main .pic_title {
	display: block;
	font-size: 22px;
	text-align: center;
	width: 80%;
	padding: 0 10%;
	top: 30%;
	position: absolute;
}
#theme-layout #hd_main .display_pic .phone_dis {
	display: none;
}
#theme-layout #hd_main .phone_dis {
	display: none;
}
}
 @media screen and (max-width: 490px) {
#theme-layout #hd_main .img_hd img {
	width: 100%;
}
#theme-layout #hd_main .pic_title {
	font-size: 14px;
}
#theme-layout #hd_main .groud_btn {
	padding: 6px 10px;
	width: 200px;
	margin: 6px;
	border-radius: 10px;
}
#theme-layout #hd_main .time_title_hd p.mobile_font {
	font-size: 14px;
}
#theme-layout #hd_main nav ul.txt_style a li {
	font-size: 13px;
}
}
 @media screen and (max-width: 350px) {
#theme-layout #hd_main .img_hd img {
	width: 100%;
}
#theme-layout #hd_main .slogan_txt {
	font-size: 15px;
	margin: 5px 0;
}
#theme-layout #hd_main .A_section_icon li {
	width: 96%;
	margin: 12px 2%;
}
#theme-layout #hd_main .A_section_icon li img {
	display: inline-block;
	width: 25%;
	vertical-align: middle;
}
#theme-layout #hd_main .A_section_icon li div {
	display: inline-block;
	width: 70%;
	vertical-align: middle;
	text-align: left;
	padding-left: 5%;
}
#theme-layout #hd_main .A_section_icon li p {
	display: inline-block;
	vertical-align: middle;
}
}
 @media (min-width: 1500px) {
#theme-layout #hd_main #A_section_1 .max_width {
	width: 95%;
	margin: 0 auto;
}
#theme-layout #hd_main #A_section_text {
	width: 60%;
	display: inline-block;
	vertical-align: middle;
}
#theme-layout #hd_main #A_section_pic {
	width: 40%;
	display: inline-block;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}
#theme-layout #hd_main #A_section_pic img {
	height: 70%;
	margin-left: 48px;
}
}
 @media (min-width: 992px) and (max-width: 1500px) {
#theme-layout #hd_main #A_section_1 .max_width {
	width: 90%;
	margin: 0 auto;
}
#theme-layout #hd_main #A_section_text {
	width: 60%;
	display: inline-block;
	vertical-align: middle;
}
#theme-layout #hd_main #A_section_pic {
	width: 40%;
	display: inline-block;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}
#theme-layout #hd_main #A_section_pic img {
	height: 80%;
	margin-left: 48px;
}
}
 @media screen and (max-width: 992px) {
#theme-layout #hd_main #A_section_text,  #theme-layout #hd_main #A_section_pic {
	width: 100%;
	position: relative;
	display: inline;
}
#theme-layout #hd_main #A_section_pic img {
	margin: 36px 0;
}
#theme-layout #hd_main #A_section_pic img {
	width: 100%;
}
}
 @media (min-width: 490px) and (max-width: 767px) {
#theme-layout #hd_main .p_display_pic {
	width: 100%;
	height: 300px;
	position: relative;
	background-size: 100% auto;
	background-position: center;
}
}
 @media (min-width: 350px) and (max-width: 490px) {
#theme-layout #hd_main .p_display_pic {
	width: 100%;
	height: 200px;
	position: relative;
	background-size: 100% auto;
	background-position: center;
}
}
 @media screen and (max-width: 350px) {
#theme-layout #hd_main .p_display_pic {
	width: 100%;
	height: 140px;
	position: relative;
	background-size: 100% auto;
	background-position: center;
}
}
 @media (min-width: 1500px) {
#theme-layout #hd_main #C_section_tel {
	position: relative;
	text-align: right;
	vertical-align: middle;
	width: 43%;
	margin-right: 2%;
}
#theme-layout #hd_main #C_section_txt {
	position: relative;
	vertical-align: middle;
	width: 50%;
	margin-left: 5%;
}
#theme-layout #hd_main .phone_position2 {
	width: 240px;
	position: relative;
}
#theme-layout #hd_main .phone_position1 {
	width: 240px;
	position: absolute;
	top: 40px;
	right: 80px;
}
}
 @media (min-width: 768px) and (max-width: 1500px) {
#theme-layout #hd_main #C_section_tel {
	position: relative;
	text-align: right;
	vertical-align: middle;
	width: 48%;
	margin-right: 2%;
}
#theme-layout #hd_main #C_section_txt {
	position: relative;
	vertical-align: middle;
	width: 45%;
	margin-left: 5%;
}
#theme-layout #hd_main .phone_position2 {
	width: 220px;
	position: relative;
}
#theme-layout #hd_main .phone_position1 {
	width: 220px;
	position: absolute;
	top: 40px;
	right: 80px;
}
#theme-layout #hd_main h3 {
	font-family: 'Lato-Medium', sans-serif;
	font-size: 40px;
}
}
 @media screen and (max-width: 767px) {
#theme-layout #hd_main h3 {
	font-family: 'Lato-Medium', sans-serif;
	font-size: 35px;
}
#theme-layout #hd_main #C_section_tel {
	position: relative;
	text-align: center;
}
#theme-layout #hd_main .phone_position2 {
	width: 38%;
	position: relative;
	max-width: 303px;
	left: 6%;
}
#theme-layout #hd_main .phone_position1 {
	width: 40%;
	position: absolute;
	top: 6%;
	left: 18%;
	max-width: 303px;
}
#theme-layout #hd_main .pc_shield {
	display: none;
}
#theme-layout #hd_main .mobile_shield {
	display: block;
}
#theme-layout #hd_main .mobile_shield #puzzle_main {
	display: none;
}
#theme-layout #hd_main .row .col-md-12.cycle_wave {
	width: 90%;
}
#theme-layout #hd_main #setup_pic .next {
	margin: 0 auto;
}
#theme-layout #hd_main li.setup figure img {
	width: 50%;
	max-width: 100%;
	display: block;
	margin: 0 auto;
}
#theme-layout #hd_main li.next img.table_dis {
	width: 50%;
	margin: 0 auto;
}
#theme-layout #hd_main li.next img.phone_dis {
	width: 40%;
}
}
 @media (min-width: 1500px) {
#header {
	height: 785px;
	overflow: hidden;
	background-size: 100%;
	background-position: center 90%;
}
#header_1 {
	height: 1000px;
	overflow: hidden;
	background-size: 100%;
	background-position: center 80%;
}
#header_2 {
	height: 950px;
	overflow: hidden;
	background-size: 100%;
	background-position: center 80%;
}
#header_3 {
	height: 1000px;
	overflow: hidden;
	background-size: 100%;
	background-position: center 80%;
}
#header_bg {
	display: block;
}
}
.award_li_r {
	min-height: 120px;
}
.award_li img {
	position: absolute;
	top: 0;
	left: 0;
}
 @media (min-width:767px) {
#A_section_2 {
	padding-top: 36px;
	padding-bottom: 36px;
}
.A_section_2_img {
	position: absolute;
	right: 10px;
	bottom: 20px;
	width: 170px;
}
.award_li {
	width: 48%;
	display: inline-block;
	margin: 0 1% 20px;
	position: relative;
	vertical-align: top;
}
.award_li img {
	width: 60px;
}
.award_li p {
	margin-left: 75px;
	vertical-align: middle;
	font-size: 20px;
}
}
 @media (min-width:767px) and (max-width: 992px) {
.animation_hd {
	position: absolute;
	top: 38%;
	z-index: 2;
	-webkit-animation: mymove 10s infinite;
	animation: mymove 10s infinite;
}
#A_section_2 {
	padding-top: 36px;
	padding-bottom: 36px;
}
.A_section_2_img {
	position: absolute;
	right: 10px;
	bottom: 20px;
	width: 164px;
}
.award_li {
	width: 48%;
	display: inline-block;
	margin: 0 1% 20px;
	position: relative;
	vertical-align: top;
}
.award_li img {
	width: 60px;
}
.award_li p {
	margin-left: 70px;
	vertical-align: middle;
	font-size: 20px;
}
#award_li_last p {
	margin-right: 55px;
}
.pc_open_hd_767 {
	display: none;
}
.mobile_open_hd_767 {
	display: block;
}
.pc_open_hd_767_2 {
	display: block;
}
.mobile_open_hd_767_2 {
	display: none;
}
.mobile_open_hd_767_992 {
	display: block;
}
}
 @media screen and (max-width: 767px) {
.navigation_hd {
	display: none;
}
.top_nav li {
	font-size: 16px;
}
.time_title_hd {
	position: absolute;
	color: #26696D;
	font-family: 'Lato-Medium', sans-serif;
	font-size: 15px;
	bottom: 66%;
	z-index: 999;
	width: 100%;
	text-align: center;
}
.animation_hd {
	position: absolute;
	top: 31%;
	left: 25%;
	z-index: 2;
	-webkit-animation: mymove 10s infinite;
	animation: mymove 10s infinite;
	width: 48%;
	height: 34%;
}
.pc_open_hd_767 {
	display: none;
}
.pc_open_hd_767_2 {
	display: none;
}
.mobile_open_hd_767 {
	display: block;
}
.mobile_open_hd_767_2 {
	display: block;
}
.mobile_open_hd_767_992 {
	display: block;
}
.img_hd_none {
	display: none;
}
#A_section_2 {
	padding-top: 36px;
	padding-bottom: 180px;
}
.A_section_2_img {
	position: absolute;
	right: 40px;
	bottom: 20px;
	width: 164px;
}
.award_li {
	width: 100%;
	padding-bottom: 20px;
	position: relative;
}
.award_li img {
	width: 50px;
}
.award_li p {
	margin-left: 65px;
	vertical-align: middle;
	font-size: 20px;
}
.mobile_close_hd {
	display: none;
}
.font_width .font_p {
	text-align: left;
	padding: 2% 3% 2% 3%;
}
}
#bar_img {
	margin: 0 auto;
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
}
#bar_img_1 {
	margin: 0 auto;
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
}
#bar_img_2 {
	margin: 0 auto;
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	opacity: 0;
}
#bar_img_3 {
	margin: 0 auto;
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	opacity: 0;
}
 @media screen and (max-width: 992px) {
.table_992 {
	display: none;
}
.mobile_992 {
	display: block;
}
.puzzle_txt {
	position: relative;
	width: 100%;
	z-index: 100;
	margin: 12px;
	padding-left: 39px;
	text-align: left;
}
.puzzle_txt>p {
	display: inline-block;
	color: #808080;
	text-align: left;
	vertical-align: middle;
}
.puzzle_txt>img {
	display: inline-block;
	width: 32px;
	vertical-align: middle;
	position: absolute;
	left: 0px;
	top: 0px;
}
}
 @media screen and (min-width: 992px) {
.table_992 {
	display: block;
}
.mobile_992 {
	display: none;
}
#puzzle_main {
	opacity: 0;
}
#puzzle_main {
	transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
}
.puzzle {
	position: absolute;
	transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
}
.p1 {
	top: -20px;
	left: 0;
}
.p2 {
	right: 0;
	top: -20px;
}
.p3 {
	left: 0;
	bottom: -20px;
}
.p4 {
	right: 0;
	bottom: -20px;
}
.puzzle_txt {
	position: absolute;
	display: inline-block;
	z-index: 100;
	display: none;
}
.t1.puzzle_txt>p,  .t3.puzzle_txt>p {
	width: 377px;
	padding-left: 66px;
	padding-right: 100px;
	color: #808080;
	text-align: left;
}
.t2.puzzle_txt>p,  .t4.puzzle_txt>p {
	width: 366px;
	padding-left: 166px;
	color: #808080;
	text-align: left;
}
.t1.puzzle_txt>img,  .t3.puzzle_txt>img {
	position: absolute;
	top: 0;
	left: 0;
}
.t2.puzzle_txt>img,  .t4.puzzle_txt>img {
	position: absolute;
	top: 0;
	left: 100px;
}
.t1 {
	top: 10%;
	left: -100%;
}
.t2 {
	top: 10%;
	right: -100%;
}
.t3 {
	bottom: 10%;
	left: -80%;
}
.t4 {
	bottom: 10%;
	right: -80%;
}
.puzzle_line {
	width: 100%;
	height: 3px;
	margin-top: 24px;
	background-color: #FFF;
	position: relative;
}
.t1 .puzzle_line::before,  .t3 .puzzle_line::before {
	content: "";
	top: -3px;
	left: -3px;
	position: absolute;
	height: 9px;
	width: 9px;
	border-radius: 100%;
	background-color: #FFF;
}
.t2 .puzzle_line::before,  .t4 .puzzle_line::before {
	content: "";
	top: -3px;
	right: -3px;
	position: absolute;
	height: 9px;
	width: 9px;
	border-radius: 100%;
	background-color: #FFF;
}
}
#bar_img_4 {
	margin: 0 auto;
	width: 34%;
	position: absolute;
	bottom: 237px;
	left: 297px;
	opacity: 0;
	transition: all 2s;
	-moz-transition: all 2s;
	-webkit-transition: all 2s;
	-o-transition: all 2s;
}
#bar_img_5 {
	width: 34%;
	position: absolute;
	bottom: 237px;
	left: 297px;
	-webkit-animation: mymove_1 3s forwards;
	/* Chrome, Safari, Opera */
	animation: mymove_1 3s forwards;
	display: none;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes mymove_1 {
 from {
 left: 297px;
}
to {
	left: 350px;
}
}
 @keyframes mymove_1 {
 from {
 left: 297px;
}
to {
	left: 350px;
}
}


/* Chrome, Safari, Opera */

@keyframes flyaway {
 0% {
 left: 0px;
}
 25% {
 left: 0px;
}
 100% {
 left: 80px;
}
}


/* Firefox */

@-moz-keyframes flyaway {
 0% {
 left: 0px;
}
 25% {
 left: 0px;
}
 100% {
 left: 80px;
}
    /* Safari 和 Chrome */
    @-webkit-keyframes flyaway {
 0% {
 left: 0px;
}
 25% {
 left: 0px;
}
 100% {
 left: 80px;
}
}
    /* Opera */
    @-o-keyframes flyaway {
 0% {
 left: 0px;
}
 25% {
 left: 0px;
}
 100% {
 left: 80px;
}
}
