/* visual */
#visual{position:relative; width:100%; height:660px; background:#000;}
#visual .visual_in {position:relative; height:100%;}
.basic_in {
    max-width: 1350px;
    width: 90%;
    margin: 0 auto;
}
#visual .v_txt {width:100%; text-align:left; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:20;}
#visual .v_txt p { color:#ffffff; font-size: 1.437rem; font-weight: 300; line-height: 120%; text-transform: uppercase; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px); animation: text-active-animation 0.8s ease both; animation-delay:0.3s; margin:0 0 22px;}
#visual .v_txt h3 {font-size: 4rem; color:#ffffff; font-weight: 600; line-height: 120%; letter-spacing: -2pt; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px); animation: text-active-animation 0.8s ease both; animation-delay:0.5s;}

#visual .v_bg {position:absolute; left:0; top:0; width:100%; height:100%; overflow: hidden;}
#visual .v_bg .bg {position:absolute; left:0; top:0; width:100%; height:100%; transform: scale(1); animation: m_vsImg 2s ease;}

#visual .v_bg .bg.visual01{
    background:url('/images/sub/visual01.jpg')no-repeat center/cover;
}

#visual .v_bg .bg.visual02{
    background:url('/images/sub/visual02.jpg')no-repeat center/cover;
}

#visual .v_bg .bg.visual03{
    background:url('/images/sub/visual03.jpg')no-repeat center/cover;
}

#visual .v_bg .bg.visual04{
    background:url('/images/sub/visual04.jpg')no-repeat center/cover;
}

/* visual */
#visual .scroll_down {display:block; position:absolute; top:50%; right:5%; transform:translateY(-50%); z-index:99; text-align:center;}
#visual .scroll_down svg {width:26px;}
#visual .scroll_down span {font-size:18px; color:#ffffff; display:block; margin:4px 0 0;}
#visual .scroll_down span::before {content:'\ead0'; font-size:18px; font-weight:500; color:#ffffff; animation:scroll_down 1.3s ease infinite;}



@keyframes scroll_down {
	0%,100% { transform:translateY(0); opacity: 1;}
	50% { transform:translateY(5px); opacity: 0.5;}
}

@keyframes m_vsImg {
	0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}

@keyframes v_txt {
	0% {transform:translateY(60px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}



@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}




/* ���־� lnb */
.visual_lnb{position: absolute; left:0; bottom:50px; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px); animation: text-active-animation 0.8s ease both; animation-delay:0.7s; z-index:50;}
.visual_lnb dl {display:flex; align-items:center;}
.visual_lnb dl dt a {display:block;font-size:18px; color:#ffffff; top:0;}
.visual_lnb dl dt a:hover {opacity: 1;}
.visual_lnb dl dd{position:relative; display:flex; align-items:center;}
.visual_lnb dl dd:before {content:''; display:block; position:relative; width:1px; height:24px; background:rgba(255,255,255,0.2); margin:0 30px;}
.visual_lnb dl dd .txt { font-size:16px; color:rgba(255,255,255,0.6); font-weight:300; display:flex; align-items:center; justify-content:space-between; width:240px;}
.visual_lnb dl dd:last-of-type .txt {  color:#ffffff; letter-spacing:-0.6pt; font-weight:400;}
.visual_lnb dl dd .txt i { display:inline-block; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr;  font-weight:300; line-height:1; position:relative; transition:all 0.3s cubic-bezier(0.32, 0.6, 0.46, 1); font-size:18px; color:rgba(255,255,255,0.6); }
.visual_lnb dl dd .txt.on i{transform:rotate(180deg);}
.visual_lnb dl dd .dlst{position: absolute; top:50px; right:0; z-index: 999; width: calc(100% - 60px); background-color: #ffffff; padding:20px 25px; box-sizing:border-box; display: none; box-shadow:5px 5px 15px rgba(0,0,0,0.05); z-index:90;}
.visual_lnb dl dd .dlst.on{display: block;}
.visual_lnb dl dd .dlst ul{}
.visual_lnb dl dd .dlst ul li{padding: 0 0 13px; display:block;}
.visual_lnb dl dd .dlst ul li:last-child{padding: 0;}
.visual_lnb dl dd .dlst ul li a{font-size:0.938rem; transition:all .2s linear; line-height: 120%; letter-spacing: -0.35pt; display:block; font-weight: 400;}
.visual_lnb dl dd .dlst ul li a.on{color:#19708f;}
.visual_lnb dl dd .dlst ul li a:hover{color: #19708f;}


@media screen and (max-width:980px){


    /* visual */
    #visual {height:560px;}
    #visual .v_txt p {font-size:1.3rem;}
    #visual .v_txt h3 {font-size:3.2rem;}
    
    .visual_lnb dl dd:before {margin:0 20px;}
    .visual_lnb dl dd .txt {width:190px;}
    .visual_lnb dl dt a {font-size:16px;}
    
    

    
}


@media screen and (max-width:680px){


    #visual {height:320px;}
    #visual .v_txt p {font-size:1.18rem; margin:0 0 15px;}
    #visual .v_txt h3 {font-size:2.4rem; letter-spacing:-0.3pt;}
    
    .visual_lnb {width:100%; bottom:25px;}
    .visual_lnb dl {width:100%;}
    .visual_lnb dl dt a {font-size:15px;}
    .visual_lnb dl dd {width:calc((100% - 20px) / 2);}
    .visual_lnb dl dd:before {margin:0 15px;}
    .visual_lnb dl dd .txt {width:100%; font-size:14px;}
    .visual_lnb dl dd .txt i {font-size:16px;}
    
    .visual_lnb dl dd .dlst {width:calc(200% + 20px); top:40px;}
    .visual_lnb dl dd:first-of-type .dlst {transform:translateX(calc(50% - 10px));}
    
    
    #visual .scroll_down svg {width:20px;}


}