/*header*/
header {display:flex; padding:24px 0; position:relative; background:#fff; width: 784px; font-weight: 500;}

.ulwrap, .hide {display:flex;}

.hide {align-items:center;}

header h1 a {font-family:'Lato', sans-serif; color:rgba(0,0,0,0.5); font-weight:900; font-style:italic; font-size:12px;}

header h1 {margin-right:35px;}

header li {margin-right:17px;}

header li:last-child {margin-right:0;}

header li a {font-size:12px; font-family:'Lato', sans-serif; color:rgba(0,0,0,0.5);}

header li a.on {color:#000;}

header ul {display:flex; margin-right:35px;}

header ul.pc {margin-right:22px;}

header .search {margin-right:32px; margin-left: 20px;}


/*footer*/
footer {width:100%; max-width:1920px; margin:0 auto; height:auto; text-align:center; padding:20px; font-size:13px;}



/*array*/
.array {
    /* display:flex; */
    flex-wrap:wrap; gap:6px; justify-content:flex-end; align-items:center;
    cursor:pointer;
    font-family:'Crimson Text', serif;
}

.array li {font-size:12px; text-align:center; line-height:20px; width:28px; height:18px; position:relative; opacity:0.4; margin-right:0;}

.array li:first-child {background:linear-gradient(90deg, #f7f7f7 0%, #A0A0A0 100%);}

.array li:nth-child(2) {background:url('../images/array2.svg') 50% 50% no-repeat; background-size:cover; line-height:20px;}

.array li:nth-child(3):after {content:''; display:block; position:absolute; width:26px; height:26px; border-radius:50%; top:-18%; left:4.5%; background:url('../images/array3.svg') 50% 50% no-repeat; background-size:cover;}

.array li:last-child {width:36px; display:flex; align-items:center;}

.array li:last-child span {width:8px; height:8px; border:1px solid #111;}

.array li:last-child span:nth-child(3) {border:1px solid rgba(17,17,17,0.6);}

.array li:last-child span:nth-child(2) {border:1px solid rgba(17,17,17,0.4);}

.array li:last-child span:first-child {border:1px solid rgba(17,17,17,0.2);}

.array li.on:before {position:absolute; content:''; width:2px; height:2px; background:#000; top:-10px; left:50%; transform:translateX(-50%); border-radius:50%;}

.array li:last-child.on:before {left:43%;}


/*active*/
.array li:last-child.active span {border:1px solid rgba(17,17,17,0.2);}

.array li:last-child.active span:nth-child(3) {border:1px solid rgba(17,17,17,0.4);}

.array li:last-child.active span:nth-child(2) {border:1px solid rgba(17,17,17,0.6);}

.array li:last-child.active span:first-child {border:1px solid #111;}




/* searchbar */
.search {width:16px; height:16px; background:url('../images/search.svg') 50% 50% no-repeat; background-size:cover; margin-right:24px; cursor:pointer; opacity:0.5;}

.searchwrap {position:absolute; top:52px; left:0; display:none; background:#fff;}

.searchbar {width:552px; height:22px; display:flex; border:1px solid #000;}

#searchbar {width:526px; height:22px; padding:0 4px;}

#searchbar::placeholder {font-style:italic;}

.searchbar button {width:16px; height:16px; border-radius:50%; background:#000; position:absolute; top:50%; right:6px; transform:translateY(-50%);}

.searchclose {position:absolute; top:-2px; right:-26px; cursor:pointer; width:25px; height:25px;}

.searchclose span {position:absolute; display:block; width:18px; height:0.8px; background:rgba(0,0,0,0.7); transform:rotate(45deg); top:50%;}

.searchclose span:last-child {transform:rotate(-45deg);}

#searchbar::-webkit-search-decoration,
#searchbar::-webkit-search-cancel-button,
#searchbar::-webkit-search-results-button,
#searchbar::-webkit-search-results-decoration{display:none;}

#searchbar {outline:none;}




.on {opacity:1 !important;}

.m {display:none;}




.titlewrap {
    margin-bottom:0;
}



header ul.pc, .search, .array {
    display:none;
}

header ul.pc.showing, .array.showing {
    display:flex;
}

.search.showing, .searchwrap.showing {
    display:block;
}



@media all and (max-width:939px) {

    .hide {align-items:flex-start;}

    .m {display:block; margin-left:8px; margin-top:12px;}

    .pc {display:none;}

    header, .ulwrap > ul {flex-direction:column;}

    header {width:100%; padding:34px 0 0;}

    header ul {margin-right:0; margin-top:26px;}

    header li {margin-bottom:8px;}

    header li a {font-size:12px;}

    header h1 a {font-size:12px; font-weight:900;}

    header .search {margin-right:32px; margin-left: 12px;}

    .titlewrap {display:flex; width:100%; justify-content:space-between; padding-bottom:18px; border-bottom:1px dotted rgba(0,0,0,0.5); margin-bottom:10px;}

    .titlewrap.down {
        margin-bottom:34px;
    }

    .switch {
        width:20px; height:20px; /* border-radius:50%; background:rgba(0,0,0,0.7); */
        position:relative;}

    .switch:after {content:''; display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,0.7);}

    .switch span {width:25px; height:1px; background:rgba(0,0,0,0.7); position:absolute; display:none;}

    .switch span:first-child {transform:rotate(45deg); top:36%; right:-2px;}

    .switch span:last-child {transform:rotate(-45deg); top:36%; right:-2px;}

    .switch.active {width:25px; height:25px; background:transparent;}

    .switch.active:after {
        background:transparent;
    }

    .switch.active span {display:block;}

    .hide {visibility: hidden; opacity:0; height:0; transition:all 0.3s ease;}

    .hide.on {visibility: visible; opacity:1; height:240px;}

    .array {position:absolute; top:140px; right:-3px; width:194px;}

    .array li {font-size:16px; line-height:26px; width:40px; height:26px;}

    .array li:nth-child(2) {background:url('../images/array2_m.svg') 50% 50% no-repeat; background-size:cover; line-height:25px;}

    .array li:nth-child(3):after {width:32px; height:32px; border-radius:50%; top:-12%; left:10%; background:url('../images/array3_m.svg') 50% 50% no-repeat; background-size:cover;}

    .array li:last-child {width:20px; display:flex; flex-direction:column; align-items:center; height:40px; gap:1px;}

    .array li:last-child span {display:block; margin-top:0; width:9px; height:9px;}

    .array li:last-child.on:before {left:50%;}



    .hide {width:100%;}

    .searchwrap {width:100%; top:84px;}

    #searchbar {width:95%; height:36px; font-size:20px;}

    #searchbar::placeholder {font-size:20px;}

    .searchbar {width:calc(100% - 25px); height:36px;}

    .searchbar form {width:100%;}

    .searchbar button {right:31px; width:26px; height:26px;}

    .searchclose {right:-0.4%; top:25%; width:25px; height:25px;}

    .search {position:absolute; top:90px; left:96%; z-index:1500; width:20px; height:20px;}

    .searchclose span {top:9px; width:25px;}

}


@media all and (max-width:599px) {
    header .search {margin-right:32px; margin-left: 0px;}

    .array {width:158px; gap:6px;}

    .array li {font-size:14px; line-height:24px; width:40px; height:24px;}

    .array li:nth-child(2) {background:url('../images/array2_m2.svg') 50% 50% no-repeat; background-size:cover;}

    .array li:nth-child(3):after {width:34px; height:34px; top:-22%; left:8%; background:url('../images/array3_m2.svg') 50% 50% no-repeat; background-size:cover;}

    .array li:last-child {width:20px; display:flex; flex-direction:column; align-items:center; height:40px;}

    .array li:last-child span {display:block; margin-top:0;}

    #searchbar {width:92%;}

    /* .searchbar {width:92%;} */

    /* .searchbar button {right:10%;} */

}

@media all and (max-width:420px) {
    .search {left:94%;}
}

@media all and (max-width:320px) {

    header li a {font-size:12px;}

    header h1 a {font-size:12px;}

}