@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&family=Roboto:wght@100;400;700&display=swap');

body{
font-family: 'Noto Sans KR', sans-serif;
/* font-family: 'Roboto', sans-serif; */
width: 100%;
margin: 0 auto;
font-size: 1rem;
color: #222;
}

*{
margin: 0;
padding: 0;
}

li{
list-style: none;
}

a:link , a:visited{
text-decoration: none;
color: inherit;
}

img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

.clearfix::after{
content: '';
clear: both;
display: block;
line-height: 0;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1.12rem; }
h5 { font-size: .83rem; }
h6 { font-size: .75rem; }



/* header */
header{
    width: 100%;
    height: 1023px;
    background-color: #F0F0F0;
    position: relative;
}
.buger>li>img{
    width: 28px;
    margin-right: 14px;
}

.buger{
    position: absolute;
    top: 47px;
    left: 53px;
}
.buger>li{
    float: left;
}

.logo{
    width: 85px;
    height: 23px;
    position: absolute;
    top: 73px;
    left: 50%;
    transform: translateX(-50%);
}

.user{
    position: absolute;
    right: 52px;
    top: 48px;
}
.user>li{
    width: 30px;
    height: 30px;
    float: left;
    margin-left: 46px;
    position: relative;
}
.user>li>span{
    display: block;
    width: 19px;
    height: 19px;
    background-color: #C80A1E;
    border-radius: 100%;
    color: #fff;
    font-size: 0.750rem;
    padding: 0 6px 0 ;
    box-sizing: border-box;
    position: absolute;
    top: 16px;
    left: 12px;
}


/* main */
main{
width: 100%;
height: 1023px;
position:absolute;
top: 0;
}

.left01{
    width: 162px;
    height: 162px;
    position: absolute;
    top: 50%;
    left: -53px;
    transform: translate(0, -50%);
}

.panel{
    border: 0px solid red;
    margin-top: 230px;
    position: relative;
}
.panel>li>.line{
    width: 0px;
    height: 50px;
    border: 1px solid #AAAAAA;
    margin-right: 73px;
    float: left;
    margin-top: 2px;
}

.line-txt{
    color: #aaaaaa;
    line-height: 19px;
}

.main-slide{
 width: 1200px;
 margin: 0 auto;
}

.panel>li>h1{
    font-weight: 400;
    font-size: 4.375rem;
    margin-top: 118px;
    line-height: 65px;
    margin-bottom: 32px;
}
.panel>li>p{
    color: #aaaaaa;
    margin-bottom: 148px;
    line-height: 30px;
}
.panel>li>img{
    width: 860px;
    height: 430px;
    position: absolute;
    top: 128px;
    left: 500px;
}

.triangle{
    display: inline-block;
    border: 6px solid transparent;
    border-left-color: #000;
    margin-left: 18px;
    position: absolute;
    bottom: 6px;
}

.dot{
    position: absolute;
    right: 46px;
    top: 50%;
}
.dot>.on{
    background-color: #AAC1C1;
}
.dot>li{
 width: 18px;
 height: 18px;
 border-radius:100%;
 background-color: #CBDFDF;
 margin-bottom: 17px;
}



/* article 1 */
.sale-up{
    width: 1200px;
    height: 2245px;
    margin: 0 auto;
    position: relative;
    /* border: 1px solid red; */
}
.cont-left{
    float: left;
}

.cont-left>ul>li:first-child{
    margin-top: 98px;
}

.cont-left>ul>li{
    width: 612px;
    height: 546px;
    border: 0px solid red;
    position: relative;
    margin-bottom: 34px;
}

.img01{
    width: 380px;
    height: 380px;
    position: absolute;
    right: 79px;
    z-index: 10;
}
.cont-left>ul>li>.back{
    width: 538px;
    height: 190px;
    background-color: #F0F0F0;
    position: absolute;
    top: 193px;
    right: 0;
}
.cont-left>ul>li>.txt{
    position: absolute;
    top: 417px;
    left: 74px;
    font-size: 1.875em;
    font-weight: 500;
}

.cont-left>ul>li:nth-child(3)>.txt{
    top: 855px;
    left: 74px;
}

.txt>span{
    display: block;
    width: 200px;
    border: 1px solid #000;
}


.img02{
    width: 380px;
    height: 190px;
    position: absolute;
    top: 92px;
    right: 79px;
    z-index: 10;
}

.img03{
    width: 290px;
    height: 773px;
    position: absolute;
    top: 3px;
    right: 124px;
    z-index: 10;
}

.cont-left>ul>li>.back3{
    width: 538px;
    height: 511px;
    background-color: #F0F0F0;
    position: absolute;
    top: 310px;
    right: 0;
}

.cont-right{
    float: right;   
    position: absolute;
    right: 0;
}

.cont-right>ul>li{
    width: 513px;
    height: 546px;
    border: 0px solid rgb(0, 255, 13);
    position: relative;
    top: 456px;
    margin-bottom: 34px;
}


.cont-left>ul>li>.txt-rotate{
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #C80A1E;
    position: absolute;
    top: 193px;
}
.cont-left>ul>li:nth-child(3)>.txt-rotate{
    top: 310px;
}

.cont-left>ul>li:nth-child(2)>.txt-rotate, .cont-left>ul>li:nth-child(3)>.txt-rotate{
    color: #AAAAAA;
}

.cont-right>ul>li>.txt-rotate{
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #C80A1E;
    position: absolute;
    top: 150px;
    right: 0;
}

.cont-right>ul>li:nth-child(2)>.txt-rotate{
    top: 106px;
}


.cont-right>ul>li>.back{
    width: 436px;
    height: 234px;
    background-color: #F0F0F0;
    position: absolute;
    top: 149px;
    left: 0;
}

.cont-right>ul>li>.txt{
    position: absolute;
    bottom: 85px;
    left: 0px;
    font-size: 1.875em;
    font-weight: 500;
}

.img04{
    width: 347px;
    height: 214px;
    position: absolute;
    top: 61px;
    left: 45px;
    z-index: 10;
}

.img05{
    width: 270px;
    height: 270px;
    position: absolute;
    top: 32px;
    left: 83px;
    z-index: 10;
}


.last-box>div:first-child{
    margin-top: 65px;
    margin-bottom: 53px;
    width: 70px;
    border-top: 1px solid #000;

}

.last-box>div:nth-child(2){
    font-size: 2rem;
    color: #000;
    margin-bottom: 19px;
}

.last-box>div:nth-child(2)>span{
    color: #C80A1E;
}

.last-box>div:nth-child(3){    
    margin-bottom: 84px;
    color: #AAAAAA;
    line-height: 24px;
}
.last-box>div:nth-child(4){ 
    width: 440px;   
    padding: 0 0 35px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #aaaaaa;
    color: #AAAAAA;
}   



.arrow-move{
    position: absolute;
    top: 257px;
    left: 400px;
}
.arrow{
    display: inline-block;
    width: 9px;
    height: 9px;
    border-top: 2px solid #aaaaaa;
    border-left: 2px solid #aaaaaa;
    transform: rotate(135deg);
}

.arrow::after{
    content: "";
    display: inline-block;
    width: 2px;
    height: 18px;
    background-color: #aaaaaa;
    transform: rotate(-45deg) translate(6px, 1px);
    left: 0;
    top: 0;
}



/* footer */
footer{
    width: 100%;
    margin-top: 280px;
    padding-bottom: 130px;
    position: relative;
    color: #AAAAAA;
}
.foot-left{
    margin-left: 100px;
}

.foot-left>ul>li{ 
    float: left;
    margin-right: 8px;
}

.foot-left>ul>li:nth-child(3), .foot-left>ul>li:nth-child(4){
    margin-right: 40px;
}

.foot-img{
    width: 86px;
    height: 24px;
    float: left;
    position: absolute;    
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.foot-right{
    float: right;
    margin-right: 95px;
}
.foot-right>ul>li{
    float: left;
}
.foot-right>ul>li>img{
    width: 24px;
    height: 24px;
    margin-left: 18px;
}





/* page 01 - header */



.page-main-img{
    width: 100%;
    height: 712px;
    opacity: 0.2;
    position: relative;
}


.gradient{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
    background-image: linear-gradient(to bottom, transparent, rgb(255, 255, 255));
}

/* page 01 - main */
main{
    width: 100%;
    height: 1023px;
    position:absolute;
    top: 0;
}    
    
.page-slide{
    position: absolute;
    top: 177px;
    /* left: 198px; */
    left: 50%;
    transform: translateX(-50%);
}  

    .page-panel{
        width: 1536px;
        border: 0px solid red;
        background-color: #fff;
        position: relative;
    }
    .page-panel>li{
        display: inline-block;
    }
    .page-panel>li>img{
        width: 768px;
        height: 879px;
        float: left;
    }

    .page-txt{
        color: #aaaaaa;
        border: 0px solid rgb(0, 255, 115);
        display: inline-block;
        position: absolute;
        top: 0;    
        margin-top: 60px;
    }

    
    .page-txt>li{
        float: left;
        color: #AAC1C1;
        margin-left: 58px;
    }
    .page-txt>li>img{
        width: 28px;
        height: 28px;
        margin-right: 15px;

    }

    .page-txt>li>h3{
        font-weight: 400;
        letter-spacing: .16rem;
        margin-top: 137px;
        font-size: 1.25rem;
    }
    .page-txt>li>h1{
        font-size: 4.063rem;
        line-height: 65px;
        margin-bottom: 49px;
        color: #222;
        margin-top: 18px ;
    }
    .page-txt>li>p{
        color: #aaaaaa;
        margin-bottom: 59px;
        font-size: 1.375rem;
        line-height: 35px;
    }
  
    .page-txt>li>div{  
        display: inline-block;
        font-size: 1.5rem;
        color: #aaaaaa;
        position: relative;
    }
    .page-txt>li>div>.color-box{
        display: inline-block;
        width: 310px;
        border: 0px solid red;
        position: absolute;
        top: 0;
        left: 107px;
    }
    .color-check{
        float: left;
        width: 40px;
        height: 40px;
        border: 1px solid #aaaaaa;
        margin-right: 6px;
        margin-bottom: 6px;
    }
    





    .page-btn{
        width: 768px;
        height: 879px;
        position: relative;
    }

    .page-btn>div{
        width: 55px;
        height: 55px;
        background-color: #fff;
    }

    .page-btn>.prev{      
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
    }

    .prev>span{
        width: 15px;
        height: 15px;
        border-top: 2px solid #AAC1C1;
        border-left: 2px solid #AAC1C1;
        transform: rotate(-45deg);
        position: absolute;
        top: 20px;
        left: 23px;
    }


    .page-btn>.next{
        position: absolute;
        top: 50%;
        right: 0px;
        transform: translateY(-50%);
    }
    
    .next>span{
        width: 15px;
        height: 15px;
        border-top: 2px solid #AAC1C1;
        border-left: 2px solid #AAC1C1;
        transform: rotate(135deg);
        position: absolute;
        top: 20px;
        left: 14px;
    }


    /* .dot{
        position: absolute;
        right: 46px;
        top: 50%;
    }
    .dot>.on{
        background-color: #AAC1C1;
    }
    .dot>li{
     width: 18px;
     height: 18px;
     border-radius:100%;
     background-color: #CBDFDF;
     margin-bottom: 17px;
    } */
    
    





    /* page - cont 1 */
    .page-cont1{
        width: 1200px;
        height: 1084px;
        margin: 0 auto;
    }
    .left-txt{
        margin-top: 120px;
        color: #707070;
        position: relative;
    }
    .menu-box{
        height: 136px;
    }
    .menu-box>li{
        width: 130px;
        height: 136px;
        border: 1px solid #aaaaaa;
        float: left;
        text-align: center;
        padding-top: 34px;
        box-sizing: border-box;
        font-size: 1.875rem;
    }

    .menu-box>li>span{
        display: block;
        font-size: 1.125rem;
        margin-top: 4px;
    }

    .menu-box>.on{
        background-color: #CBDFDF;
        color: #fff;
    }


    .cont1-txt{
        clear: both;
        margin-top: 28px;

        /* width: 800px;
        height: 780px;
        border: 0px solid red;
        position: absolute;
        top: 164px;  */

    }

    .cont1-txt>h3{
        font-size: 1.125rem;
        font-weight: 400;
        margin-bottom: 93px;
    }

    .cont1-txt>h1{
        font-size: 4rem;
        color: #222;
        line-height: 80px;
        margin-bottom: 36px;
    }

    .cont1-txt>p{
        font-size: 1.125rem;
        color: #AAAAAA;
        line-height: 29px;
    }





    .event-box{
        width: 1300px;
        height: 200px;
        margin-top: 193px;
        color: #222;
        font-size: 1.375rem;
    }

    .event-box>li{
        width: 200px;
        height: 200px;
        border: 1px solid #aaaaaa;
        float: left;
        position: relative;
    }
    .event-box>li:first-child{
        width: 400px;
        height: 200px;
        line-height: 29px;
    }
    .event-box>li>p{
        padding: 50px 0 0 50px;
        box-sizing: border-box;
    }

    .event-box>li>span{
        display: block;
        font-size: 1.375rem;
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    /* .event-box>.on{
        background-color: #CBDFDF;
        color: #fff;
    } */


    .event-box>li>img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


    
.event-arrow-move{
    position: absolute;
    top: 152px;
    right: 42px;
}
.event-arrow{
    display: inline-block;
    width: 9px;
    height: 9px;
    border-top: 2px solid #aaaaaa;
    border-left: 2px solid #aaaaaa;
    transform: rotate(135deg);
}

.event-arrow::after{
    content: "";
    display: inline-block;
    width: 2px;
    height: 140px;
    background-color: #aaaaaa;
    transform: rotate(-45deg) translate(49px, 18px);
    left: 0;
    top: 0;
}

.cont1-img>img{
    width: 668px;
    height: 1091px;
    position: absolute;
    top: -246px;
    left: 805px;
}

 
.plus-box{
    width: 74px;
    height: 74px;
    position: relative;
    position: absolute;
    top: 220px;
    left: 1106px;
}

.plus-box>li{
    width: 74px;
    height: 74px;
    background-color: rgba(255, 255, 255, 0.4);

}

.plus-box>.box-color{
    width: 40px;
    height: 40px;
    background-color: #AAC1C1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.box-color>img{
    width: 32px;
    height: 32px;
    margin: 4px;
}

.plus-box>div{
    width: 390px;
    height: 200px;
    border: 1px solid #AAC1C1;
    background-color: #fff;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 16px;
    left: 16px;

}

.plus-box>div>p{
    padding: 40px 0 0 65px;
    box-sizing: border-box;
    font-size: 1.188rem;
    color: #AAC1C1;
}



/* page - cont 2 */
.page-cont2{
    width: 100%;
    height: 930px;
    margin-top: 187px;
    position: relative;
}

.page-cont2>div{
    width: 100%;
    height: 930px;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
}

.page-cont2>span{
    color: #fff;
    text-align: center;
    padding-top: 27px;
    box-sizing: border-box;
    display: block;
    width: 426px;
    height: 80px;
    border: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cont3{
    width: 100%;
    height: 420px;
    text-align: center;
    margin-top: 236px;
    position: relative;

}

.cont3>h1{
    font-size: 2.125rem;
}

.cont3>span{
    display: block;
    width: 241px;
    height: 72px;
    color: #707070;
    font-size: 1.125rem;
    border: 1px solid #aaaaaa;
    padding-top: 23px;
    box-sizing: border-box;
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
}

.cont3>nav{
    display: block;
    width: 100%;
    border-bottom: 1px solid #AAAAAA;
    position: absolute;
    bottom: 0;
}