@charset "UTF-8";
/* CSS Document */

* { box-sizing: border-box;}

html { font-size: 6.25%;}
body { font-size: 14em; font-family: Helvetica,Thonburi,Arial,Tahoma,sans-serif; color: #282828; background-color:#FFF; position:relative;}
body, html { padding: 0px; margin: 0px; height:100%;}
ul, li { list-style:none; padding:0px; margin:0px;}
a { color: #666666; text-decoration: none;}
a:hover { color: #0070c6; text-decoration: none;}
img {border:none;}
p { margin:5px 0px;}

@font-face { font-family: akkhanee; src: url("../../font/PSL042SP.eot") /* EOT file for IE */ }
@font-face { font-family: akkhanee; src: url("../../font/PSL042SP.TTF"); /* TTF file for CSS3 browsers */ } 
@font-face { font-family: omyim; src: url("../../font/PSL114SP.eot") /* EOT file for IE */ }
@font-face { font-family: omyim; src: url("../../font/PSL114SP.TTF") /* EOT file for IE */ }
@font-face { font-family: kitti; src: url("../../font/PSL094SP.eot"); /* EOT file for IE */ }
@font-face { font-family: kitti; src: url("../../font/PSL094SP.TTF"); /* TTF file for CSS3 browsers */ } 

.header-area{ float:left; width:100%; padding:0px; border-bottom:#d5d5d5 solid 1px; background-color:#fff; z-index:21;}
.header-area .row{position:relative;}
.logo-area{ float:left; padding-right:10px; line-height:50px; }
.header-area .navbar-collapse { width:100%; padding-left:241px; }
.header-area .menu-collapse  ul { float:right; right:0px; width:100%; padding:0px; margin:0px; }
.header-area .nav > li { float:left; width:33.33%; border-left:#d5d5d5 solid 1px; margin-left:-1px; }
.header-area .nav > li > a {  color:#606060; font-family:Arial, Helvetica, sans-serif; padding:0px 20px; font-size:1.6em; line-height:50px; border-bottom:#fff solid 3px; text-align:right;}
.header-area .nav > li > a:hover, .nav > li > a:focus, .nav > li > a.active { border-bottom:#51cdf2 solid 3px; background-color:#FFF; 
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;}
.header-area .nav > li > a.active { border-bottom:#51cdf2 solid 3px; background-color:#FFF; }
.header-area .nav > li ul  { font-size:1em; padding: 0; position: absolute; top:53px; left: 0; width:100%;  
-webkit-box-shadow: none;  -moz-box-shadow: none; box-shadow: none; display: none;  opacity: 0; visibility: hidden; z-index:200;}
.header-area .nav >  li ul li { background: #f7f7f7; border-top:1px solid #f2f2f2;  display: block;  color:#606060; text-align:center; line-height:25px; }
.header-area .nav >  li ul li a{ display: block;width:100%;  color:#606060; text-align:right; padding-right:20px;line-height:50px; }
.header-area .nav >  li ul li a:hover{ display: block;width:100%;  color:#FFF; background: #51cdf2; text-align:right; padding-right:20px;  }
.header-area .nav > li ul  li:hover { background: #51cdf2; color:#FFF; }
.header-area .nav > li:hover ul {  display: block; opacity: 1; visibility: visible;}

.share-area { padding:7px 0px 0px 0px; text-align: right;}
.share-icon { 
	background: url("https://static.ch7on.com/images/theme2018/social-icon.png") no-repeat scroll center center transparent; display:inline-block; height: 40px; width: 40px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	margin-left: 10px;
}
.fb { background-position: 0 0;}
.fb:hover { background-position: 0 -40px !important;}
.tw { background-position: -55px 0 !important;}
.tw:hover { background-position: -55px -40px !important;}
.gp { background-position: -80px 0 !important;}
.gp:hover { background-position: -80px -40px !important;}

.header-area .navbar-toggle { padding:0px; margin:0px !important; border:none; border-radius: 0px;}

.hilight-area{ float:left; width:100%; margin:10px 0px; margin-top:60px;}
.slide {float:left;}
.slide img {width:100%;} 

.multi-area{float:left; width:100%; margin:10px 0px;}
.social-link h2, .application h2{ padding: 0px; margin: 0px; border-bottom:#d5d5d5 solid 1px; font-size:3em; }
.multi-area p { color:#777; font-size:2.3em; line-height:1.2em; font-family:kitti;}

.social-link {float:left; width:100%;}
.social-link li{ float:left; width:33.33%; padding:10px; }
.social-link li img{width:100%;}

.application { float:left; width:100%; padding:10px;}
.application .btn-icon ul { float:left; width:100%;}
.application .btn-icon ul > li { float:left; width:14.25%; padding:10px;}
.application .btn-icon ul > li img{width:100%;}

/*  css application page  */
.application-area  { float:left; width: 100%; height:100%;} 

.app_bg_ch7, .app_bg_do7hd, .app_bg_bugaboo, .app_bg_bugaboo_inter, .app_bg_facup, .app_bg_hondalpga, .app_bg_tsm, .app_bg_champ7{ display: table; height: 100%; table-layout: fixed; width: 100%; 
background-position:center right; background-repeat:no-repeat; background-size:cover; }

.app_bg_ch7 {background-image:url("https://static.ch7on.com/images/theme2014/landing/app_bg_ch7-2.jpg?b=2");}
.app_bg_do7hd {background-image:url("https://static.ch7on.com/images/theme2014/landing/app_bg_do7hd.jpg?b=1");}
.app_bg_bugaboo {background-image:url("https://static.ch7on.com/images/theme2014/landing/app_bg_bugaboo.jpg?v=2");}
.app_bg_bugaboo_inter {background-image:url("https://static.ch7on.com/images/theme2014/landing/app_bg_inter.jpg");}
.app_bg_facup {background-image:url("https://static.ch7on.com/images/theme2014/landing/app_bg_facup.jpg?b=1");}
.app_bg_hondalpga {background-image:url("https://static.ch7on.com/images/theme2014/landing/app_bg_honfalpga.jpg?b=1");}
.app_bg_tsm {background-image:url("https://static.ch7on.com/images/theme2014/landing/app_bg_tsm.jpg?v=1");}
.app_bg_champ7 {background-image:url("https://static.ch7on.com/images/theme2014/landing/app_bg_champ7.jpg?v=1");}
 
.application-cover{ display:table; height:100%; width:50%; padding-left:5%;}
.application-cover .row{ display:table-cell; vertical-align:middle;}

.ll {position:relative;}
.ll h3 { padding:0px; padding-left:10px; margin:0px; margin-left:30%; font-size:1.6em; line-height:1.5em;}
.ll h2 { padding:0px; padding-left:10px; margin:0px; margin-left:30%; font-size:2.2em;}
.ll p { float:left; width:100%; padding:10px 0px; margin:0px; font-size:1.1em;}
.font-white {color:#fff;}

.app-icon { float:left; width:30%; margin-top:-50px;}
.btn-app { float:left; width:33.33%; margin:0px; padding:0px; display:inline-block;} 
.btn-app img{width:100%;}

.bg-title-fb {background-color:#3552ab;}
.bg-title-ig { background:url("https://static.ch7on.com/images/theme2014/landing/instagram_title_bg.png") top  center no-repeat #644b39; }
.bg-title-tw {background-color:transparent;}
/* .bg-title-tw {background:url("https:https://static.ch7on.com/images/theme2014/landing/twiiter-bg.jpg")} */
.bg-title-yt {background-color:#a92828;}
.bg-title-gg {background-color:#ef4f4f;}
.bg-title-tt { background-color:#232323;}
.bg-title-th { background-color:#ffffff;}

.title-area { float:left; width: 100%; height:90%;  padding:5% 0px 5% 0px; margin:0 auto; text-align:center;}
.title-area img{ width: 80%; text-align:center; position: absolute; top: 50%; left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);}
.read-more{ width: 100%; text-align:center; position: absolute; bottom: 0%; left: 50%; 
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);}
.read-more a {display:inline-block;}
.read-more img {text-align: center; width: auto; position:relative; margin:0px auto; filter: invert(1);}

.landing-area { float:left; width: 100%; padding-bottom:50px; background-color:#3552ab; }
.landing-text { float:left; width:100%; padding:10px; margin-bottom:20px; text-align:center; }
.landing-text h2 { margin:0px; text-align:center; color:#fffc00; font-family:akkhanee; font-size:5em; line-height:0.85em; letter-spacing:0.5px;}
.landing-text p { text-align:center;  color:#fff; font-family:omyim;  font-size:2.5em; line-height:1em; letter-spacing:0.5px;} 
 
.btn-area { float:left; width: 100%; padding:0px;}
.btn-area li { float:left; width:25%; padding:10px; min-height:310px; margin-bottom:20px; text-align:left; color:#fff; position:relative;}
.btn-area li img{width:100%;}
.btn-area li h3{ font-size:1.5em; line-heigh:30px; margin:10px 0px; }
.btn-area li p{ color:#a4b7f2; margin:0px;}
.btn-area li a.view { position:absolute; bottom:10px; left:10px; width: 130px; display:block; line-height:29px; padding-top:5px; border:1px solid #a4b7f2; border-radius:20px; text-align:center; color:#fff;}
.btn-area li a.view:hover { color:#fff; background-color:#2d4aa1;} 
.btn-area li a.liked {position:absolute; bottom:10px; right:10px;}

/*  css twitter  */
.twitter-area { 
	float:left; 
	width: 100%; 
	padding-bottom:50px; 
	background-color:transparent; 
	/* background: url("https:https://static.ch7on.com/images/theme2014/landing/twiiter-bg.jpg"); */
}
.twitter-text { float:left; width:100%; padding:10px; margin-bottom:20px; text-align:center;}
.twitter-text  h2 { margin:0px; text-align:center; color:#fffc00; font-family:akkhanee; font-size:5em; line-height:0.85em; letter-spacing:0.5px; color:#000;} 
.twitter-text p { text-align:center;  color:#7D7D7D; font-family:omyim;  font-size:2.5em; line-height:1em; letter-spacing:0.5px; }
.bg-title-tw .read-more img{filter: none;}

.icon-logo { float:left; width: 100%;}
.icon-logo .icn { float:left; width:100%;}
.icon-logo .icn li{ float:left; width:50%; min-height:180px; padding:10px 20px; margin-bottom:20px; color:#fff; position:relative;}

.icon-logo .icn li img{ float:left; width:30%; position:absolute; top:0px; left:0px;}
.icon-logo .icn li h3 { font-size:1.5em; line-heigh:30px; margin-top:5px;color: #000;}
.icon-logo .icn li p{font-size:1.1em;color: #000;}
.icon-logo a { float:left; width: 130px; display:block; line-height:30px; padding-top:4px; border:1px solid #000; border-radius:20px; text-align:center; color:#000;}
.icon-logo a:hover{ color:#fff; background-color:#7D7D7D;}
.icon-logo h3, .icon-logo p, .icon-logo a{margin-left:30%;}

.instagram-area { float:left; width: 100%; padding-bottom:50px; background-color:#644b39; }
.instagram-area .icon-logo .icn li p, .instagram-area .icon-logo .icn li h3{color: #fff;}
.instagram-text { float:left; width:100%; padding:10px; margin-bottom:20px; text-align:center;}
.instagram-text  h2 { margin:0px; text-align:center; color:#fffc00; font-family:akkhanee; font-size:5em; line-height:0.85em; letter-spacing:0.5px; color:#dfbe3b;} 
.instagram-text p { text-align:center;  color:#fff; font-family:omyim;  font-size:2.5em; line-height:1em; letter-spacing:0.5px; }

.instagram-area .icon-logo a { float:left; width: 130px; display:block; line-height:30px; padding-top:4px; border:1px solid #a19388; border-radius:20px; text-align:center; color:#fff;}
.instagram-area .icon-logo a:hover{ color:#fff; background-color:#563e2c;}

/* css tiktok */
.tiktok-area { float:left; width: 100%; padding-bottom:50px; background-color:#232323; }
.tiktok-text h2{margin:0px; text-align:center; font-family:akkhanee; font-size:5em; line-height:0.85em; letter-spacing:0.5px; color: #25F4EE;}
.tiktok-text p { text-align:center;  color:#fff; font-family:omyim;  font-size:2.5em; line-height:1em; letter-spacing:0.5px; margin-bottom: 48px;}
.tiktok-area .icon-logo .icn li h3{font-size:1.5em; line-height:30px; margin-top:5px; color: #fff;}
.tiktok-area .icon-logo .icn li p{font-size:1.1em; color: #fff;}
.tiktok-area .icon-logo a { float:left; width: 130px; display:block; line-height:30px; padding-top:4px; border:1px solid #fff; border-radius:20px; text-align:center; color:#fff;}


/* css threads */
.threads-area { float:left; width: 100%; padding-bottom:50px; background-color:#ffffff; }
.threads-text h2{margin:0px; text-align:center; font-family:akkhanee; font-size:5em; line-height:0.85em; letter-spacing:0.5px; color: #E24A78;}
.threads-text p { text-align:center;  color:#000; font-family:omyim;  font-size:2.5em; line-height:1em; letter-spacing:0.5px; margin-bottom: 48px;}
.threads-area .icon-logo .icn li h3{font-size:1.5em; line-height:30px; margin-top:5px; color: #000;}
.threads-area .icon-logo .icn li p{font-size:1.1em; color: #000;}
.threads-area .icon-logo a { float:left; width: 130px; display:block; line-height:30px; padding-top:4px; border:1px solid #000; border-radius:20px; text-align:center; color:#000;}
.bg-title-th .read-more img{filter: none;}

/*  css google    */
.google-area { float:left; width: 100%; padding-bottom:50px; background-color:#ef4f4f; }
.google-text { float:left; width:100%; padding:10px; margin-bottom:20px; text-align:center;}
.google-text h2 { margin:0px; text-align:center; color:#fef985; font-family:akkhanee; font-size:5em; line-height:0.85em; letter-spacing:0.5px;} 
.google-text p { text-align:center;  color:#fff; font-family:omyim;  font-size:2.5em; line-height:1em; letter-spacing:0.5px; }

.google-ch7, .google-bugaboo { float:left; width: 50%; padding:10px; text-align:center; color:#fff; }
.google-ch7 h3 { font-size:2em; line-heigh:30px; margin-top:5px;}
.google-ch7 p{font-size:1.1em;}
.google-ch7 p img, .google-bugaboo p img{max-width:100%}
.google-ch7 > a, .google-bugaboo > a { float:none; width: 130px; display:inline-block; line-height:30px; padding-top:3px;  margin:20px 0px; border:1px solid #ffa6a6; border-radius:20px; text-align:center; color:#fff;}
.google-ch7 > a:hover, .google-bugaboo > a:hover{ background-color:#de3f3f; color:#fff;}
.gg-btn{display:inline-block;}
.google-bugaboo h3 { font-size:2em; line-heigh:30px; margin-top:5px;}
.google-bugaboo p{font-size:1.1em;}

/*  css youtube    */
.youtube-area {float:left; width: 100%; padding-bottom:50px; background-color:#a92828; }
.youtube-text { float:left; width:100%; padding:10px; margin-bottom:20px; text-align:center;}
.youtube-text h2 { margin:0px; text-align:center; color:#94fbff; font-family:akkhanee; font-size:5em; line-height:0.85em; letter-spacing:0.5px;} 
.youtube-text p { text-align:center;  color:#fff; font-family:omyim;  font-size:2.5em; line-height:1em; letter-spacing:0.5px;} 

.youtube-ch7, .youtube-bugaboo { float:left; width: 50%; padding:10px; text-align:center; color:#fff; }
.youtube-ch7 h3, .youtube-bugaboo h3  { font-size:2em; line-heigh:30px; margin-top:5px;}
.youtube-ch7 p, .youtube-bugaboo p{font-size:1.1em;}
.youtube-ch7 > a, .youtube-bugaboo > a { float:none; width: 150px; display:inline-block; line-height:30px; padding-top:4px; margin:20px 0px; border:1px solid #ffc9c9; border-radius:20px; text-align:center; color:#fff;}
.youtube-ch7 > a:hover, .youtube-bugaboo > a:hover{ color:#fff; background-color:#971a1a;}

@media (max-width: 767px) { 
.header-area{  position:relative; background-color:#fff;}
.header-area .menu-collapse { float:left; width:100%; }
.header-area .nav > li { width:100%; border-top:#d5d5d5 solid 1px; }
.header-area .nav > li > a { font-size:1.2em;  border:none;  text-align:center; }
.header-area .nav > li ul {font-size:0.9em;}
.header-area .navbar-collapse{ width:100%; padding:0px;}

.mobile { float:left;  text-align:center; width:100%; } 
.mobile > li {  float:left;width:100%; padding:0px 0px;border-top:#d5d5d5 solid 1px; margin:0 auto; }
.mobile > li > a {  display:block; width:100%; color:#606060; font-family:Arial, Helvetica, sans-serif; font-size:1.2em;  border:none;  text-align:center; height:55px; padding-top:20px; text-decoration:none;}
.mobile > li > a:hover, .nav > li > a:focus, .nav > li > a.active { width:100%; border-bottom:#51cdf2 solid 3px; background-color:#FFF;height:55px; height:55px;  }
.mobile > li ul {font-size:0.9em; padding: 0; position: absolute; top:55px; left: 0; width:100%; -webkit-box-shadow: none;  }
.mobile > li ul li {  display: block;  color:#606060;  text-align:center; line-height:25px;  background: #fafafa;}
.mobile > li ul li> a:hover { background: #51cdf2; color:#FFF; }
.share-area { text-align: center;}
.navbar-nav .open .dropdown-menu { border-top:1px solid #f0f0f0;}
.navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 0px;}
.hilight-area{margin-top:10px;}

.multi-area p {font-size:2.2em;}
.social-link li{ width:100%; padding:20px;}
.application .btn-icon ul > li {width:33.33%;}

.app_bg_ch7, .app_bg_do7hd, .app_bg_bugaboo, .app_bg_bugaboo_inter, .app_bg_facup, .app_bg_hondalpga, .app_bg_tsm, .app_bg_champ7{ background-position:right top; background-size:200%;}
.application-cover { padding:20px; padding-top:510px; width:100%;}
.app-icon {margin-top:-45px;}
.font-white {color:#282828;}
.ll h2 { font-size:1.6em; line-height:0.95em; letter-spacing: -0.5px;}
.ll h3 {font-size:1.2em;}

.landing-text h2, .twitter-text h2, .instagram-text h2, .google-text h2, .youtube-text h2 {font-size:3.5em;}
.landing-text p, .twitter-text p, .instagram-text p, .google-text p, .youtube-text p {font-size:1.8em;}
.btn-area li { width:100%; padding-bottom:50px; min-height:inherit;}

.icon-logo .icn li img{ width: 50%; position:relative; top:inherit; left:inherit; float:none;}
.icon-logo h3 {font-size:3.5em;}
.icon-logo p {font-size:1.8em;}
.icon-logo .icn li { width:100%; min-height:inherit; text-align:center; display: flex; flex-direction: column; align-items: center;}
.icon-logo h3, .icon-logo p, .icon-logo a{margin-left:inherit;}
.icon-logo a { float:none; display:inline-block; width: 50%; }

.google-ch7, .google-bugaboo, .youtube-ch7, .youtube-bugaboo{ width:100%; margin-bottom:20px;}
.google-ch7 p a, .google-bugaboo p a{ float:left; width:25%; margin:10px 0px;}
.youtube-ch7 > a, .youtube-bugaboo > a {width:50%;}
}

@media (min-width: 768px) { 
.container {width:750px;}
.header-area .nav > li > a { font-size: 1.2em;}
.multi-area p {font-size:1.85em;}
.social-link h2{font-size:2.2em;}
.application .btn-icon ul > li {width:20%;}

.app_bg_ch7, .app_bg_do7hd, .app_bg_bugaboo, .app_bg_bugaboo_inter,  .app_bg_facup, .app_bg_hondalpga, .app_bg_tsm, .app_bg_champ7{background-position:center;}
.app-icon { float:none; width:50%; margin:0px auto; max-width:180px;}
.ll h3, .ll h2 {margin-left:0; padding:0px;}

.btn-area li { width:33.33%; min-height:300px;}
.btn-area li h3{font-size:1.3em;}

.icon-logo .icn li img{width:35%;}
.icon-logo h3, .icon-logo p, .icon-logo a{margin-left:35%;}
.google-ch7 p a, .google-bugaboo p a { float:left; width:25%; margin:10px 0px;}

}

@media (min-width: 992px) { 
.container {width:980px;}
.header-area .nav > li > a { font-size: 1.6em;}
.multi-area p {font-size:2.3em;}
.social-link h2{font-size:3em;}
.application .btn-icon ul > li {width:14.25%;}

.application-cover { padding-left: 3%; width: 45%;}
.app-icon { width:40%; margin-top:-50px;}

.btn-area li { width:25%; min-height:310px;}
.btn-area li h3{font-size:1.5em;}

.icon-logo .icn li img{width:25%;}
.icon-logo h3, .icon-logo p, .icon-logo a{margin-left:25%;}
.google-ch7 p a, .google-bugaboo p a { float:none; width:inherit; margin:10px 0px;}
}
@media (min-width: 1200px) { 
.container {width:1180px;}
.application .btn-icon ul > li {width:12.5%;}
.application-cover { padding-left: 5%; width: 50%;}
.app-icon {width:30%;}

}

@media (min-width: 1400px) { 
.application-cover { padding-left: 10%; width: 45%;}
.app-icon {width:30%;}

}