/* 공통 css start */
.page{
    padding-top: 72px;
}

.sliderEffect{
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sliderEffect::after{
    content: '';
    display: block;
    width: 40px;
    height: auto;
}

.sliderEffect::-webkit-scrollbar {
    display: none;
    box-shadow: none;
    background-color: none;
    border: none;
}

.scrollBox{
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
}

.scrollBox::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: none;
}

.scrollBox::-webkit-scrollbar-thumb {
    outline: none;
    border-radius: 10px;
    border: 4px solid transparent;
    box-shadow: inset 6px 6px 0 rgba(204, 204, 204, 0.8);
}

.scrollBox::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: none;
}

#contactForm ul li{
    margin-bottom: 32px;
}

#contactForm ul li span{
    display: block;
    margin-bottom: 12px;
    font-size: 1.4em;
    font-weight: 500;
}

#contactForm ul li div input[type="text"],
#contactForm ul li div textarea{
    width: 100%;
    outline: none;
    border:none;
    border: 1px rgba(0,0,0,0.1) solid;
    font-size: 1.6em;
    font-weight: 400;
    padding:0px 14px;
    border-radius: 3px;
    height: 48px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
}

#contactForm ul li div input[type="text"].warning,
#contactForm ul li div textarea.warning{
    border:1px #FA5252 solid;
}

#contactForm ul li div textarea{
    padding:12px 14px;
    resize: none;
    height: 120px;
    line-height: 1.4;
}

#contactForm ul li div input[type="text"]::placeholder,
#contactForm ul li div textarea::placeholder{
    color: rgba(0,0,0,0.4);
}

#contactForm ul li div .fileUploadBtn{
    width: 100%;
    height: 48px;
    background: #F3F3F4;
    font-size: 1.6em;
    font-weight: 600;
}

#contactForm ul li div p{
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.4em;
    padding-left: 18px;
    line-height: 1.5;
    word-break: keep-all;
    margin-top: 12px;
}

#contactForm ul li div p.warningText{
    display: none;
    color: #FA5252;
}

#contactForm ul li div p img{
    position: absolute;
    left: 0px;
    top: 3px;
}

#contactForm ul li div input[type="file"]{
    width: 0px;
    height: 0px;
    overflow: hidden;
    display: none;
}

#contactForm ul li div .fileBox .item{
    border:1px rgba(0,0,0,0.1) solid;
    border-radius: 3px;
    padding:12px 36px;
    margin-top: 12px;
    font-size: 1.6em;
}

#contactForm ul li div .fileBox .item > img{
    position: absolute;
    left: 14px;
    top:50%;
    transform: translateY(-50%);
}

#contactForm ul li div .fileBox .item a{
    width: 14px;
    height: 14px;
    position: absolute;
    right: 14px;
    top:50%;
    transform: translateY(-50%);
}

#contactForm ul li div label em{
    vertical-align: bottom;
    font-size: 1.6em;
}

.pagination{
    margin-bottom: 96px;
}

.pagination .menu{
    margin:0px 8px;
    width: 32px;
    height: 32px;
    font-size: 1.6em;
    font-weight: 500;
    font-family: 'HostGrotesk', sans-serif !important;
}

.pagination .menu.active{
    text-decoration: underline;
}

.pagination .btn{
    width: 16px;
    height: 16px;
    margin:0px 8px;
}

.pagination .btn.active{
    opacity: 0.1;
    pointer-events: none;
}

@media screen and (max-width:1080px){
    .page{
        padding-top: 56px;
    }

    .sliderEffect::after{
        width: 12px;   
    }

    .pagination{
        margin-bottom: 48px;
    }
}
/* 공통 css end */

/* modal css start */
.modal{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
}

.modal .closeBg{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.modal .contactInner{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50%;
    height: 100%;
    padding-left: 72px;
}

.modal .contactInner .contentBox{
    width: 100%;
    height: 100%;
    background: #fff;
}

.modal .contactInner .contentBox .modalHeader{
    height: 56px;
    border-bottom: 1px #000 solid;
    padding:0px 16px;
    background: #fff;
}

.modal .contactInner .contentBox .modalHeader h3{
    font-size: 1.6em;
    font-weight: bold;
}

.modal .contactInner .contentBox .modalHeader a{
    width: 20px;
    height: 20px;
}

.modal .contactInner .contentBox .modalBody{
    height: calc(100% - 129px);
    padding-bottom: 16px;
    overflow-y: auto;
}

.modal .contactInner .contentBox .modalBody .itemBox{
    padding:20px 16px 20px 128px;
    border-bottom: 1px rgba(0,0,0,0.1) solid;
}

.modal .contactInner .contentBox .modalBody .itemBox .imgBox{
    width: 96px;
    height: 96px;
    overflow: hidden;
    position: absolute;
    left: 16px;
    top: 20px;
    background: #F3F3F4;
}

.modal .contactInner .contentBox .modalBody .itemBox .imgBox img{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal .contactInner .contentBox .modalBody .itemBox .textBox{
    min-height: 96px;
}

.modal .contactInner .contentBox .modalBody .itemBox .textBox p{
    font-size: 1.4em;
    margin-bottom: 8px;
}

.modal .contactInner .contentBox .modalBody .itemBox .textBox span{
    display: block;
    margin-bottom: 3px;
    font-size: 1.2em;
    color: rgba(0, 0, 0, 0.6);
}

.modal .contactInner .contentBox .modalBody ul{
    padding:20px 16px 0px;
}

.modal .contactInner .contentBox .modalBody .btnBox{
    width: calc(100% - 50% - 72px);
    position: fixed;
    bottom: 0px;
    right: 0px;
    border-top: 1px rgba(0, 0, 0, 0.1) solid;
    padding:12px;
    background: #fff;
}

.modal .contactInner .contentBox .modalBody .btnBox a{
    width: 100%;
    height: 48px;
    background: #000;
    border-radius: 3px;
    color: #fff;
    font-size: 1.6em;
    font-weight: 600;
}

@media screen and (max-width:1080px){
    .modal .contactInner{
        position: absolute;
        right: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        padding-left: 0px;
    }
    
    .modal .contactInner .contentBox{
        width: 100%;
        height: 100%;
        background: #fff;
    }
    .modal .contactInner .contentBox .modalBody{
        height: calc(100% - 56px);
        padding-bottom: 0px;
    }

    .modal .contactInner .contentBox .modalBody .btnBox{
        width: 100%;
        position: relative;
        bottom: auto;
        right: auto;
        padding:0px 16px 48px;
        margin-top: 32px;
        border-top: 0px;
    }
}

.loadingModal{
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background: rgba(255,255,255,0.8);
}

.loadingModal .loading{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:48px;
    height: 48px;
    z-index: 10000;
}
/* modal css end */

/* main css start */
#pageMain .itemWrapper{
    padding-top: 40px;
    border-bottom: 1px rgba(0,0,0,0.1) solid;
    margin-bottom: 96px;
}

#pageMain .itemWrapper .mobileBox{
    display: none;
}

#pageMain .itemWrapper .hiddenBox{
    overflow: hidden;
}

#pageMain .itemWrapper .hiddenBox:last-child{
    /* margin-bottom: 136px; */
    margin-bottom: 70px;
}

#pageMain .itemWrapper .hiddenBox h2{
    font-size: 5.6em;
    font-weight: 400;
    line-height: 1.2;
    bottom: -100px;
    transition: all 0.3s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
}

#pageMain .itemWrapper .hiddenBox h2.active{
    bottom: 0px;
}

#pageMain .itemWrapper .itemBox{
    margin-bottom: 96px;
}

#pageMain .itemWrapper .itemBox p{
    text-align: center;
    font-size: 2em;
    margin-bottom: 8px;
}

#pageMain .itemWrapper .itemBox h3{
    font-size: 6.4em;
    font-weight: 600;
    margin-bottom: 32px;
    text-align: center;
}

#pageMain .itemWrapper .itemBox .inner .item{
    display: block;
    width: 291px;
    margin-right: 12px;
}

#pageMain .itemWrapper .itemBox .inner .item:first-child{
    margin-left: 40px;
}

#pageMain .itemWrapper .itemBox .inner .item:last-child{
    margin-right: 0px;
}

#pageMain .itemWrapper .itemBox .inner .item .imgBox{
    width: 100%;
    padding-bottom: 100%;
    background: #F3F3F4;
    margin-bottom: 16px;
}

#pageMain .itemWrapper .itemBox .inner .item .imgBox img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

#pageMain .itemWrapper .itemBox .inner .item em{
    display: block;
    font-size: 1.4em;
    font-weight: 500;
    margin-bottom: 8px;
}

#pageMain .itemWrapper .itemBox .inner .item span{
    display: block;
    font-size: 2em;
}

#pageMain .collectionWrapper{
    padding-bottom: 96px;
    margin-bottom: 96px;
    border-bottom: 1px rgba(0,0,0,0.1) solid;
}

#pageMain .collectionWrapper .flexBox{
    align-items: normal;
}

#pageMain .collectionWrapper .leftBox{
    padding-right: 16px;
}

#pageMain .collectionWrapper .leftBox img{
    width: 100%;
}

#pageMain .collectionWrapper .rightBox{
    padding-left: 16px;
    text-align: center;
}

#pageMain .collectionWrapper .rightBox em{
    display: block;    
    font-size: 2em;
    margin-bottom: 32px;
}

#pageMain .collectionWrapper .rightBox h3{
    font-size: 6.4em;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 32px;    
}

#pageMain .collectionWrapper .rightBox span{
    display: block;    
    word-break: keep-all;
    margin-bottom: 32px;
    font-size: 1.6em;
    line-height: 1.5;
}

#pageMain .collectionWrapper .rightBox a{
    display: inline-block;
    font-size: 1.6em;
    font-weight: 600;
    border-bottom: 1px #000 solid;
    line-height: 1;
}

#pageMain .meritWrapper{
    padding-bottom: 96px;
    margin-bottom: 96px;
    border-bottom: 1px rgba(0,0,0,0.1) solid;    
}

#pageMain .meritWrapper .flexBox{
    align-items: normal;
}

#pageMain .meritWrapper .item{
    padding:0px 40px;
    text-align: center;
}

#pageMain .meritWrapper .item img{
    width: 120px;
    height: 120px;
    object-fit: cover;
}

#pageMain .meritWrapper .item p{
    font-size: 3.2em;
    margin:16px 0px 8px;
}

#pageMain .meritWrapper .item span{
    word-break: keep-all;
    display: block;
    font-size: 1.6em;
    font-weight: 300;
    line-height: 1.5;
}

#pageMain .contactWrapper{
    padding-bottom: 96px;
}

#pageMain .contactWrapper .flexBox{
    align-items: normal;
}

#pageMain .contactWrapper .leftBox{
    padding-right: 16px;
    text-align: center;
}

#pageMain .contactWrapper .leftBox em{
    display: block;
    font-size: 2em;
    margin-bottom: 32px;
}

#pageMain .contactWrapper .leftBox h3{
    font-size: 6.4em;
    font-weight: 600;
}

#pageMain .contactWrapper .rightBox{
    padding-left: 16px;
}

#pageMain .contactWrapper .rightBox .resultBtn{
    width: 104px;
    height: 48px;
    color: #fff;
    border-radius: 3px;
    font-size: 1.6em;
    font-weight: 600;
    background: #000;
}

@media screen and (max-width:1320px){
    #pageMain .collectionWrapper .rightBox span br{
        display: none;
    }
}

@media screen and (max-width:1080px){
    #pageMain .itemWrapper{
        margin-bottom:48px;
    }

    #pageMain .itemWrapper .pcBox{
        display: none;
    }

    #pageMain .itemWrapper .mobileBox{
        display: block;
    }

    #pageMain .itemWrapper .hiddenBox:last-child{
        /* margin-bottom: 88px; */
        margin-bottom: 40px;
    }

    #pageMain .itemWrapper .hiddenBox h2{
        font-size: 3em;
        line-height: 1.3;
        bottom: -50px;
    }

    #pageMain .itemWrapper .hiddenBox h2 br{
        display: none;
    }

    #pageMain .itemWrapper .itemBox{
        margin-bottom: 80px;
    }

    #pageMain .itemWrapper .itemBox:last-child{
        margin-bottom: 48px;
    }

    #pageMain .itemWrapper .itemBox h3{
        font-size: 4.8em;
        margin-bottom: 28px;
    }

    #pageMain .itemWrapper .itemBox .inner .item:first-child{
        margin-left: 12px;
    }

    #pageMain .collectionWrapper{
        padding-bottom: 48px;
        margin-bottom: 48px;
    }

    #pageMain .collectionWrapper .rightBox em{
        margin-bottom: 20px;
    }

    #pageMain .collectionWrapper .rightBox span{
        margin-bottom: 20px;
        padding:0px 12px;
    }

    #pageMain .collectionWrapper .rightBox h3{
        font-size: 4.8em;
        margin-bottom: 20px;
    }

    #pageMain .meritWrapper{
        padding-bottom: 48px;
        margin-bottom: 48px;    
    }

    #pageMain .meritWrapper .item p{
        font-size: 2.4em;
    }

    #pageMain .meritWrapper .item span br{
        display: none;
    }

    #pageMain .contactWrapper{
        padding:0px 8px 48px;
    }

    #pageMain .contactWrapper .leftBox{
        padding-right: 0px;
        width: 100%;
        margin-bottom: 48px;
    }

    #pageMain .contactWrapper .rightBox{
        padding-left: 0px;
        width: 100%;
    }

    #pageMain .contactWrapper .leftBox h3{
        font-size: 4.8em;
    }

    #pageMain .contactWrapper .rightBox .resultBtn{
        width: 100%;
    }
}

@media screen and (max-width:900px){
    #pageMain .collectionWrapper .flexBox{
        display: block;
    }

    #pageMain .collectionWrapper .leftBox,
    #pageMain .collectionWrapper .rightBox{
        padding:0px;
        width: 100%;
    }

    #pageMain .collectionWrapper .leftBox{
        margin-bottom: 32px;
    }
    
    #pageMain .meritWrapper .item{
        width: 100%;
        padding:0px 12px;
        margin-bottom: 40px;
    }

    #pageMain .meritWrapper .item:last-child{
        margin-bottom: 0px;
    }

    #pageMain .meritWrapper .item span br{
        display: block;
    }
}
/* main css end */

/* products css start */
#pageItems .titleWrapper{
    padding: 96px 0px 48px;
    margin-bottom: 48px;
    border-bottom: 1px rgba(0,0,0,0.1) solid;
}

#pageItems .titleWrapper .titleBox{
    margin-bottom: 32px;
}

#pageItems .titleWrapper .titleBox h2{
    font-size: 8em;
    font-weight: 600;
    line-height: 1;
}

#pageItems .titleWrapper .menuBox{
    width: auto;
}

#pageItems .titleWrapper .menuBox a{
    display: block;
    font-size: 2em;
    font-weight: 500;
    margin-right: 20px;
    color: rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
}

#pageItems .titleWrapper .menuBox a:last-child{
    margin-right: 0px;
}

#pageItems .titleWrapper .menuBox a.active,
#pageItems .titleWrapper .menuBox a:hover{
    color: #000;
}

#pageItems .titleWrapper .searchBox{    
    width: 90px;
    height: 40px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

#pageItems .titleWrapper .searchBox input{
    padding-right: 28px;
    font-size: 1.6em;
    border:none;
    outline: none;
    width: 100%;
    height: 100%;
    border-bottom: 1px #000 solid;
    display: none;
}

#pageItems .titleWrapper .searchBox input::placeholder{
    color: rgba(0,0,0,0.4);
}

#pageItems .titleWrapper .searchBox button{
    position: absolute;
    right: 0px;
    top:50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border:none;
    outline: none;
    background: none;
    pointer-events: none;
}

#pageItems .titleWrapper .searchBox p{
    font-size: 1.6em;
    font-weight: 500;
}

#pageItems .titleWrapper #searchForm.active .searchBox{
    width: 268px;
}

#pageItems .titleWrapper #searchForm.active .searchBox p{
    display: none;
}

#pageItems .titleWrapper #searchForm.active .searchBox input{
    display: block;
}

#pageItems .titleWrapper #searchForm.active .searchBox button{
    pointer-events:inherit;
}

#pageItems .productsWrapper .flexBox{
    margin-bottom: 48px;
}

#pageItems .productsWrapper .flexBox p{
    font-size: 1.4em;
}

#pageItems .productsWrapper .flexBox select{
    text-align: right;
    padding-right: 20px;
    outline: none;
    border:none;
    font-size: 1.4em;
    width: auto;
    height: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('../icons/icon-down.svg') no-repeat 100% 50% / 12px auto;
}

#pageItems .productsWrapper .itemBox{
    margin:0px -16px;
}

#pageItems .productsWrapper .itemBox .item{
    display: block;
    padding:0px 16px;
    margin-bottom: 96px;
}

#pageItems .productsWrapper .itemBox .noneData{
    text-align: center;
    width: 100%;
}

#pageItems .productsWrapper .itemBox .noneData img{
    display: inline-block;
    width: 120px;
    margin-bottom: 32px;
}

#pageItems .productsWrapper .itemBox .noneData h3{
    font-size: 5.6em;
    font-weight: 400;
    margin-bottom: 32px;
}

#pageItems .productsWrapper .itemBox .noneData span{
    font-size: 1.6em;
    line-height: 1.5;
}

#pageItems .productsWrapper .itemBox .item{
    width: 25%;
}

#pageItems .productsWrapper .itemBox .item .imgBox{
    width: 100%;
    padding-bottom: 100%;
    background: #F3F3F4;
    margin-bottom: 16px;
}

#pageItems .productsWrapper .itemBox .item .imgBox img{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#pageItems .productsWrapper .itemBox .item span{
    display: block;
    font-size: 1.6em;
    font-weight: 500;
    margin-bottom: 8px;
}

#pageItems .productsWrapper .itemBox .item p{
    font-size: 2.4em;
}

@media screen and (max-width:1280px){
    #pageItems .productsWrapper .itemBox .item{
        width: 33.3%;
    }
}

@media screen and (max-width:1080px){
    #pageItems .titleWrapper{
        padding: 40px 0px 32px;
        margin-bottom: 32px;
    }

    #pageItems .titleWrapper .imx{
        margin:0px;
    }

    #pageItems .titleWrapper .titleBox{
        padding:0px 12px;
    }

    #pageItems .titleWrapper .titleBox h2{
        font-size: 3.6em;
        height: 36px;
        line-height: 1;
    }

    #pageItems .titleWrapper #searchForm{
        position: absolute;
        top: -68px;
        right: 0px;
        padding:0px 12px;
    }

    #pageItems .titleWrapper .searchBox{
        width: 20px;
        height: 36px;
    }

    #pageItems .titleWrapper .searchBox p{
        display: none;
    }

    #pageItems .titleWrapper #searchForm.active{
        width: 100%;
    }

    #pageItems .titleWrapper #searchForm.active .searchBox{
        width: 100%;
    }

    #pageItems .titleWrapper .menuBox{
        width: 100%;
        padding-left: 12px;
    }

    #pageItems .titleWrapper .menuBox a{
        font-size: 1.6em;
    }

    #pageItems .productsWrapper .flexBox{
        margin-bottom: 32px;
    }
    
    #pageItems .productsWrapper .flexBox p{
        font-size: 1.2em;
    }

    #pageItems .productsWrapper .flexBox select{
        font-size: 1.2em;
    }

    #pageItems .productsWrapper .itemBox{
        margin:0px -6px;
    }

    #pageItems .productsWrapper .itemBox .item{
        width: 50%;
        padding:0px 6px;
        margin-bottom: 48px;
    }

    #pageItems .productsWrapper .itemBox .noneData{
        padding:96px 0px;
    }
    
    #pageItems .productsWrapper .itemBox .noneData img{
        margin-bottom: 20px;
    }
    
    #pageItems .productsWrapper .itemBox .noneData h3{
        font-size: 3.6em;
        margin-bottom: 20px;
    }
    
    #pageItems .productsWrapper .itemBox .noneData span{
        font-size: 1.4em;
    }

    #pageItems .productsWrapper .itemBox .item .imgBox{
        margin-bottom: 12px;
    }

    #pageItems .productsWrapper .itemBox .item span{
        font-size: 1.2em;
        margin-bottom: 6px;
    }

    #pageItems .productsWrapper .itemBox .item p{
        font-size: 1.8em;
        line-height: 1.4;
    }    
}
/* products css end */

/* detail css start */
#pageItemDetail .contentWrapper{
    padding: 40px 0px 96px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox{
    padding-right: 32px;
    position: sticky;
    top: 112px;
    left: 0px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .mapBox{
    font-size: 1.4em;
    font-weight: 500;
    margin-bottom: 40px;
    height: 18px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .mapBox img{
    margin:0px 4px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .imgBox{
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    display: none;
    background: #F3F3F4;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .imgBox img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;    
}

#pageItemDetail .contentWrapper .contentBox .leftBox h2{
    font-size: 5.6em;
    font-weight: 500;
    margin-bottom: 20px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox h4{
    display: block;
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 40px;
    word-break: keep-all;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li{
    margin-bottom: 40px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoTitle{
    display: block;
    margin-bottom: 12px;
    font-size: 1.6em;
    font-weight: bold;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox ul::after{
    display: none;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox ul li{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 20px;
    cursor: pointer;
    background: #F3F3F4;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox ul li.active{
    border:1px #000 solid;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox ul li:last-child{
    margin-right: 0px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox ul li img{
    width: 32px;
    height: 32px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}

#pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox em{
    font-size: 1.4em;
    display: block;
    margin-top: 12px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox select{
    outline: none;
    border:1px rgba(0, 0, 0, 0.1) solid;
    border-radius: 3px;
    font-size: 1.6em;
    width: 100%;
    height: 48px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('../icons/icon-down2.svg') no-repeat calc(100% - 16px) 50% / 16px auto;
    padding:0px 16px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox .btnBox{
    margin-bottom: 20px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox a{
    width: 100%;
    background: #000;
    color: #fff;
    font-size: 1.6em;
    font-weight: 600;
    height: 48px;
    border-radius: 3px;
}

#pageItemDetail .contentWrapper .contentBox .leftBox p{
    font-size: 1.4em;
    color: rgba(0,0,0,0.6);
    line-height: 1.5;    
}

#pageItemDetail .contentWrapper .contentBox .rightBox{
    padding-top: 58px;
    padding-left: 32px;
}

#pageItemDetail .contentWrapper .contentBox .rightBox .imgBox{
    width: 100%;
    margin-bottom: 20px;
    background: #F3F3F4;
}

#pageItemDetail .contentWrapper .contentBox .rightBox .imgBox:last-child{
    margin-bottom: 0px;
}

#pageItemDetail .contentWrapper .contentBox .rightBox .imgBox img{
    width: 100%;
}

@media screen and (max-width:1080px){
    #pageItemDetail .contentWrapper{
        padding:20px 0px 48px;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox{
        width: 100%;
        padding-right: 0px;
        position: relative;
        top: auto;
        left: auto;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox .imgBox{
        display: block;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox .mapBox{
        margin-bottom: 20px;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox h2{
        font-size: 3.2em;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox h4{
        font-size: 1.4em;
        margin-bottom: 20px;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li{
        margin-bottom: 20px;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox{
        margin:0px -12px;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox ul{
        padding-left: 12px;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox ul::after{
        display: block;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li .infoBox em{
        padding:0px 12px;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li:nth-child(3) .infoBox,
    #pageItemDetail .contentWrapper .contentBox .leftBox .infoWrapper > li:nth-child(4) .infoBox{
        margin:0px;
    }

    #pageItemDetail .contentWrapper .contentBox .leftBox .btnBox{
        position: fixed;
        padding:12px;
        width: 100%;
        left: 0px;
        bottom: 0px;
        z-index: 999;
        margin-bottom: 0px;
        background: #fff;
        border-top: 1px rgba(0, 0, 0, 0.1) solid;
    }

    #pageItemDetail .contentWrapper .contentBox .rightBox{
        padding:32px 0px 0px;
        width: 100%;
    }

    #pageItemDetail .contentWrapper .contentBox .rightBox.active{
        display: none;
    }
}
/* detail css end */

/* about css start */
#pageAbout .mainWrapper{
    padding: 96px 0px;
    text-align: center;
}

#pageAbout .mainWrapper .mobileBox{
    display: none;
}

#pageAbout .mainWrapper .effectBox div{
    overflow: hidden;
}

#pageAbout .mainWrapper .effectBox div h2{
    font-size: 8em;
    font-weight: 400;
    bottom: -100px;
    transition: all 0.3s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
}

#pageAbout .mainWrapper .effectBox div h2.active{
    bottom: 0px;
}

#pageAbout .mainWrapper .effectBox div h2 br{
    display: none;
}

#pageAbout .mainWrapper .effectBox div:last-child{
    margin-bottom: 96px;
}

#pageAbout .mainWrapper .imgBox{
    max-width: 480px;
    width: 100%;
    height: 480px;
    background: #040404;
    margin:auto;
    transition: all 0.3s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
}

#pageAbout .mainWrapper .imgBox.active{
    max-width: 100%;
}

#pageAbout .mainWrapper .imgBox img{
    height: 100%;
}

#pageAbout .imgWrapper h4{
    text-align: center;
    font-size: 2em;
    margin-bottom: 32px;
}

#pageAbout .imgWrapper h3{
    text-align: center;
    font-size: 4.8em;
    font-weight: 400;
    margin-bottom: 96px;
}

#pageAbout .imgWrapper .flexBox{
    margin:0px -20px;
}

#pageAbout .imgWrapper .flexBox.custom{
    margin-bottom: 40px;
}

#pageAbout .imgWrapper .flexBox > div{
    padding:0px 20px;
}

#pageAbout .imgWrapper .flexBox > div img{
    display: block;
    width: 100%;
}

#pageAbout .imgWrapper .flexBox .textBox p{
    padding:0px 20px;
    font-size: 2em;
    line-height: 1.5;
    word-break: keep-all;
}

#pageAbout .imgWrapper .flexBox .textBox p+p{
    margin-top: 40px;    
}

#pageAbout .imgWrapper h2{
    font-size: 4.4em;
    font-weight: 400;
    text-align: center;
    padding:136px 0px;
}

#pageAbout .bannerWrapper{
    display: block;
    width: 100%;
    height: 324px;
    background-image: url('../images/about-img05.jpg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

#pageAbout .bannerWrapper::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgba(255,255,255,0.5);
}

#pageAbout .bannerWrapper .textBox{
    position: absolute;
    width: 100%;
    left: 0px;
    top:50%;
    transform: translateY(-50%);
    text-align: center;
}

#pageAbout .bannerWrapper em{
    display: block;
    font-size: 3.6em;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 32px;
}

#pageAbout .bannerWrapper em br.custom{
    display: none;
}

#pageAbout .bannerWrapper a{
    font-size: 1.8em;
    font-weight: 600;
    border-bottom: 1px #000 solid;
}

@media screen and (max-width:1080px){
    #pageAbout .mainWrapper{
        padding: 40px 0px 56px;
        text-align: center;
    }

    #pageAbout .mainWrapper .pcBox{
        display: none;
    }

    #pageAbout .mainWrapper .mobileBox{
        display: block;
    }

    #pageAbout .mainWrapper .effectBox div h2{
        font-size: 4.8em;
        line-height: 1.2;
        bottom: -60px;
    }
    
    #pageAbout .mainWrapper .effectBox div:last-child{
        margin-bottom: 56px;
    }

    #pageAbout .mainWrapper .imgBox{
        max-width: 240px;
        height: 240px;
    }

    #pageAbout .imgWrapper h4{
        font-size: 1.4em;
        margin-bottom: 12px;
    }

    #pageAbout .imgWrapper h3{
        font-size: 2em;
        margin-bottom: 56px;
    }

    #pageAbout .imgWrapper .flexBox{
        margin:0px;
    }

    #pageAbout .imgWrapper .flexBox.custom{
        margin-bottom: 56px;
    }

    #pageAbout .imgWrapper .flexBox > div{
        width: 100%;
        padding:0px;
    }

    #pageAbout .imgWrapper .flexBox .imgBox{
        margin-bottom: 32px;
    }

    #pageAbout .imgWrapper .flexBox .textBox p{
        padding:0px 12px;
        font-size: 1.6em;
    }

    #pageAbout .imgWrapper .flexBox:nth-child(4) .imgBox{
        order: 1;
    }

    #pageAbout .imgWrapper .flexBox:nth-child(4) .textBox{
        order: 2;
    }

    #pageAbout .imgWrapper h2{
        text-align: left;
        font-size: 2.8em;
        padding:96px 12px;
    }

    #pageAbout .bannerWrapper{
        height: 270px;
        background-position: 80%;
    }

    #pageAbout .bannerWrapper em{
        font-size: 2em;
    }

    #pageAbout .bannerWrapper em br{
        display: none;
    }

    #pageAbout .bannerWrapper em br.custom{
        display: block;
    }

    #pageAbout .bannerWrapper a{
        font-size:1.6em
    }
}
/* about css end */

/* notice css start */
#pageNotice .contentWrapper{
    padding-top: 96px;
}

#pageNotice .contentWrapper h2{
    font-size: 8em;
    font-weight: 600;
    padding:0px 40px 48px;
    border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
    line-height: 1;
}

#pageNotice .contentWrapper .itemBox{
    padding-top:16px;
}

#pageNotice .contentWrapper .itemBox .item{
    cursor: pointer;
    display: block;
    border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
}

#pageNotice .contentWrapper .itemBox .item:last-child{
    margin-bottom: 32px;
}

#pageNotice .contentWrapper .itemBox .item .titleBox{
    padding:32px 143px 32px 84px;
}

#pageNotice .contentWrapper .itemBox .item .titleBox em{
    position: absolute;
    left: 0px;
    top: 34px;
    font-size: 1.4em;
    font-weight: 500;
}

#pageNotice .contentWrapper .itemBox .item .titleBox h3{
    font-size: 1.6em;
    word-break: keep-all;
    line-height: 1.5;
}

#pageNotice .contentWrapper .itemBox .item .titleBox img{
    position: absolute;
    right: 0px;
    top: 35px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
}

#pageNotice .contentWrapper .itemBox .item .titleBox span{
    position: absolute;
    right: 36px;
    top: 34px;
    font-size: 1.4em;
    font-weight: 500;
    font-family: 'HostGrotesk', sans-serif !important;
}

#pageNotice .contentWrapper .itemBox .item .textBox{
    display: none;
    background: rgba(0,0,0,0.05);
    padding:16px;
    font-size: 1.4em;
    line-height: 1.5;
    word-break: keep-all;
}

#pageNotice .contentWrapper .itemBox .noneData{
    text-align: center;
    padding-top: 80px;
}

#pageNotice .contentWrapper .itemBox .noneData h4{
    font-size: 5.6em;
    font-weight: 400;
    margin-bottom: 32px;
}

#pageNotice .contentWrapper .itemBox .noneData p{
    font-size: 1.6em;
}

@media screen and (max-width:1080px){
    #pageNotice .contentWrapper{
        padding-top: 40px;
    }

    #pageNotice .contentWrapper h2{
        padding:0px 12px 32px;
        font-size: 3.6em;
    }

    #pageNotice .contentWrapper .itemBox{
        padding-top: 12px;
    }
    
    #pageNotice .contentWrapper .itemBox .item:last-child{
        margin-bottom: 20px;
    }

    #pageNotice .contentWrapper .itemBox .item .titleBox{
        padding:20px 0px;
    }

    #pageNotice .contentWrapper .itemBox .item .titleBox em{
        font-size: 1.2em;
        display: block;
        position: relative;
        left: auto;
        top: auto;
        margin-bottom: 8px;
    }

    #pageNotice .contentWrapper .itemBox .item .titleBox h3{
        margin-bottom: 8px;
    }

    #pageNotice .contentWrapper .itemBox .item .titleBox span{
        position: relative;
        top: auto;
        right: auto;
        display: block;
        font-size: 1.2em;
    }

    #pageNotice .contentWrapper .itemBox .item .titleBox img{
        top: 20px;
        width: 14px;
        height: 14px;
    }

    #pageNotice .contentWrapper .itemBox .noneData{
        padding-top: 116px;
        padding-bottom: 96px;
    }
    
    #pageNotice .contentWrapper .itemBox .noneData h4{
        font-size: 3.6em;
        margin-bottom: 20px;
    }
    
    #pageNotice .contentWrapper .itemBox .noneData p{
        font-size: 1.4em;
    }
}
/* notice css end */

/* contact css start */
#pageContact .contentWrapper{
    padding:96px 0px;
}

#pageContact .contentWrapper .titleBox{
    padding:0px 40px 48px;
    margin-bottom: 48px;
    border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
}

#pageContact .contentWrapper .titleBox h2{
    font-size: 8em;
    font-weight: 600;
    margin-bottom: 32px;
    line-height: 1;
}

#pageContact .contentWrapper .titleBox p{
    font-size: 1.8em;
    line-height: 1.5;    
}

#pageContact .contentWrapper .contentBox{
    margin:0px -20px;
    align-items: normal;
}

#pageContact .contentWrapper .contentBox > div{
    padding:0px 20px;
}

#pageContact .contentWrapper .contentBox .leftBox .resultBtn{
    width: 100%;
    height: 48px;
    background: #000;
    color: #fff;
    border-radius: 3px;
    font-size: 1.6em;
    font-weight: 600;
}

#pageContact .contentWrapper .contentBox .rightBox .infoBox{
    height: 110px;
    margin-bottom: 32px;
}

#pageContact .contentWrapper .contentBox .rightBox span{
    margin-bottom: 12px;
    display: block;
    font-size: 1.4em;
    font-weight: 500;
}

#pageContact .contentWrapper .contentBox .rightBox ul li{
    margin-bottom: 8px;
}

#pageContact .contentWrapper .contentBox .rightBox ul li:last-child{
    margin-bottom: 0px;
}

#pageContact .contentWrapper .contentBox .rightBox ul li em{
    font-size: 1.6em;
}

#pageContact .contentWrapper .contentBox .rightBox ul li a{
    margin-left: 8px;
    font-size: 1.4em;
    font-weight: 600;
    text-decoration: underline;
}

#pageContact .contentWrapper .contentBox .rightBox iframe{
    width: 100%;
    height: calc(100% - 142px);    
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

@media screen and (max-width:1080px){
    #pageContact .contentWrapper{
        padding:40px 0px 48px;
    }

    #pageContact .contentWrapper .titleBox{
        padding:0px 12px 32px;
        margin-bottom: 32px;
        border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
    }

    #pageContact .contentWrapper .titleBox h2{
        font-size: 3.6em;
    }

    #pageContact .contentWrapper .titleBox p{
        font-size:1.4em;
    }    

    #pageContact .contentWrapper .contentBox{
        margin: 0px;
    }

    #pageContact .contentWrapper .contentBox > div{
        padding:0px;
        width: 100%;
    }

    #pageContact .contentWrapper .contentBox .leftBox{
        padding:0px 4px 32px;
        margin-bottom: 32px;
    }

    #pageContact .contentWrapper .contentBox .leftBox::after{
        content: '';
        width: calc(100% + 24px);
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
    }

    #pageContact .contentWrapper .contentBox .rightBox .infoBox{
        height: auto;
    }

    #pageContact .contentWrapper .contentBox .rightBox ul li em{
        display: block;
        width: 100%;
    }

    #pageContact .contentWrapper .contentBox .rightBox ul li a{
        margin-left: 0px;
        margin-top: 4px;
        display: inline-block;
    }

    #pageContact .contentWrapper .contentBox .rightBox iframe{
        height: 480px;
    }
}

@media screen and (max-width:460px){
    #pageContact .contentWrapper .titleBox p br{
        display: none;        
    }    
}
/* contact css start */

/* legal css start */
.pageLegal .contentWrapper{
    padding:96px 0px;
}

.pageLegal .contentWrapper h3{
    text-align: center;
    font-size: 2.4em;
    font-weight: 700;
    margin-bottom: 48px;
}

.pageLegal .contentWrapper .inner{
    background: rgba(0,0,0,0.05);
    padding:16px;
    font-size: 1.4em;
    line-height: 1.6;
    word-break: keep-all;
}

@media screen and (max-width:1080px){
    .pageLegal .contentWrapper{
        padding:40px 0px 48px;
    }

    .pageLegal .contentWrapper h3{
        margin-bottom: 32px;
        font-size: 2em;
    }

    .pageLegal .contentWrapper .inner{
        font-size: 1.2em;
    }
}
/* legal css end */