/*.main*/
.main{height: 100vh;}
.main img,
.main video{width:100%; height:100%;object-fit: cover;}
.main .bg{
    position: absolute;top:0;left:0;width:100%; height:100%;
}
.main .bg1{
background-image: linear-gradient(0deg,black,transparent 50%);

}
.main .bg2{background-image: url(img/pattern.png);
opacity: 0.4;}
.main .text-box{
    position: absolute;bottom:60px;left:50%;color:white;
    transform: translate(-50%,0);text-align: center;
}
.main .text-box h1{margin-bottom: 30px;}
.main .text-box h6{opacity: 0.8;}

/*.section1*/
.section1{padding-top: 100px;padding-bottom: 120px;}
.section1 .container{
    display: grid; grid-template-columns: 1fr 1fr; gap:20px;
}
.section1 .item{}
.section1 .item img{filter: brightness(0.7) grayscale(0.1);}
.section1 .bg{position: absolute;top:0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(140deg,black,transparent);}
.section1 .text-box{
    color:white;
    position: absolute;top:0;left:0;padding:50px;
}
.section1 h3{margin-bottom: 20px;}
.section1 p{margin-bottom: 20px;}
@media(max-width:800px){
    .section1 .container{grid-template-columns: 1fr;}
    .section1 .text-box{padding: 30px;}
}


/*.section2*/
.section2{
    background-image: url("img/2-bg.png");
    background-size: cover;
    background-attachment: fixed;}
.section2 .container{}
.section2 .item{width:50%;background-color: white;
    padding: 30px;box-sizing: border-box;}
.section2 .text{
    position: absolute;left:calc(100% + 10px);top:10px;
 color:white;
    writing-mode: vertical-lr;
    text-transform: uppercase;
    font-weight: 700;
}
.section2 h2{font-size: 60px;margin-bottom: 40px; color: #bfbfbf; line-height: 65px}
.section2 .btn{background-color: black;color: white;margin-top: 20px;}
@media(max-width:1000px){
    .section2{padding: 20px 0;}
    .section2 .item{width:100%;}
    .section2 .text{display: none;}
}


/*.section3*/
.section3{padding-top: 100px;}
.section3 .section-title{margin-bottom: 30px;}
.section3 .container{
    display: flex;justify-content: center;
    text-align: center;padding-bottom: 10px;
}
.section3 .item img{width: 100px;}
.section3 .img-box{margin-bottom: 10px;}
.section3 .item {}
@media(max-width:1000px){
    .section3 .container{
        justify-content: flex-start;
        overflow: auto;
    }
}


/*.section4-새로운 아이템*/
.section4{padding-top:120px;padding-bottom: 120px;}
.section4 .container{
    display:grid;grid-template-columns: 1fr 1fr 1fr;gap:20px;}
.section4 .item{margin-bottom:30px;}
.section4 .img-box{margin-bottom: 16px;}
.section4 .img-box .bg{
    position: absolute;top:0;left:0;width:100%; height:100%;
    background-image: linear-gradient(0deg,rgba(0,0,0,.8),transparent);
    opacity: 0;
}
.section4 .img-box .size-group{
    position: absolute;left:0;bottom:70px;color:white;
    display: flex;justify-content: center;
    width: 100%;gap:10px;
    flex-wrap: wrap;
}
.section4 .img-box .size{
    display: block;
    font-size: 20px;
    width:36px;height: 36px;line-height: 36px;text-align: center;
    border-radius: 50%;
}
.section4 .img-box .size.active{border:1px solid rgba(255,255,255,0.8);}
.section4 .img-box .size.del::before{
    content: '';
    display: block;width: 100%;height:1px;background-color: white;
    position: absolute;left: 0;top:50%;
}
.section4 .img-box .cart-btn{
    position: absolute;left: 0;bottom: 0;
    width:100%;height:50px ;
    background-color: black;
    display: flex;align-items: center;justify-content: center;
    color: white;;
}
.section4 .img-box:hover .bg{opacity: 1;}

.section4 .price {margin-top: 24px;}
.section4 .price .num2{
    text-decoration: line-through;opacity: 0.6;}
.section4 .color-group{display: flex;gap:6px; margin-bottom: 20px;}
.section4 .color{display: block;width:16px; height:16px;border-radius: 50%; background-color: #999999;}
.section4 .color1{background-color: #000000;
box-shadow: 0 0 0 2px white ,0 0 0 3px #999999 ;
}
.section4 .color2{background-color:#786c58;}
.section4 .color3{background-color: #99b2cc;}
.section4 .color4{background-color: #d7d7b9;}
.section4 .color5{background-color: #d7d7b9;}
.section4 .color6{background-color: #ffffff;
    box-shadow: 0 0 0 1px #dddddd;
}

@media(max-width:800px){
    .section4 .container{grid-template-columns: 1fr 1fr;}
}

/*.section5*/
.section5{}
.section5 .desk{}
.section5 .mobile{display: none;}
@media(max-width:700px){
    .section5 .desk{display: none;}
    .section5 .mobile{display: block;}
}
/*.section6*/

.section6{padding-top: 100px;padding-bottom: 100px;}
.section6 .container{display: grid;grid-template-columns: 1fr 1fr;gap:20px;}
.section6 .text-box{
    position: absolute;bottom: 10px;left:10px;
    color:white;
}
/*.section7*/
.section7{padding-top: 100px;padding-bottom: 100px;background-color: #f2f2f2}
.section7 .container{display: flex;justify-content: center;gap:30px}

.section7 .item{text-align: center;}
.section7 .item img{width:60px;margin-bottom:8px;}
/*.section8*/
/*.section9*/
.section9{padding-bottom: 150px; padding-top: 100px}
.section9 .container{
    display: grid;grid-template-columns: 1fr 1fr 1fr;gap:20px;
}
.section9 .text-box{
    padding: 8px 0;
}
.section9 .text-box h4{margin-bottom: 8px;}
.section9 .text-box p{
    display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;
}

.section9 .item{display: flex;flex-direction: column;}
.section9 .item2 .img-box{order: 2;}
.section9 .item2 .text-box{order: 1;}
.section9 .text-box{border-bottom: 1px solid #bbbbbb;}
.section9 .item2 .text-box{border-bottom: none; border-top: 1px solid #bbbbbb;;}

@media(max-width:800px){
    .section9 .container{grid-template-columns: 1fr;}
    .section9 .item2 .img-box{order: 1;}
    .section9 .item2 .text-box{order: 2;}
    .section9 .item .text-box{border-bottom: 1px solid #bbbbbb;;
    border-top: none;}
}


.section10{background-color: pink;}
.section10 video{position: absolute;top:0;left:0;width:100%;height:100%;object-fit: cover;opacity: 0.5}
.section10 .item{margin: 0 auto;
    padding: 20px 0;
background-image: url(img/10-bg-white.png);
background-repeat: no-repeat;background-position: center center;
    text-align: center;
}
.section10 h4{margin-bottom: 20px;}