@charset "euc-kr";

/* gnb :: only main */
.header {background-color:transparent;}
.header.active{height:81px;}
.header .header_wrap .logo a {background-image:url(/httpobject/images/common/new_gnb_logo.png);}
.gnb .depth1 .depth1_link {color:#fff;}
.header.active .header_wrap .logo a,
.header.open .header_wrap .logo a{background-image:url(/httpobject/images/common/new_gnb_logo_on.png);}
.util_menu a {border-left-color:#fff; color:#fff;}

.header.active .gnb .depth1 .depth1_link,
.header.open .gnb .depth1 .depth1_link{color:#222;}
.header.active .gnb .depth1.on .depth1_link,
.header.open .gnb .depth1.on .depth1_link {color:#cd9834;}

.main_wrap *{font-family: 'NotoSansKRWeb', Arial, sans-serif;}

/* #visualContent */
#visualContent{overflow: hidden; position: relative; min-width: 1100px; max-width: 1920px; height: 800px; margin: 0 auto 80px;}
.visual_wrap{position: absolute; left: 50%; top: 0; width: 1920px; height: 800px; margin-left: -960px;}
.slide:after{position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; height: 80px; background-color: #000; opacity: .5; content: "";}
.slide_btn_list{position: absolute; left: 50%; bottom: 15px; z-index: 5; width: 1100px; margin-left: -550px; text-align: right;}
.slide_btn_list li{display: none;}
.slide_btn_list li.active{display: block;}
.slide_btn_list .btn_slide{display: inline-block; margin-left: 40px; font-weight: 600; font-size: 20px; color: #fff; vertical-align: middle;}
.slide_btn_list .btn_slide:first-child{margin-left: 0;}
.slide_btn_list .btn_slide:after{display: inline-block; width: 50px; height: 50px; margin-left: 10px; background: url(/httpobject/images/common/arrow_right_g.png) 50% no-repeat; border: 2px solid #9d9ca1; border-radius: 100%; box-sizing: border-box; vertical-align: middle; content: "";}
.slide_btn_list .btn_slide:first-child:after{border-color: #cd9834; background-image: url(/httpobject/images/common/arrow_right_y.png);}
.slide_btn_list .btn_slide01:after{border-color: #cd9834; background-image: url(/httpobject/images/common/arrow_right_y.png);}
.visual_wrap .swiper-pagination{left: 50%; bottom: 25px; width: auto; margin-left: -550px;}
.visual_wrap .swiper-pagination .swiper-pagination-bullet{width: 15px; height: 15px; margin: 0 10px; background-color: #b3b3b3; opacity: 1; box-sizing: border-box;}
.visual_wrap .swiper-pagination .swiper-pagination-bullet:focus{outline: none;}
.visual_wrap .swiper-pagination .swiper-pagination-bullet:first-child{margin-left: 0;}
.visual_wrap .swiper-pagination .swiper-pagination-bullet:last-child{margin-right: 0;}
.visual_wrap .swiper-pagination .swiper-pagination-bullet-active{width: 21px; height: 21px; margin: 0 7px -3px; border: 3px solid #b3b3b3; background-color: transparent;}
.visual_wrap .swiper-pagination .swiper-pagination-bullet:first-child.swiper-pagination-bullet-active{margin-right: 4px;}

/* slide_wrap */
.visual_content .arr_wrap{position:absolute; left:0; top:50%; z-index:10; width:100%; height:110px; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.visual_content .arrow {position:absolute; top:0; width:50px; height:100%; background:#000; opacity:0.7;}
.visual_content .arrow:focus{outline: none;}
.visual_content .arrow.prev {left:-50px; margin-top:0; background-image:url(/httpobject/images/common/arrow1_prev.png);}
.visual_content .arrow.next {right:-50px; margin-top:0; background-image:url(/httpobject/images/common/arrow1_next.png);}
.visual_content .arrow.prev:after,
.visual_content .arrow.next:after{display:none;}
.visual_content:hover .arrow.prev,
.visual_content:focus .arrow.prev {animation: arrow_prev 0.2s ease-in forwards;}
.visual_content:hover .arrow.next,
.visual_content:focus .arrow.next {animation: arrow_next 0.2s ease-in forwards;}

@keyframes arrow_prev {
    to {left:0;}
}
@keyframes arrow_next {
    to {right:0;}
}

/* link_wrap */
.link_wrap{overflow: hidden; width: 1100px; margin: 0 auto 85px;}
.link_wrap .link_box{overflow: hidden; float: left; width: 530px; margin-left: 40px;}
.link_wrap .link_box:first-child{margin-left: 0;}
.link_wrap .link_box .img_box{overflow: hidden; position: relative; width: 530px; height: 300px; margin-bottom: 30px;}
.link_wrap .link_box img{position: absolute; left: 0; top: 0; width: 100%; transition: all .6s;}
.link_wrap .link_box h3{padding-bottom: 30px; margin-bottom: 20px; border-bottom: 2px solid #b3b3b3; font-size: 20px; color: #393839;}
.link_wrap .link_box p{font-size: 16px; color: #6e6e6e; letter-spacing: -.045em;}
.link_wrap .link_box:hover img{transform: scale(1.09);}

/* main_banner */
.main_banner{width: 1100px; height: 320px; margin: 0 auto 100px;}
.main_banner .banner_inner{position: relative; width: 1920px; height: 100%; margin-left: -410px; background: url(/httpobject/images/visual/main_banner.jpg) 0 0 no-repeat; background-size: cover;}
.main_banner .banner_info{position: absolute; left: 50%; top: 50%; margin-left: -490px; font-weight: 600; color: #fff; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.main_banner .banner_info p{margin-bottom: 30px; font-size: 26px;}
.main_banner .btn_banner{display: inline-block; width: 160px; height: 50px; line-height: 46px; border: 2px solid #cd9834; font-weight: 600; font-size: 18px; color: #fff; text-align: center; box-sizing: border-box;}

/* link_bottom_wrap */
.link_bottom_wrap{width: 1100px; margin: 0 auto 100px;}
.link_bottom_wrap ul{overflow: hidden;}
.link_bottom_wrap li{float: left; width: 250px; height: 120px; border-right: 1px solid #e6e6e6; text-align: center; box-sizing: border-box;}
.link_bottom_wrap li:nth-child(2){width: 300px;}
.link_bottom_wrap li:nth-child(3){width: 300px;}
.link_bottom_wrap li:nth-child(4){border-right: none;}
.link_bottom_wrap li a{display: block;}
.link_bottom_wrap li .icon{display: inline-block; width: 75px; height: 75px; margin-bottom: 10px; background: url(/httpobject/images/visual/link_icon.png) 0 0 no-repeat;}
.link_bottom_wrap li:nth-child(1) .icon{background-position: 0 0;}
.link_bottom_wrap li:nth-child(2) .icon{background-position: -75px 0;}
.link_bottom_wrap li:nth-child(3) .icon{background-position: -150px 0;}
.link_bottom_wrap li:nth-child(4) .icon{background-position: -225px 0;}
.link_bottom_wrap li p{font-weight: 600; font-size: 16px; color: #393839;}
.link_bottom_wrap li a:hover p{color: #cd9834;}