/* BASIC css start */
/* 메인 배너 */


#mainSpot {
    position: relative;
    width: 100%;
    max-width: 1903px;
    margin: 0 auto;
    height: 1200px;
    overflow: hidden;
    flex-wrap: wrap;
    margin: 0;
    padding:0;
}

#mainSpot .inner {
    margin-left: -952px;
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
}

#mainSpot .inner .video .video1 {
    position: relative;
}


#mainSpot .inner .video .video1 .textContainer {
    visibility: visible;
    display: inline-block;
    color: #fff;
    transform: translate(-50%, -50%);
    font-size: 100px;
    width: 100%;
    position: absolute;
    top: 40%;
    left: 50%;
    text-align: center;
    font-family: 'Noto Sans KR' ;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#mainSpot .inner .video .video1 .textContainer p {
    opacity:0;
    animation: fadeInOut 20s infinite;
    position: absolute;
    width: 100%;
    margin: 0;
}

#mainSpot .inner .video .video1 .textContainer .text01 { animation-delay: 0s; }
#mainSpot .inner .video .video1 .textContainer .text02 { animation-delay: 4s; }
#mainSpot .inner .video .video1 .textContainer .text03 { animation-delay: 8s; }
#mainSpot .inner .video .video1 .textContainer .text04 { animation-delay: 12s; }
#mainSpot .inner .video .video1 .textContainer .text05 { animation-delay: 16s; }

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    3% {
        opacity: 1;
    }
    5% {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


/* 메인 영역 */

/* 전체 컨테이너 스타일 */
.mainwrap {
    display : reative;
}

.maincontainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /*align-items: left; 가운데 정렬 */
    justify-content: space-between;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* 제목 스타일 */
.title {
    font-size: 56px;
    font-weight: bold;
    font-family: 'Noto Sans KR';
    color: #0062ff;
    position: relative;
    left: 20%;
    padding:5%
}

/* 영상과 텍스트 컨테이너 스타일 (수평 정렬) */
.mainbox_01, .mainbox_02, .mainbox_03 {
    display: flex;
    flex-direction: row;     /* 요소들을 가로로 정렬 */
    align-items: center;     /* 수직 가운데 정렬 */
    justify-content: center; /*가로 중앙 정렬 */
    margin : 0px, auto;
    gap: 20px;               /* 영상과 텍스트 사이 간격 */
    transform: translate(-5%, 0%) translate3d(0px, 0px, 0px);
}


.video_01, .video_02, .video_03 {
    display : flex;
    position: absolute;
    width : 5%;
    height : 5%;
    colum-gap: 20px;
    border-radius: 20px; /* 모서리 둥글게 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* 텍스트 컨테이너 스타일 */
.text-container {
    width : 10%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 왼쪽 정렬 */
}

/* 제목 스타일 */
.maintitle_01, .maintitle_02, .maintitle_03 {
    font-family: 'Noto Sans KR';
    font-weight: bold;
    font-size: 72px;
    color: #000000;
    margin-bottom: 5px;
}

/* 본문 텍스트 스타일 */
.maintext_01, .maintext_02, .maintext_03 {
    font-family:'Noto Sans KR';
    font-weight: light;
    font-size: 16px;
    color: #777777;
}




/* 중간배너영역 */
.middlebnnr{ 
    flex-wrap: wrap;
    margin: 80px 0 0;
}

.middlebnnr a img{ 
    width: 100%;
}

/* 상품타이틀 */
.setionTit{position: relative; margin: 100px 0 30px; text-align: center;}
.setionTit h2{color: #222222; font-size: 40px; font-family: 'Montserrat','Noto Sans KR', sans-serif; font-weight: bold;}
.setionTit a{position: absolute; top: 50%; transform: translateY(-50%); right: 0;}

/* 상품 목록 영역 */
.product-wrap { margin:0 auto; position:relative; width:1200px }
.item-wrap, .item-wrap .item-cont{width:1200px}
.item-wrap .item-cont .item-list:nth-of-type(3n){margin-right:0;}
.item-wrap .item-cont .item-list{ position: relative; padding:0; margin: 0 8px 8px 0;}
.item-wrap .item-cont .item-list .prd-info{position: absolute; width: 100%; height: 100%; padding: 0; text-align: left; z-index: 99; bottom: 0; left: 0; background: rgba(0,0,0,0.5); opacity:0;}
.item-wrap .item-cont .item-list .prd-info.on{opacity:1;}
.item-wrap .item-cont .item-list .prd-info a{display: block; width: 100%; height: 100%;}
.item-wrap .item-cont .item-list .prd-info a > ul{ position: absolute; bottom: 40px; left: 0; padding: 0 26px;}
.item-wrap .item-cont .item-list .prd-name{color: #fff; font-size: 20px; font-family: 'Noto Sans KR',sans-serif;}
.item-wrap .item-cont .item-list .prd-subname{ margin-top: 17px; padding: 0; border: 0; color: #fff; font-family: 'Noto Sans KR',sans-serif; font-size: 15px;}

/* contact */
.contactArea{width: 1200px; margin: 0 auto 150px;}
.contactArea ul{ padding: 25px 0 0; font-size: 0;}
.contactArea ul li{ display: inline-block; width: 385px; padding: 0px 68px; border-right: 1px solid #eee; box-sizing: border-box;}
.contactArea ul li:nth-of-type(1){ padding-left: 0;}
.contactArea ul li:nth-of-type(3){ padding-right: 0; border-right:0;}
.contactArea ul li:after{content:''; display:block; clear:both}
.contactArea ul li img{ float: left; margin: 7px 50px 0 0;}
.contactArea ul li .contact_txt{ float: left;}
.contactArea ul li .contact_txt p{color: #555; font-size: 15px; font-family: 'Noto Sans KR',sans-serif; font-weight: 300; line-height: 22px;}
/* BASIC css end */