/*grayscale*/
html {
/*-webkit-filter: grayscale(0.4) !important;
-moz-filter: grayscale(0.4) !important;
filter: grayscale(0.4) !important;
-ms-filter: grayscale(0.4) !important;
-o-filter: grayscale(0.4) !important;
filter: gray !important; / IE 6-9 /
filter: grayscale(0.4);*/
}
#zcomHeaderSelect {
height: 36px;
}
html:lang(th) body,
html:lang(en) body,
html:lang(th-TH) body,
html:lang(en-US) body {
/*margin: 136px 0 0;*/
margin: 36px 0 0 !important;
position: initial;
}
html:lang(th) body #zcomCommonHeader,
html:lang(en) body #zcomCommonHeader,
html:lang(th-TH) body #zcomCommonHeader,
html:lang(en-US) body #zcomCommonHeader {
/*height: 136px;*/
height: 36px !important;
min-width: 960px;
position: fixed;
}
html:lang(th) body .th-king-rip,
html:lang(en) body .th-king-rip,
html:lang(th-TH) body .th-king-rip,
html:lang(en-US) body .th-king-rip {
background: #b4b4b4;
/*background: #d7bc65;*/
line-height: 0;
overflow: hidden;
text-align: center;
display: none;
}
html:lang(th) body .zcom-common-header-nav,
html:lang(en) body .zcom-common-header-nav,
html:lang(th-TH) body .zcom-common-header-nav,
html:lang(en-US) body .zcom-common-header-nav {
height: 36px;
}
html:lang(th) body #zcomCommonServices,
html:lang(en) body #zcomCommonServices,
html:lang(th-TH) body #zcomCommonServices,
html:lang(en-US) body #zcomCommonServices {
/*top: 140px;*/
top: 40px !important;
}
/* Grayscale style of 13 Oct */
.wrap{
/*margin-top:128px;*/
margin-top: 0;
}
.zcom-global-header {
position: absolute;
}
.region-select-country li a {
width: 60px;
}
.region-select-country li a.is-th {
background-image: url("../images/flag_th.png");
}
@charset "utf-8";
/* CSS Document */
/*typography*/
/*body{font-size: 13px;line-height: 1.22857;color:#646464; overflow-x: hidden; padding: 0; margin: 0;font-family: "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;}*/
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
img {vertical-align: middle;}
.img-responsive { margin: 0 auto;}
/*.container { width: 960px; height: auto;}*/
.btn {
cursor: pointer;
padding: 0;
background: none;
border: 0 none;
color: #fff;
text-align: center;
background-color: #d62825;
line-height: 100%;
padding: 15px;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
font-size: 16px;
font-size: 1.23077rem;
position: relative;
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.mid_box {
padding: 20px 20px 0;
width: 285px;
height: 284px; float: left;
}
/*header*/
section.header-fixed .menu-global-header { background:#f5f5f5; border-bottom: 1px #dcdcdc solid; height: 28px; width: 100%; position: fixed;z-index: 1000;}
section.header-fixed .menu-global-header ul {list-style: none;padding: 5px 0; margin: 0;}
section.header-fixed .menu-global-header ul li { display: inline-block; margin-right: 20px;color: #646464; text-align: left;
font-family: "Century Gothic","Open Sans","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"Microsoft Yahei","Hiragino Sans GB",sans-serif;
font-size: 11px;}
section.header-fixed .menu-global-header ul li a { color: #646464;}
section.header-fixed .menu-global-header ul li a:hover { color: #d62825;}
section.header { position: relative; padding-top: 28px;width: 100%;height: auto;float: left;}
section.header .header-inner { background:#fff; border-bottom: 1px #dcdcdc solid; height: 49px; width: 100%;}
section.header .header-inner .header-logo { text-align: left; padding: 11px 0 0 0;margin: 0;}
section.header .header-inner .header-right { text-align: right; padding: 12px 0;margin: 0;}
section.header .header-inner .header-right.index { text-align: left;margin-top: 0.55em; margin-left: -5px;}
section.header .header-inner .header-right.index ul { list-style: none;}
section.header .header-inner .header-right.index ul li { display: inline-block;color: #646464;padding: 0 20px; }
section.header .header-inner .header-right.index ul li a { color: #646464;}
section.header .header-inner .header-right.index ul li a:hover { color:#d62825; }
/*home*/
section.home-news { background:#d62825; padding: 8px 2px;width: 100%;height: auto;float: left;}
section.home-news .home-news-inner {color: #fff;margin: 0 auto;}
section.home-news .home-news-inner .home-news-title {
background: #323232;
color: #fff;
display: inline-block;
float: left;
font-weight: normal;
padding: 8px 24px;
margin: 2px 20px 0 0;
text-align: center;
font-size: 18px;
font-size: 1.5rem;}
section.home-news .home-news-inner p.home-news-list { font-size: 13px; padding:0; margin: 11px 0;text-align: left; color: #fff;overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;display: block;}
section.home-news .home-news-inner p.home-news-list span { margin-right: 10px;}
section.home-search { padding: 30px 0; text-align: center;width: 100%;height: auto;float: left;}
section.home-search .form-search {
position: relative;
padding: 3px;
border: 2px solid #646464;
background: #fff;
width: 80%; margin: 0 auto;
*zoom: 1;}
section.home-search .form-search .input-domain, section.home-search .form-search .input-domain {
border: 0 none;
float: left;
height: 54px;
line-height: 54px;
width: 550px;
text-indent: 17px;
font-size: 20px;
color: #000;
font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
background: transparent;
}
section.home-search .form-search .multi-domain-search-opener, section.home-search .form-search .multi-domain-search-opener {
position: absolute;
right: 175px;
top: 18px;
font-size: 14px;
text-decoration: underline;
color: #323232;
cursor: pointer;}
section.home-search .form-search .btn.btn-submit {
padding: 15px;
font-size: 19px;
font-size: 1.8rem;
border-radius: 0;
font-family: "Tahoma", Arial, sans-serif;
text-align: center;
background:#d62825;
margin: 0 -30px 0 0;
width: 150px;
box-shadow:none;
}
section.home-who {width: 100%;height: auto;float: left;background: #323232;padding: 40px 0; text-align: center;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.home-who h1 {margin: 0 0 25px 0;padding: 0;font-weight: normal;font-size: 3.2em;text-align: center;color: #fff;}
section.home-who h1 span { color:#d62825;}
section.home-who p {text-align: left;color: #fff;font-size: 1.3em;font-weight: 200;line-height: 1.8em;margin: 10px 0}
section.top-shared-feature.is-gray.other {color: #fff;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.is-gray.other .box-shopup { background:#4db6ac; padding: 20px 20px 30px 20px;border: 1px #dbdbdb solid;text-align: center; margin:5px -10px;color: #fff;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.is-gray.other .box-shopup .content { height: 150px;}
section.top-shared-feature.is-gray.other .box-shopup h1 { font-size: 1.5em; margin:0 0 20px 0; color: #fff;}
section.top-shared-feature.is-gray.other .box-shopup h2 { font-size: 1.3em; margin:20px 0 10px 0; color: #fff; text-align: left; font-weight: 800;}
section.top-shared-feature.is-gray.other .box-shopup p { text-align: left;font-size: 14px;line-height:20px;}
section.top-shared-feature.is-gray.other .box-zweb { background:#4d97b6; padding: 20px 20px 30px 20px;border: 1px #dbdbdb solid;text-align: center; margin:5px -10px;color: #fff;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.is-gray.other .box-zweb .content { height: 150px;}
section.top-shared-feature.is-gray.other .box-zweb h1 { font-size: 1.5em; margin:0 0 20px 0; color: #fff;}
section.top-shared-feature.is-gray.other .box-zweb h2 { font-size: 1.3em; margin:20px 0 10px 0; color: #fff; text-align: left; font-weight: 800;}
section.top-shared-feature.is-gray.other .box-zweb p { text-align: left;font-size: 14px;line-height:20px;}
section.top-shared-feature.is-gray.other .box-zrank { background:#3b539b; padding: 20px 20px 30px 20px;border: 1px #dbdbdb solid;text-align: center; margin:5px -10px;color: #fff;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.is-gray.other .box-zrank .content { height: 150px;}
section.top-shared-feature.is-gray.other .box-zrank h1 { font-size: 1.5em; margin:0 0 20px 0; color: #fff;}
section.top-shared-feature.is-gray.other .box-zrank h2 { font-size: 1.3em; margin:20px 0 10px 0; color: #fff; text-align: left; font-weight: 800;}
section.top-shared-feature.is-gray.other .box-zrank p { text-align: left;font-size: 14px;line-height:20px;}
section.top-shared-feature.is-gray.other .box-netdesign { background:#34495e; padding: 20px 20px 30px 20px;border: 1px #dbdbdb solid;text-align: center; margin:5px -10px;color: #fff;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.is-gray.other .box-netdesign .content { height: 150px;}
section.top-shared-feature.is-gray.other .box-netdesign h1 { font-size: 1.5em; margin:0 0 20px 0; color: #fff;}
section.top-shared-feature.is-gray.other .box-netdesign h2 { font-size: 1.3em; margin:20px 0 10px 0; color: #fff; text-align: left; font-weight: 800;}
section.top-shared-feature.is-gray.other .box-netdesign p { text-align: left;font-size: 14px;line-height:20px;}
.img-circle { border-radius: 100%;}
/*language*/
section.header .header-inner .header-right .header-language{
color: #d62825;
font-family: "Century Gothic","Open Sans","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"Microsoft Yahei","Hiragino Sans GB",sans-serif;
font-size: 13px; padding: 0;
}
section.header .header-inner .header-right .header-language ul {list-style: none;padding:0; margin: 0;}
section.header .header-inner .header-right .header-language ul li { display: inline-block; margin-left:15px;color: #646464; text-align: right;font-size: 13px; line-height: 24px;}
section.header .header-inner .header-right .header-language ul li.cart { padding-right: 25px;}
section.header .header-inner .header-right .header-language ul li a { color:#646464;}
section.header .header-inner .header-right .header-language ul li a:hover, section.header .header-inner .header-right .header-language ul li.active { color:#646464;}
section.header .header-inner .header-right .header-language ul li.active a { color:#d62825;}
/*login*/
section.header .header-inner .header-right .header-login {
color: #d62825;
font-family: "Century Gothic","Open Sans","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"Microsoft Yahei","Hiragino Sans GB",sans-serif;
font-size: 13px; padding: 0;
}
section.header .header-inner .header-right .header-login ul {list-style: none;padding:0; margin: 0;}
section.header .header-inner .header-right .header-login ul li { display: inline-block; margin-left:15px;color: #d62825; text-align: right;font-size: 13px;}
section.header .header-inner .header-right .header-login ul li a { color:#d62825;}
section.header .header-inner .header-right .header-login ul li a:hover { color:#d62825;}
section.header .header-inner .header-right .header-login ul li .box-red{
border: 1px #d62825 solid; padding: 4px 20px; text-align: center; line-height: 24px;
-moz-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
border-radius: 0;
}
section.header .header-inner .header-right .header-login ul li .box-red a { background: #d62825; color: #fff; text-decoration: none;}
section.header .header-inner .header-right .header-login ul li .box-red:hover { background:#d62825;cursor: pointer;-moz-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out; color: #fff; text-decoration: none;}
section.nav-global .nav .menu-top { padding-left: 4px; width: 100%;}
section.nav-global .navbar-nav {
float: left;
margin: 0;
width: 100%;
}
section.nav-global .navbar-collapse.collapse {
width: 100%;
}
section.nav-global {position: relative; z-index: 10; border-bottom: 1px #dcdcdc solid; height: 36px; width: 100%; float: left;}
section.nav-global .nav > li > a {
color: #646464;
position: relative;
display: block;
padding: 8px 20px 0 20px;
}
section.nav-global .nav > li > a:hover, section.nav-global .nav > li > a.first:hover { background: transparent; color: #d62825; text-decoration: none;}
section.nav-global .nav > li > a.first {
color: #646464;
position: relative;
display: block;
padding: 8px 20px 0 0;
}
section.nav-global .nav > li.services-right {text-align: right; float: right; margin-left: 20%;}
section .navbar-toggle {
position: relative;
background:#d62825;
border-radius: 1px;
float: right;
color: #fff;
padding: 2px 5px;}
section .navbar-toggle:hover { background:#b2211e;}
/*.header*/
/*banner*/
section.top-main-visual {
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0 auto;
height: auto;
color: #fff;
/*float: left;*/
max-width: none;
}
/* home */
section.top-main-visual.home {
background: url('../images/banner-header-home.png')center top no-repeat;
height: 480px;
width: 100%;
text-align: center;
margin: 0 auto;
padding: 40px 0;
color: #fff;
float: left;
}
section.top-main-visual.home .box-content {padding: 30px 0; text-align: center;}
section.top-main-visual.home .box-content h1 { color: #fff; font-size: 3em; margin: 0 0 35px 0;}
section.top-main-visual.home .box-content .box-solution { background: rgba(255,255,255,0.1); padding: 20px; text-align: center;border: 1px solid rgba(255,255,255,0.48); color: #323232;}
section.top-main-visual.home .box-content .box-solution h2 { font-size: 1.5em; margin: 10px 0 0 0;}
section.top-main-visual.home .box-content .box-solution p { font-size: 1em;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
.home-search { padding: 30px 0; text-align: center;width: 100%;height: auto;float: left;}
.home-search .form-search {
position: relative;
padding: 3px;
border: 2px solid #646464;
background: #fff;
width: 100%; margin: 0 auto;
*zoom: 1;}
.home-search .form-search .input-domain, .home-search .form-search .input-domain {
border: 0 none;
float: left;
height: 54px;
line-height: 54px;
width: 73%;
text-indent: 17px;
font-size: 20px;
color: #000;
font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
background: transparent;
}
.home-search .form-search .multi-domain-search-opener, .home-search .form-search .multi-domain-search-opener {
position: absolute;
right: 175px;
top: 25px;
font-size: 14px;
text-decoration: underline;
color: #323232;
cursor: pointer;}
.home-search .form-search .btn.btn-submit {
padding: 15px;
font-size: 19px;
font-size: 1.7rem;
border-radius: 0;
text-align: center;
background:#d62825;
margin: 0 -30px 0 0;
width: 150px;
box-shadow:none;
}
.home-search .form-search .btn.btn-submit:hover {
background-color: #b2211e;
}
.home-nav-list > li .service-link .icon.icon--link {font-size: 0.76923em; color: #d62825; margin-left: 5px;}
.home-nav-list > li .service-link .icon.icon--link a {color: #d62825;}
.home-nav-list > li .service-link .icon.icon--link a:hover {color: #fff;}
.home-nav-list > li .service-link .icon--link::before {color:#d62825;}
.home-nav-list > li .service-link .icon--link:hover {color:#fff;}
.home-nav-list > li {
float: left;
padding: 0 2px;
position: relative;
width: 16.66666667%;
}
.home-nav-border {
border-right: 1px solid rgba(255,255,255,0.35);
display: block;
height: 46px;
position: absolute;
right: 0;
top: 35px;
}
.home-nav-list > li .service-link {
color: #d62825;
background-position: center 16px;
background-repeat: no-repeat;
display: block;
padding: 84px 0 0;
cursor: pointer;
text-align: center;
position: relative;
z-index: 2;
font-size: 13px;
line-height: 24px;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.home-nav-list > li .service-link:hover, .home-nav-list > li .service-link:focus{ color: #fff; text-decoration: underline;}
.home-nav-list > li .service-link .bg-link{
background-position: center 25px;
background-repeat: no-repeat;
left: 0;
position: absolute;
top: 0;
height: 100%;
width: 100%;
z-index: 1;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.home-nav-list > li.domain > .service-link .bg-link {background-image: url('../images/icon-red/home-nav-domain_on.png');}
.home-nav-list > li.domain > .service-link .bg-link:hover {background-image: url('../images/icon-red/home-nav-domain.png');}
.home-nav-list > li.hosting > .service-link .bg-link {background-image: url('../images/icon-red/home-nav-hosting_on.png');}
.home-nav-list > li.hosting > .service-link .bg-link:hover {background-image: url('../images/icon-red/home-nav-hosting.png');}
.home-nav-list > li.wp > .service-link .bg-link {background-image: url('../images/icon-red/home-nav-wp_on.png');}
.home-nav-list > li.wp > .service-link .bg-link:hover {background-image: url('../images/icon-red/home-nav-wp.png');}
.home-nav-list > li.cloud > .service-link .bg-link {background-image: url('../images/icon-red/home-nav-cloud_on.png');}
.home-nav-list > li.cloud > .service-link .bg-link:hover {background-image: url('../images/icon-red/home-nav-cloud.png');}
.home-nav-list > li.ssl > .service-link .bg-link {background-image: url('../images/icon-red/home-nav-ssl_on.png');}
.home-nav-list > li.ssl > .service-link .bg-link:hover {background-image: url('../images/icon-red/home-nav-ssl.png');}
.home-nav-list > li.storeapp > .service-link .bg-link {background-image: url('../images/icon-red/home-nav-storeapp_on.png');}
.home-nav-list > li.storeapp > .service-link .bg-link:hover {background-image: url('../images/icon-red/home-nav-storeapp.png');}
/*sign in*/
section.section-sign { padding: 0 0 100px 0; width: 100%; height: auto; float: left;}
section.section-sign h1 { font-size: 3.2em; color:#323232; padding: 66px 0 0 0; margin: 0 auto 48px; text-align: center;}
section.section-sign h2.title{font-size: 16px;line-height: 100%;margin: 0 0 20px;font-weight: normal; text-align: left; color: #646464;}
section.section-sign .box-sns { float: left;}
section.section-sign .box-signin {float: right; /*padding-left: 69px;*/}
section.section-sign .btn.btn-signin { width: 100%; border-radius: 0; box-shadow: none; font-size: 16px; margin-bottom: 20px;min-width: 204px;}
section.section-sign .box-signin p, section.section-sign .box-inner p { text-align: center;}
section.section-sign .box-signin p.forgot a, section.section-sign .box-inner p a{ text-align: center; color: #323232;text-decoration: underline;}
section.section-sign .box-signin p.forgot a:hover, section.section-sign .box-inner p a:hover { color: #323232;text-decoration: none;}
section.section-sign .box-inner { width: 360px; margin: 0 auto;}
section.section-sign .box-inner p { text-align: center;}
section.section-sign .box-sns .box-sns-inner{ position: relative; padding-right: 69px; border-right: 1px solid #dcdcdc;}
section.section-sign .box-sns .box-sign .box-signin .btn-sign .btn{ min-width: 276px;}
section.section-sign .box-sign .input-text:first-child{ margin-top: 0;}
section.section-sign .box-sign .input-text:hover { border-color: red;}
section.section-sign .box-sign .input-text {
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #dcdcdc;
height: 40px;
line-height: 40px;
margin-top: 20px;
padding: 0 14px;
font-size: 16px;
font-size: 1.23077rem;
-moz-transition: border-color 0.2s ease-in-out;
-o-transition: border-color 0.2s ease-in-out;
-webkit-transition: border-color 0.2s ease-in-out;
transition: border-color 0.2s ease-in-out;
}
section.section-sign .input-text {
-moz-appearance: none;
-webkit-appearance: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border: 1px solid #dcdcdc;
height: 44px;
font-size: 14px;
color: #646464;
width: 100%;
padding: 0 14px;
font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
box-shadow: none;
margin-bottom: 20px;
}
.box-sign .input-text, .box-contact .input-text {
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #dcdcdc;
height: 40px;
line-height: 40px;
margin-top: 20px;
padding: 0 14px;
font-size: 16px;
font-size: 1.23077rem;
-moz-transition: border-color 0.2s ease-in-out;
-o-transition: border-color 0.2s ease-in-out;
-webkit-transition: border-color 0.2s ease-in-out;
transition: border-color 0.2s ease-in-out;
}
section.section-sign .box-sns .circle{
display: block;
color: #646464;
width: 42px;
height: 42px;
position: absolute;
background: #fff;
right: -21px;
top: 50%;
margin-top: -21px;
font-size: 14px;
border: 1px solid #dcdcdc;
text-align: center;
line-height: 38px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/*WebHosting Cart*/
/*header.header { border-bottom: 1px solid #dcdcdc;margin: 0 0 66px;}*/
header.header .header-inner { margin: 0 auto;}
header.header .header-logo {margin: 0;line-height: 1; float: left; height: 26px;position: relative; padding: 0;}
header .main-cart {padding: 0 0 100px;}
h1.main-title {
font-size: 40px;
font-weight: 400;
color: #323232;
margin: 0 0 72px 0;
line-height: 100%;
}
/*step*/
.text-right { text-align: right; height: auto;}
.nav-step {
list-style: none;
position: absolute;
right: -25px;
top: -4px;
margin: 0;
padding: 0;
}
.nav-step-item::before {content: "";display: block;position: absolute;width: 100%;height: 1px;top: 17px;left: 50%;background-color: #dcdcdc;}
.nav-step-item-end::before {content: "";display: block;position: absolute;width: 100%;height: 1px;top: 17px;left: 50%;}
.nav-step-item.is-active { color: #d62825;}
.nav-step-item, .nav-step-item-end {
float: left;
width: 86px;
text-align: center;
position: relative;
}
.is-active .nav-step-item-num { border-color: #d62825;}
.nav-step-item-num {
display: block;
width: 34px;
height: 34px;
line-height: 34px;
font-size: 16px;
/* -moz-border-radius: 50%;
-webkit-border-radius: 50%;*/
border-radius: 50%;
border-width: 1px;
border-style: solid;
border-color: #dcdcdc;
margin: 0 auto 10px;
background-color: #fff;
position: relative;
}
.border-dot {
border-bottom: 1px dashed #dcdcdc; margin-bottom: 20px;
font-size: 16px;
/*font-size: 1.23077rem;*/
padding: 14px 0;
color: #323232;
margin-right: 20px;
}
.type { padding: 14px 0;}
.service-domain p {color: #323232; font-size: 12px; text-align: left; margin: 5px 0; padding-left: 15px;}
.service-domain .option p {font-size: 14px;color: #646464; margin: 15px 0 20px 33px;}
.service-domain .option .plan-list-item-label-name {
font-size: 26px;
padding-right: 20px;
margin-top: -4px;
white-space: nowrap;
}
.service-domain p span { color: green; margin-left: 10px;}
.service-domain p .fa-check {color: green;}
.plan-list-item-label-name {font-size: 32px;padding-right: 44px;margin-top: -4px;white-space: nowrap;}
.plan-list-item-label-caption {font-size: 32px;/*padding-right: 44px;*/margin-top: -4px;white-space: nowrap; color: #d62825; font-weight:bold;}
.plan-list-item-label-caption span { font-size: 16px; color:#646464; font-weight:normal;}
.service-domain ul.detail {display: inline-block; margin: 30px 0 50px 0; font-size: 12px;padding: 0 0 0 40px}
.service-domain ul.detail li { margin:0; float: left; width: 200px; height: 28px;}
.plan-list-item-ribon {
line-height: 24px;
margin-bottom: 10px;
padding-left: 53px;
}
.plan-list-item-ribon span {
display: inline-block;
height: 24px;
line-height: 24px;
background-color: #d62825;
position: relative;
padding: 0 12px;
font-size: 13px;
color: #fff;
}
.plan-list-item-ribon span::after {
content: "";
display: block;
position: absolute;
position: absolute;
right: 0;
top: 0;
height: 24px;
margin-right: -12px;
border-top: 12px solid #d62825;
border-right: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #d62825;
}
.chosen-container {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 16px;
font-size: 1.23077rem;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
zoom: 1;
*display: inline;
}
.form-area-section-table .chosen-container-single .chosen-single {
height: 40px;
line-height: 38px;
}
.chosen-container-single .chosen-single {
position: relative;
display: block;
overflow: hidden;
padding: 0 0 0 8px;
color: #646464;
width: 100%;
height: 44px;
border-width: 1px;
border-style: solid;
border-color: #dcdcdc;
background-color: #fff;
background-clip: padding-box;
text-decoration: none;
white-space: nowrap;
line-height: 33px;
padding: 6px 12px;
-moz-transition: border-color 0.2s ease-in-out;
-o-transition: border-color 0.2s ease-in-out;
-webkit-transition: border-color 0.2s ease-in-out;
transition: border-color 0.2s ease-in-out;
}
.chosen-container a {
cursor: pointer;
}
.chosen-container-single .chosen-single span {
display: block;
overflow: hidden;
margin-right: 26px;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
color: #777;
}
.chosen-container-single .chosen-single div {
position: absolute;
top: 0;
right: 0;
display: block;
width: 56px;
height: 100%;
padding: 2px;
}
.form-area-section-table .chosen-container-single .chosen-single div b {
background-position: 0 20px;
}
.chosen-container-single .chosen-single div b {
display: block;
width: 100%;
height: 100%;
background: #d62825 url('../images/icon-arrowDown.png')no-repeat 15px;
}
.icon--c_storage-red {background: url('../images/icon-red/icon-red-ssd.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_scale1-red {background: url('../images/icon-red/icon-red-scale.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_email-red {background: url('../images/icon-red/icon-red-email.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_server-red{background: url('../images/icon-red/icon-red-server.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.checkbox-replace {
margin: -10px 10px 0 0;
width: 30px;
height: 30px;
border-width: 1px;
border-style: solid;
border-color: #dcdcdc;
display: inline-block;
vertical-align: middle;
cursor: pointer;
outline: none;
position: relative;
-moz-transition: border-color 0.2s ease-in-out;
-o-transition: border-color 0.2s ease-in-out;
-webkit-transition: border-color 0.2s ease-in-out;
transition: border-color 0.2s ease-in-out;
-moz-box-shadow: rgba(0,0,0,0.2) 2px 2px 5px;
-webkit-box-shadow: rgba(0,0,0,0.2) 2px 2px 5px;
box-shadow: rgba(0,0,0,0.2) 2px 2px 5px;
}
.checkbox-replace:hover {
border-color: #323232;
}
.checkbox-replace::after {
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
content: "";
display: block;
position: absolute;
width: 1px;
height: 1px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
background-color: #d62825;
left: 50%;
top: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.service-domain {font-size: 16px; padding: 14px 0;color: #323232;}
.service-domain ul li { padding: 0;margin: 0 0 20px 0;}
label.radio-replace {
/*position: absolute;
left: 0;*/
top: -4px;
margin: 0 10px 0 0;
width: 36px;
height: 36px;
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: #bababa;
vertical-align: middle;
margin-top: -4px;
cursor: pointer;
background-color: #fff;
position: relative;
outline: none;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: rgba(0,0,0,0.75) 0px 5px 13px -6px;
-webkit-box-shadow: rgba(0,0,0,0.75) 0px 5px 13px -6px;
box-shadow: rgba(0,0,0,0.75) 0px 5px 13px -6px;
-moz-transition: border-color 0.2s ease-in-out;
-o-transition: border-color 0.2s ease-in-out;
-webkit-transition: border-color 0.2s ease-in-out;
transition: border-color 0.2s ease-in-out;
}
label.radio-replace:hover {
border-color: #323232;
}
label.radio-replace::after {
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
content: "";
display: block;
position: absolute;
width: 1px;
height: 1px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
background-color: #d62825;
left: 50%;
top: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.form-control {
height: 44px;
font-size: 14px;
color: #dcdcdc;
font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
border-radius: 0;
border: 1px solid #dcdcdc;
box-shadow: none;
}
.service-domain .btn-code {
padding: 9px 12px;
font-size: 12px;
font-size: 1.8rem;
border-radius: 0;
font-family: "Tahoma", Arial, sans-serif;
text-align: center;
background:#d62825;
line-height: 1.42857143;
box-shadow: none;
margin-left: 10px;
box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
/*right*/
.cart.is-fixed {
position: fixed;
/*left: 50%;*/
left: auto !important;
right: 18%;
/*right: 0;*/
top: 32px;
}
.cart {
float: right;
}
.cart-title {
background-color: #323232;
color: #fff;
font-size: 16px;
/* font-size: 1.23077rem;*/
text-align: center;
font-weight: 400;
line-height: 1;
padding: 20px 0;
margin: 0;
}
.cart-inner {
background-color: #f5f5f5;
padding: 14px 14px 24px;
}
.cart-section {
margin: 0 0 20px;
}
.cart-section-title {
font-size: 13px;
/*font-size: 1rem;*/
margin: 0 0 10px;
padding: 4px 10px 10px;
font-weight: 400;
color: #323232;
line-height: 1;
border-bottom: 1px solid #dcdcdc;
}
.cart-section-list {
margin: 0;
padding: 0 10px;
*zoom: 1;
color: #646464;
}
.cart-total-list.is-total {
border: 1px solid #dcdcdc;
color: #323232;
padding: 10px;
}
.cart-section-list-label, .cart-section-list-label span, .cart-total-list-label, .cart-total-list-label span{ font-weight: normal;}
.cart-section-list-price, .cart-section-list-price, .cart-total-list-price { text-align: right;}
.cart-section-list-price span, .cart-section-list-price span, .cart-total-list-price span {font-weight: bold; font-size: 20px; color: #d62825;}
/*left*/
.content-left {
float: left;
padding: 0;
}
.box-bottom { margin-bottom: 50px;}
/*.content-left .border-right { border-right: 1px #dcdcdc solid; padding: 0;}*/
.sign-item--in {
border-left: 1px solid #dcdcdc;
}
.content-left .signin-right { padding: 0 0 0 20px;}
.sign-item {
width: 100%;
float: left;
padding: 0 20px;
}
.sign-item--up { padding-left: 0;}
.sign-item .margin-top {margin-top: 30px;}
.sign-item .form-control {
height: 44px;
font-size: 14px;
color: #dcdcdc;
font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
border-radius: 0;
border: 1px solid #dcdcdc;
box-shadow: none;
margin: 20px 0;
}
.sign-item h2 { font-size: 1.8em; color: #646464; padding: 0 0 5px 0; margin: 0 0 5px 0;}
.sign-item p { font-size: 14px; padding: 0; margin-bottom: 10px;color: #646464;}
.sign-item p.forgot a{ text-align: center; color: #323232;text-decoration: underline; }
.sign-item p.forgot a:hover{ color: #323232;text-decoration: none;}
.form-area-section-title {
border-bottom: 1px solid #dcdcdc;
font-size: 16px;
/*font-size: 1.23077rem;*/
margin: 0 0 20px;
font-weight: 600;
line-height: 1;
padding-bottom: 16px;
}
.form-horizontal .control-label.left {
padding: 15px 0;
margin-bottom: 0;
text-align:left;
}
.form-horizontal textarea.form-control {
height: auto;
font-size: 14px;
color: #777;
font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
border-radius: 0;
border: 1px solid #dcdcdc;
box-shadow: none;
}
.form-horizontal .form-group {
border-bottom: 1px dashed #dcdcdc; padding: 5px 0 10px 0; margin: 10px 0;
}
/*facebook*/
section.section-sign .box-sns ul.list-signin .fa.fa-facebook.fa-stack-1x {float: left; text-align: left;font-size: 1.2em;padding: 0 20px;}
section.section-sign .box-sns ul.list-signin li.facebook a{background: #4774ba;margin-bottom: 12px;}
section.section-sign .box-sns ul.list-signin li.facebook a:hover{background: #315285;}
section.section-sign .box-sns ul.list-signin li a{
display: block;
padding: 14px 20px 14px 43px;
line-height: 100%;
color: #fff;
font-size: 16px;
background-repeat: no-repeat;
text-decoration: none;
text-align: center;}
/*github*/
section.section-sign .box-sns ul.list-signin .fa.fa-github.fa-stack-1x {float: left; text-align: left;font-size: 1.2em;padding: 0 20px;}
section.section-sign .box-sns ul.list-signin li.github a{background: #474646;margin-bottom: 12px;}
section.section-sign .box-sns ul.list-signin li.github a:hover{background: #2c2c2c;}
/*twitter*/
section.section-sign .box-sns ul.list-signin .fa.fa-twitter.fa-stack-1x {float: left; text-align: left;font-size: 1.2em;padding: 0 20px;}
section.section-sign .box-sns ul.list-signin li.twitter a{background: #3facd5;margin-bottom: 12px;}
section.section-sign .box-sns ul.list-signin li.twitter a:hover{background: #2f85a5;}
/*google-plus*/
section.section-sign .box-sns ul.list-signin .fa.fa-google-plus.fa-stack-1x {float: left; text-align: left;font-size: 1.2em;padding: 0 20px;}
section.section-sign .box-sns ul.list-signin li.google-plus a{background: #df4930;margin-bottom: 12px;}
section.section-sign .box-sns ul.list-signin li.google-plus a:hover{background: #b63b27;}
/*linkedin*/
section.section-sign .box-sns ul.list-signin .fa.fa-linkedin.fa-stack-1x {float: left; text-align: left;font-size: 1.2em;padding: 0 20px;}
section.section-sign .box-sns ul.list-signin li.linkedin a{background: #498bad;margin-bottom: 12px;}
section.section-sign .box-sns ul.list-signin li.linkedin a:hover{background: #376881;}
section.top-main-visual.share-host { background:#646464 url('../images/bg-header-sharehost.jpg')center top no-repeat;}
/*section.top-main-visual img { width: 100% !important ; }*/
section.top-main-visual.share-host .box-content { width: auto;height: 530px; padding: 60px 0;}
section.top-main-visual.share-host .box-content .left-content { text-align: left;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.share-host .box-content .left-content h1 { font-size: 3.5em; color:#d62825; padding: 30px 0 0 0; margin: 5px 0 20px 0;}
section.top-main-visual.share-host .box-content .left-content h2 { font-size: 4em; color:#fff; padding: 0; font-weight: bold;margin: 20px 0 10px 0;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.share-host .box-content .left-content h2 span { font-size: 0.3em;font-weight:normal;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.share-host .box-content .left-content .top-selection-btn {
float: left;
padding: 20px 35px;
font-size: 19px;
margin-top: 15px;
border-radius: 0;
font-family: "Tahoma", Arial, sans-serif;
text-align: center;
background:#fab000;
font-weight: normal;
color: #323232;
}
section.top-main-visual.share-host .box-content .left-content .btn:hover, section.top-main-visual.share-host .box-content .left-content .btn:focus {
background-color: #cc9000;
color: #646464;
text-decoration: none;
}
section.top-main-visual.share-host .box-content .left-content .icon--thin-arrow{background: url('../images/icon-arrow-color.png')right no-repeat; width: 20px;height: 20px;right: 15px; bottom: 20px; position: absolute;}
section.top-main-visual.share-host .box-content .left-content ul { list-style: none; padding: 10px 0;}
section.top-main-visual.share-host .box-content .left-content ul li { background: url('../images/icon-check.png')left top no-repeat;display: inline-block;margin: 5px 0; padding: 0 0 0 30px; font-size: 1.5em; font-weight: normal; float: left; width: 100%;}
section.top-main-visual.share-host .box-content .left-content ul li span { color:#fab000;}
/*.top-main-visual.top-cloud .video-img-responsive { width: 50px; height: 50px;}*/
section.top-main-visual.top-cloud {background:#d62825; height:auto; max-height: 530px; }
section.top-main-visual.top-cloud h1{ font-size: 2.8em; color: #fff; text-align: center;padding:0;margin:40px 0 10px 0;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.top-cloud h1 span, section.top-main-visual.top-ssl h1 span {color: #d62825;}
section.top-main-visual.top-cloud.email { height:530px; max-height: 530px;background: #2c2c2c url('../images/banner-header-email-bg.png')left top no-repeat; padding: 80px 0}
section.top-main-visual.top-cloud.email ul {list-style: none; display: inline-block; float: left;padding: 35px 0 10px 0; text-align: left;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.top-cloud.email ul li { margin: 15px 0;font-size: 1.8em; font-weight: 400;background:url('../images/icon-check.png')left top no-repeat; padding-left: 35px;}
section.top-main-visual.top-cloud.email ul li span { color: #fab000;}
section.top-main-visual.top-cloud .top-header-text h1 { font-size: 3.5em; color: #fff; text-align: left;padding:0 0 0 30px;margin:80px 0 10px 0;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.top-cloud .top-header-text h1 span { font-weight: bold;}
section.top-main-visual.top-cloud .top-header-text h2 { font-size: 3.2em;font-weight: bold; color: #fff; text-align: left;padding:0 0 0 30px;margin:10px 0 20px 0;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.top-cloud .top-header-text h2 span {font-size: 0.5em; font-weight: normal;}
section.top-main-visual.top-cloud .top-header-text ul {list-style: none; display: inline-block; padding: 10px 0 10px 30px; text-align: left;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.top-cloud .top-header-text ul li { margin: 10px 0;font-size: 14px;}
section.top-main-visual.top-cloud .top-header-text ul li span { color: #fab000;}
/*ssl*/
/*section.top-main-visual.top-ssl {background:#323232; height:530px; max-height: 530px; }*/
section.top-main-visual.top-ssl h1 { font-size: 2.8em; color: #fff; text-align: left;padding:0;margin:40px 0 10px 140px;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.top-ssl { height:530px; max-height: 530px;background: #323232 url('../images/bg-header-ssl.png')left top no-repeat; padding: 30px 0;width: 100%;}
section.top-main-visual.top-ssl ul {list-style: none; display: inline-block; float: left;padding: 35px 0 10px 0; text-align: left;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.top-ssl ul li { margin: 15px 0;font-size: 1.8em; font-weight: 400;background:url('../images/icon-check.png')left top no-repeat; padding-left: 35px;}
section.top-main-visual.top-ssl ul li span { color: #fab000;}
section.top-shared-feature .box-plan-ssl { background: #d62825; height: auto;padding: 10px; text-align: center;border-radius: 2px; width: 50%; margin: 25px auto;}
section.top-shared-feature .items-ssl { margin:20px 0;border-top: 1px solid #dcdcdc; padding: 20px 0;border-bottom: 1px solid #dcdcdc;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .items-ssl p { font-size: 14px; color: #646464; text-align: center; line-height: 22px;}
section.top-shared-feature .items-ssl h4 { color: #323232; font-weight: bold; font-size: 16px; margin: 5px 0 10px 0; padding: 0; text-align: center;}
.fa.fa-locked {background: url('../images/locked-padlock.png')center top no-repeat; width: 16px; height: 16px; margin-bottom: -1.5px;}
.fa.fa-star{ font-size: 1.3em; color: #323232;}
.fa.fa-star.color {color:#ffcc00;}
/*wordpress*/
section.top-main-visual.top-wordpress {background:#d62825 url('../images/bg-header-wordpress.png')left top no-repeat; height:530px; max-height: 530px; padding: 50px 0}
section.top-main-visual.top-wordpress h1{ font-size: 2.8em; color: #fff; text-align: left;padding:0;margin:40px 0 10px 0;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.top-wordpress ul {list-style: none; display: inline-block; float: left;padding: 20px 0 10px 0; text-align: left;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.top-wordpress ul li { margin: 15px 0;font-size: 1.8em; font-weight: 400;background:url('../images/icon-check-white.png')left top no-repeat; padding-left: 35px;}
section.top-main-visual.top-wordpress ul li span { color: #fab000;}
.table.price thead tr th.is-first-ssl{ width: 50%;background-color:transparent;color: #fff; font-size: 20px;padding: 20px; font-weight: normal;text-align: center;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
.table.price thead tr th.is-first-ssl h1{color: #fff; font-size: 1.5em;padding:5px 0;margin: 0;font-weight: normal;text-align: center;}
.table.price thead tr th.is-first-ssl p{font-size: 14px; color: #fff;padding: 0;margin: 0;}
.table.price > tbody > tr.color-red { border-top: 3px #d62925 solid;}
.table.price > tbody > tr > td.is-first-ssl p.price { font-size: 16px; color: #323232; line-height: 1.8em;}
.table.price > tbody > tr.color-gray { border-top: 3px #323232 solid;}
.table.price > tbody > tr > td.is-first-ssl { width: 50%;padding: 20px; text-align: left; border-right: 1px #ddd solid;border-left: 1px #ddd solid;}
.table.price > tbody > tr > td.is-first-ssl h3 { color: #323232; font-size: 2em;margin-bottom: 15px;}
.table.price > tbody > tr > td.is-first-ssl h3 span { background: #d62925; padding: 5px 10px; text-align: center; color: #fff; font-size: 12px; cursor: pointer;text-decoration: none;margin-left: 6px;margin-bottom: 5px;}
.table.price > tbody > tr > td.is-first-ssl h3 span:hover{ text-decoration: none; background: #323232;}
.table.price > tbody > tr > td.is-first-ssl h4 { color: #646464; font-size: 1.8em;margin: 15px 0;}
.table.price > tbody > tr > td.is-first-ssl p{font-size: 12px; color: #646464;padding: 0;margin: 0; text-align: left; float: left;}
.table.price > tbody > tr > td.is-two-ssl p, .table.price > tbody > tr > td.is-tree-ssl p, .table.price > tbody > tr > td.is-four-ssl p{font-size: 16px; color: #323232;padding: 0;margin: 12px 0 0 0; text-align: right; float: left; line-height: 1.8em;}
.table.price > tbody > tr > td.is-two-ssl p span, .table.price > tbody > tr > td.is-tree-ssl p span, .table.price > tbody > tr > td.is-four-ssl p span { font-size: 12px;}
.table.price > tbody > tr > td.is-two-ssl p span.red, .table.price > tbody > tr > td.is-tree-ssl p span.red, .table.price > tbody > tr > td.is-four-ssl p span.red { color: #d62825; font-size: 14px;}
.fa.fa-search-ssl {background: url('../images/magnifier-tool.png')center no-repeat; width: 16px; height: 16px;}
.table.price thead tr th.is-option-ssl{ width: 100%;background:#323232;color: #fff; font-size: 22px;padding: 20px; font-weight: normal;text-align: left;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
.table.price thead tr th.is-two-ssl{background: #d62925; width: 16.66%;color: #fff; font-size: 20px;padding: 20px 5px; font-weight: normal;text-align: center;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
.table.price thead tr th.is-two-ssl h1{color: #fff; font-size: 1.5em;padding:5px 0;margin: 0;font-weight: bold;text-align: center;}
.table.price thead tr th.is-two-ssl p{font-size: 14px; color: #fff;padding: 0;margin: 0;}
.fa.fa-times-circle.red { font-size: 2.5em; color: #d62825;}
.fa.fa-check-circle-o.green { font-size: 2.5em; color: #1d9900;}
/*.table.price > tbody > tr > td { width: 16.66%;}*/
.table.price > tbody > tr > td.is-two-ssl, .table.price > tbody > tr > td.is-tree-ssl, .table.price > tbody > tr > td.is-four-ssl{width: 16.66%;font-size: 16px; color: #646464;padding: 20px;margin: 0; text-align: center;border-right: 1px #ddd solid;}
.table.price thead tr th.is-tree-ssl{background: #c6211d; width: 16.66%;color: #fff; font-size: 20px;padding: 20px 5px; font-weight: normal;text-align: center;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
.table.price thead tr th.is-tree-ssl h1{color: #fff; font-size: 1.5em;padding:5px 0;margin: 0;font-weight:bold;text-align: center;}
.table.price thead tr th.is-tree-ssl p{font-size: 14px; color: #fff;padding: 0;margin: 0;}
.table.price thead tr th.is-four-ssl{background: #323232; width: 16.66%;color: #fff; font-size: 20px;padding: 20px 5px; font-weight: normal;text-align: center;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
.table.price thead tr th.is-four-ssl h1{color: #fff; font-size: 1.5em;padding:5px 0;margin: 0;font-weight: bold;text-align: center;}
.table.price thead tr th.is-four-ssl p{font-size: 14px; color: #fff;padding: 0;margin: 0;}
section.top-main-visual.top-domain {position: relative; background: url('../images/bg-header-domain.gif')center top repeat; height:auto;}
section.top-main-visual.top-domain .container.domain { padding: 60px 0;background: url('../images/bg_search_arrow.png')right bottom no-repeat;}
section.top-main-visual.top-domain h1 { font-size: 3.5em; color: #323232; text-align: center;padding:0;margin:20px 0 10px 0;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-main-visual.top-domain h1 span { color: #d62825; font-weight: bold;}
section.top-main-visual.top-domain p { color: #646464; font-size: 2em; margin: 0 0 60px 0; padding: 0;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
#multi-domain-search {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
visibility: hidden;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
#multi-domain-search.active {
opacity: 1;
visibility: visible;
}
#multi-domain-search:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: #323232;
opacity: 0.84;
}
#multi-domain-search .container {
position: relative;
padding: 15px 100px;
height: 100%;
}
#multi-domain-search .multi-domain-search-header {
width: 100%;
text-align: left;
color: #fff;
}
#multi-domain-search .multi-domain-search-header h3 {
margin-top: 20px;
margin-bottom: 20px;
}
#multi-domain-search .multi-domain-search-body {
position: relative;
}
#multi-domain-search .multi-domain-search-body .multi-search-input-placeholder {
position: absolute;
width: 100%;
height: 200px;
text-align: left;
color: #bebebe;
padding: 20px;
font-size: 16px;
line-height: 27px;
overflow: hidden;
z-index: -1;
background-color: #fff;
}
#multi-domain-search .multi-domain-search-body textarea[name="multi-search-input"] {
width: 100%;
height: 200px;
padding: 20px;
border: none;
color: #111;
outline: none;
font-size: 16px;
background: transparent;
line-height: 27px;
}
#multi-domain-search .multi-domain-search-body button[type="submit"] {
width: 160px;
height: 54px;
line-height: 54px;
margin: 0 auto;
background: #d62825;
text-align: center;
color: #fff;
border: none;
padding: 0;
margin: 0 auto;
margin-top: 8px;
font-size: 20px;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
#multi-domain-search .multi-domain-search-body button[type="submit"]:hover {
background-color: #b2211e;
}
#btn-close-multi-domain-search {
position: absolute;
top: 35px;
right: 100px;
width: 28px;
height: 28px;
line-height: 28px;
color: #fff;
background-color: #646464;
border-radius: 50%;
margin-right: -50px;
}
#owl-demo { width: 100%; height: auto; margin: 0 auto; float: left;}
#owl-demo .item{ margin: 3px;border-right:1px solid #4c4c4c;}
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
}
.owl-carousel {
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
#owl-demo .item h1 { font-size: 1.8em; padding:0; margin: 5px 0;font-weight: normal; color: #fff;}
#owl-demo .item h2 {font-size: 2em; font-weight: bold;}
#owl-demo .item h2 span { font-size: 0.4em; padding:0; margin: 5px 0; font-weight: normal;}
.owl-carousel .owl-item {
float: left;
}
.owl-item {
position: relative;
}
.customNavigation{
float: left; width: 100%;
text-align: center;
}
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.btn.prev { position: absolute;left:16%; margin-top: -50px;}
.btn.next { position: absolute;right:15%; margin-top: -50px;}
.btn.prev, .btn.next { background: transparent; box-shadow: none;}
.btn.prev:hover, .btn.prev:focus, .btn.next:hover, .btn.next:focus {
background-color:transparent;
color: #fff;
text-decoration: none;
}
.icon--thin-arrow-next{background: url('../images/bg_btn-next.png')right no-repeat; width: 20px;height: 43px;right: 15px; bottom: -10px; position: absolute;}
.btn .icon--thin-arrow-next::before {
font-size: 20px;
position: absolute;
top: 50%;
right: 10px;
margin-top: 10px;
color: #fff;
}
.icon--thin-arrow-next::before {
background: url('../images/bg_btn-next.png')right no-repeat; width: 20px;height: 43px;
}
.icon--thin-arrow-prev{background: url('../images/bg_btn-prev.png')left no-repeat; width: 20px;height: 43px;right: 15px; bottom: -10px; position: absolute;}
.btn .icon--thin-arrow-prev::before {
font-size: 20px;
position: absolute;
top: 50%;
left: 10px;
margin-top: -10px;
color: #fff;
}
.icon--thin-arrow-prev::before {
background: url('../images/bg_btn-prev.png')left no-repeat; width: 20px;height: 43px;
}
section.top-main-visual.top-domain .form-search {
position: relative;
padding: 3px;
border: 2px solid #646464;
background: #fff;
width: 80%; margin: 0 auto;
*zoom: 1;}
section.top-main-visual.top-domain .form-search .input-domain, section.top-main-visual.top-domain .form-search .input-domain {
border: 0 none;
float: left;
height: 54px;
line-height: 54px;
width: 550px;
text-indent: 17px;
font-size: 26px;
color: #646464;
background: transparent;
}
section.top-main-visual.top-domain .form-search .multi-domain-search-opener, section.top-main-visual.top-domain .form-search .multi-domain-search-opener {
position: absolute;
right: 175px;
top: 18px;
font-size: 14px;
text-decoration: underline;
color: #323232;
cursor: pointer;
}
.btn.btn-submit {
padding: 15px;
font-size: 19px;
font-size: 1.8rem;
border-radius: 0;
font-family: "Tahoma", Arial, sans-serif;
text-align: center;
background:#d62825;
margin: 0 -55px 0 0;
width: 150px;
box-shadow:none;
}
.btn.btn-submit:hover, .btn.btn-submit:focus {
background-color: #b2211e;
color: #fff;
text-decoration: none;
}
/*domain*/
section.top-content-boxred{ background:#d62825; padding: 10px 0; text-align: center;float: left;width: 100%;}
section.top-content-boxred h1 { font-size: 2em; color: #fff; text-align: center;padding:0; font-weight: bold;margin:0;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-content-boxblack{ background:#323232; padding: 20px 0; text-align: center;float: left;width: 100%; height: 106px;}
section.top-content-boxblack h2 { font-size: 1em; color: #fff; text-align: center;padding:0;margin:0;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-content-boxblack ul { list-style: none; float: left; color: #fff;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-content-boxblack ul li { padding: 5px; margin: 0 5px;border-left: 1px solid #4c4c4c;text-align: center;display: inline-block;}
section.top-content-boxblack ul li h1 { font-size: 1.8em; padding:0; margin: 5px 0;font-weight: normal;}
section.top-content-boxblack ul li h2 { font-size: 1em; padding:0; margin: 5px 0; font-weight: normal;}
section.top-content-boxblack ul li h2 span { font-size: 2.3em; font-weight: bold;}
section.top-content-boxblack ul li.first { padding: 5px 10px; margin: 0 5px;border-left:transparent; text-align: center;display: inline-block;}
section.top-shared-feature .container h1 {
margin: 0 0 25px 0;
padding: 0;
font-weight:normal;
font-size: 3.2em;
text-align: center;
color: #323232;
font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
section.top-shared-feature.is-gray .box-img-price {
text-align: center;
left: 0;
right: 0;
bottom: 0;
margin-bottom: -40px;}
.btn-next {
background-image: url('../images/bg_btn-next.png');
right: 0;
}
section.top-content-boxblack .top-tld-lists > li .top-tld-block {
border-right: 1px solid #4c4c4c;
height: 100%;
margin: 0 2px 0 0;
}
section.top-content-boxblack .top-tld.block-carousel .carousel ul li {
display: inline-block;
float: left;
height: 100% !important;
margin: 0;
padding: 24px 0;
position: relative;
width: 150px;
}
section.top-content-boxblack .block-carousel .carousel ul li {
float: left;
height: 200px;
margin: 0 16px 0 0;
width: 320px;
}
.shoppingbasket {
width: 20px; height: 20px; border-radius: 100%; text-align: center;
color: #fff;
font-size:11px;
line-height: 20px;
position: absolute;
background-color: #d62825;
display: block;
top:-5px;
right: 0;
}
/*.icon-cart {
width: 48px;
height: 48px;
position: relative;
overflow: hidden;
margin-left: 25px;
margin-bottom: 25px;
}
.icon-cart .cart-line-1 {
width: 15%;
height: 7%;
position: absolute;
left: 8%;
top: 25%;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
background-color: #000;
border-bottom-left-radius: 35%;
}*/
/*table*/
.container.box-price .box-price-content { margin-bottom: 30px;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
.container.box-price .box-price-content p { margin: 5px 10px;color:#d62825;}
.container.box-price .box-price-content p span { color:#323232;}
.container.box-price .box-price-content p span a {color:#d62825;text-decoration: none;}
.container.box-price .box-price-content p span a:hover {color:#d62825;text-decoration: none;}
.table.price {width: 100%; max-width: 100%; margin-bottom:0;}
.table.price thead tr th.is-first{ width: 100%;background-color: #323232;color: #fff; font-size: 20px;padding: 20px; font-weight: normal;text-align: center;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
.table.price > thead > tr > th, .table.price tr{padding: 20px 15px;/*vertical-align: bottom;*/border-bottom: 1px solid #ddd; font-size: 12px; margin-bottom: 8px;}
.table.price tr td p { font-size:20px; color: #323232; padding: 0; margin: 0;}
.table.price tr td p span { font-size: 13px;}
.table.price tr td { text-align: center;}
table.table.price tr td { background: transparent; }
table.table.price tr.color{background: #fbfbfb;}
table.table.price tr.color:hover { background: #f5f5f5; }
table.table.price tr td.normal {width: 15%;text-align: left; font-size: 20px; padding-left: 15px;}
table.table.price tr td.text-left {text-align: left;padding-left: 15px;}
table.table.price tr td.text-left span {color:#d62825;}
.table.price > tbody > tr > td, .table.price > tfoot > tr > td {
padding: 8px;
line-height: 1.42857143;
border-top: 1px solid #ddd;width: 30%;
}
/*.table tr td:first-child, .table tr th:first-child {
text-align: center;
padding: 15px 10px 15px 30px;
}
.section-tlds thead th {
width: 152px;
}
.table thead th, .table thead .blank {
background-color: #323232;
color: #fff;
}*/
section.top-main-visual img { text-align: center; margin: 0 auto; }
/*.banner*/
/*contact*/
section.top-shared-feature.contact .box-border { border: 1px #dcdcdc solid; padding: 35px 25px; margin: 5px -5px; text-align: center;height: 400px;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.contact .box-border h1 {font-size: 1.3em; color: #323232; margin: 30px 0;padding: 0;line-height:1.6em;}
section.top-shared-feature.contact .box-border p {margin: 0; padding: 0; color: #646464; font-size: 1em; line-height:1.8em;}
section.top-shared-feature.contact .box-border p a { color: #d62825;}
section.top-shared-feature.contact .box-border p a:hover { color: #d62825;}
section.top-shared-feature.contact .box-border p span { color:#d62825;}
form.form-horizontal .control-label { padding-top: 15px;font-size: 14px;font-weight: normal;color: #323232;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
form.form-horizontal .form-control { height: 44px;font-size: 14px; color: #dcdcdc;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; border-radius: 0; border: 1px solid #dcdcdc;box-shadow:none;}
form.form-horizontal textarea.form-control { height: auto;font-size: 14px; color: #777;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; border-radius: 0; border: 1px solid #dcdcdc;box-shadow:none;}
form.form-horizontal { margin: 45px 0;}
.btn-code {
padding: 9px 12px;
font-size: 12px;
font-size: 1.8rem;
border-radius: 0;
font-family: "Tahoma", Arial, sans-serif;
text-align: center;
background:#d62825;
line-height: 1.42857143;
box-shadow: none;
}
.btn-submit {
padding: 9px 12px;
font-size: 12px;
font-size: 1.8rem;
border-radius: 0;
font-family: "Tahoma", Arial, sans-serif;
text-align: center;
background:#d62825;
line-height: 1.42857143;
box-shadow: none;
}
/*content*/
section.top-shared-feature { width: 100%;height: auto;/*float: left;*/margin: 0;padding: 40px 0;}
section.top-shared-feature h1 { margin: 0 0 25px 0;padding:0;font-weight: 800;font-size: 3.2em; text-align: center; color: #323232; font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature h1 span {color: #d62825;}
section.top-shared-feature p.left{text-align: left; color: #646464; font-size: 1.3em;font-family: 'DB_Heavent_Light' !important;font-weight: 200; line-height: 1.8em; margin: 10px 0;}
section.top-shared-feature .plan-s { background:#f5f5f5; margin-top: 65px;border-bottom: 1px solid #dcdcdc;border-left: 1px solid #dcdcdc;border-top: 4px solid #323232;padding: 32px;color: #323232;z-index:9; margin-right: 15px;}
section.top-shared-feature .plan-s h1 { text-align: center;margin-bottom: 35px;font-size: 2.2em;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-s h2 {text-align: center;font-size: 3.2em;margin:0 auto;color:#d62825; font-weight: bold;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-s h2 span { font-size: 0.3em;font-weight:normal;font-family:"Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-s h3 {text-align: center;font-size: 2em;color:#323232; font-weight: bold;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-s h3 span { font-size: 0.5em;color:#323232;font-weight:normal;font-family:"Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-s p.content-header {font-size: 14px; height: 90px;text-align: center;color: #646464;padding: 30px 15px;font-family:"Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-s .domain, section.top-shared-feature .plan-s .ssd, section.top-shared-feature .plan-s .page, section.top-shared-feature .plan-s .mail {
margin: 10px 0 0 0;
text-align: left;
font-size: 15px;
clear: fix;
padding-left:0;
position: relative;
color: #646464;
line-height: 1.4;
font-family: "Tahoma","proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
section.top-shared-feature .plan-s .domain span, section.top-shared-feature .plan-s .ssd span, section.top-shared-feature .plan-s .page span, section.top-shared-feature .plan-s .mail span { color: #d62825}
section.top-shared-feature .plan-m { background:#fff;border: 1px solid #dcdcdc;border-top:transparent;padding: 32px 32px 60px 32px;color: #323232;box-shadow: 0px 0px 45px rgba(0,0,0,0.2); z-index: 999;}
section.top-shared-feature .plan-m .box-top-ssl { background:#d62825;border: 1px solid #d62825;border-top:transparent;height: 4px;margin: -32px -32px 50px -32px;}
section.top-shared-feature .plan-m .box-top { background:#d62825; text-align: center; color: #fff; font-size: 16px;margin: -32px;padding: 10px 0;font-family:"Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-m h1 {text-align: center;margin-top: 95px;margin-bottom: 35px;font-size: 2.2em;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-m h2 {text-align: center;font-size: 3.2em;margin:0 auto;color:#d62825; font-weight: bold;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-m h2 span { font-size: 0.3em;font-weight:normal;font-family:"Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-m h3 {text-align: center;font-size: 2em;color:#323232; font-weight: bold;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-m h3 span { font-size: 0.5em;color:#323232;font-weight:normal;font-family:"Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-m p.content-header {font-size: 14px; height: 90px;text-align: center; color: #646464;padding: 30px 15px;font-family:"Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .items { margin-top:20px;border-top: 1px solid #dcdcdc; padding: 20px 0;}
section.top-shared-feature .plan-m .domain, section.top-shared-feature .plan-m .ssd, section.top-shared-feature .plan-m .page, section.top-shared-feature .plan-m .mail {
margin: 10px 0 0 0;
text-align: left;
font-size: 15px;
clear: fix;
padding-left:0;
position: relative;
color: #646464;
line-height: 1.4;
font-family: "Tahoma","proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
section.top-shared-feature .plan-m .domain span, section.top-shared-feature .plan-m .ssd span, section.top-shared-feature .plan-m .page span, section.top-shared-feature .plan-m .mail span { color: #d62825}
section.top-shared-feature .plan-l { background:#f5f5f5; margin-top: 65px;border-bottom: 1px solid #dcdcdc;border-right: 1px solid #dcdcdc;border-top: 4px solid #323232;padding: 32px;color: #323232; z-index:9; margin-left: 15px;}
section.top-shared-feature .plan-l h1 { text-align: center;margin-bottom: 35px;font-size: 2.2em;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-l h2 {text-align: center;font-size: 3.2em;margin:0 auto;color:#d62825; font-weight: bold;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-l h2 span { font-size: 0.3em;font-weight:normal;font-family:"Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-l h3 {text-align: center;font-size: 2em;color:#323232; font-weight: bold;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-l h3 span { font-size: 0.5em;color:#323232;font-weight:normal;font-family:"Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-l p.content-header {font-size: 14px; height: 90px;text-align: center;color: #646464;padding: 30px 15px;font-family:"Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature .plan-l .domain, section.top-shared-feature .plan-l .ssd, section.top-shared-feature .plan-l .page, section.top-shared-feature .plan-l .mail {
margin: 10px 0 0 0;
text-align: left;
font-size: 15px;
clear: fix;
padding-left:0;
position: relative;
color: #646464;
line-height: 1.4;
font-family: "Tahoma","proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
section.top-shared-feature .plan-l .domain span, section.top-shared-feature .plan-l .ssd span, section.top-shared-feature .plan-l .page span, section.top-shared-feature .plan-l .mail span { color: #d62825}
.shared-lineup-detail li .icon::before {bottom: -3px;font-size: 20px;position: relative;}
section.top-shared-feature h2 { margin: 0 0 25px 0;padding:0;font-weight: 400;font-size: 2.5em; text-align: left; color: #646464; font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature h2 span {color: #d62825;font-weight: bold;}
section.top-shared-feature .box-img{ text-align: center;left: 0; right: 0;}
section.top-shared-feature.is-gray {background: #f5f5f5;}
section.top-shared-feature.is-gray p.left{text-align: left; color: #646464; font-size: 1.3em;font-family: "Tahoma", Arial, sans-serif;font-weight: 200; line-height: 1.8em; margin: 10px 0;}
section.top-shared-feature.is-gray h2 { margin: 0 0 25px 0;padding:0;font-weight: 400;font-size: 2.5em; text-align: left; color: #646464; font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.is-gray h2 span {color: #d62825;font-weight: bold;}
section.top-shared-feature.is-gray .box-img{ text-align: center;left: 0; right: 0;}
section.top-shared-feature.is-black {background: #323232;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.is-black h2 { margin: 0 0 15px 0;padding:0;font-weight: 400;font-size: 1.8em; text-align: center; color: #fff;line-height: 1.8em; }
section.top-shared-feature.is-black h2 span {color: #fff;font-weight: bold;font-size: 2.5em;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
section.top-shared-feature.is-black p { color: #fff; text-align: center;font-size: 1.2em;}
section.top-shared-feature.is-black h3 { text-align: center; margin: 15px 0 0 0;padding:0; font-size: 1.5em;}
section.top-shared-feature.is-black h3 .fa-angle-down {margin: 0 auto; color: #d62825}
section.top-shared-feature.clients ul{ list-style: none;display: inline-block;padding: 10px 0}
section.top-shared-feature.clients img { text-align: center;}
section.top-shared-feature.clients ul li { margin: -15px 0; text-align: center; float: left;}
section.top-shared-feature.clients .content-clients { padding: 30px 0;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.clients .content-clients img { margin:-15px -15px 0 -15px; position: relative; z-index: -66;}
section.top-shared-feature.clients .content-clients .img-responsive-clients{
display: block;
width: 200%;
max-width: 200%;
height: auto;
}
section.top-shared-feature.clients .content-clients p { font-size: 13px; color:#323232; text-align: left;margin-bottom: 3px;}
section.top-shared-feature.clients .content-clients p a { color: #d62825;}
section.top-shared-feature.clients .content-clients p a:hover { color:#d62825;}
section.top-shared-feature.clients .content-clients .box-content { background:#f5f5f5;; border-radius: 3px; padding: 15px 10px; text-align: center; margin: 30px 0 20px 0; font-size: 12px;line-height: 18px; height: 105px;}
section.top-shared-feature.email-server { width: 100%;height: auto;margin: 0;padding: 40px 0;}
section.top-shared-feature.email-server .border-box { border: 1px #d9d9d9 solid; background: #fff; padding: 30px 15px; text-align: center;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
max-height: 240px; height: 240px;}
section.top-shared-feature.email-server .border-box p {font-size: 15px; color:#d62825; padding: 0; margin: 0 0 5px 0;}
section.top-shared-feature.email-server .border-box span { color: #646464;font-size: 14px;padding: 0; margin: 0;}
section.top-shared-feature.email-server .box-email-server { margin-bottom: 20px;}
/*hover grow*/
.hvr-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* Bob */
@-webkit-keyframes hvr-bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@keyframes hvr-bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@-webkit-keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
.hvr-bob {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
-webkit-animation-name: hvr-bob-float, hvr-bob;
animation-name: hvr-bob-float, hvr-bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}
/*compare*/
/*content*/
section.top-shared-feature.compare { font-size: 1em;}
section.top-shared-feature.compare h1 { margin: 0 0 15px 0;padding:0;font-weight: 800;font-size: 3.2em; text-align: center; color: #323232; font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.compare h2 { margin: 0 0 25px 0;padding:0;font-size: 2.4em; text-align: center; color: #646464; font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.compare h2 span {color: #d62825;font-weight: bold;}
section.top-shared-feature.compare h3 { text-align: center; margin: 0 auto;padding-bottom: 30px;}
section.top-shared-feature.compare h3 .fa-angle-down {margin: 0 auto; color: #d62825}
section.top-shared-feature.compare .compare-list-inner ul { padding: 0; margin: 0;}
section.top-shared-feature.compare .compare-list-inner .fa-thumbs-o-up { color: #d62825; font-size: 1.4em;}
section.top-shared-feature.compare .compare-list-inner ul li.fa-like {background: url('../images/icon-like.png')left top no-repeat;text-align: left; padding-left: 30px; line-height: 2em;font-size: 1em;}
section.top-shared-feature.compare .compare-list-inner ul li.fa-unlike {background: url('../images/icon-unlike.png')left top no-repeat; text-align: left; padding-left: 30px;line-height: 2em;font-size: 1em;}
section.top-shared-feature.compare .compare-list-inner .top-selection-btn {
padding: 20px 55px 20px 30px;
font-size: 16px;
font-size: 1.6rem;
margin-top: 15px;
border-radius: 0;
font-family: "Tahoma", Arial, sans-serif;
text-align: center;
background:#d62825;
}
section.top-shared-feature.compare .compare-list-inner .btn:hover, section.top-shared-feature.compare .compare-list-inner .btn:focus {
background-color: #b2211e;
color: #fff;
text-decoration: none;
}
section.top-shared-feature.compare .compare-list-inner {margin-bottom: 20px;border: 1px solid #dcdcdc; color:#646464;font-size: 1.3em;font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
section.top-shared-feature.compare .top-red {border-top: 8px solid #d62825;padding: 20px 45px 30px 45px;}
section.top-shared-feature.compare .top-balck {border-top: 8px solid #323232;padding: 20px 45px 30px 45px;}
section.top-shared-feature.compare .nav-private{color: #fff;font-size: 2em;line-height: 1;margin: 0 0 5px 0; padding:0; text-align: left; font-weight: 800;}
section.top-shared-feature.compare .nav-private-content { font-size: 1em; color: #fff; padding: 5px 0; margin: 0; text-align: left; font-weight: normal;}
section.top-shared-feature.compare .list-recommend {width: 100%; text-align: center; margin: 0 auto;
margin-top: 30px;
padding-top: 15px;
border-top: 1px solid #dcdcdc;
}
section.top-shared-feature.compare .plans-features-list-nav-inner {padding: 20px 25px; text-align: left; width: auto;}
section.top-shared-feature.compare .plans-features-list-nav-red {
margin-bottom: 50px;
margin-left: -66px;
width: 100%;
text-align: left;
position: relative;
background-color: #d62825;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
section.top-shared-feature.compare .plans-features-list-nav-red::after {
content: "";
display: block;
position: absolute;
border: 10px solid #b2211e;
top: 100%;
left: 0;
border-left-color: transparent;
border-bottom-color: transparent;
}
section.top-shared-feature.compare .plans-features-list-nav-black {
margin-bottom: 50px;
margin-left: -66px;
text-align: left;
position: relative;
width: 100%;
background-color: #323232;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
section.top-shared-feature.compare .plans-features-list-nav-black::after {
content: "";
display: block;
position: absolute;
border: 10px solid #222222;
top: 100%;
left: 0;
border-left-color: transparent;
border-bottom-color: transparent;
}
/*price*/
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
margin: 0 auto;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round-flat + label {
padding: 2px;
background: #fff;
border: 1px solid #dcdcdc;
width: 162px;
height: 36px;
border-radius: 0;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "\f105";
font-family: 'FontAwesome';
text-align: center;
color: #fff;
}
input.cmn-toggle-round-flat + label:before {
background-color: #fff;
border-radius: 0;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
width: 78px;
height: 30px;
line-height: 30px;
background-color: #d62825;
border-radius: 0;
transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
padding: 2px;
background: #fff;
border: 1px solid #dcdcdc;
width: 162px;
height: 36px;
border-radius: 0;
}
input.cmn-toggle-round-flat:checked + label:after {
margin-left: 78px;
background-color: #d62825;
content: "\f104";
font-family: 'FontAwesome';
text-align: center;
color: #fff;
}
section.top-shared-feature.is-gray .right { text-align: right; padding-top: 10px;}
section.top-shared-feature.is-gray .left { text-align: left; padding-top: 10px; margin-left: -30px;}
section.top-shared-feature.is-gray .right p.monthly, section.top-shared-feature.is-gray .left p.year {color: #646464;font-size: 1.3em;font-family: "Tahoma", Arial, sans-serif;font-weight: 200;}
section.top-shared-feature.is-gray .left p.year span {color: #646464;font-size: 0.8em;font-family: "Tahoma", Arial, sans-serif;font-weight: 200;margin-left: 10px;}
section.top-shared-feature.is-gray .box-header { margin-bottom: 30px;}
section.top-shared-feature.is-gray .box-price {}
section.top-shared-feature.is-gray .items { border-top:#323232 4px solid; float: left; margin: 5px 6px 15px 0; background: #fff; padding: 30px 20px; width: 234px;}
section.top-shared-feature.is-gray .items.red { border-top:#d62825 4px solid; float: left; margin: 5px 6px 15px 0; background: #fff; padding: 30px 20px; width: 234px;}
/*section.top-shared-feature.is-gray .items-end { border-top:#323232 4px solid; float: left; margin: 5px 0 15px 0; background: #fff; padding: 30px 20px; width: 234px;}*/
/*.icon {
color: transparent;
display: inline-block;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
speak: none;
text-decoration: none;
font-size: 0em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}*/
.cpu, .ssd, .transfer, .ram {
margin: 80px 0 0 0;
text-align: left;
font-size: 16px;
font-size: 1.6rem;
clear: fix;
padding-left: 30px;
position: relative;
line-height: 1.4;
font-family: "Tahoma","proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
p.cpu, p.ssd, p.transfer, p.ram, p.scale, p.email, p.server { font-size: 14px; color: #646464;}
section.top-shared-feature.is-gray .items.red p { text-align: center; padding: 0; margin: 15px 0 25px 0;}
p.ssd.email{ font-size: 20px;}
p.ssd.email span {color: #d62825;font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;}
section.top-shared-feature.is-gray .items.red p.price-month { margin-top: 10px; margin-bottom: 25px;}
section.top-shared-feature.is-gray p.content { color: #646464;font-family: "Tahoma","proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
font-size: 13px; padding: 0 15px;}
section.top-shared-feature.is-gray p.content span { color: #d62825;}
p.cpu span, p.ssd span, p.transfer span, p.ram span{color: #d62825;}
section.top-shared-feature.is-gray .items p.memory{
font-size: 20px;
font-size: 3.5rem;
color: #323232;
text-align: center;
line-height: 100%;
font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
section.top-shared-feature.is-gray .items p.price-month, section.top-shared-feature.is-gray .items p.price-year{
font-size: 40px;
text-align: center;
font-weight: bold;
color: #323232;
margin-top: 30px;
margin-bottom: 35px;
font-family:"proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
section.top-shared-feature.is-gray .items p.price-month span, section.top-shared-feature.is-gray .items p.price-year span{
font-size: 13px;
color: #323232;
font-family: "Tahoma", Arial, sans-serif;
font-weight:normal;}
.box-left .monthly { background:#d62825; padding: 5px 15px; text-align: center; color: #fff;font-family: "Tahoma", Arial, sans-serif; font-size: 16px; float: left;}
.box-left .monthly:hover{ background:#b2211e; text-decoration: none;}
.box-right .year { background:#d62825; padding: 5px 15px; text-align: center; color: #fff;font-family: "Tahoma", Arial, sans-serif; font-size: 16px; float: right;}
.box-right .year:hover{ background:#b2211e; text-decoration: none;}
.menu-price{ text-align:center; padding:3% 0 6% 0; width: 100%}
.menu-price li{ display: inline-block; margin:0 0 0 5px;color: #fff;font-family: "Tahoma", Arial, sans-serif; font-size: 16px;}
.menu-price li a{ color:#515f67; text-transform:uppercase; padding:10px 15px;border:#dcdcdc 2px solid;}
.menu-price li a:hover{ color: #fff; text-decoration: none;border:#d62825 2px solid;background:#d62825}
.menu-price li.active a, .menu-price li.active a:hover { color: #fff;font-family: "Tahoma", Arial, sans-serif; font-size: 16px; text-transform:uppercase; border:#d62825 2px solid;padding:10px 15px;text-decoration: none; background:#d62825}
/*.icon--c_cpu {background: url('../images/icon-cpu.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_storage {background: url('../images/icon-storage.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_restoration {background: url('../images/icon-restoration.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_ram {background: url('../images/icon-ram.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_original_domain {background: url('../images/icon-original_domain.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_page {background: url('../images/icon-page.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_email {background: url('../images/icon-email.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}*/
.icon--c_storage-gray {background: url('../images/icon-storage-gray.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_original_domain-gray {background: url('../images/icon-original_domain-gray.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_page-gray {background: url('../images/icon-page-gray.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_email-gray {background: url('../images/icon-email-gray.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
/*a.btn {
display: inline-block;
color: #fff;
}*/
/*btn cloud*/
.cloud-selection-btn {
padding: 15px 20px;
font-size: 14px;
font-size: 1.8rem;
margin-top: 15px;
border-radius: 0;
font-family: "Tahoma", Arial, sans-serif;
text-align: center;
background:#fff;
color: #d62825;
border: 2px #d62825 solid;
}
.cloud-selection-btn.btn a.btn { color: #d62825 !important;}
.cloud-selection-btn.btn:hover, .cloud-selection-btn.btn:focus {
background-color: #d62825;
color: #fff;
text-decoration: none;
}
.cloud-selection-btn.btn .cloud-selection-btn .icon--thin-arrow::before {
font-size: 14px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -10px;
color: #fff;
}
section.header .header-inner .header-right .header-login ul li .box-red{
border: 1px #d62825 solid; padding: 4px 20px; text-align: center; line-height: 24px;
-moz-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
border-radius: 0;
}
section.header .header-inner .header-right .header-login ul li .box-red a { background: #d62825; color: #fff; text-decoration: none;}
section.header .header-inner .header-right .header-login ul li .box-red:hover { background:#d62825;cursor: pointer;-moz-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out; color: #fff; text-decoration: none;}
/*.*/
.top-selection-btn {
padding: 20px 75px;
font-size: 19px;
font-size: 1.8rem;
margin-top: 15px;
border-radius: 0;
font-family: "Tahoma", Arial, sans-serif;
text-align: center;
background:#d62825;
}
.btn:hover, .btn:focus {
background-color: #b2211e;
color: #fff;
text-decoration: none;
}
/*.icon--thin-arrow{background: url('../images/icon-arrow.png')right no-repeat; width: 20px;height: 20px;right: 15px; bottom: 20px; position: absolute;}*/
.btn .icon--thin-arrow::before {
font-size: 20px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -10px;
color: #fff;
}
/*.icon--thin-arrow::before {
background: url('../images/icon-arrow.png')right no-repeat; width: 20px;height: 20px;
}*/
.icon::before, .icon::after {
color: #646464;
text-decoration: none;
}
/*footer*/
footer {width: 100%; height: auto;/* background: #323232;*/ /*float: left;*/}
footer.box-1st {background: #323232;}
footer.box-1st .inner { margin: 70px 0 100px 0; height: auto;}
footer.box-1st .inner .inner-left {
text-align: left;
border-right: 1px solid #404040;
padding-top: 10px;
color: #fff;
}
footer.box-1st .inner .inner-right {
text-align: left;
padding:0 0 0 60px;
padding-top: 10px;
color: #fff;
}
footer.box-1st .inner .inner-left .box-menu { margin-bottom: 42px;}
footer.box-1st .inner .inner-left .box-menu2, footer.box-1st .inner .inner-right .box-menu2 { margin-bottom: 20px;}
footer.box-1st .inner .inner-right .box-menu3 { margin-bottom: 40px;}
footer.box-1st .inner .inner-left ul, footer.box-1st .inner .inner-right ul { list-style: none;padding: 0; margin-bottom: 10px;}
footer.box-1st .inner .inner-left ul li, footer.box-1st .inner .inner-right ul li { display: inline-block; margin: 15px 0 0 0;width: 100%;}
footer.box-1st .inner .inner-left ul li a, footer.box-1st .inner .inner-right ul li a { color: #fff;}
footer.box-1st .inner .inner-left ul li a:hover, footer.box-1st .inner .inner-right ul li a:hover { color: #fff;}
footer.box-1st .inner .inner-left ul li > a.active, footer.box-1st .inner .inner-right ul li > a.active {color: #d62825;}
footer.box-1st .inner .inner-left p.labels, footer.box-1st .inner .inner-right p.labels {
margin-bottom: 13px;
font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size: 1.1em; }
footer.box-2nd {
position: relative;
border-top: 1px solid #404040;
border-bottom: 1px solid #404040;
background-color: #323232;
height: auto;
}
footer.box-2nd .list-credit {
text-align: center;
font-size: 0px;
height: auto;
left: 0;
width: 100%;
right: 0;
padding: 12px 0 0 0 ;
}
footer.box-2nd .social { padding-top: 12px;}
footer.box-2nd .list-credit li {
padding: 0 2px;
display: inline;
}
footer .map { text-align: center;}
footer.box-2nd .language {
cursor: pointer;
height: 55px;
float: right;
position: relative;
}
footer.box-2nd .language .btn-language {
display: block;
line-height: 55px;
color: #fff;
padding: 0 0 0 60px;
}
footer.box-2nd .language .btn-language .map, footer.box-2nd .language .btn-language::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 20px;
background-image: url('../images/service_footer_map.png');
background-position: 0 0;
width: 35px;
height: 19px;
}
footer .list-links {text-align: right;line-height: 100%;padding: 15px 0;}
footer .list-links li { display: inline; font-size: 11px; padding-left: 20px;}
footer .list-links li a { color: #646464;}
footer .zcom-service-footer {border-top: 1px solid #dcdcdc; height: 56px; vertical-align: baseline;}
footer .zcom-service-footer .left p{ text-align: left; color: #646464; font-size: 11px; padding-top: 20px;}
footer .zcom-service-footer .right p{ text-align: right; color: #646464; font-size: 11px; padding-top: 20px;}
footer .logo-footer { text-align: right; height: 28px; float: right; right: 0; margin-bottom: 40px;}
footer .zcom-service-footer .right { height: 56px;}
.fa-stack { margin: 0 5px;}
.fa-stack a { color:#646464;}
.fa-stack a:hover { color: #fff;}
.fa-inverse {
color: #ffffff;
}
.fa-circle::before {
content: "\f111";
}
.fa-inverse {
color: #ffffff;
}
.fa-inverse:hover {
color: #323232; cursor: pointer;
}
/*social*/
section #services {
text-align: center;
transform: translatez(0);
}
section #services li {
width: 25px;
height: 25px;
display: inline-block;
margin:5px;
list-style: none;
float: left;
}
section #services li div {
width: 25px;
height: 25px;
color: #74d4b3;
font-size: 1em;
text-align: center;
line-height: 120px;
background-color: #fff;
transition: all 0.5s ease;
border-radius: 100px;
}
section #services li div:hover {
transform: rotate(360deg);
border-radius: 100px;
background: red;
}
@import url(http://fonts.googleapis.com/css?family=Quicksand);
.menu-collapsed {
transition: all .25s;
position: relative;
top: 0;
right: 0;
height: 36px;
width: 36px;
z-index: 99999;
cursor: pointer;
float: right;
padding: 15px 0 0 15px;
}
.menu-collapsed ul {
transition: all .05s;
position: relative;
left: -9000px;
}
.bar {
position:relative;
right: 9px;
top: 0;
height: 3px;
width: 20px;
border-radius: 15px;
background-color:#d62825;
float: right;
}
.bar:before {
transition: all .25s;
content: "";
position: absolute;
right: 0;
top: -6px;
height: 3px;
width: 20px;
border-radius: 15px;
background-color: #d62825;
}
.bar:after {
transition: all .25s;
content: "";
position: absolute;
left: 0;
top: 6px;
height: 3px;
width: 20px;
border-radius: 15px;
background-color:#d62825;
}
.menu-expanded {
transition: all .25s;
text-align: left;
line-height: 2.5em;
height: 100%;
width: 100%;
border-radius: 0px;
top: 0;
left: 0;
padding: 15px 0 0 15px;
background-color: rgba(0, 0, 0, 0.85);
}
.menu-expanded ul {
transition: all .05s;
position: relative;
left: 0;
z-index: 9999;
font-size: 13px;
color: #fff;
font-family: "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
.menu-expanded a {
transition: all .15s;
text-decoration: none;
color: white;
font-size: 1em;
font-family: 'Quicksand', sans-serif;
padding: 5px;
color: #fff;
}
.menu-expanded a:hover {
color: #d62825;
transition: all .15s;
letter-spacing: 2px;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.menu-expanded .bar {
background-color: transparent;
transition: all .25s;
}
.menu-expanded .bar:before {
transition: all .25s;
content: "";
transform: rotate(45deg);
top: -0px;
}
.menu-expanded .bar:after {
transition: all .25s;
content: "";
transform: rotate(-45deg);
top: 0px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*banner free domain 2021*/
section.top-shared-feature.freedomain{
background: #000000 url(../images/banner-free-domain2020-bg.png);
background-repeat: no-repeat;
/*background-size: cover;*/
background-position: center;
overflow: hidden;
height: auto;
max-height: 259px;
padding:30px 15px;
width: 100%;
position: relative;
z-index: 9;
}
section.top-shared-feature.freedomain .boxR {
width: 50%;
float: right;
margin-right:0;
}
section.top-shared-feature.freedomain .boxR h1.th {
font-size: 40px;
font-weight: 800;
text-align: left;
line-height: 1;
color:#fff;
padding: 0;
margin:0 0 1% 0;
}
section.top-shared-feature.freedomain .boxR h1.th span {color:#d62825;font-weight: 600;}
section.top-shared-feature.freedomain .boxR h1.la {
font-size: 35px;
font-weight: 800;
text-align: left;
line-height: 1;
color:#fff;
padding: 0;
margin:0 0 1% 0;
}
section.top-shared-feature.freedomain .boxR h1.la span {color:#d62825;font-weight: 600;}
section.top-shared-feature.freedomain .boxR .bgcolor {
width: 100%;
float: left;
}
section.top-shared-feature.freedomain .boxR .bgcolor h3.th{
width: fit-content;
background:#ecde00;
padding: 10px;
color:#000;
font-size: 30px;
text-align: left;
line-height: 1;
margin:2px 0;
float: left;
}
section.top-shared-feature.freedomain .boxR .bgcolor h3.th span {font-weight: 600;color:#000;}
section.top-shared-feature.freedomain .boxR .bgcolor h3.la{
width: fit-content;
background:#ecde00;
padding: 10px;
color:#000;
font-size: 24px;
text-align: left;
line-height: 1;
margin:2px 0;
float: left;
}
section.top-shared-feature.freedomain .boxR .bgcolor h3.la span {font-weight: 600;color:#000;}
section.top-shared-feature.freedomain .boxR p.th{
color:#fff;
font-size: 28px;
text-align: left;
line-height: 1;
float: left;
width: auto;
margin-top:1%;
}
section.top-shared-feature.freedomain .boxR p.th img {
width: auto;
float: right;
margin-top: -4px;
}
section.top-shared-feature.freedomain .boxR p.la{
color:#fff;
font-size: 22px;
text-align: left;
line-height: 1;
float: left;
width: auto;
margin-top:1%;
}
section.top-shared-feature.freedomain .boxR p.la img {
width: auto;
float: right;
margin-top: -4px;
}
section.top-shared-feature.freedomain .boxR h1.th{font-weight:normal;}
@media (max-width: 1024px) {
section.top-shared-feature.freedomain .boxR p.th {font-size: 22px;}
}
/*.banner free domain 2021*/
/*menu sub*/
.cd-main-content {
background: #e2e3df;
min-height: 100vh;
z-index: 2;
}
.cd-main-header {
height: 50px;
background: #ffffff;
z-index: 3;
}
.nav-is-fixed .cd-main-header {
/* add .nav-is-fixed class to body if you want a fixed navigation on > 1170px */
position: fixed;
top: 0;
left: 0;
width: 100%;
}
@media only screen and (min-width: 1170px) {
.cd-main-header {
height: 80px;
}
.cd-main-header::after {
clear: both;
content: "";
display: table;
}
}
.cd-logo {
position: absolute;
top: 12px;
left: 5%;
}
.cd-logo img {
display: block;
}
@media only screen and (max-width: 1169px) {
.nav-on-left .cd-logo {
left: auto;
right: 5%;
}
}
@media only screen and (min-width: 1170px) {
.cd-logo {
top: 26px;
left: 4em;
}
}
.cd-header-buttons {
position: absolute;
display: inline-block;
top: 3px;
right: 5%;
}
.cd-header-buttons li {
display: inline-block;
}
@media only screen and (max-width: 1169px) {
.nav-on-left .cd-header-buttons {
right: auto;
left: 5%;
}
.nav-on-left .cd-header-buttons li {
float: right;
}
}
@media only screen and (min-width: 1170px) {
.cd-header-buttons {
top: 18px;
right: 4em;
}
}
.cd-search-trigger, .cd-nav-trigger {
position: relative;
display: block;
width: 44px;
height: 44px;
overflow: hidden;
white-space: nowrap;
/* hide text */
color: transparent;
z-index: 3;
}
.cd-search-trigger::before, .cd-search-trigger::after {
/* search icon */
content: '';
position: absolute;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-search-trigger::before {
/* lens */
top: 11px;
left: 11px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 3px solid #2e3233;
}
.cd-search-trigger::after {
/* handle */
height: 3px;
width: 8px;
background: #2e3233;
bottom: 14px;
right: 11px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-search-trigger span {
/* container for the X icon */
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.cd-search-trigger span::before, .cd-search-trigger span::after {
/* close icon */
content: '';
position: absolute;
display: inline-block;
height: 3px;
width: 22px;
top: 50%;
margin-top: -2px;
left: 50%;
margin-left: -11px;
background: #2e3233;
opacity: 0;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.cd-search-trigger span::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-search-trigger span::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cd-search-trigger.search-is-visible::before, .cd-search-trigger.search-is-visible::after {
/* hide search icon */
opacity: 0;
}
.cd-search-trigger.search-is-visible span::before, .cd-search-trigger.search-is-visible span::after {
/* show close icon */
opacity: 1;
}
.cd-search-trigger.search-is-visible span::before {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-search-trigger.search-is-visible span::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after {
/* hamburger icon in CSS */
position: absolute;
display: inline-block;
height: 3px;
width: 24px;
background: #2e3233;
}
.cd-nav-trigger span {
/* line in the center */
position: absolute;
top: 50%;
right: 10px;
margin-top: -2px;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
/* other 2 lines */
content: '';
right: 0;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: -webkit-transform 0.3s 0.3s;
-moz-transition: -moz-transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
}
.cd-nav-trigger span::before {
/* menu icon top line */
top: -6px;
}
.cd-nav-trigger span::after {
/* menu icon bottom line */
top: 6px;
}
.cd-nav-trigger.nav-is-visible span {
/* hide line in the center */
background: rgba(46, 50, 51, 0);
}
.cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after {
/* keep visible other 2 lines */
background: #2e3233;
}
.cd-nav-trigger.nav-is-visible span::before {
-webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
-moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
-ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
-o-transform: translateX(4px) translateY(-3px) rotate(45deg);
transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.cd-nav-trigger.nav-is-visible span::after {
-webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
-moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
-ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
-o-transform: translateX(4px) translateY(2px) rotate(-45deg);
transform: translateX(4px) translateY(2px) rotate(-45deg);
}
@media only screen and (min-width: 1170px) {
.cd-nav-trigger {
display: none;
}
}
/*black*/
.cd-primary-nav, .cd-primary-nav ul {
-webkit-overflow-scrolling: touch;
z-index: 1;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.cd-primary-nav a, .cd-primary-nav ul a {
display: block;
height: 36px;
line-height: 36px;
padding: 0 20px;
color: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
/*text-overflow: ellipsis;
white-space: nowrap;*/
border-bottom: 1px solid #3a3f40;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
will-change: transform, opacity;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.cd-primary-nav.is-hidden, .cd-primary-nav ul.is-hidden {
/* secondary navigations hidden by default */
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-primary-nav.moves-out > li > a, .cd-primary-nav ul.moves-out > li > a {
/* push the navigation items to the left - and lower down opacity - when secondary nav slides in */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
@media only screen and (max-width: 1169px) {
.nav-on-left .cd-primary-nav, .nav-on-left .cd-primary-nav ul {
right: auto;
left: 0;
}
}
.cd-primary-nav .see-all a {
/* different style for the See all button on mobile and tablet */
color: #69aa6f;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item, .cd-primary-nav .cd-nav-icons .cd-nav-item {
/* items with picture (or icon) and title */
height: 80px;
line-height: 80px;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item h3, .cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
overflow: hidden;
text-overflow: ellipsis;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item {
padding-left: 90px;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item img {
position: absolute;
display: block;
height: 40px;
width: auto;
left: 20px;
top: 50%;
margin-top: -20px;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item {
padding-left: 75px;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item p {
color: #2e3233;
font-size: 1.3rem;
/* hide description on small devices */
display: none;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item::before {
/* item icon */
content: '';
display: block;
position: absolute;
left: 20px;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center center;
background-size: 40px 40px;
}
@media only screen and (max-width: 1169px) {
section.nav-global { display: none;}
.cd-primary-nav {
display: none;
/* by default .cd-primary-nav is hidden - trick for iOS devices where you can see the navigation if you pull down */
visibility: hidden;
-webkit-transition: visibility 0s 0.3s;
-moz-transition: visibility 0s 0.3s;
transition: visibility 0s 0.3s;
}
.cd-primary-nav.nav-is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
}
@media only screen and (min-width: 1170px) {
.cd-primary-nav {
/*position: static;
padding: 0 150px 0 0;*/
height: auto;
width: auto;
/*float: right;*/
overflow: visible;
background: transparent;
}
.cd-primary-nav::after {
clear: both;
content: "";
display: table;
}
.cd-primary-nav.moves-out > li > a {
/* reset mobile style */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.cd-primary-nav ul {
position: static;
height: auto;
width: auto;
background: transparent;
overflow: visible;
z-index: 3;
}
.cd-primary-nav ul.is-hidden {
/* reset mobile style */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-primary-nav ul.moves-out > li > a {
/* reset mobile style */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.cd-primary-nav > li span {float: left;margin-top: -5px;}
.cd-primary-nav > li {
float: left;
font-size: 13px;
/*margin-left: 3em;*/
}
.cd-primary-nav > li.services-right{
float: right;
margin-left:0;
}
.cd-primary-nav > li > a.first {
/* main navigation buttons style */
position: relative;
display: inline-block;
/*height: 80px;
line-height: 80px;*/
padding:0 20px 0 4px;
color: #646464;
overflow: visible;
border-bottom: none;
-webkit-transition: color 0.3s, box-shadow 0.3s;
-moz-transition: color 0.3s, box-shadow 0.3s;
transition: color 0.3s, box-shadow 0.3s;
}
.cd-primary-nav > li > a {
/* main navigation buttons style */
position: relative;
display: inline-block;
/*height: 80px;
line-height: 80px;*/
padding: 0 20px;
color: #646464;
overflow: visible;
border-bottom: none;
-webkit-transition: color 0.3s, box-shadow 0.3s;
-moz-transition: color 0.3s, box-shadow 0.3s;
transition: color 0.3s, box-shadow 0.3s;
}
.cd-primary-nav > li > a:hover, .cd-primary-nav > li.active {
color: #d92629;text-decoration: none;/* background: #323232;*/
}
.cd-primary-nav > li > a.selected {
color: #fff;text-decoration: none;background-color: rgba(50,50,50,0.98);
/*box-shadow: inset 0 -2px 0 #69aa6f;*/
}
.cd-primary-nav .go-back, .cd-primary-nav .see-all {
display: none;
}
.cd-primary-nav .cd-secondary-nav, .cd-primary-nav .cd-nav-gallery, .cd-primary-nav .cd-nav-icons {
position:absolute;
background-color: rgba(50,50,50,0.98);
padding: 20px;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-primary-nav .cd-secondary-nav.left{
position:absolute;
background-color: rgba(50,50,50,0.98);
padding: 20px;
left: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-primary-nav .cd-secondary-nav::after, .cd-primary-nav .cd-nav-gallery::after, .cd-primary-nav .cd-nav-icons::after {
clear: both;
content: "";
display: table;
}
.cd-primary-nav .cd-secondary-nav.is-hidden, .cd-primary-nav .cd-nav-gallery.is-hidden, .cd-primary-nav .cd-nav-icons.is-hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-primary-nav .cd-secondary-nav > .see-all, .cd-primary-nav .cd-nav-gallery > .see-all, .cd-primary-nav .cd-nav-icons > .see-all {
/* this is the BIG See all button at the bottom of the dropdown menu */
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 80px;
width: 100%;
overflow: hidden;
/* reset some inherited style */
margin: 0;
padding: 0;
}
.cd-primary-nav .cd-secondary-nav > .see-all a, .cd-primary-nav .cd-nav-gallery > .see-all a, .cd-primary-nav .cd-nav-icons > .see-all a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-size: 2.2rem;
font-weight: bold;
text-align: center;
line-height: 80px;
border-top: 1px solid #e2e3df;
/* reset some inherited style */
border-bottom: none;
margin: 0;
padding: 0;
-webkit-transition: color 0.2s, background 0.2s, border 0.2s;
-moz-transition: color 0.2s, background 0.2s, border 0.2s;
transition: color 0.2s, background 0.2s, border 0.2s;
}
.cd-primary-nav .cd-secondary-nav > .see-all a:hover, .cd-primary-nav .cd-nav-gallery > .see-all a:hover, .cd-primary-nav .cd-nav-icons > .see-all a:hover {
background: #2e3233;
border-color: #2e3233;
color: #ffffff;
}
.cd-primary-nav .cd-secondary-nav > li {
/* change the height according to your needs - you can even set height: auto */
height:auto;
/* here you set the number of columns - use width percentage
width: 100%;*/
float: left;
margin-right: 2.66%;
/*border-right: 1px solid #e2e3df;*/
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cd-primary-nav .cd-secondary-nav > li h2 { color: #fff; font-size: 25px;}
.cd-primary-nav .cd-secondary-nav > li p { color: #e4e4e4;}
.cd-primary-nav .cd-secondary-nav > li:nth-child(4n+2) {
/* +2 because we have 2 list items with display:none */
margin-right: 0;
border-right: none;
}
.cd-primary-nav .cd-secondary-nav > li > a {
/* secondary nav title */
color: #69aa6f;
font-weight: bold;
font-size: 1.6rem;
margin-bottom: .6em;
}
.cd-secondary-nav.left .top-selection-btn { background:#d62825; color: #fff; padding:5px 10px; font-size: 14px;}
.cd-secondary-nav.left .top-selection-btn.btn:hover, .cd-secondary-nav.left .top-selection-btn.btn:focus {
background-color: #b2211e;
color: #fff;
text-decoration: none;
}
.cd-primary-nav .cd-secondary-nav a {
height: auto;
line-height: 38px;
padding: 0 18% 0 0;
color: #fff;
border-bottom: none;
font-size: 1.4rem;
}
.cd-primary-nav .cd-secondary-nav a:hover {
color: #fff;
}
.cd-primary-nav .cd-secondary-nav ul {
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.cd-primary-nav .cd-secondary-nav ul ul {
/* tertiary navigation */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cd-primary-nav .cd-secondary-nav ul ul.is-hidden {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-primary-nav .cd-secondary-nav ul ul .go-back {
display: block;
}
.cd-primary-nav .cd-secondary-nav ul ul .go-back a {
color: transparent;
}
.cd-primary-nav .cd-secondary-nav ul ul .see-all {
display: block;
}
.cd-primary-nav .cd-secondary-nav .moves-out > li > a {
/* push the navigation items to the left - and lower down opacity - when tertiary nav slides in */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
/*form*/
.header .nav-global .list-nav-global > li.sign .subs .lay-col-3 .input:first-child {
margin-top: 0;
}
#gnav-login input {
color: #646464;
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #dcdcdc;
height: 40px;
line-height: 40px;
margin-top: 20px;
padding: 0 14px;
font-size: 14px;
-moz-transition: border-color .2s ease-in-out;
-o-transition: border-color .2s ease-in-out;
-webkit-transition: border-color .2s ease-in-out;
transition: border-color .2s ease-in-out;
-moz-appearance: none;
-webkit-appearance: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#gnav-login p{
color: #fff;
font-size: 13px;
margin-bottom: .6em;
padding:0 !important;
margin: 5px 0;
}
#gnav-login p .btn-signin { width: 100%; font-size: 16px; border-radius: 0;}
/*right*/
.cd-primary-nav .cd-secondary-nav-right.right .cols-left { border-right: 1px;border-right: 1px solid #414141;}
.cd-primary-nav .cd-secondary-nav-right.right .cols-right { border-right: 1px;border-left: 1px solid #414141;}
.cd-secondary-nav-right p {color: #fff;
font-size: 13px;
margin-bottom: .6em;
padding: 5px 0;
margin: 5px 30px 5px 0;}
.cd-primary-nav .cd-secondary-nav-right {
position:absolute;
right: 0;
width:70%;
background-color: rgba(50,50,50,0.98);
padding: 20px 20px 20px 25px;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-primary-nav .cd-secondary-nav-right.right{
position:absolute;
background-color: rgba(50,50,50,0.98);
padding: 20px;
left: 0;
width: 100%;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
z-index: 99999;
}
.cd-primary-nav .cd-secondary-nav-right.right h2 { color: #fff; font-size: 25px;}
.cd-primary-nav .cd-secondary-nav-right.right > li {
height:auto;
width: 100%;
float: left;
margin-right: 2.66%;
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cd-primary-nav .cd-secondary-nav-right.right > li p{
color: #fff;
font-size: 13px;
margin-bottom: .6em;
padding: 5px 0 10px 0;
margin: 5px 30px 10px 0;
border-bottom:transparent;}
.cd-primary-nav .cd-secondary-nav-right::after{
clear: both;
content: "";
display: table;
}
.cd-primary-nav .cd-secondary-nav-right.is-hidden{
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-primary-nav .cd-secondary-nav-right > .see-all{
/* this is the BIG See all button at the bottom of the dropdown menu */
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 80px;
width: 100%;
overflow: hidden;
/* reset some inherited style */
margin: 0;
padding: 0;
}
.cd-primary-nav .cd-secondary-nav-right > .see-all a{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-size: 2.2rem;
font-weight: bold;
text-align: center;
line-height: 80px;
border-top: 1px solid #e2e3df;
/* reset some inherited style */
border-bottom: none;
margin: 0;
padding: 0;
-webkit-transition: color 0.2s, background 0.2s, border 0.2s;
-moz-transition: color 0.2s, background 0.2s, border 0.2s;
transition: color 0.2s, background 0.2s, border 0.2s;
}
.cd-primary-nav .cd-secondary-nav-right > .see-all a:hover{
background: #2e3233;
border-color: #2e3233;
color: #ffffff;
}
.cd-primary-nav .cd-secondary-nav-right > li {
/* change the height according to your needs - you can even set height: auto */
height:auto;
/* here you set the number of columns - use width percentage */
width: 30%;
float: left;
margin-right: 2.66%;
/*border-right: 1px solid #e2e3df;*/
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cd-primary-nav .cd-secondary-nav-right > li p{
color: #fff;
font-size: 13px;
margin-bottom: .6em;
padding: 5px 0 10px 0;
margin: 5px 30px 10px 0;
border-bottom: 1px solid #646464;}
.cd-primary-nav .cd-secondary-nav-right > li:nth-child(4n+2) {
/* +2 because we have 2 list items with display:none */
margin-right: 0;
border-right: none;
}
.cd-primary-nav .cd-secondary-nav-right > li > a {
/* secondary nav title */
color: #fff;
font-weight: bold;
font-size: 1.6rem;
margin-bottom: .6em;
border-bottom: 1px solid #646464;
}
.cd-primary-nav .cd-secondary-nav-right > li > a {
/* secondary nav title */
color: #fff;
font-weight: bold;
font-size: 1.6rem;
margin-bottom: .6em;
border-bottom: 1px solid #646464;
}
.cd-primary-nav .cd-secondary-nav-right a {
height: auto;
line-height: 30px;
padding: 0 18% 0 0;
color: #fff;
border-bottom: none;
font-size: 1.4rem;
}
.cd-primary-nav .cd-secondary-nav-right a:hover {
color: #fff;
}
.cd-primary-nav .cd-secondary-nav ul {
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.cd-primary-nav .cd-secondary-nav-right ul ul {
/* tertiary navigation */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cd-primary-nav .cd-secondary-nav-right ul ul.is-hidden {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-primary-nav .cd-secondary-nav-right ul ul .go-back {
display: block;
}
.cd-primary-nav .cd-secondary-nav-right ul ul .go-back a {
color: transparent;
}
.cd-primary-nav .cd-secondary-nav-right ul ul .see-all {
display: block;
}
.cd-primary-nav .cd-secondary-nav-right .moves-out > li > a {
/* push the navigation items to the left - and lower down opacity - when tertiary nav slides in */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.cd-primary-nav .cd-nav-gallery li {
/* set here number of columns - use width percentage */
width: 22%;
float: left;
margin: 0 4% 40px 0;
}
.cd-primary-nav .cd-nav-gallery li:nth-child(4n+2) {
/* +2 because we have two additional list items with display:none */
margin-right: 0;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item {
border-bottom: none;
padding: 0;
height: auto;
line-height: 1.2;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item img {
position: static;
margin-top: 0;
height: auto;
width: 100%;
margin-bottom: .6em;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item h3 {
color: #69aa6f;
font-weight: bold;
padding: 0 .4em;
}
.cd-primary-nav .cd-nav-icons li {
/* set here number of columns - use width percentage */
width: 32%;
float: left;
margin: 0 2% 20px 0;
}
.cd-primary-nav .cd-nav-icons li:nth-child(3n+2) {
/* +2 because we have two additional list items with display:none */
margin-right: 0;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item {
border-bottom: none;
height: 80px;
line-height: 1.2;
padding: 24px 0 0 85px;
position: relative;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item:hover {
background: #f6f6f5;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
color: #69aa6f;
font-weight: bold;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item p {
display: block;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item::before {
left: 25px;
}
}
.has-children > a, .go-back a {
position: relative;
}
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
/* arrow icon in CSS - for element with nested unordered lists */
content: '';
position: absolute;
top: 50%;
margin-top: -1px;
display: inline-block;
height: 2px;
width: 10px;
background: #464c4e;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.has-children > a::before, .go-back a::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.has-children > a::after, .go-back a::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media only screen and (min-width: 1170px) {
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
background: #c9cbc4;
}
.has-children > a:hover::before, .has-children > a:hover::after, .go-back a:hover::before, .go-back a:hover::after {
background: #69aa6f;
}
}
.has-children > a {
padding-right: 40px;
}
.has-children > a::before, .has-children > a::after {
/* arrow goes on the right side - children navigation */
right: 20px;
-webkit-transform-origin: 9px 50%;
-moz-transform-origin: 9px 50%;
-ms-transform-origin: 9px 50%;
-o-transform-origin: 9px 50%;
transform-origin: 9px 50%;
}
.cd-primary-nav .go-back a {
padding-left: 40px;
}
.cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after {
/* arrow goes on the left side - go back button */
left: 20px;
-webkit-transform-origin: 1px 50%;
-moz-transform-origin: 1px 50%;
-ms-transform-origin: 1px 50%;
-o-transform-origin: 1px 50%;
transform-origin: 1px 50%;
}
@media only screen and (min-width: 1170px) {
.has-children > a::before, .has-children > a::after {
right: 15%;
}
.cd-primary-nav > .has-children > a {
padding-right: 25px !important; text-decoration: none;
}
.cd-primary-nav > .has-children > a::before, .cd-primary-nav > .has-children > a::after {
width: 7px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
background: #646464;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: width 0.3s, -webkit-transform 0.3s;
-moz-transition: width 0.3s, -moz-transform 0.3s;
transition: width 0.3s, transform 0.3s;
}
.cd-primary-nav > .has-children > a::before {
right: 12px;
}
.cd-primary-nav > .has-children > a::after {
right: 7px;
}
.cd-primary-nav > .has-children > a.selected::before, .cd-primary-nav > .has-children > a.selected::after {
width: 12px;background: #fff;
}
.cd-primary-nav > .has-children > a.selected::before {
-webkit-transform: translateX(5px) rotate(-45deg);
-moz-transform: translateX(5px) rotate(-45deg);
-ms-transform: translateX(5px) rotate(-45deg);
-o-transform: translateX(5px) rotate(-45deg);
transform: translateX(5px) rotate(-45deg);
}
.cd-primary-nav > .has-children > a.selected::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-secondary-nav > .has-children > a::before, .cd-secondary-nav > .has-children > a::after {
display: none;
}
.cd-primary-nav .go-back a {
padding-left: 20px;
}
.cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after {
left: 1px;
}
}
.cd-search {
position: absolute;
height: 50px;
width: 100%;
top: 50px;
left: 0;
z-index: 3;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-search form {
height: 100%;
width: 100%;
}
.cd-search input {
border-radius: 0;
border: none;
background: #ffffff;
height: 100%;
width: 100%;
padding: 0 5%;
box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05);
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.cd-search input::-webkit-input-placeholder {
color: #c9cbc4;
}
.cd-search input::-moz-placeholder {
color: #c9cbc4;
}
.cd-search input:-moz-placeholder {
color: #c9cbc4;
}
.cd-search input:-ms-input-placeholder {
color: #c9cbc4;
}
.cd-search input:focus {
outline: none;
}
.cd-search.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.nav-is-fixed .cd-search {
position: fixed;
}
/*@media only screen and (min-width: 1170px) {
.cd-search {
height: 120px;
top: 80px;
}
.cd-search input {
padding: 0 2em;
font-size: 3.2rem;
font-weight: 300;
}
}*/
.cd-overlay {
/* shadow layer visible when navigation is active */
position: fixed;
z-index: 2;
height: 100%;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
background-color: rgba(105, 170, 111, 0.8);
visibility: hidden;
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
.cd-overlay.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s;
}
/*@media only screen and (max-width: 1169px) {
.cd-overlay.is-visible {
-webkit-transform: translateX(-260px);
-moz-transform: translateX(-260px);
-ms-transform: translateX(-260px);
-o-transform: translateX(-260px);
transform: translateX(-260px);
}
.nav-on-left .cd-overlay.is-visible {
-webkit-transform: translateX(260px);
-moz-transform: translateX(260px);
-ms-transform: translateX(260px);
-o-transform: translateX(260px);
transform: translateX(260px);
}
.cd-overlay.is-visible.search-is-visible, .nav-on-left .cd-overlay.is-visible.search-is-visible {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}*/
/* --------------------------------
support for no js
-------------------------------- */
.no-js .cd-primary-nav {
position: relative;
height: auto;
width: 100%;
overflow: visible;
visibility: visible;
z-index: 2;
}
.no-js .cd-search {
position: relative;
top: 0;
opacity: 1;
visibility: visible;
}
@media only screen and (min-width: 1170px) {
.no-js .cd-primary-nav {
position: absolute;
z-index: 3;
display: inline-block;
width: auto;
top: 0;
right: 150px;
padding: 0;
}
.no-js .nav-is-fixed .cd-primary-nav {
position: fixed;
}
}
/*video*/
video {
width: auto;
height: auto;
transform: translateX(-10%) translateY(20%);
background: transparent;
/*background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;*/
background-size: cover;
transition: 1s opacity;
}
/*fonts-face*/
@font-face {
font-family: 'ac_espressaregular';
src: url('../fonts/ac/ac_espressa-webfont.eot');
src: url('../fonts/ac/ac_espressa-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/ac/ac_espressa-webfont.woff2') format('woff2'),
url('../fonts/ac/ac_espressa-webfont.woff') format('woff'),
url('../fonts/ac/ac_espressa-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'djb_chalk_it_upregular';
src: url('../fonts/djb/djb_chalk_it_up-webfont.eot');
src: url('../fonts/djb/djb_chalk_it_up-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/djb/djb_chalk_it_up-webfont.woff2') format('woff2'),
url('../fonts/djb/djb_chalk_it_up-webfont.woff') format('woff'),
url('../fonts/djb/djb_chalk_it_up-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DB_Helvethaica_X';
src: url("../fonts/db/DB_Helvethaica_X.eot");
src: url("../fonts/db/DB_Helvethaica_X.woff") format('woff'),
url("../fonts/db/DB_Helvethaica_X.ttf") format('truetype'),
url("../fonts/db/DB_Helvethaica_X.svg") format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DB_Helvethaica_X';
src: url("../fonts/db/DB_Helvethaica_X_Light.eot");
src: url("../fonts/db/DB_Helvethaica_X_Light.woff") format('woff'),
url("../fonts/db/DB_Helvethaica_X_Light.ttf") format('truetype'),
url("../fonts/db/DB_Helvethaica_X_Light.svg") format('svg');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'DB_Helvethaica_X';
src: url("../fonts/db/DB_Helvethaica_X_Med.eot");
src: url("../fonts/db/DB_Helvethaica_X_Med.woff") format('woff'),
url("../fonts/db/DB_Helvethaica_X_Med.ttf") format('truetype'),
url("../fonts/db/DB_Helvethaica_X_Med.svg") format('svg');
font-weight: bold;
font-style: normal;
}
/*@font-face{
font-family: 'skv';
src: url("../fonts/sukhumvit/text-webfont.ttf");
font-style: normal;
}*/
/*.fonts-face*/
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 768px) and (max-width: 991px) {
section.top-shared-feature.is-black object#logo-svg { margin-left: 35%;}
.btn.prev, .btn.next {display: none;}
}
@media (max-width: 767px) {
section.header-fixed .menu-global-header { height: auto;}
section.header-fixed .menu-global-header ul {padding: 10px 15px; text-align: center;}
section.header { padding-top:0;}
section.header .header-inner { background:#fff; border-bottom: 1px #dcdcdc solid; height:auto; width: 100%;}
section.header .header-inner .header-logo {padding: 11px 25px 12px 0; text-align: center;}
section.header .header-inner .header-right { text-align: right; padding: 12px 0;margin: 0;}
/*section.header .header-inner .header-logo img { margin:0 0 -3px 0; text-align: left; float: left; padding-left: 15px;}
section.header .header-inner { height: auto; padding-bottom:12px;}*/
section.nav-global .nav > li > a.first { padding: 8px 20px;}
section.nav-global .nav > li.services-right {text-align: left; float: left; margin-left:0; margin-bottom: 10px;}
footer.box-1st .inner .inner-left { border-bottom: 1px solid #404040; margin: 0 15px;}
footer.box-1st .inner .inner-right {margin: 30px 0 0 15px; padding: 0}
section.top-shared-feature.is-gray .items { width: 100%;}
section.top-shared-feature.is-gray .items.red { width: 100%;}
section.top-shared-feature.is-gray .items-end { width: 100%;}
footer.box-2nd .social {text-align: center;}
footer.box-2nd .language {float: left; margin-left:40%}
footer .zcom-service-footer .right p {padding-right:15px;}
footer .zcom-service-footer .left p{padding-left:15px;}
footer .logo-footer{padding-right:15px;}
footer .list-links {text-align:left;padding: 5px 0;}
footer .list-links li { display: list-item; margin: 15px 0}
footer .zcom-service-footer .left p, footer .zcom-service-footer .right p{ text-align: center;}
footer .logo-footer { text-align: center; float: none; padding-bottom: 40px;}
section.top-shared-feature h1{margin: 0 0 20px 0;font-size: 2em; line-height: 1.5em;}
section.top-shared-feature {padding: 20px 0;}
section.top-shared-feature p.left { font-size: 1em;}
section.top-shared-feature.is-gray h2 { font-size:1.8em;line-height: 1.5em; }
section.top-shared-feature.is-gray p.left { font-size: 1em;}
section.top-shared-feature h2 { font-size:1.8em;line-height: 1.5em;}
.visible-xs {float: left; margin-right: 15px;}
section.top-shared-feature.compare { font-size: 0.8em;}
section.top-shared-feature.compare h1 { margin: 0;font-size: 2.5em;}
section.top-shared-feature.compare h2 { margin: 0 0 5px 0;padding:0;font-size: 2em;line-height: 2em}
section.top-shared-feature.compare h3{padding-bottom: 15px;}
section.top-shared-feature.compare h3 .fa-angle-down {font-size: 1.8em;}
section.top-shared-feature.compare .plans-features-list-nav-black, section.top-shared-feature.compare .plans-features-list-nav-red{ width: auto;}
section.top-shared-feature.compare .compare-list-inner .top-selection-btn { padding: 20px 20px;font-size: 16px;}
section.top-main-visual.top-domain .container.domain { padding: 20px 15px; background: transparent;}
section.top-main-visual.top-domain h1 { font-size: 2em;}
section.top-main-visual.top-domain p { font-size: 1.5em; margin-bottom: 20px;}
/*search*/
section.top-main-visual.top-domain .form-search .input-domain, section.top-main-visual.top-domain .form-search .input-domain { font-size:13px;border: 2px solid #646464;width:100%; height: 45px;}
section.top-main-visual.top-domain .form-search {border: none;background: transparent; width: 100%;}
section.home-search .form-search .input-domain, section.home-search .form-search .input-domain { font-size:13px;border: 2px solid #646464;width:100%; height: 45px;}
section.home-search .form-search .btn.btn-submit { font-size: 14px;background:#d62825; margin: 10px 0; width: 80%;}
section.home-search .form-search {border: none;background: transparent; width: 100%;}
section.home-who h1 { font-size: 2.3em;}
section.home-who p { font-size: 1em;}
.btn.btn-submit { font-size: 14px;background:#d62825; margin: 10px 0; width: 80%;}
.btn.btn-submit:hover, .btn.btn-submit:focus {background-color: #b2211e; color: #fff; text-decoration: none;}
section.top-content-boxblack ul li, section.top-content-boxblack ul li.first {border-left:transparent; border-bottom: 1px solid #4c4c4c;border-right:transparent;}
section.top-shared-feature.is-gray .box-img-price {margin-bottom: -20px;}
section.top-content-boxred h1 { font-size: 1.6em; font-weight: normal;}
section.top-shared-feature .container h1 {font-size: 2em; line-height: 1.8em}
section.top-main-visual.top-cloud { height: auto;margin-top: -30px;}
section.top-main-visual.top-cloud .top-header-text h1 {margin:30px 0 0 0; text-align: center;}
section.top-main-visual.top-cloud .top-header-text h2 { text-align: center;padding:0;}
/*sign in*/
section.section-sign .box-inner { width: auto;}
section.section-sign .box-signin { padding:0 15px; margin: 0 15px; width: 100%; float: none;}
section.section-sign .box-sns .box-sns-inner{padding:0 15px; margin: 0 15px; border-right:transparent;}
#owl-demo .item{border-right:transparent;}
.btn.prev, .btn.next {display: none;}
section.top-main-visual.top-cloud.email { height:auto; padding: 20px;background: #2c2c2c url('../images/banner-header-email-bg.png')center top no-repeat;}
section.top-main-visual.top-cloud.email ul {padding: 25px 0;}
section.top-main-visual.top-cloud.email ul li { margin: 10px 0;font-size: 1.2em;background:url('../images/icon-check-small.png')left top no-repeat; padding-left: 20px;}
section.top-main-visual.share-host .box-content { width: auto;height: auto; padding: 20px 0;}
section.top-main-visual.share-host .box-content .left-content h1 { font-size: 2em;padding: 0; margin: 5px 0 10px 0; text-align: center;}
section.top-main-visual.share-host .box-content .left-content h2 { font-size: 3em; color:#fff;margin: 10px 0 10px 0; text-align: center;}
section.top-main-visual.share-host .box-content .left-content h2 span { font-size: 0.8em;}
section.top-main-visual.share-host .box-content .left-content ul { list-style: none; padding: 10px 0;}
section.top-main-visual.share-host .box-content .left-content ul li { background: url('../images/icon-check.png')left no-repeat;display: inline-block;padding: 0 0 0 30px; font-size: 1em;}
section.top-main-visual.share-host .box-content .left-content .top-selection-btn { float: none;left: 60px;}
section.top-shared-feature.is-black h2 { margin: 20px 0 15px 0;font-size: 1.8em; text-align: center; }
section.top-shared-feature.is-black p { font-size: 01em; text-align: center; margin: 0 auto;}
section.top-shared-feature.is-black object#logo-svg { margin-left: 17%;}
section.top-shared-feature.clients ul li { width: 33.33%;}
section.top-shared-feature .plan-s { margin:0 0 10px 0;border-left: 1px solid #dcdcdc;border-right: 1px solid #dcdcdc;border-bottom: 1px solid #dcdcdc;}
section.top-shared-feature .plan-s h1 { margin:0; }
section.top-shared-feature .plan-s h3 { margin: 0;}
section.top-shared-feature .plan-s p.content-header{ height: auto; padding: 20px 0;}
section.top-shared-feature .plan-m { box-shadow: none;margin:0 0 10px 0;}
section.top-shared-feature .plan-m h1 { margin:35px 0 0 0; }
section.top-shared-feature .plan-m h3 { margin: 0;}
section.top-shared-feature .plan-m p.content-header{ height: auto; padding: 20px 0;}
section.top-shared-feature .plan-l { margin:0 0 10px 0;border-left: 1px solid #dcdcdc;border-right: 1px solid #dcdcdc;border-bottom: 1px solid #dcdcdc;}
section.top-shared-feature .plan-l h1 { margin:0; }
section.top-shared-feature .plan-l h3 { margin: 0;}
section.top-shared-feature .plan-l p.content-header{ height: auto; padding: 20px 0;}
.top-selection-btn {padding: 20px 35px; font-size: 16px;}
section.home-news .home-news-inner .home-news-title { padding: 4px 12px; font-size: 1.2rem;}
section.home-news .home-news-inner p.home-news-list { margin: 5px 0; font-size: 1rem;}
section.home-news { padding: 4px 2px;}
/*contact*/
section.top-shared-feature.contact .box-border { margin:5px 3px; height: auto;}
/*cart*/
h1.main-title { text-align: center; padding: 0 15px; font-size: 30px; margin:0 0 40px 0;}
.header-logo { text-align: center;}
.header {margin: 0 0 30px;}
.content-left { padding: 0 15px;}
.box-plan {border-bottom: 1px solid #dcdcdc; padding: 10px 15px; margin-bottom: 20px;}
.plan-list-item-label-name { padding-right: 10px;}
.box-option{border-bottom: 1px solid #dcdcdc; padding: 10px 15px; margin-bottom: 20px;}
.service-domain .option .plan-list-item-label-name {padding-right: 5px; font-size: 24px;}
section.top-main-visual.top-cloud h1 { font-size: 1.5em; padding: 0;}
/* hosting */
section.top-main-visual {margin-top: -30px;}
/*ssl*/
section.top-main-visual.top-ssl { height:auto; max-height: auto;margin-top: -30px;}
section.top-main-visual.top-ssl h1 {margin:40px 0 10px 0; text-align: center;font-size: 1.2em;}
section.top-main-visual.top-ssl ul li { font-size:1em;background: url('../images/icon-check-small.png')left top no-repeat; }
.table.price > tbody > tr > td.is-first-ssl h3 span {margin: 5px 0 10px 0;float: left;}
/*wordpress*/
section.top-main-visual.top-wordpress { height:auto; max-height: auto;margin-top: -30px;}
section.top-main-visual.top-wordpress h1 {margin:40px 0 10px 0; text-align: center;font-size: 1.2em;}
section.top-main-visual.top-wordpress ul li { font-size:1em;background: url('../images/icon-check-white-small.png')left top no-repeat; }
/*home*/
section.top-main-visual.home {background: url('../images/banner-header-home-xs.png')left top no-repeat; height: auto; padding: 20px 0 40px 0;margin-top: -30px;}
section.top-main-visual.home .box-content h1 {font-size: 2em; margin: 0 0 0 35% ; color: #323232;}
}
/*@media (min-width:1200px) {
.container { width:960px}
}*/
/*====================================================*/
/*================ Additional style ==================*/
/*====================================================*/
#header .nav-global > .list-nav-global ul.subs > li.nav-with-info > a {
display: inline-block;
margin-bottom: 5px;
}
#header .nav-global > .list-nav-global ul.subs > li.nav-with-info > span {
display: inline-block;
color: #7c7c7c;
}
.multi-domain-search button[type="submit"] {
padding: 0 !important;
font-size: 21px !important;
float: none !important;
width: 200px !important;
}
.multi-domain-search .multi-domain-search-opener {
top: 20px !important;
right: 215px !important;
font-size: 14px !important;
}
.header .header-inner .header-content .btn-cart {
padding: 0 24px 0 0;
height: 48px;
}
.header .header-inner .header-content .btn-cart a {
line-height: 48px;
}
.header .header-inner .header-content .btn-cart a:before {
bottom: auto;
top: 0;
line-height: 48px;
height: 48px;
}
.header .header-inner .header-content .qtranxs_language_chooser {
padding: 0 60px 0 16px;
height: 48px;
background-position: 0 16px;
}
.header .header-inner .header-content .qtranxs_language_chooser li {
height: 48px;
line-height: 48px;
}
.header .nav-global .list-nav-global>li>.subs {
background-color: rgba(50,50,50,0.98);
}
.header .nav-global .list-nav-global>li>.subs .list-def-01 dt {
/*background-position: 0 2px;*/
background: transparent;
}
.header .nav-global .list-nav-global>li>.subs .list-def-01 dd {
color: #7c7c7c;
}
.header .nav-global .list-nav-global>li>.subs .first-use-txt a {
background: #d62825;
color: #fff;
}
.header .nav-global .list-nav-global>li>.subs .first-use-txt a:hover {
background: #b2211e;
}
section.top-shared-feature {
display: table;
}
.container.box-price { float: none !important; }
section.top-search.multi-domain-search > h1.title,
section.top-search.multi-domain-search > span.subtitle {
font-family: "Tahoma", "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
section.top-search.multi-domain-search > h1.title {
font-size: 48px;
margin-bottom: 20px;
}
section.top-search.multi-domain-search > span.subtitle {
font-size: 28px;
}
section.top-search.multi-domain-search {
padding: 60px 0;
}
section.top-search.multi-domain-search > h1.title > span {
color: #d62825;
font-weight: bold;
}
/*26/08/2016*/
#footer .inner-left ul.navi li:nth-child(3n+1) {
clear: left;
}
/*27/08/2016*/
li.sign .subs {
height: 365px;
}
/*2016/08/31*/
.container-fix {
position: relative;
width: 960px;
margin: 0 auto;
}
.container-fix::before {
content: " ";
display: table;
}
.container-fix::after {
content: " ";
display: table;
clear: both;
}
.custom-contact-us {
position: relative;
}
.custom-contact-us-wrapper {
/*background-color: #e5e5e5;*/
background-color: #e9e9e9;
padding: 60px 0;
}
.custom-contact-us-info {
position: absolute;
}
.custom-contact-us-info h1 {
margin: 0;
margin-bottom: 15px;
}
.contact-us-form-wrapper {
position: relative;
z-index: 10;
top: -100px;
margin-bottom: -100px;
}
.contact-us-form-wrapper .container-fix {
box-shadow: 5px 5px 20px #ddd;
background-color: #d62825;
}
.contact-us-form {
width: 58.33%;
float: left;
padding: 30px;
background-color: #fff;
}
.contact-us-form h2 {
margin: 0;
color: #d62825;
margin-bottom: 15px;
}
.contact-us-form > p {
margin-bottom: 30px;
}
.contact-us-form .control-input {
position: relative;
width: 100%;
margin-bottom: 25px;
float: left;
}
.contact-us-form .control-input label {
float: none;
width: 100%;
max-width: 100%;
display: inline-block;
}
.contact-us-form .control-input input,
.contact-us-form .control-input select,
.contact-us-form .control-input textarea {
float: none;
width: 100%;
max-width: 100%;
display: inline-block;
-moz-transition: border-color 0.2s ease-in-out;
-o-transition: border-color 0.2s ease-in-out;
-webkit-transition: border-color 0.2s ease-in-out;
transition: border-color 0.2s ease-in-out;
}
.contact-us-form .control-input input:hover,
.contact-us-form .control-input select:hover,
.contact-us-form .control-input textarea:hover {
border-color: #323232;
}
.contact-us-form .control-input input:focus,
.contact-us-form .control-input select:focus,
.contact-us-form .control-input textarea:focus {
border-color: #d62825;
}
.contact-us-form .control-input input {
border: none;
padding: 10px 10px 10px 0;
border-bottom: 1px solid #e6e6e6;
}
.contact-us-form .control-input select {
padding: 10px 28px 10px 10px;
border: 1px solid #e6e6e6;
background: url('../../common/images/icon-arrow-select.png?1456914791') 100% 50% no-repeat;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.contact-us-form .control-input textarea {
padding: 10px;
border: 1px solid #e6e6e6;
min-height: 100px;
}
.contact-us-form .control-input.type-select label,
.contact-us-form .control-input.type-textarea label {
margin-bottom: 15px;
}
.contact-us-form .control-input.type-button-submit {
margin-bottom: 0;
}
.contact-us-form .control-input.half-column {
width: 50%;
}
.contact-us-form .control-input.half-column.left-column {
padding-right: 10px;
}
.contact-us-form .control-input.half-column.right-column {
padding-left: 10px;
}
.contact-us-form-info {
width: 41.67%;
float: left;
padding: 30px;
color: #fff;
}
.contact-us-form-info h4 {
color: #482614;
}
.contact-us-form-info p {
padding-left: 15px;
line-height: 15px;
}
/*01/09/2016*/
.header .nav-global .list-nav-global>li.sign .subs .lay-col-3 .btn-signin {
margin-top: 15px;
margin-bottom: 15px;
}
/*08/09/2016*/
.header .nav-global .list-nav-global>li.sign .subs {
background: rgba(50, 50, 50, 0.95);
}
/*06-09/2016*/
.top-shared-feature h2,
.top-shared-feature.is-gray h2 {
font-size: 2.2em !important;
}
.top-shared-feature h2 img {
margin-right: 15px;
}
.table.price > tbody > tr > td {
padding: 0;
}
.table.price > tbody > tr > td:nth-child(1) {
width: 15%;
}
.table.price > tbody > tr > td:nth-child(2) {
width: 35%;
}
.table.price > tbody > tr > td:nth-child(3) {
width: 50%;
text-align: right;
padding-right: 30px;
}
/*07-09-2016*/
.main-price .popular-domain span {
top: 0;
}
.price-header > th {
height: 35px;
line-height: 35px;
}
.years-inner {
padding: 0 !important;
}
.years-inner > p {
margin-bottom: 0;
line-height: 33px;
}
.years-inner > span.btn-group {
position: relative;
padding: 0 !important;
margin-top: 8px;
}
.main-price .domain {
width: 192px;
}
.main-price .section-title {
margin-bottom: 50px !important;
}
.box-price.box-price-list table.tbl-price tbody > tr:hover th,
.box-price.box-price-list table.tbl-price tbody > tr:hover td,
.box-price.box-price-list table.tbl-price tbody > tr:hover label {
color: #d62825 !important;
}
.footer .box-1st .inner .navi>li .labels {
font-size: 15px;
}
#updateProfile label.radio-replace {
top: 0;
}
#updateProfile .form-group {
float: none;
clear: both;
}
#updateProfile .form-group::before {
content: " ";
display: table;
}
#updateProfile .form-group::after {
content: " ";
display: table;
clear: both;
}
#updateProfile .form-group .form-control {
margin: 0;
}
.signup-remark {
text-align: center;
color: #d62825;
}
.signup-remark > a {
color: #d62825;
text-decoration: underline;
}
.footer .list-links li a {
font-size: 11px;
}
.block-price table.tbl-price tbody > tr > th.popular-domain,
.block-price table.tbl-price tbody > tr > th.domain {
width: 192px;
}
.block-price table.tbl-price tbody > tr > td:nth-of-type(1) {
width: 245px;
}
.block-price table.tbl-price tbody > tr > td:nth-of-type(2) {
width: 138px;
}
.block-price table.tbl-price tbody > tr > td:nth-of-type(3) {
width: 192px;
}
.block-price table.tbl-price tbody > tr > td:nth-of-type(4) {
width: 193px;
}
section.top-shared-feature.is-dark {
background: #323232;
}
section.top-shared-feature.is-dark h2,
section.top-shared-feature.is-dark p {
color: #fff;
}
#domain-slide > .container {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 300ms ease-out 0ms;
transition: opacity 300ms ease-out 0ms;
}
#domain-slide.ready > .container {
visibility: visible;
opacity: 1;
}
section.top-shared-feature.is-img-bottom div > img {
position: relative;
bottom: -40px;
margin-top: -40px;
}
span.text-line-through {
position: relative;
font-size: 5rem;
/*color: #ccc;*/
color: #777;
}
span.text-line-through::before {
content: "";
position: absolute;
left: -2%;
top: 49%;
width: 104%;
height: 1px;
background-color: #323232;
}
/*for new banner Jay-Chanatip*/
/*banner-header-domain.png*/
/*section.page--newbgheader{
background-image: url(../images/Annotation_2020-08-05_100428.png);
background-position:center;
background-repeat:no-repeat;
height: 450px;
padding:0;
overflow: hidden;
width: 100%;
float: left;
background-size: cover;
}*/
section.page--newbgheader{
background-image: url(../images/website-anniversary_banner.zip.png);
background-position:center;
background-repeat:no-repeat;
height: 450px;
padding:0;
overflow: hidden;
width: 100%;
float: left;
background-size: cover;
margin:0;
}
@media (max-width: 1029px) {
section.page--newbgheader{height:330px;}
}
section.top-search.multi-domain-search h1.title,
section.top-search.multi-domain-search span.subtitle {
text-align: left;
}
section.top-search {
position: relative;
width: 100%;
background: url('../images/campaign/comnet/bg-cp-comnet.jpg');
background-repeat: no-repeat;
background-size: cover;
padding: 0 !important;
overflow: hidden;
}
section.top-search.new--bg--red {
position: relative;
width: 100%;
background: url('../images/campaign/comnet/cp-comnet-background.jpg');
background-repeat: no-repeat;
background-size: cover;
padding: 0 !important;
overflow: hidden;
}
section.top-search .top-search-inner {
position: relative;
width: 960px;
margin: 0 auto;
height:450px;
}
section.top-search .inner {
margin: 0;
}
section.top-search .is-jay-chanatip {
position: absolute;
right: -260px;
top: -15px;
height: 110%;
}
section.top-search.multi-domain-search h1.title {
padding-top: 65px;
margin-bottom: 0px;
display: inline-block;
}
section.top-search.multi-domain-search span.subtitle {
display: inline-block;
margin-bottom: 19px;
}
section.top-search .inner {
padding-bottom: 70px;
}
section.top-search span.is-support-th-domain-registration {
position: relative;
height: 40px;
line-height: 40px;
display: inline-block;
margin-top: 15px;
font-size: 2rem;
background: #333;
color: #fff;
padding: 0 15px 0 0;
border-radius: 4px;
box-shadow: 0 -2px rgba(0, 0, 0, 0.1) inset;
cursor: default;
}
.main.page-verisign section.top-search span.is-support-th-domain-registration {
/*display: table;*/
margin: 15px auto 0;
}
section.top-search span.is-support-th-domain-registration > span {
position: relative;
display: inline-block;
float: left;
background: #d62825;
margin-right: 20px;
padding: 0 12px 0 15px;
border-radius: 4px 0 0 4px;
box-shadow: 0 -2px rgba(0, 0, 0, 0.1) inset;
}
section.top-search span.is-support-th-domain-registration > span:after {
content: '';
position: absolute;
top: 8px;
left: 100%;
border-top: 12px solid transparent;
border-left: 12px solid #d62825;
border-bottom: 12px solid transparent;
}
section.top-search span.is-domains-special-price {
position: relative;
height: 40px;
line-height: 40px;
display: inline-block;
margin-top: 15px;
font-size: 2rem;
/*background: #333;*/
color: #fff;
padding: 0;
border-radius: 4px;
cursor: default;
/*fix*/
width: 100%;
}
.main.page-verisign section.top-search span.is-domains-special-price {
display: table;
margin: 15px auto 0;
}
section.top-search span.is-domains-special-price > span:not(.tld) {
position: relative;
z-index: 2;
display: inline-block;
float: left;
background: #d62825;
margin-right: 20px;
padding: 0 12px 0 15px;
border-radius: 4px 0 0 4px;
box-shadow: 0 -2px rgba(0, 0, 0, 0.1) inset;
}
section.top-search span.is-domains-special-price > span:not(.tld):after {
content: '';
position: absolute;
top: 8px;
left: 100%;
border-top: 12px solid transparent;
border-left: 12px solid #d62825;
border-bottom: 12px solid transparent;
}
section.top-search span.is-domains-special-price .tld-contain {
position: relative;
float: left;
left: -20px;
margin-right: -20px;
border-radius: 0 4px 4px 0;
/*fix*/
position: absolute;
/*left: 200px;*/
left: 137px;
width: 1000px;
margin: 0;
}
html[lang="en-US"] section.top-search span.is-domains-special-price .tld-contain {
/*left: 189px;*/
left: 122px;
}
section.top-search span.is-domains-special-price .tld-contain:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/campaign/bg-stroke-dark2xy.png);
background-repeat: repeat;
background-size: 7px;
opacity: 0.05;
}
section.top-search span.is-domains-special-price .tld {
position: relative;
z-index: 1;
display: block;
float: left;
width: 68px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #5b5b5b;
font-size: 1.8rem;
}
section.top-search span.is-domains-special-price .tld:after {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 -2px rgba(0, 0, 0, 0.1) inset;
}
section.top-search span.is-domains-special-price .tld:last-child {
border-radius: 0 4px 4px 0;
}
section.top-search span.is-domains-special-price .tld:last-child:after { border-radius: 0 4px 4px 0; }
section.top-search span.is-domains-special-price .tld:nth-child(1):after { background-color: #0d70b1; }
section.top-search span.is-domains-special-price .tld:nth-child(2):after { background-color: #1c5cd0; }
section.top-search span.is-domains-special-price .tld:nth-child(3):after { background-color: #ca1cde; }
section.top-search span.is-domains-special-price .tld:nth-child(4):after { background-color: #ed810d; }
section.top-search span.is-domains-special-price .tld:nth-child(5):after { background-color: #f2ba0d; }
section.top-search span.is-domains-special-price .tld:nth-child(6):after { background-color: #3ec1e6; }
section.top-search span.is-domains-special-price .tld:nth-child(7):after { background-color: #be3730; }
section.top-search span.is-domains-special-price .tld:nth-child(8):after { background-color: #fb7802; }
section.top-search span.is-domains-special-price .tld:nth-child(9):after { background-color: #f7b41f; }
section.top-search span.is-domains-special-price .tld:nth-child(10):after { background-color: #94bb10; }
section.top-search span.is-domains-special-price .tld:nth-child(11):after { background-color: #33b3e4; }
section.top-search span.is-domains-special-price .tld:nth-child(12):after { background-color: #065381; }
section.top-search span.is-domains-special-price .tld:nth-child(13):after { background-color: #a40641; }
section.top-search span.is-domains-special-price .tld:nth-child(14):after { background-color: #e7380d; }
.top-search .inner,
.top-search-campaign .inner,
.top-search-campaign-bulk-b .inner {
width: 640px;
}
.multi-domain-search button[type="submit"] {
width: 160px !important;
}
.top-search .inner .form-search .input-domain,
.top-search-campaign .inner .form-search .input-domain,
.top-search-campaign-bulk-b .inner .form-search .input-domain {
width: 470px;
}
.multi-domain-search .multi-domain-search-opener {
right: 180px !important;
}
.top-search.multi-domain-search-opened .top-search-inner {
padding: 32px 0 74px;
position: static;
}
.top-search .multi-domain-search-container .multi-domain-search-inner .multi-domain-search-heading {
font-size: 2.6rem;
}
.top-search .multi-domain-search-container .multi-domain-search-inner .form-search textarea,
.top-search .multi-domain-search-container .multi-domain-search-inner .form-search .multi-domain-search-placeholder {
font-size: 1.8rem;
line-height: 1.25;
}
.top-search.multi-domain-search-opened .is-jay-chanatip,
.top-search.multi-domain-search-opened h1.title,
.top-search.multi-domain-search-opened span.subtitle {
visibility: hidden;
}
section.top-search.multi-domain-search h1.title > span {
color: #d62825;
}
.netdesigngroup-link-on-banner {
position: absolute;
z-index: 100;
top: 0;
right: 0;
}
.netdesigngroup-link-on-banner img {
width: 200px !important;
}
.netdesigngroup-link-on-banner i.icon {
display: none;
}
.footer .list-sns {
padding-top: 15px;
}
.footer .list-sns li a {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
display: block;
width: 32px;
height: 25px;
background-position: 50% 50%;
background-repeat: no-repeat;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
border: none;
border-radius: 0;
}
.footer .list-sns li a.facebook {
background: url(../images/icon_facebook.png);;
}
.footer .list-sns li a.facebook:hover,
.footer .list-sns li a.facebook:focus {
background-image: url(../images/icon_facebook.png);
background-position: -32px 0px;
}
.footer .list-sns li a.twitter {
background: url(../images/icon_twitter.png);;
}
.footer .list-sns li a.twitter:hover,
.footer .list-sns li a.twitter:focus {
background-image: url(../images/icon_twitter.png);
background-position: -32px 0px;
}
/* ==================================================== */
/* style for maintainance (19 - 20 November 2016) */
/* ==================================================== */
.top-search.on-mainainance {
padding: 80px 0 !important;
}
.top-search.on-mainainance .title {
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-size: 4rem !important;
text-align: center !important;
}
.top-search.on-mainainance .title img {
position: relative;
top: -5px;
display: inline-block;
height: 40px;
margin-right: 15px;
}
.top-search.on-mainainance .sub-title {
display: block;
margin: 0 !important;
padding: 0 !important;
font-family: 'DB_Heavent_Light', sans-serif !important;
font-size: 2.6rem !important;
text-align: center !important;
line-height: 1.25;
}
.top-search.on-mainainance .sub-title.small {
font-size: 2rem !important;
}
.top-search.on-mainainance .sub-title > span {
font-size: 1.6rem !important;
}
.top-search.on-mainainance .is-link-to-netdesignhost {
font-weight: bold;
color: #323232;
padding: 0 5px;
background-color: orange;
text-shadow: 0 0 1px #fff;
border-radius: 2px;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.top-search.on-mainainance .is-link-to-netdesignhost:hover {
background-color: #ffb837;
}
/* ==================================================== */
/* style for verisign */
/* ==================================================== */
.main.page-verisign section.top-search.multi-domain-search h1.title {
display: block !important;
visibility: visible !important;
font-size: 5rem;
text-align: center;
padding-top: 40px;
padding-bottom: 8px;
}
.main.page-verisign section.top-search .inner {
margin: 0 auto;
/*padding-bottom: 40px;*/
padding-bottom: 22px;
padding-top: 0;
}
/* ==================================================== */
/* style for countdown timer */
/* ==================================================== */
.main section.top-search.on-campaign .campaign-clock-box * {
font-family: 'DB_Heavent_Light' !important;
}
.main section.top-search.on-campaign .campaign-clock-box > span {
line-height: 1;
}
section.top-search.on-campaign .inner {
padding-bottom: 144px;
}
section.top-search.on-campaign .subtitle {
margin-bottom: 0;
}
section.top-search.on-campaign .campaign-clock-box {
position: absolute;
bottom: 30px;
display: block;
width: 640px;
background: rgba(0, 0, 0, 0.7);
font-size: 3rem;
color: #fff;
text-align: center;
}
section.top-search.on-campaign.multi-domain-search-opened .campaign-clock-box {
visibility: hidden;
display: none;
}
section.top-search.on-campaign .campaign-clock-box span.caption {
position: relative;
top: -14px;
display: block;
font-size: 1.8rem;
line-height: 1;
}
section.top-search.on-campaign .campaign-clock-box span.caption > span {
font-size: 1.2rem;
}
section.top-search.on-campaign .timer-contain > span {
font-size: 1.8rem;
}
/* ==================================================== */
/* religion selector */
/* ==================================================== */
.region-select-country:after {
content: "";
display: table;
clear: both;
}
.region-select-country li {
width: 33.33%;
float: left;
margin: 0;
}
.region-select-country li > a {
margin: 0 auto;
}
.region-select-country li a.is-ph {
background-image: url(../../common/images/flag_ph.png);
}
/* ==================================================== */
/* wp & cloud : our client */
/* ==================================================== */
section.top-shared-feature.our-clients {
position: relative;
overflow: hidden;
padding-bottom: 0;
}
section.top-shared-feature.our-clients > .container > .title {
position: relative;
font-family: 'DB_Heavent_Light', sans-serif !important;
font-size: 5rem !important;
text-align: center;
line-height: 52px;
margin-bottom: 0;
}
section.top-shared-feature.our-clients > .container > .title > img {
height: 50px;
display: inline-block;
vertical-align: top;
}
section.top-shared-feature.our-clients > .container > .title > span {
color: #d62825;
font-family: 'DB_Heavent_Light', sans-serif !important;
font-weight: normal;
display: block;
}
section.top-shared-feature.our-clients > .container > .caption {
display: block;
text-align: center;
font-family: 'DB_Heavent_Light', sans-serif !important;
padding: 0;
margin: 0;
}
section.top-shared-feature.our-clients > .container > .seperate {
display: block;
text-align: center;
color: #d62825;
}
section.top-shared-feature.our-clients > .container > .client-list {
position: relative;
}
section.top-shared-feature.our-clients > .container > .client-list:after {
content: '';
display: table;
clear: both;
}
section.top-shared-feature.our-clients > .container > .client-list > li {
float: left;
width: 16.666666666667%;
padding: 0 15px;
margin-bottom: 30px;
}
section.top-shared-feature.our-clients > .container > .client-list > li:nth-child(6n+1) {
clear: left;
}
section.top-shared-feature.our-clients > .container > .client-review {
position: relative;
/*margin-bottom: 30px;*/
margin-bottom: 0px;
}
section.top-shared-feature.our-clients > .container > .client-review:after {
content: '';
display: table;
clear: both;
}
section.top-shared-feature.our-clients > .container > .client-review > li {
float: left;
width: 33.33%;
padding: 0 15px;
margin-bottom: 30px;
}
section.top-shared-feature.our-clients > .container > .client-review > li:nth-child(3n+1) {
clear: left;
}
section.top-shared-feature.our-clients > .container > .client-review > li:nth-child(7) {
margin-left: 16.666666666667%;
}
section.top-shared-feature.our-clients > .container > .client-review > li .caption {
position: relative;
line-height: 1.1 !important;
font-size: 1.6rem !important;
background: #f5f5f5;
padding: 10px;
text-align: center;
height: 120px;
display: table-cell;
vertical-align: middle;
border-radius: 5px;
}
section.top-shared-feature.our-clients > .container > .client-review > li .caption:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
left: 50%;
margin-left: -10px;
top: 100%;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid #f5f5f5;
}
section.top-shared-feature.our-clients > .container > .client-review > li .company-info {
position: relative;
text-align: center;
line-height: 1 !important;
font-size: 1.8rem !important;
margin-top: 15px;
}
section.top-shared-feature.our-clients > .container > .client-review > li .company-info > img {
height: 60px;
display: block;
margin: 0 auto;
}
section.top-shared-feature.our-clients > .container > .client-review > li .company-info > a,
section.top-shared-feature.our-clients > .container > .client-review > li .company-info > a:focus {
color: #d62825;
}
section.top-shared-feature.our-clients > .container > .client-review > li .company-info > a:hover {
color: #b2211e;
}
section.top-shared-feature.our-clients > .container .btn {
display: table;
margin: 0 auto;
font-size: 2rem;
}
/* ==================================================== */
/* campaingn countdown */
/* ==================================================== */
section.campaign-countdown {
position: relative;
top: -43px;
margin: 0 0 -43px 0;
font-family: 'DB_Heavent_Thin', sans-serif;
font-weight: normal;
background: rgba(255,255,255,0.7);
color: #323232;
padding: 5px 0;
height: 43px;
min-height: 43px;
max-height: 43px;
}
section.campaign-countdown > .container {
padding: 0;
}
#campaign_clock {
position: relative;
display: block;
}
#campaign_clock:after {
content: '';
display: table;
clear: both;
}
#campaign_clock > span {
display: inline-block;
float: left;
font-size: 2.2rem;
line-height: 33px;
color: #d62825;
float: left;
}
#campaign_clock > span:first-child {
margin-right: 5px;
}
#campaign_clock > span:last-child {
margin-left: 5px;
float: right;
}
#campaign_clock > span a {
position: relative;
font-size: 2rem;
color: #323232;
background: #fab000;
display: inline-block;
height: 33px;
line-height: 33px;
padding: 0 10px;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
#campaign_clock > span a:hover {
background: #d59501;
}
#campaign_clock > span a > i:before {
color: #323232;
}
#campaign_clock > span.pre-caption {
line-height: 67px;
}
#campaign_clock .timer-contain {
padding-left: 10px;
}
#campaign_clock .timer-contain > ul {
list-style: none;
}
#campaign_clock .timer-contain > ul:after {
content: '';
display: table;
clear: both;
}
#campaign_clock .timer-contain > ul > li {
position: relative;
float: left;
text-align: center;
color: #323232;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#campaign_clock .timer-contain > ul > li:not(:last-child) {
margin-right: 15px;
}
#campaign_clock .timer-contain > ul > li:not(:last-child):after {
content: ':';
position: absolute;
top: 0;
right: -12px;
color: #323232;
}
#campaign_clock .timer-contain > ul > li > span.time {
font-family: 'DB_Heavent_Light' !important;
line-height: 33px;
display: inline-block;
float: left;
font-size: 3rem;
}
#campaign_clock .timer-contain > ul > li > span:not(.time) {
position: relative;
top: 7px;
font-family: 'DB_Heavent_Original' !important;
display: inline-block;
float: left;
text-align: center;
display: block;
font-size: 1.8rem;
font-weight: normal;
line-height: 1;
color: #323232;
margin-left: 2px;
}
.main.main-price span.is-sale-price {
color: #d62825 !important;
/*font-family: 'DB_Heavent_Thin', sans-serif !important;*/
}
.main.main-price span.is-original-price {
margin-left: 5px;
text-decoration: line-through;
/*color: #d62825;*/
/*color: #a7a7a7 !important;*/
/*color: #d62825 !important;*/
color: #a7a7a7 !important;
/*font-family: 'DB_Heavent_Thin', sans-serif !important;*/
}
.block-price table.tbl-price thead > tr > th:nth-of-type(3),
.block-price table.tbl-price tbody > tr > td:nth-of-type(2) {
text-align: left !important;
}
.box-price-circle {
position: relative;
}
p.price-circle {
vertical-align: middle;
display: table-cell;
position: relative;
width: 500px;
height: 250px;
margin: 0;
text-align: center;
padding-bottom: 40px;
}
p.price-circle > span.price,
p.price-circle > span.dot {
font-size: 8rem;
line-height: 1;
display: inline-block;
width: 380px;
}
p.price-circle > span.price {
font-size: 7rem;
border-radius: 0 0 10px 10px;
background: #fff;
color: #d62825;
}
p.price-circle > span.price > span {
font-size: 7rem;
display: inline-block;
}
p.price-circle > span.dot {
background: #d62825;
padding: 0 30px;
border-radius: 10px 10px 0 0;
color: #fff;
font-size: 7rem;
}
p.price-circle > span.dot > span {
font-size: 7rem;
display: inline-block;
}
section.campaign-countdown.is-new {
height: auto;
min-height: auto;
max-height: none;
top: 0;
margin: 0;
background: #333;
padding: 15px 0;
}
#campaign_clock.is-new {
padding-left: 41px;
}
#campaign_clock.is-new > span {
color: #fab000;
}
#campaign_clock.is-new > span i.icon.icon--clock {
font-size: 3rem;
position: absolute;
left: 0;
}
#campaign_clock.is-new > span i.icon.icon--clock:before {
color: #d62825;
}
#campaign_clock.is-new .timer-contain > ul > li > span.time {
font-family: 'DB_Heavent_Thin' !important;
font-size: 4rem;
color: #fff;
}
#campaign_clock.is-new .timer-contain > ul > li > span:not(.time) {
color: #fff;
}
#campaign_clock.is-new .timer-contain > ul > li:not(:last-child):after {
color: #fff;
}
/*countdown new style*/
section.campaign-countdown {
padding: 10px 0;
height: auto;
min-height: 53px;
max-height: none;
background: rgba(255,255,255,0.4);
top: -53px;
margin-bottom: -53px;
}
#campaign_clock {
display: table;
margin: 0 auto;
background: #fdfdfd;
padding: 24px 24px 28px;
box-shadow: 0 0 2px #ccc;
position: relative;
top: -26px;
margin-bottom: -26px;
padding-left: 96px;
opacity: 0;
visibility: hidden;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
@keyframes steamingtimer {
0% { background: #d62825; }
50% { background: #d62825; }
100% { background: #d62825; }
}
@keyframes zscaling {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
#campaign_clock.is-ready {
opacity: 1;
visibility: visible;
}
#campaign_clock:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 4px;
background: #d62825;
display: block;
-webkit-animation: steamingtimer 2s infinite; /* Safari 4.0 - 8.0 */
animation: steamingtimer 2s infinite;
}
#campaign_clock .icon--clock {
font-size: 4rem;
float: left;
position: absolute;
top: 18.5px;
left: 24px;
margin-bottom: -7px;
margin-right: 15px;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-animation: zscaling 0.75s infinite; /* Safari 4.0 - 8.0 */
animation: zscaling 0.75s infinite;
}
#campaign_clock .icon--clock:before {
color: #d62825;
}
#campaign_clock > span {
float: left !important;
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: baseline;
}
#campaign_clock > span:not(.timer-contain) {
font-size: 3rem;
}
#campaign_clock .timer-contain {
margin-left: 15px !important;
}
#campaign_clock .timer-contain > ul > li:not(:last-child) {
margin-right: 18px;
}
#campaign_clock .timer-contain > ul > li > span.time {
font-family: 'DB_Heavent_Thin' !important;
font-size: 5rem;
color: #d62825;
}
@keyframes light-brinker {
0% { background: rgba(255,255,255,0.7); }
50% { background: rgba(255, 89, 0, 0.7); }
100% { background: rgba(255,255,255,0.7); }
}
section.campaign-countdown.is-domain-index {
/*top: 0;*/
/*margin-bottom: 0;*/
top: -40.5px;
margin-bottom: -40.5px;
background: transparent;
padding: 0;
z-index: 100;
}
section.campaign-countdown.is-domain-index #campaign_clock {
cursor: pointer;
top: 0;
margin-bottom: 0;
/*padding: 13.5px 20px 17.5px 94px;*/
padding: 24px 24px 24px 96px;
}
section.campaign-countdown.is-domain-index #campaign_clock .icon--clock {
/*top: 5.5px;*/
}
section.campaign-countdown.is-domain-index #campaign_clock:after {
content: none;
}
/*search-domain-2nd*/
section.top-shared-feature.search-domain-2nd {
background: #d62825;
}
section.top-shared-feature.search-domain-2nd > .container > .title {
color: #fff;
font-family: 'DB_Heavent_Light', sans-serif !important;
font-size: 4rem;
text-align: center;
}
section.top-shared-feature.search-domain-2nd > .container > .title > img {
vertical-align: baseline;
}
section.top-shared-feature.search-domain-2nd .form-search {
position: relative;
padding: 3px;
/*border: 2px solid #323232;*/
background: #fff;
}
section.top-shared-feature.search-domain-2nd .form-search:after {
content: '';
display: table;
clear: both;
}
section.top-shared-feature.search-domain-2nd .form-search input.input[type="text"] {
width: 100%;
font-size: 2.2rem;
border: 0 none;
float: left;
height: 54px;
line-height: 54px;
text-indent: 17px;
padding-right: 153px;
}
section.top-shared-feature.search-domain-2nd .form-search button.btn[type="submit"] {
position: absolute;
right: 3px;
top: 3px;
bottom: 3px;
width: 150px;
margin: 0;
padding: 0 15px;
line-height: 54px;
font-size: 2.2rem;
text-indent: 20px;
}
section.top-shared-feature.search-domain-2nd .form-search button.btn[type="submit"]:before {
content: '';
display: block;
position: absolute;
width: 54px;
height: 54px;
background-image: url(/https/domain.z.com/th/common/images/icon-magnifier.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
/* ===================== */
/* START : @Z.com lin th */
/* ===================== */
#zcom-line-th {
position: fixed;
z-index: 1000;
top: 50%;
margin-top: -61px;
left: -272px;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#zcom-line-th.is-active {
left: 0;
}
#zcom-line-th .inner {
position: relative;
background: #fff;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-color: #e0e0e0;
}
#zcom-line-th .inner:after {
content: '';
display: table;
clear: both;
}
#zcom-line-th .inner .line-add-qrcode {
display: block;
height: 120px;
float: left;
}
#zcom-line-th .inner > a {
display: block;
float: left;
padding: 11px 11px 11px 0;
color: #333;
}
#zcom-line-th .inner > a > .line-add-link {
display: block;
width: 120px;
margin: 0 auto;
}
#zcom-line-th .inner > a > span {
font-size: 1.5rem;
line-height: 0.9;
display: block;
text-align: center;
margin-top: 11px;
width: 141px;
}
#zcom-line-th .inner > a > span > span {
color: #d62825;
text-decoration: underline;
}
#zcom-line-th > a {
position: absolute;
top: 0;
left: 100%;
width: 30px;
height: 122px;
padding-top: 4px;
text-align: center;
color: #fff;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
border-color: #33d300;
border-radius: 0 4px 4px 0;
background: #25b505;
background: -moz-linear-gradient(left, #25b505 0%, #8ae43e 100%);
background: -webkit-linear-gradient(left, #25b505 0%,#8ae43e 100%);
background: linear-gradient(to right, #25b505 0%,#8ae43e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25b505', endColorstr='#8ae43e',GradientType=1 );
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#zcom-line-th > a > img {
display: block;
height: 125.5px;
}
#zcom-line-th > a > span {
display: block;
text-align: center;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.3;
}
.price-box-new {
vertical-align: middle;
display: table-cell;
position: relative;
width: auto;
height: 200px;
margin: 0;
text-align: center;
padding-bottom: 40px;
padding-left: 50px;
}
.price-box-new > span {
position: relative;
display: block;
width: 100%;
text-align: center;
height: 80px;
line-height: 75px;
background: #d62825;
color: #fff;
font-size: 7rem;
padding: 0 15px;
border-radius: 10px 10px 0 0;
}
.price-box-new > span:last-child {
color: #d62825;
background: #fff;
border-radius: 0 0 10px 10px;
}
.price-box-new > span > span {
font-size: 4rem;
display: inline-block;
height: 50px;
line-height: 45px;
position: relative;
top: 50%;
border: 2px solid #fff;
padding: 0 15px;
margin-top: -25px;
float: right;
margin-left: 15px;
border-radius: 10px;
}
.main[role="main"] .price-box-new > span > span {
font-family: 'DB_Heavent_Light' !important;
}
.price-box-new > span:last-child > span {
border-color: #d62825;
}
.price-box-new > span > span > span {
font-size: 2rem;
position: relative;
top: -1px;
}
/* ===================== */
/* START : domain-top-banner-hilight */
/* ===================== */
section.top-search .domain-top-banner-hilight {
cursor: default;
}
section.top-search .domain-top-banner-hilight,
section.top-search .domain-top-banner-hilight > .inner {
position: relative;
overflow: hidden;
padding: 0;
z-index: 0;
padding-top: 7%;
}
section.top-search .domain-top-banner-hilight > .inner > .title {
color: #111;
font-family: 'DB_Heavent_Light',sans-serif !important;
font-size: 5.5rem;
padding-top: 50px;
margin-bottom: 15px;
}
html[lang='en-US'] section.top-search .domain-top-banner-hilight > .inner > .title {
font-size: 5rem;
}
section.top-search .domain-top-banner-hilight > .inner > .title > span {
color: #d62825;
}
section.top-search .domain-top-banner-hilight .content {
position: relative;
}
section.top-search .domain-top-banner-hilight .content:after {
content: '';
display: table;
clear: both;
}
section.top-search .domain-top-banner-hilight .content > .item {
position: relative;
display: block;
width: 100%;
float: left;
}
section.top-search .domain-top-banner-hilight .top-domain-blackbox {
position: relative;
margin: 0;
padding: 0;
list-style: none;
margin-left: -2px;
}
section.top-search .domain-top-banner-hilight .top-domain-blackbox:after {
content: '';
display: table;
clear: both;
}
section.top-search .domain-top-banner-hilight .top-domain-blackbox > li {
position: relative;
float: left;
display: block;
margin-bottom: 2px;
margin-left: 2px;
}
section.top-search .domain-top-banner-hilight .top-domain-blackbox > li > .inner {
position: relative;
text-align: center;
font-size: 4rem;
padding: 0;
width: 250px;
background: #333;
line-height: 50px;
height: 55px;
box-shadow: 0 -2px rgba(0, 0, 0, 0.4) inset;
border-radius: 4px;
}
section.top-search .domain-top-banner-hilight .top-domain-blackbox > li > .inner:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/campaign/bg-stroke-light2xy.png);
background-repeat: repeat;
background-size: 7px;
opacity: 0.1;
}
section.top-search .domain-top-banner-hilight .top-domain-blackbox > li > .inner .tld {
color: #d62825;
font-weight: bold;
font-family: 'DB_Heavent_Light' !important;
}
section.top-search .domain-top-banner-hilight .top-domain-blackbox > li > .inner .price {
color: #fff;
font-size: 3rem;
font-weight: bold;
}
section.top-search .domain-top-banner-hilight .top-domain-blackbox > li > .inner .price > span {
font-weight: normal;
font-size: 2rem;
margin-left: 5px;
}
section.top-search .domain-top-banner-hilight .top-domain-blackbox > li > .inner .tld,
section.top-search .domain-top-banner-hilight .top-domain-blackbox > li > .inner .price {
position: relative;
z-index: 2;
line-height: 1;
display: inline-block;
}
.noselect {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* ===================== */
/* START : banner_tld_promotion */
/* ===================== */
.banner_tld_promotion {
position: relative;
}
.banner_tld_promotion--inner {
position: relative;
padding: 5px 0 45px 0;
}
.banner_tld_promotion--inner:after {
content: '';
display: table;
clear: both;
}
.banner_tld_promotion--tld {
position: relative;
width: 50%;
height: 140px;
float: left;
display: table;
padding: 0 50px;
}
.banner_tld_promotion--tld.tld--dot_com {
/*padding: 0 15px 0 85px;*/
}
.banner_tld_promotion--tld.tld--dot_net {
/*padding: 0 85px 0 15px;*/
}
.banner_tld_promotion--tld--inner {
position: relative;
display: table-cell;
vertical-align: middle;
/* border: 1px solid #b5b5b5; */
box-shadow: 0 0 1px #636363;
background: url(../images/bg-header-domain.png);
background-repeat: no-repeat;
background-size: 300%;
background-position: 39% 81%;
border-radius: 4px;
}
.banner_tld_promotion--tld.tld--dot_com .banner_tld_promotion--tld--inner {
padding-top: 15px;
}
.banner_tld_promotion--tld img {
display: block;
/*max-height: 50%;*/
width: auto;
margin: 0 auto;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
.banner_tld_promotion--tld.tld--dot_com img {
position: relative;
right: -30px;
height: 96px;
}
.banner_tld_promotion--tld.tld--dot_net img {
height: 111px;
}
.banner_tld_promotion--tld .tld--show_price {
position: absolute;
left: 0;
bottom: 0;
width: 130px;
height: 130px;
line-height: 1;
text-align: center;
background: transparent;
font-size: 2.5rem;
color: #fff;
border-radius: 0 0 4px 4px;
display: table;
margin-left: -50px;
margin-bottom: -18px;
}
.banner_tld_promotion--tld.tld--dot_com .tld--show_price {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
bottom: -20px;
}
.banner_tld_promotion--tld.tld--dot_net .tld--show_price {
-ms-transform: rotate(-7deg); /* IE 9 */
-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
transform: rotate(-7deg);
bottom: -10px;
}
.banner_tld_promotion--tld .tld--show_price--inner {
position: relative;
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
background: url(../images/verisign/btn-red.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.banner_tld_promotion--tld .tld--show_price--price {
display: block;
font-size: 3.6rem;
font-weight: bold;
}
.main .banner_tld_promotion--tld .tld--show_price--price {
font-family: "proxima-nova","Century Gothic","Futura","Tw Cen MT","Roboto",Arial,"YuGothic","游ゴシック","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif !important;
}
.banner_tld_promotion--tld .tld--show_price--currency {
display: block;
font-size: 2.5rem;
margin-top: -5px;
}
.main .banner_tld_promotion--tld .tld--show_price--currency {
font-family: 'DB_Heavent_Light' !important;
}
/* ========================================== */
/* START : banner_tld_promotion_new */
/* ========================================== */
.main.page-comnet section.top-search {
padding-bottom: 57px !important;
}
.main.page-comnet section.top-search .inner {
width: 100%;
margin: 0;
padding-left: 260px;
padding-bottom: 0;
}
.main.page-comnet .top-search .inner .form-search .input-domain {
width: 530px;
}
.banner_tld_promotion_new {
position: relative;
margin-bottom: 17px;
}
.banner_tld_promotion_new .brand_ambassador_img {
position: absolute;
}
.banner_tld_promotion_new .banner_tld_promotion_new--title {
font-size: 5rem;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px #171717;
}
html[lang="en-US"] .banner_tld_promotion_new .banner_tld_promotion_new--title {
font-size: 4.5rem;
}
.banner_tld_promotion_new .banner_tld_promotion_new--title span {
position: relative;
z-index: 0;
color: #ffde00;
}
.banner_tld_promotion_new .banner_tld_promotion_new--title span:after {
content: '';
display: block;
position: absolute;
z-index: -1;
left: -10%;
bottom: 8px;
background: url(../images/campaign/comnet/stroke.png);
width: 120%;
height: 10px;
background-position: center;
background-size: cover;
display: none;
}
.banner_tld_promotion_new .banner_tld_promotion_new--title i.fa {
font-size: 2rem;
color: #ccc;
position: relative;
top: -15px;
}
.banner_tld_promotion_new .banner_tld_promotion_new--title i.fa.fa-quote-left {
margin-right: 10px;
}
.banner_tld_promotion_new .banner_tld_promotion_new--title i.fa.fa-quote-right {
margin-left: 10px;
}
.banner_tld_promotion_new--content {
padding-left: 260px;
}
.banner_tld_promotion_new--content:after {
content: '';
display: table;
clear: both;
}
.banner_tld_promotion_new--boxes {
border-radius: 4px;
/*box-shadow: 0 0 5px #909090;*/
overflow: hidden;
height: 160px;
}
.banner_tld_promotion_new--boxes:after {
content: '';
display: table;
clear: both;
}
.banner_tld_promotion_new--box {
width: 32%;
float: left;
height: 160px;
line-height: 1;
display: table;
text-align: center;
color: #000;
margin: 0 2px;
text-shadow: 1px 1px 1px #fff;
}
.banner_tld_promotion_new--box--inner {
display: table-cell;
vertical-align: middle;
}
.banner_tld_promotion_new--box--inner ul {
width: 90%;margin:0 auto;
}
.banner_tld_promotion_new--box--inner ul li {
width: 100%;float: left;background:#151515;padding: 5px;margin: 1px 0;
}
.banner_tld_promotion_new--box:not(.bg-dark) {
background: #bababa;
background: -moz-linear-gradient(top, #bababa 0%, #ffffff 50%, #bababa 100%);
background: -webkit-linear-gradient(top, #bababa 0%,#ffffff 50%,#bababa 100%);
background: linear-gradient(to bottom, #bababa 0%,#ffffff 50%,#bababa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#bababa',GradientType=0 );
box-shadow: 1px 1px 1px #202020;
/*background: #fedf4d;
background: -moz-linear-gradient(left, #fedf4d 0%, #fdee80 50%, #f6ba1c 100%);
background: -webkit-linear-gradient(left, #fedf4d 0%,#fdee80 50%,#f6ba1c 100%);
background: linear-gradient(to right, #fedf4d 0%,#fdee80 50%,#f6ba1c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fedf4d', endColorstr='#f6ba1c',GradientType=1 );*/
}
.banner_tld_promotion_new--box.bg-dark {
background: url(../images/campaign/comnet/box-bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: none;
}
.banner_tld_promotion_new--box img {
display: block;
margin: 0 auto;
}
.banner_tld_promotion_new--box--title {
position: relative;
font-size: 3rem;
}
.banner_tld_promotion_new--box--title:after {
content: '';
/*display: block;
position: absolute;
left: 25%;
bottom: 0;
width: 50%;
height: 2px;
background: #f5f6f6;
background: -moz-linear-gradient(left, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%);
background: -webkit-linear-gradient(left, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
background: linear-gradient(to right, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 );*/
display: block;
position: absolute;
left: 10%;
bottom: -2px;
background: url(../images/campaign/comnet/stroke.png);
width: 80%;
height: 3px;
background-position: center;
background-size: cover;
display: none;
}
.banner_tld_promotion_new--box--title > span {
position: relative;
z-index: 0;
color: #d62825;
}
.banner_tld_promotion_new--box--title > span:after {
content: '';
display: block;
position: absolute;
z-index: -1;
left: -10%;
bottom: 1px;
background: url(../images/campaign/comnet/stroke.png);
width: 120%;
height: 10px;
background-position: center;
background-size: cover;
display: none;
}
.banner_tld_promotion_new--box .domain {
font-size: 2.5rem;
font-weight: bold;
}
.banner_tld_promotion_new--box .price {
font-size: 2.5rem;
color: #fff;
font-weight: bold;text-shadow: none;
}
.banner_tld_promotion_new--box .price span {
font-size: 2rem;
font-weight: normal;
}
.banner_tld_promotion_new--box:not(.cheapest-tld) .domain {
margin-right: 15px;
color: #fff; text-shadow: none;font-weight: normal;
}
.banner_tld_promotion_new--box.cheapest-tld .price,
.banner_tld_promotion_new--box.cheapest-tld .domain {
display: block;
}
.banner_tld_promotion_new--box.cheapest-tld .domain {
font-size: 2rem;
line-height: 0.65;
color: #fff;
text-shadow: none;
font-weight: normal;
}
.banner_tld_promotion_new--box--domains.dark {background: #000;margin:5px auto;padding: 10px 0;width: 90%;}
/*newfooter*/
#footer .footer--sevices {
background: #323232;
margin: 0;
padding: 30px 0;
font-family: sans-serif;
}
#footer .footer--sevices,
#footer .footer--sevices--inner {
position: relative;
}
#footer .footer--sevices--inner {
width: 960px;
margin: 0 auto;
padding: 0;
}
#footer .footer--sevices--inner:after {
content: '';
display: table;
clear: both;
}
#footer .footer--sevices [target="_blank"] i {
display: none;
}
#footer .footer--sevices .list {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
#footer .footer--sevices .list.left {
width: 699px;
float: left !important;
clear: none !important;
border-right: 1px solid #404040;
}
#footer .footer--sevices .list.right {
width: 260px;
padding-left: 60px;
float: right !important;
clear: none !important;
}
#footer .footer--sevices .list:after {
content: '';
display: table;
clear: both;
}
#footer .footer--sevices .list > li {
position: relative;
display: block;
float: left;
width: 100%;
text-align: left;
height: auto;
line-height: 1
}
#footer .footer--sevices .list.left > li {
width: calc(100% / 4);
}
#footer .footer--sevices .list > li:nth-child(1),
#footer .footer--sevices .list > li:nth-child(2),
#footer .footer--sevices .list > li:nth-child(3),
#footer .footer--sevices .list > li:nth-child(4) {
margin-bottom: 15px;
}
#footer .footer--sevices .list.left > li:nth-child(4n+1){
clear: left;
}
#footer .footer--sevices .list > li > a {
color: #fff;
display: inline;
transition: all ease 0.3s;
font-family: 'DB_Heavent_Light';
font-size: 2rem !important;
}
#footer .footer--sevices .list > li:hover > a {
color: #fff;
}
#footer .footer--sevices .list .dd > .dd--m {
position: relative;
display: block;
background: transparent;
margin-top: 5px;
}
#footer .footer--sevices .list .dd > a:hover,
#footer .footer--sevices .list .dd > a:focus {
text-decoration: none;
}
#footer .footer--sevices .list .dd:hover .dd--m {
opacity: 1;
visibility: visible;
}
#footer .footer--sevices .list .dd .dd--m:after {
content: '';
display: table;
clear: both;
}
#footer .footer--sevices .list .dd > .dd--m > li {
display: block;
float: left;
width: 100%;
height: 30px;
line-height: 30px;
}
#footer .footer--sevices .list .dd > .dd--m > li a {
font-size: 1rem;
color: #999;
display: block;
padding: 0;
}
#footer .footer--sevices .list .dd > .dd--m > li a:hover {
text-decoration: underline;
}
/*======================================*/
/* page cp shop */
/*======================================*/
.main.page-cp-shop section.top-search {
padding: 0 !important;
background-image: url(../images/campaign/shop/cp-shop-background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 445px
}
.main.page-cp-shop section.top-search .top-search-inner > .inner {
padding: 30px 0 15px 0;float: right;
}
.main.page-cp-shop section.top-search .cp--heading {
position: relative;
margin: 13% 0 3% 0;
padding: 0;
}
.main.page-cp-shop section.top-search .cp--heading:after {
content: '';
display: table;
clear: both;
}
.main.page-cp-shop section.top-search .ambassador-122018 {float: left;}
.main.page-cp-shop section.top-search .ambassador-122018 .new-photo-122018 {position: absolute;}
.main.page-cp-shop section.top-search .inner-right-122018{width: 640px; float: right;}
.main.page-cp-shop section.top-search .cp--heading h1 {
position: relative;
line-height: 1;
font-family: 'DB_Heavent_Light' !important;
font-size: 4.3rem;
margin: 0;
color: #fff;
text-align: center;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.main.page-cp-shop section.top-search .cp--heading h1 span {color: #ffaa00;font-weight: 600;}
.main.page-cp-shop section.top-search .cp--heading h2 {color: #fff; text-align: center;font-size: 26px;margin-top:0;font-family: 'DB_Heavent_Light' !important;}
.main.page-cp-shop section.top-search .cp--heading .cp--heading--inner {width: 70%;float: right;margin:3% 0;}
.main.page-cp-shop section.top-search .cp--heading .cp--heading--inner--left {width: 30%;float: left;}
.main.page-cp-shop section.top-search .cp--heading .cp--heading--inner--left .new--domain--shop {width: 223px;margin:0 auto; text-align: center;}
.main.page-cp-shop section.top-search .cp--heading .cp--heading--inner--left .box--price--domain--shop {
background-image: url(../images/campaign/shop/cp-shop-bg-price.png);padding: 15px 0; text-align: center;color: #000;font-size: 22px;
background-repeat: no-repeat;
background-position: center;
line-height: 1;
margin-top: -11%;
margin-left: 18%;
}
html[lang="en-US"] .main.page-cp-shop section.top-search .cp--heading h1 > span:not(.dm-logo):not(.number) {
font-size: 3.2rem;
line-height: 0.55;
display: inline-block;
position: absolute;
top: 9px;
right: -247px;
font-family: 'DB_Heavent_Light' !important;
}
.main.page-cp-shop section.top-search .cp--heading h1:before,
.main.page-cp-shop section.top-search .cp--heading h1:after {
position: absolute;
top: 0;
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
color: #ccc;
font-size: 2rem;
}
/*.main.page-cp-shop section.top-search .cp--heading h1:before {
content: '\f10d';
left: -27px;
}
.main.page-cp-shop section.top-search .cp--heading h1:after {
content: '\f10e';
right: -30px;
}*/
/* html[lang="en-US"] .main.page-cp-shop section.top-search .cp--heading h1:after {*/
/*right: -300px;*/
/*}*/
.main.page-cp-shop section.top-search .cp--heading h2 {
font-family: 'DB_Heavent_Light' !important;
font-size: 3.2rem;
color: #d62825;
text-align: center;
margin: 0;
margin-bottom: 15px;
line-height: 1;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.main.page-cp-shop section.top-search .cp--heading h1 > span.number {
position: relative;
color: #d62825;
font-family: "Century Gothic" !important;
font-size: 0.8em;
font-weight: bold;
}
.main.page-cp-shop section.top-search .cp--heading h1 > span.number:after {
content: '';
display: block;
position: absolute;
left: 1px;
bottom: -7px;
width: 145px;
height: 15px;
background-image: url(../images/campaign/shop/stroke.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.main.page-cp-shop section.top-search .dm-logo {
position: relative;
display: inline-block;
}
.main.page-cp-shop section.top-search .dm-logo.shop {
position: absolute;
top: 0;
left: 0;
width: 141px;
height: 59px;
}
.main.page-cp-shop section.top-search .dm-logo:after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.main.page-cp-shop section.top-search .dm-logo.shop:after {
background-image: url(../images/campaign/shop/shop-logo.png);
}
.main.page-cp-shop section.top-search .showprice,
.main.page-cp-shop section.top-search .showprice--inner {
position: relative;
margin: 0;
padding: 0;
}
.main.page-cp-shop section.top-search .showprice {
margin-top: 15px;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.main.page-cp-shop section.top-search .showprice--inner:after {
content: '';
display: table;
clear: both;
}
.main.page-cp-shop section.top-search .showprice .dm {
float: left;
padding: 0 14px;
font-size: 3rem;
color: #fff;
height: 45px;
line-height: 45px;
display: inline-block;
border-radius: 4px;
background: #45484d;
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
background: linear-gradient(to bottom, #45484d 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
}
.main.page-cp-shop section.top-search .showprice .dm--name,
.main.page-cp-shop section.top-search .showprice .dm--price {
display: inline-block;
line-height: 1;
}
.main.page-cp-shop section.top-search .showprice .dm--name {
font-family: "Century Gothic", Tahoma, sans-serif !important;
font-weight: bold;
font-size: 2.4rem;
}
.main.page-cp-shop section.top-search .showprice .dm--price {
font-family: "Century Gothic" !important;
font-weight: bold;
font-size: 2.4rem;
color: #ddbc06;
}
.main.page-cp-shop section.top-search .showprice .dm--price > span {
position: relative;
top: -1px;
font-weight: normal;
font-size: 1.8rem;
color: #ffd800;
}
.main.page-cp-shop section.top-search .showprice .due {
position: relative;
z-index: 1;
float: left;
font-size: 1.65rem;
margin-left: 5px;
height: 45px;
line-height: 45px;
display: inline-block;
float: left;
padding: 0 12px;
padding-left: 15px;
color: #fff;
text-shadow: 1px 1px 1px #000;
}
.main.page-cp-shop section.top-search .showprice .due:after {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 2px;
left: -16px;
width: 162px;
height: 42px;
background-image: url(../images/campaign/shop/due-bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
html[lang="en-US"] .main.page-cp-shop section.top-search .showprice .due:after {
width: 142px;
}
.main.page-cp-shop section.top-search .showregistered {
position: relative;
padding: 10px 0;
background-image: url(../images/campaign/shop/bg-red.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.main.page-cp-shop section.top-search .showregistered--inner {
position: relative;
width: 960px;
margin: 0 auto;
}
.main.page-cp-shop section.top-search .showregistered--inner:after {
content: '';
display: table;
clear: both;
}
.main.page-cp-shop section.top-search .registered-img {
position: relative;
width: 583px;
height: 150px;
display: inline-block;
float: left;
background-image: url(../images/campaign/shop/registered-domain.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.main.page-cp-shop section.top-search .showregistered .brand-amb {
position: absolute;
z-index: 1;
right: 15px;
bottom: -10px;
display: block;
width: 250px;
height: 455px;
background-image: url(../images/campaign/shop/jay.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.main.page-cp-shop section.top-search .registered-txt {
position: relative;
z-index: 2;
top: 7px;
display: inline-block;
width: 140px;
height: 140px;
line-height: 140px;
font-family: 'DB_Heavent_Med' !important;
font-size: 4rem;
text-shadow: 1px 1px 1px #fff;
letter-spacing: -0.5px;
text-align: center;
color: #111;
background-image: url(../images/campaign/shop/price-bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.main.page-cp-shop section.top-search.multi-domain-search-opened .showregistered,
.main.page-cp-shop section.top-search.multi-domain-search-opened .brand-amb {
display: none;
}
/*======================================*/
/* page cp 100thb */
/*======================================*/
.main.page-cp-100thb section.top-search {
padding: 0 !important;
background-image: url(../images/campaign/100thb/bg-landing-page-domain.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.main.page-cp-100thb section.top-search .top-search-inner {
z-index: 2;
padding-left: 260px;
}
.main.page-cp-100thb section.top-search .showjay {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
padding: 0;
background: transparent;
}
.main.page-cp-100thb section.top-search.multi-domain-search-opened .showjay {
display: none;
}
.main.page-cp-100thb section.top-search .showjay--inner {
position: relative;
width: 960px;
margin: 0 auto;
}
.main.page-cp-100thb section.top-search .showjay--inner:after {
content: '';
display: table;
clear: both;
}
.main.page-cp-100thb section.top-search .showjay .brand-amb {
position: relative;
z-index: 1;
display: block;
width: 250px;
height: 455px;
background-image: url(../images/campaign/100thb/photo-Chanathip.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.main.page-cp-100thb section.top-search .cp--heading h1 {
position: relative;
display: table;
height: 59px;
line-height: 59px;
padding-left: 5px;
font-family: 'DB_Heavent_Light' !important;
font-size: 4.7rem;
margin: 0 auto;
color: #111;
text-align: center;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.main.page-cp-100thb section.top-search .cp--heading h1:before,
.main.page-cp-100thb section.top-search .cp--heading h1:after {
position: absolute;
top: 0;
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
color: #c2c2c2;
font-size: 2rem;
}
.main.page-cp-100thb section.top-search .cp--heading h1:before {
content: '\f10d';
left: -27px;
}
.main.page-cp-100thb section.top-search .cp--heading h1:after {
content: '\f10e';
right: -30px;
}
.main.page-cp-100thb section.top-search .cp--heading h1 > span.number {
color: #d62825;
font-family: "Century Gothic" !important;
font-weight: bold;
}
.main.page-cp-100thb section.top-search .cp--heading h1 > span.text {
position: relative;
top: -3px;
color: #111;
font-family: "DB_Heavent_Light" !important;
font-weight: bold;
}
.main.page-cp-100thb section.top-search .cp--heading h1 > span.text:after {
content: '';
display: block;
position: absolute;
left: -6px;
bottom: -2px;
width: 145px;
height: 15px;
background-image: url(../images/campaign/100thb/stroke-red.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.main.page-cp-100thb section.top-search .cp--heading h1 > span.subfix {
position: relative;
top: -1px;
font-size: 3rem;
}
.main.page-cp-100thb section.top-search .cp--heading img {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
/*top-search mdate="2018-04-30"*/
section.top-search[data-mdate="2018-04-30"] {
background: #111;
}
section.top-search[data-mdate="2018-04-30"] .top-search-header {
background-image: url(../images/mdate/2018-04-30/domain-landin-page2018-bgtop.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
section.top-search[data-mdate="2018-04-30"] .top-search-header-inner {
width: 960px;
margin: 0 auto;
padding: 45px 15px;
}
section.top-search[data-mdate="2018-04-30"] .top-search-header h1 {
text-align: center;
color: #fff;
font-size: 5rem;
margin: 0;
}
section.top-search[data-mdate="2018-04-30"] .top-search-header h1 > span {
color: #d62825;
}
section.top-search[data-mdate="2018-04-30"] .top-search-header-inner:before,
section.top-search[data-mdate="2018-04-30"] .top-search-header-inner:after {
content: '';
display: table;
clear: both;
}
section.top-search[data-mdate="2018-04-30"] .top-search-inner {
width: 100%;
background: #d62825;
}
section.top-search[data-mdate="2018-04-30"] .inner {
margin: 0 auto;
padding: 20px 0;
}
section.top-search[data-mdate="2018-04-30"] {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
}
section.top-search[data-mdate="2018-04-30"] img {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
.header .nav-global .list-nav-global>li>a>i.icon.icon--link-blank {
display: none;
}
/* corner head-banner */
.corner-banner .shape-corner{
position: absolute;
display: inline-block;
width: 350px;
height: 300px;
left: 0;
top: 0;
text-align: left;
background: url('https://domain.z.com/la/ndzcom_common/images/corner-bg.png') no-repeat;
background-size: 100%;
background-position: left top;
z-index: 0;
}
.contain-text{
position: relative;
z-index: 2;
padding: 0;
}
.corner-banner .title{
line-height: 1;
width: 170px;
margin-bottom: 15px;
word-break: break-all;
color: #000;
z-index: 3;
position: relative;
transform: rotate(-37deg);
padding: 10px;
margin-left: -3px;
margin-top: 30px;
text-transform: capitalize;
font-size: 27px;
font-weight: 800;
}
.corner-banner .title .sm{ display: block; font-weight: normal;}
.corner-banner .sub-title{
transform: rotate(-37deg);
color: #030303;
padding-left: 100px;
line-height: 1.5;
vertical-align: middle;
display: inline-block;
font-size: 12px;
text-transform: uppercase;
padding-left: 7px;
margin-top: -8px;
margin-left: 30px;
}
.corner-banner .sm{ font-size: .9em;}
.corner-banner .circle-label{
position: absolute;
z-index: 1;
top: -24px;
right: 108px;
width: 110px;
height: 110px;
display: inline-block;
border-radius: 50%;
text-align: center;
font-size: 40px;
line-height: 110px;
vertical-align: middle;
padding: 0;
text-align: center;
color: #fff;
font-weight: 800;
border: 2px solid #9e1b19;
background: rgb(255,0,0);
background: linear-gradient(326deg, rgba(81, 0, 0, 1), rgba(221, 45, 45, 1) 44.96%, rgba(144, 0, 0, 1) 90%);
}
.top-main-visual.share-host > .container > .box-content{ padding-left: 80px;}
/*discount 50%*/
section.discount--50off {
width: 100%;
float: left;
position: relative;
padding: 10px 0;
background-image: url(../images/50off-for-website-bg.jpg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
}
section.discount--50off .boxL {
width: 60%;
float: left;
}
section.discount--50off.la .boxL h1{
font-size: 30px;
text-align: center;
color:#000;
font-weight: 600;
background:#ecde00;
padding:10px 20px;
width: fit-content;
line-height: 1.2;
margin:10% auto 0 auto;
}
section.discount--50off.la .boxL h1 span {color:#da0a02;}
section.discount--50off.la .boxL h2{
font-size: 16px;
text-align: center;
background:#000000;
color:#ecde00;
padding:10px 20px;
width: fit-content;
line-height: 1.2;
margin:1% auto 0 auto;
}
section.discount--50off.la .boxL p{
font-size: 16px;
text-align: center;
color:#da0a02;
line-height: 1.2;
margin:1% auto 0 auto;
}
/*en-th*/
section.discount--50off .boxL h1.th{
font-family: 'DB_Heavent_Original';
font-size: 45px;
text-align: center;
color:#000;
font-weight: 600;
background:#ecde00;
padding:10px 20px;
width: fit-content;
line-height: 1.2;
margin:8% auto 0 auto;
text-transform: uppercase;
}
section.discount--50off .boxL h1.th span {color:#da0a02;}
section.discount--50off .boxL h2.th{
font-size: 24px;
text-align: center;
background:#000000;
color:#ecde00;
padding:10px 20px;
width: fit-content;
line-height: 1;
margin:1% auto 0 auto;
}
section.discount--50off .boxL p.th{
font-size: 22px;
text-align: center;
color:#da0a02;
line-height: .9;
margin:1% auto 0 auto;
}
section.discount--50off .boxL h1.en{
font-family: 'DB_Heavent_Original';
font-size: 35px;
text-align: center;
color:#000;
font-weight: 600;
background:#ecde00;
padding:10px 20px;
width: fit-content;
line-height: 1.2;
margin:7% auto 0 auto;
text-transform: uppercase;
}
section.discount--50off .boxL h1.en span {color:#da0a02;}
section.discount--50off .boxL h2.en{
font-size: 24px;
text-align: center;
background:#000000;
color:#ecde00;
padding:10px 20px;
width: fit-content;
line-height: .9;
margin:1% auto 0 auto;
}
section.discount--50off .boxL p.en{
font-size: 20px;
text-align: center;
color:#da0a02;
line-height: .9;
margin:1% auto 0 auto;
}
section.discount--50off .boxR {
width: 40%;
float: right;
}
section.discount--50off .boxR img {width: auto;text-align: center;margin:0 auto;}
section.discount--50off .boxR span.discount50off {
position: absolute;
width: 110px;
height: 110px;
border-radius: 100%;
padding: 20px 5px;
text-align: center;
background:#d62825;
margin-left: -3%;
}
section.discount--50off .boxR span.discount50off p.off{
font-size: 24px;
color:#fff;
text-align: center;
line-height: .8 !important;
}
section.discount--50off .boxR span.discount50off p.off span {font-size: 45px;}
section.discount--50off .boxR span.discount50off p.off span.small {font-size: 28px;}
@media(min-width: 1600px){
section.discount--50off .boxR span.discount50off {}
}
/*.discount 50%*/
/*index domain Transfer 30.1.2021*/
section.domain--transfer2021 {
background:#fff;
text-align: center;
height: auto;float: left;vertical-align: top;margin-top:15px;width: 100%;padding: 20px;}
section.domain--transfer2021 .box--bannertop {
width: 100%;
margin:0 auto;
text-align: center;}
section.domain--transfer2021 .box--bannertop img {
width:28%;
margin: 5px;}
@media (max-width: 1024px) {
section.domain--transfer2021 .box--bannertop img {width:32%;}
}
section.domain--transfer2021 .left {width: 50%;float: left;}
section.domain--transfer2021 .right {width: 50%;float: right;}
section.domain--transfer2021 img {width: 95%;}
section.domain--transfer2021 img:hover{border:3px red solid;opacity: 0.8;}
section.domain--transfer2021 a .icon--link-blank:before {display: none;}
/*promotions2021*/
section.page--promotions2021{
width: 100%;
float: left;
background:#fff;
padding: 30px 0;
}
section.page--promotions2021 h3.en {
margin: 0 0 25px 0;
padding: 0;
font-weight: normal;
font-size: 4em;
text-align: center;
color: #323232;
font-family: 'DB_Heavent_Original',sans-serif;
}
section.page--promotions2021 h3.la {
margin: 0 0 25px 0;
padding: 0;
font-weight: normal;
font-size: 3em;
text-align: center;
color: #323232;
font-family: 'DB_Heavent_Original',sans-serif;
}
section.page--promotions2021 h3.en span,
section.page--promotions2021 h3.la span{color: #d62825;}
section.page--promotions2021 ul {
width: 100%;
float: left;
padding: 0 16px;
margin: 0;
}
section.page--promotions2021 ul li {
width: 33.33%;
padding: 5px;
margin:0 auto;
list-style: none;
float: left;
}
section.page--promotions2021 ul li img{
width: 100%;
text-align: center;
margin:0 auto;
}
section.page--promotions2021 ul li img:hover{
border:2px red solid;
}
a .icon--link-blank:before{display: none !important;}
/*.promotions2021*/
/*Reasons to Choose Z.com*/
section.page--reasons{
width: 100%;
float: left;
padding: 50px 0;
margin:0 auto;
background:#f8f8f8;
}
section.page--reasons h1.en {
margin: 0 0 25px 0;
padding: 0;
font-weight:normal;
font-size: 4em;
text-align: center;
color: #323232;
font-family:'DB_Heavent_Original',sans-serif;
}
section.page--reasons h1.en span {color:#d62825;}
section.page--reasons ul {
width: 100%;
float: left;
padding: 1% 5% 0 5%;
margin:0;
display:inline-block;
justify-content: center;
}
section.page--reasons ul li {
width: 33.33%;
float: left;
margin:0;
padding:5px;
list-style: none;
}
section.page--reasons ul li .bgwhite {
width: 100%;
float: left;
padding: 10px 3%;
margin:0;
background:#fff;
}
section.page--reasons ul li .bgwhite img {
width: auto;
float: left;
margin:0;
padding: 0 4% 0 0;
}
section.page--reasons ul li .bgwhite p.en{
font-family: "DB_Heavent_Original", "Open Sans", "Tahoma", "Arial", sans-serif;
font-size: 22px;
text-align:left;
padding:30px 0 0 130px;
margin:0;
color:#646464;
line-height:1;
}
section.page--reasons ul li .bgwhite p.en.last-child{padding-top:10px;}
section.page--reasons ul li .bgwhite p.la{
font-family: "DB_Heavent_Original", "Open Sans", "Tahoma", "Arial", sans-serif;
font-size: 18px;
text-align:left;
padding:30px 0 0 130px;
margin:0;
color:#646464;
line-height:1;
}
section.page--reasons ul li .bgwhite p.la.last-child{padding-top:10px;}
.icon--download:before {
content: "\e62c";
font-size: 21px;
color: #fff !important;
padding-right: 15px;
}
/*set-sticky 3.2.2021*/
.sticky-container{
padding:0px;
margin:0px;
position:fixed;
right:-170px;
top: 24rem;
width:235px;
z-index: 1100;
}
.sticky li{
list-style-type:none;
background-color:red;
color:#fff;
height:55px;
padding:0px;
margin:0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor:pointer;
}
.sticky li.whatsapp{
background:#25d366;
border-radius: 4px 0 0 4px;
color:#fff;
height:55px;
padding:0px;
margin:0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor:pointer;
}
.sticky li.facebook{
background:#4267B2;
color:#fff;
height:55px;
padding:0px;
margin:0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor:pointer;
}
.sticky li.call{
background:#d30000;
color:#fff;
height:55px;
padding:0px;
margin:0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor:pointer;
}
.sticky li:hover{
margin-left:-100px;
color:#fff;
}
.sticky li img{
float:left;
margin:5px 12px;
width: 45px;
}
.sticky li p{
padding-top:20px;
margin:0px;
line-height:16px;
font-size:16px;
color:#fff;
line-height: 1.2;
text-decoration:none;
}
.sticky li p a{
text-decoration:none;
color:#fff;
}
.sticky li p a:hover{
text-decoration:none;
}
.popular-en {
background:#ff0000;
padding: 2px 4px;
color: #fff;
line-height: .5;
font-size: 12px;
border-radius: 3px;
letter-spacing:0;
margin-left: 8px;
}
.slae-en {
background:#fff600;
padding: 2px 10px;
margin-left: 8px;
color: #000;
line-height: .5;
font-size: 12px;
border-radius: 3px;
letter-spacing:0;
}
.popular-la {
background:#ff0000;
padding: 2px 4px;
color: #fff;
line-height: .5;
font-size: 13px;
border-radius: 3px;
letter-spacing:0;
margin-left: 8px;
}
.slae-la {
background:#fff600;
padding: 2px 4px;
color: #000;
line-height: .5;
font-size: 13px;
border-radius: 3px;
letter-spacing:0;
margin-left: 8px;
}