.group1{display: grid; grid-template-columns: auto auto;}

.group1 .title-std {text-align: start;font-size:21px;line-height: 45px;padding-bottom:20px}
.group1 .comment p{text-align: start;font-size:13px;line-height: 38px;padding-bottom:60px}
.group1  img{max-width: 99%;padding-top:20px}

.title-shop{height: 478px;}
.title-shop2::before{background:#DDDDDD;opacity: 0.89;}
.title-shop2{height: 725px;margin-bottom:0}
.sec2{margin-left: 20px;margin-right: 20px;text-align: center;padding-bottom:190px}
.group2{display: grid; grid-template-columns: auto auto auto;column-gap: 50px;}
.group2 .item{z-index: 99;position: relative;}
.group2 .item img{border-radius: 50%;}
.group2 p{text-align: center;padding-top:38px;font-size: 16px;line-height: 21px;} 
.sec2 h2{
    font-size: 43px;position: relative; z-index:99;padding-top:100px;padding-bottom:44px;line-height: 57px;
    letter-spacing: 3px;text-emphasis: center;
}

.title-shop3{height:355px;background:#462831;background: RGBA(70,40,49,.9);background-repeat: no-repeat;
    
    background-position: center;}
#black-rec{
    height: 191px;background: black;width: 1200px;color:#fff;display: grid;grid-template-columns: auto auto;
    z-index: 99;text-align: center;align-items: center;
}
#black-rec h2{font-size: 40px;line-height: 53px;letter-spacing: 3px;}
#black-rec h3{font-size:22px;line-height: 30px;padding-top:10px}
#black-rec .right h2{
    font-size: 18px;
}
#black-rec .right .btn{height: 57px;background: #631E34;width:275px;border-radius:30px}
#black-rec .right .btn:hover{opacity: 0.8;}
.btn{cursor: pointer;}

.sec3{max-width: 100%;}
.sec3 .content{max-width: 100%;;height: 700px;width: 1200px;margin: 0 auto;margin-top:100px}
.sec3 .content .first{
    height: 460px;background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-position: center; 
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    padding-left:60px;
    max-width: 100%;
}

.sec3 .content .first .right{
text-align: center;
padding-right: 60px;
}
.sec3 .content .first .right h1{
font-size: 73px; letter-spacing: 5px; line-height:97px; color:#631E34;

}
.sec3-2 .content .first .right h1{
    color:#361E63;
    
    }

.sec3 .content .first .right h2{
color:#222222;font-size: 31px; line-height: 41px; letter-spacing: 3px;
}
.sec3 .content .first .right .btn{
    
    background:#631E34 ; height: 57px; display: grid; margin:0 auto;
    justify-items: center; align-items: center; color:#fff;
    border-radius:30px;margin-top:20px;max-width: 407px;
}
.sec3-2 .content .first .right .btn{ background:#361E63}
.btn h3{font-size: 18px;}
.btn{box-shadow: 0px 4px rgba(0, 0, 0, 0.2);}
.btn:hover{opacity: 0.8;}


.sec3 .second{max-width:100%;height: 250px;margin-top:50px;display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;grid-gap:60px;}
.sec3 .second .item{ height: 250px; background: #fff;display: grid;align-items: center;justify-items: center;box-shadow: 8px 8px rgba(0, 0, 0, 0.06);}

.sec3-2 .content .second{grid-template-columns: 1fr 1fr 1fr;row-gap: 50px;}

.sec3-2 .content .second .item:nth-child(5){grid-column:3/4}





.sec4{width: 100%;background:#DDDDDD;margin-top:500px;padding-bottom: 160px;}
.sec4 .text{max-width: 1200px;text-align: center;margin: 0 auto;padding-top:105px;padding-bottom:100px;} 
.sec4 .text h2{font-size: 30px;line-height: 40px; letter-spacing: 3px;}
.sec4 .text p{font-size: 16px;line-height: 21px;padding-bottom:20px;max-width: 648px;margin:0 auto}
.sec4 .text .under{margin:0 auto;margin-top:27px;margin-bottom:27px;background: #631E34;height: 5px; width: 30px;}

.sec4 .text:nth-child(1){border-bottom:1px solid #CCCCCC}
.sec4 .package{max-width: 1200px;text-align: center;margin: 0 auto;display: grid; grid-template-columns: auto auto;}
.sec4 .package h2{font-size: 24px; color:#631E34;line-height: 32px; letter-spacing: 3px;padding-bottom:32px;text-align: start;}
.sec4 .package p{font-size: 16px; line-height: 21px; letter-spacing: 3px;text-align: start;}

.sec4 .package .left{display: grid; grid-template-columns: 1fr 1fr; grid-gap:15px;padding-right:30px;padding-bottom:60px}



.sec5{padding-top:163px}
.sec5 .title-shop2::before{background: none;}
.sec5 .title-shop2{margin-top:-185px;height: 465px;}





.in{max-width: 1200px;display: grid; grid-template-columns: auto auto;margin:0 auto;}
.in .btn{background:#631E34;height: 60px;color:#fff;display: grid;align-items: center;justify-items: center;width: 383px;}
.in .right{padding-left:50px;padding-top:60px}
.in .left{padding-top:50px}
.in p{font-size: 16px;line-height: 21px;padding-bottom:30px;}
.in h2{font-size: 30px;line-height: 40px; letter-spacing: 3px;padding-bottom:40px;text-align: center;}

.footer{margin:0}


.sec3-2 .content .second .item:nth-child(4){margin-left:200px;margin-right: -200px;}
.sec3-2 .content .second .item:nth-child(5){margin-right:200px;margin-left: -200px;}





@media only screen and (max-width: 1250px) {

    #black-rec{margin-right: 40px;margin-left:40px;padding-right: 40px;padding-left:40px}
    #black-rec h2{font-size:32px}
    #black-rec h3{font-size:16px}
    #black-rec .right .btn{width:200px}
    #black-rec .right h2{
        font-size: 16px;
    }
    .sec5 .in{margin-left:40px;margin-right: 40px;}
    .in .btn{width: auto;}
}
.sec3-2 .content .second .item:nth-child(4){margin-left:150px;margin-right: -150px;}
.sec3-2 .content .second .item:nth-child(5){margin-right:150px;margin-left: -150px;}

@media only screen and (max-width: 900px) {
    .title-shop {
        height: 60vw;
    }
   
}
@media only screen and (max-width: 800px) {

    #black-rec h2{font-size:22px}
    #black-rec h2{font-size:14px}
    .btn h3{font-size: 12px;}
    .sec3 .content .first .right h1{font-size: 42px;}
    .sec3 .content .first .right h2{font-size: 22px;}
    .sec3 .second{grid-template-columns: 1fr 1fr;margin-left:40px;margin-right: 40px;}
    .sec3{padding-bottom:300px;}
    .sec3-2 .content .second{grid-template-columns: 1fr 1fr;}
    .sec3-2 .content .second .item:nth-child(5){grid-column:1/2}
    .title-shop .title {
        font-size: 2rem;
    }
    .sec3-2 .content .second .item:nth-child(4){margin:0}
.sec3-2 .content .second .item:nth-child(5){margin:0}

}
@media only screen and (max-width: 600px) {
    .group1{display: grid; grid-template-columns: 1fr;}
    .group1 .comment{margin:0px}
    .sec2 h5{font-size: 32px;}
    #black-rec{grid-template-columns: 1fr;height: fit-content;padding-bottom:40px}
    #black-rec .right{grid-template:1/3;justify-self: center;margin-top:20px}

    .sec3-2 .content .second{grid-template-columns: 1fr;}
    .sec4 .package .left{grid-template-columns: 1fr;height: fit-content;}
    .sec4 .package .item{height: fit-content;}
    .sec4 .package .right{padding-bottom:60px}
    .sec4 .package{padding-left:40px;padding-right: 40px;}
    .sec4 .text {padding-right: 40px;padding-left:40px}
    .sec3-2{height: 1600px;}
    .sec3 .content .first{padding-left:20px;padding-right: 20px;}
    .sec3 .content .first .right{padding-right: 0;}
    h1{font-size:34px !important}
    h2{font-size:18px !important}
    .sec3-2 .content .first .right .btn,.sec3 .content .first .right .btn {
      
        width: 280px; position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
    }
    .in{grid-template-columns: 1fr;}
    .in h2{font-size:28px!important}

    .in .right{padding-left:0}
    .sec5 {
        padding-top: 0px;

    }

    .sec3 .content .first .right h1 {
        font-size: 42px;
        line-height: 50px;
    }
    .sec3 .second {
        grid-template-columns: 1fr;
        
        
    }
    .sec3 {height: 1600px;}
    .title-shop .title {
        font-size: 1.5rem !important;
    }
  }