@import url('sub.css'); 



/**** S:: LED DISPLAY ****/
.led_style{position: relative; width: 100%; height: var(--vh); overflow: hidden;}
.led_style .led_slider{position: relative; width: 100%; height: 100%;}
.led_style .led_slider .slide{position: absolute; left:0; top:0; width: 100%; height: var(--vh); padding-top: 22vh; box-sizing:border-box;}
.led_style .led_slider .slide .bg{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center;}
.led_style .led_slider .slide .txt_area{position: relative; z-index: 9991;}
.led_style .led_slider .slide .txt_area .fs50{text-align:center; color:var(--white); padding: 0 0 40px;}
.led_style .led_slider .slide .txt_area .icon{background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(5px); display: flex; padding: 30px 0; box-sizing:border-box;}
.led_style .led_slider .slide .txt_area .icon dl{display: flex; width: 33.33%; padding: 16px 30px 16px 0; box-sizing:border-box; border-right:1px solid rgba(255,255,255,.1);}
.led_style .led_slider .slide .txt_area .icon dl:last-child{border:0 !important;}
.led_style .led_slider .slide .txt_area .icon dl dt{width: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.led_style .led_slider .slide .txt_area .icon dl dt img{width: 70px; height: auto;}
.led_style .led_slider .slide .txt_area .icon dl dd{width: calc(100% - 150px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.led_style .led_slider .slide .txt_area .icon dl dd .fs24{color:var(--white); line-height: 130%;}
.led_style .led_slider .slide .txt_area .icon dl dd .fs18{color:rgba(255,255,255,.7); padding: 10px 0 0;}
.led_style .led_slider .slide .txt_area .purpose{padding: 30px 0 0; display: flex;}
.led_style .led_slider .slide .txt_area .purpose .tit{width: 125px; height: 42px; line-height: 42px; text-align:center; border-radius:42px; font-size:1rem; font-weight: 600; color:var(--white); letter-spacing: var(--letter-spacing-default); background:var(--main);}
.led_style .led_slider .slide .txt_area .purpose .tit::before{content:'\e86c'; display: inline-block; vertical-align: middle; margin: -2px 7px 0 0; width: 24px; height: 24px; line-height: 24px; font-size:24px; font-family:var(--icon); font-weight: 400; color:inherit; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;}
.led_style .led_slider .slide .txt_area .purpose .con{width: calc(100% - 125px); padding: 0 0 0 30px; box-sizing:border-box;}
.led_style .led_slider .slide .txt_area .purpose .con ul{}
.led_style .led_slider .slide .txt_area .purpose .con ul li{display: flex;}
.led_style .led_slider .slide .txt_area .purpose .con ul li + li{margin-top: 6px;}
.led_style .led_slider .slide .txt_area .purpose .con ul li strong{font-weight: 600; color:var(--white); width: 110px; line-height: 150%;}
.led_style .led_slider .slide .txt_area .purpose .con ul li p{color:rgba(255,255,255,.7); width: calc(100% - 110px); line-height: 150%;}
.led_style .led_slider .slide .txt_area .purpose .con ul.long li strong{width: 190px;}
.led_style .led_slider .slide .txt_area .purpose .con ul.long li p{width: calc(100% - 190px);}
.led_style .led-dots{position: absolute; left: 0; bottom: 0; width: 100%; z-index: 9999;}
.led_style .led-dots .slick-dots{display: flex; border-top:1px solid rgba(255,255,255,.2);}
.led_style .led-dots .slick-dots li{flex:1; cursor:pointer; box-sizing:border-box; border-right:1px solid rgba(255,255,255,.2); text-align:center; transition:all .3s linear;}
.led_style .led-dots .slick-dots li::last-child{border:0;}
.led_style .led-dots .slick-dots li button{width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; margin: 0; background:none; border:0; cursor:pointer; font-size:1rem; font-weight: 400; letter-spacing: var(--letter-spacing-default); line-height: 150%; padding: 30px; box-sizing:border-box; color:rgba(255,255,255,.5); transition:all .3s linear;}
.led_style .led-dots .slick-dots li.slick-active{background:rgba(241,102,36,.9); border-color:var(--main);}
.led_style .led-dots .slick-dots li.slick-active button{font-weight: 600; color:var(--white);}
/**** E:: LED DISPLAY ****/





/*******************************************************************************
    @media 1710px
*******************************************************************************/
@media all and (max-width:1710px){


/**** S:: LED DISPLAY ****/
.led_style{}
.led_style .led_slider{}
.led_style .led_slider .slide{padding-top: 20vh;}
/**** E:: LED DISPLAY ****/



}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){




}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){


/**** S:: LED DISPLAY ****/
.led_style{}
.led_style .led_slider{}
.led_style .led_slider .slide{padding:0; display: flex; flex-direction: column; justify-content: center;}
.led_style .led_slider .slide .txt_area{}
.led_style .led_slider .slide .txt_area .fs50{padding: 0 0 30px;}
.led_style .led_slider .slide .txt_area .icon{padding: 20px 0;}
.led_style .led_slider .slide .txt_area .icon dl{padding: 10px 20px 10px 0;}
.led_style .led_slider .slide .txt_area .icon dl dt{width: 100px;}
.led_style .led_slider .slide .txt_area .icon dl dt img{width: 50px; height: auto;}
.led_style .led_slider .slide .txt_area .icon dl dd{width: calc(100% - 100px);}
.led_style .led_slider .slide .txt_area .purpose{padding: 20px 0 0;}
.led_style .led-dots{}
.led_style .led-dots .slick-dots li button{padding: 20px;}
/**** E:: LED DISPLAY ****/



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/**** S:: LED DISPLAY ****/
.led_style{}
.led_style .led_slider{}
.led_style .led_slider .slide{}
.led_style .led_slider .slide .txt_area{}
.led_style .led_slider .slide .txt_area .fs50{padding: 0 0 20px;}
.led_style .led_slider .slide .txt_area .icon{padding: 0; flex-wrap:wrap;}
.led_style .led_slider .slide .txt_area .icon dl{width: 100%; padding: 20px 20px 20px 0; border-right:0; border-bottom: 1px solid rgba(255,255,255,.1);}
.led_style .led_slider .slide .txt_area .icon dl dd .fs18{padding: 5px 0 0;}
.led_style .led_slider .slide .txt_area .purpose{padding: 15px 0 0;}
.led_style .led_slider .slide .txt_area .purpose .tit{width: 110px; height: 36px; line-height: 36px;}
.led_style .led_slider .slide .txt_area .purpose .tit::before{margin: -2px 5px 0 0; width: 18px; height: 18px; line-height: 18px; font-size:18px;}
.led_style .led_slider .slide .txt_area .purpose .con{width: calc(100% - 110px); padding: 0 0 0 20px;}
.led_style .led_slider .slide .txt_area .purpose .con ul{}
.led_style .led_slider .slide .txt_area .purpose .con ul li{}
.led_style .led_slider .slide .txt_area .purpose .con ul li + li{margin-top: 6px;}
.led_style .led_slider .slide .txt_area .purpose .con ul li strong{width: 90px;}
.led_style .led_slider .slide .txt_area .purpose .con ul li p{width: calc(100% - 90px);}
.led_style .led_slider .slide .txt_area .purpose .con ul.long li strong{width: 170px;}
.led_style .led_slider .slide .txt_area .purpose .con ul.long li p{width: calc(100% - 170px);}
.led_style .led-dots{}
.led_style .led-dots .slick-dots li button{padding: 10px;}
/**** E:: LED DISPLAY ****/


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/**** S:: LED DISPLAY ****/
.led_style {height: auto;}
.led_style .led_slider{height: auto;}
.led_style .led_slider .slick-track{align-items: flex-start;}
.led_style .led_slider .slide{position: relative; height: auto; padding: 80px 0 100px; display: block;}
.led_style .led_slider .slide .txt_area .fs50{padding: 0 0 10px;}
.led_style .led_slider .slide .txt_area .icon dl dt{width: 80px;}
.led_style .led_slider .slide .txt_area .icon dl dt img{width: 40px; height: auto;}
.led_style .led_slider .slide .txt_area .icon dl dd{width: calc(100% - 100px);}
.led_style .led_slider .slide .txt_area .purpose{flex-wrap:wrap;}
.led_style .led_slider .slide .txt_area .purpose .tit{}
.led_style .led_slider .slide .txt_area .purpose .con{width: 100%; padding: 10px 0 0;}
.led_style .led_slider .slide .txt_area .purpose .con ul{}
.led_style .led_slider .slide .txt_area .purpose .con ul li{}
.led_style .led_slider .slide .txt_area .purpose .con ul.long li {flex-wrap:wrap; gap:3px;}
.led_style .led_slider .slide .txt_area .purpose .con ul.long li strong{width: 100%;}
.led_style .led_slider .slide .txt_area .purpose .con ul.long li p{width: 100%;}
.led_style .led-dots{}
/**** E:: LED DISPLAY ****/


}