@charset "UTF-8";

:root{
    --keycolor: #FF4A56;
}

.wrap.sub{background: #fff;}

.kperformance .pc{display: block;}
.kperformance .mo{display: none;}
.kperformance .inner{max-width: 1280px; margin: 0 auto; position: relative;}
.kperformance .title_wrap{display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px;}
.kperformance h3{font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.5px;}
.kperformance .btn_more{display: block; text-indent: -9999px; width: 35px; height: 35px; background: url(/public/assets/kperformance/images/btn_more.png) 0 0 / 100% 100% no-repeat;}
.kperformance section{padding: 80px 0;}
.img img{width: 100%; height: 100%; object-fit: cover; object-position: center;}

.kperformance .swiper{padding-bottom: 46px;}
.kperformance .swiper .swiper-pagination{font-size: 0; bottom: 2px;}
.kperformance .swiper-pagination-bullets .swiper-pagination-bullet{border: 1px solid #000; margin: 0 6px; width: 14px; height: 14px; background-color: transparent; opacity: 1;}
.kperformance .swiper-pagination-bullets .swiper-pagination-bullet-active{background-color: #000;}
.kperformance .swiper-pagination-bullets .swiper-pagination-bullet:focus{outline: 2px solid red}

.main_nav{box-sizing: border-box; position: relative; z-index: 50; background-color: #fff;}
.main_nav .depth01{display: flex; justify-content: space-between; height: 112px;}
.main_nav .depth01 > li{flex: 1; height: 100%; padding: 2px; box-sizing: border-box;}
.main_nav .depth01 > li a{height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main_nav .depth01 > li > a span{position: relative; display: flex; align-items: center; width: auto; font-size: 24px; font-weight: 600;}
.main_nav .depth01 > li > a span::before{content: ''; display: inline-block; margin-right: 8px; width: 36px; height: 36px; background: url(/public/assets/kperformance/images/icon01.png) 0 0 / 100% auto no-repeat;}
.main_nav .depth01 > li:nth-child(2) a span::before{background-image: url(/public/assets/kperformance/images/icon02.png);}
.main_nav .depth01 > li:nth-child(3) a span::before{background-image: url(/public/assets/kperformance/images/icon05.png);}
.main_nav .depth01 > li:nth-child(4) a span::before{background-image: url(/public/assets/kperformance/images/icon03.png);}
.main_nav .depth01 > li:nth-child(5) a span::before{background-image: url(/public/assets/kperformance/images/icon04.png);}
.main_nav .depth01 > li.on > a span{font-weight: 800; color: var(--keycolor);}
.main_nav .depth01 > li.on > a span::before{background-position: 0 -36px;}
.main_nav .depth01 .depth02{display: none; padding: 30px 0;}
.main_nav .depth02 li{margin-bottom: 16px; height: 48px; text-align: center; padding: 0 2px; box-sizing: border-box;}
.main_nav .depth02 li:last-child{margin-bottom: 0;}
.main_nav .depth02 li a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 22px; line-height: 1; font-weight: 700;}
.main_nav::after{content: ''; transition: all 0.5s; position: absolute; z-index: -1; top: 100%; left: 0; display: block; width: 100%; height: 0; background-color: #f5f5f5;}
.main_nav.active::after{height: 288px;}

.kperformance section.banner{padding-top: 50px;}
.banner li a{display: block; padding: 0; box-sizing: border-box; border-radius: 18px; overflow: hidden; position: relative;}
.banner li a:focus{outline: none;}
.banner li a:focus::after{content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border-radius: 18px; border: 2px solid #000; box-sizing: border-box;}
.banner a img{object-fit: cover; object-position: center; width: 100%; height: 100%;}

.item_title{font-size: 22px; font-weight: 800; margin-top: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;} 
.item_content{font-size: 18px; margin-top: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 22px;}

.sns{background-color: #EDEFF4;}
.sns .inner{max-width: 1300px;}
.sns .title_wrap{padding: 0 10px;}
.sns_link{display: flex; gap: 10px;}
.sns_link a{display: flex; align-items: center; background-color: #fff; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05); padding: 0 20px; border-radius: 50px; height: 54px; font-size: 16px; font-weight: 700;}
.sns_link a::before{content: ''; display: block; margin-right: 8px; width: 30px; height: 30px; background: url(/public/assets/kperformance/images/sns_kakao.png) 0 0 / 100% auto no-repeat; }
.sns_link .instagram::before{background-image: url(/public/assets/kperformance/images/sns_instagram.png);}
.sns_link .youtube::before{background-image: url(/public/assets/kperformance/images/sns_youtube.png);}
.sns_link a:focus, .sns_link a:hover{background-color: var(--keycolor); color: #fff;}
.sns_link a:focus::before, .sns_link a:hover::before{background-position: 0 -30px;}

.sns .swiper{padding: 20px 10px 46px 10px;}
.sns li{border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);}
.sns li a{display: block; background-color: #fff; padding: 0; position: relative; }
.sns li a:focus{outline: none;}
.sns li a:focus::before{content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid #000; border-radius: 18px;}
.sns li a .daehakro_logo{display: flex; align-items: center; font-size: 22px; font-weight: 700; height: 74px;}
.sns li a .daehakro_logo::before{content: ''; display: inline-block; margin: 0 12px 0 20px; width: 46px; height: 46px; background: url(/public/assets/kperformance/images/img_dahakro.png) 0 0 / 100% 100% no-repeat;}
.sns li a img{width: 100%; height: 408px; object-fit: cover; object-position: center;}
.sns li a::after{content: ''; display: block; width: 100%; height: 74px; background: url(/public/assets/kperformance/images/bg_instagram.png) 20px center / 123px 34px no-repeat;}

.float_banner{position: relative; margin-top: 10px; z-index: 100;}
.float_banner .btn_close{position: absolute; top: -13px; right: 0; display: inline-block; text-indent: -9999px; width: 18px; height: 18px; background: url(/public/assets/kperformance/images/btn_floatclose.png) 0 0 / 100% 100% no-repeat;}
.float_banner .btn_close:focus{outline: 2px solid #000;}
.float_banner a{display: flex; align-items: center; justify-content: center; flex-direction: column; width: 90px; height: 90px; background: #fff; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1);}
.float_banner span{font-size: 12px; display: block; line-height: 1; text-align: center; margin-top: 4px;}

.quickmenu{display: none;}

@media (min-width: 800px) and (max-width: 1280px) {
    .kperformance .inner{width: 100%; padding: 0 3.13vw;}
    
}

@media all and (max-width:1023px){
    .main_nav{display: none;}
    .kperformance .mo{display: block;}
    .kperformance .pc{display: none;}
    .kperformance section{padding: 40px 0;}
    .kperformance .inner{padding: 0 20px}
    .kperformance .title_wrap{margin-bottom: 16px;}
    .kperformance h3{font-size: 22px; line-height: 24px; width: calc(100% - 50px);}
    .kperformance .btn_more{width: 24px; height: 24px; right: 20px;}

    .kperformance .swiper{padding-bottom: 32px;}
    .kperformance .swiper-pagination-bullets .swiper-pagination-bullet{width: 12px; height: 12px; margin: 0 5px;}

    .item_title{font-size: 16px; line-height: 20px; margin-top: 12px;}
    .item_content{font-size: 14px; margin-top: 8px; line-height: 18px;}

    .banner li a{border-radius: 3.61vw;}

    .sns_link a{width: 40px; height: 40px; justify-content: center; border-radius: 50%; overflow: hidden; white-space: nowrap; font-size: 0px; line-height: 0; text-indent: -9999px; padding: 0; color: transparent;}
    .sns_link a::before{width: 19px; height: 19px; margin-right: 0;}
    .sns_link a:focus, .sns_link a:hover{background-color: #fff; color: transparent;}
    .sns_link a:focus::before, .sns_link a:hover::before{background-position: 0 0;}

    .kperformance .sns .inner{padding: 0;}
    .kperformance .sns .title_wrap{padding: 0 20px;}
    .sns .swiper{padding: 0 20px 32px;}
    .sns li{border-radius: 3.61vw;}
    .sns li a .daehakro_logo{height: 40px; font-size: 12px;}
    .sns li a .daehakro_logo::before{width: 25px; height: 25px; margin: 0 6px 0 10px;}
    .sns li a img{height: 61.11vw;}
    .sns li a::after{height: 40px; background: url(/public/assets/kperformance/images/bg_instagram.png) 10px center / 66px 18px no-repeat;}

    .float_banner{display: none;}

    .quickmenu{display: block !important; position: fixed; left: 0; bottom: 0; width: 100%; background: #fff; z-index: 500;}
    .quickmenu::before{content: ''; position: absolute; bottom: calc(100% - 2px); left: 0; display: block; width: 100%; height:45px; background: url(/public/assets/kperformance/images/mo_quick_top.png) 0 0 / 100% 100% no-repeat;}
    .quickmenu .btn_quickmore{z-index: 10000; position: absolute; top: -28px; left: 50%; transform: translateX(-50%); display: block; width: 24px; height: 24px; background: url(/public/assets/kperformance/images/btn_quickmore.png) 0 0 / 100% auto no-repeat; text-indent: -9999px;}
    .quickmenu .btn_quickmore.on{background-position: 0 -24px;}
    .quick_wrap{height: 100%; padding: 0 20px 20px;}
    .quickmenu ul{display: flex; height: 100%; align-items: baseline; height: auto;}
    .quickmenu ul li{flex: 1; text-align: center; line-height: 1; height: 100%;}
    .quickmenu ul li a{position: relative; word-break: break-all; font-size: 11px; font-weight: 400; line-height: 13px; padding: 0 3px; height: 100%; letter-spacing: -0.5px; color: #000; display: flex; align-items: center; flex-direction: column; justify-content: start;}
    .quickmenu ul li a::before{content: ''; display: block; margin-bottom: 2px; width: 36px; height:36px; background-size: 100% 100%; background-position: 0 0; background-repeat: no-repeat;}
    .quickmenu .more_cont{border-bottom: 1px solid #ECECEC; display: none; margin-bottom: 14px;}
    .quickmenu .more_cont.active{display: flex; height: auto; padding-bottom: 14px;}
    .quickmenu .more_cont li:first-child a::before{background-image: url(/public/assets/kperformance/images/icon06_mo.png);}
    .quickmenu .more_cont li:nth-child(2) a::before{background-image: url(/public/assets/kperformance/images/icon07_mo.png);}
    .quickmenu .more_cont li:nth-child(3) a::before{background-image: url(/public/assets/kperformance/images/icon08_mo.png);}
    .quickmenu .more_cont li:nth-child(4) a::before{background-image: url(/public/assets/kperformance/images/icon11_mo.png);}
    .quickmenu .more_cont li:nth-child(5) a::before{background-image: url(/public/assets/kperformance/images/icon05_mo.png);}
    .quickmenu .basic_cont li:first-child a::before{background-image: url(/public/assets/kperformance/images/icon01_mo.png);}
    .quickmenu .basic_cont li:nth-child(2) a::before{background-image: url(/public/assets/kperformance/images/icon02_mo.png);}
    .quickmenu .basic_cont li:nth-child(3) a::before{background-image: url(/public/assets/kperformance/images/icon10_mo.png);}
    .quickmenu .basic_cont li:nth-child(4) a::before{background-image: url(/public/assets/kperformance/images/icon03_mo.png);}
    .quickmenu .basic_cont li:nth-child(5) a::before{background-image: url(/public/assets/kperformance/images/icon04_mo.png);}
}