@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
@import url(swiper.min.css);



.leftBar>div{height:100%;background:#f3f3f3;overflow:hidden;}
header{z-index:3}
.realCont{display:flex;}
.leftBar{position:relative;height:100%;left:0;top:0;}
.mainWrap{float:left;width:calc(100% - 75px);}
.mainLeft{float:left;}
.mainRight{float:left;}

.onlineBox{color:#fff;padding:52px 0 0 31px;height:335px;width:560px;background:#649f62;float:left;overflow:hidden;cursor:pointer;}
.onlineBox button{font-size:26px;margin-bottom:20px;color:#fff;font-weight:600;padding-top:20px;width:155px;position:relative;}
.onlineBox button span{display:block;position:absolute;width:51px;height:25.705px;    top:0;right:0;}
.onlineBox button span.hover{display:none;}
.onlineBox button:hover span{display:none;}
.onlineBox button:hover span.hover{display:block}
.onlineBox p{font-size:16px;line-height:24px;letter-spacing:1px}
.onlineBox p b{font-family:'Spoqa Han Sans', 'Sans-serif';}
.onlineBox p.ect_call{margin-top:5px;}
.onlineBox b.pointFont{font-size:33px;font-weight:500;}
.onlineBox .roboto,
.onlineBox .address{color:rgba(255, 255, 255, 0.6);font-size:12px;}
.onlineBox .roboto{font-family:'Roboto';    margin-top:10px;}

.main_brand{padding:31px 0 0 31px;float:left;width:560px}
.main_brand .brandTab{margin-bottom:24px;}
.main_brand .brandTab li{float:left;line-height:22px;}
.main_brand .brandTab button{font-size:12px;color:#999;font-weight:500}
.main_brand .brandTab li.on button{color:#333;font-weight:600}
.main_brand .brandTab button i{display:inline-block;vertical-align:middle;width:1px;height:12px;background:#b4b4b4;margin:0 5px;}
.brand_tabList {height:495px;}
.brand_tabList li{float:left;width:87px;margin-left:16px;margin-bottom:12px;margin-right:-4px;}
.brand_tabList li img{width:100%;border:1px solid #ddd;}
.brand_tabList li:first-child,
.brand_tabList li:nth-child(5n+1){margin-left:0;}
.brand_tabList .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{    background-color:#949494;}
.mCSB_scrollTools .mCSB_draggerRail{background:#fff;}

.spoqa{font-family:'Spoqa Han Sans', 'Sans-serif';}
.textBox{height:335px;padding:109px 0 30px 43px;float:left;width:calc(100% - 560px);    overflow:hidden;}
.textBox>p{display:inline-block;vertical-align:bottom;}
.textBox .num{font-size:30px;color:#013159}
.textBox .num span{font-size:50px;}
.textBox .num b{font-size:120px;line-height:120px;display:block;}
.textBox .text{font-size:14px;color:#333;line-height:22px;margin-left:33px;}
.textBox .text span{font-size:36px;color:#013159;display:block;line-height:24px;margin-bottom:20px;}


.main_banner{height:603px;position:relative;float:right;width:calc(100% - 560px);;overflow:hidden;s}
.main_banner .swiper-slide img{/*width:100%*/right:-20px;}
.main_banner>p{position:absolute;top:0;left:0;z-index:5;    background:rgba(0, 0, 0, 0.3);}
.main_banner .swiper-slide{position:relative;}
.main_banner .swiper-slide a{display:block;max-height:603px}
.main_banner .swiper-slide p{font-weight:600;position:absolute;text-align:right;right:40px;top:40px;font-size:36px;line-height:40px;}
.main_banner .swiper-slide p span{font-size:24px;line-height:22px;display:block;margin-top:10px;    text-transform:uppercase;}
.main_banner .swiper-slide p i{font-size:16px;font-style:normal;display:block;}
.main_banner .btnsWrap{position:Absolute;right:40px;bottom:24px; display:flex; gap:5px;}
.main_banner .btnsWrap>div{position:relative;width:32px;height:32px;background:pink;left:0;top:0;margin-top:0; display:inline-block; z-index:1;}
.main_banner .btnsWrap>div.swiper-button-prev{background:url('/images/bannerLeft.png') no-repeat 50%;}
.main_banner .btnsWrap>div.swiper-button-next{background:url('/images/bannerRight.png') no-repeat 50%;}
.main_banner .btnsWrap>div.btn_papl {background:#000; cursor:pointer; display:none;}
.main_banner .btnsWrap>div.btn_papl.on {display:block;}
.main_banner .btnsWrap>div.btn_pause {background:url('/images/btn_pause.svg') no-repeat 50% 50% / contain;}
/* .main_banner .btnsWrap>div.btn_pause:before,
.main_banner .btnsWrap>div.btn_pause:after {content:""; position:absolute; top:50%; left:50%; width:3px; height:16px; background:#fff; margin-top:-8px;}
.main_banner .btnsWrap>div.btn_pause:before {margin-left:-5px;}
.main_banner .btnsWrap>div.btn_pause:after {margin-left:3px;} */
.main_banner .btnsWrap>div.btn_play:before {content:""; display:block; width:100%; height:100%; background:#fff; mask:url('/images/btn_play.svg') no-repeat 50%; -webkit-mask:url('/images/btn_play.svg') no-repeat 50%;}
.main_banner .swiper-pagination{display:none}


.mainSection{
	overflow-y:hidden;
	height:100vh;
}

.font_0902 {font-size:12px;}


/* Æ˾÷ */
#main_popup {display:none; position:fixed; top:0; left:0; bottom:0; right:0;  z-index:900;  background:rgba(0,0,0,0.8);}
#main_popup .pc_pop_img {position:absolute; top:8%; left:50%; width:700px;  margin-left:-350px; }
#main_popup .popup_bottom {position:absolute; bottom:16%; left:50%; margin-left:-350px; padding:10px; width:700px; background:#fff; text-align:right;}
#main_popup .popup_bottom a {font-size:14px; letter-spacing:-1px;}
#main_popup .popup_bottom a.closePopup {margin:0 10px}
#main_popup .m_pop_img {display:none}

@media(max-width:1920px){
/*	.main_banner .swiper-slide img{width:auto;}*/
}

@media(max-width:1200px){
	.mainSection{
		overflow-y:auto;
		height:auto;
	}
	header ul{display:none}
	header.gnbOn ul{display:block;}
	.gnbActive .leftBar>div{background:#145aa9}
	section.leftBar{z-index:2}
	.mainWrap {float:none;width:100%;position:relative;}
	
	.onlineBox{position:absolute;width:78.125%;right:0;z-index:1;top:17.313em;height:26.250em;padding:6.2% 1.4em;cursor:pointer;}
	.onlineBox button{font-size:1.875em;margin-bottom:.5em;padding-top:11%;width:5.600em;}
	.onlineBox button span{width:2.633em;}
	.onlineBox p{font-size:1em;}
	.onlineBox b.pointFont{font-size:2.063em}
	.onlineBox .roboto, 
	.onlineBox .address{font-size:0.875em;line-height:1.429em;}
	
	.main_banner{position:absolute;width:100%;top:0;height:40.313em}
	.main_banner>p{display:none;}
	.main_banner>div{z-index:0}
	.main_banner>div,
	.main_banner .swiper-slide{height:40.313em;position:relative;overflow:hidden;}
	.main_banner .swiper-slide p{z-index:4;font-size:2.250em;right:6.09375%;    top:1.111em;line-height:1.111em;}
	.main_banner .swiper-slide p span{font-size:0.667em;margin-top:0.2em;}
	.main_banner img{height:100%;position:absolute;right:0;    }
	.main_banner .btnsWrap{display:none;}
	
	.textBox{float:none;width:100%;position:relative;padding:44.313em 0 2.625em 20.9375%;height:auto;}
	.textBox::after{content:"";display:block;position:absolute;width:79.0625%;height:0.313em;background:#013159;right:0;bottom:0;}
	.textBox .num{font-size:1.875em}
	.textBox .num span{font-size:1.667em;}
	.textBox .num b{font-size:4.000em}
	.textBox .text{margin-left:0;font-size:1.250em;line-height:1.800em;color:rgba(51, 51, 51, 0.6);}
	.textBox .text span{font-size:2.250em;}
	.textBox .text span b{display:inline;    line-height:1em;margin:5% 0 3%}
	
	
	.main_brand{float:none;width:100%;    padding:2.625em 0 0 20.9375%;position:relative;}
	.main_brand::after{content:"";display:block;width:100%;padding-top:100%;}
	.main_brand .mobileTab{width:100%;overflow-x:scroll;margin-bottom:8%}
	.main_brand .mobileTab ul{width:1370px;margin-bottom:0;}
	
	.brandTabList{width:79.0625%;height:73%;bottom:0;right:0;overflow-y:scroll;margin-bottom:5%;position:absolute;}
	.main_brand .brandTab button{font-size:1.250em}
	.brand_tabList .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background:rgba(51, 51, 51, 0);;}
	.mCSB_inside > .mCSB_container{margin-right:0% !important;}
	.brand_tabList{height:auto;padding-right:2%;}
	.brand_tabList li{width:28.6%;margin-left:7.1%;margin-bottom:7.1%}
	.brand_tabList li:nth-child(5n+1){margin-left:7.1%;}
	.brand_tabList li:nth-child(3n+1){margin-left:0%;}
	
	.mCSB_scrollTools{display:none !important}

}

@media(max-width:800px){
	.leftBar>div{background:#fff;}
.mainWrap{margin-top:calc(4.6em + 2.7rem);}
#main_popup .pc_pop_img {display:none}
#main_popup .m_pop_img {display:block; position:absolute; top:8%; left:50%; margin-left:-250px; width:500px; background:#fff url('../../images/main/bg_popup.jpg')no-repeat 0 72%; background-size:contain}

#main_popup .m_pop_img .logo_bar {overflow:hidden; padding-top:11px;}
#main_popup .m_pop_img .logo_bar img {float:left; width:175px}
#main_popup .m_pop_img .logo_bar img + img {float:right; margin-right:10px; width:39px;}
#main_popup .m_pop_img .pop_txt {text-align:center}
#main_popup .m_pop_img .pop_txt p {font-weight:bold;}
#main_popup .m_pop_img .pop_txt p:first-child {font-size:26px; color:#d4363a}
#main_popup .m_pop_img .pop_txt p:nth-child(2) {font-size:20px; font-weight:500}
#main_popup .m_pop_img .pop_txt p:nth-child(3) {padding:24px 0; font-size:18px; font-weight:900; color:#192230; }
#main_popup .m_pop_img .pop_txt p:last-child {margin:0 auto; width:416px; font-size:12px; font-weight:400; line-height:2}
#main_popup .m_pop_img .pop_list {overflow:hidden; margin:42px auto 0; padding:0 18px; width:505px}
#main_popup .m_pop_img .pop_list li {float:left; width:145px}
#main_popup .m_pop_img .pop_list li + li {margin-left:17px}
#main_popup .m_pop_img .pop_list li img {width:100%}
#main_popup .m_pop_img .pop_list li .comp_name {font-size:10px;}
#main_popup .m_pop_img .pop_list li .tit {padding-top:7px; text-align:center; font-size:12px}
#main_popup .popup_bottom {bottom:32%; margin-left:-250px; width:500px; }
#main_popup .popup_bottom a{font-size:12px;}
.font_0902 {font-size:.7em;}

}
@media(max-width:560px){
	.main_brand .mobileTab ul{width:1208px;}
#main_popup .m_pop_img {margin-left:-45%; padding-bottom:5%; width:90%;}
#main_popup .m_pop_img .pop_txt p:last-child {width:331px}
#main_popup .m_pop_img .pop_list {width:100%}
#main_popup .m_pop_img .pop_list li {width:30%}
#main_popup .m_pop_img .pop_list li + li {margin-left:5%}
#main_popup .m_pop_img .pop_list li .tit {font-size:9px}
#main_popup .popup_bottom {bottom:30%; margin-left:-45%; width:90%;}
}

@media(max-width:460px){
#main_popup .m_pop_img {top:5vh}
#main_popup .popup_bottom {bottom:auto; top:79vh; padding:2%}
}
@media(max-width:420px){
.main_brand .mobileTab ul{width:880px;}


}

@media(max-width:320px){
	.main_brand .mobileTab ul{width:700px;}
}