@charset 'utf-8';
@font-face {
	font-family: 'MyriadPro';
	src: url(../fonts/MyriadPro-Regular.otf);
	font-weight: normal;
}
@font-face {
	font-family: 'MyriadPro';
	src: url(../fonts/MyriadPro-Light.otf);
	font-weight: 300;
}
/* ---------- RESET ---------- */
	html,
	body {
		margin: 0;
		padding: 0;
	}
	#hd * {
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style-type: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		word-wrap: break-word;
		word-break: break-word;
	}
	/*	::selection {
		background: #00cccc;
		color: #ffffff;
	}
	::-moz-selection {
		background: #00cccc;
		color: #ffffff;
	}*/	

	#hd {
		/*background: #fff;*/
		color:#595a5a;
		font-size: 18px;
		-webkit-transition: background-color .4s ease;
		   -moz-transition: background-color .4s ease;
			-ms-transition: background-color .4s ease;
			 -o-transition: background-color .4s ease;
				transition: background-color .4s ease;
	}
	#hd ul,
	#hd li {
		margin: 0;
		padding: 0;
	}
	#hd img {
		display: block;
		height: auto;
		border: none;
		max-width: 100% !important;
		margin: 0 auto;
	}

/* ---------- TXT ------------ */
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6,
	#hd p,
	#hd b,
	#hd small,
	#hd a,
	#hd li {
		font-family: "MyriadPro", sans-serif;
		margin: 0;
		line-height: normal;
		color: #1c78a5;
	}
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h5,
	#hd h6 {
		font-weight: 400;
	}
	#hd h1{
		line-height: 1em;
	}
    #hd h2{
    	font-size: 36px;
    	font-weight: 500;
    	margin-bottom: 12px;
    	color: #1c78a5 !important;
    }

	#hd h3 {
		font-size: 28px;
		line-height: 1em;
		letter-spacing: 1px;
		margin:20px 0;
	}
	#hd h4 {
		font-size: 22px;
		font-weight: 400;
		margin-bottom: 20px;
	}
	#hd h5 {
		font-size: 20px;
		font-weight: 400;
	}
	#hd h6 {
		font-size: 18px;
		font-weight: 400;
	}
	#hd p {
		color: #3e3a39;
		font-size: 18px;
		letter-spacing: 1px;
		font-weight: 300;
		line-height: 1.5em;
		margin: 0;
		margin-bottom: 30px;
	}
	#hd .title_decoration{
		display: inline-block;
		width: 60px;
		height: 2px;
		margin: 0 auto;
		background-color: #1c78a5;
		margin-bottom: 30px;
	}
	#hd small {font-size: 14px; }

	#hd .txt-blue {
		color: #1c78a5;
	}
	#hd .txt-grey {
		color: #3e3a39;
	}
	#hd .txt-white {
		color: #fff;
	}
	#hd .txt-link {
		display: block;
		font-size: 22px;
		font-weight: 300;
		position: relative;
	}
	#hd .txt-center {text-align: center; }
	#hd .txt-left {text-align: left; }
/* ---------- BLOCK ---------- */
	#hd .w90 {
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1920 {
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
	}
	#hd .w1200{
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1200 {max-width: 1200px; }
	#hd .col25,
	#hd .col33,
	#hd .col40,
	#hd .col45,
	#hd .col50,
	#hd .col55,
	#hd .col60,
	#hd .col70,
	#hd .col80  {
		display: inline-block;
		margin-left: -5px;
		vertical-align: middle;
	}
	#hd .col25 {width: 25%; }
	#hd .col33 {width: 33.33%; }
	#hd .col40 {width: 40%; }
	#hd .col45 {width: 45%; }
	#hd .col50 {width: 50%; }
	#hd .col55 {width: 55%; }
	#hd .col60 {width: 60%; }
	#hd .col70 {width: 70%; }
	#hd .col80 {width: 80%; }

	#hd .ib-top{vertical-align: top;}
	#hd .ib-bottom{vertical-align: bottom;}

	#hd .fleft {float: left; }
	#hd .fright {float: right; }
	#hd .cf:after{
		content:'';
		display: block;
		clear:both;
	}

	#hd .hd_mobile-on,
	#hd .hd_480on,
	#hd .hd_620on,
	#hd .hd_1024-on {display: none;}

	#hd .hd_btn{
		display: inline-block;
		min-width: 240px;
		border:1px solid rgba(0,0,0,.2);
		padding:20px 20px 18px;
		margin:15px 0;
		border-radius: 2px;
		font-weight: 400;
		letter-spacing: 1px;
		text-align: center;
		cursor: pointer;
		position: relative;
	}
	#hd .hd_btn:before,
	#hd .hd_btn:after{
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		border: 0px solid #555;
		position: absolute;
		transition: .4s;
	}
	#hd .hd_btn:before {
		top: -1px;
		right: -1px;
		border-top-width: 1px;
		border-right-width: 1px;
	}
	#hd .hd_btn:after {
		bottom: -1px;
		left: -1px;
		border-bottom-width: 1px;
		border-left-width: 1px;
	}
	#hd .hd_btn:hover{color: #00cccc;}
	#hd .hd_btn:hover:before,
	#hd .hd_btn:hover:after{
		width: 100%;
		height: 100%;
		border-color: #00cccc;
	}
/* ---------- fp-nav --------- */
	#fp-nav ul li.active {
		height: 30px;
		margin-bottom: 12px;
	}
	#fp-nav ul li a span,
	#fp-nav ul li:hover a span {
		width: 8px;
		height: 8px;
		top: 0;
		left: 0;
		right: 0;
		margin: 0;
	}
	#fp-nav ul li.active a span,
	#fp-nav ul li.active:hover a span,
	#fp-nav ul li.active:hover a span {
		top: 0;
		left: 0;
		right: 0;
		height: 30px;
		width: 8px;
		margin: 0;
		margin-bottom: 7px;
		border-radius: 6px;
		background-color: #1c78a5;
	}
	#fp-nav ul li:hover a span {
		background-color: #1c78a5;
	}
	#fp-nav ul li .fp-tooltip {
		color: #1c78a5;
	}
	#fp-nav ul li.active .fp-tooltip {
		top: 5px;
	}
	
/* ---------- scrollUp ------- */
	#hd #scrollUp {
		float: left;
		position: fixed;
		right: 10px;
		bottom: 50px;
		z-index: 17;
		width: 50px;
		height: 50px;
		border-radius: 26px;
		cursor: pointer;
		z-index: 999;
		opacity: 0;
		border: 2px solid #1c78a5;
		background: rgba(255, 255, 255, 1) url('../img/scrollUp.png') no-repeat center center;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd #scrollUp.hd-show {
		opacity: 1;
	}
	#hd #scrollUp:hover,
	#hd #scrollUp:active {
		background-color: white;
		background-position: center 35%;
		border-color: #1c78a5;
		box-shadow: 0 0 10px rgba(28, 120, 165, 0.78);
	}
/* ---------- main-- ------------- */
	#hd .sec_bg{
		padding: 120px 0;
	}
	#hd .sec_bg_grey{
		padding: 120px 0;
		background-color: #f7f8f8;
	}
/* ---------- sec-KV ------------- */
	#hd #kv{
		position: relative;
		background-size: 100%;
		background-position:center;
		background-repeat: no-repeat;
		padding: 280px 0;
		animation: kv 4s linear;
	}
	@keyframes kv
	{
	from {background-size: 120%;}
	to {background-size: 100%;}
	}

	#hd .kv02{
		position: absolute;
		background-size: cover;
		background-position: bottom center;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	#hd #kv h1{
		position: relative;
		font-size: 60px;
		margin-top: 200px;
		margin-bottom: 10px;
	}
	#hd #kv h1:after{
		content: "";
		position: absolute;
		background-color: #fff;
		width: 80px;
		height: 2px;
		bottom: -5px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	#hd #kv h3{
		font-weight: 300;
		line-height: 1.2em;
		padding: 0 10px;
	}
/* ---------- sec-protect -------- */

	#hd #protect{
		padding-top: 100px;
	}
	#hd .protect_link{
		position: relative;
		display: flex;
		margin-top: 80px;
	}
	#hd .protect_link_btn{
		background-position: center;
		background-size: cover;
		flex: 1;
		height: 0;
		padding-bottom: 20%;
	}

	#hd .protect_link_hover {
		background-color: rgba(28,120,165,0);
		position: absolute;
		width: 50%;
		left: 0;
		height: 100%;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
		animation: protect_link_hover 3s infinite ease;
		animation-direction: alternate;
		animation-delay: 0;
	}	
	#hd .protect_link_hover.right{
		animation-delay: 3s;
	}
	@keyframes protect_link_hover
	{
		0% {
		background-color: rgba(28,120,165,0);
			
		}
		50% {
		background-color: rgba(28,120,165,0);
		}
		100%{
		background-color: rgba(28,120,165,.7);
		}
	}
	#hd .protect_link:hover .protect_link_hover{
		animation:none;
	}
	#hd .protect_link_hover.right{
		left: 50%;
	}
	#hd .protect_link_hover:hover{
		background-color: rgba(28,120,165,.7);
	}
	#hd .protect_link_hover h3{
		position: relative;
		opacity: 1;
		margin-top: 20%;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd .protect_link_hover.right h3{
		margin-top: 16%;
	}
	#hd .protect_link_hover:hover h3{
		opacity: 1;
	}
	#hd .protect_link_hover h3:after{
		content: "";
		position: absolute;
		width: 30px;
		height: 2px;
		background-color: #fff;
		margin: 0 auto;
		left: 0;
		right: 0;
		bottom: -5px;
	}
	#hd .protect_highlight{
		margin:20px 0;
	}
	#hd .protect_highlight li{
		position: relative;
		vertical-align: top;
		padding: 0 10px;
	}
	#hd .protect_highlight h3{
		font-size: 36px;
		margin: 8px 0;

	}
	#hd .protect_highlight p{
		margin-bottom: 0;
	}
/* ---------- support_models ----- */
	#hd .support_models_table{
		width: 100%;
		text-align: left;
		border-collapse:collapse;
	}
	#hd .support_models_table thead th{
		background-color: #1c78a5;
		padding: 15px 20px;
		vertical-align: top;
	} 
	
	#hd .support_models_table thead p{
		margin-bottom: 0;
		opacity: .6;
		margin-top: 5px;
		line-height: 1.3em;
	}
	#hd .support_models_table td{
		padding: 15px 20px;
		border-bottom: 1px solid #c9caca;
		background-color: #fff;
	}
	#hd .support_models_table td:nth-child(2){
		width: 50%;
	}
	#hd .support_models_table td p{
		margin-bottom: 0;
		font-weight: 400;
	}
	#hd .support_models_table td a{
		display: inline-block;
		margin: 10px 15px 10px 0;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd .support_models_table td a:hover{
		opacity: .6;
	}
	#hd .support_models_table.mobile{
		display: none;
		
	}
/* ---------- network_security --- */
	#hd #security{
		background-position: 0 center;
		background-size:100% auto;
		background-repeat: no-repeat;
		height: 100vh;
		position: relative;
	}
	#hd #security .w1200{
		/*border: 1px solid #ddd;*/
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	#hd #security .col50{
		vertical-align: top;
	}
	#hd .security_text{
		margin-top: 100px;
	}
	#hd .security_detail{
		margin-top: 50px;
	}
	#hd .security_detail .col50{
		vertical-align: middle;
	}
	#hd .security_detail li{
		display: none;
	}
	#hd .security_detail li.active{
		display: block;
		animation: fadeInBottom 1s forwards;
	}
	@keyframes fadeInBottom
	{
		from {
			opacity: 0;
			transform:translateY(30px);
		}
		to {
			opacity: 1;
			transform:translateY(0px);
		}
	}
	#hd .security_detail li h4{
		margin-bottom: 13px;
	}
	#hd .security_detail p{
		font-size: 16px;
	}
	#hd .security_circle{
		position: relative;
	}
	#hd .security_circle h6{
		position: absolute;
		text-align: center;
		left: 0;
		right: 0;
		margin:0 auto; 
		top: 74%;
	}
	#hd .security_circle_item{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#hd .security_circle_item li{
		display: inline-block;
		position: absolute;
		width: 18%;
		-webkit-transition: all 1s ease;
		   -moz-transition: all 1s ease;
		    -ms-transition: all 1s ease;
		     -o-transition: all 1s ease;
		        transition: all 1s ease;
	}
	#hd .security_circle_item li:nth-child(1){
		left: 0;
		right: 0;
		top: 22%;
		margin: 0 auto;
		width: 23%;
	}

	#hd .security_circle_item li:nth-child(2){
		right: 15%;
		top: 73%;
	}
	#hd .security_circle_item li:nth-child(3){
		left: 15%;
		top: 73%;
	}
	#hd .security_circle_item li:nth-child(4){
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: none;
	}
	
	#hd .security_circle_item li.active{
		-moz-transform:scale(1.8);
		-webkit-transform:scale(1.8);
		-o-transform:scale(1.8);
		-ms-transform:scale(1.8);
		transform:scale(1.8);
		animation: circle_item .8s infinite ease-in;
		animation-direction: alternate;
		animation-delay: 1s;
	}
	@keyframes circle_item
	{
		from {
		-moz-transform:scale(1.8);
		-webkit-transform:scale(1.8);
		-o-transform:scale(1.8);
		-ms-transform:scale(1.8);
		transform:scale(1.8);
			
		}
		to {
		-moz-transform:scale(1.6);
		-webkit-transform:scale(1.6);
		-o-transform:scale(1.6);
		-ms-transform:scale(1.6);
		transform:scale(1.6);
		}
	}
	#hd .security_circle_item li.active:nth-child(4){
		display: block;
		-moz-transform:scale(1);
		-webkit-transform:scale(1);
		-o-transform:scale(1);
		-ms-transform:scale(1);
		transform:scale(1);
		animation: fadeIn .5s forwards;
	}
	@keyframes fadeIn
	{
	from {opacity: 0;}
	to {opacity: 1;}
	}
		
	#hd #security_wrapper{
			width: 100%;
			height: 100vh;
			position: relative;
			overflow:hidden;
		}
	
	#hd #security{
		width: 100%;
		background-position: 0 0;
		/*position: absolute;*/
		/*top: 0;*/
		/*left: 0;*/
		-webkit-transition: all .25s;
		   -moz-transition: all .25s;
		    -ms-transition: all .25s;
		     -o-transition: all .25s;
		        transition: all .25s;
	}
	#hd #security_mobile{
		display: none;
	}
	#hd #security_mobile img{
		margin:30px auto 10px;
	}
	
/* ---------- internet ----------- */
	#hd #internet{
		background-color: #1c78a5;
		background-image: url(../img/internet_bg-01.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#hd .internet_phone,
	#hd .internet_text{
		display: inline-block;
		margin-left: -5px;
		vertical-align: top;

	}
	#hd .internet_phone{
		position: relative;
		width: 30%;
	}
	#hd .internet_app{
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
	}
	#hd .internet_app li{
		display: none;
	}
	#hd .internet_app li.active{
		display: block;
	}

	#hd .internet_text{
		width: 70%;
		padding: 30px 0 0;
	}
	#hd hr{
		position: relative;
		overflow: visible;
		margin-bottom: 20px;
	}
	#hd hr:before{
		content: "";
		position: absolute;
		width: 60px;
		height: 3px;
		background-color: #fff;
		left: 0;
		top: -1px;
	}
	#hd .internet_icon li{
		display: inline-block;
		margin-left: -5px;
		width: 25%;
		vertical-align: top;
		opacity: .5;
		cursor: pointer;
		-webkit-transition: all .25s ;
		   -moz-transition: all .25s ;
		    -ms-transition: all .25s ;
		     -o-transition: all .25s ;
		        transition: all .25s ;
	}
	#hd .internet_icon li.active{
		opacity: 1;
	}
	#hd .internet_icon li p{
		font-size: 16px;
		line-height: 1.3em;
		padding: 0 10px;
		margin-bottom: 8px;
	}
	#hd .mobile_detail{
		display: none;
	}
	#hd .internet_detail{
		border: 1px solid rgba(255,255,255,.5);
		padding: 20px 25px;
	}
	#hd .internet_detail li{
		display: none;
	}
	#hd .internet_detail li.active{
		display: block;
	}
	#hd .internet_detail p{
		font-size: 16px;
		margin-bottom: 0;
	}
	#hd .internet_triangle li{
		display: inline-block;
		width: 25%;
		margin-left: -5px;
		margin-bottom: -6px;
		opacity: 0;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd .internet_triangle li.active{
		opacity: 1;
	}
	#hd .internet_text h2{
		color: #fff !important;
	}
/* ---------- family ------------- */

	#hd #family{
		background-size: 100%;
		background-position: bottom center;
		background-repeat: no-repeat;
	}
	#hd #family .family_col{
		padding: 20px 25px;
		vertical-align: top;
	} 
/* ---------- comparison --------- */
	#hd .comparison_table{
		text-align: left;
		width: 100%;
		background-color: #fff;
	}
	#hd .comparison_table p{
		margin-bottom: 0;
	}
	#hd .comparison_table{
		border-collapse:collapse;
	}
	#hd .comparison_table th{
		text-align: center;
		padding: 20px 15px;
		border-top: 1px solid #c9caca;
	}
	#hd .comparison_table td{
		padding: 10px 15px;
		border-bottom: 1px solid #c9caca;
	}

	#hd .comparison_table_blue{
		background-color: #1c78a5;
	}
	#hd .comparison_table td:nth-child(1){
		/*display: block;*/
		/*width: 100%;*/
	}
/* ---------- Disclaimer --------- */
	#hd .disclaimer p{
		margin-bottom: 12px;
	}