.swiper-button-next, .swiper-button-prev { margin-top: calc(-17px - (var(--swiper-navigation-size)/ 2)); }

.array li {cursor:pointer;}

/*default*/
.container {width:100%; height:auto; margin:0 auto; padding:0 24px;}

main {display:inline; width:100%; height:auto;}

main ul {width:100%; display:flex; flex-wrap:wrap; column-gap:8px; row-gap:17px; flex-direction:row; margin:34px 0; padding:220px 0 40px;}

/* main ul li a {display:block; width:177px; height:177px; filter:grayscale(100%);} */
main ul li a {display:block; width:177px; height:177px;}

main ul li a span {opacity:0; font-size:11px; display:flex; width:100%; font-style: initial; font-family:'Lato', sans-serif; color:rgba(0,0,0,0.6);}

main ul li a.hover, .color {filter:grayscale(0);}

main ul li a span.hover {opacity:1;  justify-content: left;
    align-items: center;}

main.process p, main.type p {font-family:'Lato', sans-serif; font-style: initial; font-size:12px; color:rgba(0,0,0,0.6);}

main p {position:absolute; cursor:pointer;}

.red {color:#f00 !important;}

.black {color:#000 !important;}

.normal {font-style:normal; display:none;}

i {
    font-style: initial !important;
}

/*category*/

/*process*/
main.process ul {justify-content:normal; margin-left:174px; padding:0; width:calc(100% - 174px);}

main.process ul li a {width:182px; height:182px;}

main.process .titlebox {position:relative; width:100%;}

main.process .titlebox p {left:0; top:0; padding-top:4px;}

main.process .titlebox p:after {content:''; display:none; width:2px; height:2px; border-radius:50%; background:#111; position:absolute; top:0; left:50%; transform:translateX(-50%);}

main.process .titlebox p.top:after {display:block;}


/*type*/
main.type {display:flex; flex-direction:column; padding-top:36px; row-gap:0; margin-bottom:36px;}

main.type ul {flex-wrap:nowrap; row-gap:0; column-gap:0; justify-content:normal; padding:0 0 16px; margin:22px 0;}

main.type ul.orig {margin:0 0 22px;}

main.type .wrapbox {position:relative;}

main.type p {left:0; top:0; padding-top:4px;}

main.type p:after {content:''; display:none; width:2px; height:2px; border-radius:50%; background:#111; position:absolute; top:0; left:50%; transform:translateX(-50%);}

main.type p.wi:after {display:block;}

.swiper {margin-left:115px; position:static; -webkit-overflow-scrolling: touch;}

main.type ul li a {width:182px; height:182px;}

.swiper-slide {width:182px !important;}


.swiper-button-prev {left:90px; color:rgba(34,34,34,0.8); opacity:0;}

.swiper-button-next {right:-25px; color:rgba(34,34,34,0.8); opacity:0;}

.swiper-button-next:after, .swiper-button-prev:after {font-size:100%;}

.swiper-button-disabled {opacity:0 !important;}

.swiper-button-next.show, .swiper-button-prev.show, .swiper-button-disabled.show {opacity:1 !important;}

main.type .wrapbox {position:relative;}

.swiper-wrapper li {
    margin-right:8px;
}


/*ab*/
main.ab {display:grid; padding-top:10px; margin-bottom:0; grid-template-columns:1fr 1fr;}

main.ab ul {padding:0 30% 0; height:calc(100vh - 114px); align-content:flex-start; justify-content:center; overflow-y:scroll; margin:60px 0 0; position:relative; row-gap:17px;}

main.ab ul::-webkit-scrollbar {width:3px;}

main.ab ul::-webkit-scrollbar-thumb {height:17%; background-color:transparent;}

main.ab ul::-webkit-scrollbar-track {background-color:transparent;}

.orig.active::-webkit-scrollbar-thumb, .clone1.active::-webkit-scrollbar-thumb {background-color:transparent;}

main.ab .titleab {position:relative;}

main.ab .titleab p {top:0; left:50%; transform:translateX(-50%); padding:4px 24px 12px;}

main.ab .titleab p:after {content:''; display:none; width:2px; height:2px; border-radius:50%; background:#111; position:absolute; top:0; left:50%; transform:translateX(-50%);}

main.ab .titleab p.up:after {display:block;}



@media all and (max-width:1593px) {
    main.ab ul {padding:0 10% 0;}

    /* .swiper-slide {width:180px !important;} */
}



@media all and (max-width:1168px) {
    main.ab ul {padding:0 7% 0;}
}


@media all and (max-width:1160px) {
    .swiper-button-prev, .swiper-button-next {display:none !important;}

    
}


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

    .container {padding:0 12px;}

    main ul {padding:0; justify-content:center; row-gap:36px;}

    main ul li a {width:94vw; height:94vw;}

    .normal {display:block;}

    main.ab ul li a {width:45vw; height:45vw;}

    main.ab ul {padding:40px 0 0; height:auto; overflow-y:visible; margin:0;}

    main.ab span {width:100%; text-align:center;}
    
    main.ab span:last-child {display:none;}

    main.ab i {display:none;}

    main.process .titlebox {width:30%;}
    
    main.process ul{flex-direction:column; margin:40px 0 0; width:100%; margin-left:0; height:calc(100vh - 162px); overflow-y:scroll; flex-wrap:nowrap; row-gap:17px;}

    main.process .titlebox p {left:50%;}

    /* main.process .titlebox:last-child {display:none;} */

    main.process ul li, main.process ul li a {width:28vw; height:28vw;}

    main.process {display:flex; column-gap:6px; justify-content: center;}

    main.process p {width:100%; text-align:center; left:50%; transform:translateX(-50%);}

    main.process span {width:100%; text-align:center;}
    
    main.process span:last-child {display:none;}

    main.process i {display:none;}

    main.process ul::-webkit-scrollbar {width:3px;}

    main.process ul::-webkit-scrollbar-thumb {height:17%; background-color:transparent;}

    main.process ul::-webkit-scrollbar-track {background-color:transparent;}


    .swiper {margin-left:100px;}

    .swiper-slide {width:160px !important;}

    main.type ul li a {width:160px !important; height:160px !important;}

    main.type {row-gap:0; padding-top:0;}

    main ul li a span {opacity:0; font-size:12px; display:flex; width:100%; font-style: initial; font-family:'Lato', sans-serif; color:rgba(0,0,0,0.6); margin-top: 1px;}

    .truncated-text {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        width: 320px !important;
    }

}

@media all and (max-width:391px) {
    main ul li a {width:93vw; height:93vw;}
}