@charset "utf-8";

/* common style css */
.line-title {position:relative; display:inline-block; padding:10px 0 20px 0; color:#222; font-weight:400;}
.line-title:after {content:""; position:absolute; right:-140px; bottom:54%;  width:100px; height:2px; background-color:#222;}

.inner {width:100%; max-width:1580px; margin:0 auto;}
.inner:before, .inner2:before,
.inner:after, .inner2:after {content:""; display:block; clear:both;}

.pc-view {display:block;}
.mobile-view {display:none;}

@media screen and (max-width:600px) {
    .pc-view {display:none;}
    .mobile-view {display:block;}
}

.en {font-family: 'Titillium Web', sans-serif;}

.tab-wrap {display:none;}
.tab-wrap.active {display:block;}
.btn-link {display:inline-block; margin-left:26px; padding:7px; vertical-align:middle; width:30px; height:30px; background:url(../img/icon_more.png) no-repeat; background-size:16px 16px;}
.btn-more {position:absolute; top:0; right:0; color:#000; font-family: 'Titillium Web', sans-serif; font-weight: 300;}

.mr-content .box-wrap {width:100%; height:auto; background-color:#f9f9f9; padding:26px; margin-top:30px; border:1px solid #e5e5e5;}

.popup-wrap {background:url('../img/popup_background.png') no-repeat; background-size:100% auto; width:100%; height:0; transition:height 0.3s ease-in-out; overflow:hidden;}
.popup-wrap .popup-view, .popup-wrap .popup-view a, .popup-wrap .popup-view a img {display:block; max-width:100%; max-height:100%; margin:0 auto;}

.main-wrap {display:block; position:relative; height:100%;  margin:0 auto; background-color:#ffffff;}
.nav-bar-wrap {position:absolute; right:60px; bottom:0; width:1px; height:100%; z-index:100;}

/* header style css */
.header-top {height:50px; width:100%; background-color:#01589d;}
.header-top .top-list {position:relative; width:100%; height:100%;}
.top-list .top-left-links {float:left;}
.top-list .top-right-links {float:right;}

.top-left-links li,
.top-right-links li{float:left; position:relative; width:auto; min-width:60px; padding:0 30px; height:50px; border-right:1px solid #006abb;}
.top-left-links li:first-child {background-color:#113f70; border-right:0;}
.top-right-links li:first-child {border-left:1px solid #006abb;}
.top-left-links li a,
.top-right-links li a{position:relative; color:#fff; display:block; line-height:50px; font-size:1.3rem; height:50px;}
.top-left-links li a span.icon,
.top-right-links li a span.icon{position:absolute; top:13px; left:0; background-color:rgba(1, 120, 191, 0.8); border-radius:50% 50%; width:26px; height:26px; line-height:26px; text-align:center; font-size:1.4rem;}
.top-left-links li a span:not(.icon),
.top-right-links li a span:not(.icon){margin-left:32px; display:inline-block; }
.top-left-links li:first-child a:before {
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    top:50%;
    left:50%;
    margin-top:-10px;
    margin-left:-10px;
    background:url(../img/icon_home_w.png) 0 0 no-repeat;
}
.top-right-links li:nth-child(3) {border-right:0;}
.top-right-links li:nth-child(1), .top-right-links li:nth-child(2), .top-right-links li:nth-child(3) {padding:0 10px; text-align:center;}
.top-right-links li a span.sns {margin-left:0; font-size:1.6rem;}
.top-right-links li:last-child {background-color:#404146; border-right:0; min-width:120px;}
.top-right-links li:last-child a span {display:block; text-align:center;}
.top-right-links li:last-child a span.icon {top:5px; left:50%; margin-left:-10px; width:20px; height:20px; line-height:20px; background-color:rgba(255, 255, 255, 0.8); color:#000;}
.top-right-links li:last-child a span:not(.icon) {position:absolute; top:25px; left:0; width:100%; margin-left:0; color:#fff; line-height:20px;}
.top-right-links li.btn-login {padding:0 24px 0 20px; background-color:#1489f7; border-left:0; border-right:0;}
.top-right-links li.btn-login a span.icon {background-color:rgba(140,199,251,0.5);}

header {position:relative; width:100%; z-index:100;}
header:before, header:after {content:""; clear:both; display:block;}

header .header-wrap {position:relative; width:100%; height:auto; text-align:right; line-height:0;}
header .header-wrap .logo {position:absolute; top:0; left:0; line-height:0;}
header .logo a {display:block; width:100%; height:100%; margin:20px 0;}
header .logo a .img-logo, header .logo a .txt-logo {display:inline-block; vertical-align: top;}
header .logo a .img-logo {height:60px;}
header .logo a .img-logo img {width:auto; height:60px; vertical-align: top;}

header .header-nav {position:relative; display:inline-block; padding-right:340px;}
header .header-nav > ul > li {position:relative; float:left; width:auto; padding:0 60px; height:100px; line-height:100px; transition: width .3s ease;}
header .header-nav > ul > li > a {position:relative; height:100%; display:block; text-align:center; font-size:2.0rem; color:#333; font-weight:400;}

header .header-nav-wrap {position:absolute; top:100%; left:0; width:100%; height:0; overflow: hidden; background-color:#fff; z-index:110;}
header .header-nav-wrap.on {height:260px; border-top:1px solid #dedede; border-bottom:1px solid #dedede;}
header .header-nav-wrap .depth2 {position:relative;}
header .header-nav-wrap .depth2 .depth2-list {float:left; width:25%; height:260px; border-right:1px solid #dedede; padding:20px 20px; background-color:#fff;}
header .header-nav-wrap .depth2 .depth2-list:first-child {border-left:1px solid #dedede;}

header .header-nav-wrap .depth2 .depth2-list p {font-size:1.8rem; color:#01589d; padding-bottom:14px;}
header .header-nav-wrap .depth2 .depth2-list.active {background-color:#eef8ff;}
header .header-nav-wrap .depth2 .depth2-list ul li {padding:7px 0;}
header .header-nav-wrap .depth2 .depth2-list ul li a {color:#333; display:block; font-size:1.6rem;}
header .header-nav-wrap .depth2 .depth2-list ul li a:hover {text-decoration: underline; color:#000;}


header .btn-search {position:absolute; right:60px; top:32px; width:36px; height:36px; padding:6px 6px; background:url(../img/icon_search.png) 6px 6px no-repeat;}

header .btn-menu {position:absolute; right:0; width:36px; height:36px; top:32px; z-index:200; transition:all .3s ease; }
header .btn-menu span {position:absolute; right:0; height:2px; background-color:#000; transition:all .2s ease-in-out;}
header .btn-menu span.barTop {width:100%; top:11px;}
header .btn-menu:hover span.barTop {width:70%;}
header .btn-menu span.barBottom {width:70%; top:21px;}
header .btn-menu:hover span.barBottom {width:100%;}

header .btn-menu.open span.barTop {width:72%; top:17px; transform:rotate(45deg);}
header .btn-menu.open span.barBottom {width:72%; top:17px; transform:rotate(-45deg);}
header .btn-menu.open:hover span.barTop, header .btn-menu.open:hover span.barBottom {width:78%;}

/* footer style css */
footer {background-color:#282828; width:100%;}
footer .footer-top {background-color:#fff; width:100%; height:100px;}
.footer-top-wrap > ul, .footer-top-wrap > ul li {position:relative; display:inline-block; float:left;}
.footer-top-wrap > ul li:after {content:""; position:absolute; right:0; top:44px; width:1px; height:12px; background-color:#d9d9d9;}
.footer-top-wrap > ul li:last-child:after {content:none;}
.footer-top-wrap > ul li a {color:#494949; line-height:20px; padding:40px 28px;}
.footer-top-wrap > ul li:first-child a {padding-left:0;}

.footer-top-wrap .select-box {position:relative; display:inline-block; float:right; margin-top:28px;}
.select-box .select-view {border:1px solid #cecece; width:220px; height:44px; line-height:20px; padding:12px; cursor:pointer; color:#666666;}
.select-view span.select-name {display:inline-block; float:left; width:70%;}
.select-view span.select-arrow {display:inline-block; float:right; width:20px; height:20px; text-align:center; font-size:1.8rem;}

.select-box .select-list {display:none; position:absolute; right:0; top:-169px; width:100%; height:169px; background-color:#fff; z-index:500; border:1px solid #cecece; border-bottom:0;}
.select-box .select-list.open {display:block;}
.select-box .select-list > ul li {display:block; overflow:hidden; height:42px; text-indent:10px; text-overflow:ellipsis; white-space:nowrap; background-color:#fff;}
.select-box .select-list > ul li a {padding:10px 0; display:block; color:#666666;}
.select-box .select-list > ul li:hover {background-color:#f5f6f8;}
.select-box .select-list > ul li:hover a {text-decoration: underline; color:#2c41a2;}

footer .footer-area {width:100%; overflow:hidden; padding:62px 0 10px; color:#b9b9b9;}

footer .footer-area > ul {overflow:hidden; float:right; width:72%; margin-top:30px;}
footer .footer-area > ul > li {float:left; width:25%; margin-bottom:24px;}
footer .footer-area > ul > li > dl > dt {color:#f9f9f9; font-size:1.5rem; margin-bottom:16px;}
footer .footer-area > ul > li > dl > dd {margin-bottom:10px; font-size:1.3rem;}
footer .footer-area > ul > li > dl > dd > a {color:#b9b9b9;}

footer .footer-area .footer-logo {color:#b9b9b9; text-align:center; float:left; width:20%; font-size:1.3rem; overflow:hidden;}
footer .footer-area .footer-logo h1 {width:100px; height:100px; margin:0 auto 25px; background:url(../img/f_logo.png) center top no-repeat; background-size:100px 100px;}
footer .footer-area .footer-logo address {line-height:1.4; font-style:normal;}
footer .footer-area .footer-logo p {margin-top:5px;}
footer .footer-area .footer-logo > ul {text-align:center; margin-top:15px; margin-bottom:30px;}
footer .footer-area .footer-logo > ul > li {display:inline-block; padding:0 10px;}
footer .footer-area .footer-logo > ul > li a {display:block; width:24px; height:24px; color:#fff; font-size:2rem;}

footer .footer-copyright {width:100%; overflow:hidden; padding-top:20px; padding-bottom:60px; border-top:1px solid #c5c5c5; font-size:1.2rem; color:#aeaeae; clear:both;}


/* mobile nav style css */
.m-nav-wrap {position:absolute; z-index:9999; top:0; right:-100%; width:100%; height:100%; transition:right 0.3s ease-in-out;}
.m-nav-wrap.open {right:0;}
.m-nav-list {position:relative; height:100%; width:100%; border-top:1px solid #333; border-bottom:1px solid #333;}
.m-nav-list .m-nav-title {width:20%; height:100%; background-color:#0178bf;}
.m-nav-list .m-nav-sub {width:80%; height:100%; background-color:#fff;}

.m-nav-list .m-nav-title ul li {border-bottom:1px solid #01589d;}
.m-nav-list .m-nav-title ul li.active {background-color:#01589d;}
.m-nav-list .m-nav-title ul li a {text-decoration: none; display:block; width:100%; padding:16px 0; color:#fff; text-align:center;}

.m-nav-list .m-nav-sub div {display:none;}
.m-nav-list .m-nav-sub div.active {display:block;}

.m-nav-list .m-nav-sub ul li {border-bottom:1px solid #e4e4e4;}
.m-nav-list .m-nav-sub ul li a {color:#222; display:block; width:100%; padding:14px 20px; text-align:left;}
.m-nav-list .m-nav-sub ul li.active a {color:#01589d; font-weight:500;}
/* response */
@media screen and (max-width:1580px) {
    .inner {padding-left:15px !important; padding-right:15px !important;}

    /* top */
    .header-top .inner {padding-left:0 !important; padding-right:0 !important;}

    /* header */
    header .header-wrap .logo {left:15px;}
    header .header-wrap {text-align:center;}
    header .header-nav {padding-right:0;}
    header .header-nav > ul > li {padding:0 42px;}
    header .header-nav > ul > li > a {font-size:1.9rem;}

    header .header-nav-wrap .depth2 .depth2-list p {font-size:1.7rem;}
    header .header-nav-wrap .depth2 .depth2-list ul li a {font-size:1.5rem;}

    header .btn-search {right:75px;}
    header .btn-menu {right:15px;}

    /* slider */
    .bx-wrapper .slider-txt-wrap h2 {font-size:5rem;}
    .bx-wrapper .slider-txt-wrap p {font-size:2.25rem;}
}

@media screen and (max-width:1380px) {
    header .header-nav > ul > li {padding:0 36px;}
}

@media screen and (max-width:1240px) {
    header .header-nav > ul > li {padding:0 30px;}
}

@media screen and (max-width:1100px) {
    /* top */
    .top-left-links li, .top-right-links li {padding:0 16px;}
    .top-left-links li a, .top-right-links li a {font-size:1.2rem;}
    .top-left-links li a span.icon, .top-right-links li a span.icon {font-size:1.3rem;}

    .top-left-links li, .top-right-links li {min-width:50px;}
    .top-right-links li:nth-child(1), .top-right-links li:nth-child(2), .top-right-links li:nth-child(3) {padding:0;}

    /* header */
    header .logo a {margin:15px 0;}
	header .logo a .img-logo {height:50px;}
	header .logo a .img-logo img {height:50px;}
    header .header-nav {height:80px;}
    header .header-nav ul{display:none;}
    header .btn-search, header .btn-menu {top:22px;}
    header .btn-search {right:58px;}

    /* footer */
    footer .footer-area {padding-left:15px; padding-right:15px;}
    footer .footer-area > ul {float:none; width:100%; margin:0 auto;}
    footer .footer-area > ul > li {padding:0 4px;}
    footer .footer-area .footer-logo {float:none; width:380px; margin:42px auto 0; text-align:center;}
    footer .footer-area .footer-logo h1 {float:left;}
    footer .footer-area .footer-logo address, footer .footer-area .footer-logo p, footer .footer-area .footer-logo > ul {float:left; width:60%; text-align:left; margin-left:40px;}
    .footer-top-wrap > ul li a, .select-view span.select-name, .select-box .select-list > ul li a, footer .footer-area > ul > li > dl > dt {font-size:1.4rem;}
    footer .footer-area .footer-logo > ul {margin-left:26px;}
    footer .footer-copyright {text-align:center;}
}
@media screen and (max-width:850px) {
    /* top */
    .top-list .top-right-links li:not(.btn-popup) {display:none;}
    .top-list .top-right-links li.btn-login {display:block;}
}

@media screen and (max-width:768px) {
    /* footer */
    footer .footer-top {height:auto; padding:20px 0 32px; text-align:center;}
    .footer-top-wrap > ul, .footer-top-wrap .select-box {display:inline-block; float:none;}
    .footer-top-wrap .select-box {display:block; text-align:left; margin-top:12px;}
    .select-box .select-view {width:100%;}
    .footer-top-wrap > ul li a {padding:12px 30px;}
    .footer-top-wrap > ul li:after {top:16px;}
}

@media screen and (max-width:700px) {
    /* top */
    .top-left-links li {display:none;}
    .top-left-links li:first-child {display:block;}
}
@media screen and (max-width:600px) {
    /* popup */
	.popup-wrap {background-size: 100% 100%;}
    /* top */
    .header-top {height:40px;}
    .top-left-links li, .top-right-links li {height:40px;}
    .top-left-links li a, .top-right-links li a {height:40px; line-height:40px;}
    .top-right-links li:last-child {min-width:80px; padding:0 8px;}

    .top-right-links li a span.icon {top:9px; width:22px; height:22px; line-height:22px;}
    .top-right-links li a span:not(.icon) {margin-left:28px;}
    .top-right-links li:last-child a span.icon {top:4px; width:16px; height:16px; line-height:16px; margin-left:-8px;}
    .top-right-links li:last-child a span:not(.icon) {top:19px;}

    /* header */
	header .logo a .img-logo {height:40px;}
	header .logo a .img-logo img {height:40px;}

    header .header-nav {height:70px;}
    header .header-nav ul{display:none;}
    header .btn-search, header .btn-menu {top:17px;}

    header .btn-search {width:36px; height:36px; padding:8px 8px; background:url(../img/icon_search.png) 8px 8px no-repeat;}

    header .btn-menu span.barTop {width:80%;}
    header .btn-menu span.barBottom {width:50%;}
    header .btn-menu:hover span.barTop {width:50%;}
    header .btn-menu:hover span.barBottom {width:80%;}

    /* footer */
	footer .footer-area > ul > li {width:50%;}
    footer .footer-area > ul > li:nth-child(4n) {clear:none;}

    .footer-top-wrap > ul li a, .select-view span.select-name, .select-box .select-list > ul li a, footer .footer-area > ul > li > dl > dt {font-size:1.3rem;}
    .footer-top-wrap > ul li a {padding:12px 10px;}
    footer .footer-area .footer-logo address, footer .footer-area .footer-logo p, footer .footer-area .footer-logo > ul {margin-left:30px;}
    footer .footer-area .footer-logo > ul {margin-left:16px;}

    footer .footer-area .footer-logo address {margin-top:20px;}
    footer .footer-area .footer-logo ul {margin-top:50px;}

    /* mobile nav */
    .m-nav-list .m-nav-title {width:30%;}
    .m-nav-list .m-nav-sub {width:70%;}
}

@media screen and (max-width:400px) {
    /*
    footer .footer-area .footer-logo {width:100%;}
    footer .footer-area .footer-logo address, footer .footer-area .footer-logo p, footer .footer-area .footer-logo > ul {width:100%; margin-left:0;}
    footer .footer-area .footer-logo > ul {margin-left:-15px;}
    */
    footer .footer-copyright {text-align:left;}
}

/* login */
.login-bg {width:100%; height:100% !important; position:relative; background:url(../img/bg_login.png) no-repeat; background-size:100% 100%;}
.login-wrap {position:relative; width:40%; height:100%; float:left; background-color:rgba(0, 0, 0, 0.4); display:table;}
.login-wrap .login-box {display:table-cell; vertical-align: middle; width:100%; height:500px;}
.login-box h2 {position:relative; color:#fff; text-align:center; margin-bottom:120px;}
.login-box h2:after {content:""; position:absolute; bottom:-30px; left:50%; margin-left:-30px; width:60px; height:2px; background-color:#fff;}
.login-box .login-form {width:70%; height:auto; margin:0 auto;}
.login-box .login-form .login-input {position:relative; width:100%; height:50px; border-bottom:1px solid rgba(255, 255, 255, 0.4); margin-bottom:50px;}
.login-box .login-form .login-input:before {content:""; position:absolute; left:10px; top:10px; width:30px; height:30px;}
.login-box .login-form .login-input.id:before {background:url(../img/icon_login_id.png) no-repeat; background-size:30px 30px;}
.login-box .login-form .login-input.pw:before {background:url(../img/icon_login_pw.png) no-repeat; background-size:30px 30px;}
.login-box .login-form .login-input input {padding-left:60px; background-color:transparent; border:0; height:50px; width:100%; color:#fff;}
.login-box .login-form .login-input input:focus {outline:none;}
.login-box .login-form button {margin-top:20px; width:100%; height:60px; background-color:#251976; border:0; color:#fff;}
.login-copyright {position:absolute; left:0; bottom:20px; text-align:center; width:100%; height:auto; color:rgba(255, 255, 255, 0.4);}

.login-box input::-webkit-input-placeholder {color:#f1f1f1 !important;}
.login-box input::-ms-input-placeholder {color:#f1f1f1 !important;}
.login-box input::placeholder  {color:#f1f1f1 !important;;}

@media screen and (max-width:1100px) {
    .login-bg {padding-top:20%;}
    .login-wrap {width:80%; height:80%; float:none; margin:0 auto; }
}

@media screen and (max-width:600px) {
    .login-bg {background:url(../img/bg_login_m.png) no-repeat; background-size:100% 100%; padding-top:10%;}
    .login-wrap {width:100%; height:100%; background-color:transparent;}
    .login-wrap .login-box {vertical-align: top;}
    .login-box h2 {margin-bottom:60px;}
    .login-box h2:after {bottom:-20px;}
    .login-box .login-form {width:80%;}
    .login-box .login-form .login-input:before {width:20px; height:20px;}
    .login-box .login-form .login-input.id:before {background:url(../img/icon_login_id.png) no-repeat; background-size:20px 20px;}
    .login-box .login-form .login-input.pw:before {background:url(../img/icon_login_pw.png) no-repeat; background-size:20px 20px;}
    .login-box .login-form .login-input {margin-bottom:24px; height:40px;}
    .login-box .login-form .login-input input {height:40px;}
    .login-box .login-form button {background-color:#5e45ed; height:54px;}
}