@charset "utf-8";

/*Titlllium Web*/
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700&display=swap');

/*슬라이더*/
.wrap-banner{padding:30px 0;background:#f4f4f4;}
.wrap-banner .wrap-banner-inner{width:1600px;margin: 0 auto;display:flex;align-items:center;justify-content:space-between;}
.wrap-banner .wrap-banner-inner::before{content:"BANNER ZONE";display:inline-block;font-size:24px;color:#2d3440;font-family: 'Titillium Web', sans-serif;font-weight:700;}
.wrap-banner .wrap-banner-inner > div{width:calc(100% - 200px);position:relative;padding-left:100px;}

.wrap-banner .slider{}
.wrap-banner .slider li{text-align:center;}
.wrap-banner .slider li a{display:inline-block;text-align:center;position:relative;padding:2px 5px;}
.wrap-banner .slider li a::before{content:"";display:block;width:15px;height:15px;background:transparent;border-radius:100%;position:absolute;top:5px;left:0;}
.wrap-banner .slider li a span{}
.wrap-banner .slider li a span img{}
.wrap-banner .slider li a p{position:relative;}
.wrap-banner .slider li a p.p_1{font-family:'Noto Regular';border-bottom:1px solid transparent;padding:5px 0;}
.wrap-banner .slider li a p.p_2{}
/*콘트롤*/
.wrap-banner button{display:inline-block;cursor:pointer;text-indent:-9999px;width:30px;height:30px;position:absolute;top:6px;left:0;}
.wrap-banner .control{}
.wrap-banner .paging{display:none;}
.wrap-banner .numbering{display:none;}
.wrap-banner .playstop{}
.wrap-banner .playstop button{left:30px;display:none;}
.wrap-banner .playstop button.play{background:url(/sites/style_guide/images/common/play_2_b.png) no-repeat center;}
.wrap-banner .playstop button.stop{background:url(/sites/style_guide/images/common/pause_2_b.png) no-repeat center;}
.wrap-banner .playstop button.on{display:block;}
.wrap-banner .prevnext{}
.wrap-banner .prevnext button{background:url(/sites/style_guide/images/common/arrow_3_b.png) no-repeat center;display:inline-block !important;}
.wrap-banner .prevnext button.prev{left:0;transform:rotate(180deg);}
.wrap-banner .prevnext button.next{left:60px;}

@media all and (max-width:1600px){
	.wrap-banner .wrap-banner-inner{width:96%;}
}
@media all and (max-width:1280px){
	.wrap-banner .wrap-banner-inner{display:block;text-align:center;}
	.wrap-banner .wrap-banner-inner::before{font-size:20px;border-bottom:2px solid #222;}
	.wrap-banner .wrap-banner-inner > div{width:100%;padding:10px 40px;}
	.wrap-banner button{top:16px;}
	.wrap-banner .playstop{display:none;}
	.wrap-banner .prevnext button.prev{}
	.wrap-banner .prevnext button.next{left:auto;right:0;}
}

@media all and (min-width:1025px){
	.wrap-banner .slider li a:hover::before{transition: all 0.3s cubic-bezier(0.2, 0, 0.3, 1);background:#7ab8b5;}
	.wrap-banner .slider li a:hover p.p_1{transition: all 0.3s cubic-bezier(0.2, 0, 0.3, 1);border-bottom-color:#7ab8b5;color:#005a6c;}
}