.contactbox .cb01 a.cb-fb {
background-image: url("../img/header/ic-fb.png");
}
.contactbox .cb01 a.cb-ins {
background-image: url("../img/header/ic-ins.png");
}
.contactbox .cb01 a.cb-mail {
background-image: url("../img/header/ic-mail.png");
}

@media screen and (min-width: 769px) {

/* Header
------------------------------------*/
header {
width:100%;
height: auto;
display: block;
position: fixed;
top:0;
left:0;
z-index:18000;
background-color: rgba(0,0,0,0.3);
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
header figure {
width:300px;
height: 80px;
display: block;
margin: 0 auto;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
header figure a {
width:100%;
height: 80px;
display: block;
padding:17px 0;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
header figure a .logo_m {
display: none;
}


/* Contact box
------------------------------------*/
.contactbox {
width:290px;
height:80px;
display: block;
position: fixed;
top:0;
right:0;
z-index:18100;
}
.contactbox li.cb01 {
width:40px;
height: 80px;
display: block;
float: left;
}
.contactbox li.cb01 a {
width:40px;
height: 80px;
display: block;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: center center;
background-size: 22px 22px;
background-color: rgba(255,255,255,0.90);
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.contactbox li.cb01 a:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.contactbox li.cb02 {
width:170px;
height: 80px;
display: block;
float: right;
}
.contactbox li.cb02 a {
width:170px;
height: 80px;
display: block;
font-size: 18px;
font-weight: 700;
line-height: 80px;
letter-spacing: -1px;
text-align: right;
color:#8593a3;
text-decoration: none;
padding-right:10px;
background-image: url("../img/header/ic-tel.png");
background-repeat: no-repeat;
background-position: 10px center;
background-size: 22px 22px;
background-color: rgba(255,255,255,0.90);
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.contactbox li.cb02 a:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

/* Menu
------------------------------------*/
#menubody {
width: 100%;
height: auto;
display: block;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

p#pmenubn {
display:none;
}

a.menu-link {
display:none;
}

nav[role=navigation] {
clear: both;
width:100%;
height: auto;
display: block;
margin-left:0;
}

nav[role=navigation] ul {
margin: 0;
padding: 0;
}

nav[role=navigation] li {
width:12.5%;
height: auto;
display: block;
float: left;
}

nav[role=navigation] li:last-child {
padding-right:0px;
}

nav[role=navigation] li a {
width:100%;
height: auto;
display: block;
padding: 15px 0px 15px 0px;
font-size:12px;
font-weight: 700;
line-height: 1.25em;
color:#fff;
text-align: center;
letter-spacing: 0px;
text-decoration: none;
background-image: none!important;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
nav[role=navigation] li a span {
display: block;
font-size:0.6em;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.25em;
color:#C1CCD8;
margin-top: 5px;
}

nav[role=navigation] li a:hover {
color:#fff;
background-color: #8593a3;
}
nav[role=navigation] li a:hover span {
color:#fff;
}

/* Active
------------------------------------*/
/* Header
------------------------------------*/
header.hr_active {
width:100%;
height: auto;
display: block;
position: fixed;
top:0;
left:0;
z-index:18000;
background-color: rgba(1,5,7,0.90);
}
header.hr_active figure {
width:300px;
height: 40px;
display: block;
margin: 0 0 5px 20px;
padding:5px 0 0 0;
}
header.hr_active figure img {
width:auto;
height: 30px;
}
header.hr_active figure a {
width:100%;
height: 30px;
display: block;
padding:0;
}


/* Contact box
------------------------------------*/
header.hr_active .contactbox {
width:211px;
height:40px;
display: block;
position: fixed;
top:0;
right:0;
z-index:18100;
}
header.hr_active .contactbox li.cb01 {
width:40px;
height: 40px;
display: block;
float: left;
}
header.hr_active .contactbox li.cb01 a {
width:40px;
height: 40px;
display: block;
text-indent: -9999px;
background-image: url("../img/header/ic-mail.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 18px 18px;
background-color: rgba(255,255,255,0.00);
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
header.hr_active .contactbox li.cb01 a:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
header.hr_active .contactbox li.cb02 {
width:170px;
height: 40px;
display: block;
float: right;
}
header.hr_active .contactbox li.cb02 a {
width:170px;
height: 40px;
display: block;
font-size: 16px;
font-weight: 700;
line-height: 40px;
letter-spacing: -1px;
text-align: right;
color:#BAC7D6;
text-decoration: none;
padding-right:20px;
background-image: url("../img/header/ic-tel.png");
background-repeat: no-repeat;
background-position: 10px center;
background-size: 18px 18px;
background-color: rgba(255,255,255,0.00);
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
header.hr_active .contactbox li.cb02 a:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

/* Menu
------------------------------------*/
header.hr_active #menubody {
width: 100%;
height: auto;
display: block;
}

p#pmenubn {
display:none;
}

a.menu-link {
display:none;
}

header.hr_active nav[role=navigation] {
clear: both;
width:100%;
height: auto;
display: block;
margin-left:0;
}

header.hr_active nav[role=navigation] ul {
margin: 0;
padding: 0;
border-top:1px solid rgba(255,255,255,0.20);
}

header.hr_active nav[role=navigation] li {
width:12.5%;
height: auto;
display: block;
float: left;
border-right:1px solid rgba(255,255,255,0.20);
}

header.hr_active nav[role=navigation] li:last-child {
border-right:none;
}

header.hr_active nav[role=navigation] li a {
width:100%;
height: auto;
display: block;
padding: 0px 0px 0px 0px;
font-size:12px;
font-weight: 700;
line-height: 50px;
color:#fff;
text-align: center;
letter-spacing: 0px;
text-decoration: none;
background-image: none!important;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
header.hr_active nav[role=navigation] li a span {
display: none;
}

header.hr_active nav[role=navigation] li a:hover {
color:#fff;
background-color: #8593a3;
}
header.hr_active nav[role=navigation] li a:hover span {
color:#fff;
}


/*----------------------------------*/
/* Footer
------------------------------------*/
footer {
width:100%;
height: auto;
display: block;
padding:25px 5%;
}
footer ul {
text-align: center;
margin-bottom: 0px;
}
footer ul li {
display: -moz-inline-box;
display: inline-block;
/display: inline;
/zoom: 1;
padding-right: 10px;
font-size: 0.8em;
line-height: 2em;
}
footer ul li a {
color:#fff;
line-height: 1.25em;
text-decoration: none;
}
footer ul li a:hover {
color:#fff;
text-decoration: underline;
}
footer p {
width:100%;
height: 40px;
display: block;
font-family: 'Lato', sans-serif;
font-size:0.8em;
font-weight: 400;
line-height: 40px;
color:#fff;
text-align: center;
}


}


@media screen and (max-width: 768px) {

/* Header
------------------------------------*/
header {
width:100%;
height: auto;
display: block;
position: fixed;
top:0;
left:0;
z-index:18000;
background-color: rgba(1,5,7,0.90);
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
header figure {
width:150px;
height: 56px;
display: block;
margin: 0 0 0 10px;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
header figure a {
width:100%;
height: auto;
display: block;
padding-top:10px;
}
header figure a .logo_pc {
display: none;
}

/* Contact box
------------------------------------*/
.contactbox {
width:140px;
height:56px;
display: block;
position: fixed;
top:0;
right:60px;
z-index:18100;
}
.contactbox li.cb01 {
width:35px;
height: 56px;
display: block;
float: left;
}
.contactbox li.cb01 a {
width:35px;
height: 56px;
display: block;
text-indent: -9999px;
background-image: url("../img/header/ic-mail.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 18px 18px;
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.contactbox li.cb01 a:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.contactbox li.cb02 {
width:35px;
height: 56px;
display: block;
float: left;
}
.contactbox li.cb02 a {
width:35px;
height: 56px;
display: block;
text-indent: -9999px;
background-image: url("../img/header/ic-tel.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 18px 18px;
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

/* Menu
------------------------------------*/
.menubody {
width: 100%;
height: auto;
display: block;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

p.menubn {
width:56px;
height: 56px;
display: block;
position: fixed!important;
top:0;
right:0;
z-index:21500!important;
}
a.menu-link {
width:56px;
height: 56px;
display: block;
cursor: pointer;
text-indent: -9999px;
background-image: url(../img/header/ic-menu.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 40px 40px;
}
a.menu-link.active {
background-image: url(../img/header/ic-menu_c.png);
}

nav[role=navigation] {
width:100%;
height: 100%;
min-height: 100%;
position: fixed;
top:0px;
left:-100%;
z-index:19000;
clear: both;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.js nav[role=navigation] {
overflow: hidden;
left:-100%;
background: -moz-linear-gradient(left,  rgba(133,147,163,0.95) 0%, rgba(42,65,102,0.95) 100%);
background: -webkit-linear-gradient(left,  rgba(133,147,163,0.95) 0%,rgba(42,65,102,0.95) 100%);
background: linear-gradient(to right,  rgba(133,147,163,0.95) 0%,rgba(42,65,102,0.95) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28593a3', endColorstr='#f22a4166',GradientType=1 );


padding: 60px 5% 60px 5%;
}

nav[role=navigation].active {
left:0;
overflow-y:scroll;
}

nav[role=navigation] ul {
margin: 0;
padding: 0;
}

nav[role=navigation] li {
width:100%;
height: auto;
display: block;
border-bottom: 1px dotted rgba(255,255,255,0.40);
}

nav[role=navigation] li:last-child {
border-bottom:none;
}

nav[role=navigation] li a {
width:100%;
height: auto;
display: block;
padding: 15px;
font-size:14px;
font-weight: 700;
line-height: 1.25em;
color:#fff;
text-align: center;
letter-spacing: 0px;
text-decoration: none;
background-image: none!important;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
nav[role=navigation] li a span {
display: block;
font-size:0.6em;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.25em;
color:#C1CCD8;
margin-top: 5px;
}

nav[role=navigation] li a:hover {
color:#fff;
background-color: #8593a3;
}
nav[role=navigation] li a:hover span {
color:#fff;
}


/*----------------------------------*/
/* Footer
------------------------------------*/
footer {
width:100%;
height: auto;
display: block;
padding:25px 5%;
}
footer ul {
text-align: center;
margin-bottom: 0px;
}
footer ul li {
width:100%;
height: auto;
display: block;
font-size: 12px;
line-height: 1.25em;
}
footer ul li a {
width:100%;
height: auto;
display: block;
color:#fff;
text-align: center;
padding:10px 5px;
text-decoration: none;
border-bottom: 1px dotted rgba(255,255,255,0.40);
}
footer ul li a:hover {
color:#fff;
text-decoration: none;
}
footer p {
width:100%;
height: 40px;
display: block;
font-family: 'Lato', sans-serif;
font-size:0.8em;
font-weight: 400;
line-height: 40px;
color:#fff;
text-align: center;
}


}