header           { background-color:#fff; border-bottom:1px solid rgb(217, 221, 226); height:70px; position:fixed; top:0; transition:background-color 0.3s; width:100%; z-index:10002; display: none; }
header.index     { background-color:transparent; border-bottom:0; }
header.s-header:before    { background-color:transparent; border-bottom:1px solid #E5E5E5; content:''; display:block; height:70px; transition:background-color 0.3s; width:100%; }
header.s-header.on:before { background-color:#fff; }
header.s-header:after     { background-color:transparent; transition:background-color 0.3s; height:0; }
header.s-header.on:after  { background-color:rgba(0,0,0,0.7); content:''; display:block; height:100%; position:fixed; width:100%; z-index:1; }
header {
    left: 50%;
    transform: translate(-50%, 0);
    max-width: 720px;
}
header           div { left:80px; position:absolute; top:50%; transform:translateY(-50%); z-index:2; }
header           div.carzal-header { padding: 0% 2%; height: 100%; transform: unset !important; position: unset; display: flex; align-items: center; justify-content: space-between; background-color: #fce400;}
header           div h1              { width:144px; }
header           div h1:nth-child(1) { display:block; }
header           div h1:nth-child(2) { display:none; }
header.index     div h1:nth-child(1) { display:none; }
header.index     div h1:nth-child(2) { display:block; }
header.on        div h1:nth-child(1) { display:block; }
header.on        div h1:nth-child(2) { display:none; }
header           div h1              a { display:block; height:100%; width:100%; }
header           div h1              a img { display:block; height:100%; width:100%; }

header           form                { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: 130px; }
header           form   button       { width: 100px; height: 36px; border: 1px solid #666666; border-radius: 18px; background-color: transparent; font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.57; letter-spacing: normal; color: #666666; }
header.index     form   button       { color: #666666; }

header           p { position:absolute; top:50%; transform:translateY(-50%); right:40px; z-index:2; }
header           p button              { box-sizing:border-box; border:0; background:none; height:60px; margin:0; padding:0; padding:20px 30px; width:90px; }
header           p button:nth-child(1) { display:block; }
header           p button:nth-child(2) { display:none; }
header           p button:nth-child(3) { display:none; }
header.index     p button:nth-child(1) { display:none; }
header.index     p button:nth-child(2) { display:block; }
header.index     p button:nth-child(3) { display:none; }
header.on        p button:nth-child(1) { display:none; }
header.on        p button:nth-child(2) { display:none; }
header.on        p button:nth-child(3) { display:block; }

header           p button              img            { height:20px; width:30px; }
header           p button              img:last-child { height:18px; width:24px; }

header           nav { box-sizing:border-box; background-color:#fff; height:0; overflow:hidden; position:absolute; top:70px; transition:height 0.3s; text-align:center; width:100%; z-index:2; }
header.on        nav { height:420px; }
header           nav dl              { display:inline-block; vertical-align:top; width:256px; }
header           nav dl:nth-child(1) { display:none; }
header           nav dl              dt { display:inline-block; height:70px; line-height:80px; margin-bottom:16px; }
header           nav dl.active       dt { border-bottom:2px solid #00aeef; font-weight:500; }
header           nav dl              dt a { color:#00aeef; display:block; font-size:22px; font-weight:300; font-stretch:normal; font-style:normal; height:70px; line-height:80px; letter-spacing:normal; }
header           nav dl.active       dt a { font-weight:500; }
header           nav dl              dd a { box-sizing:border-box; color:#595959; display:block; font-size:16px; font-weight:300; font-stretch:normal; font-style:normal; height:38px; line-height:16px; letter-spacing:normal; padding:11px 0; text-align:center; cursor: pointer; }
header           nav dl              dd span { box-sizing:border-box; color:#595959; display:block; font-size:16px; font-weight:300; font-stretch:normal; font-style:normal; height:38px; line-height:16px; letter-spacing:normal; padding:11px 0; text-align:center; cursor:pointer; }

header           nav ul { display:none; }
/*header           .carzal-header h1{ height:unset; width:100px; height: 48px; }*/
header           .carzal-header h1 img { width: 49px; height: 49px; }

.menu-trigger {
    position: relative;
    width: 30px;
    height: 44px;
    position: relative;
    transform: translate(-50%, -50%);
    top: 30%;
    left: 0%;
    margin: 0;
}

.menu-trigger img {
    width: 100%;
    height: 100%;
}


@media (max-width:1024px) {

    header           { background-color:#fff; border-bottom:1px solid rgb(217, 221, 226); height:70px; position:fixed; top:0; transition:background-color 0.3s; width:100%; z-index:100000; }
    header.index     { background-color:transparent; border-bottom:0; }
    header.s-header:before    { background-color:transparent; content:''; display:block; height: 9.766vw; transition:background-color 0.3s; width:100%; }
    header.s-header.on:before { background-color:#fff; border-bottom:1px solid rgb(217, 221, 226); }
    header.s-header:after     { background-color:transparent; transition:background-color 0.3s; height:0; }
    header.s-header.on:after  { background-color:rgba(0,0,0,0.7); content:''; display:block; height:100%; position:fixed; width:100%; z-index:1; }

    header           form                { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: 12.695vw; }
    header           form   button       { width: 9.766vw; height: 3.516vw; border: 1px solid #666666; border-radius: 1.758vw; background-color: transparent; font-size: 1.367vw; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.57; letter-spacing: normal; color: #666666; }
    header.on        form   button       { color: #666666; }

    header           div { left:7.813vw; position:absolute; top:50%; transform:translateY(-50%); z-index:2; }
    /*header           div h1              { height:2.246vw; width:15.820vw; }*/
    header           div h1:nth-child(1) { display:block; }
    header           div h1:nth-child(2) { display:none; }
    header.index     div h1:nth-child(1) { display:none; }
    header.index     div h1:nth-child(2) { display:block; }
    header.on        div h1:nth-child(1) { display:block; }
    header.on        div h1:nth-child(2) { display:none; }
    header           div h1              a { display:block; height:100%; width:100%; }
    header           div h1              a img { display:block; height:100%; width:100%; }

    header           p { position:absolute; top:50%; transform:translateY(-50%); right:4.883vw; z-index:2; }
    header           p button              { box-sizing:border-box; border:0; background:none; height:5.859vw; margin:0; padding:0; padding:1.953vw 2.930vw; width:8.789vw; }
    header           p button:nth-child(1) { display:block; }
    header           p button:nth-child(2) { display:none; }
    header           p button:nth-child(3) { display:none; }
    header.index     p button:nth-child(1) { display:none; }
    header.index     p button:nth-child(2) { display:block; }
    header.index     p button:nth-child(3) { display:none; }
    header.on        p button:nth-child(1) { display:none; }
    header.on        p button:nth-child(2) { display:none; }
    header.on        p button:nth-child(3) { display:block; }

    header           p button              img            { height:1.953vw; width:2.930vw; }
    header           p button              img:last-child { height:2.441vw; width:2.441vw; }

    header           nav { box-sizing:border-box; background-color:#fff; height:0; top: 9.766vw; overflow:hidden; position:absolute; transition:height 0.3s; text-align:center; width:100%; z-index:2; }
    header.on        nav { height:41.016vw; }
    header           nav dl              { display:inline-block; vertical-align:top; width:24.500vw; }
    header           nav dl:nth-child(1) { display:none; }
    header           nav dl              dt { color:#00aeef; display:inline-block; font-size:2.148vw; font-weight:300; font-stretch:normal; font-style:normal; height:7.813vw; line-height:7.813vw; letter-spacing:normal; margin-bottom:1.563vw; }
    header           nav dl.active       dt { border-bottom:0.195vw solid #00aeef; font-weight:500; }
    header           nav dl              dt a { color:#00aeef; display:block; font-size:2.148vw; font-weight:300; font-stretch:normal; font-style:normal; height:7.813vw; line-height:7.813vw; letter-spacing:normal; }
    header           nav dl.active       dt a { font-weight:500; }
    header           nav dl              dd a { box-sizing:border-box; color:#595959; display:block; font-size:1.563vw; font-weight:300; font-stretch:normal; font-style:normal; height:3.711vw; line-height:1.563vw; letter-spacing:normal; padding:1.074vw 0; text-align:center; }

}

@media (max-width:768px) {

    header           { background-color:#fff; border-bottom:1px solid rgb(217, 221, 226); height:70px; position:fixed; top:0; transition:background-color 0.3s; width:100%; }
    header.index     { background-color:transparent; border-bottom:0; }
    header.s-header:before    { background-color:transparent; content:''; display:block; height:120px; transition:background-color 0.3s; width:100%; }
    header.s-header.on:before { background-color:#fff; border-bottom:1px solid rgb(217, 221, 226); }
    header.s-header:after     { background-color:transparent; transition:background-color 0.3s; height:0; }
    header.s-header.on:after  { background-color:rgba(0,0,0,0.7); content:''; display:block; height:100%; position:fixed; width:100%; z-index:1; }

    header           form                { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: 130px; }
    header           form   button       { width: 100px; height: 36px; border: 1px solid #666666; border-radius: 18px; background-color: transparent; font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.57; letter-spacing: normal; color: #666666; }
    header.on        form   button       { color: #666666; }

    header           div { left:55px; position:absolute; top:50%; transform:translateY(-50%); z-index:2; }
    header           div h1              { height:34px; width:225px; }
    header           div h1:nth-child(1) { display:block; }
    header           div h1:nth-child(2) { display:none; }
    header.index     div h1:nth-child(1) { display:none; }
    header.index     div h1:nth-child(2) { display:block; }
    header.on        div h1:nth-child(1) { display:block; }
    header.on        div h1:nth-child(2) { display:none; }
    header           div h1              a { display:block; height:100%; width:100%; }
    header           div h1              a img { display:block; height:100%; width:100%; }

    header           p { position:absolute; top:50%; transform:translateY(-50%); right:55px; z-index:2; }
    header           p button              { box-sizing:border-box; border:0; background:none; height:30px; margin:0; padding:0; width:45px; }
    header           p button:nth-child(1) { display:block; }
    header           p button:nth-child(2) { display:none; }
    header           p button:nth-child(3) { display:none; }
    header.index     p button:nth-child(1) { display:none; }
    header.index     p button:nth-child(2) { display:block; }
    header.index     p button:nth-child(3) { display:none; }
    header.on        p button:nth-child(1) { display:none; }
    header.on        p button:nth-child(2) { display:none; }
    header.on        p button:nth-child(3) { display:block; }

    header           p button:nth-child(1) img { height:30px; width:45px; }
    header           p button:nth-child(2) img { height:30px; width:45px; }
    header           p button:nth-child(3) img { height:38px; width:38px; }

    header           nav { box-sizing:border-box; background-color:#fff; height:0; overflow:hidden; position:absolute; top:120px; transition:height 0.3s; text-align:left; width:100%; z-index:2; }
    header.on        nav { height:800px; }
    header           nav dl              { display:block; height:0; left:0; overflow:visible; position:absolute; padding:0 55px; top:38px; width:100%; }
    header           nav dl:nth-child(1) { display:block; z-index:5; }
    header           nav dl:nth-child(2) { z-index:4; }
    header           nav dl:nth-child(3) { z-index:3; }
    header           nav dl:nth-child(4) { z-index:2; }
    header           nav dl:nth-child(5) { z-index:1; }
    header           nav dl              dt       { height:80px; line-height:80px; margin:0; width:170px; }
    header           nav dl.active       dt       { border:0; }
    header           nav dl.active       dt:after { border-right:3px solid #00AEEF; content:''; display:block; height:30px; position:absolute; right:0; top:50%; transform:translateY(-50%); }
    header           nav dl:nth-child(1) dt       { display:block; }
    header           nav dl:nth-child(1) dt:after { display:none; }
    header           nav dl:nth-child(2) dt       { transform:translateY(100%); }
    header           nav dl:nth-child(3) dt       { transform:translateY(200%); }
    header           nav dl:nth-child(4) dt       { transform:translateY(300%); }
    header           nav dl:nth-child(5) dt       { transform:translateY(400%); }
    header           nav dl              dt a { color:#909090; display:block; font-style:normal; font-weight:normal; font-size:30px; height:80px; line-height:80px; }
    header           nav dl.active       dt a { color:#00AEEF; font-weight:normal; }
    header           nav dl              dd                 { display:none; left:280px; position:absolute; top:0; }
    header           nav dl              dd:nth-of-type(1)  { top:calc(80px * (1 - 1)); }
    header           nav dl              dd:nth-of-type(2)  { top:calc(80px * (2 - 1)); }
    header           nav dl              dd:nth-of-type(3)  { top:calc(80px * (3 - 1)); }
    header           nav dl              dd:nth-of-type(4)  { top:calc(80px * (4 - 1)); }
    header           nav dl              dd:nth-of-type(5)  { top:calc(80px * (5 - 1)); }
    header           nav dl              dd:nth-of-type(6)  { top:calc(80px * (6 - 1)); }
    header           nav dl              dd:nth-of-type(7)  { top:calc(80px * (7 - 1)); }
    header           nav dl              dd:nth-of-type(8)  { top:calc(80px * (8 - 1)); }
    header           nav dl              dd:nth-of-type(9)  { top:calc(80px * (9 - 1)); }
    header           nav dl              dd:nth-of-type(10) { top:calc(80px * (10 - 1)); }
    header           nav dl.active       dd                 { display:block; }
    header           nav dl              dd                 a { color:#222; font-style:normal; font-weight:normal; font-size:30px; height:80px; line-height:80px; padding:0; }

    header           nav ul { bottom:42px; display:block; left:57px; overflow:hidden; position:absolute; width:138px; }
    header           nav ul li { float:left; height:63px; margin:3px; width:63px; }
    header           nav ul li a { display:block; height:100%; vertical-align:middle; width:100%; }
    header           nav ul li a img { height:100%; width:100%; }
}

@media (max-width:767px) {


    header.index     { background-color:transparent; border-bottom:0; }
    header.s-header:before    { background-color:transparent; content:''; display:block; height:15.625vw; transition:background-color 0.3s; width:100%; }
    header.s-header.on:before { background-color:#fff; border-bottom:1px solid rgb(217, 221, 226); }
    header.s-header:after     { background-color:transparent; transition:background-color 0.3s; height:0; }
    header.s-header.on:after  { background-color:rgba(0,0,0,0.7); content:''; display:block; height:100%; position:fixed; width:100%; z-index:1; }

    header           form                { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: 16.949vw; }
    header           form   button       { width: 13.038vw; height: 4.694vw; border: 0px; border-radius: 2.347vw; background-color: transparent; font-size: 2.9987vw; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.57; letter-spacing: normal; color: #666666; }
    header.on        form   button       { color: #666666; }

    header           div { left:7.161vw; position:absolute; top:50%; transform:translateY(-50%); z-index:2; }
    header           div h1              { height:4.427vw; width:29.297vw; }
    header           div h1:nth-child(1) { display:block; }
    header           div h1:nth-child(2) { display:none; }
    header.index     div h1:nth-child(1) { display:none; }
    header.index     div h1:nth-child(2) { display:block; }
    header.on        div h1:nth-child(1) { display:block; }
    header.on        div h1:nth-child(2) { display:none; }
    header           div h1              a { display:block; height:100%; width:100%; }
    header           div h1              a img { display:block; height:100%; width:100%; }

    header           p { position:absolute; top:50%; transform:translateY(-50%); right:7.161vw; z-index:2; }
    header           p button              { box-sizing:border-box; border:0; background:none; height:3.906vw; margin:0; padding:0; width:5.859vw; }
    header           p button:nth-child(1) { display:block; }
    header           p button:nth-child(2) { display:none; }
    header           p button:nth-child(3) { display:none; }
    header.index     p button:nth-child(1) { display:none; }
    header.index     p button:nth-child(2) { display:block; }
    header.index     p button:nth-child(3) { display:none; }
    header.on        p button:nth-child(1) { display:none; }
    header.on        p button:nth-child(2) { display:none; }
    header.on        p button:nth-child(3) { display:block; }

    header           p button:nth-child(1) img { height:3.906vw; width:5.859vw; }
    header           p button:nth-child(2) img { height:3.906vw; width:5.859vw; }
    header           p button:nth-child(3) img { height:4.948vw; width:4.948vw; }

    header           nav { box-sizing:border-box; background-color:#fff; height:0; overflow:hidden; position:absolute; top:15.625vw; transition:height 0.3s; text-align:left; width:100%; }
    header.on        nav { height:104.167vw; }
    header           nav dl              { display:block; height:0; left:0; overflow:visible; position:absolute; padding:0 7.161vw; top:4.948vw; width:100%; }
    header           nav dl:nth-child(1) { display:block; z-index:5; }
    header           nav dl:nth-child(2) { z-index:4; }
    header           nav dl:nth-child(3) { z-index:3; }
    header           nav dl:nth-child(4) { z-index:2; }
    header           nav dl:nth-child(5) { z-index:1; }
    header           nav dl              dt       { height:10.417vw; line-height:10.417vw; margin:0; width:22.135vw; }
    header           nav dl.active       dt       { border:0; }
    header           nav dl.active       dt:after { border-right:0.391vw solid #00AEEF; content:''; display:block; height:3.906vw; position:absolute; right:0; top:50%; transform:translateY(-50%); }
    header           nav dl:nth-child(1) dt       { display:block; }
    header           nav dl:nth-child(1) dt:after { display:none; }
    header           nav dl:nth-child(2) dt       { transform:translateY(100%); }
    header           nav dl:nth-child(3) dt       { transform:translateY(200%); }
    header           nav dl:nth-child(4) dt       { transform:translateY(300%); }
    header           nav dl:nth-child(5) dt       { transform:translateY(400%); }
    header           nav dl              dt a { color:#909090; display:block; font-style:normal; font-weight:normal; font-size:3.906vw; height:10.417vw; line-height:10.417vw; }
    header           nav dl.active       dt a { color:#00AEEF; font-weight:normal; }
    header           nav dl              dd                 { display:none; left:36.458vw; position:absolute; top:0; }
    header           nav dl              dd:nth-of-type(1)  { top:calc(10.417vw * (1 - 1)); }
    header           nav dl              dd:nth-of-type(2)  { top:calc(10.417vw * (2 - 1)); }
    header           nav dl              dd:nth-of-type(3)  { top:calc(10.417vw * (3 - 1)); }
    header           nav dl              dd:nth-of-type(4)  { top:calc(10.417vw * (4 - 1)); }
    header           nav dl              dd:nth-of-type(5)  { top:calc(10.417vw * (5 - 1)); }
    header           nav dl              dd:nth-of-type(6)  { top:calc(10.417vw * (6 - 1)); }
    header           nav dl              dd:nth-of-type(7)  { top:calc(10.417vw * (7 - 1)); }
    header           nav dl              dd:nth-of-type(8)  { top:calc(10.417vw * (8 - 1)); }
    header           nav dl              dd:nth-of-type(9)  { top:calc(10.417vw * (9 - 1)); }
    header           nav dl              dd:nth-of-type(10) { top:calc(10.417vw * (10 - 1)); }
    header           nav dl.active       dd                 { display:block; }
    header           nav dl              dd                 a { color:#222; font-style:normal; font-weight:normal; font-size:3.906vw; height:10.417vw; line-height:10.417vw; padding:0; }

    header           nav ul { bottom:5.469vw; display:block; left:7.422vw; overflow:hidden; position:absolute; width:17.969vw; }
    header           nav ul li { float:left; height:8.203vw; margin:0.391vw; width:8.203vw; }
    header           nav ul li a { display:block; height:100%; vertical-align:middle; width:100%; }
    header           nav ul li a img { height:100%; width:100%; }

}

@media(max-width: 610px) {
    header           form   button       { font-size: 2.8333vw; }
}

@media (max-width:550px) {
    .menu-trigger {
        height: 30px;
    }
}

@media(max-width:500px) {
    header           form   button       { font-size: 3.0vw; }
    header           form   button       { width: 70px; height: 25px; border-radius: 18px; }
}

@media (max-width:499px) {
    header           form   button       { font-size: 4.0vw; }
    header           form   button       { width: 18.424vw; height: 6.427vw; border-radius: 4.627vw; }
}
@media(max-width:500px) {
    header           div.carzal-header h1{ height:unset; width:35vw; }
}

@media(max-width:390px) {
    header           form   button       { font-size: 3.9vw; }
    header           form   button       { width: 70px; height: 25px; border-radius: 18px; }
}

@media (max-width:389px) {
    header           form   button       { width: 20vw; height: 6.427vw; border-radius: 4.627vw; }
}

@media (max-width:375px) {
    .menu-trigger {
        height: 30px;
    }
}