@charset "utf-8";
.board-promo-container{user-select: none;}
/* 게시판 버튼 */
#bo_list_total{
    width:100%;
    font-size:0.923em;
}
.nav-area{display:flex;justify-content:space-between;margin:0 auto;padding:10px 0;}
/*검색*/
.search-wrap form{display:block;}
.search-wrap .input-group{display:flex;justify-content:flex-end}
.search-wrap .input-group .form-control{
    position: relative;
    border:1px solid #ddd;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.search-wrap .input-group-append .btn{
    position: relative;
    font-size: 1rem;
    line-height: 1.5;
    border-top-left-radius:0px;border-bottom-left-radius:0px;margin-left:-1px
}
.search-wrap .input-group select.form-control{border-top-right-radius:0px;border-bottom-right-radius:0px;}
.search-wrap .input-group input.form-control{border-radius:0px;margin-left:-1px}
@media (max-width:768px){
    .nav-area{flex-wrap:wrap;}
    .nav-area>*{width:100%;}
    .nav-area>*>*{text-align:center}
    .search-wrap{margin-top:1em}
    .search-wrap .input-group{justify-content:center}
    .search-wrap .input-group select.form-control{width:120px;}
    .search-wrap .input-group input.form-control{flex: 1 1 100px;min-width:100px;}
}

/* 게시판 목록 공통 */
.all_chk{font-size:.813em;line-height:1.2}
#bo_list{margin:0 auto;padding: 10px;clear:both}
.board_list ul{clear:both;margin:0 10px;border-top:1px solid #000}
.board_list li{position:relative;padding:0;line-height:2}
.board_list .bo_notice  {background:#f7f7f7}
.board_list .bo_subject{font-size:1.077em;font-weight:bold;margin-bottom:10px}
.board_list .notice_icon{color:#6683be}
.board_list .bo_cate_link{color:#ea185f;margin-bottom:10px;display:block}
.board_list .fa-download{width:16px;height:16px;line-height:16px;background:#e89f31;color:#fff;text-align:center;font-size:10px;border-radius:4px;vertical-align:middle;}
.board_list .fa-link{width:16px;height:16px;line-height:16px;background:#ad68d8;color:#fff;text-align:center;font-size:10px;border-radius:4px;vertical-align:middle;font-weight: normal;}
.board_list .fa-heart{width:16px;height:16px;line-height:16px;background:#ff66b0;color:#fff;text-align:center;font-size:10px;border-radius:4px;vertical-align:middle;;font-weight: normal;}
.board_list .new_icon{display:inline-block;width: 16px;line-height:16px ;font-size:0.833em;color:#ffff00;background:#6db142;border-radius:4px;text-align:center;vertical-align:middle;font-size:11px}
.board_list .hot_icon{display:inline-block;width: 16px;line-height:16px ;font-size:0.833em;color:#fff;background:#e52955;;border-radius:4pxtext-align:center;;vertical-align:middle;font-weight:normal;font-size:11px}
.board_list .fa-lock{display: inline-block;line-height: 14px;width: 16px;font-size: 0.833em;color: #fff;background: #262b88;text-align: center;border-radius: 4px;font-size: 12px;border:1px solid #262b88}
.board_list .bo_info {line-height:20px;color:#525a61;font-size:.813em}
.board_list .bo_info .sv_member{color:#525a61;font-weight:normal}
.board_list .bo_info img{vertical-align:top;border-radius:30px}
.board_list .bo_info i{margin-left:5px}
#bo_cate h2 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#bo_cate {background:#fff;color:#333;border-bottom:1px solid #eee;
white-space: nowrap;overflow-x: auto;
-webkit-overflow-scrolling: touch
-ms-overflow-style: -ms-autohiding-scrollbar;}
#bo_cate::-webkit-scrollbar {display: none;}
#bo_cate ul{margin:0 auto;max-width:1200px;padding:0}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""} 
#bo_cate li{display:inline-block}
#bo_cate li a{display:block;padding:0 15px;line-height:55px;color:#333947}
#bo_cate #bo_cate_on{position:relative;font-weight:bold;color:#0b6bc5}
#bo_cate #bo_cate_on:before{width:100%;content:'';height:2px;background:#0b6bc5;position:absolute;bottom:0;left:0}
#bo_sch {background:#fff;position:relative;margin:20px 10px;border-radius:3px}
#bo_sch:after {display:block;visibility:hidden;clear:both;content:""}
#bo_sch legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#bo_sch select{border:0;height:42px;border:1px solid #cfcfcf;vertical-align:top;padding-left:10px}
#bo_sch .sch_input{height:42px;border:1px solid #cfcfcf;padding:0;background-color:transparent;padding:0 40px 0 10px;vertical-align:top}
#bo_sch .sch_input:focus{outline:none;border-bottom:2px solid #0b6bc5}
#bo_sch .sch_btn{height:42px;position:absolute;color:#aaa;top:0;right:0;border:0;width:40px;background:none;font-size:15px;vertical-align:top}
.bo_fx {margin:20px 0}
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""} 
.bo_fx li{display:inline-block;}
.btn_bo_adm{float:left}
.btn_wr{float:right}
@media (max-width: 969px){
    #bo_sch select{width:30%;float:left}
    #bo_sch .sch_input{width:68%;float:right;}
    #bo_list .all_chk{margin:10px 0}
}
@media (min-width: 970px){
    #bo_sch {float:right;}
    .board_list .li_cate{padding-left:120px}
    .board_list .bo_cate_link{position:absolute;top:15px;left:15px;color:#0b6bc5;width:100px}

}

#bo_v_info{width:100%;margin:0;color:#606169;line-height:20px;font-size:14px;padding:.5em 2em;background-color:var(--text-bg);border-radius:5px;}
#bo_v_info h2{position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_info strong{display:inline-block;font-weight:500}
#bo_v_info .profile_img img{border-radius:50%;vertical-align:top}
#bo_v_info .sv_member{color:#606169;font-weight:500;margin-right:0}
#bo_v_info span:after{content:" / "}
#bo_v_info i{margin:0 3px 0 8px}
.affilliate_alert {
    width:100%;
    margin: 0 0 2em;
    padding: .5em 2em;
    text-align: left;
    background-color:var(--text-bg);
    color: #606b73;
    border-radius: 5px;
    font-size: 14px;
}
#promotions h1, #promotions h2{flex-basis: 100%;}
#promotions {counter-reset: h2counter;}
#promotions h2{font-weight: 500;line-height:1.6;margin: 1.5em 0 1.25em;border-bottom:1px solid var(--bg-color-0);}/*padding: 0 .35em;border-left: 5px solid #9f64bb*/
#promotions h2:before {
	counter-increment: h2counter;
	content: counter(h2counter);
	background-color:var(--bg-color-0);
	color:#fff;
	padding:0 .35em;
	margin-right:.5em;
	border-radius: 4px;
}
#promotions h3{font-weight: 500;line-height:1;margin: 1.2em 0 .6em;padding: 0 .35em;border-left: 5px solid #a5a2a7}
/*프로모션리스트*/
.promoList{
    position:relative;
    line-height:1.4;
	margin-bottom:1em;
    background-color: var(--gray-dark);
    border-radius: 0;
    overflow: hidden;
}
.promoList:hover{
    box-shadow:2px 4px 6px rgba(0, 0, 0, .2);
}
.promo_cover{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index: 1;}
.promo_content{
    flex: 1 0 auto;
    padding:1em 1.2em 0;    
}
.btn_wrap{flex:0 0 180px}
.discount{    
    position: relative;
}
.etc .percent-wrap{
    width:100%;
    height:calc(100% - 40px);
    padding: 0 .5em;
    font-size:1.2em;
    font-weight:600;
    text-align: center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.discount figure{
    display: flex;
    flex-wrap:wrap;
    align-items: stretch;
	justify-content: center;
    width:100%;height:100%;
	margin:0;
    border:1px solid rgb(242, 242, 245);
	overflow:hidden;
}
#promotions .discount figure img{
    /* width:100%;height:100%; */
    object-fit:cover;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.etc .percent-wrap span.one-line{
    font-size:14px;
}
.etc .type_wrap{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height:unset;
    overflow:hidden;
}
.etc .type,.etc .update_date{
    display:block;
    font-size:12px;
    height:20px;
    line-height:20px;
    text-align:center;
    color:#fff;
    padding:0 .4rem;
}
.etc button{
    font-size:12px;
    line-height:1;
}
.etc .update_date{
    display:block;
    background-color:#404f5d;
}
.btn_wrap{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    max-block-size: fit-content;
    padding:1em;
}
.btn_wrap div.btn_inner{
    position:relative;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: .25em;
    padding-right:2.5em;
    flex: 0 0 100%;
}
.btn_wrap div.btn_inner .btn{
    position:relative;
    z-index:1;
    width: 100%;
    padding-left: 2.5em;
    padding-right:0;
    border-radius:.25rem 0 0 .25rem;
    transition: all .8s;
    cursor: pointer;
    text-align: center;
    color:#fff
}
.btn_wrap div.btn_inner.code::after{
    content: "";
    display: block;
    background: #46a7c4;
    position: absolute;
    right: .7rem;
    bottom: -.2rem;
    width: 1.5rem;
    height: calc(100% + .3em);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
    border-radius: 10px 0 0 10px;
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    background-color: #9599E2;
    background-image: linear-gradient(105deg, #bdbfdf 0%, #fff 40%, #fff 50%, #9599E2 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    z-index: 3;
}
.btn_wrap div.btn_inner.code:hover::after{
    right: .9rem;
    bottom: -.2rem;
    width: 2rem;
    height: calc(100% + .3em);
    -webkit-clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
}
.btn_wrap a.btn{
    position:relative;
    display:block;
    width:100%;
    height:36px;
    font-size:15px;
    line-height:1.5;
    font-weight:600;
    z-index:1;
}
.btn_wrap a.btn.code{
    border-radius:.25em .25em 1.8em .25em;
    width:calc(100% - 8px);
    transition:width .2s;
    
}
.btn_wrap a.btn.code:hover{
    width:calc(100% - 8px - 8px);
}
.btn_wrap div.promo_code{
    position:absolute;
    top:0;
    right: 0;
    width: 1.8em;
    height:100%;
    font-size:15px;
    line-height:2em;
    border:1px solid #111;
    background-color:#333;
    color:#eee;
    border-radius:0 .25rem .25rem 0;
    text-align:right;
    padding-right:.25em;
    overflow:hidden;
}
.btn_wrap .codeoff{
    display:none;
    flex: 0 0 100%;
    padding: 6px 0;
    border-radius: .25rem;
    color: #fff;
    text-align: center;
    background-color: #333;
}
.promo_content a{
    color:var(--white);
}
.promo_content a:hover, a:focus{
    color:var(--yellow);
}
#promotions .promo_content h3{
    font-weight:500;
    width: 100%;
    font-size:1em;
    line-height:1.4;
    margin:.5em 0;
	padding: 0!important;
    border-left-width:0!important;
}
#promotions .promo_content p{
    margin:0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.promo_content .promo_detail{
    position: relative;
    width: 100%;
    word-wrap: break-word;
    color:#606169;
    font-size:.9em;
    line-height:1.6;
    margin-bottom:.75em;
}
.promo_content .promo_detail div{
    display: flex;
    line-height:1.2;
}
.promo_content .promo_detail div.off{
    display:none
}
.promo_content .promo_detail div::before{
    content:"•";
    margin-right: .3em;
    line-height: 1.4;
}
.promoList .etc{
    position: absolute;
    left: 5px;
    bottom: 5px;
    display: flex;
    gap: .2em;
    color:#606169;
    font-size:.9em;
    border-radius:.15em!important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.promoList .etc > *{
	height:20px!important;
    position: relative;
    z-index: 2;
}
.board-promo-container {
    display:flex;
    flex-wrap:wrap;
    gap:2em;
}
#bo_list{max-width:1200px;}
#promotions {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: .2em;
    width: calc(100% - 300px - 2em);
    color:#333;
    border-right: 1px solid #e5e8e9;
    padding: 0 2em 1.5em 0;
    word-break: break-all;
}

#promolist-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    flex-basis:100%;
}
.promoList{
    display: flex;
    flex-direction: column;
    align-content: space-between;
    flex-basis: calc((100% - 2em) / 3);
}
.sidebar {
    width: 300px;
}
@media (max-width:991px){
    #bo_list{padding:0 1.5em;}    
    #promotions .promo_content h3{
        font-size:15px;
    }
    #promotions,.sidebar {
        border-right: unset;
        width: 100%;
        padding:0
    }.sidebar {
       margin-top:3em;
    }
}
@media (min-width:768px){
    .discount{
		min-height:150px;
    }
}
@media (max-width:767px){
    .promoList{
        flex-basis: calc((100% - 1em) / 2);
    }
    .discount{
        padding:0;
    }
    .discount figure{
        width:100%;background-color: #c9d7df;
    }
    .promo_content{
        padding:.5em .75em 0
    }
    #promotions .promo_content h3{
        line-height:1.4;margin:.5em 0
    }
    .promo_content .promo_detail{
        font-size:14px;margin:0 0 .5em
    }
    /* .promo_content{padding:0 1em}
    .btn_wrap{padding:0 1em 1em} */
    .promoList .etc{
        flex-wrap: wrap;
        font-size:12px;
    }
    .etc .percent-wrap{justify-content:flex-start;flex-direction:row;height:35px;padding-left:.5em;font-size: 1em;gap:.35em}
    .etc .percent-wrap span.one-line{font-size:unset}
    .etc .type_wrap{flex-wrap: unset;width:unset;height:20px}
    /* .etc .type_wrap > *{width:90px;padding:0 .2em}*/
    .discount {flex:0 0 80px} 
    /* .promo_content{flex:0 0 100%} */
    .btn_wrap{flex:0 0 100%;padding-top:.5em;}
    .btn_wrap div.btn_inner{
        width:100%;
    }
    .btn_wrap div.btn_inner .btn {font-size:14px;}
    .btn_wrap div.promo_code {font-size:14px;line-height:2;}
}

@media (max-width:767px){  
    #promotions .promo_content h3{
        font-size:13px;
    }
}