@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:1520px; 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:40px; width:100%; background-color:#285943;}
.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; height:40px; padding:0 20px;}
.top-left-links li:first-child,
.top-right-links li:first-child {padding:0 20px 0 0;}
.top-left-links li:after, .top-right-links li:after {content:""; position:absolute; right:-1px; top:14px; width:2px; height:12px; background-color:#044a1b;}
.top-left-links li:last-child:after, .top-right-links li:last-child:after {content:none;}

.top-left-links li a,
.top-right-links li a{position:relative; color:#fff; display:block; line-height:40px; font-size:1.3rem; height:40px;}

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; z-index:2;}
header .logo a {display:block; width:100%; height:100%; margin:30px 0;}
header .logo a .img-logo, header .logo a .txt-logo {display:inline-block; vertical-align: top;}
header .logo a .img-logo {height:40px;}
header .logo a .img-logo img {width:auto; height:40px; vertical-align: top;}

header .header-nav {position:relative; display:block; text-align:center; z-index:1;}
header .header-nav > ul {display:inline-block; float:right;}
header .header-nav > ul > li {position:relative; float:left; width:220px; 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:600;}

header .header-nav > ul li .depth2 {position:absolute; width:100%; height:0; overflow:hidden; transition:.2s height ease-in-out; background-color:#285943; z-index:103;}
header .header-nav > ul li .depth2 li {position:relative; height:56px; line-height:56px;}
header .header-nav > ul li .depth2 li:hover {background-color:#377b5c;}
header .header-nav > ul li .depth2 li a {color:#fff; display:block;}
header .header-nav > ul li:hover a {color:#fff;}
header .header-nav > ul li:hover, header .header-nav > ul li.active {background-color:#285943;}
header .header-nav > ul li.active a {color:#fff;}
header .header-nav > ul li:hover:nth-child(1) .depth2 {height:224px;}
header .header-nav > ul li:hover:nth-child(2) .depth2 {height:392px;}
header .header-nav > ul li:hover:nth-child(3) .depth2 {height:280px;}
header .header-nav > ul li:hover:nth-child(4) .depth2 {height:112px;}

header .header-wrap a.btn-link {position:absolute; right:0; top:27px; display:inline-block; padding:0 28px 0 54px; width:auto; height:42px; font-weight:400; background-color:#d31045; color:#fff; border-radius:5px 5px;}
header .header-wrap a.btn-link:hover {background-color:#c51042;}
header .header-wrap a.btn-link span.icon-calendar {position:relative; line-height:42px;}
header .header-wrap a.btn-link span.icon-calendar:before {content:""; position:absolute; top:0px; left:-34px; width:24px; height:24px; background:url('../img/icon_calender.png') 0px 0px no-repeat; background-size:24px 24px;}

header .btn-menu {position:absolute; display:none; right:0; width:36px; height:36px; top:17px; 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:70%; top:10px;}
header .btn-menu:hover span.barTop {width:100%;}
header .btn-menu span.barCenter {width:70%; top:18px;}
header .btn-menu:hover span.barCenter {width:70%;}
header .btn-menu span.barBottom {width:70%; top:26px;}
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.barCenter {width:0;}
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%;}

header .header-line {position:relative; width:100%; height:8px;}
header .header-line span {float:left; width:25%; height:8px; display:inline-block;}
header .header-line span:nth-child(1) {background-color:#125fa4;}
header .header-line span:nth-child(2) {background-color:#44ac49;}
header .header-line span:nth-child(3) {background-color:#f3981e;}
header .header-line span:nth-child(4) {background-color:#dd3724;}

/* footer style css */
footer {background-color:#282828; width:100%;}
footer .footer-top {background-color:#282828; width:100%; height:80px; border-bottom:1px solid #33363c; text-align:center;}
.footer-top-wrap > ul, .footer-top-wrap > ul li {position:relative; display:inline-block;}
.footer-top-wrap > ul li a {color:#b9b9b9; line-height:20px; padding:30px 20px;}
.footer-top-wrap > ul li:first-child a {padding-left:0;}
.footer-top-wrap > ul li:last-child a {padding-right:0;}


footer .footer-area {width:100%; overflow:hidden; padding:62px 0 0; color:#b9b9b9; text-align:center;}
footer .footer-area address {line-height:1.4; font-style:normal;}
footer .footer-area p {margin-top:2px;}

footer .footer-copyright {width:100%; letter-spacing:0rem; overflow:hidden;  padding:4px 0 82px 0; color:#fff; clear:both; text-align:center;}


/* mobile nav style css */
.m-nav-wrap {position:fixed; z-index:9999; top:0; right:-100%; width:100%; height:100%; transition:right 0.3s ease-in-out; background-color:#fff;}
.m-nav-wrap.open {right:0;}

.m-nav-wrap .mobile-nav-top {width:100%; height:70px; position:relative; background-color:#285943;}
.m-nav-wrap .mobile-nav-top h2 {color:#fff; line-height:70px; text-indent:20px; font-size:1.8rem;}
.m-nav-wrap .mobile-nav-top span.mdi {position:absolute; right:0; top:0; display:inline-block; width:70px; height:70px; line-height:70px; text-align:center; color:#fff; font-size:3rem; cursor:pointer;}

.mobile-nav-header {position:relative; width:100%; padding:0 0 2px 0; border-bottom:1px solid #454545;}
.mobile-nav-header ul {position:relative; width:100%; height:auto;}
.mobile-nav-header ul li {position:relative; display:inline-block; padding:0 20px; line-height:40px; }
.mobile-nav-header ul li:after {content:""; position:absolute; top:13px; right:0; width:1px; height:14px; background-color:#222;}
.mobile-nav-header ul li a {font-weight:300; color:#000;}

.mobile-nav-list {position:relative; height:100%; width:100%; padding:0 0 0 0;}
.mobile-nav-list .m-nav-title {width:34%; height:100%; background-color:#377b5c;}
.mobile-nav-list .m-nav-sub {width:66%; height:100%; background-color:#fff;}

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

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

.mobile-nav-list .m-nav-sub ul li {border-bottom:1px solid #e4e4e4;}
.mobile-nav-list .m-nav-sub ul li a {color:#222; display:block; width:100%; padding:14px 20px; text-align:left;}
.mobile-nav-list .m-nav-sub ul li.active a {color:#377b5c; font-weight:500;}


/* response */
@media screen and (max-width:1520px) {
    .inner {padding-left:15px !important; padding-right:15px !important;}

    /* top */
    .header-top .inner {padding-left:0 !important; padding-right:0 !important;}
	.top-left-links li:first-child {padding:0 20px 0 20px;}

    /* header */
    header .header-wrap .logo {left:15px;}
    header .header-wrap {text-align:center;}
    header .header-nav {padding-right:0;}
    header .header-nav > ul > li {width:180px;}
    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;}
	
}

@media screen and (max-width:1280px) {
	/* header */
	header .header-nav > ul > li {width:168px;}
    header .header-nav > ul > li > a {font-size:1.8rem;}

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

@media screen and (max-width:1200px) {
	/* mobile ¸ðµå */

	/* top */
	.header-top {display:none;}

	/* header */
	header .header-nav {display:none;}
	header .header-wrap {height:70px; background-color:#fff;}

	header .logo a {margin:22px 0 18px 0;}
	header .logo a .img-logo, header .logo a .img-logo img {height:30px;}

	header .header-line, header .header-line span {height:4px;}
	header .btn-menu {display:block;}
}

@media screen and (max-width:600px) {
    /* footer */
	footer .footer-top {height:50px;}
	.footer-top-wrap > ul li a {padding:15px 20px;}

	footer .footer-area {padding:42px 0 0;}
	footer .footer-copyright {padding:4px 0 52px 0;}
}


/* 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;}
}