@font-face {
    font-family: 'Binggrae';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
            

            
@font-face {
    font-family: 'HangultuelGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_ten@1.10/HangultuelGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Arya:wght@700&display=swap');


body{ 
   overflow-x: hidden;
}

:root{
    --point-color:#fe794b;
    --sub-color:#f6fdec;
    --accent-color:#ffd375;
}
a, p, h2, h3, li { font-family: "Binggrae";}


header {
    height: 150px;
    width: 60%;
    margin: auto;
    position: relative;
    z-index: 1000;
}

header h1 {
    width: 180px;
    margin: auto;
    padding: 10px;
}
header h1 img { width: 100%;}

nav {
    width: 100%;
    text-align: center;   
    line-height: 35px;
    padding: 10px;
}

#main {
    display: flex;
    justify-content: space-between;
}
#main>li {
    width: 150px;
}
#main>li>a { 
    display: block;
    padding-bottom: 10px;
    transition: 0.2s;
    border-bottom: 0px solid #abdc6a;
}
#main>li:hover>a { font-weight: bold; border-bottom: 5px solid #abdc6a;}


#main .sub {
    display: none;
    width: 100%;
    border: 1.5px solid #e4e4e4;
    background-color: white;
    transition: 1s;
    font-size: 0.9em;
}
#main>li:hover .sub {
    display: block;
}
#main li  .sub li:hover a{
    display: block;
    color: var(--point-color);
    font-weight: bolder;
}

.sns {
    position: absolute;
    top: 30px;
    right: 0;
}
.sns a {
    background-color: grey;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 23px;
    color: white;
    font-size: 0.8em;
    transition: 0.3s;
}
.sns a:hover {
    background-color:var(--point-color);
}
.hamburger { 
    position: absolute;
    top: 15px;
    right: 20px;
    display: none;
}
.hamburger span {
    width: 35px;
    height: 4px;
    background-color: var(--point-color);
    display: block;
    margin: 6px auto;
    transition: all 0.3s ease-in-out;
    border-radius: 2.5px;
  }
  .hamburger span:nth-child(2){background-color: var(--accent-color);width: 30px;}
  
/* 6번 */

#hamburger-6.on {
    transition: all 0.2s ease-in-out;
    transition-delay: 0.4s;
    transform: rotate(45deg);
  }
  
  #hamburger-6.on .line:nth-child(2) {
    width: 0px;
  }
  
  #hamburger-6.on .line:nth-child(1),
  #hamburger-6.on .line:nth-child(3) {
    transition-delay: 0.2s;
  }
  
  #hamburger-6.on .line:nth-child(1) {
    transform: translateY(10px);
  }
  
  #hamburger-6.on .line:nth-child(3) {
    transform: translateY(-10px) rotate(90deg);
  }


@media(max-width: 1400px){
    header {
        width: 80%;
    }

}
@media(max-width: 1000px){
    header {
        width: 100%;
    }
}
@media(max-width: 600px){
    header {
        height: 70px;
    }
        
    header h1 {
        width: 160px;
    }
    .sns {display: none;}
    nav { 
        display: none;
        position: absolute;
        right: 0;
        width: 100%;
        border: 1px solid #e4e4e4 ;
        padding: 0;
    }
    #main {
        display: block;
    }
    #main>li {
        width: 100%;
        background-color: #abdc6a;
        border-bottom: 1px solid white;
    }
    #main>li:hover>a { 
        font-weight: bold; border-bottom: 5px solid #abdc6a;
    }
    #main>li>a { 
        border-bottom: 1px solid #abdc6a;
    }
    
    #main .sub {
        border: 0px;
    }
    #main .sub a { border-bottom: 1px solid #e4e4e4; display: block;}
    .hamburger {display: block;}
}










/* banner----------------------------------------------------- */

.banner{
    height: 700px;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.banner article {

    width: 60%;
    height: 100%;
    margin: auto;
    position: relative;
    z-index: 10;
}

.banner article .text {
    position: absolute;

    top: 100px; left: 50px;
    font-size: 1.5em;
    line-height: 55px;
    animation: anitext 1.5s ;
}
.banner article .text p:nth-child(1) { color: white; font-size: 1.1em;}
.banner article .text h2 { 
    font-weight: bolder;
    font-size: 2.5em;
    color: #7f2100;
}

.banner article .img div{
    position: absolute;
    right: 0;
}
.banner article .img .gam {
    position: absolute;
    right: 50px;
    bottom: 0;
    animation: anigam 1.5s ;
    transition: 0.5s;
}
.banner article .img .wine{
    position: absolute;
    top: 50px;
    animation: aniwine 3s ;
    opacity: 0.8;
}
article .img .wine ul{
    position: absolute;
    right: 0; top: 30%;
    width: 350px;
    text-align: right;
    opacity: 0;
    transition: 1s;
    font-size: 0.8em;
}
article .img .wine ul li:nth-child(1), .wine ul li>h3{
    color: var(--point-color);
    font-weight: bolder;
    font-size: 1.1em;
}
article .img .wine ul button {
    width: 120px;
    height: 30px;
    border-radius: 20px;
    border: none;
    background-color: var(--point-color);
    margin: 15px;
}
article .img .wine ul button:hover{background-color: #abdc6a;}
article .img .wine ul button a {
    color: white; font-weight: bold; 
}
article .img:hover .wine>ul {
    right: 180px;
    opacity: 1;
}
article .img .wine img{
    position: relative;
    right: -70px;
    transform-origin: bottom right;
    transition: 0.5s;
    mix-blend-mode: hard-light;

    animation: onemove 2.5s 1 4s;
    /* animation-delay: 5s; */
}
article .img:hover .gam { right: 100px;}
article .img:hover .wine img {
    transform: rotate(5deg);
    /* animation: infinite; */
}


@keyframes onemove {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(2deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(2deg);}
    100% {transform: rotate(0deg);}
}



@keyframes anitext {
    0%{ opacity: 0; top: 0;}
    100%{ opacity: 1; top: 100px;}
}
@keyframes anigam {
    0%{ opacity: 0;bottom: 20%;}
    100%{ opacity: 1; bottom: 0;}
}
@keyframes aniwine {
    0%{ opacity: 0; top: -20px;}
    100%{ opacity: 0.8; top: 50px;}
}

.banner .shp1 {
    position: absolute;
    top: 100px; left: 15%;
    transform: rotate(-20deg);
    background-color: var(--point-color);
    width: 400px;
    height: 150px;
    border-radius: 100px;
    color: transparent;
    animation: Ani1 2s ;
}
.banner .shp2 {
    position: absolute;
    top: 330px; left: 15%;
    transform: rotate(20deg);
    background-color: white;
    width: 250px;
    height: 140px;
    border-radius: 100px;
    color: transparent;
    overflow: hidden;
    animation: Ani2 2.5s ;
}
.banner .shp2::after {
    content: "";
    position: absolute;
    top: -100px; left: -30px;
    width: 180%;
    height: 180%;
    z-index: 100;
    transform: rotate(-20deg);
    background-image: url(../img/BN_img.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: initial;
    opacity: 0.5;
}

.banner .shp3 {
    position: absolute;
    top: 250px; right: -100px;
    transform: rotate(-20deg);
    background-color: var(--sub-color);
    width: 1000px;
    height: 280px;
    border-radius: 1000px;
    color: transparent;
    overflow: hidden;
    animation: Ani3 3s ;
}

@keyframes Ani1{
    0%{width: 0px;}
    100%{width: 400px;}
}
@keyframes Ani2{
    0%{width: 0px;}
    100%{width: 250px;}
}
@keyframes Ani3{
    0%{width: 0px;}
    100%{width: 1000px;}
}





@media(max-width: 1400px){
    .banner article {
        width: 80%;
    }

    .banner article .text {
        font-size: 1.4em;
    }
    .banner .shp1 {
        left: 0;
    }
    .banner .shp2 {
         left: 0%;
    }
    .banner .shp3 {
        width: 850px;
        height: 250px;
    }
    @keyframes Ani3{
        0%{width: 0px;}
        100%{width: 850px;}
    }
    

}
@media(max-width: 1000px){
    .banner{
        height: 600px;
    }
    .banner article .text {
        top: 80px;
        left: 45px;
        font-size: 1.2em;
        line-height: 45px;
    }
    @keyframes anitext {
        0%{ opacity: 0; top: 0;}
        100%{ opacity: 1; top: 80px;}
    }

    .banner article .img .gam {
        right: 50px;
        width: 430px;
    }
    .banner article .img .gam img {
        width: 100%;
    }
    article .img:hover .gam { 
        right: 100px;}

    .banner article .img .wine{
        right: 40px;
        height: 550px;
    }
    article .img .wine img{
        height: 100%;
    }

    .wine ul li:nth-child(6), .wine ul li:nth-child(7){
        display: none;
    }
    article .img .wine ul button {
        margin: 0;
    }
    article .img:hover .wine>ul {
        right: 140px;
    }


    .banner article {
        width: 90%;
    }
    .banner .shp1 {
        top: 80px;
        width: 300px;
        height: 120px;
    }
    .banner .shp2 {
        top: 250px;
         width: 180px;
         height: 100px
    }
    .banner .shp3 {
        right: -150px;
        width: 700px;
        height: 210px;
        top: 280px;
    }
    .banner .shp2::after {
        height: 200%;
    }
    @keyframes Ani1{
        0%{width: 0px;}
        100%{width: 300px;}
    }
    @keyframes Ani2{
        0%{width: 0px;}
        100%{width: 180px;}
    }
    @keyframes Ani3{
        0%{width: 0px;}
        100%{width: 700px;}
    }
    
}

@media(max-width: 600px){
    .banner{
        height: 700px;
    }
    .banner article {
        width: 100%;
    }
    .banner article .text {
            position: sticky;
            top: 40px; left: 0;
            font-size: 1em;
            line-height: 35px; 
            text-align: center;
    }
    .banner article .text p:nth-child(1) { 
        color:black; font-size: 1.1em;
    }
    .banner article .text h2 { 
        font-weight: lighter;
    }
    @keyframes anitext {
        0%{ opacity: 0; top: 150px;}
        100%{ opacity: 1; top: 40px;}
    }

    .banner article .img .gam {
        right: 50px;
        width: 400px;
    }
    article .img:hover .gam { right: 80px;}

    .banner article .img .wine{
        top: inherit;
        bottom: 0;
        right: 50px;
    }
    
    @keyframes aniwine {
        0%{ opacity: 0; bottom: 20%;}
        100%{ opacity: 1; bottom: 0%;}
    }
    article .img:hover .wine>ul {
        right: 130px;
    }
  

    .banner .shp1 {
        top: 35px;
        left: -10%;
        width: 280px;
        height: 120px;
    }
    @keyframes Ani1{
        0%{width: 0px;}
        100%{width: 280px;}
    }
    .banner .shp2 { display: none;}
    .banner .shp3 {
        right: -30%;
        width: 600px;
        height: 230px;
        top: 380px;
        transform: rotate(-25deg);
    }
    @keyframes Ani3{
        0%{width: 0px;}
        100%{width: 600px;}
    }
}

@media(max-width: 440px) {
    .banner article .text {
        font-size: 0.9em;
    }
    .banner article .text p:nth-child(1) { 
        color:black; font-size: 1.3em;
    }
    .banner article .text p:nth-child(3) { 
        color:black; font-size: 1.1em;
    }
    .banner article .img .gam {
        width: 75%;
        bottom: 0%;
    }
    @keyframes anigam {
        0%{ opacity: 0;bottom: 20%;}
        100%{ opacity: 1; bottom: 0%;}
    }
    .banner article .img .wine{
        right: 10%;
        height: 70%;
    }
    article .img .wine ul{
        width: 100%;
    }
}




/* conA------------------------------------------------------- */

.conA {

    width: 60%;
    margin: auto;
    position: relative;
}
.conA h2{
    position: absolute;
    top: 450px; left: 570px;
    z-index: 10;
    font-family: 'Arya', sans-serif !important;
    font-size: 4.5em;
    color: var(--accent-color);
    line-height: 65px;
} 
.conA>p {
    position: absolute;
    top: 85%; right: 0%;
    width: 70%;
    font-family: HangultuelGothic;
}





.conA #card {
    width: 600px;
    display: flex;
    justify-content: space-between;
    animation: card 2.5s;
}

@keyframes card {
    0%{opacity: 0; margin-top:20px;}
    100%{opacity: 1; margin-top:0; }
}

.conA #card .gnb .con {
    margin-bottom: 30px;
}
.conA #card .gonone{
    margin-top: 100px;
 
}
.conA .card{
    width: 280px;
    height: 300px;    
    position: relative;
    transform-style: preserve-3d;
    transition: 1s ease-out;
    
}
.conA .card li {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}
.conA .card li div { 
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 35px;
}

.conA .card .front {
    background-color: var(--sub-color); 
}
.conA .card .back {
    background-color: #feebaa; 
    transform: rotateY(180deg);
}

.con:hover .card{
    transform: rotateY(180deg);
}



.conA .card h3 { font-size: 1.1em; }
.back h3 {font-weight: bolder;}

.card p:nth-child(2) { font-size: 0.9em;}
.card button {
    background-color: var(--point-color);
    padding: 5px;
    width: 100px;
    border-radius: 50px;
    border: none;
    outline: none;
}

.card button a{ color: white; }

.card button:hover { background-color:#abdc6a;}

.card .icon {
    height: 110px;
    position: relative;
} 

.card .icon .bor {

    position: absolute;
    top: 50%; 
    left: 100px;
    transform: translateY(-50%);
    /* height: 100%; */
}
.card .icon .bor2 {
    position: absolute;
    top: 72%; right: 85px;
    transform: translateY(-50%);
    transition: 1s;
}
.card .back .icon .bor2 img {
    transform-origin: center; 
    transition: 1s;
}
.con:hover .back .bor img{
    animation: wineicon 2s ;
}
.con:hover .back .bor2 img{
    animation: bor 2s ;
}

@keyframes bor{
    0%, 100%{ transform: rotate(0deg);}
    50%{ transform: rotate(180deg);}
}

.card .icon .wineicon img{
    transform-origin: bottom left; 
    transition: 1s;
}
.card .icon .wineicon2 img{
    transform-origin: bottom right; 
    transition: 1s;
}
.con:hover .back .wineicon img{
    animation: wineicon 2s ;
}
.con:hover .back .wineicon2 img{
    animation: wineicon2 2s ;
}

@keyframes wineicon{
    0%, 100%{ transform: rotate(0deg);}
    50%{ transform: rotate(-10deg);}
}
@keyframes wineicon2{
    0%, 100%{ transform: rotate(0deg);}
    50%{ transform: rotate(10deg);}
}

.con:hover .back .map2 img{
    animation: map2 2s ;
}

@keyframes map2{
    0%,50%, 100%{ padding-bottom: 0;}
    25%, 75%{ padding-bottom: 10px;}
}


.con .icon .cus {
    position: absolute;
    top: 50%; left: 100px;
    transform: translateY(-50%);
}
.con .icon .cus2 {
    position: absolute;
    top: 60%; right: 51%;
    transform: translate(50%, -50%);
    transition: 1s;
}

.con:hover .back .cus2 img{
    animation: map2 2s ;
}
@keyframes cus2{
    0%,50%, 100%{ top: 60%;}
    25%, 75%{  top: 50%;}
}



@media(max-width: 1400px) {
    .conA {
        width: 80%;
    }
    .conA h2{
        left: 570px;
        font-size: 4.5em;
    } 
    .conA>p {
         right: 30px;
        width: 60%;}

}
@media(max-width: 1000px) {
    .conA {
        width: 100%;
    }
    .conA #card {
        width: 530px;
    }
    .conA .card{
        width: 250px;
    }
    .card .icon {   
        height: 90px;
        position: relative;
        margin-bottom: 10px;
    } 
    .card .icon span {
        height: 100%;
    }
    .card .icon span:nth-child(1) img{ 
        max-height: 100%;
    }
    .card .icon span:nth-child(2) img{ 
        max-height: 70% !important;
    }

    .card .icon .bor {
        top: 50%; left: 80px;

    }
    .card .icon .bor2 {
        top: 40%; right: 80px;
        transform: scale(0.85);
    }
    .card .icon .map {
        position: absolute;
        left: 30%;
        transform: scale(0.9);
    }
    .card .icon .map2 {
        position: absolute;
        top: 30%; right: 85px;
        transform: scale(0.9);
    }
    .con:hover .back .map2{
        animation: map2 2s ;
    }
    @keyframes map2{
        0%, 50%, 100%{ top: 30%; }
        25%, 75%{ top: 15%; }
    }
    .card .icon .cus2 {
        top: 35%; right: 37%;
        transform: scale(0.9);
        transition: 1s;
    }
    
    .con:hover .back .cus2{
        animation: cus2 2s ;
    }
    @keyframes cus2{
        0%,50%, 100%{ top: 35%;}
        25%, 75%{  top: 25%;}
    }
    .conA .card h3 { font-size: 1em; }
    .card p:nth-child(2) { font-size: 0.8em;}

    .conA h2{
        top: 480px; 
        left: 500px;
        font-size: 3.8em;
        line-height: 55px;
    } 
    
    .conA>p {
        position: absolute;
        top: 85%; right: 30px;
        width: 60%;
        font-size: 0.9em;
    }


}
@media(max-width: 600px) {
    .conA #card {
        width: 450px;
        margin: auto;
    }
  
    .conA h2{
        position: static;
        font-size: 4em;
        line-height: 50px;
    } 
    .conA>p { display: none;}
    .conA #card .gnb .con {
        margin-bottom: 20px;
    }
    .conA .card{
        height: 280px;    
        width: 215px;
    }
    .card .icon .bor {
        left: 70px;
    }
    .card .icon .bor2 {
        right: 55px;
    }
    .card .icon .map {
        left: 30%;
        transform: scale(0.85);
    }
    .card .icon .map2 {
        top: 30%; right: 65px;
        transform: scale(0.85);
    }
    .card .icon .cus {
         left: 65px;
    }
    .card .icon .cus2 {
        right: 45%;
        transform: scale(0.85);
    }
    .card p:nth-child(2) { font-size: 0.75em;}
}


@media(max-width: 440px) {
 
    .conA h2{
        font-size: 3em;
        line-height: 40px;
    } 
    .conA #card {
        width: 100%;
        margin: auto;
    }
    .conA .card{
        height: 230px;    
        width: 180px;
        transform: rotateY(180deg);
    }
    .conA .card h3 { font-size: 0.9em; }
    .conA .card .back p { line-height: 15px;}
    .conA .card .back {
    background-color: #f6fdec; 
    transform: rotateY(180deg);
}

    .card .icon {   
        height: 80px;
    } 
    .card .icon .bor {
        left: 40px;
    }
    .card .icon .bor2 {
        height: 85%;
        right: 50px;
    }
    .card .icon .map {
        left: 28%;
    }
    .card .icon .map2 {
        top: 30%; right: 48px;
    }
    .card .icon .cus {
        left: 50px;
   }
   .card .icon .cus2 {
        right: 43%;
        top: 30%; 
        transform: scale(0.8);
    }
    
    @keyframes cus2{
        0%,50%, 100%{ top: 30%;}
        25%, 75%{  top: 23%;}
    }
}

















/* CONB-------------------------------------------------------------------- */

.conB {
    width: 60%;
    margin: 50px auto;
}
.conB>div {
    height: 300px;
    /* display: inline-block; */
    position: relative;
    display: flex;
    justify-content: space-between;
}
.conB>div div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.conB div .img{
    background-color: black;
    width: 630px;
    height: 250px;
    border-radius: 200px;
    position: relative;
}
.conB div .img p{
    position: absolute;
    width: 630px;
    height: 250px;
    border-radius: 200px;
    overflow: hidden;
}

.conB div .text li {
    padding: 5px;
}

.conB div .text li:nth-child(1) {
    color: var(--point-color);
    font-weight: bold;
    font-size: 2em;
}
.conB div .text li:not(:first-child), .conB div .text li p{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.conB div .text li:last-child {
    color: var(--point-color);
    font-size: 0.8em;
}


.conB .one {
    flex-direction: row-reverse;
}


.conB .one .img {
    right: -5%;
}
.conB .one img{
    position: absolute;
    top: -60%; left: -5%;
    transform: scale(0.9);    
}
.conB .one .text {
    position: absolute;
    left: 0;
    width: 480px;
    border-radius: 100px;
    text-align: right;
    background-color:rgba(255, 255, 255, 0.8);
    animation: onetext 8s 5s infinite ease-in-out;
}

@keyframes onetext{
    0%,100% {left: 0;}
    10% {left: 5%;}
    30% {left: 0;}
}
.conB div .text ul { padding: 0 10%;}
.conB .one .img::after{
    content: "";
    position: absolute;
    top: 10px; left: 20px;
    background-color: #fff5df;
    width: 550px;
    height: 220px;
    border-radius: 100px;
    transform-origin: center;
    transform: rotate(20deg);
    z-index: -10;
    animation: oneAni 2s 1s infinite ease-in-out alternate;
}

@keyframes oneAni{
    0%{ transform: rotate(20deg);}
    25%{ transform: rotate(15deg);}
    25%{ transform: rotate(20deg);}
    100%{transform: rotate(15deg);}
}

.conB .two .img {
     left: -5%;
}

.conB .two img{
    position: absolute;
    top: -60%; left: -10%;
    transform: scale(0.9);
}
.conB .two .img::after{
    content: "";
    position: absolute;
    right: 20px; top: 10px;
    background-color: var(--sub-color);
    width: 550px;
    height: 220px;
    border-radius: 100px;
    transform-origin: center;
    transform: rotate(-20deg);
    z-index: -10;
    animation: twoAni 3s 1s infinite ease-in-out alternate;
}

@keyframes twoAni{
    0%{ transform: rotate(-20deg);}
    25%{ transform: rotate(-15deg);}
    25%{ transform: rotate(-20deg);}
    100%{transform: rotate(-15deg);}
}


.conB .two .text {
    position: absolute;
    width: 550px;
    text-align: left;
    border-radius: 100px;
    background-color:rgba(255, 255, 255, 0.8);
    right: -5%;
    animation: twotext 8s 5s infinite ease-in-out;
}
@keyframes twotext{
    0%,100% {right: -5%;}
    20% {right: 0%;}
    30% {right: -5%;}
}

    
@media(max-width: 1400px) {
    .conB {
        width: 80%;
    }
    .conB div .img{
        width: 550px;
        height: 250px;
    }
    .conB div .img p{
        width: 550px;
        height: 250px;
    }
   
    


}
@media(max-width: 1000px) {
    
    .conB {
        width: 100%;
        height: 1000px;
        position: relative;
        margin: 50px auto;
        overflow: hidden;
    }
    .conB>div {
        height: auto;
        position: absolute;
        display: block;
        /* height: 300px; */
        width: 100%;
    }
    .conB>div div {
        /* position: relative; */
        top: 0%;
        transform: translateY(0);
        display: block;
    }
    .conB div .text { margin-top: 20px;} 

    .conB div .img{
        width: 630px;
        height: 250px;
    }
    .conB div .img p{
        width: 630px;
        height: 250px;
    }
    .conB .one {
        position: absolute;
        top: 50px;
        right: 0;
    }
    .conB .one .text {
        left: 20%;
        position: sticky;
        background-color: transparent;
        border-radius: inherit;

    }
    
    .conB .two {
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .conB .two .text {
        position: sticky;
        left: 15%;
        background-color:transparent;
        border-radius: inherit;
    }
    @keyframes twotext{
        0%,100% {left: 15%;}
        50% {left: 10%;}
    }
    .conB .one .img {
        right: -40%;
    }
    .conB .two .img {
       left: -15%;
    }

    


}
@media(max-width: 600px) {
    .conB {
         height: 900px;
    }
    .conB .one .img::after, .conB .two .img::after {
        display: none;
    }
    .conB .one .text {
        left: 100%;
        animation:none;
        width: 100%;
    }
    .conB .two .text {
        left: 0%;
        width: 100%;
    }
  
    .conB div .img{
        width: 600px;
        height: 220px;
    }
    .conB div .img p{
        width: 600px;
        height: 220px;
    }
    .conB .one .img {
        right: -20%;
    }
    .conB .one img{
        left: -20%;
        transform: scale(0.6);    
    }
    .conB .two .img {
       left: -40%;
    }
    .conB .two img{
        top: -80%; left: -5%;
        transform: scale(0.6);
    }

}
@media(max-width: 440px){
    .conB div .img{
        width: 600px;
        height: 180px;
        overflow: hidden;
    }
    .conB div .img p{
        border-radius: inherit;
        overflow: visible;
    }

    .conB div .text ul { padding: 0 5%;}
    
    .conB div .text li:nth-child(1) {
        font-size: 1.6em;
    }
    .conB div .text li:nth-child(2),   .conB div .text li:nth-child(3){
        font-size: 0.9em;
    }



    .conB .one img{
        left: -20%;
        transform: scale(0.6);    
    }
    .conB .two .img {
        left: -80%;
     }
}
















 /* CONC------------------------------------------------------------ */

.conC{
    width: 60%;
    margin: 50px auto;
    position: relative;
}
.conC .text {
    position: absolute;
    top: 20%;
    left: 75%;
}

.conC h2 {
    font-size: 3em;
    font-weight: bold;
    color: var(--point-color);
    width: 250px;
    line-height: 45px;
    padding-bottom: 10px;
}

.conC .text p { font-family:  'Arya', sans-serif ;}
.conC .photo {
    width: 73%;
}
.conC .photo ul{
    width: 100%;
    /* height: 500px; */
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 120px 180px 180px 120px;
    grid-gap: 15px;
    grid-template-areas: 
    "box1 box2 a"
    "box1 box2 box3"
    "box4 box5 box6"
    "- - box6"
    ;
}


.conC .photo li {
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}


.conC .photo ul .item1 {
    grid-area: box1;
}
.conC .photo ul .item2 {
    grid-area: box2;
}
.conC .photo ul .item3 {
    grid-area: box3;
}
.conC .photo ul .item4 {
    grid-area: box4;
}
.conC .photo ul .item5 {
    grid-area: box5;
}
.conC .photo ul .item6 {
    grid-area: box6;
}

.conC .photo li img {
    height: 100%;
    min-width: 100%;
    transition: 0.5s;
}
.conC .photo li:hover img {
    transform: scale(1.1);
}

.conC .photo ul .item4 img {
    position: absolute;
    left:-10%;
}
.conC .photo ul .item5 img {
    position: absolute;
    left:-10%;
}
.conC .photo ul .item6 img {
    position: absolute;
    left:-30%;
}



@media(max-width: 1400px) {
    .conC{
        width: 80%;
    }

}
@media(max-width: 1000px) {
    .conC{
        width: 100%;
    }
    .conC .text {
        position: static;
        padding: 20px 0;
        top: 0;
    }
    .conC h2 {
        width: auto;
    }
    .conC .photo {
        width: 100%;
    }

}
@media(max-width: 600px) {
    .conC .photo ul{
        width: 100%;
        grid-template-rows: 80px 150px 150px 80px;
        grid-gap: 10px;
 
    }
    .conC .photo li{
        border-radius: 10px;
    }
}

@media(max-width: 440px){
    .conC {
        height: 800px;
    }
    .conC h2 {
        font-size: 2.2em;
        display: inline;
        width: 100%;
    }
    .conC .text p { 
        font-family:  'Arya', sans-serif;
        font-size: 0.9em;
        width: 60%;
    }
    .conC .photo {
        width: 95%;
        height: 500px;
        margin: auto;
    }
    .conC .photo ul{
        width: 100%;
        /* height: 500px; */
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 10px;
        grid-template-areas: 
        "box1 box2"
        "box3 box4"
        "box5 box6"
        ;
    }
}







/* footer--------------------------------------------------------- */

footer{
    width: 60%;
    height: 150px;
    margin: auto;
    position: relative;
    padding: 20px;
}
footer h3 {
    width: 150px;
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
}
footer h3  img { width: 100%;}
footer .menu {
    position: absolute;
    left: 35%;
}
footer .menu ul {
    display: flex;
}

footer .menu ul li:last-child a{ border: none;}
footer .menu ul li a { 
    padding: 0 20px;
    font-size: 0.8em;
    height: 5px;
    border-right: 1px solid rgb(184, 184, 184) ;
}


footer address {
    position: absolute;
    left: 35%;
    bottom: 15px;
}
footer address p { font-size: 0.8em;
    line-height: 15px;
    font-family:  'Arya', sans-serif ;
    color: rgb(70, 70, 70);
}
footer div:nth-child(1) {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 300px;
    width: 200%;
    overflow: hidden;
}
footer .shp {
    position: absolute;
    bottom: -30px; 
    transform: rotate(10deg);
    background-color: var(--sub-color);
    width: 1100px;
    height: 220px;
    border-radius: 200px;
    color: transparent;
}

/* body { overflow-x: hidden;} */

@media(max-width: 1400px) {
    footer{
        width: 80%;
    }
    footer .shp {
        width: 1000px;
        height: 200px;
    }

}
@media(max-width: 1000px) {
    footer{
        width: 100%;
    }
    footer h3 {
        left: 5%;
    }
    footer div:nth-child(1) {
        bottom: 0;
        left: auto;
        height: 300px;
        width: 100%;
    }
    footer .shp {
        bottom: -10px;
        width: 800px;
        height: 200px;
    }
    footer .menu {
        left: 30%;
    }
    footer .menu ul li a { 
        padding: 0 10px;
    }
    footer address {
        left: 30%;
        bottom: 10px;
    }
    


}
@media(max-width: 600px) {
    footer{
        height: 200px;
        padding: 20px;
    }
    footer h3 {
        width: 35%;
        position: sticky;
        margin: auto;
    }
    footer .menu {
        position: sticky;
        margin-top: -15px;
        padding: 5px;
    }
    footer .menu ul li a { 
        padding: 0 10px;
    }
    footer address {
        position: relative;
        left: 0;
        margin-top: 10px;
    }
    footer div:nth-child(1) {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 400px;
    }
    footer .shp {
        bottom: 0px;
        width: 600px;
        height: 150px;
    }
}


@media(max-width: 440px){
    footer{
        height: 170px;
        padding: 10px;
    }
    footer .menu ul li a { 
        padding: 0 5px;
        font-size: 0.6em;
        height: 5px;
    }
    footer address {
        font-size: 0.8em;
    }
}