@import url(common.css);

/* 팝업 */
.main-popup{position:absolute; top:50px; left:0; width:100%; padding:0 5%; box-sizing:border-box; display:none; z-index:9999} 
.popup-slide, .popup-slide img{width:100%;}
.main-popup .popup-bottom {display:flex;}
.main-popup .popup-bottom a{flex:1; text-align:center; height:40px; line-height:38px; background-color:#333; color:#fff; font-size:13px}
.main-popup .popup-bottom a:not(:last-child){border-right:1px solid rgba(255,255,255,0.2);}
.popup-slide .swiper-pagination{bottom:50px !important}   
.popup-slide .swiper-pagination span{width:10px; height:10px; line-height:10px; border-radius:50%; border:1px solid #ccc; background:#fff; opacity:1; font-size:10px} 
.popup-slide .swiper-pagination span.swiper-pagination-bullet-active{background:#0094d9; border:1px solid #0094d9; color:#fff} 

#header{position:absolute; top:0; left:0; width:100%; z-index:9999;} 
#header .header-in{height:49px; background-color: rgba(0,0,0,0.1); border-bottom:1px solid rgba(255,255,255,0.2)}
#header .nav{display:none;} 
#gnb-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:99999;} 
 
.visual-wrap{position:relative;} 
.visual{position:relative}  
.visual div > div > img{width:100%;}      
.visual .txt{position:absolute; top:30%; left:0; width:100%; text-align:center;}
.visual .txt h1{display:block; margin:10px 0 25px 0; -webkit-transform:translateX(50px); transform:translateX(50px); opacity: 0;}
.visual .txt01 h1 img{width:55%}
.visual .txt01 h2 img{width:78%} 
.visual .txt01 p img{width:60%}  
.visual .txt02 h1 img{width:55%}
.visual .txt02 h2 img{width:67%} 
.visual .txt02 p img{width:80%} 
.visual .txt h2{-webkit-transform:translateX(-50px); transform:translateX(-50px); opacity: 0;}
.visual .txt p{-webkit-transform:translateY(50px); transform:translateY(50px); opacity: 0;}
.swiper-slide-active .txt h1{-webkit-transform:translateX(0); transform:translateX(0); transition: -webkit-transform 1s; transition: transform 1s; opacity: 1;}
.swiper-slide-active .txt h2{-webkit-transform:translateX(0); transform:translateX(0); transition: -webkit-transform 1s; transition: transform 1s; opacity: 1;}
.swiper-slide-active .txt p{-webkit-transform:translateY(0); transform:translateY(0); transition: -webkit-transform 1s; transition: transform 1s; opacity: 1;}
.visual .swiper-pagination{bottom:35px !important}    
.visual .swiper-pagination span{width:7px; height:7px; border:2px solid #fff; background:rgba(26,46,71,0.1); border-radius:50%; opacity:1}  
.visual .swiper-pagination span.swiper-pagination-bullet-active{border:2px solid #0094d9; background:#0094d9;}  
  
  
.news-banner{position:absolute; bottom:30px; width:90%; margin:0 5%; padding:20px 0; text-align:center; background:rgba(0,0,0,0.5); z-index:99} 
.news-banner ul li span{position:relative; display:inline-block; padding:0 11px; color:#fff; vertical-align:middle;}
.news-banner ul li span:nth-child(3){font-size:17px;}
.news-banner ul li span:nth-child(4){padding-left:12px; color:#e55e23; background:url('/resources/img/main/market-up.png') no-repeat left/9px;} 
.news-banner ul li span:first-child:after{content:''; position:absolute; top:2px; bottom:2px; right:-3px; width:1px; background:rgba(255,255,255,0.3);} 
.news-banner .bx-prev{position:absolute; top:12px; right:15px; text-indent:-9999px; width:8px; height:8px; background:url('/resources/img/main/market-btnup.png') no-repeat left/8px;}
.news-banner .bx-next{position:absolute; bottom:12px; right:15px; text-indent:-9999px; width:8px; height:8px; background:url('/resources/img/main/market-btndown.png') no-repeat left/8px;}

.main-info{margin-top:30px; overflow:hidden; border-top:1px solid #d9d9d9; border-left:1px solid #d9d9d9;  box-sizing:border-box}
.main-info li{float:left; width:50%; border-right:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; box-sizing:border-box; font-weight:bold}
.main-info li a{display:block; padding:15px 0 15px 45px; background:url('/resources/img/main/r-btn.png') no-repeat 90%/6px;}
.info01{background:url('/resources/img/main/main-icon01.png') no-repeat 15px/23px;}
.info02{background:url('/resources/img/main/main-icon02.png') no-repeat 15px/23px;}
.info03{background:url('/resources/img/main/main-icon03.png') no-repeat 15px/23px;} 
.info04{background:url('/resources/img/main/main-icon04.png') no-repeat 15px/20px;}   
 
.main-banner{position:relative; padding-bottom:35px !important; margin-top:40px !important}  
.main-banner > div div{padding-bottom:10px}  
.main-banner > div div p{margin-bottom:10px; font-size:13px;} 
.main-banner > div div h3 span{display:block; font-weight:normal} 
.main-banner > div div h3{display:block; font-size:18px; line-height:1.5}
.main-banner > div div .more{display:inline-block; margin-top:15px; padding:8px 10px; font-size:12px; color:#fff; background:#438ec8; background:-moz-linear-gradient(left, #438ec8 0%, #21b29d 100%); background:-webkit-linear-gradient(left, #438ec8 0%,#21b29d 100%); background:linear-gradient(to right, #438ec8 0%,#21b29d 100%); border-radius:5px}
.main-banner > div div .more img{width:36px; margin-left:5px}
.main-banner .banner01{background:url('/resources/img/main/main-banner01.png?ver=20241226') no-repeat right bottom/195px}
.main-banner .banner02{background:url('/resources/img/main/main-banner02.png') no-repeat right bottom/195px} 
.main-banner .banner03{background:url('/resources/img/main/main-banner03.png') no-repeat right bottom/195px}
.main-banner .swiper-pagination{bottom:0 !important}   
.main-banner .swiper-pagination span{width:8px; height:8px; border-radius:50%; border:2px solid #999; background:#fff; opacity:1} 
.main-banner .swiper-pagination span.swiper-pagination-bullet-active{background:#0094d9; border:2px solid #0094d9}  
   
.main-box{padding:30px 5%; margin-top:40px; background:#eff1f7}
.main-box img{width:100%;}
.main-box li{position:relative; margin-bottom:20px}
.main-box li div{position:absolute; top:25px; left:15px}
.main-box li div h3{font-size:18px;}
.main-box li div p{margin-top:8px;} 
.main-box li div span{display:inline-block; width:22px; height:22px; margin-top:15px; text-indent:-9999px; background:url('/resources/img/main/more.png') no-repeat center/22px;}
.main-box li a{color:#fff;}

.notice{margin-top:40px;}
.notice div{overflow:hidden;} 
.notice div h3{float:left; font-size:19px;}
.notice div a{float:right; padding:5px 15px 0 0; font-size:13px; background:url('/resources/img/main/r-btn.png') no-repeat right 7px/6px;}
.notice ul{margin-top:15px; border-top:2px solid #333;}
.notice ul li{padding:15px 0 15px 10px; border-bottom:1px solid #d9d9d9; background:url('/resources/img/main/noti-icon.png') no-repeat left/3px;}
.notice ul li a{display:block; width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.main-download{margin:40px 0 30px 0;} 
.main-download h3{font-size:19px;}
.main-download ul{margin-top:15px; padding:13px 0; border-top:2px solid #333; border-bottom:1px solid #d9d9d9;}
.main-download ul li a{display:flex; align-items:center; justify-content:space-between;}
.main-download ul li a div img{width:50px; margin-right:5px; border-radius:10px}
.main-download ul li a span{color:#666; padding-right:15px; background:url('/resources/img/main/r-btn.png') no-repeat right/6px;}

.main-pst{margin-bottom:25px; background:#cfdded; border-radius:5px; padding:0 20px;}
.main-pst p a{position:relative; display:block; padding:15px 10px 15px 29px; background:url('/resources/img/main/pst-icon.png') no-repeat left/20px;}
.main-pst p a:after{content:''; position:absolute; top:50%; right:0; width:12px; height:12px; margin-top:-6px; background:url('/resources/img/main/pst-more.png') no-repeat center/12px;}