@charset "UTF-8";

@media print, screen and (min-width:1200px) {

#topHead {
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
z-index: 100;
transition: .3s;
line-height: 1;
}

#topHead #logo {
position: absolute;
background: url("../img/logo.png") no-repeat;
background-size: 150px;
width: 150px;
height: 53px;
transition: .3s;
top: 25px;
left: 35px;
}

#topHead #logo a span {
width: 150px;
height: 53px;
font-size: 0;
display: block;
text-indent: -10000px;
}

#topHead.fixed #logo {
background: url("../img/logo.png") no-repeat;
background-size: 102px;
width: 102px;
height: 36px;
}

#topHead.fixed #logo a span {
width: 102px;
height: 36px;
}

#globalNav {
position: fixed;
background: #fff;
width: 70%;
text-align: left;
overflow-x: hidden;
overflow-y: auto;
display: block;
-webkit-overflow-scrolling: touch;
transition: all .6s;
opacity: 0;
z-index: 200;
top: 0;
right: -100%;
bottom: 0;
}

.open #globalNav {
right: 0;
opacity: 1;
}

#globalNav #globalNavInner {
position: absolute;
width: 778px;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
line-height: 1.6;
}

#globalNav #globalNavInner ul {
width: 342px;
margin: 0;
padding: 0;
}

#globalNav #globalNavInner ul li {
position: relative;
font-family: var(--font-oswald);
font-size: 1.4rem;
margin-bottom: 30px;
}

#globalNav #globalNavInner ul li a span {
font-family: var(--font-primary);
font-size: 2rem;
color: var(--txtColor);
display: block;
}

#globalNav #globalNavInner ul li a {
color: var(--themeColor);
display: block;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e2e2e2;
}

#globalNav #globalNavInner ul li a:hover span {
color: var(--themeColor);
}

#globalNav #globalNavInner ul li ul li {
font-family: var(--font-primary);
margin-bottom: 0;
}

#globalNav #globalNavInner ul li ul li a {
font-size: 1.6rem;
color: var(--txtColor);
}

#globalNav #globalNavInner ul li ul li a:hover {
color: var(--themeColor);
}

#globalNav #globalNavInner img {
width: 400px;
margin-top: 60px;
}

.toggleBtn {
position: fixed;
background-color: #fff;
width: 50px;
height: 50px;
display: block;
top: 25px;
right: 25px;
transition: all .5s;
cursor: pointer;
border: 1px solid var(--themeColor);
z-index: 1000;
}
.toggleBtn span {
position: absolute;
background-color: var(--themeColor);
width: 18px;
height: 1px;
margin: auto;
display: block;
left: 0;
right: 0;
transition: all .5s;
}
.toggleBtn span:nth-child(1) {
top: 10px;
}
.toggleBtn span:nth-child(2) {
top: 16px;
}
.toggleBtn span:nth-child(3) {
top: 22px;
}
.open .toggleBtn span {
background-color: var(--themeColor);
}
.open .toggleBtn span:nth-child(1) {
-webkit-transform: translateY(10px) rotate(-315deg);
transform: translateY(5px) rotate(-315deg);
}
.open .toggleBtn span:nth-child(2) {
opacity: 0;
}
.open .toggleBtn span:nth-child(3) {
-webkit-transform: translateY(-10px) rotate(315deg);
transform: translateY(-7px) rotate(315deg);
}

.toggleBtnMenu {
position: absolute;
font-family: var(--font-oswald);
font-size: 1.2rem;
color: var(--themeColor);
margin: auto;
line-height: 1;
left: 0;
right: 0;
bottom: 8px;
}

#mask {
display: none;
transition: all .5s;
}
.open #mask {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / .8);
opacity: .8;
z-index: 150;
cursor: pointer;
}

}

@media print, screen and (max-width:1199px) {

#topHead {
position: fixed;
width: 100%;
height: 70px;
top: 0;
left: 0;
z-index: 100;
transition: .3s;
line-height: 1;
}

#topHead #logo {
position: absolute;
background: url("../img/logo.svg") no-repeat;
background-size: 120px;
width: 120px;
height: 53px;
transition: .3s;
top: 10px;
left: 10px;
}

#topHead #logo a span {
width: 120px;
height: 53px;
font-size: 0;
display: block;
text-indent: -10000px;
}

#topHead.fixed #logo {
background: url("../img/logo.svg") no-repeat;
background-size: 102px;
width: 102px;
height: 36px;
}

#topHead.fixed #logo a span {
width: 102px;
height: 36px;
}

#globalNav {
position: fixed;
background: #fff;
width: 93%;
text-align: left;
overflow-x: hidden;
overflow-y: auto;
display: block;
-webkit-overflow-scrolling: touch;
transition: all .6s;
opacity: 0;
z-index: 1000;
top: 0;
right: -100%;
bottom: 0;
}

.open #globalNav {
right: 0;
opacity: 1;
}

#globalNav #globalNavInner {
position: absolute;
width: 80%;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
line-height: 1.6;
}

#globalNav #globalNavInner ul {
width: 100%;
margin: 0;
padding: 0;
}

#globalNav #globalNavInner ul li {
position: relative;
font-family: var(--font-oswald);
font-size: 1.2rem;
margin-bottom: 20px;
}

#globalNav #globalNavInner ul li a span {
font-family: var(--font-primary);
font-size: 1.45rem;
color: var(--txtColor);
display: block;
}

#globalNav #globalNavInner ul li a {
color: var(--themeColor);
display: block;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e2e2e2;
}

#globalNav #globalNavInner ul li a:hover span {
color: var(--themeColor);
}

#globalNav #globalNavInner ul li ul li {
font-family: var(--font-primary);
margin-bottom: 0;
}

#globalNav #globalNavInner ul li ul li a {
font-size: 1.3rem;
color: var(--txtColor);
}

#globalNav #globalNavInner ul li ul li a:hover {
color: var(--themeColor);
}

#globalNav #globalNavInner img {
width: 400px;
margin-top: 20px;
}

.toggleBtn {
position: fixed;
background-color: #fff;
width: 50px;
height: 50px;
display: block;
top: 10px;
right: 10px;
transition: all .5s;
cursor: pointer;
border: 1px solid var(--themeColor);
z-index: 1000;
}
.toggleBtn span {
position: absolute;
background-color: var(--themeColor);
width: 18px;
height: 1px;
margin: auto;
display: block;
left: 0;
right: 0;
transition: all .5s;
}
.toggleBtn span:nth-child(1) {
top: 10px;
}
.toggleBtn span:nth-child(2) {
top: 16px;
}
.toggleBtn span:nth-child(3) {
top: 22px;
}
.open .toggleBtn span {
background-color: var(--themeColor);
}
.open .toggleBtn span:nth-child(1) {
-webkit-transform: translateY(10px) rotate(-315deg);
transform: translateY(5px) rotate(-315deg);
}
.open .toggleBtn span:nth-child(2) {
opacity: 0;
}
.open .toggleBtn span:nth-child(3) {
-webkit-transform: translateY(-10px) rotate(315deg);
transform: translateY(-7px) rotate(315deg);
}

.toggleBtnMenu {
position: absolute;
font-family: var(--font-oswald);
font-size: 1.2rem;
color: var(--themeColor);
margin: auto;
line-height: 1;
left: 0;
right: 0;
bottom: 8px;
}

#mask {
display: none;
transition: all .5s;
}
.open #mask {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / .8);
opacity: .8;
z-index: 150;
cursor: pointer;
}

}