@charset "utf-8";

/* skipnavi */
#skipnavi { position: absolute; top: -1px; left: 0; background-color: #333; z-index: 9999; }
#skipnavi a { position: absolute; top: 0; left: 0; padding: 0.625rem 1.625rem; margin-top: -100px; text-align: center; line-height: 1; white-space: nowrap; background-color: #000; }
#skipnavi a:link { color: #333; }
#skipnavi a:focus { margin-top: 0; color: #fff }

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

/* header */
.headmenu {position: absolute;left: 0;top: 20px;z-index: 400;width: 100%;}
.header {display: flex;justify-content: space-between;align-items: center;width: 90%;margin: 0 auto;position: relative;z-index: 400;}
.header__tit .header__tit-txt { float: left; }
.header__tit .logo__txt { font-size: 17px; float: left; margin: 0 0 0 15px; color: #fff; font-weight: 200; }
.header__tit .logo__txt span { font-weight: 600; }
.header__util {margin-right: 50px;}
.header__util:after { display: block; clear: both; content: ""; }
.header__util > a { color: #fff; border: 2px solid #fff; padding: 6px 12px; border-radius: 18px; font-size: 16px; -webkit-transition: 0.2s; transition: 0.2s; font-weight: 200; }
.header__util > a:hover, .header__util > a.active { color: #000; background: #fff; font-weight: 400; }
.header__util > a.dark:hover, .header__util > a.dark.active {background: none; filter: invert(1);}
.header__util > a.size:hover, .header__util > a.size.active {background: none; filter: invert(1);}
.header__util > a+a { margin-left: 0.3rem; }
.headmenu .nav_btn {position: fixed;top: 0;right: 0;/* height: 82px; */padding: 28px;font-size: 18px;cursor: pointer;transition: 0.3s;z-index: 500;color: #fff;font-weight: 600;z-index: 400;border-bottom-left-radius: 25px;}
.headmenu.sticky .nav_btn {background: #2ca6df;}
.header__util .dark, .header__util .size {border: none;width: 40px;display: inline-block;padding: 0;}
.headmenu.active { position: fixed; }
.headmenu.sticky .link {display: block;}

/* gnb */
.gnb .menu {background: #00a8e4;height: 0;overflow: hidden;position: fixed;left: 0;top: 0;transition: height .5s ease;width: 50vw;z-index: 1400;display: flex;justify-content: center;align-items: center;}
.gnb .menu2 {background: #6c3f98;height: 0;overflow: hidden;position: fixed;right: 0;bottom: 0;transition: height .5s ease;width: 50vw;z-index: 1400;display: flex;justify-content: center;align-items: center;}
.gnb .menu3 { background: transparent; height: 0; width: fit-content; overflow: hidden; position: fixed; right: 0; left: 0; top: 0; margin: auto; opacity: 0; visibility: hidden; transition: opacity .5s ease; z-index: 1500; }
.gnb .menu3 .header__util, .gnb .menu3 .logo__txt {display: none;}
.gnb.active .menu, .gnb.active .menu2 { justify-content: center; align-items: center; height: 100%; }
.gnb.active .menu3 { display: block; opacity: 1; height: 100%; min-height: 100%; visibility: visible; transition: opacity .5s ease .5s; }
.gnb { position: absolute; width: 100%; z-index: 300; transition: background-color 200ms ease-in-out; }
.gnb .menu .gnb__depth-item:hover a { text-decoration: underline; color: #ffda85; }
.gnb .menu2 .gnb__depth-item:hover a { text-decoration: underline; color: #ffda85; }
.gnb .gnb__list { display: flex; width: 100%; justify-content: center;}
.gnb .gnb__list .gnb__item { width: 40%; text-align: center;}
.gnb .gnb__list .gnb__item a {font-size: 30px; font-weight: 600;color: #ffdb20;}
.gnb .gnb__list .gnb__depth-list {margin-top: 15px;}
.gnb .gnb__list .gnb__depth-item {line-height: 1.8;}
.gnb .gnb__list .gnb__depth-item a {font-size: 26px; font-weight: 400; color: #fff;}

.banner_pc {display: block;}
.banner_mo {display: none;}

/* footer */
#footer { background-color: #d1d2d7; }
.footer { display: flex; padding: 56px 0; justify-content: space-between; align-items: center; }
.footer address { line-height: 1.5; }
.footer .sns_channel li { display: inline-block; margin-left: 5px; }
.footer .sns_channel a { width: 56px; height: 56px; line-height: 56px; text-align: center; display: inline-block; vertical-align: middle; background: #353331; border-radius: 50%; }
.footer .sns_channel a img { opacity: 0.8; -webkit-transition: 0.2s; transition: 0.2s; }
.footer .sns_channel a:hover img, .footer .sns_channel a:focus img { opacity: 1; }
#btn_top { visibility: hidden; position: fixed; bottom: 56px; right: 15px; z-index: 200; cursor: pointer; visibility: visible; opacity: 0; transition: visibility 0s linear 0s, opacity 300ms; width: 56px; height: 56px; text-align: center; background-color: #ffffff; border-radius: 50%; padding-top: 7px; border: 3px solid #000; }
#btn_top.visible { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; }
#btn_top i { display: block; }

.site-side {display: flex;flex-direction: column;gap: 10px;position: fixed;right: 15px;top: 265px;z-index: 20;}
.site-side .btn--function {background-color: #6c3f98;background-size: cover;width: 56px;height: 56px;text-align: center;line-height: 56px;box-sizing: border-box;color: #fff;border-radius: 50%;cursor: pointer;}
.sns_box button {display: block;float: right;text-align: center;margin-right: 1rem;width: 56px;height: 56px;opacity: 0;visibility: hidden;cursor: pointer;}
.sns_box button.share {background: #6c3f98;color: #fff;border-radius: 50%;margin: 0;line-height: 56px;opacity: 1;visibility: visible;}
.sns_box button img { max-width: 100%; width: 100%; }
.sns_box.on button { opacity: 1; visibility: visible;}
.sns_box {position: fixed;right: 15px;z-index: 64;opacity: 1;-webkit-transition: 0.5s;transition: 0.5s;top: 463px;}
.sns_box.fix {bottom: 19.4rem; opacity: 1;}
.sns_box.on {width: 44rem; opacity: 1;}

/* optiopm */
.parallax__progress progress { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 5px; border: none; background: transparent; }
progress::-webkit-progress-bar { background: transparent; }
progress::-webkit-progress-value { background: #ff8670; }
progress::-moz-progress-value { background: #ff8670; }

@media all and (max-width:1200px) {
  .container {width: 100%;padding: 0 15px;}
  .footer { text-align: center; padding: 30px 0; display: block;}
  .footer address {margin: 20px auto;}
  .footer .sns_channel li:first-child {margin-left: 0;}
  #btn_top {bottom: 30px;}
}

@media all and (max-width: 1024px) {
  .header__tit .logo__txt {display: none;}
  .headmenu .header__util {display: none;}
  .headmenu .nav_btn {padding: 28px 15px;}
  .gnb .menu3 .header__util { display: flex; margin-right: 0; position: fixed; bottom: 15px; align-items: center; left: 0; right: 0; justify-content: center;}
  .gnb .menu3 .logo__txt { display: flex; position: fixed; bottom: 60px; left: 0; right: 0; color: #fff; text-align: center; flex-direction: column-reverse; font-weight: 200;}
  .gnb .menu3 .logo__txt span {font-weight: 600;}
  .header__util > a {padding: 5px 10px;font-size: 14px;}
  .header__util .dark, .header__util .size {width: 37px;}
  .site-side {display: none;}
  .gnb .gnb__list {flex-direction: column;align-items: center;gap: 50px;}
  .gnb .gnb__list .gnb__item { width: 100%; text-align: center;}
  .gnb .gnb__list .gnb__item a {font-size: 25px; font-weight: 600;}
  .gnb .gnb__list .gnb__depth-list {margin-top: 15px;}
  .gnb .gnb__list .gnb__depth-item {line-height: 1.8;}
  .gnb .gnb__list .gnb__depth-item a {font-size: 20px;}
}

@media all and (max-width:768px) {
  .banner_pc {display: none;}
  .banner_mo {display: block;}
	.header__util .size {display: none;}
	#btn_top {display: none;}
}

@media all and (max-width:460px) {
  .header .header__tit .header__tit-txt {margin-top: -15px;}
  .header .header__tit .header__tit-txt img {width: 105px;}
  .headmenu .nav_btn {padding: 14px;font-size: 16px;border-bottom-left-radius: 20px;}
  .gnb .gnb__list .gnb__item a {font-size: 22px;}
  .gnb .gnb__list .gnb__depth-item a {font-size: 18px;}
  .gnb .menu3 .logo__txt {font-size: 14px;}
  
  .footer address {word-break: keep-all;}
  .footer .sns_channel a {width: 40px;height: 40px;line-height: 40px;}
  .footer .sns_channel a img {width: 60%;}

  #btn_top {width: 40px;height: 40px;padding-top: 10px;bottom: 31px;}
  #btn_top span {display: none;}
}

@media all and (max-width:360px) {
  .header__util > a { padding: 5px 7px; font-size: 13px; }
  .header__util .dark, .header__util .size {width: 30px;}
}