/**base**/
ul { list-style-type: none;}
button{    border: none;}

/**common**/
#wrap.main #dHead {  width: calc(100% - 8px)}
#wrap.main #dHead .all-menu-wrap {  width: calc(100% + 8px)}

@media screen and (max-width: 1024px) {
    #wrap.main #dHead {  width: 100%}
    #wrap.main #dHead .all-menu-wrap {  width: 100%}

}

/**main**/
#dHead {/* position: fixed; top: 0;  left: 0;*/ width: 100%; z-index: 1500}

.btn-all-menu-toogle-nav { position: absolute; top:33%;  right: 0;  display: block; width: 32px; height: 32px;  font-size: 0;  z-index: 15; background: none;}
.btn-all-menu-toogle-nav>span { position: absolute; top: 50%; left: 50%;   display: block; width: 30px;  height: 4px;  margin: -2px 0 0 -15px;  background: #1f1f1f; 
    transition: transform .4s .2s cubic-bezier(.165,.84,.44,1),background .4s ease}
.btn-all-menu-toogle-nav>span:nth-child(3):before,.btn-all-menu-toogle-nav>span:nth-child(4):before {  position: absolute; top: 0;  left: 0; display: block; content: ''; width: 100%;  height: 100%;
    transform: scaleX(0);  background: #1f1f1f; transition: transform .4s cubic-bezier(.165,.84,.44,1),background .4s ease}
.btn-all-menu-toogle-nav>span:nth-child(1) { transform: scaleX(1) translate(0 ,-6px);  transform-origin: 0 50%}
.btn-all-menu-toogle-nav>span:nth-child(2) {  transform: scaleX(1) translate(0 ,6px);  transform-origin: 100% 50%}
.btn-all-menu-toogle-nav>span:nth-child(3) { transform: rotate(45deg);  transition: none;   background: 0 0}
.btn-all-menu-toogle-nav>span:nth-child(4) {  transform: rotate(-45deg);  transition: none; background: 0 0}
.btn-all-menu-toogle-nav.actived>span:nth-child(1) {  transform: scaleX(0) translate(0 ,-6px);  transition-delay: 0ms}
.btn-all-menu-toogle-nav.actived>span:nth-child(2) {  transform: scaleX(0) translate(0 ,6px);  transition-delay: 0ms}
.btn-all-menu-toogle-nav.actived>span:nth-child(3) {  transform: rotate(45deg)}
.btn-all-menu-toogle-nav.actived>span:nth-child(4) { transform: rotate(-45deg)}
.btn-all-menu-toogle-nav.actived>span:nth-child(3):before,.btn-all-menu-toogle-nav.actived>span:nth-child(4):before { transform: scale(1);  transition-delay: .2s}
.gnb-wrap {   position: relative;  width: 100%;  height: 80px; text-align: center; overflow: hidden;  background:#0072bc; transition: height .6s cubic-bezier(.165,.84,.44,1),background .4s ease; border-radius: 20px;}
.gnb-wrap .gnb-list { display: inline-flex;  justify-content: center; gap: 80px;}
.gnb-wrap .gnb-list-cell+.gnb-list-cell { }
.gnb-wrap .gnb-list-cell.actived .btn-gnb-nav {  color: #0072bc;;  font-weight: 800}
.gnb-wrap .gnb-list-cell.actived .btn-gnb-nav>span.txt:after { opacity: 1}
.gnb-wrap .gnb-list-cell .btn-gnb-nav:hover {  color: #0072bc;!important;  font-weight: 800}
.gnb-wrap .gnb-list-cell .btn-gnb-nav:hover>span.txt:after { opacity: 1}
.gnb-wrap .gnb-list-cell .btn-gnb-nav:hover .loop-word:after { opacity: 1}
.gnb-wrap .gnb-list-cell.hover .snb-wrap {  z-index: 5}
.gnb-wrap .gnb-list-cell:nth-child(1) .snb-list-cell>a,.gnb-wrap .gnb-list-cell:nth-child(6) .snb-list-cell>a { text-align: center}
.btn-gnb-nav {  display: inline-flex; height: 80px;   align-items: center;  font-size: 20px;  font-weight: 500;  line-height: 1;  overflow: hidden;  transition: color .2s ease;  color: #fff;}
.btn-gnb-nav>span.txt {   position: relative;  display: inline-block;  padding: 13px 0;  box-sizing: border-box;}
.btn-gnb-nav>span.txt:after {  content: '';  position: absolute;  bottom: 0;  left: 0;  display: block;  width: 100%;  height: 3px;  background: #0072bc;;  opacity: 0;  transition: background .2s ease}
.btn-gnb-nav .loop-word {  position: relative;  display: block}
.btn-gnb-nav .loop-word:after {  content: '';  position: absolute;  top: 28px;  left: 0;  display: block;  width: 100%;  height: 3px;  background: #0072bc;;  opacity: 0;  transition: background .2s ease}
.btn-gnb-nav .loop-word .loop-word-text {  opacity: 0; padding: 0 5px}
.btn-gnb-nav .loop-word .loop-word-frame {   position: absolute;  top: 0;  left: 0;  display: inline-flex}
.btn-gnb-nav .loop-word .loop-word-frame>span { display: block;  white-space: nowrap;  padding: 0 5px}

@keyframes loopWord {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.gnb-wrap .snb-wrap { position: absolute; top: 80px; left: 0; line-height: 1; width: 100%; z-index: 0; box-sizing: border-box; transform: translate(0 ,0); opacity: 0; 
    transition: transform .6s cubic-bezier(.165,.84,.44,1),opacity .4s ease}
.gnb-wrap .snb-list-inner { /*max-width: 1200px;*/ padding: 40px 0 48px 0; margin-left: auto; margin-right: auto; box-sizing: border-box; /*min-height: 220px*/}
.gnb-wrap .snb-list {  display: inline-flex;  margin: -8px -24px;  flex-wrap: wrap;  text-align: left}
.gnb-wrap .snb-list-cell {   width: calc(100% / 6); min-width: 210px;  padding: 0;box-sizing: border-box; text-align: center;}
.gnb-wrap .snb-list-cell.actived>a,.gnb-wrap .snb-list-cell>a:hover {  color:  #FFC107;}
.gnb-wrap .snb-list-cell>a:hover {  font-weight: 600}
.gnb-wrap .snb-list-cell>a {  display: inline-flex;  align-items: center;  gap: 0 5px;  font-size: 19px;  line-height: 1.2;  color: #fff;  word-break: break-all}
.gnb-wrap .snb-list-cell>a.disabled,.gnb-wrap .snb-list-cell>a.disabled:hover {  color: #bbb;  font-weight: 300}
.all-menu-wrap {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100vh;  clip-path: polygon(0 0,100% 0,100% 0,0 0);  background: #fff;  overflow: hidden;  visibility: hidden;  transition: clip-path .6s cubic-bezier(.165,.84,.44,1),visibility 0s .59s ease;
    z-index: 10}
.all-menu-wrap.actived { visibility: visible; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); transition-delay: 0s}
.all-menu-wrap:before { content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(255,255,255,.35);  -webkit-backdrop-filter: blur(30px);  backdrop-filter: blur(30px);
    z-index: 3}
.all-menu-wrap:after {  content: '';  position: absolute;  top: 0; left: 0;  width: calc(100% - 17px);  height: 80px;  background: #fff;  z-index: 8}
.all-menu-scroller {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   overflow-x: hidden;   overflow-y: auto;   z-index: 5}
.all-menu-inner {  max-width: 75%;  margin-left: auto;  margin-right: auto;  padding: 120px 0}
.all-menu-list {  display: flex;  margin: 0 -10px}
.all-menu-list-cell {  flex: 1;   box-sizing: border-box;  padding: 0 10px;  text-align: center;  line-height: 1}
.btn-all-menu-nav {display: flex;  justify-content: center;  flex-wrap: wrap;  font-size: 24px;  font-weight: 600;  text-align: center}
.all-menu-list .snb-wrap {  margin-top: 32px}
.all-menu-list .snb-list-cell+.snb-list-cell {  margin-top: 16px}
.all-menu-list .btn-snb-nav {   text-align: center;   display: inline-flex;   align-items: center;   gap: 0 5px;   font-size: 18px}
.all-menu-list .btn-snb-nav:hover {   color: #0072bc;;   font-weight: 600}
.all-menu-cube {   position: absolute;   top: 70%;   right: 20%;   z-index: 0}
.all-menu-cube:before {  content: '';  position: absolute;  top: 0;  left: 0;  display: block;  width: 534px;  height: 534px;  background: url(../images/common/all-menu-cube.png) center center no-repeat;  margin: -267px 0 0 -267px;
    animation-name: cube;  animation-duration: 5s;  animation-direction: normal;  animation-iteration-count: infinite}

@keyframes cube {
    0% {
        transform: translate(0 ,0);
        animation-timing-function: cubic-bezier(.25,.46,.45,.94)
    }

    25% {
        transform: translate(0 ,-30px);
        animation-timing-function: cubic-bezier(.55,.085,.68,.53)
    }

    50% {
        transform: translate(0 ,0);
        animation-timing-function: cubic-bezier(.25,.46,.45,.94)
    }

    75% {
        transform: translate(0 ,30px);
        animation-timing-function: cubic-bezier(.55,.085,.68,.53)
    }

    100% {
        transform: translate(0 ,0)
    }
}

@media screen and (min-width: 2560px) {


    #page-ui,.btn-all-menu-toogle-nav {  right: 50%;  margin-right: -1135px }

}

@media screen and (min-width: 1920px) {

.gnb-wrap .gnb-list {  gap: 40px;}

}

@media screen and (min-width: 1025px) {
    .btn-gnb-nav .loop-word .loop-word-frame {  left:0; animation: loopWord 1.5s linear infinite }
    #dHead.white .gnb-wrap {  background: rgba(255,255,255,0) }
    #dHead.white .btn-gnb-nav {  color: #fff }
    #dHead.white .gnb-wrap .gnb-list-cell.actived .btn-gnb-nav {    color: #0072bc;}
    #dHead.white .btn-gnb-nav>span.txt:after {    background: #009bc7; }
    #dHead.white .btn-all-menu-toogle-nav>span {    background: #fff }
    #dHead.white .btn-all-menu-toogle-nav>span:nth-child(3),#dHead.white .btn-all-menu-toogle-nav>span:nth-child(4) {     background: 0 0 }
    #dHead.white .btn-all-menu-toogle-nav>span:nth-child(3):before,#dHead.white .btn-all-menu-toogle-nav>span:nth-child(4):before {     background: #fff }
    #dHead.hover .btn-all-menu-toogle-nav>span {   background: #0072bc; }
    #dHead.hover .btn-all-menu-toogle-nav>span:nth-child(3),#dHead.hover .btn-all-menu-toogle-nav>span:nth-child(4) {   background: 0 0 }
    #dHead.hover .gnb-wrap {    height: 215px; background: #009bc7;}
    #dHead.hover .gnb-list-cell.hover .snb-wrap {   transform: translate(0 ,0);  opacity: 1 }
    #dHead.hover .btn-gnb-nav {  color: #fff; }
    #dHead.hover .gnb-wrap .gnb-list-cell.actived .btn-gnb-nav {  color: #0072bc; }
    #dHead.hover .btn-gnb-nav>span.txt:after {  background: #fff;}
    #dHead.all .btn-all-menu-toogle-nav>span { background: #0072bc;}
    #dHead.all .btn-all-menu-toogle-nav>span:nth-child(3),#dHead.all .btn-all-menu-toogle-nav>span:nth-child(4) {  background: 0 0}
    #dHead.all .btn-all-menu-toogle-nav>span:nth-child(3):before,#dHead.all .btn-all-menu-toogle-nav>span:nth-child(4):before { background: #1f1f1f }
    #dHead {  transition: transform .6s cubic-bezier(.165,.84,.44,1),top .6s cubic-bezier(.165,.84,.44,1) }
    #dHead.scroll.up {    transform: translate(0 ,0) }
    #dHead.scroll.down {  transform: translate(0 ,-55px)  }
   
}

@media screen and (max-width: 1600px) {

    .gnb-wrap .gnb-list {  gap: 25px;}
    .btn-gnb-nav,.gnb-wrap .snb-list-cell>a {  font-size: 17px;}
    #dHead.hover .gnb-wrap {    height: 190px; background: #009bc7;}


    .btn-all-menu-toogle-nav {right: 30px;}
    #page-ui {    right: 60px }
    .all-menu-inner {    max-width: 1128px}
   .all-menu-cube:before {     width: 373px;    height: 373px;    margin: -186px 0 0 -186px}

}

@media screen and (max-width: 1440px) {
    .all-menu-inner { max-width:1024px  }
    .all-menu-list {  margin: 0 -5px }
    .all-menu-list-cell {  padding: 0 5px}
    .btn-all-menu-nav {   font-size: 18px }
    .all-menu-list .snb-wrap {  margin-top: 24px}
    .all-menu-list .snb-list-cell+.snb-list-cell { margin-top: 12px }
    .all-menu-list .btn-snb-nav {  font-size: 16px }
}


@media screen and (max-width: 1366px) {
    .all-menu-cube:before {  width:267px;  height: 267px;  margin: -133px 0 0 -133px   }
   
}

@media screen and (max-width: 1280px) {

    .gnb-wrap .snb-list-inner { max-width: 90%; padding: 20px;}
    



}

@media screen and (max-width: 1024px) {

    #dHead { position: static;  top: auto; left: auto;  width: auto;  z-index: initial }
    #gnb {    display: none }
    
    .btn-all-menu-toogle-nav {  top: 70%;  right: 5%; width: 0; height: 0; display: block}
    .btn-all-menu-toogle-nav>span {  width: 30px; height: 4px;   margin: -3px 0 0 -21px }
    .btn-all-menu-toogle-nav>span:nth-child(3):before,.btn-all-menu-toogle-nav>span:nth-child(4):before {  position: absolute;  top: 0; left: 0; display: block;  content: '';  width: 100%; height: 100%;
        transform: scaleX(0);  background: #1f1f1f; transition: transform .4s cubic-bezier(.165,.84,.44,1),background .4s ease}
    .btn-all-menu-toogle-nav>span:nth-child(1) {  transform: scaleX(1) translate(0 ,-8px)}
    .btn-all-menu-toogle-nav>span:nth-child(2) {  transform: scaleX(1) translate(0 ,8px)}
    .btn-all-menu-toogle-nav.actived>span:nth-child(1) {  transform: scaleX(0) translate(0 ,-8px)  }
    .btn-all-menu-toogle-nav.actived>span:nth-child(2) {   transform: scaleX(0) translate(0 ,8px)  }
    .all-menu-wrap {   height: var(--vh ,100vh); height: 100dvh }
    .all-menu-wrap:before {  background: rgba(255,255,255,1);  backdrop-filter: none }
    .all-menu-wrap:after { display: none }
    .all-menu-inner { max-width: none; padding: 88px 60px 60px 60px }
    .all-menu-list {  display: block; margin: 0}
    .all-menu-list-cell {  padding: 0; text-align: left}
    .all-menu-list-cell+.all-menu-list-cell {  margin-top: 28px  }
    .all-menu-list-cell.show+.all-menu-list-cell {  margin-top: 60px }
    .btn-all-menu-nav {   justify-content: flex-start;   font-size: 32px; text-align: left}
    .all-menu-list .snb-wrap {  margin-top: 28px;  display: none; padding: 0 12px }
    .all-menu-list .all-menu-list-cell.show .snb-wrap { display: block}
    .all-menu-list .all-menu-list-cell.show .btn-all-menu-nav {   color: #0072bc;}
    .all-menu-list .snb-list-cell+.snb-list-cell {   margin-top: 0 }
    .all-menu-list .snb-list {  display: flex;  flex-wrap: wrap; margin: -8px -6px}
    .all-menu-list .snb-list-cell {  width: 50%;   box-sizing: border-box; padding: 8px 6px  }
    .all-menu-list .btn-snb-nav {  text-align: left;  display: block; font-size: 18px;  line-height: 1.2;  color: #666 }
    .all-menu-list .btn-snb-nav:hover {  color: #666;  font-weight: 300}
    .all-menu-list .btn-snb-nav>span { display: none  }
    .all-menu-list .snb-list-cell.actived .btn-snb-nav {  color: #1f1f1f }
    .all-menu-cube {  display: none }
  
    /**#dHead:before {  content: '';   position: absolute;  top: 0;  left: 0;   width: 100%;  height: 120px;  background: rgba(255,255,255,.8);  z-index: 0 }**/
    #dHead.white:before { background: rgba(255,255,255,0) }
    #dHead.white .btn-all-menu-toogle-nav>span {   background: #fff }
    #dHead.white .btn-all-menu-toogle-nav>span:nth-child(3),#dHead.white .btn-all-menu-toogle-nav>span:nth-child(4) {  background: 0 0 }
    #dHead.white .btn-all-menu-toogle-nav>span:nth-child(3):before,#dHead.white .btn-all-menu-toogle-nav>span:nth-child(4):before {   background: #fff }

    #dHead.all .btn-all-menu-toogle-nav>span { background: #1f1f1f}
    #dHead.all .btn-all-menu-toogle-nav>span:nth-child(3),#dHead.all .btn-all-menu-toogle-nav>span:nth-child(4) {   background: 0 0 }
    #dHead.all .btn-all-menu-toogle-nav>span:nth-child(3):before,#dHead.all .btn-all-menu-toogle-nav>span:nth-child(4):before {   background: #1f1f1f}
    #dHead {  transition: transform .6s cubic-bezier(.165,.84,.44,1),top .6s cubic-bezier(.165,.84,.44,1) }
    #dHead.scroll.up {  transform: translate(0 ,0)}
    #dHead.scroll.down {   transform: translate(0 ,-120px) }
    #dHead.all.up {   transform: translate(0 ,0)}
    #dHead.all.down {  transform: translate(0 ,0) }
    #contents {   padding-top: 120px;   padding-bottom: 140px}
    
}
@media screen and (max-width: 860px) {

.btn-all-menu-toogle-nav {top: 50%;}

}

@media screen and (max-width: 767px) {
    #dHead:before {  height:60px  }
    #dHead.scroll.down { transform: translate(0 ,-80px) }
    .all-menu-inner {  max-width: none; padding: 88px 16px 60px 16px }
    .btn-all-menu-toogle-nav>span {    width: 22px;  height: 4px;   margin: -2px 0 0 -11px  }
    .btn-all-menu-toogle-nav>span:nth-child(1) {    transform: scaleX(1) translate(0 ,-5px)  }
    .btn-all-menu-toogle-nav>span:nth-child(2) {   transform: scaleX(1) translate(0 ,5px)  }
    .btn-all-menu-toogle-nav.actived>span:nth-child(1) { transform: scaleX(0) translate(0 ,-5px) }
    .btn-all-menu-toogle-nav.actived>span:nth-child(2) {  transform: scaleX(0) translate(0 ,5px) }
    a.btn-basic,button.btn-basic,input[type=submit].btn-basic {   height: 52px;   padding: 0 40px;  font-size: 18px}
    .layer-pop-children {  padding: 16px }
    .layer-pop-wrap .pop-data {  width: 100%  }
    .layer-pop-wrap.contents-pop .layer-pop-children {  padding: 0 }
    .layer-pop-wrap.contents-pop .pop-data {  display: block;  width: 100%;  height: 100% }
    
}

@media screen and (max-width: 390px) {
    .all-menu-list .btn-snb-nav {  font-size:18px  }
}