#bo_v_con p{font-size: 16px}

#bo_gall .gall_img{border-radius: 20px; overflow: hidden}
#bo_w{max-width: 1540px; margin: 0 auto ;padding: 150px 0}
#column-detail-header-back{z-index: 2}

.mo_visual{display: none}

#ctt_con h3{font-size: 24px;}
#ctt_con p{font-size: 16px;}

#ctt_con dt{font-size: 18px}
#ctt_con dd{font-size: 18px}

#ctt_con dd dt{font-size: 18px}

#ctt_con .m9-grid-block .m9-history-list dt{font-size: 30px}
#ctt_con .m9-grid-block .m9-history-list dd dt{font-size: 18px}

@media (min-width: 1800px) {
	
	#main-3 .review ul li img{height: 160px}
	
}


@media (max-width: 1800px) {
	
	
#main-3 .product {

    width: auto
}
	
#main-3 .product  div img, #main-3 .new  div img{ width: 100%; max-width: 400px }	
	#main-3 .review ul li img{height: 125px}
	
	#main-3 .product  div img, #main-3 .new  div img{min-width: 400px; width: 100%; max-width: 400px}

.container{max-width: 1540px; margin: 0 auto}



#main-1 .container{max-width: 100%}

#main-2 ul img{max-width: 100%}
#main-2 ul li{flex:1}


header#header .container{padding: 24px 25px}
.main_logo{max-width: 200px; margin: 0 auto}

#main-1 .container > div > section p{font-size: 80px}
#main-1 .container > div > h2{font-size: 20px }




#main-2{padding-top: 150px}
#main-3, #main-4{padding: 150px 25px}


#main-4 ul {
    justify-content: center;
    align-items: flex-start;
}

#main-4 li img{max-width: 100%}

#main-5{padding: 150px 0}
#main-5 .container{padding: 0 25px}

#ctt_con{padding: 0 25px}

#main-6{margin-top: 0}

#main-6 #main-6-content-wrap{padding: 150px 25px}

#aboutus .container{padding: 0 25px 150px}

img#aboutus-top{max-width: 100%; margin: 100px auto 0; display: block}


#about-middle{padding-top: 0}

#about-bottom ul li{height: 250px}
#about-bottom ul li img{max-width: 100%; height: 100%;
        object-fit: cover;}
        
        
        
#about-bottom ul li h3{font-size: 30px}        
#about-bottom ul li p{font-size: 18px; margin-top: 15px}        
        
        
#product{padding: 150px 0}        
#product .container{padding:0 25px }        

#product #product-list{gap:30px}

#product #product-list li {
    width: calc(33.333% - 19.999px);
}

ul.categorys{margin-top: 50px}

#product-detail{padding: 30px 0 150px}
#product-detail .container{padding: 0 25px}


#product-detail-header-box p{font-size: 16px; line-height: 1.4; word-break: keep-all}

#product-detail-header-box a{padding: 20px 0; font-size: 18px}
#product-detail-review > section > a{font-size: 18px; padding: 20px 50px}


.tbl_head01 .top{background-repeat: no-repeat}

#notice.container, #notice_detail.container{padding: 150px 25px}

#notice > h2{margin-bottom: 50px}

footer{margin-top: -50px}

#bo_v_atc{border-top: 2px solid #8C52FF; border-bottom: 1px solid #ddd}


#bo_v_atc::after{content: ''; }
#bo_v_atc::before{content: ''}


#product #column-list{gap:30px}
#product #column-list li{width: calc(33.333% - 19.999px);}
#product #column-list li img{max-width: 100%}


#column-detail > .container{padding: 50px 25px 150px}

#tatata .container, #tatata-detail .container{padding: 0 25px}
#tatata .tatata_list img{max-width: 100%}

#tatata #tatata-movie-list{gap:30px}
#tatata #tatata-movie-list li{width: calc(33.333% - 19.999px);}

#tatata-detail{padding: 150px 0}

#tatata-detail-header{border-bottom: 2px solid #8C52FF;}
#tatata-detail-header::after{content: ''; }
#tatata-detail #tatata-detail-content{border-bottom: 1px solid #ddd}
#tatata-detail #tatata-detail-content::after{content: ''; }


#ctt{padding: 150px 0}

#gallery_new > h2{margin-bottom: 50px} 
#gallery_new.container, #gallery_new_detail.container{padding: 150px 25px}
 
section#menu > .container{padding: 0 25px}  

#review .container{width: 100%; max-width: 800px;}


#column-detail-header .container{padding: 0 25px; max-width: 100%}

footer > section{padding: 100px 25px 50px}

}



@media (max-width: 1640px) {


#menu-wrap > section > article > a{font-size: 40px; width: 300px; line-height: 70px}
#menu-wrap > section > article > ul > li > a{font-size: 18px}


}






@media (max-width: 1540px) {

#main-2{padding: 150px 25px 0}

.btn-more, #column-btn-back, #tatata-btn-back, .btn-list{font-size: 16px; padding: 15px 35px}

p#aboutus-top-text,
#about-middle > p{font-size: 18px; line-height: 1.5}

#about-bottom ul li > div{padding: 0 45px}

ul.categorys li a, #bo_cate a{font-size: 16px; padding: 15px 35px}

#tatata .tatata_list > div > p{font-size: 18px; line-height: 1.5}
#tatata .tatata_list > div > h3{font-size: 30px}
#tatata_bottom a{font-size: 16px; height: 60px; display: flex;
        justify-content: center;
        align-items: center;}
#tatata_bottom a img{max-width: 100%}
#tatata_bottom a:first-child{width: 60px; padding: 0; }
#tatata_bottom a:last-child{padding: 15px 35px}



#tatata-detail #tatata-detail-youtube{position:relative;
  height:0;
  padding-bottom:56.25%; max-width: 100%;  width: 100%; margin-top: 0}
  
#tatata-detail #tatata-detail-youtube iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.youtube_are{max-width: 1280px; margin: 0 auto; padding: 50px 0}

#header .container ul >li> ul> li{font-size: 16px}




}


@media (max-width: 1360px) {


#main-3 .product  div img, #main-3 .new  div img{min-width: 350px; width: 100%; max-width: 350px }

#main-2 h3, #main-3 h2, #main-4 h3, #main-5 .container > h2{font-size: 30px}

#main-3 h2{margin-bottom: 30px} 
 

#main-3 .review ul li img {
    width: 175px;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
    aspect-ratio: 16 / 9;
    border-radius: 10px
}

#main-3 .review ul li a{gap:20px}

#main-3 .review ul li h3{font-size: 18px;padding-right: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%; }
#main-3 .review ul li p{font-size: 16px;
        padding-right: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%; }

#main-3 .review ul li a > div{width: calc(100% - 195px); flex:none;
white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }

#main-3 .product div p, #main-3 .new div p{left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        width: 100%; padding: 0 30px;
          white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;}

#main-5 .container > h2{margin-bottom: 0}

#main-4 li{
    border-radius: 10px; overflow: hidden
}


#main-4 h4{font-size: 18px;}
#main-4 li > div > p{font-size: 18px; margin-top: 10px}
#main-4 li > div > span{font-size: 14px}

.tbl_head01 > ul > li > a > div > h3{font-size: 18px;white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;}
.tbl_head01 > ul > li > a > div > p{font-size: 16px;white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;}


.tbl_head01 > ul > li > a{padding: 40px 25px}

.tbl_head01 > ul > li > a > h1{width: 40px; background-size: 40px auto; background-position: center; background-repeat: no-repeat}

#main-6 #main-6-content-wrap{gap:50px}

.product_detail_info{width: 65%}


#product-detail-youtube{position:relative;
  height:0;
  padding-bottom:56.25%; max-width: 100%;  width: 100%; margin-top: 0}
  
#product-detail-youtube iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

#product-detail-header-box{width: calc(35% - 40px)}
#product-detail-content img{max-width: 100%}


#product-detail-content h2{margin-bottom: 30px; font-size: 30px}
#product-related section h2,
#product-detail-review > section > h2{font-size: 30px}

#product-related-list{margin-top: 30px}

.tbl_head01 > ul > li > div.line{background-repeat: no-repeat}

h2.detail_title, #tatata-detail-header h2{font-size: 30px}
p.detail_date, #tatata-detail-header p{font-size: 16px; margin-top: 20px}

#column-detail-header .container > div h2{font-size: 30px}
#column-detail-header .container > div{gap:20px}
#column-detail-header .container > div p{font-size: 16px}

#column-detail-slider #slider li{margin: 0; padding: 0 10px}
#column-detail-slider #slider li img{max-width: 100%}


#tatata-btn-back-wrap, .btn-list-wrap, #column-btn-back-wrap{margin-top: 80px}

footer #footer-right a{font-size: 14px; padding: 15px 30px}
footer #footer-content #footer-left{gap:40px}
footer #footer-content #footer-left ul{gap:10px}
footer #footer-content #footer-left ul li img{max-width: 40px;}

footer #footer-content #footer-left > div p{font-size: 14px; margin-top: 5px}

footer .container > p{margin-top: 50px}

#btn-top img{max-width: 100%}
#btn-top{width: 80px}



}


@media (max-width: 1280px) {


.about-title{font-size: 60px;}
.about-subtitle{font-size: 18px; margin-top: 20px}

#about-middle > div{gap:20px}

#about-bottom{padding: 150px 25px}

#product-detail-review-list > section > article > div > h5{font-size: 18px; margin-top: 10px}
#product-detail-review-list > section > article > div > h6{font-size: 16px; margin-top: 10px;}

#product-detail-review-list > section > article > div > div > ul img{max-width: 100%}
#product-detail-review-list > section > article > div > div > ul{max-width: 100px}

#product-detail-review-list > section > article > div > div > p.score{font-size: 16px; line-height: normal;}
#product-detail-review-list > section > article > div > div > p.separator, #product-detail-review-list > section > article > div > div > p.name{font-size: 16px; line-height: normal;}

#product-detail-review-list > section > article > div > div > p.separator{margin: 0 5px}

#product-detail-header-box a{font-size: 16px; padding: 15px }

#product-detail-header-box h2{font-size: 24px; margin-top: 30px}
#product-detail-header-box p{margin-top: 20px}
#product-detail-header-box span{font-size: 14px}



.breadcrumb ul li a{font-size: 14px}
#product .container > h2{font-size: 40px; margin-top: 20px}
#product #product-list,
#product #column-list,
#tatata #tatata-movie-list{margin-top: 50px}


#tatata .tatata_list{padding-top: 50px}

#notice > h2, #ctt h2{margin: 20px 0 50px; font-size: 40px}
#tatata > h2{font-size: 40px; margin-top: 20px}

ul.categorys{gap:10px}
ul.categorys li a, #bo_cate a{padding: 10px 35px}
#bo_cate li{padding: 0 5px}

ul.categorys{margin-top: 35px}

#bo_cate{margin: 0 0 50px}

#tatata .tatata_list > div{padding: 0 25px}

}




@media (max-width: 1024px) {
	#main-3 .main-3-right{width: 100%}

    #main-3 .product div img, #main-3 .new div img {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
    }

#main-1 .container > div {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: translateY(-70%);
}

    #main-2 ul li {
        flex: none;
        width: calc(50% - 10px);
    }
    
#main-2 ul li img{width: 100%}    


#main-3 .product {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%
}

#main-3 {flex-direction: column;}
#main-3 .product{width: 100%}
#main-3 .product img{width: 100%}

#main-3 .main-3-right > div {
    width: 100%;
}

#main-3 .main-3-right > div img{width: 100%}



#main-3 .review ul {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

#main-6 #main-6-content-wrap {
        gap: 50px;
        display: flex;
        flex-direction: column; text-align: center
}

#main-6 #main-6-content-wrap img{max-width: 80%; margin: 0 auto}
#main-6 #main-6-content-wrap > div{padding-top: 0}
#main-6 #main-6-content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}



header#header .container > ul{display: none}


#menu-wrap > section > article {
    display: flex;
    margin-bottom: 30px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#menu-wrap > section > article .open_nav{}



#menu-wrap > section > article > ul {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    height: 0; max-height: 0px; transition-duration: 1s; opacity: 0; visibility: hidden
}



#menu-wrap > section > article .open_nav + ul{
	height: auto; visibility: visible; opacity: 1; max-height: 500px;
	padding-top: 20px
}



#menu-wrap > section{margin: 0}
#menu-wrap > section::after{display: none}


#about-middle > div img{width: calc(50% - 10px)}


#about-bottom ul li {
        display: flex;
        height: auto;
        flex-direction: column;
        border-radius: 20px;
        padding: 30px;
        gap: 30px;
        text-align: center;
    }


    #about-bottom ul li img {
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        width: 100%;
        border-radius: 20px;
    }



#about-bottom ul li:nth-child(2) {flex-direction: column-reverse;}


#product #product-list{gap:20px}
#product #product-list li {width: calc(50% - 10px);}

#column-detail > .container, #ctt{min-height: 70vh}
#tatata .tatata_list > div > h3{word-break: keep-all}

.gall_row .col-gn-3 {
    width: 50%;
}

}




@media (max-width: 860px) {

#main-1 img.bg_main{object-position: bottom;}

#main-1 .container > div > section p{font-size: 60px; word-break: keep-all}
footer > img{margin-bottom: -1px}


footer #footer-content {
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 30px;
}

footer #footer-right {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

    footer > section {
        padding: 30px 25px 50px;
    }

    footer #footer-content #footer-left {
        gap: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        text-align: center;
    }

#main-4 li > div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 25px;
}


#main-4 li > div > p{
	white-space: nowrap;    /* 텍스트가 한 줄로만 표시되도록 설정 */
  overflow: hidden;       /* 넘치는 텍스트를 숨김 처리 */
  text-overflow: ellipsis; /
}

#main-5{padding: 50px 0 }
#main-6 #main-6-content-wrap{padding: 100px 25px}
    #main-3, #main-4 {
        padding: 50px 25px;
    }


#menu-wrap > section > article > a{font-size: 24px; line-height: 1.4}

#about-bottom ul li p{word-break: keep-all}
#about-bottom ul li p br{display: none}

    ul.categorys {
        gap: 10px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    ul.categorys li a, #bo_cate a {
        padding: 0px 15px;
        height: 40px;
        line-height: 38px;
    }


#product-detail-header {
    padding-top: 80px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-bottom: 100px;
    flex-direction: column-reverse;
}



    #product-detail-header-box {
        width: 100%;
        position: relative;
        top: 0;
    }

    #product-detail-header-box a {
        font-size: 16px;
        padding: 15px;
        position: fixed;
        bottom: 20px;
        left: 50%;
        width: 96%;
        transform: translateX(-50%);
        z-index: 9992
    }
    
    #product #product-list li a > div{gap:5px}
    #product #product-list li a > div > p{font-size: 14px}
    #product #product-list li a > div > h4{font-size: 16px; white-space: nowrap;    /* 텍스트가 한 줄로만 표시되도록 설정 */
  overflow: hidden;       /* 넘치는 텍스트를 숨김 처리 */
  text-overflow: ellipsis; /* 넘칠 때 '...'으로 표시 */; max-width: 80%}


.product_detail_info{width: 100%}

#bo_cate ul{gap: 10px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;}

#bo_cate ul li{padding: 0}


#product #column-list, #tatata #tatata-movie-list{gap:40px 20px}
#product #column-list li,
#tatata #tatata-movie-list li{width: calc(50% - 10px)}

#product #column-list h4,
#tatata #tatata-movie-list p,
#bo_gall .bo_tit{margin-top: 15px; font-size: 18px;}

#tatata-detail-header::after{margin-top: 50px}


#aboutus{padding: 100px 0 0 }
#product, #tatata, #ctt{padding: 100px 0 150px}


#notice.container, #notice_detail.container,
#gallery_new.container, #gallery_new_detail.container{padding: 100px 25px}
#ctt_con *{word-break: keep-all}
#column-detail-header .container > div {
        gap: 10px;
        display: flex;
        align-items: center;
        width: 100%;
        bottom: 50px;
        left: 0;
    }

#column-detail-header-back img{max-width: 50px}

#tatata .tatata_list > div{margin-top: 30px}

#tatata .tatata_list > div > h3{line-height: 1.4}
#tatata .tatata_list > div > p{word-break: keep-all}
#tatata .tatata_list > div > p br{display: none}

.gall_row .box_clear {
    clear: none;
}


#review{padding: 80px 25px}
#review-input-wrap h2{font-size: 40px}
}




@media (max-width: 600px) {

#main-4 li{width: 100%}
    header#header .container {
        padding: 10px 25px;
    }
    
.top_logo{max-width: 80px}    

header#header .container > div{gap:15px}
header#header .container > div img,
section#menu #close_btn{max-width: 50px}
section#menu #close_btn{margin-top: 10px}

.main_logo{max-width: 100px}

#main-1 .container > div{padding-bottom: 20px}
#main-1 .container > div > section p{font-size: 30px}
#main-1 .container > div > h2{font-size: 16px; margin-top: 10px; word-break: keep-all}

.mo_visual{display: block}
.pc_visual{display: none}

#btn-top{width: 50px; right: 25px; bottom: 50px}
.foot_sns{right: 25px;
        top: auto;
        transform: translateY(0px);
        bottom: 120px;}
.foot_sns img{max-width: 40px}

#main-2 h3, #main-3 h2, #main-4 h3, #main-5 .container > h2{font-size: 20px; word-break: keep-all}
#main-4 h4{word-break: keep-all}

#main-6 #main-6-content-wrap > div p{word-break: keep-all}

footer{margin-top: 0}
footer > img{display: none}

#main-2 ul{margin-top: 40px}

#main-4 ul {
    margin-top: 40px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

#main-6 #main-6-content h5{font-size: 14px}
#main-6 #main-6-content h2{font-size: 24px; margin-top: 15px}

#product, #tatata, #ctt{padding: 80px 0}
#aboutus{padding: 80px 25px 0}

.about-title{font-size: 30px}

#aboutus .container {
        padding: 0 0px 80px;
    }

img#aboutus-top{margin-top: 50px}

p#aboutus-top-text, #about-middle > p{margin-top: 50px}


    #about-middle > div {
        gap: 20px;
        display: flex;
        flex-direction: column;
        margin-top: 50px
    }

#about-middle > div > img{width: 100%}    
#about-middle > div > img:nth-child(2) {
    margin-top: 0;
}  

#about-bottom h2{font-size: 24px; margin-bottom: 50px}

#about-bottom{background: none; padding: 80px 0}  
    
    #about-bottom ul li > div {
        padding: 0;
        width: 100%;
    }
    
 #about-bottom ul li h3{font-size: 24px}
 #about-bottom ul li p{font-size: 16px;}   
 
#about-bottom > h5{font-size: 14px} 
#about-bottom > h3   {font-size: 24px; } 
#about-bottom > h5{margin-top: 50px}    

#about-bottom > p{margin-top: 30px; word-break: keep-all; font-size: 18px}
 
#about-bottom > section{margin-top: 50px} 

#product .container > h2{font-size: 24px}


#product-detail-top-wrap > span{display: none}
    
#product-detail-content h2,
#product-related section h2, #product-detail-review > section > h2,
h2.detail_title, #tatata-detail-header h2   {font-size: 24px}
    
#notice > h2, #ctt h2, #tatata > h2,
#gallery_new > h2 {
        font-size: 24px;
    }    
    
    
#product-related section ul li img{max-width: 10px}    
   
#product-detail-review > section > a{font-size: 14px; padding: 10px 25px}   
    
#product-detail-review-list > section > article > dd > img{width: 80px; height: 80px}    
  
#product-detail-review-list > section > div > a{font-size: 14px; margin-top: 20px}  
    
#product-detail-review-list > section > article{padding: 20px 0}    
    
#product-detail-review-list > section{padding: 0 0 20px}    
#product-detail-review-list > section > article > div > h6{font-size: 14px; line-height: 1.4; word-break: keep-all; margin-top: 5px}    
#product-detail-review-list > section > article > div > h5{font-size: 16px}    
  
#notice.container, #notice_detail.container, #gallery_new.container, #gallery_new_detail.container{padding: 80px 25px}  
    
    
#column-detail-header > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}    

#column-detail-header-back{top: 25px}
  
#tatata .tatata_list > div > h3{font-size: 24px;}  
#tatata .tatata_list > div{gap:20px}
#tatata .tatata_list > div > p{font-size: 16px}


    #tatata .tatata_list img {
        max-width: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 16 / 9;
        border-radius: 10px;
    }
    
#tatata_bottom{margin-top: 50px}    
#tatata_bottom a:first-child{display: none}    

#tatata_bottom a{gap:10px}
    
    #tatata_bottom a:last-child {
        padding: 15px 35px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        height: auto;
        text-align: center; gap:5px;
        border-radius: 10px
    }  
    
 #tatata_bottom a:last-child span.mid{display: none}    
    

#product #column-list h4, #tatata #tatata-movie-list p, #bo_gall .bo_tit{font-size: 16px;
white-space: nowrap;    /* 텍스트가 한 줄로만 표시되도록 설정 */
  overflow: hidden;       /* 넘치는 텍스트를 숨김 처리 */
  text-overflow: ellipsis; /* 넘칠 때 '...'으로 표시 */}
    
#bo_gall .gall_img{border-radius: 5px; height: auto !important}    
#tatata #tatata-movie-list li img,
#bo_gall .gall_img img, #bo_gall .gall_img video{border-radius: 5px}


#review-input-wrap h2{font-size: 24px}
  
#review-input-wrap #btn-review{font-size: 16px; padding: 15px 25px; width: 100%}  
  
.pg_wrap{margin-top: 50px}  
    
#main-3 .product div p, #main-3 .new div p{font-size: 18px}    
    
    #main-3 .review ul li img{width: 100px}
    
    #main-3 .review ul li a > div{width: calc(100% - 100px)}
    
    
}



@media (max-width: 360px) {


 
 
}