/*font*/
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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


/*공통*/
.containe {
  max-width:1300px;
  margin:0 auto;
  height: inherit;
}

.content_p{padding: 150px 0;}

.sleep_titles .title_up{font-size: 18px;color: #8c8c8c;text-align: center;letter-spacing: 5px;}
.sleep_titles .title{font-size: 46px;font-weight: 600;letter-spacing: -2px;text-align: center;position: relative;line-height: 1.35;}
.sleep_titles .title span{font-size: 46px;color: #0c80c5;font-weight: 600;}

/*sleep_item*/
#sleep_item{background: url(../../images/sleepban1_bg.jpg) 50% no-repeat;background-size: cover;}
.sleep_titles .title_up{color: #d9d9d9;}
.sleep_item .sleep_titles .title{color: #fff;font-weight: 500;}
.sleep_item ul{overflow: hidden;display: flex;justify-content: center;margin-top: 20px;}
.sleep_item ul li{color: #fff;font-size: 30px;float: left;padding: 10px 20px;position: relative;font-weight: 500;z-index: 1;text-align: center;}
.sleep_item ul li:before{position: absolute;content: "";left: 0;bottom: 8px;width: 100%;height: 35%; background:rgba(143, 180, 207, .6);z-index: -1;}
.sleep_item ul li:after{position: absolute;content: "";top: 55%;right: 0;width: 3px;height: 30px;background: #e5e5e5;transform: translateY(-50%);}
.sleep_item ul li:last-child:after{display: none;}


/*sleep_safe*/
.safe_m{display: none;}
.sleep_safe .sleep_titles .title{width: fit-content;margin: 0 auto;}
.sleep_safe .sleep_titles .title:after{content: ""; position: absolute;width: 5px;height: 27px;background: #4ca5d7;top: 0;right: -20px;}
.sleep_safe .sleep_titles .title:before{content: ""; position: absolute;width: 27px;height: 5px;background: #4ca5d7;top: 10.5px;right: -31px;}

.safe_cir, .safe_text{display: flex;}
.safe_cir li, .safe_text li{width: 33.3333%;text-align: center;padding: 0 5px;}
.safe_cir{margin-top: 80px;}
.safe_cir li{font-weight: 400;position: relative;display: flex; justify-content: center;}
.safe_cir li:after{content: "";position: absolute;top: 50%;left: 0;width: 2px;height: 50%;background: #e5e5e5;transform: translateY(-50%);}
.safe_cir li:first-child:after{display: none;}
.safe_cir li span{color: #0c80c5;font-weight: 500;font-size: 34px;letter-spacing: -1px;}
.safe_cir li p{font-size: 30px; width: 220px;height: 220px;border: 8px solid #0c80c5;border-radius: 300%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.safe_text{margin-top: 20px;}
.safe_text li{font-size: 22px; letter-spacing: -1px;}

/*sleep_recom*/
#sleep_recom{background: url(../../images/sleeprecom_bg.jpg) 50% no-repeat; background-size: cover;overflow: hidden;}
.sleep_recom .recom{color: #808080;font-size: 24px;padding: 18px 0 30px 0;text-align: center;font-weight: 300;}
.sleep_recom  .recom_box{display: flex;}
.recom_box .recom_left{width: 47%;background: url(../../images/sleeprecom_img.jpg) 60% 50% no-repeat; background-size: cover;}
.recom_box .recom_right{width: 53%;background: #0c80c5;padding: 45px 50px;}
.recom_right li{color: #fff;position: relative;font-size: 24px;font-weight: 300;margin-bottom: 20px;letter-spacing: -1px;padding-left: 40px;}
.recom_right li:last-child{margin-bottom: 0;}
.recom_right li:after{content: "";position: absolute;background: url(../../images/recom_list.png) no-repeat;background-size: cover;top: 7px;left: 0;width: 27px;height: 25px;}
.sleep_recom .recom_b{margin-top: 60px;text-align: center;font-size: 32px;letter-spacing: -1px;line-height: 1.4;}
.sleep_recom .recom_b span{font-weight: 600;}

/*sleep_step*/
#sleep_step{background: #f6f6f6;overflow: hidden;}
.sleep_step{position: relative;z-index: 1;}
.sleep_step .sleep_titles .title{width: fit-content;margin: 0 auto;position: relative;padding: 0 20px;}
.sleep_step .sleep_titles .title:after{width: 40%;height: 1px;background: #707070;position: absolute;content: "";right: 100%;top: 50%;transform: translateY(-50%);}
.sleep_step .sleep_titles .title:before{width: 40%;height: 1px;background: #707070;position: absolute;content: "";left: 100%;top: 50%;transform: translateY(-50%);}
.step_img{width: 1000px; margin: 0 auto;margin-top: 50px;overflow-x: auto;}
.step_cir{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: -1;animation: imgbs 10s infinite;}
@keyframes imgbs{
    0%{transform: scale(1);transform: translate(-50%, -50%);}
    50%{transform: scale(0.7);transform: translate(-50%, -50%);}
    100%{transform: scale(1);transform: translate(-50%, -50%);}
}

/*sleep_machine*/
.sleep_machine .sleep_bar{position: relative;height: 100px;}
.sleep_machine .sleep_bar:after{content: ""; position: absolute;width: 5px;height: 32px;background: #0c80c5;transform: rotate(25deg) translate(-50%, -50%); top: 50%;left: 50%;transition: all 0.2s ease-in;}
.sleep_machine ul{overflow: hidden;margin-top: 10px;}
.sleep_machine ul li{float: left;width: 30%;margin-left: 5%;}
.sleep_machine ul li:first-child{margin-left: 0;}
.sleep_machine ul li .machine_img{overflow: hidden;border: 1px solid #909090;}
.sleep_machine ul li .machine_img img{width: 100%;transition: all 0.5s ease-in-out;}
.sleep_machine ul li:hover .machine_img img{transform: scale(1.1);}
.machine_text .m_tt1{font-size: 24px;color: #434343;margin-top: 15px;margin-bottom: 10px;}
.machine_text .m_tt2{font-size: 18px;color: #808080;font-weight: 300;}

/*sleep_faq*/
#sleep_faq{background: url(../../images/sleepfaq_bg.jpg) 60% 50% no-repeat; background-size: cover;}
.fnq_textimg{width: fit-content;margin: 0 auto;}
.sleep_faq .title span{color: #fff;font-weight: 500;position: relative;z-index: 1;padding: 0 10px;}
.sleep_faq .title span:after{content: "";position: absolute;width: 100%;height: 80%;left: 0;top: 57%;transform: translateY(-50%);background: #0c80c5;z-index: -1;}
.sleep_faq ul{overflow: hidden;margin-top: 50px;}
.sleep_faq ul li{float: left;width: 49%;margin-right: 2%;background: #fff;margin-bottom: 2%;height: 260px;display: flex;align-items: flex-start;padding: 30px 20px;}
.sleep_faq ul li:nth-child(2n){margin-right: 0;}
.faq_nom{margin-right: 20px;position: relative;top: -9px;}
.faq_nom p{font-family: 'GmarketSansMedium';font-size: 70px;letter-spacing: -2px;}
.faq_nom p span{font-family: 'GmarketSansMedium';font-size: 70px;color: #0c80c5;}
.faq_text .faq_tt1{font-size: 26px;font-weight: bold;letter-spacing: -1px;margin-bottom: 12px;line-height: 1.2}
.faq_text .faq_tt2{font-size: 18px;font-weight: 300;}
.faq_text .faq_tt2 span{font-size: 18px;color: #0c80c5;font-weight: 500;}

/*sleep_first*/
#sleep_first{position: relative;z-index: 1;overflow: hidden;}
#sleep_first:after{position: absolute;content: "";left: 0;bottom: 0;width: 100%;height: 70%;background: #f2f2f2;z-index: -1;}
.sleep_first{display: flex;align-items: flex-end;position: relative;}
.sleep_first .sleep_first_img{background: url(../../images/sleepsafe_img.jpg) 50% no-repeat;width: 48%;height: 500px;margin-right: 4%;background-size: cover;}
.sleep_first .sleep_first_texts{width: 48%;}
.sleep_first_texts .first_tt{margin-bottom: 25px;}
.sleep_first_texts .first_tt span{color: #0c80c5;}
.sleep_first_texts .first_tt1{font-family: 'Noto Serif KR', serif;font-weight: bold;font-size: 32px;line-height: 1.3;}
.sleep_first_texts .first_tt1 span{font-family: 'Noto Serif KR', serif;}
.sleep_first_texts .first_tt2{font-size: 22px;font-weight: 300;letter-spacing: -1px;}
.sleep_first_texts .first_tt2 span{font-weight: 400;}
.sleep_first_texts .first_tt3{margin-bottom: 0 !important;}
.first_logo{position: absolute;bottom: -50px;right: 0;}


/*sleep_teb*/
#tab_wrap{
    margin-bottom: 50px;padding-top: 100px;
}

.tab_wrap{
    width: 1000px;
    height: inherit;
    margin: 0 auto;
}

ul.tabs { width: 25%; color:#555; margin: 0; padding: 0; height: 30px;  float: left;} 
ul.tabs li {
    position: relative;
    cursor: pointer;
    line-height: 30px;
    border-left: 0;
    border-bottom: 0;
    background: #f2f2f2;
    font-size: 22px;
    padding: 1.745vw 1vw;
    font-weight: 500;
    color: #000 !important;
} 

ul.tabs li.active { background-color:#7d7d7d; color:#fff !important; background: #007fc6;} 
.tab_container { float: left;-webkit-box-sizing:border-box; box-sizing:border-box; border: 10px solid #007fc6; width: 75%;} 
.tab_content img{width: 100%;}

.swiper-slide{
    width: 100% !important;
}

.swiper-button-prev, .swiper-button-next{
    filter: drop-shadow(2px 3px 3px black);
}


@media(max-width:1330px){
    .containe{width: 96%;}
    .sleep_titles .title_up{font-size: 14px;}
    .sleep_titles .title, .sleep_titles .title span{font-size: 40px;}
    
    /*sleep_item*/
    .sleep_item ul li{padding: 10px 18px;font-size: 24px;}
    
    /*sleep_safe*/
    .safe_cir li p{font-size: 26px;}
    .safe_cir li p span{font-size: 28px;}
    .safe_text li br{display: none}
    .safe_text li{font-size: 19px;}
    
    /*sleep_recom*/
    .recom_box .recom_right{padding: 35px 30px;}
    .sleep_recom .recom{font-size: 22px;}
    .recom_right li{font-size: 20px;padding-left: 36px;}
    .recom_right li:after{width: 25px;height: 23px;top: 3px;}
    .sleep_recom .recom_b{font-size: 30px;}
    
    /*sleep_machine*/
    .machine_text .m_tt2 br{display: none;}
    
    /*sleep_fnq*/
    .fnq_textimg{display: flex;justify-content: center;}
    .fnq_textimg img{width: 75%;}
    .sleep_faq ul li{padding: 20px 15px;}
    .faq_nom p, .faq_nom p span{font-size: 60px;}
    .faq_text .faq_tt1{font-size: 24px;margin-bottom: 8px;}
    
    /*sleep_tab*/
    ul.tabs li{
        font-size: 2.2vw;
        padding: 2.5vw 1vw;
        
    }
}

@media(max-width:1080px){
    /**/
    .content_p{padding: 100px 0;}
    .sleep_titles .title_up{font-size: 13px;}
    .sleep_titles .title, .sleep_titles .title span{font-size: 34px;}
    
    /*sleep_item*/
    .sleep_item ul li{font-size: 22px;}
    
    /*sleep_step*/
    .step_img, .step_img img{width: 100%;}
    
    /*sleep_faq*/
    .sleep_faq ul li{height: 360px;}
    .faq_nom{margin-right: 16px;}
    .faq_nom p, .faq_nom p span{font-size: 54px;}
    
    
    /*tab*/
    #tab_wrap .container{width: 100%;}
    .tab_container{border: 5px solid #007fc6;}
    ul.tabs{width: 23%;}
    .tab_wrap .container{padding-left: 0 !important;padding-right: 0 !important;width: 77%;}
    .tab_container{width: 77%;}
}

@media(max-width:800px){
    /**/
    .content_p{padding: 70px 0;}
    .sleep_titles .title_up{font-size: 12px;}
    .sleep_titles .title, .sleep_titles .title span{font-size: 30px;}
    
    /*sleep_item*/
    .sleep_item ul li{padding: 8px 14px;}
    .sleep_item ul li:after{top: 51%;height: 22px;}
    
    /*sleep_safe*/
    .sleep_safe .sleep_titles .title:after{height: 23px;right: -21.5px;}
    .sleep_safe .sleep_titles .title:before{width: 23px;top: 9px;}
    .safe_cir li p{width: 150px;height: 150px;border: 5px solid #0c80c5;font-size: 22px;}
    .safe_cir li p span{font-size: 23px;}
    .safe_text li{font-size: 18px;}
    
    /*sleep_recom*/
    .sleep_recom .recom_box{flex-direction: column;}
    .recom_box .recom_left{width: 100%;height: 400px;}
    .recom_box .recom_right{width: 100%;}
    .sleep_recom .recom{font-size: 21px;}
    .sleep_recom .recom{font-size: 20px;}
    .sleep_recom .recom_b{font-size: 26px;}
    
    /*sleep_machine*/
    .sleep_machine .sleep_bar{height: 80px;}
    .sleep_machine .sleep_bar:after{width: 4px;}
    .sleep_machine ul li{width: 32%;margin-left: 2%;}
    .machine_text .m_tt1{font-size: 22px;margin-top: 5px;margin-bottom: 5px;}
    .machine_text .m_tt2{font-size: 17px;}
    
    /*sleep_fnq*/
    .sleep_faq ul{margin-top: 30px;}
    .faq_nom{margin-right: 12px;}
    .sleep_faq ul li{height: auto; width: 100%;margin-right: 0;}
    .sleep_faq ul li:last-child{margin-bottom: 0;}
    .faq_nom p, .faq_nom p span{font-size: 44px;}
    .faq_text .faq_tt1{font-size: 22px;}
    .faq_text .faq_tt2, .faq_text .faq_tt2 span{font-size: 17px;}
    
    /*sleep_first*/
    .sleep_first_texts .first_tt{margin-bottom: 20px;}
    .sleep_first_texts .first_tt1{font-size: 28px;}
    .sleep_first_texts .first_tt2{font-size: 20px;}
    
    /*tab*/
    #tab_wrap{padding-top: 70px;}
    
}

@media(max-width:480px){
    /**/
    .content_p{padding: 40px 0;}
    .sleep_titles .title_up{font-size: 10px;letter-spacing: 4px;}
    .sleep_titles .title, .sleep_titles .title span{font-size: 24px;letter-spacing: -1px;}
    /*sleep_item*/
    .sleep_item ul{flex-direction: column;align-items: center;margin-top: 0;}
    .sleep_item ul li{font-size: 20px;width: fit-content;}
    .sleep_item ul li:after{width: 0;}
    
    /*sleep_safe*/
    .safe_cir, .safe_text{display: none;}
    .safe_m{display: block;}
    .safe_m ul{display: flex;align-items: center;justify-content: center;flex-direction: column;}
    .safe_m ul li{display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 25px;}
    .sm_cir{display: flex;align-items: center;justify-content: center;width: 200px;height: 200px;border: 5px solid #007fc6;flex-direction: column;border-radius: 500%;}
    .sm_cir span{color: #007fc6;font-size: 24px;font-weight: 600;letter-spacing: -0.7px;}
    .sm_cir p{font-size: 22px;}
    .sm_text{font-size: 16px;text-align: center;margin-top: 5px;}
    /*.sleep_safe .sleep_titles .title:after{height: 19px;right: -16.5px;width: 4px;}
    .sleep_safe .sleep_titles .title:before{top: 7px;width: 19px;height: 4px;}
    .safe_cir{margin-top: 30px;}
    .safe_cir li p{width: 120px;height: 120px;border: 3px solid #0c80c5;font-size: 18px;}
    .safe_cir li:after{width: 1px;}
    .safe_cir li p span{font-size: 18px;}
    .safe_text{margin-top: 10px;}
    .safe_text li{font-size: 16px;line-height: 1.6;}
    .sleep_recom .recom{padding: 10px 0 22px 0;font-size: 18px;}*/
    
    /*sleep_recom*/
    .sleep_recom .recom{font-size: 18px;}
    .recom_box .recom_right{padding: 20px;}
    .recom_right li{font-size: 18px;margin-bottom: 18px;}
    .sleep_recom .recom_b{font-size: 20px;margin-top: 30px;}
    
    /*sleep_step*/
    .step_img{margin-top: 20px;}
    .sleep_step .sleep_titles .title:before{width: 25%;left: 95%;}
    .sleep_step .sleep_titles .title:after{width: 25%;right: 95%;}
    
    /*sleep_machine*/
    .sleep_machine .sleep_bar{height: 42px;margin-bottom: 6px;}
    .sleep_machine .sleep_bar:after{width: 3px;height: 22px;}
    .sleep_machine ul{display: flex;justify-content: center;align-items: center;width: 80%;margin: 0 auto;flex-direction: column;}
    .sleep_machine ul li{margin-top: 30px;margin-left: 0;width: 100%;}
    .sleep_machine ul li:first-child{margin-top: 0;}
    .machine_text .m_tt1{font-size: 20px;}
    .machine_text .m_tt2{font-size: 16px;}
    
    /*sleep_faq*/
    .fnq_textimg img{width: 60%;}
    .faq_text .faq_tt1{font-size: 20px;}
    .faq_text .faq_tt2, .faq_text .faq_tt2 span{font-size: 16px;line-height: 1.5;}
    
    /*sleep_first*/
    #sleep_first:after{height: 63%;}
    .sleep_first{flex-direction: column;}
    .sleep_first .sleep_first_img{width: 100%;height: 400px;margin-right: 0;}
    .sleep_first .sleep_first_texts{width: 100%;margin-top: 10px;}
    .sleep_first_texts .first_tt1{font-size: 26px;}
    .sleep_first_texts .first_tt2{font-size: 18px;}
    
    /*tab*/
    ul.tabs li{padding: 1vw 1vw; line-height: 3.5vw}
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 3px !important;transform: scale(0.6) !important;}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        left: 3px !important;transform: scale(0.6) !important;
    }
    
    /*tab*/
    #tab_wrap{margin-top: 50px;padding-top: 0;}
    ul.tabs{width: 100% !important;overflow: hidden;float: none; height: auto !important;}
    ul.tabs li {
    padding: 15px 5px !important; 
    line-height: 3.5vw !important; 
    float: left !important; 
        font-size: 16px !important;
        width: 50% !important;
        text-align: center !important;
}
    .tab_container{width: 100% !important;float: none;margin-top: 10px;}
}


@media(max-width:380px){
    /**/
    .sleep_titles .title, .sleep_titles .title span{font-size: 22px;}
    
    /*item*/
    .sleep_item ul li{font-weight: 400;font-size: 18px;}
    
    /*safe*/
    .sleep_safe .sleep_titles .title:after{height: 13px;right: -12px;width: 3px;}
    .sleep_safe .sleep_titles .title:before{width: 13px;top: 5px;height: 3px; right: -17px;}
    .sm_cir{width: 180px;height: 180px;border: 4px solid #007fc6;}
    .sm_cir span, .sm_cir p{font-size: 21px;}
    
    /*recom*/
    .sleep_recom .recom{font-size: 17px;}
    .recom_right li{font-size: 17px;padding-left: 32px;}
    .recom_right li:after{width: 23px;height: 21px;}
    .sleep_recom .recom_b{font-size: 18px;}
    .sleep_recom .recom_b br{display: none;}
    
    /*first*/
    .sleep_first_texts .first_tt1{font-size: 22px;}
    .sleep_first_texts .first_tt2{font-size: 16px;}
    
    
}