/* BASIC css start */
.wp{display: block;}
.mp{display: none;}

.fs_l{}
.fs_m{}
.fs_s{}
.fw600{}
.fw800{}
.fs_num{}
.fs_key{color: #f96512;}

.sleepIntro{width: 100%; position: relative;}

.container{max-width: 70%; margin: 0 auto; padding: 7% 0;}

/*헤더 네비부분*/
.toPnav{background: #f8f8f8; margin: 0 auto; width: 100%; position: fixed; z-index: 500;}
.toPnav ul{width: 30%; margin: 0 auto;}
.toPnav ul li{display: inline-block; width: 49%; text-align: center;}
.toPnav ul li a{display: block; padding: 7% 0; box-sizing: border-box;}
.toPnav ul li span{position: relative; color: #222; font-size: 18px; line-height: 20px; letter-spacing: -1px; transition: 0.3s;}
.toPnav ul li span::after {content: ''; width: 100%; height: 3px; background: #f96512; position: absolute; left: 1px; bottom: -8px; opacity: 0; transition: 0.3s;}
.toPnav ul li span:hover{color: #f96512;}
.toPnav ul li span:hover::after {opacity: 1;}
/*//헤더 네비부분*/

/*메인 비쥬얼 인트로*/
.slideEvent .swiper-wrapper{height: 40vh !important;}
.mainVisual{position: relative; padding-top: 3%;}
.mainVisual .txtBox{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50; width: 100%;}
.mainVisual .txtBox .fs_l{font-size: 80px; text-align: center; width: 100%; color: #fff; font-weight: 800;}
.mainVisual .imgBox{}
.slideEvent .img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center center; background-size: cover;}
/*//메인 비쥬얼 인트로*/


#section01{}
#section01 .con{margin-bottom: 5%;}
#section01 .con:last-child{margin-bottom: 0%;}
#section01 .con .leftTit{display: inline-block; width: 30%; vertical-align: top;}
#section01 .con .leftTit .fs_m{font-size: 40px; font-weight: 900; vertical-align: top; color: #ddd; margin-left: 42%;}

#section01 .con .rightTit{display: inline-block; width: 60%; padding-left: 3%;}
#section01 .con .rightTit .fs_m{font-size: 36px; line-height: 1.25; font-weight: 800; margin-bottom: 3%;}
#section01 .con .rightTit .fs_s{font-size: 20px; line-height: 1.35; font-weight: 400;}

.bnrImg{}
.bnrImg img{width: 100%;}

#section02{background: #f7f7f7; text-align: center; padding: 5% 0; box-sizing: border-box;}
#section02 .txtBox p.fs_m{font-size: 40px; font-weight: 800; }
#section02 ul{width: 60%; margin: 3% auto 0;}
#section02 ul li{display: inline-block; margin:0 1% 2%; padding: 2% 1%; box-sizing: border-box; background: #fff; width: 300px; height: 220px;border-radius: 20px; position: relative;}
#section02 ul li .viewTxt{left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); position: absolute;}
#section02 ul li .fs_num{color:#f96512; font-weight: 800; position: relative;font-size: 24px;}
#section02 ul li .fs_num:after{content: ''; width: 100%; height: 3px; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); display: block; background: #f96512;}
#section02 ul li .fs_l{color: #f96512; font-size: 30px; margin-top: 5%; line-height: 1.15; font-weight: 600;}
#section02 ul li .hideTxt{width: 300px; height: 220px; border-radius: 20px; background: #fff; padding: 13% 6%; box-sizing: border-box; text-align: left; opacity: 0; position: absolute; left: 0; top: 0; transition: 0.3s; }
#section02 ul li .hideTxt:hover{opacity: 1; cursor: pointer;}
#section02 ul li .hideTxt .fs_m{font-size: 19px; font-weight: 800; line-height: 1.25; text-align: center;}
#section02 ul li .hideTxt .fs_s{font-size: 15px; font-weight: 400; margin-top: 5%; line-height: 1.25; letter-spacing: -0.8px;}

#sectino03{padding: 7% 0;box-sizing: border-box;margin: 0 auto;text-align: center;}
#sectino03 .container{padding: 0;}
#sectino03 .imgBox{display: inline-block; width: 36%; padding: 0.5%; box-sizing: border-box;}
#sectino03 .imgBox img{width: 100%;}

#section05 .workSlide{background: #ff9b63; padding: 3% 0; text-align: center; margin:5% auto 0; }
#section05 .workSlide .fs_s { font-size: 24px; line-height: 1.25; color: #fff; font-weight: 400; }
#section05 .workSlide .fs_ss {font-size: 20px; margin-top: 1%; color: #ffffffb5;}


.interImg img { width: 100%; margin: 0 auto; text-align: center;}

#section04{margin-bottom: 7%;}

.withBnr{background: url(http://sleepgongg.img9.kr/brandintro/2023/08.png)no-repeat center; background-size: cover; padding: 4% 0; box-sizing: border-box;}
.withBnr .fs_m {font-size: 39px;text-align: center;font-weight: 600;}
.withBtn {width: 13%;background: #f96512;border-radius: 30px;margin: 1% auto 0;}

.withBtn a {font-size: 24px;text-align: center;margin: 0 auto;display: block;font-weight: 600;color: #fff;letter-spacing: -0.4px;padding: 5% 0;box-sizing: border-box;}


/*슬라이드부분*/


    @media (max-width: 800px) {
        
        .fw800{font-weight: 800;}
        .mp{display: block;}
        .wp{display: none;}
        
        .container{max-width: 100%; padding: 15% 0;}
        
        #section01 {padding: 0% 0 0%;}
        #section02 {padding: 15% 0 0;}
        #sectino03 {padding: 15% 0 0;}
        #section04 {padding: 15% 0 0;}

        
        .toPnav ul {width: 100%;margin: 0 auto;}
        .mainVisual .txtBox .fs_l {font-size: 54px; line-height: 0.95;}
        
        .slideEvent {padding-top: 9%;}
        .slideEvent .img{background-size: cover;}
        .txtBox .fs_m {color:#4e4e4e; font-size: 27px;text-align: center;font-weight: 800;    margin-bottom: 5%; line-height: 1.15;}

        
        #section01 .con {margin-bottom: 15%; padding: 0 5% 0;}
        #section01 .con .leftTit {width: 100%;vertical-align: top;text-align: left;}
        #section01 .con .leftTit .fs_m{margin-left: 0;}
        #section01 .con .rightTit {width: 100%; padding-left: 0;}
        #section01 .con .rightTit .fs_s{font-size: 16px; line-height: 1.35; font-weight: 400; text-align: justify;}
        #section01 .con .rightTit .fs_m {font-size: 24px;}
        
        div#section02\ mp{background: #f8f8f8; padding: 15% 0 15%;}
        div#section02\ mp ul { width: 80%; margin: 0 auto; text-align: center;}
        
        
        .fs_num {font-size: 19px;font-weight: 800;color: #f96512;}
        div#section02\ mp ul li {height: 200px; margin: 0% 0 8%; background: #fff; padding: 8% 6%; box-sizing: border-box; border-radius: 25px;}
        div#section02\ mp ul li .viewTxt .fs_l{color: #f96512; font-size: 24px; margin: 1% 0 5%; font-weight: 700; line-height: 1.25;}
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: -3px !important;
        left: 0;
        width: 100%;
    }
        
        .swiper-pagination-bullet-active {
    opacity: 1;
    background: #f96512 !important;
}
        
        
        #sectino03 .imgBox{width: 49.5%; margin-bottom: 0.5%;}
        #sectino03 .imgBox img{width: 100%;}
        
        #section05 .workSlide{padding: 8% 0; margin: 0% auto 7%; text-align: center;}
        #section05 .workSlide .fs_s{font-size: 15px;}
        #section05 .workSlide .fs_ss{font-size: 15px; margin-top: 3%;}
        
        .interWrap{padding: 0% 0 10%;}
        
        .withBnr{padding: 12% 0;}
        .withBnr .fs_m{font-size: 24px;}
        .withBtn {width: 43%;}
        .withBtn a {font-size: 18px; margin: 10% auto 0;}
        
        #section05 .workSlide .swiper-button-prev, .swiper-container-rtl .swiper-button-next{width: 18px;
    height: 23px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    left: 5px;
    background: url(https://sleepgongg.img9.kr/brandintro/2023/left.png) no-repeat center;
    background-size: cover;}
        #section05 .workSlide .swiper-button-next, .swiper-container-rtl .swiper-button-prev{width: 18px;
    height: 23px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    right: 5px;
    background: url(https://sleepgongg.img9.kr/brandintro/2023/right.png) no-repeat center;
    background-size: cover;}
        
        #section05 .workSlid .swiper-pagination{    width: 80%;
    height: 1px;
    left: 50%;
    bottom: 0px;
    position: absolute;
    z-index: 50;
    background: #000;
    transform: translateX(-50%);}
        
        
    .mp.swiper-containe.mySwipermo.swiper-container-horizontal.swiper-container-android{overflow: hidden; position: relative;}
        
        
}


/* BASIC css end */