@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Shrikhand&display=swap');

body{
    font-family:Pretendard;
}

.shrikhand {
    font-family: "Shrikhand", serif;
}

#container_wr{
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    display: block;
   
}

#container_wr.container_wr_top{
    padding-top:120px;
}

#container{
    width:100%;
    max-width:1920px;
    float:none;
    margin:0 auto;
}

.container{
    width:100%;
    max-width:1920px;
    margin:0 auto;
}

#main-1{
    background:#FFF9F0;
    
}

#main-1 img.bg_main{width: 100%; height: 100%; object-fit: cover;}

#main-1 .container{
    position:relative;
    height: 100vh;overflow: hidden
}

#main-1 .container > div{
    position:absolute;
    top:120px;
    width:100%;
    display:flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
}

#main-1 .container > div > section p{
    font-family: "Shrikhand", serif;
    font-size:120px;
    color:#8C52FF;
    text-shadow: 5px 5px #FFDE59;
    text-align:center;
}

#main-1 .container > div > h2{
    text-align:center;
    font-family: Pretendard;
    font-size: 30px;
    font-weight: 800;
    color:#000;
    margin-top:30px;
}

#main-2{
    padding-top:200px;
}

#main-2 h3{
    color: #1D1D1D;
text-align: center;
font-family: Montserrat;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: normal;
text-transform: uppercase;
}

#main-2 ul{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:70px;
    flex-wrap: wrap;
}

#main-3{
    padding-top:330px;
    padding-left:150px;
    padding-right:150px;
    display:flex;
    gap:50px;
        align-items: flex-start;
}

#main-3 .product {
    position: sticky;
    top: 130px;
    left: 0;
    max-width: 500px;
    width: 100%
}

#main-3 h2{
    color: #1D1D1D;
font-family: Montserrat;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin-bottom:50px;
}

#main-3 .main-3-right{
    display:flex;
    flex-wrap:wrap;
    gap:50px;
    width: calc(100% - 50px)
}

#main-3 .main-3-right > div{
    width:calc(50% - 50px);
}


#main-3 .main-3-right > div.news{max-width: 500px}

#main-3 .product  div, #main-3 .new  div{
    position:relative;
}

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

#main-3 .product  div  p,#main-3 .new  div  p{
    position:absolute;
    left:50px;
    bottom:60px;
    color:#FFF;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

#main-3 .review ul{
    display:flex;
    flex-direction: column;
    row-gap:10px;
    width: 100%;
    max-width: 500px
}

#main-3 .review ul li{width: 100%}

#main-3 .review ul li a{
    display:flex;
    column-gap:40px;
    align-items: center;
    width: 100%;
}

#main-3 .review ul li img{
    width:175px;
    height:135px;
    object-fit:cover;
    border-radius:15px;
}

#main-3 .review ul li  div{flex:1; width: calc(100% - 175px - 40px)}

#main-3 .review ul li h3{
    color: #333;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
white-space: nowrap;
overflow: hidden;
    text-overflow: ellipsis;
}

#main-3 .review ul li p{
    color: #666;
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top:10px;
white-space: nowrap;
overflow: hidden;
    text-overflow: ellipsis;
}

#main-4{
    padding-top:400px;
    padding-left:150px;
    padding-right:150px;
}

#main-4 h4{
    color: #666;
    text-align: center;
    font-family: Pretendard;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

#main-4 h3{
    color: #1D1D1D;
text-align: center;
font-family: Pretendard;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: normal;
text-transform: uppercase;
margin-top:15px;
}

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

#main-4 li{
    position:relative;
    border-radius: 30px; overflow: hidden;
    width: calc(33.33%)
}

#main-4 li img{max-width: 100%;
width: 100%; height: 100%;object-fit: cover;
    aspect-ratio: 16 / 9;}


#main-4 li > div{
    position:absolute;
    left:40px;
    bottom:60px;
}

#main-4 li > div > span{
    border-radius: 40px;
    background: #E33529;
    padding:6px 15px;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -1px;
    text-transform: uppercase;
    display:inline-block;
}

#main-4 li > div > p{
 color:white;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top:27px;
}

.btn-more{
    color: #1D1D1D;
text-align: center;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
padding:27px 55px;
border-radius: 80px;
border: 2px solid #000;
background: #FFF;
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.50);
display:inline-block;
}

#main-4 .btn-more{
    margin-top:70px;
}

#main-4 > div{
    text-align:center;
}

#main-6{
    background-color:#F6F6F6;
    margin-top:300px;
}

#main-6 > img{
    width:100%;
}

#main-6 #main-6-content-wrap{
    padding-top:200px;
    padding-left:150px;
    padding-right:150px;
    padding-bottom:400px;
    display:flex;
    gap:130px;
}

#main-6 #main-6-content-wrap > div{
    flex-grow:1;
    padding-top:100px;
}

#main-6 #main-6-content{
    display:flex;
    justify-content: space-between;
}

#main-6 #main-6-content ul{
    display:flex;
    gap:7px;
    margin-top:10px;
}

#main-6 #main-6-content h5{
    color: #8C52FF;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
}

#main-6 #main-6-content h2{
    color: #231815;
font-family: Pretendard;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -1px;
text-transform: capitalize;
margin-top:27px;
}

#main-6 #main-6-content-wrap > div p{
    color: #333;
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 27px; /* 150% */
text-transform: capitalize;
margin-top:45px;
}

#main-6 #main-6-content-wrap > div .btn-more{
    margin-top:65px;
}

footer{
    z-index:2;
    position:relative;
    margin-top:-100px;
}

footer > img{
    width:100%;
}

footer > section{
    background-color:#111;
    padding-left:150px;
    padding-right:150px;
    padding-top:120px;
    padding-bottom:50px;
}

footer #footer-content{
    display:flex;
    justify-content: space-between;
}

footer #footer-content #footer-left{
    display:flex;
    gap:120px;
}

footer #footer-content #footer-left ul{
    display:flex;
    gap:20px;
}

footer #footer-content #footer-left > div h5{
    color: rgba(255,255,255,0.2);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin-bottom:14px;
}

footer #footer-content #footer-left > div p{
    margin-top:14px;
    color: #AAA;
font-family: Pretendard;
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
}

footer #footer-content #footer-left > div p > span{
    color:rgba(255,255,255,0.3);
    margin-left:10px;
    margin-right:10px;
}

footer .container > p{
    color: rgba(255,255,255,0.2);
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top:150px;
text-align:center;
}

footer #footer-right{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-end;
}

footer #footer-right a{
    padding:18px 40px;
    color: #FFF;
font-family: Pretendard;
font-size: 17px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
display:inline-block;
border-radius: 55px;
background: #000;
}

header#header{
    position:fixed;
    width: 100%;
    z-index: 1000;
    transition-duration: .5s;
    top: 0; 
    left: 0
}

header#header.drop{background: #FFF9F0;}

header#header .container{
    padding-left:150px;
    padding-right:150px;
    padding-top:24px;
    padding-bottom:24px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

header#header .container > ul{
    display:flex;
    gap:20px;
    
}

header#header .container > ul > li{
    color: #111;
text-align: center;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
position: relative;
padding:20px 30px;
}


#header .container > ul > li > ul {
   
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    padding: 0;
    margin: 0;
    list-style: none;
    border-radius : 20px; 
    border:2px solid transparent;
    background:#fff;
    font-size: 18px;
    width:max-content;
    visibility: hidden; overflow: hidden; height: 0; max-height: 0;
    transition-duration: .5s; opacity: 0;
    left: 50%;
    transform: translateX(-50%);
}

#header .container ul > li:hover > ul {
    visibility: visible; height: auto; max-height: 250px; visibility: visible;  
    border:2px solid #111; opacity: 1

}

#header .container ul >li> ul> li {
    padding: 10px;
    
}

#header .container ul> li> ul> li> a {
    color: black;
    text-decoration: none;
}

header#header .container > div{
    display:flex;
    gap:40px;
    align-items: center;
}

section#menu{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: #F8F1E5;
    z-index:9999;
}

section#menu #close_btn{
    margin-top:24px;
    position: relative;
    z-index: 2
}
 
section#menu > .container{
    padding:0;
    padding-left: 150px;
    padding-right: 150px;
    display: flex;
    justify-content: flex-end;
}

#menu-wrap{
    width:calc(100% - 180px);
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

#menu-wrap > section{
    transition:all 0.3s;
    margin-bottom:30px;
}

#menu-wrap > section > article{
    display:flex;
    margin-bottom:30px;
}   

#menu-wrap > section > article > a{
    color: rgba(35, 24, 21, 0.2);
font-family: Montserrat;
font-size: 60px;
font-style: normal;
font-weight: 600;
line-height: 108px; /* 180% */
letter-spacing: -1px;
text-transform: capitalize;
display:inline-block;
width:420px;
}

#menu-wrap > section:hover > article > a,
#menu-wrap > section > article > a:hover{
    color: #231815;
}

#menu-wrap > section > article > ul{
    display:flex;
    gap:50px;
    align-items:center;
}

#menu-wrap > section > article > ul > li > a{
    color: #231815;
    font-family: Pretendard;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    opacity:0.2;
}

#menu-wrap > section > article > ul > li > a:hover{
    opacity:1;
    color:#8C52FF;
}

#menu-wrap > section::after{
    display:block;
    width:100%;
    height:8px;
    content:"";
    background:url('../img/sub/top_repeat_off.png') ;
}

#menu-wrap > section:hover::after{
    background:url('../img/sub/top_repeat.png') ;
}



#aboutus .container{
    padding-left:150px;
    padding-right:150px;
    padding-bottom: 100px
}

#aboutus{
    padding-top:150px;
}

.breadcrumb ul{
    display:flex;
    gap:16px;
    align-items: center;
    justify-content: center;
}

.breadcrumb ul li a{
    color: #D9D9D9;
text-align: center;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

.breadcrumb ul li.separator{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D9D9D9;
}

.about-title{
    color: #8C52FF;
text-align: center;
font-family: Shrikhand;
font-size: 80px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top:35px;
}

.about-subtitle{
    color: #1D1D1D;
text-align: center;
font-family: Montserrat;
font-size: 30px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin-top:24px;
}

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

img#aboutus-top{
    margin-top:120px;
}






p#aboutus-top-text{
    color: #222;
text-align: center;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 36px; /* 150% */
margin-top:100px;
}

#about-middle{
    
    padding-top:200px;
}

#about-middle > div{
    display:flex;
    align-items: center;
    justify-content: center;
    gap:100px;
}


#about-middle > div img{max-width: 100%; }

#about-middle > div >  img:nth-child(2){
    margin-top:140px;
}

#about-middle > p{
    color: #222;
text-align: center;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 36px; /* 150% */
margin-top:100px;
}

#about-middle section{
    text-align:center;
    margin-top:100px;
}

#about-bottom{
    background-image:url('../img/sub/aboutus_bottom_bg.png');
    background-size:cover;
    padding-top:270px;
    padding-bottom:250px;
    padding-left:150px;
    padding-right:150px;
}

#about-bottom h2{
    color: #1D1D1D;
text-align: center;
font-family: Montserrat;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin-bottom:65px;
}

#about-bottom ul{
    display:flex;
    flex-direction: column;
    gap:40px;
}

#about-bottom ul li{
    display:flex;
    border-radius: 200px;
background: #F9F9F9;
align-items: center;
}

#about-bottom ul li img{border-radius: 200px}


#about-bottom ul li > div{
    flex-grow:1;
    padding-left:120px;
    width: 50%;
}



#about-bottom ul li h3{
    color: #8C52FF;
font-family: Montserrat;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

#about-bottom ul li p{
    color: #222;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top:20px;
line-height:1.5;
}

#about-bottom > h5{
    color: #666;
text-align: center;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
margin-top:200px;
}

#about-bottom > h3{
    color: #1D1D1D;
text-align: center;
font-family: Pretendard;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: normal;
text-transform: uppercase;
margin-top:15px;
}

#about-bottom > p{
    color: #222;
    text-align: center;
    font-family: Pretendard;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px; /* 150% */
    margin-top:65px;
}

#about-bottom > section{
    text-align:center;
    margin-top:100px;
}

#product{
    padding-top:150px;
    padding-bottom:250px;
}

#product .container{
    padding-left:150px;
    padding-right:150px;
}

#product .container >  h2{
    color: #1D1D1D;
text-align: center;
font-family: Montserrat;
font-size: 60px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top:35px;
}



ul.categorys{
    margin-top:100px;
    display:flex;
    justify-content: center;
    gap:20px;
}

ul.categorys li a{
    color: #1D1D1D;
    text-align: center;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    padding:24px 44px;
    border-radius: 80px;
    border: 2px solid #000;
    background: #FFF;
    transition:all 0.3s;
    display:inline-block;
}

ul.categorys li.on a{
    border: 2px solid  #8C52FF;
    background: #8C52FF;
    color:white;
}

ul.categorys li:hover a{
    border: 2px solid  #8C52FF;
    background: #8C52FF;
    color:white;
}

#product #product-list{
    margin-top:100px;
    display:flex;
    gap:60px;
    flex-wrap:wrap;
}

#product #product-list li{
    position:relative;
    border-radius:15px;
    width:calc(33.333% - 40px);
}

#product #product-list li a{
    display:block;
}

#product #product-list li a > img{
    width:100%;
    
}

#product #product-list li a > div{
    position:absolute;
    background-color:rgba(140, 82, 255, 0.9);
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
    gap:15px;
    opacity:0;
    transition:all 0.3s;
    cursor:pointer;
}

#product #product-list li:hover a > div{
    opacity:1;
}

#product #product-list li a > div > p{
    color:white;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#product #product-list li a > div > h4{
    color:white;
    font-family: Pretendard;
    font-size: 34px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

#product #pagination{
    margin-top:80px;
}

#pagination{
    display:flex;
    gap:5px;
    justify-content: center;
}

#pagination li{
    border-radius: 5px;
border: 1px solid #EDEDED;
background: #FFF;
width:32px;
height:32px;
color: #313131;
font-family: Pretendard;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
transition: all 0.3s;
}

#pagination li a{
    width:32px;
    height:32px;
    display:block;
    display:flex;
justify-content:center;
align-items:center;
}

#pagination li.on{
    background: #8C52FF;
}

#pagination li.on a, #pagination li:hover a{
    color:white;
}

#pagination li:hover{
    background: #8C52FF;
    color:white;
}

#product-detail{
    padding-top:30px;
    padding-bottom:200px;
}

#product-detail-top-wrap{
    position:relative;
}

#product-detail-top img{
    margin-left:10px;
    margin-right:10px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

#product-detail-top-wrap > span{
    position:absolute;
    transition:all 0.3s;
    color: #FFF;
    text-align: center;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    padding:10px 20px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.50);
}

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

#product-detail-youtube{
    width:1080px;
    height:640px;
}



#product-detail-header-box{
    border-radius: 15px;
    border: 1px solid #DDD;
    background: #FFF;
    padding:60px 40px 50px 40px;
    width:calc(100% - 1120px);
    position: sticky;
    top: 130px;
    right: 0;
}

#product-detail-header-box span{
    color: #fff;
font-family: Pretendard;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -1px;
text-transform: uppercase;
padding:8px 16px;
border-radius: 40px;
background: #222;
display:inline-block;
}

#product-detail-header-box h2{
    color: #222;
font-family: Pretendard;
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-top:40px;
}

#product-detail-header-box p{
    color: #222;
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 177.778% */
margin-top:40px;
}

#product-detail-header-box a{
    border-radius: 80px;
background: #8C52FF;
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.50);
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
padding-top:28px;
padding-bottom:28px;
display:block;
margin-top:60px;
}


.product_detail_info{max-width: 1040px}
#product-detail .container{
    padding-left:150px;
    padding-right:150px;
}

#product-detail-content{
    padding-top:100px;
    
}

#product-detail-content img{max-width: 100%}


#product-detail-content h2{
    color: #1D1D1D;
font-family: Pretendard;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin-bottom:50px;
}

#product-related section{
    display:flex;
    justify-content: space-between;
    align-items:center;
}

#product-related section h2{
    color: #1D1D1D;
font-family: Pretendard;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: normal;
}

#product-related section ul{
    display:flex;
    gap:35px;
}

#product-related section ul li{
    cursor:pointer
}

#product-related-list{
    margin-top:100px;
    display:flex;
    gap:60px;
    flex-wrap:wrap;
}

#product-related-list li{
    position:relative;
    margin-left:10px;
    margin-right:10px;
}

#product-related-list li a{
    display:block;
}

#product-related-list li a > img{
    width:100%;
    
}

#product-related-list li a > div{
    position:absolute;
    background-color:rgba(140, 82, 255, 0.9);
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
    gap:15px;
    opacity:0;
    transition:all 0.3s;
    cursor:pointer;
}

#product-related-list li:hover a > div{
    opacity:1;
}

#product-related-list li a > div > p{
    color:white;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#product-related-list li a > div > h4{
    color:white;
    font-family: Pretendard;
    font-size: 34px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

#product-detail-review{
    padding-top:100px;
}

#product-detail-review > section > h2{
    color: #1D1D1D;
font-family: Pretendard;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: normal;
}

#product-detail-review > section{
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding-bottom:30px;
    border-bottom:2px solid #222;
}

#product-detail-review > section > a{
    color: #1D1D1D;
text-align: center;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
border-radius: 10px;
border: 2px solid #222;
background: #FFF;
padding:28px 52px;
}

#product-detail-review-list > section{
    padding-bottom:40px;
    border-bottom:1px solid #ddd;
}

#product-detail-review-list > section > article{
    padding-top:40px;
padding-bottom:40px;
display:flex;
justify-content: space-between;
}

#product-detail-review-list > section > article > dd{
    position:relative;
}

#product-detail-review-list > section > article > dd > span{
    color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
padding:6px 10px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.50);
position:absolute;
bottom:5px;
right:5px;
}

#product-detail-review-list > section > article > dd > img{
    width:150px;
    height:150px;
    object-fit: cover;
}

#product-detail-review-list > section > article > div > div{
display:flex;
align-items:center;
gap:10px;
}

#product-detail-review-list > section > article > div > div > ul{
    display:flex;
    align-items:center;
    gap:5px;
}

#product-detail-review-list > section > article > div > div > p.score{
    color: #222;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 1.5;
}

#product-detail-review-list > section > article > div > div > p.separator, 
#product-detail-review-list > section > article > div > div > p.name{
    color: #666;
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 1.5;
}

#product-detail-review-list > section > article > div > div > p.separator{
    margin-left:10px;
    margin-right:10px;
}

#product-detail-review-list > section > article > div > h5{
    color: #222;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-top:27px;
}

#product-detail-review-list > section > article > div > h6{
    color: #222;
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 177.778% */
margin-top:13px;
width: 95%;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical
}

#product-detail-review-list > section > article > div > h6.active{
    text-overflow:initial;
    overflow:visible;
    display: -webkit-box;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
}

#product-detail-review-list > section > div{
    text-align:right;
}

#product-detail-review-list > section > div > a{
    color: #222;
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
display:flex;
gap:10px;
align-items: center;
justify-content: flex-end;
cursor:pointer;
}

.review_detail_img_list{
    display:none;
}

.review_detail_img_list.open{
    display:block;
}

.review_detail_img_list img{
    max-width:100%;
    margin-top:20px;
    display:block;
}

#product-detail-review #pagination{
    margin-top:80px;
}

#review{
    padding-top:150px;
    padding-bottom:150px;
}

#review .container{
    width:800px;
}

#review-input-wrap h2{
    color: #1D1D1D;
    text-align: center;
    font-family: Pretendard;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top:35px;
    margin-bottom:50px;
}

#review-input-wrap div.input > p{
    color: #1D1D1B;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px; /* 138.889% */
    margin-bottom:10px;
}

#review-input-wrap div.input > p > span{
    color: #FF0004;
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 25px;
}

#review-input-wrap div.input{
    margin-top:40px;
}

#review-input-wrap div.input input[type="text"]{
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px; /* 138.889% */
    padding:18px 22px;
    width:100%;
    border-radius: 5px;
    border: 1px solid #DDD;
    background: #FFF;
}



#review-input-wrap div.input .rating{
    display:flex;
    gap:10px;
}

#review-input-wrap div.input .rating li{
    cursor:pointer;
}

#review-input-wrap div.input textarea{
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px; /* 138.889% */
    padding:18px 22px;
    width:100%;
    border-radius: 5px;
    border: 1px solid #DDD;
    background: #FFF;
    height:300px;
}

#review-input-wrap div.input .filelist{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

#review-input-wrap div.input .filelist .file_added ul{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

#review-input-wrap div.input .filelist .file_added img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius: 5px;
    border: 1px solid #DDD;
}

#review-input-wrap > section{
    text-align:center;
    margin-top:50px;
}

#review-input-wrap #btn-review{
    color: #1D1D1D;
text-align: center;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: capitalize;
padding:28px 100px;
border-radius: 80px;
border: 2px solid #000;
background: #FFF;
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.50);
}

#product #column-list{
    margin-top:100px;
    display:flex;
    gap:60px;
    flex-wrap:wrap;
}

#product #column-list li{width: calc(33.33% - 39.99px)}
#product #column-list li img{max-width: 100%;
aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;}



#product #column-list h4{
    color: #1D1D1D;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 800;
line-height: normal;
text-transform: capitalize;
margin-top:30px;
 white-space: nowrap;    /* 텍스트가 한 줄로만 표시되도록 설정 */
  overflow: hidden;       /* 넘치는 텍스트를 숨김 처리 */
  text-overflow: ellipsis; /* 넘칠 때 '...'으로 표시 */
}

#column-detail-content p{font-size: 18px; line-height: 1.4}

#column-detail-header{
    position:relative;
}

#column-detail-header > img{
    width:100%;
}

#column-detail-header .container{
    padding-left:150px;
    padding-right:150px;
    position:absolute;
    top:0;
    height:100%;
}

#column-detail-header .container > div{
    position:absolute;
    bottom:100px;
    display:flex;
    flex-direction: column;
    gap:35px;
    align-items: flex-start;
}

#column-detail-header .container > div h2{
    color: #FFF;
text-align: center;
font-family: Pretendard;
font-size: 60px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

#column-detail-header .container > div p{
    color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

#column-detail-header-back{
    position:absolute;
    top:40px;
}

#column-detail > .container{
    padding-left:150px;
    padding-right:150px;
    padding-top:110px;
    padding-bottom:200px;
}

#column-detail-slider #slider li{
    margin-left:10px;
    margin-right:10px;
}

#column-detail-slider #slider li img{width: 100%}

#column-detail-slider #slider .slick-prev{
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    z-index:100;
}

#column-detail #column-detail-slider{
    position:relative;
}

#column-detail #column-detail-slider > div{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    justify-content:space-between;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

#column-detail #column-detail-slider > div img{
    cursor:pointer;
}

#column-detail-content{
    margin-top:100px;
}

#column-btn-back-wrap{
    text-align:center;
    margin-top:200px;
}

#column-btn-back{
    color: #1D1D1D;
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal; 
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    padding:28px 100px;
    border-radius: 80px;
    border: 2px solid #000;
    background: #FFF;
    box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.50);   
}

#tatata{
    padding-top:150px;
    padding-bottom:200px;
}

#tatata > h2{
    color: #1D1D1D;
text-align: center;
font-family: Pretendard;
font-size: 60px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top:35px;
}

#tatata .container{
    padding-left:150px;
    padding-right:150px;
}

#tatata .tatata_list{
    padding-top:100px;
}

#tatata .tatata_list img{border-radius: 30px; max-width: 100%}

#tatata .tatata_list > div{
    margin-top:100px;
    display:flex;
    flex-direction: column;
    gap:30px;
    padding-left:70px;
    padding-right:70px;
}

#tatata .tatata_list > div > h3{
    color: #1D1D1D;
font-family: Pretendard;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: normal;
}

#tatata .tatata_list > div > h3 > span{
    color: #8C52FF;
}

#tatata .tatata_list > div > p{
    color: #222;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 150% */
}

#tatata #tatata-movie-list{
    margin-top:100px;
    display:flex;
    gap:60px;
    flex-wrap:wrap;
}

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

#tatata #tatata-movie-list li img{
    border-radius:15px;
    width:100%;
}

#tatata #tatata-movie-list p{
    color: #1D1D1D;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 800;
line-height: normal;
text-transform: capitalize;
margin-top:30px;
}

#tatata-detail{
    padding-top:150px;
    padding-bottom:200px;
}

#tatata-detail .container{
    padding-left:150px;
    padding-right:150px;
}

#tatata-detail-header{
}

#tatata-detail-header::after{
    margin-top:100px;
    display:block;
    width:100%;
    height:8px;
    content:url('../img/sub/top.png');
}

#tatata-detail-header h2{
    color: #1D1D1D;
text-align: center;
font-family: Pretendard;
font-size: 60px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

#tatata-detail #tatata-detail-content::after{
    margin-top:100px;
    display:block;
    width:100%;
    height:8px;
    content:url('../img/sub/bottom.png');
}

#tatata-detail-header p{
    color: #D9D9D9;
text-align: center;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-top:35px;
}

#tatata-btn-back-wrap{
    text-align:center;
    margin-top:200px;
}

#tatata-btn-back{
    color: #1D1D1D;
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal; 
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    padding:28px 100px;
    border-radius: 80px;
    border: 2px solid #000;
    background: #FFF;
    box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.50);   
}



#tatata-detail #tatata-detail-youtube{
   position:relative;
  height:0;
  padding-bottom:56.25%;
   margin-top:100px;
}

#tatata-detail #tatata-detail-youtube iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

#tatata-detail #tatata-detail-content{
    margin-top:100px;
}

#main-5{padding-top: 200px}

#main-5 .container{
    padding-left:150px;
    padding-right:150px;
}

#main-5 .container > h2{
    color: #1D1D1D;
    font-family: Pretendard;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom:60px;
}

#main-5 .container #main-5-btn-wrap{
    display:flex;
    justify-content: center;
    margin-top:50px;
}

.foot_sns{
    cursor:pointer;
    position:fixed;
    
    right:50px;
    z-index:1001;
    top: 50%;
    transform: translateY(-50%);
}
.foot_sns a{display: block; }
.foot_sns a + a{margin-top: 10px}

#btn-top{
    cursor:pointer;
    position:fixed;
    bottom:50px;
    right:50px;
    z-index:1001;
}

#tatata_bottom{
    display:flex;
    align-items: center;
    gap:20px;
    justify-content: center;
    margin-top:150px;
}

#tatata_bottom a{
    border-radius: 80px;
border: 2px solid #000;
background: #FFF;
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.50);
color: #1D1D1D;
text-align: center;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
}

#tatata_bottom a:first-child{
    padding:25px;
}

#tatata_bottom a:last-child{
    padding:28px 50px;
}