/**************************************************
	Setting Device Width
**************************************************/
#_device_pc{display: block;} #_device_ta{display: none;} #_device_mo{display: none;} .__pc{display: block !important;} .__ta{display: none !important;} .__mo{display: none;}
@media screen and (min-width: 750px) and (max-width: 1200px){#_device_pc{display: none;} #_device_ta{display: block;} #_device_mo{display: none;} .__pc{display: none !important;} .__ta{display: block !important;} .__mo{display: none;}}
@media screen and (max-width: 750px){#_device_pc{display: none;} #_device_ta{display: none;} #_device_mo{display: block;} .__pc{display: none !important;} .__ta{display: none;} .__mo{display: block !important;} }

/**************************************************
	iphone hivereag app 노치 겹침현상 방지
    ( 노치 높이 만큼 html에 자동으로 padding 부여 )
**************************************************/
html{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}
#header{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

.slick04 .roll {position: relative}
.slick04 .slick-arrow {position: absolute; top: 51%; transform: translateY(-50%); width: 80px; height: 80px; border: 0; text-indent: -999em; border-radius: 50%; box-shadow: -1px 2px 6px 4px rgba(0,0,0,0.1); z-index: 10}
.slick04 .slick-prev {background: url('/w/inc/slick_slider/img/bt_arrow_prev.png') no-repeat center / contain;}
.slick04 .slick-next {background: url('/w/inc/slick_slider/img/bt_arrow_next.png') no-repeat center / contain;}

.slick04 {position: relative;}
.slick04:before {content: ''; position: absolute; top: 0; left: 50%; width: 1920px; height: 100%; margin-left: -960px; z-index: -1}
.slick04 .tab-wrap {}
.slick04 .tab-list {text-align: center; font-size: 0}
.slick04 .tab-list button {margin: 5px; width: calc(100% / 5 - 10px); height: 50px; line-height: 46px; border: 1px solid #c7b299; box-sizing: border-box; border-radius: 25px; background: #fff; font-size: 18px; letter-spacing: -0.5px}
.slick04 .tab-list button.active {color:#fff; font-weight: 700;background: #ac0505; border-color: #ac0505;}
.slick04 .tab-cont {margin-top: 0px}
.slick04 .tab-cont .cont {display: none}
.slick04 .tab-cont .cont.active {display: block}

.slick04 .tab-cont .roll .slick-prev {left: -105px}
.slick04 .tab-cont .roll .slick-next {right: -105px}
.slick04 .tab-cont .roll .item {border-radius: 15px; overflow: hidden; box-shadow: -1px 2px 10px 4px rgba(0,0,0,0.05)}
.slick04 .tab-cont .roll .item .thumb {padding-bottom: 74%; background-size: cover; background-repeat: no-repeat; background-position: center; }
.slick04 .tab-cont .roll .item p {position: relative; padding: 25px; text-align: center; font-weight: 700; font-size: 18px; line-height: 25px; color: #222; letter-spacing: -0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.slick04 .tab-cont .roll .item p:after {content: ''; position: absolute; bottom: -10px; right: -10px; width: 80px; height: 84px;}

@media screen and (max-width: 1200px){
.slick04 {padding: 0px}
.slick04 .tab-list button {margin: 3px; width: calc(100% / 5 - 6px); height: 36px; line-height: 34px; border-width: 1px; font-size: 14px; border-radius: 18px}
.slick04 .tab-cont {margin-top: 0px}
.slick04 .tab-cont .roll .item p {padding: 15px; font-size: 17px; line-height: 24px}
.slick04 .tab-cont .roll .item p:after {width: 55px; height: 55px}
}
@media screen and (max-width: 750px){
.slick04 {padding: 0 0}
.slick04 .tab-list button {margin: 2px; width: calc(100% / 3 - 4px); height: 32px; line-height: 30px; padding: 0; font-size: 13px}
.slick04 .tab-cont .roll .item p {font-size: 14px; padding: 10px; line-height: 20px}
}