/*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;
}
.zcom-global-header {
position: absolute;
}
#wrap {
/*padding-top: 128px;*/
padding-top: 0;
}
.region-select-country li a {
width: 60px;
}
.region-select-country li a.is-th {
background-image: url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Fflag_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 {
position: relative;
z-index: 1;
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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fbanner-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-domain_on.png');}
.home-nav-list > li.domain > .service-link .bg-link:hover {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-domain.png');}
.home-nav-list > li.hosting > .service-link .bg-link {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-hosting_on.png');}
.home-nav-list > li.hosting > .service-link .bg-link:hover {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-hosting.png');}
.home-nav-list > li.wp > .service-link .bg-link {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-wp_on.png');}
.home-nav-list > li.wp > .service-link .bg-link:hover {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-wp.png');}
.home-nav-list > li.cloud > .service-link .bg-link {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-cloud_on.png');}
.home-nav-list > li.cloud > .service-link .bg-link:hover {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-cloud.png');}
.home-nav-list > li.ssl > .service-link .bg-link {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-ssl_on.png');}
.home-nav-list > li.ssl > .service-link .bg-link:hover {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-ssl.png');}
.home-nav-list > li.storeapp > .service-link .bg-link {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-storeapp_on.png');}
.home-nav-list > li.storeapp > .service-link .bg-link:hover {background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Fhome-nav-storeapp.png');}
/*sign in*/
section.section-sign { padding: 0 0 100px 0; width: 100%; height: auto; }
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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-arrowDown.png')no-repeat 15px;
}
.icon--c_storage-red {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Ficon-red-ssd.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_scale1-red {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Ficon-red-scale.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_email-red {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Ficon-red-email.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_server-red{background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-red%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fbg-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fbanner-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fbg-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Flocked-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fbg-header-wordpress.png')left top no-repeat;*/
background-color: #d62825;
background-image: url(/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Fbg.wordpress.png);
background-position: center;
height:530px;
max-height: 530px;
/*padding: 50px 0;*/
padding: 0;
overflow: hidden;
}
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.5em; font-weight: 400;background:url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fmagnifier-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fbg-header-domain.gif')center top repeat; height:auto;}
section.top-main-visual.top-domain .container.domain { padding: 60px 0;background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fbg_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 button[type="submit"] {
padding: 0 !important;
font-size: 21px !important;
float: none !important;
width: 200px !important;
}
.multi-domain-search .multi-domain-search-opener {
top: 24px !important;
right: 215px !important;
}
#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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Fbg_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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Fbg_btn-next.png')right no-repeat; width: 20px;height: 43px;
}
.icon--thin-arrow-prev{background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Fbg_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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Fbg_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: 20px 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%;}
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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fbg_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 { float: none !important; }
.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: 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.color{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; width: 100%; }
/*16.4.2020*/
.discountL {
position: absolute;
z-index: 100;
top: 0;
left: 0;
}
.discountL img {width: 390px;}
@media (max-width: 1366px) {
.discountL img.dis--img {width: 290px !important;}
}
/*.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; display: table; }
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-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:#000; 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;color:#000;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:#000; 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;color:#000;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;float: left;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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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;}
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: 10px 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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-cpu.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_storage {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-storage.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_restoration {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-restoration.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_ram {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-ram.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_original_domain {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-original_domain.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_page {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-page.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_email {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-email.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}*/
.icon--c_storage-gray {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-storage-gray.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_original_domain-gray {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-original_domain-gray.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_page-gray {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-page-gray.png')left no-repeat; width: 22px;height: 20px; margin-bottom: -4px;margin-right: 10px;}
.icon--c_email-gray {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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;
}
p.btn-cart {
padding-top: 24px !important;
}
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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fservice_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(/asset?u=http%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DQuicksand);
.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;
}
/*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('/asset?u=https%3A%2F%2Fdemosthenes.info%2Fassets%2Fimages%2Fpolina.jpg') no-repeat;*/
background-size: cover;
transition: 1s opacity;
}
/*fonts-face*/
@font-face {
font-family: 'ac_espressaregular';
src: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fac%2Fac_espressa-webfont.eot');
src: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fac%2Fac_espressa-webfont.eot%3F%23iefix') format('embedded-opentype'),
url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fac%2Fac_espressa-webfont.woff2') format('woff2'),
url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fac%2Fac_espressa-webfont.woff') format('woff'),
url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fac%2Fac_espressa-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'djb_chalk_it_upregular';
src: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdjb%2Fdjb_chalk_it_up-webfont.eot');
src: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdjb%2Fdjb_chalk_it_up-webfont.eot%3F%23iefix') format('embedded-opentype'),
url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdjb%2Fdjb_chalk_it_up-webfont.woff2') format('woff2'),
url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdjb%2Fdjb_chalk_it_up-webfont.woff') format('woff'),
url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdjb%2Fdjb_chalk_it_up-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DB_Helvethaica_X';
src: url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X.eot");
src: url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X.woff") format('woff'),
url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X.ttf") format('truetype'),
url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X.svg") format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DB_Helvethaica_X';
src: url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X_Light.eot");
src: url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X_Light.woff") format('woff'),
url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X_Light.ttf") format('truetype'),
url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X_Light.svg") format('svg');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'DB_Helvethaica_X';
src: url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X_Med.eot");
src: url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X_Med.woff") format('woff'),
url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X_Med.ttf") format('truetype'),
url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fdb%2FDB_Helvethaica_X_Med.svg") format('svg');
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: 'skv';
src: url("/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Ffonts%2Fsukhumvit%2Ftext-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fbanner-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-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('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Ficon-check-white-small.png')left top no-repeat; }
/*home*/
section.top-main-visual.home {background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fimages%2Fbanner-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-content .sign .btn {
border-radius: 0;
font-size: 13px !important;
}
section.section-sign {
float: none;
}
section.section-sign .box-sign .title {
text-align: left;
font-size: 16px !important;
padding: 0;
color: #646464;
}
section.section-sign .box-sns ul.list-signin li.facebook a {
background-color: #4774ba;
background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fcommon%2Fimages%2Ficon_sns-fb.png') !important;
background-position: 27px 50% !important;
background-repeat: no-repeat !important;
}
section.section-sign .box-sns ul.list-signin li.github a {
background-color: #474646;
background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fcommon%2Fimages%2Ficon_sns-gh.png') !important;
background-position: 27px 50% !important;
background-repeat: no-repeat !important;
}
section.section-sign .box-sns ul.list-signin li.twitter a {
background-color: #3facd5;
background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fcommon%2Fimages%2Ficon_sns-tw.png') !important;
background-position: 27px 50% !important;
background-repeat: no-repeat !important;
}
section.section-sign .box-sns ul.list-signin li.linkedin a {
background-color: #498bad;
background-image: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fcommon%2Fimages%2Ficon_sns-ld.png') !important;
background-position: 27px 50% !important;
background-repeat: no-repeat !important;
}
section.section-sign .box-signin {
padding: 0;
}
section.section-sign .box-sign {
float: none;
}
/*24/8/2016*/
#footer .inner-left ul.navi li:nth-child(3n+1) {
clear: left;
}
/*25/8/2016*/
.wp-plan-section ul.shared-lineup-detail i.icon {
margin-right: 15px;
}
.wp-plan-section ul.shared-lineup-detail li span {
color: #d62825;
}
.wp-plan-section .box-top {
position: absolute;
right: 0;
bottom: 100%;
width: 100%;
height: 40px;
line-height: 40px;
padding: 0px 15px;
color: rgb(255, 255, 255);
background-color: #d62825;
margin-bottom: 4px;
font-size: 24px;
text-align: center;
}
.wp-plan-section .plan-s,
.wp-plan-section .plan-l {
border: none !important;
border-top: 4px solid #323232 !important;
}
.wp-plan-section .plan-s {
box-shadow: -1px 1px 1px #dcdcdc;
}
.wp-plan-section .plan-l {
box-shadow: 1px 1px 1px #dcdcdc;
}
/*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;
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;
line-height: 100%;
border: 1px solid #e6e6e6;
background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fcommon%2Fimages%2Ficon-arrow-select.png%3F1456914791') 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;
}
.container {
width: 970px !important;
}
.wp-plan-section .shared-lineup-detail > li {
height: 25px;
line-height: 25px;
}
#btn-to-cart {
padding-left: 22px;
}
#btn-to-cart > a::before {
top: 4px;
content: "\e65a";
font-family: "ZcomIcon";
font-size: 16px;
left: 0;
line-height: 1;
margin-right: 20px;
position: absolute;
}
.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;
margin-top: 25px;
}
.signup-remark > a {
color: #d62825;
text-decoration: underline;
}
.footer .list-links li a {
font-size: 11px;
}
section.top-shared-feature.is-dark {
background: #323232;
}
section.top-shared-feature.is-dark h2,
section.top-shared-feature.is-dark p {
color: #fff;
}
.top-shared-feature h2 > img {
margin-right: 15px;
}
section.top-shared-feature.is-img-bottom div > img {
position: relative;
bottom: -40px;
margin-top: -40px;
}
section.top-main-visual .netdesigngroup-link-on-banner {
position: absolute;
z-index: 100;
top: 0;
right: 0;
}
section.top-main-visual .netdesigngroup-link-on-banner img {
width: 200px !important;
}
section.top-main-visual .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(/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Ficon_facebook.png);;
}
.footer .list-sns li a.facebook:hover,
.footer .list-sns li a.facebook:focus {
background-image: url(/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Ficon_facebook.png);
background-position: -32px 0px;
}
.footer .list-sns li a.twitter {
background: url(/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Ficon_twitter.png);;
}
.footer .list-sns li a.twitter:hover,
.footer .list-sns li a.twitter:focus {
background-image: url(/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Ficon_twitter.png);
background-position: -32px 0px;
}
/* ==================================================== */
/* 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(/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fcommon%2Fimages%2Fflag_ph.png);
}
/* ==================================================== */
/* wp & cloud : our client */
/* ==================================================== */
section.top-shared-feature.our-clients {
position: relative;
overflow: hidden;
}
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;
}
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;
}
/* ===================== */
/* 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;
text-decoration: none;
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;
}
/*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;
}
.banner--forehead {
position: relative;
z-index: 2;
height: 44px;
line-height: 44px;
color: #111;
text-align: left;
font-size: 2rem;
font-weight: bold;
text-shadow: 1px 1px 1px #ffe27a;
}
@media(max-width: 1280px){
.banner--forehead {
font-size: 1.7rem;
}
}
.banner--forehead--inner {
position: relative;
z-index: 1;
background: url('/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Fssl%2Fbg_bar_topbanner-fix.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.btn.btn-white {
background: #fff;
color: #d62825;
}
.btn.btn-white:hover {
color: #d62825;
background: #fab91c;
}
.btn.btn-white .icon--thin-arrow:before {
color: #d62825;
}
.btn.btn-white:hover .icon--thin-arrow:before {
color: #111;
}
/*header popup*/
.header-popup { width: 100%; height: auto; margin:0 auto;text-align: center;padding:10px 0; /*background:#ffa42f; */ background: #ecc843; z-index:1000; color: #000;font-size: 14px;}
.wrapper.newyear { position: relative;top:0; background: transparent;}
/* ==================================================== */
/* 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;
}
/*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;
bottom: 25.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: -45px;
margin-bottom: -45px;
/*top: 0;*/
/*margin-bottom: 0;*/
background: transparent;
padding: 0;
}
section.campaign-countdown.is-domain-index #campaign_clock {
cursor: pointer;
top: 0;
margin-bottom: 0;
padding: 69px 24px 24px 96px;
min-width: 627px;
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;
}
section.campaign-countdown.is-domain-index #campaign_clock:after {
content: none;
}
#campaign_clock > span.title {
position: absolute;
top: 0;
width: 100%;
left: 0;
text-align: center;
height: 45px;
line-height: 45px;
background: url(/asset?u=https%3A%2F%2Fwp.z.com%2Fth%2Fndzcom_common%2Fimages%2Ffree-domain-red.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #fff;
}
#campaign_clock > span.title > span {
color: #f8f715;
}
/* ==================================================== */
/* END : campaingn countdown */
/* ==================================================== */
/*payment*/
.boxbtn--payment{
width: 100%;
float: left;
}
.boxbtn--payment img.logo-gmosign{
width: auto;
float: left;
margin-right: 2%;
}
.boxbtn--payment p.button--pay {
font-family: "db_heaventregular", "Open Sans", "Tahoma", "Arial", sans-serif;
font-size: 28px;
text-align: center;
color: #fff;
line-height: 1;
font-weight: normal;
background: -webkit-gradient(linear, left top, right top, from(#0072ff), to(#00d4ff));
background: linear-gradient(90deg, #0072ff 0%, #00d4ff 100%);
padding: 5% 8%;
margin:5% auto 0 auto;
width: fit-content;
border-radius: 50px;
transition: all 0.5s;
cursor: pointer;
}
.boxbtn--payment p.button--pay span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
color:#fff;
}
.boxbtn--payment p.button--pay span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.boxbtn--payment p.button--pay:hover span {
padding-right: 25px;
color:#fff;}
.boxbtn--payment p.button--pay:hover{background: rgb(35,35,35);
background: linear-gradient(280deg, rgba(35,35,35,1) 0%, rgba(55,55,55,1) 100%);}
.boxbtn--payment p.button--pay:hover span:after {opacity: 1; right: 0;}