/******** common ********/
.wrap {overflow: hidden; position: relative; width: 100%; font-family: 'NanumSquare', sans-serif; color: #333;}
.wrap .str {font-weight: 600;}
.pc_area {display: block;}
.mobi_area {display: none;}
.cont_size {width: 1200px; margin: 0 auto; box-sizing: border-box;}

@media screen and (max-width:1200px) {
	.wrap .cont_size {width: 100%;}
	.wrap .pc_area {display: none;}
	.wrap .mobi_area {display: block;}
}

/******** header ********/
.header {position: relative; width: 100%; height: 140px; box-sizing: border-box;}
.header_cont01 {display: flex; align-items: center;}
.logo {flex: 0 1 auto; height: 90px; margin-right: auto;}
.logo .link {position: relative; display: block; height: 100%;}
.logo_img {position: absolute; top: 50%; left: 0; display: block; transform: translateY(-50%);}

.header_cont02 {background-color: #1b1b1b;}

@media screen and (max-width:1020px) {
	.header {height: 90px;}
	.header_cont02 {display: none;}
	.logo_img {width: 190px; margin-left: 10px;}
}
@media screen and (max-width:768px) {
	.header {height: 60px;}
	.header_cont01 {}
	.logo {height: 60px;}
	.logo_img {width: 100px;}
}

/* info menu */
.menu_info {display: flex; align-items: center; margin-right: 20px; margin-top: 20px;}
.menu_info .icon {display: none;}
.menu_info .name {font-size: 1.6rem;}
.menu_info .name .str {font-size: 1.8rem;}
.menu_info .link {display: block; padding: 0.3em 0.6em; margin-left: 2px; font-size: 1.2rem; color: #fff; background-color: #9a9ca1; border-radius: 3px;}
.menu_info .link:hover {box-shadow: 1px 1px 3px rgba(0,0,0,0.7) inset;}
.menu_info .link.modify {background-color: #565a63;}
.menu_info .link.admin {background-color: #f37320;}

@media screen and (max-width:768px) {
	.menu_info {display: none;}
}

/* user menu */
.menu_user {display: flex; align-items: center;}
.menu_user > li {}
.menu_user > li > .link {position: relative; display: block; padding: 0 8px; text-align: center; border: 0; background-color: transparent;}
.menu_user > li > .link .num {position: absolute; top: 0; right: 5px; display: block; width: 18px; height: 18px; line-height: 18px; text-align: center;font-size: 1.2rem; color: #fff; background-color: #f37320; border-radius: 100%; z-index: 9;}
.menu_user > li > .link .icon {display: block; margin: 0 auto 3px; transition: all 0.2s;}
.menu_user > li > .link .txt {position: relative; display: block; margin: 0 auto; font-size: 1.4rem; color: #565a63;}
.menu_user > li > .link .txt:before {content: ''; position: absolute; top: -18px; left: 50%; display: block; width: 17px; height: 17px; font-size: 14px; border: 2px solid #f37320; border-radius: 100%; transform: translate(-50%,-50%); transition: all 0.2s; opacity: 0;}
.menu_user > li > .link:hover .icon {transform: scale(0.5);}
.menu_user > li > .link:hover .txt {color: #f37320;}
.menu_user > li > .link:hover .txt:before {width: 33px; height: 33px; opacity: 1;}

@media screen and (max-width:1200px) {
  .menu_user > li > .link {padding: 0 3px;}
}

@media screen and (max-width:768px) {
	.menu_user > li {display: none;}
	.menu_user > li.login {display: block;}
	.menu_user > li.menu_top_sand {display: block;}
	.menu_user > li > .link .txt {font-size: 1.2rem;}
}

/* top menu */
.menu_top {position: relative;}
.menu_top_list {display: flex;}
.menu_top_list > li {flex: 1 1 20%; text-align: center;}
.menu_top_list > li > .link {display: block; height: 50px; color: #fff; font-size: 1.8rem; box-sizing: border-box; line-height: 50px;}

.menu_top_fst {overflow:hidden; position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 0; background-color: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); transition: all 0.4s; z-index: 99999999; opacity: 0;}
.menu_top_list:hover + .menu_top_fst {overflow:inherit; height: 350px; opacity: 1;}
.menu_top_fst:hover {overflow:inherit; height: 350px; opacity: 1;}
.menu_top_fst.show {overflow:inherit; height: 350px; opacity: 1;}



.menu_top_fst > li {flex: 1 1 20%; text-align: center;}
.menu_top_fst > li > .link {display: block; height: 50px; color: #333; font-weight: 600; font-size: 1.8rem; box-sizing: border-box; line-height: 50px;}
.menu_top_scd {position: relative; padding: 20px 0 0px;}
.menu_top_scd:before {content: ''; position: absolute; top: 0; left: 50%; display: block; width: 80%; height: 2px; background-color: #1a417a; transform: translateX(-50%); opacity: 0.5;}
.menu_top_fst > li:hover .menu_top_scd:before {opacity: 1;}
.menu_top_scd > li {}
.menu_top_scd > li > .link {position: relative; display: block; padding: 0.5em 0; font-weight: 600; transition: all 0.2s;}
.menu_top_scd > li > .link:hover {color: #f37320;}
.menu_top_scd > li > .link:before {content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; height: 2px; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(243,115,32,1) 50%, rgba(255,255,255,0) 100%); transform: translateX(-50%); transition: all 0.2s; opacity: 0;}
.menu_top_scd > li > .link:hover:before {width: 60%; opacity: 1;}

/* menu mobile */
.menu_top_mobi {overflow-y: auto; position: fixed; top: 0; right: -350px; max-width: 300px; width: 100%; height: 100%; padding: 20px; box-shadow: -1px 1px 3px rgba(0,0,0,0.3); box-sizing: border-box; background-color: #fff; transition: all 0.3s; z-index: 9999999999;}
.menu_top_mobi.show {right: 0px;}
.menu_top_mobi::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #ffffff;
}
.menu_top_mobi::-webkit-scrollbar-thumb {
  border-radius: 3.5px;
  background-color: #ced4da;
}
.menu_top_mobi::-webkit-scrollbar-thumb:hover {
  background-color: #adb5bd;
}
.menu_top_mobi::-webkit-scrollbar-track {
  background: #ffffff;
}

.menu_top_mobi .menu_top_sand {display: none;}

.menu_top_mobi .menu_info {display: flex; flex-wrap:wrap; margin: 0 0 20px 0;}
.menu_top_mobi .menu_info .btn_cls {display: block; width: 22px; height: 22px; margin-right: auto; border-radius: 100%; background-color: #dddee0; line-height: 25px; font-size: 14px; text-align: center; color: #fff; border: 0;}
.menu_top_mobi .menu_info .btn_cls i {display: block; line-height: 22px}
.menu_top_mobi .menu_info .btn_cls:hover {background-color: #565a63;}
.menu_top_mobi .menu_info .link {margin-top:10px;}
.menu_top_mobi .menu_info .name {flex-basis:calc(100% - 30px); flex-grow:0; flex-shrink:0; color: #565a63;}

.menu_top_mobi .menu_user {padding-bottom: 20px; justify-content: center; border-bottom: 1px solid #eee;}
.menu_top_mobi .menu_user > li > .link .txt {font-size: 1.3rem;}
.menu_top_mobi .menu_user > li {display: block;}
.menu_top_mobi .menu_user > li.login {display: none;}
.menu_top_mobi .menu_user > li.menu_top_sand {display: none;}

.menu_top_mobi .menu_top_fst {position: static; display: block; height: auto; box-shadow: none; opacity: 1;}
.menu_top_mobi .menu_top_fst > li {border-bottom: 1px solid #eee; text-align: left;}
.menu_top_mobi .menu_top_fst > li > .link {height: auto; padding: 0.7em 10px; font-size: 2.4rem; line-height: 1;}
.menu_top_mobi .menu_top_fst > li > .link:hover {color: #adb5bd;}
.menu_top_mobi .menu_top_scd {display: none; padding: 5% 8%; background-color: #eeeeee;}
.menu_top_mobi .menu_top_scd:before {display: none;}
.menu_top_mobi .menu_top_scd > li > .link {font-size: 1.8rem; font-weight: 400;}
.menu_top_mobi .menu_top_scd > li > .link:before {left: 0; transform: translateX(0%);}

.menu_top_mobi_bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999999999;}
.menu_top_mobi_bg.show {display: block;}


/******** main ********/
.main {width: 100%; box-sizing: border-box;}

/* side menu */
.menu_side {position:fixed; top:600px; left:50%; margin-left:650px; z-index:9999;}
.main.sub .menu_side {top:400px;}
.menu_side_btn {display:flex; align-items:center; min-width:80px; padding:0 10px 0 0; margin-bottom:3px; border:0; background:#fff; border-radius: 30px; box-shadow:1px 1px 3px rgba(0,0,0,0.3);}
.menu_side_btn .icon {display:block; flex:0 0 30px; width:30px; height:30px; margin-right:10px; border:1px solid #fff; background-color:#1a417a; border-radius:100%; color:#fff; line-height:30px; text-align:center;}
.menu_side_btn .txt {font-size:1.2rem; font-weight:400; font-family: Gmarket, sans-serif;}
.menu_side_btn:hover {background:#1a417a;}
.menu_side_btn:hover .icon {background-color:#fff; color:#1a417a; border:1px solid #1a417a;}
.menu_side_btn:hover .txt {color:#fff;}
.menu_side_fst {}
.menu_side_fst > li {min-width:80px; padding-right:10px; margin-bottom:3px; background-color:#fff; border-radius: 30px; box-shadow:1px 1px 3px rgba(0,0,0,0.3);}
.menu_side_fst > li > .link {display:flex; align-items:center;}
.menu_side_fst > li > .link > .icon {display:block; flex:0 0 30px; width:30px; height:30px; margin-right:10px; border:1px solid #fff; background-color:#1a417a; border-radius:100%; color:#fff; line-height:30px; text-align:center;}
.menu_side_fst > li > .link > .txt {font-size:1.2rem; word-break:keep-all;}
.menu_side_fst > li:hover {background:#1a417a;}
.menu_side_fst > li:hover > .link > .icon {background-color:#fff; color:#1a417a; border:1px solid #1a417a;}
.menu_side_fst > li:hover > .link > .txt {color:#fff;}

@media screen and (max-width:1500px) {
  .menu_side {top:auto; bottom:10px; left:auto; right:5px; margin:0;}
  .main.sub .menu_side {top:auto;}
}
@media screen and (max-width:1200px) {
  .menu_side_fst {display:none;}
}
@media screen and (max-width:768px) {
  .menu_side_btn {min-width:auto; padding:0;}
  .menu_side_btn .icon {margin:0;}
  .menu_side_btn .txt {display:none;}
}

/* banner */
.banner_area {position: relative; width: 100%; height: 0; padding-bottom: 26.56%;}
.banner_cont {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.banner_img {display: block; width: 100%;}

/* quick menu */
.menu_quick {display: flex; align-items: center; padding: 2% 0;}
.menu_quick > li {flex: 1 1 16%; text-align: center;}
.menu_quick > li > .link {display: block; border-right: 1px solid #eee;}
.menu_quick > li > .link .icon {display: block; width: 62px; margin: 0 auto 10px;}
.menu_quick > li > .link .txt {font-size: 1.6rem; font-weight: 600;}
.menu_quick > li > .link:hover .txt {color: #f37320;}

.menu_quick > li:last-of-type > .link {border-right: 0;}
.menu_quick > li:first-of-type > .link .txt {color:#f37320;}
.menu_quick > li:first-of-type > .link:hover .txt {color:#2399bb;}

@media screen and (max-width:768px) {
	.menu_quick {flex-wrap: wrap; padding: 0 3%;}
	.menu_quick > li {flex: 1 1 33%; padding: 3% 0;}
	.menu_quick > li+li+li+li {border-top: 1px solid #eee;}
	.menu_quick > li:nth-of-type(3) .link {border-right: 0;}
	.menu_quick > li > .link .icon {width: 25%;}
	.menu_quick > li > .link .txt {font-size: 1.4rem;}
}

/* news */
.main_news_area {background-color: #f9f9f9;}
.main_news_cont {display: flex; padding: 4% 0;}
.main_news_atc {flex: 1 1 48%;}
.main_news_atc.noti {padding-right: 3%;}
.main_news_atc.docu {padding-left: 3%;}
.main_news_tit {position: relative; display: block; padding: 0.8em 0; margin-bottom: 1em; font-size: 2.5rem; font-weight: 600; border-bottom: 1px solid #ccc; transition: all 0.2s;}
.main_news_tit:before {content: ''; position: absolute; bottom: -1px; left: 0; display: block; width: 0%; height: 1px; border-bottom: 1px solid #1a417a; transition: all 0.3s;}
.main_news_tit .btn_more {position: absolute; top: 50%; right: 0; display: block; font-size: 1.8rem; transform: translateY(-50%); transition: all 0.3s;}
.main_news_tit:hover {color: #1a417a;}
.main_news_tit:hover:before {width: 100%;}
.main_news_tit:hover .btn_more {transform: scale(1.2) translateY(-50%);}
.main_news_list {}
.main_news_list > li {}
.main_news_list > li > .link {position: relative; display: flex; align-items: center; padding: 18px 0; font-weight: 600; transition: all 0.2s;}
.main_news_list > li > .link:hover {color: #f37320;}
.main_news_list > li > .link .icon {position: absolute; top: 50%; left: -15px; font-size: 12px; color: #f37320; transform: translateY(-50%); transition: all 0.3s; opacity: 0;}
.main_news_list > li > .link:hover .icon {opacity: 1;}
.main_news_list > li > .link .txt {flex-basis: calc(100% - 100px); flex-grow: 1; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.8rem;}
.main_news_list > li > .link .date {flex: 0 0 100px; margin-left: auto; color: #999; text-align: right; font-size: 1.6rem;}

@media screen and (max-width:1200px){
	.main_news_cont {padding: 3%;}
	.main_news_atc.noti {padding-right: 10px;}
	.main_news_atc.docu {padding-left: 10px;}
	.main_news_list > li > .link .txt {font-size: 1.6rem;}
}
@media screen and (max-width:768px){
	.main_news_cont {display: block;}
	.main_news_atc.noti {padding-right: 0px; margin-bottom: 20px;}
	.main_news_atc.docu {padding-left: 0px;}
	.main_news_list > li > .link {padding: 10px 10px 10px 10px; box-sizing: border-box;}
	.main_news_list > li > .link .icon {left: -5px;}
	.main_news_list > li > .link .txt {font-size: 1.4rem;}
	.main_news_list > li > .link .date {font-size: 1.2rem;}
}

/* site */
.main_site {background-color: #efefef;}
.main_site_cont {position:relative; padding: 1.2% 0;}
.main_site_list {display: flex; align-items: center; justify-content: space-between;}
.main_site_list > .swiper-slide {}
.main_site_list > .swiper-slide > .link {position: relative; display: block;}
.main_site_list > .swiper-slide > .link:before {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; transition: all 0.2s; z-index: 9;}
.main_site_list > .swiper-slide > .link:hover:before {box-shadow: 1px 1px 3px rgba(0,0,0,0.7) inset;}
.main_site_list_img {display: block; width:100%; max-width:176px; margin:0 auto;}
.main_site_navi {display:none;}
.main_site_navi .swiper-button-next,
.main_site_navi .swiper-button-prev {top:50%; width:20px; height:20px; margin:0; line-height:20px; text-align:center; font-size:12px; color:#aaa; background-image:none; background-color:#fff; transform:translateY(-50%);}
.main_site_navi .swiper-button-next {right:5px;}
.main_site_navi .swiper-button-prev {left:5px;}

@media screen and (max-width:1200px){
	.main_site_cont {padding: 3%;}
  .main_site_navi {display:block;}
  .main_site .swiper-container {margin:0 20px;}
}

/******** footer ********/
.footer {background-color: #333333; color: #adadad;}
.footer_cont {position: relative; padding: 2% 0;}
.footer_copy {font-size: 1.3rem; line-height: 1.4; color: #adadad;}
.footer_copy .txt {position: relative; padding:0 4px;}
.footer_copy .txt:before {content: ''; position: absolute; top: 50%; right: -2px; display: block; width: 1px; height: 10px; background-color: #adadad; transform: translateY(-50%); opacity: 0.6;}
.footer_copy .txt {}
.footer_copy .txt:last-of-type:before {display: none;}
.footer_copy .c_white {color: #eee; font-weight: 400;}
.footer_info {position: absolute; top: 50%; right: 170px; display: flex; font-size: 1.3rem; transform: translateY(-50%); z-index: 9;}
.footer_info a {display: block; padding: 0.7em 2em; margin-left: 5px; border: 1px solid #adadad; border-radius: 3px;}
.footer_info a:hover {background-color: #666; color: #fff;}
.footer_link_webchurch {position:absolute; top:50%; right:0; transform:translateY(-50%);}
.footer_link_webchurch a {display:block;}
.footer_link_baro {position:absolute; top:50%; right:492px; display:block; transform:translateY(-50%);}

@media screen and (max-width:1200px) {
	.footer_cont {padding: 3%;}
	.footer_copy {margin-bottom: 1em;}
	.footer_copy .txt {display: block;}
	.footer_copy .txt:before {display: none;}
  .footer_copy br {display:none;}
	.footer_info {display: none;}
  .footer_link_baro {right:170px;}
}
@media screen and (max-width:500px) {
  .footer_link_baro {float:left; position:static; transform:translateY(0%);}
  .footer_link_webchurch {float:right; position:static; transform:translateY(0%);}
  .footer_cont:after {content:''; display:block; clear:both;}
}

/*** sub ***/
.main_sub_cont {min-height:500px; margin-bottom:30px;}
.main_sub_cont + .cont_size {min-height: 500px;}

.sub_top {position: relative; height: 180px; box-sizing: border-box; background-color:#e8f1ff;}
.sub_top_tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #333; font-size: 3.4rem; font-weight:600;}
.main #solution_title_comm {display:none;}

@media screen and (max-width:1200px) {
	.sub_top {height: 100px;}
	.sub_top_tit {font-size: 2.5rem;}
}
@media screen and (max-width:768px) {
	.sub_top {height: 50px;}
	.sub_top_tit {font-size: 1.8rem;}
}

/* sub select menu */
.menu_slct_area {width:100%; margin:0 auto 20px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; z-index:999998;}
.menu_slct_area .btn_home {float: left; width: 45px; height: 45px; font-weight:bold; font-size: 18px; color: #173c90; box-sizing: border-box; text-align: center; border-left: 1px solid #ccc; border-right: 1px solid #ccc; padding: 0px 0; line-height:45px;}
.menu_slct {float: left; position: relative; height: 45px; min-width:200px; padding: 0 38px 0 20px; box-sizing: border-box; border-right: 1px solid #ccc; cursor: pointer;}
.menu_slct:hover {background-color:#173c90;}
.menu_slct:hover .txt_slcted {color:#fff;}
.menu_slct:hover .icon_arw {color:#fff;}
.menu_slct .txt_slcted {position: relative; line-height: 45px; font-size: 15px; color: #173c90; text-align: left; font-weight:bold; z-index: 9998;}
.menu_slct .icon_arw {position: absolute; top: 50%; right: 15px; color: #173c90; transform: translateY(-50%); z-index: 9;}
.menu_slct:hover {}
.menu_slct:hover .txt_slcted {}
.menu_slct:hover .icon_arw {}
.menu_slct.menu_slct_trd {display:none;}
.menu_slct.menu_slct_trd.active {display:block;}
.menu_slct_area .menu_slct_list i {visibility: hidden;}

.menu_slct_list {display: none; position: absolute; left:-1px; width:calc(100% + 2px); border: 1px solid #173c90; background-color: #fff; border:1px solid #eee; padding:15px; box-sizing:border-box; z-index: 999998;}
.menu_slct_list > li {border-bottom: 1px solid #e0e0e0; color:#333;}
.menu_slct_list > li:last-of-type {border-bottom: 0;}
.menu_slct_list > li:hover {font-weight:bold;color:#6078EA;}
.menu_slct_list > li > .link {display: block; height: 35px; padding: 12px; box-sizing: border-box; font-size: 14px;}
.menu_slct_list .icon {display:none;}


@media screen and (max-width:1200px) {
  .menu_slct_area {margin-bottom:10px;}
  .menu_slct_area .btn_home {width: 40px; height: 40px; font-size: 15px; line-height:40px;}
  .menu_slct {min-width:auto; width:calc(50% - 20px); height:40px; padding-left:10px;}
  .menu_slct .txt_slcted {overflow: hidden; line-height: 40px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap;}
  .menu_slct .icon_arw {right: 8px;}

  .sub_top_menu_tit_area {display:none;}
}