@charset "UTF-8";

/*
================================================================================
레이아웃
================================================================================
*/
br {font-family: 'bg', 'Noto Sans KR',sans-serif;}

.main #header_new{padding: 70px 90px;width: 650px;}
.main #header_new .btn_total{right: 90px;}

/* head */
#header_new{position: fixed;top: 0;left: 0;padding: 70px 50px;width: 400px;height: 100vh;z-index: 100;}
#header_new #logo{display: inline-block;margin-bottom: 150px;}
#header_new #logo a{display: block;width: 140px;height: 53px;text-indent: -999px;overflow: hidden;background-repeat:no-repeat;background-position:left center;background-size: 100%;background-image:url('/images/mayor/common/logo.png')}
#header_new .btn_total_mb{position: absolute;top:65px;right: 50px;display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;text-indent: -999px;overflow: hidden;}
#header_new .btn_total_mb span{position: relative;width: 26px;height: 3px;background-color: #fff;border-radius: 3px;}
#header_new .btn_total_mb span::before{position: absolute;top: -8px;left: 0;width: 100%;height: 3px;content: '';background-color: #fff;border-radius: 3px;}
#header_new .btn_total_mb span::after{position: absolute;bottom: -8px;left: 0;width: 100%;height: 3px;content: '';background-color: #fff;border-radius: 3px;}

#header_new #gnb ul{margin-bottom: 50px;}
#header_new #gnb ul li{margin-bottom: 30px;}
#header_new #gnb ul li:last-child{margin-bottom: 0;}
#header_new #gnb ul li a{display: block;font-family: 'GmarketSans';font-size: 24px;color: #fff;font-weight: bold;transition: 0.2s ease;}
#header_new #gnb ul li a:hover,
#header_new #gnb ul li.on a{color: #efacaf;text-decoration: underline;text-underline-offset: 7px;}
#header_new #gnb .btn_donggu{display: inline-block;}
#header_new #gnb .btn_donggu a{position: relative;display: block;padding: 0 50px 0 23px;font-family: 'GmarketSans';font-size: 18px;color: #fff;line-height: 40px;background: url('/images/mayor/common/ico_arrow.png') no-repeat right 20px center;}
#header_new #gnb .btn_donggu a:hover{text-decoration: underline;text-underline-offset: 4px;}
#header_new #gnb .btn_donggu a::before{position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: '';background-image: linear-gradient(to right, #2e3192, #da2f37);border-radius: 20px;z-index: -1;opacity: 0.8;}

.fix_bg{position: fixed;top:0;left: 0;width: 100%;height: 100%;background: #000;opacity: 0.6 ;z-index: 20;}

#container.main_con{padding-left: 650px;width: 100%;}
#container.sub_con{padding-left: 400px;width: 100%;background-color: #f2f2f2;}
#container.sub_con > .wrap{margin:0;}
#container.sub_con .colgroup{float: none;padding:40px 80px 70px;width: 100%;}

#container.sub_con .colgroup .sub_head .path .home{display: inline-block;width:20px;height: 20px;text-indent: -999px;overflow: hidden;vertical-align: middle;background: url('/images/mayor/common/ico_home.png') no-repeat center center;}
#container.sub_con .colgroup .sub_head .rowgroup .addons button{overflow: hidden;border-radius: 50%;}
#container.sub_con .colgroup .sub_head .sub_title{margin-top: 20px;padding: 70px 20px 40px;background-color: #fff;border-bottom: 0;}
#container.sub_con .colgroup .sub_head .sub_title h2{font-family: 'GmarketSans';font-size: 38px;font-weight: normal;}
#container.sub_con .colgroup #contents{margin-top: 0;padding:0 50px;background-color: #fff;}
#container.sub_con .colgroup #contents .content_box{margin: 0 auto;max-width: 1000px;}

.subVisual{position: fixed;top: 0;left: 0;width: 400px;height: 100%;background: url('/images/mayor/common/sub_visual.jpg') no-repeat center top / cover;}

.tabMenuCon{padding: 20px 50px;background-color: #fff;}
.tabMenu1 ul li a{display: flex;align-items: center;justify-content: center;font-family: 'GmarketSans';padding: 0 10px;height: 60px;font-size: 18px;text-align: center;color: #000; background-color: #fff; border: 1px solid #c9c9c9; word-break: keep-all;}
.tabMenu1 ul li a:hover {border: 1px solid #bf1f47; color: #bf1f47;}
.tabMenu1 ul li.on a{color: #fff; font-weight: bold;background-color: #bf1f47; border-color: #bf1f47;}
.tabMenu1 li.on a:hover,.tabMenu1 li.on a:focus{color:#bf1f47; border:2px solid #bf1f47; font-weight:bold; background:#fff;}

.tabMenu2 ul{display: flex;align-items: center;flex-wrap: wrap;/*gap:10px 25px;*/padding: 30px; background: #fdf4f5;}
.tabMenu2 ul li{margin: 0 10px;}
.tabMenu2 ul li a, .tabMenu2 ul li.on a:hover {position: relative;padding:12px 34px 12px 20px;font-family: 'GmarketSans';font-size: 17px; color: #000; border-radius: 22px 6px; background: #fff; border:1px solid #bf1f47; line-height: 50px;}
.tabMenu2 ul li a::after, .tabMenu2 ul li.on a:hover::after{position: absolute;top: 18px;right: 18px;content: '';width: 8px;height: 5px; background:url('/images/mayor/common/icon_tab_arrow2.png') no-repeat;}
.tabMenu2 ul li.on a, .tabMenu2 ul li a:hover{color: #fff;font-weight: bold;background-color: #bf1f47;}
.tabMenu2 ul li.on a::after, .tabMenu2 ul li a:hover::after{background:url('/images/mayor/common/icon_tab_arrow1.png') no-repeat;}

.tab_menu {margin-top: 50px; margin-bottom: 30px;}
.tab_menu > ul { border: 0; padding: 0; background-color:#fff;}
.tab_menu ul:after {display:block;clear:both;content:''}
.tab_menu ul li {position:relative;float:left;margin:-1px 1px 0 -1px; padding: 0; background:none; width: 20%;}
.tab_menu ul li a{position:relative;display:block;font-family: 'GmarketSans' !important;  text-align: center; padding:22px 10px 10px 10px;height:60px;font-size:17px; border-bottom:1px solid #000; overflow:hidden; word-break: keep-all; 
	transition: all 0.3s;
	-moz-transition: all 0.2s; /* Firefox 4 */
	-webkit-transition: all 0.2s; /* Safari and Chrome */
	-o-transition: all 0.2s; /* Opera */}
.tab_menu ul li a::after {position: absolute; top: 23px; right: 0; width: 1px; height: 15px; content: ""; background:#e7e7e7;}
.tab_menu ul li:last-child a::after {display: none;}
.tab_menu ul li a.txt_long {padding:16px 10px 10px 10px;}
.tab_menu ul li a.txt_long span {display: block;}
.tab_menu ul li a:focus, .tab_menu li a:hover,
.tab_menu ul li a.on,.tab_menu li a.on:hover,.tab_menu li a.on:focus, .tab_menu > ul > li.active a{color:#000;font-weight:bold;border-radius: 10px 10px 0 0; border:1px solid #000; border-bottom: 0; background-color: #fff;}
.tab_menu ul li a:focus::after, .tab_menu li a:hover::after,
.tab_menu ul li a.on::after,.tab_menu li a.on:hover::after,.tab_menu li a.on:focus::after {display: none;}
.tab_menu > ul > li:nth-of-type(even) {background: none;}

.tabTxt01 ul li a {display: flex;align-items: center;justify-content: center;font-family: 'GmarketSans';padding: 0 10px;height: 60px;font-size: 18px;text-align: center;color: #000; background-color: #fff; border: 1px solid #c9c9c9; word-break: keep-all;}
.tabTxt01 ul li a:hover {border: 1px solid #bf1f47; color: #bf1f47; background:#fff;}
.tabTxt01 ul li a.on{color: #fff; font-weight: bold;background-color: #bf1f47; border-color: #bf1f47;}


#footer_new{position: fixed;left: 50px;bottom: 50px;z-index: 100;}
#footer_new .foot_sns{margin-bottom: 30px;}
#footer_new .foot_sns ul{display: flex;}
#footer_new .foot_sns ul li{margin-right: 10px;}
#footer_new .foot_sns ul li a{display: block;width: 30px;height: 30px;text-indent: -999px;overflow: hidden;background-repeat: no-repeat;background-position: left top;}
#footer_new .foot_sns ul li.ic1 a{background-image: url('/images/mayor/common/ico_sns1.png');}
#footer_new .foot_sns ul li.ic2 a{background-image: url('/images/mayor/common/ico_sns2.png');}
#footer_new .foot_sns ul li.ic3 a{background-image: url('/images/mayor/common/ico_sns3.png');}
#footer_new .foot_sns ul li.ic4 a{background-image: url('/images/mayor/common/ico_sns4.png');}
#footer_new .foot_sns ul li.ic5 a{background-image: url('/images/mayor/common/ico_sns5.png');}
#footer_new small{padding-top: 10px;font-family: 'GmarketSans';font-size: 11px;color: #fff;border-top: 1px solid rgba(255,255,255,0.2);}

.main #footer_new{left: 90px;bottom: 70px;}


/*
================================================================================
반응형 레이아웃
================================================================================
*/

/* PC Device */
@media all and (max-width:1700px){

  .main #header_new{width: 400px;padding: 70px 50px;}
  .main #header_new .btn_total{right: 50px;}

  #header_new{padding: 70px 50px;}
  #header_new .btn_total{right: 50px;}
  

  #container.main_con{padding-left: 400px;}

  .main #footer_new{left: 50px;bottom:50px;}


}

@media all and (max-width:1500px){
	.tab_menu ul li a {height: 70px;}
}

@media all and (max-width:1400px){

    #container.sub_con .colgroup{padding: 0 40px;}

}



/* Tablet Device */
@media all and (min-width:991px){

  #gnb_mb{display: none;position: fixed;top: 0;left: -650px;padding: 120px 80px 80px;width: 650px;height: 100%;overflow: auto;background-image: linear-gradient(135deg, #2e3192, #da2f37);z-index: 10;transition-duration:0.3s; transition-timing-function:cubic-bezier(1, 0, 0, 1);z-index: 30;}
  #gnb_mb h2{opacity: 0;position: absolute;top: 60px;left: 80px;margin-bottom: 10px;font-family: 'GmarketSans';font-size: 26px;color: #fff;}
  #gnb_mb h2:focus{opacity: 1;}
  #gnb_mb .btn_donggu{display: none;}
  #gnb_mb .open{margin: 0;padding: 0;background: none;border: 0;}
  #gnb_mb ul li a:hover{text-decoration: underline;text-underline-offset: 5px;}
  #gnb_mb > ul > li button{display: none;}
  #gnb_mb > ul > li{display: flex;align-items: flex-start;padding: 25px 0 !important;border-bottom: 1px solid rgba(255,255,255,0.2) !important;}
  #gnb_mb > ul > li:last-child{border-bottom: 0;}
  #gnb_mb > ul > li.on > a {color: #ffeab9;}
  #gnb_mb > ul > li > a{width: 220px;font-family: 'GmarketSans';font-size: 24px;color: #fff;font-weight: bold;}
  #gnb_mb > ul > li > ul{display: block !important;}
  #gnb_mb > ul > li > ul > li{margin-bottom: 10px;}
  #gnb_mb > ul > li > ul > li > a{font-size: 17px;color: #fff;}
  #gnb_mb > ul > li.on > ul > li.on > a {color: #ffeab9; text-decoration: underline; underline;text-underline-offset: 7px;}
  #gnb_mb > ul > li > ul > li > ul{display: none !important;}
  #gnb_mb .btn_menu_close{position: absolute;top: 50px;right: 80px;width: 58px;height: 58px;text-indent: -999px;overflow: hidden;border: 2px solid #fff;border-radius:20px ;}
  #gnb_mb .btn_menu_close::before{position: absolute;top: 50%;left: 50%;width: 25px;height: 0;content: '';border-top: 2px solid #fff;transform: translate(-50%, -50%) rotate(45deg);}
  #gnb_mb .btn_menu_close::after{position: absolute;top: 50%;left: 50%;width: 25px;height: 0;content: '';border-top: 2px solid #fff;transform: translate(-50%, -50%) rotate(-45deg);}

  #header_new.on{z-index: 200;}
  #gnb_mb.on{left: 0;visibility:visible;}

  .tabMenu1 ul li{width: 25%;}

}

/* PC Device */
@media all and (max-width:1200px){

  #header_new{position: relative;display: flex;align-items: center;justify-content: space-between;padding: 0 40px;width: 100%;height:80px;}
  .main #header_new{padding: 0 40px;width: 100%;}

  #header_new #logo{margin-bottom: 0;}
  #header_new #logo a{width: 284px;height: 26px;background-image:url('/images/mayor/common/logo_mb.png')}

  #header_new #gnb{display: none;}

  #header_new .btn_total_mb{position: relative;top: 0;left: 0;margin-left: auto;}
  #header_new .btn_total_mb span{background-color: #000;}
  #header_new .btn_total_mb span::before{background-color: #000;}
  #header_new .btn_total_mb span::after{background-color: #000;}

  #gnb_mb{position: fixed;top: 0;left: auto;right: -640px;width: 640px;height: 100%;z-index: 300;transition-duration:0.3s; transition-timing-function:cubic-bezier(1, 0, 0, 1);}
  #header_new #gnb_mb.on{left: auto;right: 0;}

  #gnb_mb{padding: 120px 80px 160px;}
  #gnb_mb > ul > li{display: flex;}

  #gnb_mb .btn_menu_close{top: 50px;right: 80px;}

  #container.main_con{float: none !important;padding: 0;}
  #container.sub_con{float: none !important;padding: 0;}
  #container.sub_con .colgroup{padding: 20px 40px;}

  .subVisual{display: none;}

  #footer_new{position: relative;left: 0;bottom: 0;padding: 50px 20px;text-align: center;background-color: #f2f2f2;z-index: 2;}
  #footer_new .foot_sns ul{justify-content: center;}
  #footer_new .foot_sns ul li{margin: 0 5px;}
  #footer_new .foot_sns ul li a{background-position: center bottom;opacity: 0.7;}
  #footer_new small{color: #888;border-top-color: #d5d5d5;opacity: 0.7;}

  .main #footer_new{left: 0;bottom:0;}

}





/* Tablet Device */
@media all and (max-width:990px){

  
  #gnb_mb{display: none;right: -350px;padding:60px 0 0;width: 350px;height: auto;overflow: hidden;background-color: #fff;border-radius: 20px 0 0 20px;}
  #gnb_mb::before{position: absolute;top: 0;left: 0;width: 100%;height: 60px;content: '';background-image: linear-gradient(to right, #2e3192, #da2f37);}
  #gnb_mb h2{display: none;opacity: 0;position: absolute;top: 15px;left: 25px;font-family: 'GmarketSans';font-size: 18px;color: #fff;z-index: -1;}
  #gnb_mb h2:focus{opacity: 1;z-index:1}
  #gnb_mb h2:focus + .btn_donggu{left: 110px;}
  #gnb_mb .btn_donggu{position: absolute;top: 15px;left: 25px;}
  #gnb_mb .btn_donggu a{position: relative;display: block;padding: 0 35px 0 13px;font-family: 'GmarketSans';font-size: 15px;color: #fff;line-height: 30px;background:rgba(0,0,0,0.3) url('/images/mayor/common/ico_arrow.png') no-repeat right 10px center / 18px;border-radius: 15px;}
  #gnb_mb .open{margin: 0;padding: 0;background: none;border: 0;}
  #gnb_mb > ul ul{display: none;}
  #gnb_mb > ul li{position: relative;}
  #gnb_mb > ul{overflow: auto;max-height:calc(100vh - 60px);}
  #gnb_mb > ul > li{display: block;border-bottom: 1px solid #e0e0e0;}
  #gnb_mb > ul > li button{position: absolute;top: 0;left: 0;width: 100%;text-indent: -999px;overflow: hidden;}
  #gnb_mb > ul > li > button{height: 60px;}
  #gnb_mb > ul > li > a{position: relative;display: block;padding: 0 30px;font-family: 'GmarketSans';font-size: 18px;color: #333;font-weight: bold;line-height: 60px;}
  #gnb_mb > ul > li.has-sub.on > a::after,
  #gnb_mb > ul > li.has-sub > a::after{position:absolute;top:50%;right: 20px;width: 9px;height: 9px;content: '';border:1px solid #a7a7a7;border-width: 0 0 2px 2px;transform: translateY(-70%) rotate(-45deg);}
  #gnb_mb > ul > li.has-sub.on > a::after,
  #gnb_mb > ul > li.has-sub.open > a::after{transform: translateY(-40%) rotate(135deg);border-color: #2e3192;}
  #gnb_mb > ul > li.on,
  #gnb_mb > ul > li.open{border-bottom: 1px solid #e0e0e0;}
  #gnb_mb > ul > li.on > a,
  #gnb_mb > ul > li.open > a{color: #2e3192;}
  #gnb_mb > ul > li > ul{padding:10px 30px;background-color: #f7f7f7;border-top: 2px solid #2e3192;}
  #gnb_mb > ul > li > ul > li > a{position: relative;display: block;padding:5px 0 5px 12px;color: #555;}
  #gnb_mb > ul > li > ul > li > a::before{position: absolute;top: 12px;left: 0;width: 4px;height: 4px;content: '';background-color: #969696;border-radius: 50%;}
  #gnb_mb > ul > li > ul > li.on > a,
  #gnb_mb > ul > li > ul > li.open > a{color: #2e3192;font-weight: bold;}
  #gnb_mb > ul > li > ul > li.on > a::before,
  #gnb_mb > ul > li > ul > li.open > a::before{background-color: #2e3192;}
  #gnb_mb > ul > li > ul > li > button{height:30px;}
  #gnb_mb > ul > li > ul > li > ul{margin: 5px 0;padding: 10px 20px;background-color: #ededed;}
  #gnb_mb > ul > li > ul > li > ul > li > a{position: relative;display: block;padding:5px 0 5px 10px;}
  #gnb_mb > ul > li > ul > li > ul > li > a::before{position: absolute;left: 0;content: '-';}
  #gnb_mb > ul > li > ul > li > ul > li > a:hover,
  #gnb_mb > ul > li > ul > li > ul > li.on > a{color: #000;font-weight: bold;}

  #gnb_mb .btn_menu_close{position: absolute;top: 0;right: 0;width: 60px;height: 60px;text-indent: -999px;overflow: hidden;z-index: 10;}
  #gnb_mb .btn_menu_close::before{position: absolute;top: 50%;left: 50%;width: 25px;height: 0;content: '';border-top: 2px solid #fff;transform: translate(-50%, -50%) rotate(45deg);}
  #gnb_mb .btn_menu_close::after{position: absolute;top: 50%;left: 50%;width: 25px;height: 0;content: '';border-top: 2px solid #fff;transform: translate(-50%, -50%) rotate(-45deg);}

  .tabMenu1 ul li{width: 33.33%;}
  
}

/* Tablet Device */
@media all and (max-width:860px){
	.tab_menu ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
	.tab_menu ul li {width: 49%;}
	.tab_menu ul li a {overflow:inherit; border-radius:40px; height: 60px; padding:22px 16px 16px 16px; margin-bottom: 10px; border: 1px solid #c9c9c9;}
	.tab_menu ul li a.txt_long {padding:14px 16px;}
	.tab_menu ul li a::after {display: none;}
	.tab_menu ul li a:focus, .tab_menu li a:hover,
	.tab_menu ul li a.on,.tab_menu li a.on:hover,.tab_menu li a.on:focus, .tab_menu > ul > li.active a {border:2px solid #000; border-radius:40px;}
	
}


/* mobile Device */
@media all and (max-width:770px){

  #container.main_con,
  #container.sub_con{margin: 0;}

  

}



/* mobile Device */
@media all and (min-width:641px){

  .tabMenu1{margin-bottom: 30px;}
  .tabMenu1 button{display: none;}
  .tabMenu1 ul{display: flex !important;flex-wrap: wrap;/*gap:10px*/;margin: 0 -5px;}
  .tabMenu1 ul li{padding: 5px;}

}

/* mobile Device */
@media all and (max-width:640px){

  .main #header_new{padding:0 20px;}
  #header_new{padding: 0 20px;height: 60px;}
  #header_new #logo a{width:200px;}
  #header_new .btn_total_mb span{width: 24px;height: 2px;}
  #header_new .btn_total_mb span::before{top: -6px;height: 2px;}
  #header_new .btn_total_mb span::after{bottom: -6px;height: 2px;}

  #gnb_mb{right: -100%;width: 100%;border-radius: 0 0 0 20px;}
  #gnb_mb .open{text-align: left;}

  #container.sub_con .colgroup #contents{padding: 0 15px;}
  #container.sub_con .colgroup{padding: 10px 15px;}
  #container.sub_con .colgroup .sub_head .sub_title{padding: 30px 10px 20px;}
  #container.sub_con .colgroup .sub_head .sub_title h2{font-size: 28px;}

  #footer_new{padding: 30px 10px;}

  .tabMenuCon{padding:10px 15px;}
  .tabMenu1{position: relative;margin-bottom: 20px;}
  .tabMenu1 button{position: relative;display: block;width: 100%;height: 50px;font-family: 'GmarketSans';font-size: 15px;color: #bf1f47;font-weight: bold;text-align: left;text-indent: 20px;border: 3px solid #bf1f47;}
  .tabMenu1 button::after{position: absolute;top: 50%;right: 20px;width: 0;height: 0;content: '';border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid #bf1f47;transform: translateY(-50%);}
  .tabMenu1 button.on::after{transform: translateY(-50%) rotate(180deg);}
  .tabMenu1 ul{display: none;position: absolute;top: 50px;left: 0;width: 100%;background-color: #fff;border: 1px solid #bf1f47;z-index: 50;}
  .tabMenu1 ul li{width: 100%;border-bottom: 1px solid #f4f4f4;}
  .tabMenu1 ul li a{display: block;padding:0 20px;font-size: 15px; height: inherit; line-height: 45px;background-color: #fff;border: 0;}
  .tabMenu1 ul li.on a{color: #fff;background-color: #bf1f47;}

  .tabMenu2 ul{padding:16px;}
  .tabMenu2 ul li{margin: 0 10px;}
  .tabMenu2 ul li a, .tabMenu2 ul li.on a, .tabMenu2 ul li a:hover{font-size: 14px;}
	
  .tab_menu {margin-top: 20px;}
  .tab_menu ul li a {font-size: 14px; height: 50px; padding:18px 12px 12px 12px;}
  .tab_menu ul li a.txt_long {padding:10px 12px;}
	
	
  .tabTxt01{position: relative;margin-bottom: 20px;}
  .tabTxt01 button{position: relative;display: block;width: 100%;height: 50px;font-family: 'GmarketSans';font-size: 15px;color: #bf1f47;font-weight: bold;text-align: left;text-indent: 20px;border: 3px solid #bf1f47;}
  .tabTxt01 button::after, .mb_tab .selet_txt::after{position: absolute;top: 50%;right: 20px; bottom: inherit; width: 0;height: 0;content: '';border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid #bf1f47;transform: translateY(-50%);}
  .tabTxt01 button.on::after{transform: translateY(-50%) rotate(180deg);}
  .tabTxt01 ul{display: none;position: absolute;top: 50px;left: 0;width: 100%;background-color: #fff;border: 1px solid #bf1f47;z-index: 50;}
  .tabTxt01 ul li{width: 100%;border-bottom: 1px solid #f4f4f4; margin: 0;}
  .tabTxt01 ul li a{display: block;padding:0 20px;font-size: 15px; height: inherit; line-height: 45px;background-color: #fff;border: 0;}
  .tabTxt01 ul li.on a{color: #fff;background-color: #bf1f47;}
	
	.mb_tab .selet_txt.on {color: #bf1f47;}
	.mb_tab .selet_txt, .mb_tab ul {padding: 0;}
	.mb_tab ul li a { margin: 0;}

   
}