/* ==============================
    cm-header 
============================== */
.cm-header {position: absolute; width: 100%; top: 0; left: 0; z-index: 999;}
.header-wrapper {position: relative;  display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.3); } 
#head-full{ flex: 2;}
#head-full a i{ line-height: 113px; transition: .3s;}
#head-full a{display: inline-block; transition: .3s;}
#head-full p{ display: inline-block; line-height: 113px; padding-left: 10px; vertical-align: top;  transition: .3s;}
.logo-wrap {width: auto; height: 113px; flex: 1; text-align: center;}
.logo-wrap a {display: block; width: 100%; height: 113px; margin-top: 0; transition: .3s; padding: 20px 0;}
.logo-wrap img {width: 120px; height: auto; object-fit: cover; margin-top: 10px;}
.logo-wrap img.logo-normal{display: inline-block;}
.logo-wrap img.logo-scroll{display: none;}
.header.scroll .header-wrapper{ border-bottom: 1px solid rgba(74,74,72,.3);}
.header.scroll .logo-wrap img.logo-normal{display: none;}
.header.scroll .logo-wrap img.logo-scroll{display: inline-block;}
.header-btn{ position: fixed; top: -40px; right: 0; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; color: rgba(74,74,72,.6); -webkit-backdrop-filter: blur(16px) saturate(180%); background-color: rgba(255, 255, 255, 0.75); opacity: 0; pointer-events: none; transition: .3s;}
.header.scroll + .header-btn{ top: 0; opacity: 1; pointer-events: inherit;}
.header.scroll + .header-btn.active{top: 120px;}
.header-btn i{ transition: .3s;}
.header-btn.active i{ transform: rotate(180deg);}
.cm-header .op_show{ opacity: 0; transition: .5s; animation: show_opacity 2s linear normal 1 forwards;}
@keyframes show_opacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
.cm-header .op_show:nth-child(1){animation-delay: 1.7s;}
.cm-header .op_show:nth-child(2){animation-delay: 2s;}
.cm-header .op_show:nth-child(3){animation-delay: 2.3s;}

@media (max-width: 1024px){
    .header-wrapper { width: calc(100% - 40px); padding: 0;}
    .logo-wrap {height: 60px; text-align: left;}
    .logo-wrap a {height: 60px; text-align: center; padding: 14px 0;}
    .logo-wrap img {width: 67px; margin-top: 0;}
    .logo-wrap img.logo-normal{display: none;}
    .logo-wrap img.logo-scroll{display: inline-block;}
    #head-full{ display: none;}
    .header-btn{  display: none;}
    .header.scroll .header-wrapper{ border-bottom: 0;}
    .cm-header .op_show{ opacity: 1; transition: .5s; animation: unset;}
}
/* ==============================
    header 
============================== */
.header {position: fixed; top: 0;left: 0; width: 100%; height: 113px; z-index: 2002; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); background: transparent;box-shadow: none;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;-ms-transition: all 300ms linear;transition: all 300ms linear; -webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden; }
.header:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 0; background-color: rgba(255,255,255,0); transform: scaleY(0); transform-origin: top; transition: .5s;}
.header.scroll {position: fixed; border-bottom: unset;  height: 113px; transition: tranform 0.3s;  top: 0;}
.header.scroll:after{height: 100%; background-color: rgba(255,255,255,1); transform: scaleY(1); z-index: -1;}
@media (max-width: 1024px){
    .header{ height: 60px; background-color: #fff; }
    .header.scroll{ height: 60px; top: 0; border-bottom: 1px solid rgba(74,74,72,.3);}
}
/* ==============================
    header icon
============================== */
.menu-icon_wrap{ flex: 1;}
.header-icon { flex: 1; font-size: 0; text-align: right; -webkit-transition : all 0.3s ease-out;-moz-transition : all 0.3s ease-out;-o-transition :all 0.3s ease-out;transition : all 0.3s ease-out; height: 113px;}
.menu-icon {position: relative; z-index: 2; width: 30px; cursor: pointer;}
.menu-icon__line {display: block; width: 30px; height: 1px; background-color: #fff; margin-bottom: 10px;-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;transition: background-color .5s ease, -webkit-transform .2s ease;transition: transform .2s ease, background-color .5s ease;transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;}
.header.scroll .menu-icon__line{ background-color: #4A4A48;}
.line-a, .line-c {width: 100%;-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;-ms-transition: all 200ms linear;transition: all 200ms linear;}
.line-c {margin-left: auto;margin-bottom: 0;}
.menu-icon:hover .line-a, .menu-icon:hover .line-c {width: 100%;}
.header-icon > a{ display: inline-block; vertical-align: top;  margin-top: 41px; margin-left: 20px; height: 34px; line-height: 34px;}
.header-icon > a i{ transition: .3s;}
.header-icon > a.reser-btn{ display: inline-block; text-align: center; transition: .3s; width: 107px; border: 1px solid rgba(255,255,255,.5); position: relative; }
.header-icon > a.reser-btn:hover{ background-color: #fff; color: #707070; }
.header.scroll .header-icon > a.reser-btn{ display: inline-block; border: 1px solid rgba(112,112,112,.5); color: #707070; }
.header.scroll .header-icon > a i{ color: #707070;}
@media (max-width: 1024px){
    .header-icon{ height: 60px;}
    .header-icon > a.sns{ display: none!important;}
    .header-icon > a{ margin-top: 18px; margin-left: 0; height: 25px; line-height: 25px;}
    .header-icon > a.reser-btn{width: 75px; border: 1px solid rgba(112,112,112,.5); position: relative; color: #707070; }
    .header-icon > a:hover{ background-color: unset; }
    .header-icon > a p{ width: auto; padding-right: 0;}
    .header-icon > a i{ font-size: 20px; color: #fff; transition: .3s;}
    .header-icon > div{ display: inline-block; top: 2px;}
    .menu-icon {position: relative; z-index: 2; width: 25px; cursor: pointer;}
    .menu-icon__line {display: block; width: 25px; height: 1px; background-color: #707070; margin-bottom: 7px;-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;transition: background-color .5s ease, -webkit-transform .2s ease;transition: transform .2s ease, background-color .5s ease;transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;}
    .header.scroll .menu-icon__line {background-color: #4A4A48; }
    .line-c {margin-left: 0;margin-bottom: 0;}
}
/* ==============================
    nav
============================== */
.nav {position: fixed; z-index: 98;}
.nav:before, .nav:after {content: "";position: fixed; width: 100%; height: 100%; top: 0; background: rgba(112,112,112,0.6); z-index: -1;-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;-webkit-transform: translateX(0%) translateY(-100%);transform: translateX(0%) translateY(-100%);}
.nav:after {background: rgba(112,112,112,1);-webkit-transition-delay: 0s;transition-delay: 0s;}
.nav:before {-webkit-transition-delay: .2s;transition-delay: .2s;}
.nav-content {position: fixed;visibility: hidden;top: 220px; width: 100%;text-align: center;}
.nav-content .wrap1320{ display: flex; justify-content: space-between; padding: 0 50px;}
.nav-content .wrap1320 .img-wrap{ position: relative; width: 510px; height: 597px; top: -50px; opacity: 0; transition: 1s; }
.nav-content .wrap1320 .img-wrap .box{ position: absolute; display: block; width: 689px; height: 436px; background-color: #fff; z-index: 1; left: -60px; top: 0;}
.nav-content .wrap1320 .img-wrap img{ position: absolute; top: 60px; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: 1s; z-index: 2;}
.nav-content .wrap1320 .img-wrap img.show{ opacity: 1; transform: scale(1);}
.nav-list {position: relative; z-index: 2; display: flex; flex-direction: column; width: 50%;}
.nav-item {
	position: relative;
	display: inline-block;
	text-align: left;
	color: #fff;
	overflow: hidden; 
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	margin-top: 0;
	margin-bottom: 15px;
    max-width: max-content;
}
.nav-item a{ 
	position: relative;
	color: rgba(255,255,255,1);
	overflow: hidden; 
	padding-right: 5px;
    margin-bottom: 0;
	z-index: 2;
	display: inline-block;
    /* -webkit-transition: all 200ms linear;
    transition: all 200ms linear;  */
    text-transform: capitalize;
}
.nav-item p{ 
    display: inline-block;
    position: relative;
    top: 2px;
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
	opacity: 0;
    -webkit-transform: translate(0%, 100%);
    transform: translate(0%, 125%) rotate(4deg);
	-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
	transition: opacity 1s ease, -webkit-transform 1s ease;
	transition: opacity 1s ease, transform 1s ease;
	transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease;
}
.nav-item > a:before{ 
    content: ''; 
    display: block; 
    width: 0; 
    height: 1px; 
    margin-right: 35px;
    transition: .5s;
    transform: scaleX(0);
    transform-origin: left;
    box-sizing: border-box;
    background-color: #fff; 
    display: inline-block; 
    position: relative; 
    bottom: 7px;
}
.nav-item a:hover:after {height: 20px; opacity: 1;}
.nav-item:hover a {color: rgba(255,255,255,1);}
.nav-item.active-nav a {color: rgba(255,255,255,1);}
.nav-item.active-nav a:after {height: 20px;opacity: 1;}
.nav-item.active-nav > a:before{  
    width: 70px; 
    transform: scaleX(1);
}
.nav-list .sub-links {position: relative; padding: 0; margin: 0 0 10px 105px; display: none; height: auto;}
.nav-list .sub-links li {padding: 0; margin: 0 auto; text-align: center; display: inline-block;}
.nav-list .sub-links li:first-child {margin-top: 0;}
.nav-list .sub-links li a { 
	color: #B4B4B4;
	overflow: hidden;
	font-size: 14px;
	line-height: 21px;
	padding-bottom: 0;
    padding-left: 0;
    padding-right: 40px;
	margin: 0 auto;
	text-align: left;
	display: inline-block;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
}
.nav-list .sub-links li a:after {display: none;}
.nav-list .sub-links li a:hover {color: #fff; opacity: 1;}
.nav-list .sub-links li.active-nav a {color: #fff; opacity: 1;}
@media (max-width: 1024px){
    .nav-item > a:before{ margin-right: 0; bottom: 5px;}
    .nav-item.active-nav > a:before{ width: 35px; margin-right: 15px;}
    .nav-list{ flex-direction: column; align-items: flex-start; width: 100%;}
    .nav-item { width: 100%; text-align: left; font-size: 0; line-height: 0; margin-bottom: 10px;}
    .nav-content {position: fixed; visibility: hidden;top: 100px; width: 100%;text-align: center;}
    .nav-content .wrap1320{ flex-direction: column; position: relative; height: calc(100vh - 120px); padding: 0 20px;}
    .nav-item a {  
        color: rgba(255,255,255,1);
        padding-left: 0;
        padding-top: 10px;
        padding-right: 20px;
        margin-bottom: 10px;
        font-size: 18px; line-height: 18px;
    }
    .nav-item a p{
        font-size: 20px;
    }
    .nav-list .sub-links{ padding-bottom: 0;  margin: 0 0 10px 0; position: relative; }
    .nav-list .sub-links li a { 
        overflow: hidden;
        font-size: 12px;
        line-height: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-top: 0;
        max-width: 100%;
        text-align: left; 
        border-radius: 0;
    }
    .nav-list .sub-links li a:hover {color: #fff;}
}
/* ==============================
    nav-active
============================== */
body.nav-active{ overflow: hidden;}
body.nav-active .header.scroll .header-wrapper{ border-bottom: 1px solid rgba(255,255,255,.3);}
body.nav-active .nav-content {visibility: visible;}
body.nav-active .header.scroll:after{height: 100%; background-color: rgba(112,112,112,1); transform: scaleY(1); z-index: -1;}
body.nav-active .header.scroll .logo-wrap img.logo-normal{display: inline-block;}
body.nav-active .header.scroll .logo-wrap img.logo-scroll{display: none;}
body.nav-active .header.scroll .header-icon > a.reser-btn{ display: inline-block; border: 1px solid #fff; background-color: transparent; color: #fff; }
body.nav-active .header.scroll .header-icon > a i{ color: #fff;}
body.nav-active .header.scroll .menu-icon__line{ background-color: #fff; }
body.nav-active .header{ background: rgba(112,112,112,1); border-bottom: unset;}
body.nav-active .nav-content .wrap1320 .img-wrap{opacity: 1; top: 0;}

body.nav-active .menu-icon__line {
	background-color: #fff;
	-webkit-transform: translate(0px, 0px) rotate(-45deg);
    transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .line-a {
	width: 15px;
	-webkit-transform: translate(3px, 5px) rotate(45deg);
    transform: translate(3px, 5px) rotate(45deg);
}
body.nav-active .line-c {
	width: 15px;
	float: right;
	-webkit-transform: translate(-2px, -6.5px) rotate(45deg);
    transform: translate(-2px, -6.5px) rotate(45deg);
}

body.nav-active .menu-icon:hover .line-a, body.nav-active .menu-icon:hover .line-c {width: 15px;}
body.nav-active .nav {visibility: visible;}
body.nav-active .nav:before, body.nav-active .nav:after {-webkit-transform: translateX(0%) translateY(0%);transform: translateX(0%) translateY(0%);}
body.nav-active .nav:after {-webkit-transition-delay: .1s;transition-delay: .1s;}
body.nav-active .nav:before {-webkit-transition-delay: 0s;transition-delay: 0s;}
body.nav-active .curent-page-name-shadow {margin-top: -25px;opacity: 0.08;-webkit-transition-delay: 0.5s;transition-delay: 0.5s;}
body.nav-active .nav-item p{
	opacity: 1;
	-webkit-transform: translateX(0%);
    transform: translate(0px, 0px);
	transition: 1s;
}
body.nav-active .nav-item:nth-child(0) p{-webkit-transition-delay: 0.6s;transition-delay: 0.6s;}
body.nav-active .nav-item:nth-child(1) p{-webkit-transition-delay: 0.7s;transition-delay: 0.7s;}
body.nav-active .nav-item:nth-child(2) p{-webkit-transition-delay: 0.8s;transition-delay: 0.8s;}
body.nav-active .nav-item:nth-child(3) p{-webkit-transition-delay: 0.9s;transition-delay: 0.9s;}
body.nav-active .nav-item:nth-child(4) p{-webkit-transition-delay: 1.0s;transition-delay: 1.0s;}
body.nav-active .nav-item:nth-child(5) p{-webkit-transition-delay: 1.1s;transition-delay: 1.1s;}
body.nav-active .nav-item:nth-child(6) p{-webkit-transition-delay: 1.2s;transition-delay: 1.2s;}
body.nav-active .nav-item:nth-child(7) p{-webkit-transition-delay: 1.3s;transition-delay: 1.3s;}
body.nav-active .nav-item:nth-child(8) p{-webkit-transition-delay: 1.4s;transition-delay: 1.4s;}
body.nav-active .nav-item:nth-child(9) p{-webkit-transition-delay: 1.5s;transition-delay: 1.5s;}
body.nav-active .nav-item:nth-child(10) p{-webkit-transition-delay: 1.6s;transition-delay: 1.6s;}

body.nav-active .mo-sns{ display: none;}
@media (max-width: 1024px){
    body.nav-active .line-c {
        width: 15px;
        float: right;
        position: relative; 
        left: 1px;
        -webkit-transform: translate(-2px, -4.5px) rotate(45deg);
        transform: translate(-2px, -4.5px) rotate(45deg);
    }
    body.nav-active .header-icon > a.reser-btn{border: 1px solid rgba(255,255,255,.5); position: relative; color: #fff; }
    body.nav-active .header.scroll .header-icon > a.reser-btn {border: 1px solid rgba(255,255,255,.5); position: relative; color: #fff; }
    body.nav-active .nav-content .wrap1320 .img-wrap{ display: none;}
    body.nav-active .logo-wrap img.logo-normal{ display: inline-block;}
    body.nav-active .logo-wrap img.logo-scroll{ display: none;}
    body.nav-active .header.scroll .header-wrapper{ border-bottom: 0;}
    body.nav-active .header .header-wrapper{border-bottom: 0;}
    body.nav-active .header.scroll{ border-bottom: 1px solid rgba(255,255,255,.3);}
    body.nav-active .header{ border-bottom: 1px solid rgba(255,255,255,.3);}
    body.nav-active .mo-sns{ display: block; }
    body.nav-active .mo-sns.nav-item a{ padding-right: 15px; padding-bottom: 0; }
    body.nav-active .mo-sns.nav-item a i{ font-size: 24px;}
    body.nav-active .mo-sns.nav-item a:before{display: none;}
}


.loader{ position: fixed; width: 100%; height: 100%; z-index: 100000; opacity: 1; overflow: hidden; background-color: #111; transition: 1s; top: 0; left: 0;}
.loader .img-wrap{ position: absolute; text-align: center; left: 50%; margin: 0 auto; width: 273px; height: auto; top: 50%;transform: translate3d(-50%, -50%, 0);}
.loader .img-wrap img{ width: auto; object-fit: cover; transition: .3s;display:block;margin:0 auto;
    animation-name: t-opacity;
    animation-duration:1s;
    animation-iteration-count:1;
    animation-direction:normal;
}
@keyframes t-opacity{
    0%{
        opacity: 0.4;
    }
    100%{
        opacity: 1;
    }
}

.loader.hide{ opacity: 0; pointer-events: none; }
@media (max-width: 1024px){
    .loader .img-wrap img{ width: 200px; }

}


/* footer */
footer{background-color: #707070; width: 100%; min-width: 1440px; text-align: center; position: relative; }
footer .box{ background-color: #fff; width: calc(50% - 470px); position: absolute; height: 100%; top: 0; left: 0;}
footer .f-wrap{width: 100%; left: 0; right: 0; margin: 0 auto; overflow: hidden; display: flex; justify-content: center; z-index: 1; position: relative; align-items: center;}
footer .left{ width: 470px; height: 470px; background-color: #fff; position: relative;}
footer .left img{ position: absolute; top: calc(50% - 10px); left: 0; right: 0; margin: 0 auto;}
footer .right{ width: calc(100% - 490px); height: 470px; padding: 70px 80px; background-color: #707070; text-align: left;}
footer .f-sns{ font-size: 0;}
footer .f-sns a{ padding-right: 20px;}
footer .f-license{ font-size: 0; display: block;}
footer .f-license li{ display: inline-block; padding: 0 5px; position: relative;}
footer .f-license li:after{ content: '|'; font-size: 10px; position: absolute; right: 0; bottom: 2px; color: #fff; opacity: .4;}
footer .f-license li:first-child{ padding-left: 0;}
footer .f-license li:last-child:after{ content: '';}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    footer{ min-width: 100%;}
    footer .box{ display: none;}
    footer .f-wrap{width: 100%; }
    footer .left{ display: none;}
    footer .right{ width: 100%; height: auto; padding: 40px 20px; }
    footer .f-sns a{ padding-right: 15px;}
}