/* BASIC css start */
@charset "utf-8";
@import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');

/*
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Roboto', sans-serif;

.nanumgothic * {
 font-family: 'Nanum Gothic', sans-serif;
}
*/

a{text-decoration: none;}
a:link, a:visited, a:hover, a:active{color: #222;}

.clear::after{
    content:'';
    display:block;
    clear:both;
    width:0; height:0;
    visibility:hidden;
 }
 


.accessory{
    width: 1050px;
    height: 570px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    color: #000 !important;
}


 #small_img_list{
    width: 630px;
    height: 570px;
    box-sizing: border-box;
    padding-left:60px;
    font-size: 16px;
    position: absolute;
    right: 0;
    text-align: center;

    
 }
 
.small_title{
    font-size: 32px;
    font-weight: bold;
    margin: 20px 0 35px;
    color: #000 !important;
}


#btn{
    position: absolute;
    right:20px;
    top: 50px;
}

#btn>button{
    background: transparent;
    border: 0;
    cursor: pointer;
    margin-top: 100px;

}

#btn>button:nth-child(1){
    margin-right: 20px;
}

.small_wrap{
    width:1520px;
    margin-top: 90px;
}
.small_wrap>ul{width:570px; height: 570px; overflow: hidden; box-sizing: border-box; }

.small_wrap>ul>li{
    float: left;
    margin-left: 25px;
    position: relative;
    width:165px;
    height:370px;
    overflow: hidden;
}
.small_wrap a {display: block; width: 100%; height: 100%;}

.small_wrap div{
    width: 165px;
    height: 165px;
    overflow: hidden;
    border-radius: 10px;
    
}

.small_wrap img{
    max-width: 100%;
    overflow: hidden;
    transition: all 0.5s;
    
}
.sub_title{
    color: #777;
    margin: 25px 0 10px;
    font-size: 14px;
}


.smallimg_title{
    font-size: 16px;
    margin-bottom: 20px;
    line-height:1;
    overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
}

.price{
    font-size: 15px;
    font-weight: bold;
    color:#709BCA
}





/*large_slide*/

#large_img{
    width:420px;
    height: 570px;
    position: absolute;
    left: 0;
    text-align: center;
}

.large_slide{
    width: 100%;
    position: relative;
}

.large_slide_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .large_slide_img a{
    width: 100%;
  }

  .pagination_num{
    position:absolute;
    width: 75px !important;
    height: 25px !important;
    line-height: 25px;
    border-radius: 30px;
    top:20px;
    left:330px;
    background-color: rgba(119, 119, 119, 0.4);
    text-align: center;
    color: white;
  }

  

  /*È£¹öÈ¿°ú*/

.small_wrap ul li:hover .thum img{
    transform: scale(1.15);
    transition: all 0.5s;
    overflow: hidden;
}



.small_wrap ul li:hover .smallimg_title{
    text-decoration: underline;
}
/* BASIC css end */