.visual{
    background: url(../images/sub1_1/sub1_visual.jpg) no-repeat center center;
    width:100%; height:200px;
    background-size:cover;
    position: relative;
}
.visual span{
    display: block;
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
}
.sub_nav{
    width: 100%;
    border-bottom: 1px solid #c1c1c1;
}
.sub_nav ul{
    display: flex;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.sub_nav ul li{
    width: 50%;
}
.sub_nav ul li a{
    padding: 10px 0;
    font-weight: 500;
}
.sub_nav li .current{
    background: var(--font-color-point2);
    color: #fff;
    font-weight: 600;
}
/* sub1_1 콘텐츠 */
#content .title_area h2{
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin: 100px 0 80px;
    position: relative;
}
#content .title_area h2::before{
content: ''; width: 12px; height: 12px; background: var(--font-color-point2);
position: absolute; transform: rotate(45deg); border-radius: 2px; 
top: -27px; left: 50%; margin-left: -6px;
}
#content .title_area h2::after{
content: ''; width: 12px; height: 12px; background: var(--font-color-point2);
position: absolute; transform: rotate(45deg); border-radius: 2px; 
bottom: -34px; left: 50%; margin-left: -6px;
}


#content .content_area .product .search_box{
    width:60%; 
    margin: 20px auto 50px;
    height: 50px;
}
#content .content_area .product .search_box label{
    font-size: 1rem;
    font-weight: 500;
    padding-right: 0px;
}
#content .content_area .product .search_box input{
    font-size: 1rem;
    padding:0px; 
    outline: none ;
    border: 1px solid var(--font-color-point2);
    margin-left: 20px;
}

#content .content_area .product .search_box button{
    width: 100px; 
    padding: 5px 0; 
    font-size: 1rem; 
    border: 0; background: var(--font-color-point1); 
    color: #fff; 
    font-weight: 500; border-radius: 10px;
}
#content .content_area .product .search_box .btn_all{
    background: var(--font-color-point2); box-sizing: border-box;
}

#content .content_area .product ul{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    margin: 10px;
}
#content .content_area .product li{
    padding: 30px 0 30px 10px;
    border-bottom: 1px solid var(--font-color1);
    transition: all .2s ease-in-out;
}
#content .content_area .product li div{
    display: flex; gap: 10px;
    height: 161px;
    flex-direction: column;
    justify-content: start;
}
#content .content_area .product li:last-child{
    border: none;
}
#content .content_area .product li img{
    float: left;
    margin-right: 20px;
    margin-top: 6px;
    
}

/* #content .content_area .product li a{
    width: 230px; height: 325px;
    float: left;
    margin-right: 50px;
} */
#content .content_area .product li dl dt,
#content .content_area .product li dl dd{
 font-size: 1rem;
}
#content .content_area .product li dl:nth-of-type(1) dt:nth-of-type(1){
     font-weight: 600;
     font-size: 1.1rem;
     word-break: break-all;
}
#content .content_area .product li dl:nth-of-type(1) dd{
    padding-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#content .content_area .product li div dl:last-child dl{
    font-size: .85rem;
}
#content .content_area .product li dl:last-child dt:nth-of-type(1) span:first-child{
    letter-spacing: 25px;
    
}
#content .content_area .product li dl:last-child dt:nth-of-type(1),
#content .content_area .product li dl:last-child dt:nth-of-type(2),
#content .content_area .product li dl:last-child dt:nth-of-type(3){
    float: left;
    font-weight: 600;
}
#content .content_area .product li dl:last-child dt{
    margin-right: 20px;
    padding: 3px 0;
}
#content .content_area .product li dl:last-child dd{
    line-height: 1rem;
    text-align: left;
    overflow: hidden;
    padding:6px 0 8px;
    
    
}

#content .content_area .product .modal_box{
    position: fixed; 
    width: 100%; height: 100%;
    left:0; top:0; 
    background: rgba(0,0,0,.8); 
    display: none;
    z-index: 110;
}
#content .content_area .product .modal_box .popup{
    width:80%; 
    position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);
    background: #fff; text-align: center;
    max-height: 90%; /* 브라우저 높이의 90%까지만 */
    overflow-y: auto;
    padding: 20px;
    overflow-y: auto;
}
#content .content_area .product .modal_box .popup img{
    margin: 60px 0;

}
#content .content_area .product .modal_box .popup .pop_con>p:nth-of-type(1){
    margin-bottom: -2px;
    font-size: 1.1rem;
    font-weight: 700;
}
#content .content_area .product .modal_box .popup p:nth-of-type(2){
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 50px;
}
#content .content_area .product .modal_box .popup .close_pop{
    position: relative; bottom:0px; left: 50%; transform: translateX(-50%);
    text-align: center; width: 100%; font-size: 1.1rem; font-weight: 500; 
    display: flex; justify-content: center; gap: 20px;
    margin: 30px 0;
    
}
#content .content_area .product .modal_box .popup .close_pop p{
    border: 1px solid var(--font-color-sub);
    color: var(--font-color-sub);
    width: 150px;
    padding: 5px 0;
    border-radius: 10px;
}
#content .content_area .product .modal_box .popup .close_pop a{
    border: 1px solid var(--font-color-point1);
    color: var(--font-color-point1);
    width: 150px;
    padding: 5px 0;
    border-radius: 10px;
}
#content .content_area .product .modal_box .popup .close_pop i{
    padding: 3px;
}
#content .content_area .product .modal_box .popup .pop_con dl{
   line-height: 1.22rem;
   margin-bottom: 10px;
   display: block;
   clear: both;
}
#content .content_area .product .modal_box .popup .pop_con dt{
    
    text-align: left;

    font-weight: 500;
    float: left; 
}
#content .content_area .product .modal_box .popup .pop_con dl:nth-child(1) dt,
#content .content_area .product .modal_box .popup .pop_con dl:nth-child(3) dt,
#content .content_area .product .modal_box .popup .pop_con dl:nth-child(5) dt{
    letter-spacing: 28px;
}
#content .content_area .product .modal_box .popup .pop_con dl:nth-child(2) dt,
#content .content_area .product .modal_box .popup .pop_con dl:nth-child(4) dt{
    margin-right: 28px;
}

#content .content_area .product .modal_box .popup .pop_con dd{
    text-align: left;
    overflow: hidden;
    line-height: 1.4rem;
}