@charset "utf-8";

/** ======== MAIN CSS SETTING ======== **/

/* common */
#main-pg > section:not(.bnr-sec) {padding:13rem 0;}

.mtit {font-size:4.2rem; font-weight:600; text-align:center; line-height:1; letter-spacing:-0.025em;}
.mtit .dot {color:#929292;}
.mtit small {font-size:3.2rem; font-weight:500;}
.mtit-desc {font-size:2rem; text-align:center; line-height:1;}
.mtit-desc + .mtit {margin-top:1.5rem;}
.mtit + .mtit-desc {margin-top:2rem;}




/* main visual */
#main-pg .mvisual {position:relative;}
#main-pg .mvisual .swiper-slide {height:77.1rem; background-repeat:no-repeat; background-position:center; background-size:cover;}
#main-pg .mvisual .swiper-slide > a {display:flex; flex-direction:column; height:100%; justify-content:center;}
#main-pg .mvisual .txtbox .tit {font-size:4rem; font-weight:600;}
#main-pg .mvisual .txtbox .txt {font-size:1.8rem; color:#929292; font-weight:400; line-height:1.7; margin-top:2.5rem;}
#main-pg .mvisual .txtbox .btnbox {margin-top:4.5rem;}
#main-pg .mvisual .control {position:absolute; bottom:5rem; left:50%; transform:translateX(-50%); z-index:2; text-align:center;}
#main-pg .mvisual .control .mv-pagination .swiper-pagination-bullet {background:#b8b8b8; opacity:0.5; width:12rem; height:2px; border-radius:0; margin:0 1rem;}
#main-pg .mvisual .control .mv-pagination .swiper-pagination-bullet-active {opacity:1;}



/* 중간배너, 하단배너 공통 */
#main-pg .bnr-sec {color:#fff; text-align:center;}
#main-pg .bnr-sec .inner {display: flex; flex-direction: column; justify-content: center; height: 100%;}
#main-pg .bnr-sec .btnbox {margin-top:5rem;}
#main-pg .bnr-sec .mbtn-st01 {color:#fff;}
#main-pg .bnr-sec .mbtn-st01:after {background-color:#fff;}
#main-pg .bnr-sec .mtit {font-weight:500;}


#main-pg .sec01 .mtit {margin-bottom:7rem;}
#main-pg .sec01 .swiper-container {overflow:inherit;}
#main-pg .sec01 .slide-box {max-width:88.2rem; margin:0 auto;}
#main-pg .sec01 .swiper-slide .img {position:relative;}
#main-pg .sec01 .swiper-slide .img .category {position:absolute; top:0; left:-5rem; display:flex; align-items:center; writing-mode:tb-rl; font-size:2rem; color:#929292; font-weight:500;}
#main-pg .sec01 .swiper-slide .img .category::before {display:inline-block; content:''; width:1px; height:2rem; background:#929292; margin:auto; margin-bottom:1rem;}
#main-pg .sec01 .swiper-slide .img .hoverbox {opacity:0; background:rgba(255,255,255,0.7); position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; transition:all .4s ease;}
#main-pg .sec01 .swiper-slide .img .hoverbox a {display:block; width:100%; height:100%;}
#main-pg .sec01 .swiper-slide .img:hover .hoverbox {opacity:1;}
#main-pg .sec01 .swiper-slide .txtbox {margin-top:2.5rem; position:relative;}
#main-pg .sec01 .swiper-slide .txtbox .it-name {font-size:3.2rem; font-weight:600; margin-bottom:2.5rem;}
#main-pg .sec01 .swiper-slide .txtbox .desc {color:#929292; line-height:1.625;}
#main-pg .sec01 .swiper-slide .txtbox .btnbox {position:absolute; top:0; right:0;}
#main-pg .sec01 .control .navi-btn {position:absolute; top:39%; transform:translateY(-50%); z-index:3;}
#main-pg .sec01 .control .navi-btn.swiper-button-disabled {opacity:0.3;}
#main-pg .sec01 .control .best-prev {left:10rem;}
#main-pg .sec01 .control .best-next {right:10rem;}


/*#main-pg .sec02 {height:58rem; background:url(/images/main/sec02-bg.png) no-repeat center/cover; background-attachment: fixed;}*/


#main-pg .sec03 .mtit {margin-bottom:7rem;}
#main-pg .sec03 .recom-swiper .img {position:relative;}
#main-pg .sec03 .recom-swiper .img .icobox {position:absolute; top:2rem; right:2rem;}
#main-pg .sec03 .recom-swiper .img .icobox .ico {margin-bottom:1rem; font-size:1.5rem; text-align:center; width:6.2rem; height:2.7rem; display:flex; align-items:center; justify-content:center;}
#main-pg .sec03 .recom-swiper .img .icobox .ico:last-child {margin-bottom:0;}
#main-pg .sec03 .recom-swiper .img .icobox .ico.best {color:#fff; background:#080808; border:1px solid #080808;}
#main-pg .sec03 .recom-swiper .img .icobox .ico.sale {color:#080808; background:#fff; border:1px solid #080808;}
#main-pg .sec03 .recom-swiper .img .hoverbox {opacity:0; background:rgba(255,255,255,0.7); position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; transition:all .4s ease;}
#main-pg .sec03 .recom-swiper .img .hoverbox a {display:block; width:100%; height:100%;}
#main-pg .sec03 .recom-swiper .img:hover .hoverbox {opacity:1;}
#main-pg .sec03 .recom-swiper .txtbox {margin:2.5rem 0; text-align:center;}
#main-pg .sec03 .recom-swiper .txtbox .category {font-size:1.5rem; color:#929292; margin-bottom:1rem;}
#main-pg .sec03 .recom-swiper .txtbox .it-name {font-size:1.8rem; font-weight:600; margin-bottom:2.5rem;}
#main-pg .sec03 .recom-swiper .txtbox .price {font-size:1.5rem;}
#main-pg .sec03 .recom-swiper .swiper-pagination-progressbar {position:inherit; top:auto; margin-top:4.5rem; height:2px; background:#ddd;}
#main-pg .sec03 .recom-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#080808;}

#main-pg .sec04 {background:#f3f3f3;}
#main-pg .sec04 .inner {display:flex; justify-content:space-between;}
#main-pg .sec04 .box {display:flex; justify-content:center; align-items:flex-end; position:relative; width:64rem; height:72rem; padding:7rem 2rem; text-align:center; transition:all .2s ease;}
/*#main-pg .sec04 .box:nth-child(1) {background:url(/images/main/sec04-box01img.png) no-repeat center/cover;}
#main-pg .sec04 .box:nth-child(1):hover {background:url(/images/main/sec04-box01img-on.png) no-repeat center/cover;}
#main-pg .sec04 .box:nth-child(2) {background:url(/images/main/sec04-box02img.png) no-repeat center/cover;}
#main-pg .sec04 .box:nth-child(2):hover {background:url(/images/main/sec04-box02img-on.png) no-repeat center/cover;}*/
#main-pg .sec04 .box  .logo {position:absolute; top:46%; left:50%; transform:translate(-50%,-50%);}
#main-pg .sec04 .box .txtbox .txt01 {font-size:2.4rem; color:#fff; font-weight:500; margin-bottom:1rem;}
#main-pg .sec04 .box .txtbox .txt02 {color:#fff; font-weight:400; margin-bottom:3.5rem;}
#main-pg .sec04 .box .txtbox span {color:#fff;}
#main-pg .sec04 .box .txtbox span::after {background:#fff;}

/*#main-pg .sec05 {height:52rem; background:url(/images/main/sec05-bg.png) no-repeat center/cover; background-attachment: fixed;}*/
#main-pg .sec05 .inner {padding-top: 5rem;}




@media screen and (max-width: 1340px) {
    #main-pg .mvisual .swiper-slide {background-position:center; background-size:cover; height:56rem;}
    #main-pg .mvisual .control {bottom:3rem;}

    #main-pg .sec01 .swiper-container {overflow:hidden;}
    #main-pg .sec01 .swiper-slide .img .category {left:1rem;}
    #main-pg .sec01 .control .navi-btn {width:2rem; top:40%;}
    #main-pg .sec01 .control .best-prev {left:2rem;}
    #main-pg .sec01 .control .best-next {right:2rem;}

    #main-pg .sec05 .inner {padding-top:2rem;}
}

@media screen and (max-width:1180px) {
    #main-pg .bnr-sec {background-attachment:inherit;}
    #main-pg .sec04 .box:nth-child(1) {background:url(/images/main/sec04-box01img-on.png) no-repeat center/cover;}
    #main-pg .sec04 .box:nth-child(2) {background:url(/images/main/sec04-box02img-on.png) no-repeat center/cover;}
}

@media screen and (max-width:1024px) {
    /* 1.8rem인건 1.7rem */ 
    
    .mtit {font-size:3.4rem;}
    .mtit small {font-size:2.6rem;}
    .mtit-desc {font-size:1.8rem; line-height:1.4;}

    #main-pg > section:not(.bnr-sec) {padding:10rem 0;}
        
    #main-pg .mvisual .swiper-slide {height:50rem;}
    #main-pg .mvisual .control .mv-pagination .swiper-pagination-bullet {width:7rem;}
    #main-pg .mvisual .txtbox .tit {font-size:3.4rem;}
    #main-pg .mvisual .txtbox .txt {font-size:1.7rem;}

    #main-pg .sec01 .swiper-slide .img .category {font-size:1.8rem;}
    #main-pg .sec01 .swiper-slide .txtbox .it-name {font-size:2.6rem;}

    #main-pg .sec02 {height:inherit; padding:10rem 0;}

    #main-pg .sec04 .box {height:inherit; padding:15rem 0 10rem 0; flex-wrap:wrap; justify-content:center;}
    #main-pg .sec04 .box > * {width:100%;}
    #main-pg .sec04 .box .logo {position:inherit; top:auto; left:auto; transform:none; margin-bottom:6rem;}
    #main-pg .sec04 .box .logo img {width:25rem;}
    #main-pg .sec04 .box .txtbox .txt01 {font-size:2.2rem;} 

    #main-pg .sec05 {height:inherit; padding:10rem 0;}
    
}

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

    .mtit {font-size:2.8rem;}
    .mtit small {font-size:2.2rem;}
    .mtit-desc {font-size:1.7rem;}

    #main-pg .sec01 .mtit {margin-bottom:4rem;}
    #main-pg .sec01 .swiper-slide .img .category {font-size:1.6rem;}
    #main-pg .sec01 .swiper-slide .img .category::before {margin-bottom:0.6rem; height:1.5rem;}
    #main-pg .sec01 .swiper-slide .txtbox .it-name {font-size:2.2rem;}
    #main-pg .sec02 {padding:8rem 0;}
    #main-pg .sec03 .mtit {margin-bottom:5rem;}
    #main-pg .sec03 .recom-swiper .img .icobox {top:1rem; right:1rem;}
    #main-pg .sec03 .recom-swiper .img .icobox .ico {width:5.5rem; height:2.5rem; margin-bottom:0.5rem;}
    #main-pg .sec03 .recom-swiper .swiper-pagination-progressbar {margin-top:3rem;}
    #main-pg .sec03 .recom-swiper .txtbox .it-name {margin-bottom:1.5rem;}

    #main-pg section.sec04 {background:none; padding:0;}
    #main-pg .sec04 .inner {flex-wrap:wrap; width:100%;}
    #main-pg .sec04 .box {width:100%; padding:10rem 0 7rem 0;}
    #main-pg .sec04 .box .logo {margin-bottom:3rem;}
    #main-pg .sec04 .box .logo img {width:20rem;}
    #main-pg .sec04 .box .txtbox .txt01 {font-size:2rem; margin-bottom:0.5rem;}

    #main-pg .sec05 {padding:8rem 0;}

}

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


    #main-pg .sec01 .control .navi-btn {top:33%; width:1.5rem;}
}