@charset "utf-8";
.inner {padding: 0 20px;}
#header1 {position: relative; z-index: 50;}
#header1 .inner {position: relative; padding: 20px;}
#header1 .inner > h1 {width: 150px; height: 23px; margin: 5px 0;}
#header1 .inner > h1 a {display: block; width: 100%; height: 100%; background: url(../imgs/logo.png) no-repeat left top;}
#btn-gnb {position: absolute; right: 20px; top: 25px; background: url(../imgs/ico_burger1.png) no-repeat left top; width: 33px; height: 23px; font-size: 0; line-height: 0;}
#header1.fixed {position: fixed; left: 0; top: 0; width: 100%; background: #fff; box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); padding: 0;}
#header1.fixed .inner > h1 a {background-position: 0 -23px;}
#header1.fixed #btn-gnb {background-position: 0 -23px;}
#gnb1 {display: none;}
#gnb1.active .clf div {position: relative;}
#gnb1.active {position: fixed; right: 0; top: 0; width: 90%; height: 100%; background: #fff; z-index: 100; display: block;}
#gnb1.active h1 {background: #1d66b9; text-align: center; padding: 20px 0 50px;}
#gnb1.active h1 a {display: inline-block; width: 150px; height: 23px; background: url(../imgs/logo.png) no-repeat left top; overflow: hidden;}
#gnb1.active div.clf {width: 90%; margin: -30px auto 0; border: 1px solid #eaeaea; background: #fff;}
#gnb1.active .clf div {background: #fff; padding: 25px 20px; border-bottom: 1px solid #eaeaea;}
#gnb1.active .clf div.active {background: #fafafa;}
#gnb1.active div > a {position: relative; display: block; width: 100%; font-size: 18px;}
#gnb1.active div > a:after {content: ''; display: block; position: absolute; background: url(../imgs/ico_fold1.png) no-repeat left top; width: 18px; height: 18px; right: 0; top: 5px;}
#gnb1.active .active > a:after {background-position: 0 -18px; top: 12px;}
#gnb1.active ul {display: none; font-size: 16px; margin-top: 20px; padding-left: 20px;}
#gnb1.active ul li:not(:last-child) {margin-bottom: 15px;}
#gnb1.active ul a {color: #666;}
#gnb1.active .active ul {display: block;}
#gnb1.active .btn-close {position: absolute; right: 20px; top: 23px;}
#header1 .bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .6; display: none;}
#header1 .bg.active {display: block;}
#header1 .btn-sitemap {background: url(../imgs/ico_menu.png) no-repeat left top; width: 25px; height: 25px; display: block; position: absolute; right: 20px; top: 30px;}
#header1.active .btn-sitemap, #header1.fixed .btn-sitemap {background-position: 0 -25px;}
#footer {background: #292c39; color: #888; position: relative;}
#footer:after {content: ''; display: block; position: absolute; left: 0; bottom: 62px; width: 100%; height: 1px; background: #3a3d49;}
#footer .inner {padding: 40px 20px 80px; position: relative;}
#footer h1 {font-size: 18px; color: #fff; margin-bottom: 10px;}
#footer h1 + p {font-size: 14px;}
#footer section {position: absolute; width: 50%; right: 0; top: 40px;}
#footer section div {float: left; width: 20%;}
#footer section h2 {color: #fff; font-size: 16px; margin-bottom: 20px;}
#footer section li {font-size: 14px; color: #888;}
#footer section li:not(:last-child) {margin-bottom: 10px;}
#btn-top {position: absolute; right: 0; bottom: 0; width: 62px; height: 62px;}
#btn-top img {width: 100%;}
#footer .copyright {position: absolute; left: 20px; bottom: 20px; font-size: 13px;}
.page-header {height: 340px; background-size: cover; margin-top: -83px; position: relative;}
.page-header.m1 {background: url(../imgs/bg_company.jpg) no-repeat top center;}
.page-header.m2 {background: url(../imgs/bg_rnd.jpg) no-repeat top center;}
.page-header.m3 {background: url(../imgs/bg_product.jpg) no-repeat top center;}
.page-header.m4 {background: url(../imgs/bg_support.jpg) no-repeat top center;}
.page-header.m5 {background: url(../imgs/bg_publicity.jpg) no-repeat top center;}
.page-header:after {content: ''; display: block; position: absolute; width: 100%; height: 1px; background: #fff; left: 0; bottom: 65px; opacity: .5;}
.page-header .inner {position: relative; padding: 0; height: 100%;}
.page-header h2 {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 30px; text-align: center;color: #fff; font-weight: 700;}
.page-header h2 em {display: block; font-size: 14px; font-weight: 200; font-style: normal; margin-top: 10px; letter-spacing: 0;}
.page-header ul {position: absolute; left: 0; bottom: 0; width: 100%;}
.page-header li {float: left; width: 25%; text-align: center; padding: 20px 0; position: relative;}
.page-header li:nth-child(2):after {content: ''; display: none; position: absolute; right: 0; top: 26px; background: url(../imgs/ico_arrow2.png) no-repeat left top; width: 9px; height: 14px;}
.page-header li a {color: #fff; opacity: .7;}
.page-header li.active:before {content: ''; display: block; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: #fff;}
.page-header li.active a {color: #fff; opacity: 1; font-weight: 600;}
/* Extra Small */
@media (max-width: 320px) {
    #footer:after {bottom: 40px;}
    #btn-top {width: 40px; height: 40px;}
    #footer .copyright {font-size: 12px; bottom: 10px;}
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    .page-header li:first-child {width: 10%;} 
    .page-header li:not(:first-child) {width: calc(90% / 5);} 
    .page-header li:nth-child(-n+2) a {opacity: 1;}
    .page-header li:nth-child(2):after {display: block;}
    .page-header li.active:before {top: 3px;}
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    #header1 .inner {padding: 30px 10px;}
    #header1 .inner > h1 {margin: 0;}
    #gnb1 {display: block; position: absolute; left: 255px; top: 28px;}
    #gnb1 div {float: left;}
    #gnb1 div:not(last-child) {margin-right: 70px;}
    #gnb1 div > a {color: #fff; font-size: 18px;}
    #gnb1 ul {display: none;}
    #header1.active {background: #fff;}
    #header1.active:after {content: ''; display: block; position: absolute; left: 0; bottom: -90px; background: #f5f5f5; height: 90px; width: 100%; z-index: 1;}
    #header1.fixed.active:after {box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);}
    #header1.active .inner > h1 a {background-position: 0 -23px;}
    #header1.active #gnb1 div > a {color: #000;}
    #header1.active #gnb1 div.active ul {display: block; position: absolute; left: 0; bottom: -83px; z-index: 5;}
    #header1.fixed.active #gnb1 div.active ul {bottom: -93px;}
    #header1.active #gnb1 li {float: left;}
    #header1.active #gnb1 li:not(:last-child) {margin-right: 60px;}
    #header1.active #gnb1 li a {color: #666;}
    .page-header {height: 400px;}
    .page-header h2 {font-size: 40px;}
    .page-header h2 em {font-size: 20px;}
    .page-header li:first-child {width: 10%;} 
    .page-header li:not(:first-child) {width: calc(90% / 5);} 
    .page-header li:nth-child(-n+2) a, .page-header li.active a {opacity: 1; font-weight: 700; font-size: 20px;}
    .page-header li:nth-child(2):after {display: block;}
    .page-header li.active:before {top: 4px;}
    #footer .inner {padding: 40px 10px 140px 10px;}
    #footer .copyright {left: 10px;}
}
/* Large desktops and laptops */
@media (min-width: 1200px) {
    .inner {width: 1200px; margin: 0 auto; padding: 0;}
    #header1 .inner {padding: 30px 0;}
    #header1 .inner > h1 {margin: 0;}
    #gnb1 {display: block; position: absolute; left: 355px; top: 28px;}
    #gnb1 div {float: left;}
    #gnb1 div:not(last-child) {margin-right: 70px;}
    #gnb1 div > a {color: #fff; font-size: 18px;}
    #gnb1 ul {display: none;}
    #header1.active {background: #fff;}
    #header1.active:after {content: ''; display: block; position: absolute; left: 0; bottom: -90px; background: #f5f5f5; height: 90px; width: 100%; z-index: 1;}
    #header1.fixed.active:after {box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);}
    #header1.active .inner > h1 a {background-position: 0 -23px;}
    #header1.active #gnb1 div > a, #header1.fixed #gnb1 div > a {color: #000;}
    #header1.active #gnb1 div.active ul {display: block; position: absolute; left: 0; bottom: -83px; z-index: 5;}
    #header1.fixed.active #gnb1 div.active ul {bottom: -93px;}
    #header1.active #gnb1 li {float: left;}
    #header1.active #gnb1 li:not(:last-child) {margin-right: 60px;}
    #header1.active #gnb1 li a {color: #666;}
    .page-header {height: 480px;}
    .page-header h2 {font-size: 48px;}
    .page-header h2 em {font-size: 20px;}
    .page-header li:first-child {width: 10%;} 
    .page-header li:not(:first-child) {width: calc(90% / 5);} 
    .page-header li:nth-child(-n+2) a, .page-header li.active a {opacity: 1; font-weight: 700; font-size: 20px;}
    .page-header li:nth-child(2):after {display: block;}
    .page-header li.active:before {top: 4px;}
    #footer .inner {padding: 40px 0 140px 0;}
    #footer .copyright {left: 0;}
}

/* print */
@media print {
}

/* ie only */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
}