@charset "utf-8";

/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; display:block; transition:all .3s linear; position: absolute; z-index: 9999; background:transparent;}
.slick-arrow::before {content:'\e5e1'; font-size:50px; font-family:var(--icon); font-weight:300; color:var(--text-color);}
.slick-prev {transform: scaleX(-1);}
.slick-next {}

/*** Visual ***/
#visual{max-width:1280px; width: 100%; height: 699px; border-radius: 10px; overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: 699px;}
#visual .visual_in .roll .v_txt {position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); text-align:center; z-index: 9999; }
#visual .visual_in .roll .v_txt p {color: var(--white); font-size: 1.11rem; font-weight: 400; line-height: 160%; letter-spacing: -0.8px; margin-bottom:10px; transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt h2 {color: var(--white); text-align:center; font-family: var(--eng); font-size: 3.888rem; font-weight: 600; line-height: 135.714%; letter-spacing: -1.4px; text-transform: uppercase; transition:all .6s 0.6s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg{width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}

/* 화살표 */
#visual .slick-arrow{opacity:1; top:50%; margin-top:-25px;}
#visual .slick-arrow::before {color:var(--white);}
#visual .slick-arrow:hover{opacity: 0.5;}
#visual .slick-prev{left:5%;}
#visual .slick-next{right: 5%;}


/* 도트 */
#visual .slick-dots{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 15px; position: absolute; left: 50%; bottom:5%; transform: translateX(-50%); z-index: 9999; opacity: 0; animation:fadeIn 0.6s 1s linear forwards;}
#visual .slick-dots li{display:inline-block; vertical-align:top; width:9px; height:9px; border:2px solid transparent; box-sizing:border-box; cursor:pointer; transition:all .3s linear; border-radius:100%; position: relative; background:rgba(255,255,255,0.5);}
#visual .slick-dots li.slick-active{width:13px; height:13px; border-color:white; background:transparent;}

#visual .slick-dots li button{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:100%; height:100%; display:block; background:transparent; border:0;}


/* 효과 */
#visual .visual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}

#mastery .titArea .fs18{display: flex; justify-content: flex-end;margin: 60px 0;}
#mastery .imgArea {text-align: center;}
#mastery .imgArea img {max-width: 100%;}


/* 포트폴리오 리스트 -- 게시판 스킨 내 style.css로 옮길 예정 */ 


/*******************************************************************************
    @media  ~1180px               
*******************************************************************************/
@media all and (max-width:1180px){
    #visual{height: 618px;}
    #visual .visual_in .roll{height: 618px;}
}

/*******************************************************************************
    @media  ~1024px               
*******************************************************************************/
@media all and (max-width:1024px){
    #visual{height: 543px;}
    #visual .visual_in .roll{height: 543px;}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
    #visual{height: 422px;}
    #visual .visual_in .roll{height: 422px;}
}


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

    #visual{height: 346px;}
    #visual .visual_in .roll{height: 346px;}
    
    
    
}

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

    #visual{height: 196px;}
    #visual .visual_in .roll{height: 196px;}
}