@charset "utf-8";
html::selection,body::selection,div::selection,span::selection,applet::selection,object::selection,iframe::selection,h1::selection,h2::selection,h3::selection,h4::selection,h5::selection,h6::selection,p::selection,blockquote::selection,pre::selection,a::selection,abbr::selection,acronym::selection,address::selection,big::selection,cite::selection,code::selection,del::selection,dfn::selection,em::selection,img::selection,ins::selection,kbd::selection,q::selection,s::selection,samp::selection,small::selection,strike::selection,strong::selection,sub::selection,sup::selection,tt::selection,var::selection,b::selection,u::selection,i::selection,center::selection,dl::selection,dt::selection,dd::selection,ol::selection,ul::selection,li::selection,fieldset::selection,form::selection,label::selection,legend::selection,table::selection,caption::selection,tbody::selection,tfoot::selection,thead::selection,tr::selection,th::selection,td::selection,article::selection,aside::selection,canvas::selection,details::selection,embed::selection,figure::selection,figcaption::selection,footer::selection,header::selection,hgroup::selection,menu::selection,nav::selection,output::selection,ruby::selection,section::selection,summary::selection,time::selection,mark::selection,audio::selection,video::selection{color:#fff;background-color:#26acdb}

html{
  position: relative;
  height: 100%;
}
body{
    position: relative;
    width: 100%;
    height: 100%;
    /* font-family: 'NotoSansJP', sans-serif; */
    font-family: 'Noto Sans Japanese', sans-serif;
    color: #fff;
    overflow-x:hidden;
    /* overflow: scroll; */
  }

.left{
  position: absolute;
  left: 0;
}
.right{
  position: absolute;
  right: 0;
}
.top{
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 50px;
  height: 50px;
  padding: 17px 12px;
  box-sizing: border-box;
  background: #fff;
  -webkit-box-shadow: 3px 3px 50px 8px rgba(0,0,0,0.1);
  -moz-box-shadow: 3px 3px 50px 8px rgba(0,0,0,0.1);
  box-shadow: 3px 3px 50px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  opacity: 0;
  transition: all 1s ease;
}
.top.on{
  opacity: 1;
  transition: all 1s ease;
}

.top_btn{
  width: 24px;
  height: 15px;
  background: url('../img/custom.png');
  background-position: -43px -174px;
  text-indent: -9999px;
}
/* all page header */
header{
  position: absolute;
  width: 100%;
  border-bottom: 1px solid rgba(211, 211, 212, .4);
  padding: 17px 3%;
  max-height: 80px;
}
header h1.logo a{
  background: url('../img/main/logo.png');
  background-repeat: no-repeat;
  background-size: 100%;
  width: 110px;
  height: 45px;
  text-indent: -9999px;
  float: left;
}
header h1.logo a::after{
  clear: both;
  content: '';
  display: block;
}
header .menu {
  max-width: 94%;
}
header .menu .category_area{
  width: 600px;
  margin: 16px auto;
  text-align: center;
}
header .menu .category li, header .menu .language li{
  float: left;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
}
header .menu .category li:after, header .menu .language li:after{
  content: '';
  display: block;
  height: 2px;
  width: 0px;
  margin-top: 3px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
header .menu .category li.on:after, header .menu .language li.on:after{
  width: 100%;
  background: #fff;
}
header .menu .category li:nth-of-type(4).on:after{
  width: 80%;
}
header .menu .category{
  display: inline-block;
  margin: 0 auto;
  /* width: 520px; */
  width: auto;
}
header .menu .category li:nth-of-type(1){
  margin-left: 0;
}
header .menu .category li:nth-of-type(4){
  margin-right: 0;
}
header .menu .language{
  margin-top: -40px;
  float: right;
}
header .menu .category:after, header .menu .language:after{
  content: '';
  clear: both;
  display: block;
}
header .menu .category li:hover:after, header .menu .language li:hover:after{
  width: 100%;
	background: #fff;
}
header .menu .category li:hover:after, header .menu .language li:hover:after{
  width: 100%;
	background: #fff;
}
header .menu .category li:nth-of-type(4):hover:after{
  width: 80%;
}
header .menu .language li:hover{
  font-weight: bold;
  opacity: 1;
}
header .menu .category li{
  margin: 0 30px;
  font-size: 15px;
  font-weight: 600;
}
header .menu .category li sup{
  width: 14px;
  height: 14px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  position: relative;
  top: -8px;
  left: 2px;
}
header .menu .category li sup span{
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  color: #007bd6;
  vertical-align: 2px;
  margin-left: -1px;
}
header .menu .language li{
  margin: 0 10px;
  font-size: 15px;
  opacity: 0.8;
  letter-spacing: -0.5px;
}
header .menu .language li.on a{
  font-weight: bold;
}
header.fixed{
  position: fixed;
  top: 0;
  background: #fff;
  width: 100%;
  box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.05);
  /* transition: all .5s ease; */
  z-index: 101;
  border-bottom: 0;
}
header.fixed .logo a{
  background: url('../img/main/logo_color.png');
  background-repeat: no-repeat;
  background-size: 100%;
}
header.fixed .menu .category li sup{
  margin-top: -1px;
  background: #007bd6;
}
header.fixed .menu .category li sup span{
  color: #fff;
}
header.fixed .menu .category li a{
  color: #555;
}
header.fixed .menu .category li.on a, header.fixed .menu .category li:hover a{
  color: #007bd6;
}
header.fixed .menu .category li.on:after, header.fixed .menu .category li:hover:after{
  width: 100%;
  background: #007bd6; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #007bd6 0%, #26acdb 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #007bd6 0%,#26acdb 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #007bd6 0%,#26acdb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007bd6', endColorstr='#26acdb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
header.fixed .menu .category li:nth-of-type(4).on:after, header.fixed .menu .category li:nth-of-type(4):hover:after{
  width: 80%;
  background: #007bd6; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #007bd6 0%, #26acdb 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #007bd6 0%,#26acdb 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #007bd6 0%,#26acdb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007bd6', endColorstr='#26acdb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
header.fixed .menu .language li a{
  color: #555;
  opacity: 0.5;
  font-weight: bold;
}
header.fixed .menu .language li.on a, header.fixed .menu .language li:hover a{
  opacity: 1;
  transition: all .5s ease;
}
header.fixed .menu .language li.on:after, header.fixed .menu .language li:hover:after{
  width: 100%;
  background: #555;
}
/*
header .m_menu_btn.open{
  background: url('../img/main/m_menu_open_btn.png') no-repeat;
  min-width: 22px;
  max-width: 44px;
  height: 37px;
  border: 0;
  float: right;
  cursor: pointer;
  outline: 0;
  border-radius: 0;
  width: 100%;
}
header.fixed .m_menu_btn.open{
  background: url('../img/main/m_menu_open_btn_on.png') no-repeat;
  width: 6vw;
  height: 6vw;
  background-size: 100%;
  margin: 4% 5% 0 0;
}
header .m_menu_btn.close{
  background: url('../img/main/m_menu_close_btn.png') no-repeat;
  background-size: 100%;
  width: 5%;
  min-width: 21px;
  max-width: 42px;
  height: 42px;
  border: 0;
  float: right;
  margin: 5% 5% 0 0;
  cursor: pointer;
  outline: 0;
}
*/
.header .m_menu_btn::after{
  clear: both;
  content: '';
  display: block;
}

/* --- main header_start --- */
.header{
  width: 100%;
  height: 50%;
  position: absolute;
  z-index: 50;
  transition: all .5s ease;
}
.header.on{
  z-index: 999;
}
.header ul{
  position: absolute;
}
.header ul li a{
  font-family: 'Lato', sans-serif;
  font-weight: normal;
  color: #fff;
}
.header .logo a{
  width: 20%;
  max-width: 148px;
  min-width: 74px;
  float: left;
  height: 63px;
  margin:  50px 0 0 70px;
  background: url('../img/main/logo.png') no-repeat;
  text-indent: -9999px;
  background-size: 100%;
  opacity: 0;
}
.header .fade-logo a{
  position: relative;
  width: 20%;
  max-width: 148px;
  min-width: 74px;
  float: left;
  height: 63px;
  margin: 50px 0 0 -148px;
  text-indent: -9999px;
  background-size: 100%;
  opacity: 0;
}
.header .fade-logo a .fade-logo__a {
  position: absolute;
  top: 0;
  left: 0;
  width: 148px;
  height: 74px;
  background: url(../assets/image/logo/main-logo-a.png) no-repeat;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 150ms, transform 750ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.header .fade-logo a .fade-logo__e {
  position: absolute;
  top: 0;
  left: 0;
  width: 148px;
  height: 74px;
  background: url(../assets/image/logo/main-logo-e.png) no-repeat;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 150ms 200ms, transform 900ms 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.header .fade-logo a .fade-logo__l {
  position: absolute;
  top: 0;
  left: 0;
  width: 148px;
  height: 74px;
  background: url(../assets/image/logo/main-logo-l.png) no-repeat;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 150ms 400ms, transform 1050ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.header .fade-logo.is-active a {
  opacity: 1;
}
.header .fade-logo.is-active a .fade-logo__a,
.header .fade-logo.is-active a .fade-logo__e,
.header .fade-logo.is-active a .fade-logo__l {
  opacity: 1;
  transform: translateX(0)
}
.header .logo a::after{
  clear: both;
  content: '';
  display: block;
}
/* gnb */
.gnb{
  top: 75px;
  right: 70px;
}
.gnb li{
  display: inline-block;
  font-size: 16px;
  margin-left: 60px;
  position: relative;
}
.gnb li:after {
	content: '';
	display: block;
	height: 2px;
	width: 0px;
  margin-top: 3px;
	background: transparent;
	transition: width .5s ease, background-color .5s ease;
}
.gnb li:hover:after {
	width: 100%;
	background: #fff;
}
.gnb li:nth-of-type(4):hover:after {
	width: 80%;
	background: #fff;
}
.gnb li sup{
  width: 14px;
  height: 14px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  position: relative;
  top: -8px;
  left: 2px;
}
.gnb li sup span{
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  color: #007bd6;
  vertical-align: 3px;
  font-weight: bold;
}
/* header_fixed */
.header.on{
  width: 100%;
  height: auto;
  background: #fff;
  -webkit-box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.05);
  -moz-box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.05);
  box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.05);
  transition: all .5s ease;
}
.header.on .logo a{
  width: 110px;
  height: 49px;
  background: url('../img/main/logo_color.png') no-repeat;
  background-size: 100%;
  margin: 15px 0 15px 60px;
}
.header.on .gnb a,
.header.on .lang a{
  color: #555555;
  font-weight: 600;
}

.header.on .gnb{
  top: 50%;
  margin-top: -8px;
  left: 50%;
  margin-left: -330px;
}
.header.on .gnb li:after{
  background: #007bd6; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #007bd6 0%, #26acdb 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #007bd6 0%,#26acdb 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #007bd6 0%,#26acdb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007bd6', endColorstr='#26acdb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.header.on .gnb li:hover a{
  color: #007bd6;
}
.header.on .gnb li sup{
  margin-top: -1px;
  background: #007bd6;
}
.header.on .gnb li sup span{
  color: #fff;
}
.header.on .lang{
  top: 50%;
  margin-top: -8px;
  left: inherit;
  margin-left: inherit;
  right: 60px;
}
.header.on .lang li{
  display: inline-block;
  margin-left: 20px;
  margin-bottom: 0;
}
.header.on .lang li:hover a{
  border-color: #555555;
}
.header.on .lang li.on a{
  border-color: #555555;
}

/* content */
.small_title{
  transition: all 1.2s ease;
  transition-delay: 0.3s;
}

/* --- header_end --- */

/* --- footer_start ---*/
.footer_box{
  height: auto;
  width: 100%;
  background-color: #efefef;
  margin: auto;
  height: 90px;
}
.footer_con{
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
.footer_con>div{
  position: absolute;
  font-size: 13px;
  color: #999;
  padding: 39px 0;
}
.footer_con .address{
  left: 0;
}
.footer_con .copy{
  right: 0;
}

/* --- footer_end ---*/

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

/* Mobile */
@media screen and (max-width:768px){
  .m_hide{
    display: none !important;
  }
  header{
    height: 12.5vw;
    z-index: 1000;
    min-height: 42px;
    max-height: 110px;
    padding: 0;
    position: fixed;
  }
  header .menu .language, header .menu .category{
    display: none;
  }
  header h1.logo a{
    width: 20%;
    height: 63px;
    min-width: 74px;
    max-width: 148px;
    margin: 2% 0 0 5%;
  }
  /*
  header .m_menu_btn.open, header .m_menu_btn.close{
    width: 6vw;
    height: 6vw;
    background-size: 100%;
    margin: 4% 5% 0 0;
  }
  */
  header .m_menu_btn{
    max-width: 44px;
    max-height: 37px;
    float: right;
    margin: 4% 5% 0 0;
  }
  header .m_menu_btn rect{
    fill: #fff;
  }
  header .m_menu_btn.close{
    max-height: 44px;
  }
  header.fixed .m_menu_btn.open rect{
    fill: #433d84;
  }
  header .menu .category_area{
    display: none;
  }
  .header{
    z-index: 1000;
    position: fixed;
    height: 12.5vw;
    min-height: 42px;
    transition : unset;
  }
  .header .logo a{
    margin: 3% 0 0 5%;
  }
  .header.on{
    height: 13.5vw;
    min-height: 50px;
  }
  .header.on .logo a{
    margin: 3% 0 0 5%;
    width: 20%;
    max-width: 148px;
    min-width: 74px;
    float: left;
    height: 63px;
    background: url('../img/main/logo_color.png') no-repeat;
    text-indent: -9999px;
    background-size: 100%;
  }
  .header ul.gnb{
    display: none;
  }
  .header .m_menu_btn{
    max-width: 44px;
    max-height: 37px;
    float: right;
    margin: 5% 5% 0 0;
  }
  .header .m_menu_btn rect{
    fill: #fff;
  }
  .header .m_menu_btn.close{
    max-height: 44px;
  }
  .header.on .m_menu_btn.open rect{
    fill: #433d84;
  }
  .header .m_menu_btn::after{
    clear: both;
    content: '';
    display: block;
  }
  .header .lang{
    display: none;
  }
  /* moblie menu background */
  .mobile_slide_menu{
    width: 0;
    height: 100%;
    position: fixed;
    z-index: 50;
    left: 100%;
    background: -moz-linear-gradient(-45deg, rgba(0,123,214,0.9) 0%, rgba(38,172,219,0.9) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(0,123,214,0.9) 0%,rgba(38,172,219,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(0,123,214,0.9) 0%,rgba(38,172,219,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc007bd6', endColorstr='#cc26acdb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }
  .mobile_slide_menu.on{
    width: 100%;
    transition: left 0.3s;
    left: 0;
    position: fixed;
    z-index: 999;
  }
  .mobile_slide_menu ul{
    width: 80%;
    margin: 0;
    position: relative;
    top: 28%;
    left: 10%;
  }
  .mobile_slide_menu ul li{
    font-family: 'Lato', sans-serif;
    font-size: 6.6vw;
    line-height: 14vw;
  }
  .mobile_slide_menu ul.lang{
    width: 50%;
    margin-top: 11%;
  }
  .mobile_slide_menu ul.lang li{
    float: left;
    font-size: 3.5vw;
    margin: 0 10% 0 0;
    line-height: 4vw;
  }
  .mobile_slide_menu ul li sup{
    width: 14px;
    height: 14px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 3vw;
  }
  .mobile_slide_menu ul li sup span{
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    color: #007bd6;
    vertical-align: 3px;
    font-weight: bold;
  }
  .mobile_slide_menu .lang li a{
    display: inline-block;
    position: relative;
    border-bottom: 2px solid transparent;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .mobile_slide_menu.on .lang li.on a{
    opacity: 1;
    border-color: #fff;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  /* 공통 footer */
  .footer_box{
    width: 100%;
    height: 24vw;
    min-height: 0;
  }
  .footer_box .footer_con{
    position: unset;
    padding: 4% 3% 0 4%;
    width: 92%;
    margin: 0;
  }
  .footer_box .footer_con .address, .footer_box .footer_con .copy{
    position: relative;
    padding: 0;
    font-size: 3vw;
    line-height: 4.5vw;
    padding: 2px 0;
  }
  .footer_box .footer_con .copy{
    line-height: 6vw;
  }

  .top{
    z-index: 800;
    right: 5%;
    bottom: 3%;
  }
}

/* Tablet */
@media screen and (min-width:769px) and (max-width:1023px){
  header .menu .category{
    width: auto;
  }
  header .m_menu_btn{
    display: none;
  }
  header .menu .category li{
    margin: 0 15px;
  }
  header .menu .language{
    margin-top: -38px;
  }
  header .menu .language li{
    margin: 0 5px;
  }
  .header{
    z-index: 1000;
    position: fixed;
    height: 12.5vw;
    min-height: 42px;
    transition : unset;
  }
  .header .m_hide{
    display: none;
  }
  .header .logo a{
    margin: 2% 0 0 5%;
  }
  .header.on{
    min-height: 50px;
    height: 12vw;
    max-height: 100px;
  }
  .header.on .logo a{
    margin: 2% 0 0 5%;
    width: 20%;
    max-width: 148px;
    min-width: 74px;
    float: left;
    height: 63px;
    background: url('../img/main/logo_color.png') no-repeat;
    text-indent: -9999px;
    background-size: 100%;
  }
  .header ul.gnb{
    display: none;
  }
  .header .m_menu_btn{
    max-width: 44px;
    max-height: 37px;
    float: right;
    margin: 32px 5% 0 0;
  }
  .header .m_menu_btn rect{
    fill: #fff;
  }
  .header .m_menu_btn.close{
    max-height: 44px;
  }
  .header.on .m_menu_btn.open rect{
    fill: #433d84;
  }
  /*
  .header .m_menu_btn.open{
    background: url('../img/main/m_menu_open_btn.png') no-repeat;
    background-size: 100%;
    width: 5%;
    min-width: 22px;
    max-width: 44px;
    height: 37px;
    border: 0;
    float: right;
    margin: 4% 5% 0 0;
    cursor: pointer;
    outline: 0;
    border-radius: 0;
  }
  .header.on .m_menu_btn.open{
    background: url('../img/main/m_menu_open_btn_on.png') no-repeat;
    background-size: 100%;
    margin: 4% 5% 0 0;
  }
  .header .m_menu_btn.close{
    background: url('../img/main/m_menu_close_btn.png') no-repeat;
    background-size: 100%;
    width: 5%;
    min-width: 21px;
    max-width: 42px;
    height: 42px;
    border: 0;
    float: right;
    margin: 4% 5% 0 0;
    cursor: pointer;
    outline: 0;
  }
  .header .m_menu_btn::after{
    clear: both;
    content: '';
    display: block;
  }
  */
  .header .lang{
    display: none;
  }
  .mobile_slide_menu{
    /* background: url('../img/main/gradient_m_menu_bg.png') no-repeat; */
    /* width: 0;
    height: 100%;
    position: fixed;
    z-index: 50;
    left: 100%; */
    width: 0;
    height: 100%;
    position: fixed;
    z-index: 50;
    left: 100%;
    background: -moz-linear-gradient(-45deg, rgba(0,123,214,0.9) 0%, rgba(38,172,219,0.9) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(0,123,214,0.9) 0%,rgba(38,172,219,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(0,123,214,0.9) 0%,rgba(38,172,219,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc007bd6', endColorstr='#cc26acdb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }
  .mobile_slide_menu.on{
    width: 100%;
    transition: left 0.3s;
    left: 0;
    position: fixed;
    z-index: 999;
  }
  .mobile_slide_menu ul{
    margin: 20% 0 0 8%;
    width: 90%;
  }
  .mobile_slide_menu ul li{
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    line-height: 90px;
  }
  .mobile_slide_menu ul.lang{
    width: 50%;
    margin-top: 11%;
  }
  .mobile_slide_menu ul.lang li{
    float: left;
    font-size: 30px;
    margin: 0 10% 0 0;
    line-height: 1;
  }
  .mobile_slide_menu ul li sup{
    width: 14px;
    height: 14px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 1vw;
  }
  .mobile_slide_menu ul li sup span{
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    color: #9173c0;
    vertical-align: 3px;
    font-weight: bold;
    position: relative;
    top: -50px;
  }
  .mobile_slide_menu.on{
    background-size: 100%;
  }
  .footer_box{
    width: 100%;
    height: 150px;
    min-height: 0;
  }
  .footer_box .footer_con{
    position: unset;
    width: 92%;
    margin: 0;
    padding: 20px 35px;
  }
  .footer_box .footer_con .address, .footer_box .footer_con .copy{
    position: relative;
    padding: 0;
    font-size: 20px;
    line-height: 30px;
    padding: 2px 0;
  }
  .footer_box .footer_con .copy{
    line-height: 35px;
  }
}

/* PC */
@media screen and (min-width:1024px){
  header{
    position: fixed;
  }
  header .m_menu_btn{
    display: none !important;
  }
  .pc_hide{
    display: none !important;
  }
  .mobile_slide_menu{
    display: none !important;
  }
  .header .m_menu_btn{
    display: none !important;
  }
  .header .logo svg{
    margin: 50px 0 0 70px;
    width: 160px;
    height: 63px;
    cursor: pointer;
  }
  .header .logo.static_logo{
    display: none;
  }
  @keyframes move_action_symbole {
    from{
      transform: translateX(50px);
      opacity: 0;
    }
    to{
      transform: scale(0.8) translateX(12px) translateY(11px);
      -webkit-transform: scale(0.8) translateX(12px) translateY(11px);
      -ms-transform: scale(0.8) translateX(12px) translateY(8px);
      -moz-transform: scale(0.8) translateX(12px) translateY(11px);
      width: 50px;
      height: 64px;
      opacity: 1;
    }
  }
  @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    @keyframes move_action_symbole {
     from{
       transform: translateX(50px);
       opacity: 0;
     }
     to{
       transform: translateX(5px);
       -webkit-transform: translateX(5px);
       -moz-transform: scale(0.8) translateX(12px) translateY(8px);
       width: 50px;
       height: 64px;
       opacity: 1;
     }
   }
 }
 @-moz-document url-prefix() {
   @keyframes move_action_symbole {
    from{
      transform: translateX(50px);
      opacity: 0;
    }
    to{
      transform: translateX(5px);
      -webkit-transform: translateX(5px);
      -moz-transform: scale(1) translateX(5px) translateY(0px);
      width: 50px;
      height: 64px;
      opacity: 1;
    }
  }
 }
 @supports (-ms-ime-align:auto)
 and (-webkit-text-stroke:initial) {
   @keyframes move_action_symbole {
    from{
      transform: translateX(50px);
      opacity: 0;
    }
    to{
      transform: translateX(5px);
      -webkit-transform: translateX(5px);
      -ms-transform: scale(1) translateX(12px) translateY(8px);
      width: 50px;
      height: 64px;
      opacity: 1;
    }
  }
 }
 /* Safari 9+ */
 @supports (overflow:-webkit-marquee)
    and (justify-content:inherit) {
      @keyframes move_action_symbole {
       from{
         transform: translateX(50px);
         opacity: 0;
       }
       to{
         transform: translateX(5px);
         transform: scale(1) translateX(5px) translateY(0px);
         -webkit-transform: scale(1) translateX(5px) translateY(0px);
         width: 50px;
         height: 64px;
         opacity: 1;
       }
     }
 }

 /* Safari 10.1+ */
 @media not all and (min-resolution:.001dpcm)
 { @media {
   @keyframes move_action_symbole {
    from{
      transform: translateX(50px);
      opacity: 0;
    }
    to{
      transform: translateX(5px);
      transform: scale(1) translateX(5px) translateY(0px);
      -webkit-transform: scale(1) translateX(5px) translateY(0px);
      width: 50px;
      height: 64px;
      opacity: 1;
    }
  }
 }}
  @keyframes move_action_text_c {
    from{
      transform: translateX(100px) translateY(12px);
      opacity: 0;
    }
    to{
      transform: translateX(57px) translateY(12px);
      width: 22px;
      opacity: 1;
    }
  }
  @keyframes move_action_text_u {
    from{
      transform: translateX(120px) translateY(12px);
      opacity: 0;
    }
    to{
      transform: translateX(82px) translateY(12px);
      width: 21px;
      opacity: 1;
    }
  }
  @keyframes move_action_text_b {
    from{
      transform: translateX(140px) translateY(12px);
      opacity: 0;
    }
    to{
      transform: translateX(107px) translateY(12px);
      width: 20px;
      opacity: 1;
    }
  }
  @keyframes move_action_text_e {
    from{
      transform: translateX(160px) translateY(12px);
      opacity: 0;
    }
    to{
      transform: translateX(131px) translateY(12px);
      width: 17px;
      opacity: 1;
    }
  }
  @keyframes move_action_small_text_p {
    from{
      transform: translateX(100px) translateY(42px);
      opacity: 0;
    }
    to{
      transform: translateX(59px) translateY(42px);
      opacity: 1;
    }
  }
  @keyframes move_action_small_text_l {
    from{
      transform: translateX(110px) translateY(42px);
      opacity: 0;
    }
    to{
      transform: translateX(71px) translateY(42px);
      opacity: 1;
    }
  }
  @keyframes move_action_small_text_a {
    from{
      transform: translateX(120px) translateY(42px);
      opacity: 0;
    }
    to{
      transform: translateX(82px) translateY(42px);
      opacity: 1;
    }
  }
  @keyframes move_action_small_text_t {
    from{
      transform: translateX(130px) translateY(42px);
      opacity: 0;
    }
    to{
      transform: translateX(93px) translateY(42px);
      opacity: 1;
    }
  }
  @keyframes move_action_small_text_f {
    from{
      transform: translateX(140px) translateY(42px);
      opacity: 0;
    }
    to{
      transform: translateX(105px) translateY(42px);
      opacity: 1;
    }
  }
  @keyframes move_action_small_text_o {
    from{
      transform: translateX(150px) translateY(42px);
      opacity: 0;
    }
    to{
      transform: translateX(115px) translateY(42px);
      opacity: 1;
    }
  }
  @keyframes move_action_small_text_r {
    from{
      transform: translateX(160px) translateY(42px);
      opacity: 0;
    }
    to{
      transform: translateX(127px) translateY(42px);
      opacity: 1;
    }
  }
  @keyframes move_action_small_text_m {
    from{
      transform: translateX(170px) translateY(42px);
      opacity: 0;
    }
    to{
      transform: translateX(139px) translateY(42px);
      opacity: 1;
    }
  }
  .symbol, .text_c, .text_u, .text_b, .text_e, .small_text_p, .small_text_l, .small_text_a, .small_text_t, .small_text_f, .small_text_o, .small_text_r, .small_text_m{
   opacity : 0;
  }
  .symbol{
    animation: move_action_symbole 1s forwards;
  }
  .text_c{
   animation: move_action_text_c 1s forwards;
   animation-delay: 0.2s
  }
  .text_u{
   animation: move_action_text_u 1s forwards;
   animation-delay: 0.3s
  }
  .text_b{
   animation: move_action_text_b 1s forwards;
   animation-delay: 0.4s
  }
  .text_e{
   animation: move_action_text_e 1s forwards;
   animation-delay: 0.5s
  }
  .small_text_p{
    animation: move_action_small_text_p 1s forwards;
    animation-delay: 0.6s
  }
  .small_text_l{
    animation: move_action_small_text_l 1s forwards;
    animation-delay: 0.7s
  }
  .small_text_a{
    animation: move_action_small_text_a 1s forwards;
    animation-delay: 0.8s
  }
  .small_text_t{
    animation: move_action_small_text_t 1s forwards;
    animation-delay: 0.9s
  }
  .small_text_f{
    animation: move_action_small_text_f 1s forwards;
    animation-delay: 0.9s
  }
  .small_text_o{
    animation: move_action_small_text_o 1s forwards;
    animation-delay: 1s
  }
  .small_text_r{
    animation: move_action_small_text_r 1s forwards;
    animation-delay: 1.1s
  }
  .small_text_m{
    animation: move_action_small_text_m 1s forwards;
    animation-delay: 1.2s
  }
}

/* etc */
@media screen and (min-width:722px) and (max-width:768px){
  .mobile_slide_menu ul li sup span{
    position: relative;
    top: calc(-7vw - 5px);
  }
}
@media screen and (min-width:601px) and (max-width:721px){
  .mobile_slide_menu ul li sup span{
    position: relative;
    top: calc(-8vw - -4px);
  }
  header .m_menu_btn, .header .m_menu_btn{
    -moz-transform: scale(0.8); /* Firefox */
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.8); /* Opera */
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.8); /* Safari And Chrome */
    -webkit-transform-origin: 0 0;
    transform: scale(0.8); /* Standard Property */
    transform-origin: 0 0;  /* Standard Property */
  }
}
@media screen and (min-width:501px) and (max-width:600px){
  .mobile_slide_menu ul li sup span{
    position: relative;
    top: calc(-8vw - -5px);
  }
  header .m_menu_btn, .header .m_menu_btn{
    margin-right: 4%;
    -moz-transform: scale(0.7); /* Firefox */
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.7); /* Opera */
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.7); /* Safari And Chrome */
    -webkit-transform-origin: 0 0;
    transform: scale(0.7); /* Standard Property */
    transform-origin: 0 0;  /* Standard Property */
  }
}
@media screen and (min-width:441px) and (max-width:500px){
  .mobile_slide_menu ul li sup span{
    position: relative;
    top: calc(-7vw - -2px);
  }
  header .m_menu_btn, .header .m_menu_btn{
    margin-right: 3%;
    -moz-transform: scale(0.6); /* Firefox */
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.6); /* Opera */
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.6); /* Safari And Chrome */
    -webkit-transform-origin: 0 0;
    transform: scale(0.6); /* Standard Property */
    transform-origin: 0 0;  /* Standard Property */
  }
}
@media screen and (min-width:361px) and (max-width:440px){
  .mobile_slide_menu ul li sup span{
    position: relative;
    top: calc(-7vw - -4px);
  }
  header .m_menu_btn, .header .m_menu_btn{
    margin-right: 0;
    -moz-transform: scale(0.5); /* Firefox */
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5); /* Opera */
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5); /* Safari And Chrome */
    -webkit-transform-origin: 0 0;
    transform: scale(0.5); /* Standard Property */
    transform-origin: 0 0;  /* Standard Property */
  }
}
@media screen and (max-width:360px){
  .mobile_slide_menu ul li sup span{
    position: relative;
    top: calc(-7vw - -6px);
  }
  header .m_menu_btn, .header .m_menu_btn{
    margin-right: 0;
    -moz-transform: scale(0.5); /* Firefox */
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5); /* Opera */
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5); /* Safari And Chrome */
    -webkit-transform-origin: 0 0;
    transform: scale(0.5); /* Standard Property */
    transform-origin: 0 0;  /* Standard Property */
  }
}
@media screen and (min-width:1024px) and (max-width:1199px){
  .footer_con{
    width: 980px;
  }
}

/* 10 & 11 CSS styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   header .menu .category li sup span{
    vertical-align: 0;
    margin-left: 0;
   }
   .header .move_logo{
     display: none;
   }
   .header .logo.static_logo{
     display: block;
   }
}

/* IE Edge 12+ CSS styles */
@supports (-ms-accelerator:true) {
  header .menu .category li sup span{
   vertical-align: 0;
   margin-left: 0;
  }
}
/* Safari 9+ */
@supports (overflow:-webkit-marquee)
   and (justify-content:inherit) {
     .gnb li sup span{
       vertical-align: 2px;
     }
     header .menu .category li sup span{
       margin-left: 0;
     }
}

/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm)
{ @media {
  .gnb li sup span{
    vertical-align: 2px;
  }
}}

/* all firefox */
@-moz-document url-prefix() {
  .gnb li sup span{
    margin-left: -1px;
  }
  header .menu .category li sup span{
    vertical-align: 3px;
  }
}

/* fire fox mac only */
@supports (-moz-osx-font-smoothing:auto) {
  .gnb li sup span{
    vertical-align: 1px;
  }
  header .menu .category li sup span{
    vertical-align: 2px;
  }
}

@media (max-width: 1024px) {
  .header .logo a {
    opacity: 1;
  }
  .header .fade-logo {
    opacity: 0;
  }
}