body > header{font-size:1.4rem;width:100%;}
body > header form{display:flex;background:#fff;border-radius:19px;padding:0;align-items:center;color:#000;}
body > header form input{line-height:38px;margin-left:20px;width:calc(100% - 60px);}
body > header form button{width:35px;height:35px;color:#970000;}
@media screen and (max-width:1024px){
body{padding-top:50px;}
body > header{position:fixed;top:0;z-index:1000;}
body > header .add_pr{display:none;}
.l-header{height:50px;width:100%;background:#970000;color:#fff;}
.l-header .l-main{height:50px;padding-top:0;}
.l-header .l-side{justify-content:right;}
.l-header .c-form{display:none;position:absolute;background:#FFACAC;top:50px;left:0;width:100%;padding:8px;z-index:10;}
.l-header .c-form:before{content:"";border:7.5px solid transparent;border-bottom:9px solid #FFACAC;position:absolute;top:-16px;left:calc(100% - 90px);}
.c-btn__search{font-size:25px;width:26px;margin:0 15px;}
.c-btn__hamburger{width:26px;display:flex;align-items:center;margin:0 15px;}
.c-btn__hamburger span{border:1px solid #fff;height:0;width:26px;position:relative;left:0;transition:transform 0.2s ease-in-out;}
.c-btn__hamburger span:before{content:"";border:1px solid #fff;height:0;width:26px;position:absolute;top:-10px;left:-1px;transition:0.2s ease-in-out;}
.c-btn__hamburger span:after{content:"";border:1px solid #fff;height:0;width:26px;position:absolute;bottom:-10px;left:-1px;transition:0.2s ease-in-out;}
.c-btn__hamburger.is-active span{border:none;}
.c-btn__hamburger.is-active span:before{transition:0.2s ease-in-out;transform:rotate(45deg);top:-1px;}
.c-btn__hamburger.is-active span:after{transition:0.2s ease-in-out;transform:rotate(-45deg);bottom:-1px;}
.c-nav{background:#fff;width:100%;position:absolute;height:auto;max-height:0px;overflow:hidden;transition:max-height 0.2s ease-in;}
.c-nav:before{content:"";border:7.5px solid transparent;border-bottom:9px solid #fff;position:absolute;top:-16px;right:20px;}
.c-nav.is-open{max-height:calc(100vh - 50px);transition:max-height 0.2s ease-in-out;overflow:scroll;}
.c-nav.is-open > ul{border-top:2px solid #fff;}
.c-nav a{border-bottom-color:#aaa;}
.p-megamenu{height:auto;overflow:hidden;max-height:0;transition:max-height 0.3s ease-out;}
.p-megamenu .l-container{display:block;}
.p-megamenu .p-megamenu__heading{display:inline-block;font-size:1.3rem;line-height:1;font-weight:700;padding:6px 15px 6px 15px;margin:0 0 0 0;background-color:#9E0000;color:#fff;}
.p-megamenu .p-megamenu__heading > span{height:auto;}
.p-megamenu .orange-button{position:relative;display:block;width:100%;background-color:#FFB800;text-align:left;transition:all 0.3s;}
.p-megamenu .orange-button::after{top:50%;transform:translateY(-50%);color:#933C38;}
.p-megamenu .orange-button span{position:relative;color:#933C38;font-weight:700;}
}
@media screen and (min-width:1025px){
.l-header {
height: 90px;
width: 100%;
background: #970000;
}
.l-header .l-side {
justify-content: right;
}
.c-form form {
width: 300px;
}
.c-form form input {
width: 240px;
}
.c-form .c-btn__search {
color: #970000;
font-size: 2rem;
}
body > header .l-main {
width: 570px;
max-width: 570px;
}
body > header .add_pr {
width: 210px;
padding-right: 15px;
display: flex;
align-items: center;
}
body > header .add_pr a {
position: relative;
display: block;
width: 195px;
height: 38px;
line-height: 38px;
padding: 0 23px 0 9px;
color: #970000;
font-size: 1.4rem;
font-weight: 700;
background-color: #FFDF02;
border-radius: 5px;
border: 1px solid #FFDF02;
transition: all 0.3s;
}
body > header .add_pr a > span {
position: absolute;
width: 13px;
width: 13px;
top: 50%;
transform: translateY(-50%);
right: 8px;
}
body > header .add_pr a > span svg {
width: 100%;
height: 100%;
fill: #970000;
transition: all 0.3s;
}
body > header .add_pr a:hover {
background-color: #970000;
color: #FFDF02;
}
body > header .add_pr a:hover span svg {
fill: #FFDF02;
}
body > header .l-side {
width: 330px;
}
body > header .c-nav {
background: #fff;
border-bottom: 2px solid #970000;
}
body > header .c-nav > ul {
margin: 0 auto;
width: 100%;
max-width: 1110px;
display: flex;
font-size: 1.5rem;
}
body > header .c-nav_li {
display: block;
text-align: center;
padding: 5px 0;
margin: 0;
}
body > header .c-nav_li:nth-of-type(1) {
flex: 100;
}
body > header .c-nav_li:nth-of-type(1) > span {
border-left: 1px solid #aaa;
}
body > header .c-nav_li:nth-of-type(2) {
flex: 80;
}
body > header .c-nav_li:nth-of-type(3) {
flex: 76;
}
body > header .c-nav_li:nth-of-type(4) {
flex: 58;
}
body > header .c-nav_li:nth-of-type(5) {
flex: 100;
border-right: none;
}
body > header .c-nav_li:nth-of-type(6) {
flex: 78;
border-right: none;
}
body > header .c-nav_li > span {
display: block;
cursor: pointer;
border-right: 1px solid #aaa;
line-height: 30px;
position: relative;
}
body > header .c-nav_li > span:before {
content: "";
font-family: "fa" !important;
line-height: 1;
margin-right: 8px;
}
body > header .c-nav_li .l-container {
max-width: 950px;
}
body > header .c-nav_li.open, body > header .c-nav_li:hover {
background: linear-gradient(to top, #EEACAC, #fff);
}
body > header .c-nav_li.open > span:after, body > header .c-nav_li:hover > span:after {
content: "";
border: 5.5px solid transparent;
border-bottom: 5px solid #A8453C;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
}
body > header .c-nav_li.open .p-megamenu, body > header .c-nav_li:hover .p-megamenu {
display: inherit;
max-height: 1500px;
transition: max-height 0.2s ease-out;
}
body > header .c-nav_li .c-navlink li a {
position: relative;
display: block;
width: 230px;
height: 100%;
font-weight: 700;
padding: 12px 22px 12px 11px;
border: 1px solid #EA7777;
border-radius: 5px;
line-height: 1.2;
transition: all 0.3s;
}
body > header .c-nav_li .c-navlink li a:hover {
border: 1px solid #fff;
color: #9A4945;
background-color: #fff;
}
body > header .c-nav_li .c-navlink li a:before {
position: absolute;
font-family: "fa" !important;
content: "";
margin-right: 10px;
width: 20px;
top: 50%;
right: -10px;
margin-left: unset;
transform: translateY(-50%);
}
body > header .c-nav_li .orange-button {
display: block;
width: 99.5%;
height: auto;
padding: 15px 0;
margin-bottom: 30px;
min-height: 50px;
background-color: #FFB800;
border-radius: 5px;
text-align: center;
transition: all 0.3s;
}
body > header .c-nav_li .orange-button span {
position: relative;
display: inline-block;
color: #933C38;
font-weight: 700;
padding-right: 30px;
}
body > header .c-nav_li .orange-button span:after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-family: "fa" !important;
content: "";
color: #933C38;
}
body > header .c-nav_li .orange-button:hover {
background-color: #791122;
}
body > header .c-nav_li .orange-button:hover span {
color: #F5DCDC;
}
body > header .c-nav_li .orange-button:hover span:after {
color: #F5DCDC;
}
.p-megamenu {
height: auto;
max-height: 0px;
overflow: hidden;
transition: max-height 0.2s ease-out;
position: absolute;
z-index: 1000;
width: 100%;
top: 130px;
left: 0;
background: linear-gradient(to right, #FF6230, #801919);
}
.p-megamenu .l-container {
display: block;
text-align: left;
padding: 40px 0 15px;
}
.p-megamenu .l-container ul {
gap: 0 8px;
}
.p-megamenu .l-container ul li {
position: relative;
padding: 0 0;
font-size: 1.4rem;
}
.p-megamenu .l-4col > li {
width: auto;
margin-bottom: 8px;
}
.p-megamenu .p-megamenu__heading {
display: block;
font-size: 1.8rem;
font-weight: 700;
padding: 0 0 15px 0;
margin: 0 0 0 0;
color: #fff;
}
.p-megamenu ul {
margin: 0 0 0;
padding: 0 0 17px;
display: flex;
flex-wrap: wrap;
}
.p-megamenu li {
margin-bottom: 15px;
}
.p-megamenu li a {
line-height: 3rem;
}
}