﻿@charset "utf-8";

#main_bnr_area{width:100%;padding:0 80px}
.bnr_top_area{width:100%}
.big_bnr_area{position:relative;width:100%;height:525px}

.bnr_top_area .inner{position:relative;max-width:1300px;margin:0 auto}
.bnr_top_area .txt_box{padding-top:55px;margin-bottom:70px}
.bnr_top_area .txt_box .s_tit{margin-bottom:20px;font-size:15px;color:var(--primary);font-family:'SBAggroM'}
.bnr_top_area .txt_box .tit{font-weight:normal;font-size:51px;font-weight:700;line-height:70px;color:#333;font-family:'NanumSquare', sans-serif}

.bnr_top_area .controls_area{position:absolute;top:115px;right:0;width:474px}
.bnr_top_area .controls_area .control_box{overflow:hidden;margin-bottom:20px}
.bnr_top_area .controls_area .control_box .pager{position:relative;float:left;font-size:13px;color:#787878;font-family:'SBAggroL'}
.bnr_top_area .controls_area .control_box .pager span{display:inline-block;margin-right:12px;cursor:pointer}
.bnr_top_area .controls_area .control_box .pager:before{position:absolute;top:6px;right:-100px;content:'';width:90px;height:1px;background:#d9d9d9}
.swiper-button-disabled{color:#c7c7c7;cursor:no-drop !important}
.bnr_top_area .controls_area .control_box .num{float:right;font-family:'SBAggroM'}
.bnr_top_area .controls_area .control_box .b_num{font-size:17px;color:#222}
.bnr_top_area .controls_area .control_box .s_num{position:relative;margin-left:15px;font-size:11px;color:#a6a6a6}
.bnr_top_area .controls_area .control_box .s_num:before{position:absolute;left:-10px;bottom:3px;content:'';width:1px;height:10px;background:#d0d0d0;transform:rotate(15deg)}

.bnr_top_area .controls_area .thumb_box{overflow:hidden}
.bnr_top_area .controls_area .thumb_box .swiper-wrapper > div{position:relative;overflow:hidden;float:left;width:150px !important;height:60px;margin-right:12px;cursor:pointer;background:#333;background-size:cover;background-position:center}
.bnr_top_area .controls_area .thumb_box .swiper-wrapper > div:last-child{margin-right:0}
.bnr_top_area .controls_area .thumb_box .swiper-wrapper > div img{position:relative;left:-50%;width:200%;opacity:.7;transition:all .3s}
.bnr_top_area .controls_area .thumb_box .swiper-wrapper > div .time_line{position:absolute;z-index:10;width:0;height:8px;bottom:0;background:var(--primary)}
.bnr_top_area .controls_area .thumb_box .swiper-wrapper > div.swiper-slide-thumb-active img{opacity:1}
.bnr_top_area .controls_area .thumb_box .swiper-wrapper > div.swiper-slide-thumb-active .time_line{animation:line 4s}
@-webkit-keyframes line {0% {width:0}90%{width:101%}100%{width:0}}

#main_bnr_area .swiper-slide{background-size:cover;background-position:center}

.big_bnr_area .big_bnr{overflow:hidden;position:relative;width:100%;height:425px;background:#c00}
.big_bnr_area .txt_box{position:absolute;z-index:100;left:0;bottom:0;width:50%;height:200px;
background:-webkit-linear-gradient(90deg, rgb(57, 149, 210), rgb(57, 149, 210));
background:linear-gradient(90deg, rgb(57, 149, 210), rgb(57, 149, 210))}
.big_bnr_area .icon_area{position:absolute;left:50%;bottom:0;width:650px;height:100px}

#main_bnr_area .img1{background-image:url(main_bnr01.jpg)}
#main_bnr_area .img2{background-image:url(main_bnr02.jpg)}
#main_bnr_area .img3{background-image:url(main_bnr03.jpg)}

.big_bnr_area .txt_box .txt_cont{position:absolute;right:0;top:0;width:650px;height:100%}
.big_bnr_area .txt_box .txt_cont > div{float:left}
.big_bnr_area .txt_box .about_txt{padding-top:58px}
.big_bnr_area .txt_box .about_txt .tit{margin-bottom:10px;font-size:26px;color:#fff;font-family:'SBAggroM'}
.big_bnr_area .txt_box .about_txt .txt{font-size:15px;line-height:26px;color:rgba(255,255,255,.5);font-family:'SBAggroL'}

.big_bnr_area .txt_box .tel_txt{padding:58px 0 0 50px}
.big_bnr_area .txt_box .tel_txt .tel{margin-bottom:10px;margin-bottom:10px;font-size:27px;color:#fff;font-family:'SBAggroM'}
.big_bnr_area .txt_box .tel_txt .txt{font-size:13px;line-height:22px;color:rgba(255,255,255,.5);font-family:'SBAggroM'}
.big_bnr_area .txt_box .tel_txt .txt span{color:rgba(255,255,255,.7)}

.big_bnr_area .icon_area > div{position:relative;overflow:hidden;float:left;width:33.33%;height:100%;text-align:center}
.big_bnr_area .icon_area > div:before{position:absolute;right:0;top:25px;content:'';width:1px;height:50px;background:#e5e5e5}
.big_bnr_area .icon_area > div:last-child:before{display:none}

.big_bnr_area .icon_area .icon_inner{display:inline-block;padding-top:30px;text-align:left}
.big_bnr_area .icon_area .icon{float:left;margin-right:15px}

.big_bnr_area .icon_area .txt{float:left}
.big_bnr_area .icon_area .s_tit{margin-bottom:3px;font-size:13px;color:#bfbfbf;font-family:'SBAggroL';transition:all .3s}
.big_bnr_area .icon_area .tit{font-size:17px;color:#111;font-family:'SBAggroL'}

/* 반응형 [s] */
@media (hover:hover) {
.big_bnr_area .icon_area .icon_inner:hover .s_tit{color:var(--primary)}
}
@media (max-width:1530px){
#main_bnr_area{padding:0 40px}
.big_bnr_area .icon_area{width:50%}
.big_bnr_area .txt_box .txt_cont{padding-left:30px;position:relative;right:auto;top:auto;width:100%}
.big_bnr_area .txt_box .tel_txt{padding-left:30px}
}
@media (max-width:1400px){
#main_bnr_area{padding:0 20px}
.bnr_top_area .txt_box{position:relative;margin-bottom:35px}
.bnr_top_area .txt_box .tit{font-size:44px;line-height:58px}
.bnr_top_area .controls_area .thumb_box .swiper-wrapper > div{width:125px !important}
.bnr_top_area .controls_area{bottom:-610px;top:auto;width:auto}
.big_bnr_area{height:auto}
.big_bnr_area .icon_area{position:relative;width:100%;max-width:760px;bottom:auto;left:auto;height:auto;margin:60px auto;overflow:hidden}
.big_bnr_area .icon_area .icon_inner{display:block;text-align:center}
.big_bnr_area .icon_area .icon{float:none;margin:0}
.big_bnr_area .icon_area > div{text-align:center}
.big_bnr_area .icon_area > div:before{height:100%}
.big_bnr_area .icon_area .txt{float:none;margin-top:15px}
.big_bnr_area .icon_area .tit{margin-top:8px;font-size:20px}
.big_bnr_area .icon_area .s_tit{color:var(--primary)}
.big_bnr_area .txt_box{position:relative;width:56%}
.big_bnr_area .txt_box .tel_txt{padding-left:20px}
}
@media (max-width:1024px){
#main_bnr_area{padding:0}
.bnr_top_area .txt_box{padding-left:20px}
.bnr_top_area .controls_area{display:none}
.bnr_top_area .txt_box .tit{font-size:35px;line-height:50px}
.big_bnr_area{background-color:#f7f7f7}
.big_bnr_area .big_bnr{height:325px}
.big_bnr_area .txt_box{display:none;width:100%;height:auto;padding:34px 0;overflow:hidden}
.big_bnr_area .txt_box .about_txt,.big_bnr_area .txt_box .tel_txt{padding-top:0}
.big_bnr_area .txt_box .about_txt .tit{font-size:22px}
.big_bnr_area .txt_box .tel_txt .tel{font-size:22px}
.big_bnr_area .icon_area .icon_inner{display:block;height:100%;width:100%;padding:25px 0;text-align:center}
.big_bnr_area .icon_area{margin:0 auto;background-color:#f7f7f7}
.big_bnr_area .icon_area > div:before{height:105px}
}
@media (max-width:768px){
.big_bnr_area .big_bnr{height:205px}
.big_bnr_area .txt_box{display:none}
}
@media (max-width:480px){
.bnr_top_area .txt_box{padding-top:35px;margin-bottom:25px}
.bnr_top_area .txt_box .s_tit{font-size:13px}
.bnr_top_area .txt_box .tit{font-size:24px;line-height:34px}
.big_bnr_area .big_bnr{height:160px}
.big_bnr_area .icon_area .tit{font-size:15px}
}
/* 반응형 [e] */
