/* BASIC css start */
/* 메인상품진열 타이틀 */
.pro_title_area {text-align:center; padding:100px 0px 50px;}
.pro_title01 {font-size:16px; color:#313131; line-height:1; letter-spacing:-0.3px; font-weight:400; padding-bottom:8px;}
.pro_title02 {font-size:21px; color:#010101; font-family: 'Roboto', sans-serif; font-weight:600; line-height:1; letter-spacing:0.7px;} 

/* 메인이미지 슬라이드 : 시작  */
.swiper0 .swiper-slide a {display:block; height:650px; background-repeat:no-repeat; background-position:center top; width: 100%; }
.swiper0 .swiper-pagination0 {display:none;}

/* 메인이미지 슬라이드 : 탭메뉴 버튼 */
.swiper0_text {width:100%; font-size:0; text-align:center; position:absolute; bottom:30px; z-index:1;}
.swiper0_text .inner {width:1220px; margin:0 auto; position:relative !important; opacity: 0.7;}
.swiper0_text li {display:inline-block; width:282px; height:43px; line-height:43px; float:left; background-color:#fff; border:1px solid #e1e1e1; border-left:0px; }
.swiper0_text li:first-child {border-left:1px solid #e1e1e1;}
.swiper0_text li a {color:#000; line-height:43px; display:block; ; border-left:0px; font-size:15px; text-align:left; text-indent:20px; letter-spacing:-0.5px; font-weight:400;}
.swiper0_text li a:hover {color:#fff; background:rgba(0,0,0,0.3);}
.swiper0_text li.swiper_over a {color:#000; background:rgba(255,255,255,9);}
.swiper0_text li.swiper_over {border-top:1px solid #000;}

/* 메인이미지 슬라이드 : 좌/우 슬라이드버튼 */
.swiper0 .swiper-button-prev {width:43px; height:43px; background-color:#f7f7f7; border:1px solid #e5e5e5; background-image:url(/design/bspectrum/0755flattable/main_left.png); background-size:43px 43px; right:44px; margin-top:0px; left: auto;}
.swiper0 .swiper-button-next {width:43px; height:43px; background-color:#f7f7f7; border:1px solid #e5e5e5; background-image:url(/design/bspectrum/0755flattable/main_right.png); background-size:43px 43px; right:0px; margin-top:0px; left: auto;}
.swiper0 .swiper-button-prev:hover {background-color:#f2f2f2;}
.swiper0 .swiper-button-next:hover {background-color:#f2f2f2;}

/* 메인이미지 슬라이드 : 텍스트 관련 스타일 */
.swiper0_txt {text-align:left; position:relative; width:1220px; margin:0 auto ;}
.swiper0_txt .inner {float:left; margin-top:160px; margin-left:80px; opacity:0;}
.swiper0_txt .inner .t01 {color:#000; font-size:14px; font-family: 'Noto Sans KR', sans-serif; font-weight:400; letter-spacing:1px; line-height:1;}
.swiper0_txt .inner .t02 {color:#000; font-size:50px; font-weight:500; line-height:1.2; letter-spacing:-0.5px; padding-top:10px;}
.swiper0_txt .inner .t03 {color:#313131; font-family: 'Noto Sans KR', sans-serif; font-size:16px; font-weight:300; line-height:22px; padding-top:25px; }
.swiper0_txt .inner .t03 span {color: #e54010;}
.swiper0_txt .inner .t04 a {width:200px; height:40px; border:2px solid #000; line-height:40px; font-family:'Roboto', sans-serif; font-weight:600; font-size:11px; letter-spacing:1.3px; text-indent:20px; margin-top:50px; background:url(/design/bspectrum/0755flattable/slide_arrow.png) no-repeat; background-position:89% 15px; color:#000;}
.swiper0_txt .inner .t04 a:hover {text-indent:30px; background-position:80% 15px;}
.swiper0_txt .inner .t05 a {width:200px; height:40px; border:2px solid #000; line-height:40px; font-family:'Roboto', sans-serif; font-weight:600; font-size:11px; letter-spacing:1.3px; text-indent:20px; margin-top:50px; background:url(/design/bspectrum/0755flattable/slide_arrow_1.png) no-repeat; background-position:89% 15px; color:#000;}
.swiper0_txt .inner .t05 a:hover {text-indent:30px; background-position:80% 15px;}
.swiper0_txt .inner .t06 a {width:250px; height:40px; border:2px solid #000; line-height:40px; font-family:'Roboto', sans-serif; font-weight:600; font-size:11px; letter-spacing:1.3px; text-indent:20px; margin-top:50px; background:url(/design/bspectrum/0755flattable/slide_arrow_1.png) no-repeat; background-position:89% 15px; color:#000;}
.swiper0_txt .inner .t06 a:hover {text-indent:30px; background-position:80% 15px;}
.swiper0 .swiper-slide-active .swiper0_txt .inner { opacity: 1; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration:1.5s !important; animation-duration:1.5s !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* 메인이미지 슬라이드 미디어쿼리 */
@media screen and (max-width: 1260px) {
.swiper0_text .inner {width:1020px; }
.swiper0_text li {width:235px;}
.swiper0_text li a {text-indent:10px; }
.swiper0_txt .inner { margin-left:100px;}

}
/* 메인이미지 슬라이드 : 끝 */


/* 메인 아이콘정렬 */
.item-wrap .item-cont .info_icon span a {display:inline-block; width:30px; height:30px;}

/*new 버튼*/
.newButton {background-color:rgba(255,255,255,0.8); border-radius:33px; display:inline-block; cursor:pointer; color:#000000;font-family:Arial;font-size:11px; font-weight:bold; padding:6px 11px; text-decoration:none;}
.newButton2 {background-color:#ffffff; border-radius:33px; display:inline-block; cursor:pointer; color:#000;font-family:Arial;font-size:11px; font-weight:bold; padding:6px 11px; text-decoration:none;}
.newButton3 {background-color:#f6cd42; border-radius:33px; display:inline-block; cursor:pointer; color:#000;font-family:Arial;font-size:11px; font-weight:bold; padding:6px 11px; text-decoration:none;}


/* 메인 이벤트배너 관련 : 시작  */
.main_event {padding-top:50px;}
.main_event .fleft {width:600px;}
.main_event .fright {width:600px; }


/* 이벤트 배너01 경로  */
.event_ban01 {width:600px; height:230px; background-color:#f7f7f7; text-align:left; position:relative; background:url(/design/bspectrum/0755flattable/ban01.jpg) no-repeat center right; background-size: 600px 230px;}
.event_ban01 .inner {position:absolute; top:70px; left:70px;}
.event_ban01 .inner .t01 {color:#000; font-size:14px; font-family: 'Roboto', sans-serif; font-weight:600; letter-spacing:1px; line-height:1;}
.event_ban01 .inner .t02 {width:8px; height:2px; background-color:#000; float:left; margin:10px 0px 15px; font-size:0px; }
.event_ban01 .inner .t03 {color:#999; font-size:13px; font-family: 'Roboto', sans-serif; font-weight:300; line-height:1; letter-spacing:1.5px;}
.event_ban01 .inner .t04 {color:#000; font-size:18px; font-weight:400; line-height:18px; padding-top:5px; letter-spacing:-0.3px;} 

/* 이벤트 배너02 경로  */
.event_ban02 .ban01 {background:url(/design/bspectrum/0755flattable/ban02.jpg) no-repeat center center; width:290px; height:230px; float:left; background-color:#f7f7f7; position:relative;}
/* 이벤트 배너03 경로  */
.event_ban02 .ban02 {background:url(/design/bspectrum/0755flattable/ban03.jpg) no-repeat center center; width:290px; height:230px; float:right; background-color:#f7f7f7; position:relative;} 
.event_ban02 {height:230px; margin-top:20px; }
.event_ban02 .over { position:absolute; top:30px; width:100%; height:100%; background:rgba(255,255,255,0.8);  opacity:0; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; -webkit-backface-visibility: hidden;}
.event_ban02 .over .inner { transform: translate(-50%,-50%); position: absolute; top:50%; left:50%; width:90%;}
.event_ban02 .over span {  line-height:1; font-family:'Roboto', sans-serif; font-weight:600; display:block; text-align:center; font-size:12px; letter-spacing:1.3px;  color:#000;}
.event_ban02 .ban01:hover .over  {opacity:1; top:0px; }
.event_ban02 .ban02:hover .over  {opacity:1; top:0px; }


/* 이벤트 슬라이드배너 01 관련  */
.swiper3 { width:600px; margin:0 auto; background-color:#fff;}
.swiper3 .swiper-slide a {display:block; height:318px; background-repeat:no-repeat; background-position:center center;}
.swiper3_txt .arrow {width:48px; height:48px; background-color:#111; border-radius:50%; position:absolute; top:-26px; right:30px; background-image:url(/design/bspectrum/0755flattable/slide01_arrow.gif); background-size:20px 7px; background-repeat:no-repeat; background-position:center 20px; }
.swiper3_txt {text-align:left; position:relative; padding:30px 30px 60px 30px; background-color: #f7f7f7; }
.swiper3_txt .inner .t01 {color:#000; font-size:14px; font-family: 'Roboto', sans-serif; font-weight:600; letter-spacing:1px; line-height:1;}
.swiper3_txt .inner .t02 {width:8px; height:2px; background-color:#000; float:left; margin:10px 0px 15px; font-size:0px; }
.swiper3_txt .inner .t03 {color:#000; font-size:22px; font-weight:500; line-height:1; }
.swiper3_txt .inner .t04 {color:#313131; font-size:14px; font-weight:300; line-height:18px; padding-top:10px; }

/* 이벤트 슬라이드배너 01 : 좌/우 슬라이드버튼 */
.swiper3 .swiper-button-prev {width:30px; height:60px; background-image:url(/design/bspectrum/0755flattable/slide01_left.png); background-size:30px 60px; left:-1px; top:130px; margin-top:0px; left: auto;}
.swiper3 .swiper-button-next {width:30px; height:60px; background-image:url(/design/bspectrum/0755flattable/slide01_right.png); background-size:30px 60px; right:-1px; top:130px;  margin-top:0px; left: auto;}


/* 메인 이벤트배너 미디어쿼리 */
@media screen and (max-width: 1260px) {
.main_event {width:1020px; }
.main_event .fleft, .main_event .fright {width:500px;}
.event_ban02 .ban01, .event_ban02 .ban02 {width:240px;}
.event_ban01 .inner {left:50px;}
.swiper3 {width:500px;}
}



/* 메인탭상품 관련 */
.swiper4 {background-color:#fff;}
.swiper4_text {height:40px; font-size:0; width:1220px; margin:0 auto 40px; text-align:center;}
.swiper4_text li {width:100px; margin:0px 5px; display:inline-block; color:#9c9c9c; height:36px; line-height:36px; border:2px solid #c1c1c1; font-size:14px; letter-spacing:-0.5px; padding:0px 14px; text-align:center; cursor:pointer; position:relative;}
.swiper4_text li {-webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-backface-visibility: hidden; }
.swiper4_text li.swiper_over {height:36px; line-height:36px; border:2px solid #222; color:#222; padding:0px 18px; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-backface-visibility: hidden; }
.swiper4_text li.swiper_over .tab_on {width:13px; height:9px; position:absolute; top:36px; left:46%;  z-index:500; background:url(/design/bspectrum/0755flattable/tab_on.gif) no-repeat center center; }
.swiper4 .swiper-pagination4 {display:none;}
.swiper4 .swiper-slide {display:block;height:455px;background-color:#fff;}
/* 메인탭상품 관련 : 시작  */

/* 메인탭상품 관련 : 상품 순위  */
.ranking_number { width: 1220px; text-align: center;}
.ranking_number ul .number { font-size: 18px; color:#313131; width: 230px; height: 30px; float: left; list-style: none; margin-right: 17px; background-color:#fff; padding-top:12px; border-top:1px solid #929292;}
.ranking_number li:last-child {margin-right: 0;}

/*  메인탭상품 미디어쿼리 */
@media screen and (max-width: 1260px) { 
.swiper4_text {width:1020px; } 
.swiper4 .swiper-slide {height:530px;}
}
/* 메인탭상품 관련 : 끝 */



/* 이벤트 슬라이더 02 관련 */
.swiper2 {width:1220px; margin:0 auto; padding-top:0px !important;}
.swiper2 .swiper-slide a {display:block; height:330px; background-repeat:no-repeat; background-position:right top;}
.swiper2 .swiper-pagination-bullet-active {background: #000; }
.swiper2 .swiper-pagination-bullets { padding-top:30px; padding-bottom:50px; text-align:center;}
.swiper2 .swiper-slide-active .swiper2_txt .inner  { opacity: 1; -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2; -webkit-animation-duration:1.5s !important; animation-duration:1.5s !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.swiper2_txt {text-align:left; position:relative; width:1220px; }
.swiper2_txt .inner {float:left; padding-top:65px; width:50%; padding-left:100px;  opacity: 0; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-backface-visibility: hidden;}
.swiper2_txt .inner .t01 {color:#313131; font-size:16px; font-family: 'Noto Sans KR', sans-serif; font-weight:400; letter-spacing:1px; line-height:1;}
.swiper2_txt .inner .t02 {width:8px; height:0px; background-color:#000; font-family: 'Noto Sans KR', sans-serif; float:left; margin:10px 0px; font-size:0px; }
.swiper2_txt .inner .t03 {color:#000; font-size:35px; font-weight:500; font-family: 'Roboto', sans-serif; font-weight: 700; line-height:1;}
.swiper2_txt .inner .t04 {color:#424242; font-size:16px; font-family: 'Noto Sans KR', sans-serif; font-weight:300; line-height:22px; padding-top:25px; letter-spacing: -0.7px;}
.swiper2_txt .inner .t05 a {width:150px; height:40px; border:0px solid #000; line-height:40px; font-family:'Noto Sans KR',sans-serif; font-weight:500; font-size:16px; letter-spacing:1.0px; text-indent:0px; margin-top:20px; background:url(/design/bspectrum/0755flattable/slide_arrow.png) no-repeat; background-position:80% 15px; color:#000;}
.swiper0_txt .inner .t05 a:hover {text-indent:30px; background-position:80% 15px;}


/* 이벤트 슬라이더 02 미디어쿼리 */
@media screen and (max-width: 1260px) {
.swiper2 {width:1020px; }
.swiper2_txt .inner .t03 { font-size:26px; }
}





/* 이벤트 배너 04 관련 */
.event_ban04_area {position:relative; padding:70px 0px 50px;}

/* 이벤트 배너 04 배경이미지 경로 */
.event_ban04 {height:330px; background:url(/design/bspectrum/0755flattable/event_ban04.jpg) no-repeat center center; }
.event_ban04_txt {text-align:left; position:relative; width:1220px; margin:0 auto;}
.event_ban04_txt .inner {float:right; padding-top:90px; width:50%;}
.event_ban04_txt .inner .t01 {color:#000; font-size:14px; font-family: 'Roboto', sans-serif; font-weight:600; letter-spacing:1px; line-height:1;}
.event_ban04_txt .inner .t02 {width:8px; height:2px; background-color:#000; float:left; margin:10px 0px; font-size:0px;}
.event_ban04_txt .inner .t03 {color:#000; font-size:29px; font-weight:300; line-height:1; letter-spacing:-0.2px;}
.event_ban04_txt .inner .t04 {color:#888; font-size:14px; font-weight:300; line-height:22px; padding-top:25px; letter-spacing:-0.2px;}

/* 이벤트 배너 04 미디어쿼리 */
@media screen and (max-width: 1260px) {
.event_ban04 {width:1020px; margin: 0 auto;}
.event_ban04_txt {width:1020px; }
.event_ban04_txt .inner .t03 {font-size:26px;}
}




#main { position: relative; }
.area_video {width:100%;height:440px;margin:0 auto; background:#f3f3f3; position:relative;}
.inner_video {width:100%;position:relative;margin:0 auto; height:100%;}
.text_video {position:absolute; top:50%; transform:translate(0,-50%); left:70px; text-align:left; letter-spacing:-0.7px; }
.text_video h2 {font-size:25px; color:#000; font-family: 'Roboto', sans-serif; font-weight:normal; margin-bottom:10px; font-weight: 700;} 
.text_video .tit_video1 {font-size:20px; color:#535353; line-height:40px; margin-bottom:30px;}
.text_video .tit_video1 span {font-family: "Noto Sans KR",sans-serif; font-size:34px; color:#000; font-weight:500;}
.text_video .txt_info_video {font-size:17px; line-height:30px; font-weight:300; color:#4e4e4e; font-family: "Noto Sans KR", sans-serif;}
.R_video {position:absolute; top:50%; transform:translate(0,-50%); right:40px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.R_video .play_video {width:544px; height:306px;}
#main .visual-bner .bner ul li { float: left; margin-left: 5px; }/-->
.mprd-cm { margin-top: 40px; }
.mprd-cm .tit-prd { margin-top: 60px; text-align: center; }
.mprd-cm .tit-prd span { display: inline-block; text-align: center; min-width: 200px; font-size: 18px; color: #1e1e1e; padding: 12px 15px; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; }


.scroll-downs {
        top: 10px;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 0 0 84%;
        width: 34px;
        height: 55px;
    }
    
    .mousey {
        width: 3px;
        padding: 7px 10px;
        height: 25px;
        border-radius: 25px;
        border: 2px solid #fff;
        box-sizing: content-box;
    }
    
    .scroller {
        width: 3px;
        height: 8px;
        border-radius: 25%;
        background-color: #fff;
        animation-name: scroll;
        animation-duration: 2.2s;
        animation-timing-function: cubic-bezier(.15, .41, .69, .94);
        animation-iteration-count: infinite;
    }
    
    @keyframes scroll {
        
        0% {
            opacity: 0;
        }
        
        10% {
            transform: translateY(0);
            opacity: 1;
        }
        
        100% {
            transform: translateY(15px);
            opacity:0;
        }
        
        @keyframes downup {
            
            0% {
                opacity: 0;
                transform: translateY(0, 100px);
            }
            
            100% {
                opacity: 1;
                transform: translate(0, 0);
            }
        }
        
        @keyframes bounce {
            
            from,
            to {
                margin-bottom: 0;
                animation-timing-function: ease-out;
            }
            
            50% {
                margin-bottom: 8px;
                animation-timing-function: ease-in;
            }
        }
    }

/* BASIC css end */