@charset "utf-8";
#wrap{position: relative;}
header{width: 100%; background: rgba(0,0,0,0.6); position: absolute; z-index: 9;}
header:hover{background: #fff;}
header .btn_lang{width: 100%; position: absolute; z-index: 100;  background: rgba(72, 73, 84,0.5);}
header .btn_lang li.lan{width: 70px; box-sizing: border-box; position: relative;  border: 0; height: 30px;padding: 4px;}
header .btn_lang li.srh{background: none; border: 0; position: relative;}
header .btn_lang li.srh input[type="text"]{width: 100px; border: 1px solid #fff; border-radius: 10px; height: 20px; background: none; margin-top: -4px; color: #fff; box-sizing: border-box; padding: 0 8px;}
header .btn_lang li.srh a{position: absolute; right: 13px; top: 4px;}
header .btn_lang li.srh a *{color: #fff; font-size: 17px;}
header .btn_lang li.lan a{color: #fff; }
header .btn_lang li.lan a *{color: #fff; }
header .btn_lang li.lan .box{display: block; position: absolute; z-index: 100; border: 1px solid #dfdfdf; border-radius: 10px; padding: 3px; display: block; width: 50px; text-align: center; background: #484954;}
header .btn_lang li.lan a>span.arw{display: inline-block;margin-left: 5px; margin-top: -3px;}
header .btn_lang li.lan a>span.arw2{ display: none;;margin-left: 5px; margin-top: 3px;}
header .btn_lang li.lan .sub{display: none; text-align: center; z-index: 101}
header .btn_lang li.lan .box .sub a{display: block; width: 100%; text-align: left; line-height: 24px; box-sizing: border-box; padding-left: 4px;}
header .btn_lang li.lan:hover .sub{display: block;}
header .btn_lang li.lan .box:hover a span.arw{display: none;}
header .btn_lang li.lan .box:hover a span.arw2{display: inline-block;}
header .btn_lang li{float: right;padding: 7px; margin-right: -1px;}
header .btn_lang li a{font-size: 15px; color: #fff;}
header .header_top{text-align: right;padding: 40px 0 10px;}
header:hover {background: #fff;}
header .header_menu{width: 100%; height: 100px; line-height: 70px; box-sizing: border-box; padding-left: 30%; position: relative; text-align: right;z-index: 99; padding-top: 30px;}
header .header_menu  img{vertical-align: middle;}
header .header_menu .logo_home{position: absolute; left: 0; top: 30px; max-width: 350px;}
header .header_menu .logo_home img{height: 60px;}
header .header_menu li{width: 25%; text-align: center; box-sizing: border-box;}
header .header_menu li:hover a{ border-bottom: 3px solid #484954; color: #484954;}
header .header_menu a.tit{font-size: 20px; font-weight: bold; color: #fff;display: block; height: 70px; box-sizing: border-box;}
header:hover .header_menu a.tit{color: #606060;}
header .header_menu a.menu{margin-right: 0;}
/*header .header_sub{display: none; position: absolute; width: 100%; left: 0; top: 100px; background: #fff url(../img/ylem_op.png) no-repeat 90% 100%;  z-index: 9; border-top: 1px solid #ccc; padding-top: 20px;}*/
header .header_sub{display: none; position: absolute; width: 100%; left: 0; top: 100px; background: #fff;  z-index: 9; border-top: 1px solid #ccc; padding-top: 20px;}
header .header_sub>ul{padding: 10px 0; box-sizing: border-box; padding-left: 29%;}
header .header_sub>ul>li{width: 25%;}
header .header_sub ul.sub li{width: 100%; margin-bottom: 20px; text-align: center;}
header .header_menu:hover ~.header_sub{display: block;}
header .header_sub:hover {display: block;}
header .header_sub ul.sub li a{font-size: 17px;}
header .header_sub ul.sub li a:hover {color: #484954; font-weight: bold;}
header .m_header{display: none; width: 100%; height: 60px; box-sizing: border-box; position: relative;}
header .m_header .logo{display: block; width: 260px; position: relative; top: 0px; margin: 0 auto; text-align: center}
header .m_header .logo img{height: 50px; vertical-align: middle;}
header .m_header .menu{position: absolute; top: 30px; right: 2.5%;}
.top_heder{display: none; position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; padding: 35px; background: rgba(0,0,0,0.9); z-index: 99;}
.top_heder a.logo_home{display: block; width: 25%; margin-bottom: 30px;}
.top_heder .top_tit{font-size: 25px; margin-bottom: 20px;}
.top_heder ul{width: 95%; max-width: 1280px; margin: 0 auto; position: relative;}
.top_heder>ul>li {display: inline-block; width: 13%;  margin: 0 10px;}
.top_heder>ul>li a{color: #f5f5f5; font-weight: bold; font-size: 16px;}
.top_heder>ul>li a.tit{display: block; font-size: 20px; margin-bottom: 10px;}
.top_heder a.close{position: absolute; right:10px;top:20px;}
.top_heder a.close *{font-size:40px; color:#003591;}
.top_heder ul.sub li{width: 100%; padding-left: 10px;}
#maincontainer  .mainslideBox{width: 100%; max-height: 750px; float: left; overflow: hidden; position: relative; top: -100px; margin-bottom: -100px;}
#maincontainer  .mainslideBox img{width: 100%;}
#maincontainer  .mainslideBox #mainSlide .slick-dots{position: absolute; width: 100%; top: 670px; text-align: center;}
#maincontainer  .mainslideBox #mainSlide .slick-dots li {display: inline-block;margin-right: 5px;}
#maincontainer  .mainslideBox #mainSlide .slick-dots li button{ width: 15px; height: 15px; color: rgba(0,0,0,0); border: 0; background: #ccc}
#maincontainer  .mainslideBox #mainSlide .slick-dots li.slick-active button{background: #009f3b;}
#maincontainer  .mainslideBox #mainSlide .slick-arrow{position: absolute; top: 325px; width: 50px; height: 50px; z-index: 99; color: rgba(0,0,0,0); border: 0; cursor: pointer;}
#maincontainer  .mainslideBox #mainSlide .slick-arrow.slick-prev{left:50px; background: rgba(0,0,0,0.5) url(../img/slick-left.png) no-repeat 0 center; background-size: 100%;border-radius: 50%;}
#maincontainer  .mainslideBox #mainSlide .slick-arrow.slick-next{right: 50px;background: rgba(0,0,0,0.5) url(../img/slick-right.png) no-repeat 100% center; background-size: 100%; border-radius: 50%;}
#maincontainer  .mainslideBox #mainSlide .txtbox{position: absolute; top: 220px; width: 100%; padding: 30px 0; background: rgba(0,0,0,0.5); overflow: hidden;}
#maincontainer  .mainslideBox #mainSlide img{min-height: 550px;}
#maincontainer  .mainslideBox #mainSlide .txtbox .con{width: 100%; max-width: 1280px; margin: 0 auto;}
#maincontainer  .mainslideBox #mainSlide .txtbox .con span{color: #fff; position: relative;}
#maincontainer  .mainslideBox #mainSlide .txtbox .con span.sp1{display: inline-block; font-size: 38px; line-height: 40px; animation-name: mainAni1; animation-duration: 0.8s; animation-iteration-count: 1;}
#maincontainer  .mainslideBox #mainSlide .txtbox .con span.sp2{display: inline-block; font-size: 38px;line-height: 40px; animation-name: mainAni1; animation-duration: 1.5s; animation-iteration-count: 1;}
#maincontainer  .mainslideBox #mainSlide .txtbox .con span.sp3{display: block; font-size: 38px; line-height: 40px;animation-name: mainAni2; animation-duration: 2.5s; animation-iteration-count: 1;}
#maincontainer  .mainslideBox #mainSlide .txtbox .con span.sp4{display: block; font-size: 28px; font-weight: bold; animation-name: mainAni3; animation-duration: 3.5s; animation-iteration-count: 1; overflow: hidden; height: 35px; line-height: 35px;}
#maincontainer  .mainslideBox #mainSlide .txtbox .con span.sp5{display: block; font-size: 20px; line-height: 30px; animation-name: mainAni4; animation-duration: 5s; animation-iteration-count: 1;}


@keyframes mainAni1{
  0%{top: -300px; opacity: 0;}
  80%{top: 0; opacity: 1;}
}
@keyframes mainAni2{
  0%{top: -300px; opacity: 0;}
  50%{top: -300px; opacity: 0;}
  80%{top: 0; opacity: 1;}
}
@keyframes mainAni3{
  0%{width: 0px; opacity: 0;}
  50%{width: 0px; opacity: 0;}
  100%{width: 100%;  opacity: 1;}
}
@keyframes mainAni4{
  0%{opacity: 0;}
  60%{opacity: 0;}
  100%{opacity: 1;}
}

/*
#maincontainer  .txt_con{float: left; width: 50%; height: 500px; padding: 60px 50px; background: #269251; box-sizing: border-box;}
#maincontainer .txt_con p {color: #fff;}
#maincontainer .txt_con p.p_line {display: inline-block;color: #dfdfdf; margin: 20px 0; padding: 5px 0; border-bottom: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; }
#maincontainer p.txt{line-height: 20px; color: #c5c5c5; margin-bottom: 20px; word-break: keep-all; width: 90%;}
#maincontainer .txt_con span {color: #d2e6ff;}
*/
#maincontainer .main_menu{width: 100%; }
#maincontainer .main_menu a{width: 15.5%; text-align: center; color: #fff; display: inline-block; font-weight: bold; font-size: 14px;}
#maincontainer .main_menu a img{display: block; width: 90%; margin: 0 auto;}
/*container*/
#container .news{margin: 80px auto;}
#container .news li{width: 25%; margin-left: 20px; box-sizing: border-box; border: 1px solid #ccc;}
#container .news li img{width: 100%; height: 175px;}
#container .news li p{word-break: keep-all; line-height: 20px;}
#container .news li.tit{width: 20%; padding-left: 20px; border: 0; margin: 0;}
#container .news  li.tit p span.sp1{font-size: 23px; font-weight: normal; letter-spacing: -2px; font-family :'Nanum Gothic Light';}
#container .news  li.tit p span.sp2{font-size: 23px; font-weight: normal; letter-spacing: -1px; font-family :'Nanum Gothic Light';}
#container .news li.tit p.feb{color: #444; line-height: 30px;}
#container .news li.tit .line{display: block; width: 40px; border-bottom: 5px solid #414b91; margin: 10px 0;}
#container .news li.tit .btn_more{ display: inline-block; margin: 20px 0; padding: 10px 20px; border: 1px solid #414b91; text-align: center; font-style: italic; color: #414b91; font-size: 12px;}
#container .news li.tit .btn_more{ display: inline-block; margin: 20px 0; padding: 10px 20px; border: 1px solid #414b91; text-align: center; font-style: italic; color: #414b91; font-size: 12px;}
#container .news li.con {height: 320px;}
#container .news li.con p.context{padding: 10px 20px 0; font-size: 14px; line-height: 20px; }
#container .news li.con p.context a{font-size: 16px; color: #222; }
#container .news li.con p.day{padding: 10px 20px; }
#container .news li:not(.tit) p.tit{color: #444; margin: 13px 0; }
#container .business {background: #ebebeb url(../img/int_bg.png); background-repeat: no-repeat; background-position: 0 bottom; background-size: 100% 350px; padding: 50px 0;}
#container .business .tit{text-align: center; color: #444;}
#container .business .tit span{color: #414b91;}
#container .business .subtit {text-align: center; margin: 8px 0;}
#container .business .bs_card_box{padding-top: 80px; text-align: center;}
#container .business .bs_card_box .bs_card{ display: inline-block; width: 23%; height: 360px; background: #fff; margin-right: 2%; box-sizing: border-box; text-align: left;}
#container .business .bs_card_box .bs_card.bc4{margin-right: 0;}
#container .business .bs_card_box .bs_card img{ width: 100%; height: 200px;}
#container .business .bs_card_box .bs_card p{word-break: keep-all; box-sizing: border-box; padding: 0 30px;}
#container .business .bs_card_box .bs_card p.tit{color: #444; font-size: 20px; font-weight: bold; margin-bottom: 10px; text-align: left; padding: 15px 30px 0;}
#container .business .bs_card_box .bs_card p.con{font-size: 14px; line-height: 20px; color: #858585;}
#container .business .b_txt_1{ color: #fff; margin-top: 60px; text-align: center;}
#container .business .b_txt_1 span{ color: #fff; font-weight: bold; margin: 0 10px;}
#container .business .b_txt_2{ color: #fff; margin-top: 10px;}
#container .border{padding: 50px 0;}
#container .border ul li{width: 49%;}
#container .border ul li:last-child{margin-left: 2%;}
#container .border img:not(.icon){width: 48%;float: left;}
#container .border .txt_box{width: 50%; float: left; box-sizing: border-box; padding-right: 20px;}
#container .border .txt_box p{word-break: keep-all;}
#container .border .txt_box p.fb{color: #444;}
#container .border .txt_box p.sub{margin-top: 20px;}
#container .border .txt_box .line{display: block; width: 40px; border-bottom: 1px solid #444; margin: 10px 0 20px;}
#container .border .txt_box .more{display: block; margin-top: 30px;}
#container .border .txt_box .more img{vertical-align: bottom;}
footer{width: 100%; padding: 40px 0; background: #484954}
footer .footer_con *{color: #f5f5f5;}
footer .footer_con ul li:first-child{width: 14%;}
footer .footer_con ul li:nth-child(2){width:62%; box-sizing: border-box; padding: 0 20px;}
footer .footer_con ul li:last-child{width:23%; position: relative; height: 80px;}
footer .footer_con .f_menu{margin-bottom: 20px;}
footer .footer_con .f_menu a{display: inline-block;color: #ccc; font-size: 15px; line-height: 10px; border-right: 1px solid #ccc; padding-right: 8px; margin-right: 8px;}
footer .footer_con .f_menu a:last-child{border: 0; }
footer .footer_con .bot  span{display: inline-block; margin-right: 15px;}
footer .footer_con .bot p{font-size: 15px; line-height: 20px; color: #ccc;}
footer .footer_con .bot p span.b{font-weight: bold; color: #fff;}
footer .footer_con ul li .sel_box{position: absolute; bottom: 0; right: 0; width: 160px;  height: 35px; background: #222936;}
footer .footer_con ul li .sel_box select{width: 100%; height: 35px; color: #ccc; display: inline-block; border: 0; box-sizing: border-box; padding-left: 20px;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
background : url(../img/sel_bg.png) no-repeat 0 0; background-size: 100%; /*화살표 이미지 */
}
footer .footer_con ul li .sel_box select::-ms-expand { display:none; } /*익스*/
footer .footer_con ul li .sel_box select option{background:#222936; }
#header .m_mask{display: none;}
#log_mask{display: none;}
.mask{display: none;position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 999;}
.mask .login_wrap, .mask .join_wrap, .mask .join_form, .mask .find_wrap{max-width: 50%; height: auto; max-height: 80%; overflow: auto; position: absolute; background: #f5f5f5; top: 10%; right: 20%;}
.mask img.logo{margin-bottom: 20px;}
.mask .tit{font-size: 40px; line-height: 70px; border-bottom: 1px solid #ccc; padding: 0 20px; box-sizing: border-box; text-align: center;}
.mask  a.login_close{position: absolute; top: 0px; right: 0;}
.mask  a.join_close{position: absolute; top: 0px; right: 0;}
.mask  a.find_close{position: absolute; top: 0px; right: 0;}
.mask  a.login_close *{font-size: 40px; color: #fff;}
.mask  a.join_close *{font-size: 40px; color: #fff;}
.mask  a.find_close *{font-size: 40px; color: #fff;}
.mask .con{ padding: 40px;}
.mask .join_wrap .con{text-align: center;}
.mask .con p{font-size: 18px; margin-bottom: 10px;}
.mask .con p.p1{text-align: left; color: #269251;}
.mask .con p.p2{text-align: left; font-size: 16px;}
.mask .con .id_login{margin-bottom: 20px;}
.mask .con .id_login li{width: 50%; text-align: center;}
.mask .con .id_login button{height: 100px; font-size: 20px; }
.mask .con input{display: block; width: 100%; min-width: auto;height: 40px; margin-bottom: 10px; padding-left: 15px;}
.mask .con input{display: block; width: 100%; min-width: auto;height: 40px; margin-bottom: 10px; padding-left: 15px;}
.mask .con .id_login input[type="checkbox"]{width: 15px; height: 15px;display: inline-block; margin: 3px;}
.mask .con .id_login a.blue{color: #00aacd;}
.mask .con  .big_blue{color: #00aacd; font-size: 20px;}
.mask .con .joingo{background: #d0d0d0; color: #fff; display: inline-block; padding: 5px 14px; height: auto;}
.mask .con .id_login li:first-child p{text-align: left;}
.mask .con .id_login li:first-child p label{font-size: 15px;}
.mask .con a{height: 40px;}
.mask .con a.naver {display: inline-block; margin-right: 20px; margin-bottom: 20px;}
.mask .con a.btn{display: inline-block;background: #269251; color: #fff; padding: 10px; margin: 40px 0 0; height: auto; }
.mask .find_wrap .tab_menu li{width: 50%; text-align: center; line-height: 50px; background: #f5f5f5; border: 1px solid #ccc; box-sizing: border-box; }
.mask .find_wrap .tab_menu li a{ color: #606060;}
.mask .find_wrap .tab_menu li.active{background: #364f71; }
.mask .find_wrap .tab_menu li.active a{color: #fff;}
.mask .find_wrap .con label{display: block; margin: 10px 0; color: #444;}
.mask .find_wrap .con a.btn{width: 100%; text-align: center; margin: 20px 0;}
.mask .find_wrap .con p.title{font-size: 25px; color: #444; margin-bottom: 20px;}
.mask .find_wrap .con p.contxt{font-size: 15px; color: #a5a5a5;}

@media (max-width: 1280px){
  #container .news li{width: 24%;}
  #container .news li{margin-left: 1.5%;}
  #maincontainer .mainslideBox #mainSlide .txtbox{text-align: center;}
  #maincontainer .mainslideBox #mainSlide .txtbox .con span.sp1{font-size:30px; line-height:35px;}
  #maincontainer .mainslideBox #mainSlide .txtbox .con span.sp2{font-size:30px; line-height:35px;}
  #maincontainer .mainslideBox #mainSlide .txtbox .con span.sp3{font-size:30px; line-height:35px;}
  #maincontainer .mainslideBox #mainSlide .txtbox .con span.sp4{}
  #maincontainer .mainslideBox #mainSlide .txtbox .con span.sp5{font-size: 17px; line-height: 20px;}
}
@media (max-width: 960px){
  #maincontainer .mainslideBox .slide_item .main_menu a{font-size: 13px; font-weight: normal; }
  header .header_menu a.tit{font-size: 15px;}
}
@media (max-width: 786px){
  header{position: relative;}
  #maincontainer .mainslideBox #mainSlide .slick-arrow{display: none;}
  #maincontainer .mainslideBox #mainSlide img{min-height: auto;}
  .top_heder>ul>li ul.m_sub li{margin-bottom: 15px;}
.top_heder>ul>li ul.m_sub{display: none;}
  #maincontainer .mainslideBox{width: 100%; height: auto; top: 0; margin-bottom: 0;}
  #maincontainer .mainslideBox img{width: 100%; height: auto;}
  #maincontainer .txt_con{width: 100%; height: auto;}
  #container .news li.con{display: block; width: 70%; margin: 0 auto; margin-left: auto; float: none;}
  #container .news li.tit{width: 100%; margin-bottom: 20px; float: none}
  #container .border ul li{width: 100%; margin-bottom: 20px; }
  #container .border ul li:last-child{margin-left: 0;}
  #container .business{height: auto;}
  #container .business .bs_card_box .bs_card{width: 45%; display: inline-block; margin: 10px auto; }
  #container .business .bs_card_box .bs_card.bc3{margin: 10px auto;}
  header .htbox.a_box{display: none;}
  header .header_menu {display: none;}
  header .m_header{display: block;}
  .top_heder{padding: 0; overflow: auto;}
  .top_heder a.logo_home{width: 50%; text-align: center; margin: 0 auto 40px; padding: 10px 0;}
  .top_heder .top_tit{display: none;}
  .top_heder>ul{margin: 0; width: 100%;}
  .top_heder>ul>li{ display: block; width: 100%; margin: 0;}
  .top_heder>ul>li a.tit{line-height: 40px; border-bottom: 1px solid #ccc; display: block; width: 100%; padding: 0 10px;}
  .top_heder ul.sub{display: none;}
  footer .footer_con ul li:first-child{width: 50%; margin-bottom: 30px;}
  footer .footer_con ul li:nth-child(2){width: 100%; }
  footer .footer_con ul li:nth-child(2) span{display: block; margin-bottom: 4px;}
  footer .footer_con ul li:nth-child(2) span.p{line-height: 20px;}
  footer .footer_con ul li:last-child{width: 100%; margin-top: 10px; padding-left: 20px; box-sizing: border-box;}
  header .btn_lang{display: none;}
  footer .footer_con .sns_box{text-align: center;}
  #maincontainer .mainslideBox #mainSlide .txtbox{display: none;}

}
@media (max-width: 600px){
  #container .news li.con{display: block; float: none; width: 80%; margin: 0 auto 20px; height: 270px; }
  #container .business .bs_card_box .bs_card{width: 80%;}
  footer .footer_con .f_menu{text-align: center;}
  footer .footer_con ul li:nth-child(2){text-align: center; }


}
@media (max-width: 485px){
  footer .footer_con p span{display: block; margin: 0;}
  #container .news li.con{width: 100%; margin-bottom: 10px; margin-left: 0; height: auto; padding-bottom: 15px;}
  header .htbox{display: none;}
  #maincontainer .main_menu a{width: 32%;}
  #maincontainer .main_menu a img{width: 60%;}
  #container .border .txt_box{display: block; float: none; width: 100%;}
  #container .border img:not(.icon){width: 80%; float: none; display: block; margin: 10px auto;}
  #container .news li.tit p span.sp2{display: block;}
  #container .business .bs_card_box .bs_card{width: 100%; height: 330px;}
}