@import url("fonts.css");
@import url("reset.css");

.main .size {display: none;}
/* skipmenu */
#skipmenu {position: relative; z-index: 3000;}
.skipmenu__link {position: absolute;top: -30px;left: 0;width: 138px;border: 1px solid #4ec53d;background: #333;text-align: center;opacity: 0;}
.skipmenu__link:active, .skipmenu__link:focus {top: 0;text-decoration: none;z-index: 1000;opacity: 1;}
.skipmenu__txt {display: inline-block;padding: 2px 6px 0 0;font-size: 13px;line-height: 26px;color: #fff;letter-spacing: -1px;white-space: nowrap;}

/* container */
.container {max-width: 1280px;margin: 0 auto;position: relative;}

/* header */
.header_wrap {overflow: hidden;}
.header {position: fixed;top: 0;left: 0;z-index: 200;width: 100%;background: #fff;}
.header .logo h1 img {width: 160px;}
.header .container {display: flex;justify-content: space-between;align-items: center;position: relative;height: 100px;}
.header .vol_wrap {padding: 5px 0 0;}
.header .date {font-size: 15px;color: #030000;font-weight: 500;}
.header .sub_link {position: absolute;right: 0;transform: translateX(-25%);}
.header .sub_link li {display: inline-block;font-size: 16px;margin-left: 15px;}
.header .sub_link li a:hover, .header .sub_link li i.ri-zoom-out-line, .header .sub_link li i.ri-zoom-out-line + span {color: #e5274e;}
.header .sub_link li i {vertical-align: bottom;font-size: 1.3rem;}
.sub_body .sub_title {text-align: center;margin-bottom: 80px;margin-top: 100px;}

/* toggle */
.toggle-menu { background-color: transparent; border: none; cursor: pointer; display: inline-block; float: right; height: 50px; outline: none; padding: 0; pointer-events: initial; position: relative; vertical-align: middle; width: 50px; z-index: 1110;}
.toggle-menu span { background-color: #696969; content: ""; display: block; height: 2px; left: calc(50% - 13px ); position: absolute; top: calc(50% - 1px ); transform-origin: 50% 50%; transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear; width: 26px;}
.toggle-menu span::before, .toggle-menu span::after { background-color: #696969; content: ""; display: block; height: 2px; position: absolute; transform-origin: 50% 50%; transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear; width: 26px; }
.toggle-menu span::before { top: 7px;}
.toggle-menu span::after { top: -7px;}
.toggle-menu.active span { background-color: transparent; transition: background 0.2s ease-out; }
.toggle-menu.active span::before, .toggle-menu.active span::after { transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out; }
.toggle-menu.active span::before { top: 0; transform: rotate3d(0, 0, 1, -45deg); }
.toggle-menu.active span::after { top: 0; transform: rotate3d(0, 0, 1, 45deg); }

/* menu */
#menu {background: #284285;height: 100%;left: 0;opacity: 0;overflow: auto;position: fixed;text-align: center;top: 0;transition: all 0.7s ease-in-out;visibility: hidden;width: 100%;z-index: 100;}
#menu.open {opacity: 1; visibility: visible;}
#menu.open li:nth-child(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
#menu.open li:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
#menu.open li:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
#menu.open li:nth-child(4) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
#menu.open li:nth-child(5) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
#menu.open li:nth-child(6) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
#menu.open li:nth-child(7) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
#menu.open li:nth-child(8) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
#menu.open li:nth-child(9) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
#menu.open li:nth-child(10) { -webkit-animation-delay: 1s; animation-delay: 1s; }
#menu.open li { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
#menu ul a { -webkit-transform: translateZ(0); transition: opacity 0.3s ease-in-out; }
.link {position: relative;white-space: nowrap;color: #111;}
.link::before, .link::after {position: absolute;width: 100%;height: 1px;background: #fff;top: 100%;left: 0;pointer-events: none;}
.link::before {content: '';}
.link--metis::before {transform-origin: 100% 50%;transform: scale3d(0, 1, 1);transition: transform .7s;}
.link--metis:hover::before {transform-origin: 0% 50%;transform: scale3d(1, 1, 1);}
#menu .main-nav {position: relative;top: 50%;transform: translateY(-50%);}
#menu .main-nav ul {color: #fff;}
#menu .main-nav a {color: #fff;}
#menu .main-nav a:first { padding-top: 0; }
#menu .menu-footer { padding: 2rem;bottom: 0; left: 0;position: absolute;right: 0;}
#menu .menu-footer ul { display: inline-block; list-style: none; margin: 0; padding: 0; }
#menu .menu-footer ul li { display: inline; margin: 0 1rem; }
#menu .menu-footer a { color: #ffffff; text-decoration: none; text-transform: uppercase; }
#menu .menu-footer .vol_wrap .date {color: #d3d3d3;display: none;font-size: .7rem;font-weight: 300;}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
.menu_warp {position:relative;width:100%;/* padding:30px 0; */line-height: 1;}
.menu_warp .button_mo {display:none;margin-bottom:20px;border-bottom:1px solid #ccc;padding-bottom:20px;}
.menu_warp .button_mo:after {display:block;content:"";clear:both;}
.menu_warp .button_mo > a {display:block;float:left;width:50%;text-align:center;}
.menu_warp:after {content:''; clear:both; display:block;}
.menu_warp .menulist {width: 95%;display:inline-block;padding: 10px 0 0 20px;height: 400px;border-left: 1px solid #ccc;}
.menu_warp .menulistWrap {display: inline-block;float: left;width: 33.33333333333333%;border-left: 1px solid #595d8c;}
/* .menu_warp .headerTitle {padding: 0 0 2px 10px;font-weight:bold;color:#fff;font-size:24px;letter-spacing: -0.75px;border-left: 5px solid #fff;} */
.menu_warp .menulist:last-child {border-right:0;}
.menu_warp .menulist p {font-weight:bold;color: #fff;font-size:19px;padding:10px 0;}
.menu_warp .menulist p a {font-weight:800; color:#3d5a84; font-size:19px; padding:10px 0;}
.menu_warp .menulist ul li {padding:5px 0;margin-bottom:5px;display: inline-block;width: 95%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.menu_warp .menulist ul li:before {content:'-';margin-right:5px;}
.menu_warp .wrap {max-width: 1280px;margin: 0 auto;text-align: left;}

/* footer */
.footer {position: relative;padding: 50px 0;background-color: #1e173b;z-index: 20;}
.footer > * {font-size: 14px;color: #222;line-height: 1.4;}
.footer h2 {position: absolute;left: 0;top: 0;width: 175px;height: 40px;background: url('../img/common/f_logo.png') no-repeat;background-size: 175px 40px;}
.footer h2 > a {display: block; width: 100%; height: 100%; }
.footer .f_text {padding-left: 300px;color: #fff;}
.footer .f_text ul {position: relative; }
.footer .f_text ul li {margin-bottom: 5px; }
.footer .f_text li span {display: inline-block;font-weight: 600;}
.footer .f_text li span:after {content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 10px; background-color: #b0b0b0; }
.footer .f_text li p {display: inline-block; vertical-align: top;}
.footer .f_sns {position: absolute; right: 0; top: 0; }
.footer .f_sns ul {font-size: 0;}
.footer .f_sns li {display: inline-block; width: 35px; height: 35px; margin-left: 10px;}
.footer .f_sns li:first-child {margin-left: 0; }
.footer .f_sns li a {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.footer .f_sns li.f_sns01 a {background-image: url('../img/common/f_sns01.png'); }
.footer .f_sns li.f_sns02 a {background-image: url('../img/common/f_sns02.png'); }
.footer .f_sns li.f_sns03 a {background-image: url('../img/common/f_sns03.png'); }
.footer .mobile {display: none;}

#btn_top { visibility: hidden; position: fixed; bottom: 180px; width: 45px; height: 45px; text-align: center; background-color: lightgrey; right: 15px; z-index: 200; cursor: pointer; visibility: visible; opacity: 0; transition: visibility 0s linear 0s, opacity 300ms;}
#btn_top.btn_top_visible { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms;}
#btn_top i { width: 50px; height: 50px; text-align: center; line-height: 48px; background-color: #d3d3d3; font-size: 2rem;}
.sns_box { position: fixed; right: 20px; bottom: 30px; width: 50px; height: 50px; z-index: 64; overflow: hidden; opacity: 0; -webkit-transition: 0.5s; transition: 0.5s; }
.sns_box.fix { bottom: 90px; opacity: 1; }
.sns_box.on { width: 300px; }
.sns_box a { display: block; float: right; text-align: center; margin-right: 8px; width: 50px; height: 50px; }
.sns_box a.share { background: #ff911c; color: #fff; border-radius: 50%; margin: 0; font-size: 1.2rem; line-height: 50px; }
.sns_box a img { max-width: 100%; width: 100%; }
.top_btn { position: fixed; right: 20px; bottom: 30px; z-index: 11; text-transform: capitalize; width: 50px; height: 50px; border-radius: 50%; text-align: center; background: #21a9df; color: #fff; padding-top: 9px; box-sizing: border-box; }
.top_btn:after { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% + 10px); height: calc(100% + 10px); border-radius: 50%; content: ""; background: #21a9df; opacity: 0.3; z-index: -1; }
.top_btn>* { display: block; line-height: 1; }
.top_btn span { font-size: 12px; margin-top: 3px; letter-spacing: 1px; }
.top_btn:hover:after, .top_btn:focus:after { -webkit-animation: ping 1.5s infinite; animation: ping 1.5s infinite; }
@-webkit-keyframes ping {
  0% {
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    opacity: 1;
  }

  50% {
    width: calc(100% + 15px);
    height: calc(100% + 15px);
    opacity: 0.5;
  }

  100% {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    opacity: 0;
  }
}
@keyframes ping {
  0% {
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    opacity: 1;
  }

  50% {
    width: calc(100% + 15px);
    height: calc(100% + 15px);
    opacity: 0.5;
  }

  100% {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    opacity: 0;
  }
}
.page__util {display: flex;}
.page__util a {width: 50%;}
.sub_common { display: flex; justify-content: space-between; padding-bottom: 50px; border-top: 1px solid #ddd; }
.sub_common .button_wrap { margin-top: 40px; }
.sub_common .button_wrap button { width: 100px; text-align: center; padding: 10px 0; background: none; border: none; display: inline-block; position: relative; transition: all 0.4s; }
.sub_common .button_wrap button a { font-size: 18px; color: #666; width: 100%; height: 100%; display: block; }
.sub_common .button_wrap button:before, .sub_common .button_wrap button:after { position: absolute; content: ''; z-index: 1; transition: all 0.4s; }
.sub_common .button_wrap button:hover a { color: #284285; font-weight: 700; }
.sub_common .button_wrap span { font-size: 20px; color: #ddd; font-weight: normal; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.sub_common .button_wrap .prev_btn { transition: left, color 0.4s; }
.sub_common .button_wrap .prev_btn::after {position: absolute;content: '';transform: rotate(45deg);border-left: 2px solid #666;border-bottom: 2px solid #666;width: 8px;height: 8px;left: 2px;top: 20px;}
.sub_common .button_wrap .prev_btn::before {position: absolute;content: '';border-top: 2px solid #666;width: 16px;height: 8px;left: 2px;top: 24px;}
.sub_common .button_wrap .prev_btn:hover::after, .sub_common .button_wrap .prev_btn:hover::before { left: -2px; border-color: #284285; }
.sub_common .button_wrap .next_btn::after {transform: rotate(45deg);border-right: 2px solid #666;border-top: 2px solid #666;width: 8px;height: 8px;right: 2px;top: 20px;}
.sub_common .button_wrap .next_btn::before {border-top: 2px solid #666;width: 16px;height: 8px;right: 2px;top: 24px;transition: all 0.4s;}
.sub_common .button_wrap .next_btn:hover::after, .sub_common .button_wrap .next_btn:hover::before { right: -2px; border-color: #284285; }
.sub_common .sub_sns_wrap { margin-top: 54px; }
.sub_common .sub_sns_wrap li { display: flex; float: left; margin-right: 10px; box-sizing: border-box; }
.sub_common .sub_sns_wrap li:last-child { margin-right: 0px; }
.sub_common .sub_sns_wrap li a { cursor: pointer; width: 100%; height: 100%; transition: all 0.4s; }
.sub_common .sub_sns_wrap li a i {vertical-align: bottom;font-size: 1.3rem;}
.sub_common .sub_sns_wrap li a:hover { color: #284285; }

@media all and (max-width:1280px) {
  .container {width: 100%;padding: 0 15px;}
  .menulistWrap:first-child {border-left: none;}
  .menulistWrap:first-child .menulist {border-left: none;}
  .footer {padding: 30px 15px;}
  .footer .f_text {padding-left: 190px;}
  #btn_top {bottom: 125px;}
}

@media all and (max-width:768px) {
  #menu .main-nav .menulist ul {}
  #menu .menu-footer .vol_wrap .mhid {display: block;-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUp; animation-name: fadeInUp;}
  #menu .menu-footer ul {margin-bottom: 15px;}
  .header .sub_link {display: none;}
  .footer .container {display: flex;flex-direction: column;align-items: center;text-align: center;}
  .footer h2, .footer .f_sns {position: relative;}
  .footer address {margin: 20px auto;}
  .footer .f_text {padding-left: 0;}
  .footer .f_sns {margin-top: 30px;}
  .sub_common {padding-bottom: 20px;}
  .sub_common .button_wrap {margin-top: 20px;}
  .sub_common .sub_sns_wrap {margin-top: 30px;}
  #btn_top {display: none;}
}

@media all and (max-width:480px) {
  .header .vol_wrap {display: none;}
  .sub_body .sub_title {margin-top: 70px;}
  .header .container {height: 70px;}
  .header .logo h1 img {width: 130px;}
  .sub_common {flex-direction: column;align-items: center;}
  #menu {padding: 0 15px;}
  #menu .main-nav {top: 90px;transform: none;}
	#menu .main-nav a {font-size: .8rem;}
  #menu .main-nav .menulist p a {font-size: 17px;font-weight: 700;}
  #menu .menu-footer a {font-size: 0.9rem;}
	#menu .menu-footer {position: relative;top: 120px;padding: 0 1rem 1rem;}
  .menu_warp .menulistWrap {width: 100%;border-left: none;}
  .menu_warp .menulist {width: 100%;height: auto;border-left: none;padding: 0;}

  .menu_warp .menulist p {font-weight: 400;font-size: 17px;}
  .footer .mobile {display: block;}
  .sns_box {width: 40px;height: 40px;right: 7px;}
  .sns_box a {width: 40px;height: 40px;}
  .sns_box a.share {line-height: 40px;}
  .sns_box.fix {bottom: 80px;}
  .top_btn {width: 40px;height: 40px;right: 7px;padding-top: 10px;}
  .top_btn span {display: none;}
  .top_btn>* {font-size: 1rem;}
}

@media all and (max-width:320px) {
  #menu .main-nav .menulist p a {font-size: 16px;}
  .menu_warp .menulist p {padding: 5px 0;}
}