@charset "utf-8";
.head h1 span{display: inline-block;margin: 4px 0 0 6px; font-size: 20px;color:#0074a9;}

/* Mobile */
.m_content{background: url("/images/04_mayor/main/main_bg.jpg")no-repeat left top;background-size: cover;overflow:hidden;}
.m_content .wrap{padding: 0 12px;}
.m_content .wrap>div::after{content:"";display: block;clear: both;}

.mayor .m_img{font-size:0;width: 323px;height: 347px;background: url("/images/04_mayor/main/m_mayor.png")no-repeat right -57px top;background-size: cover;position: relative;left: -12px;margin-top: 60px;}
.mayor .m_txt{width: 90%; background: #ffffffd1;padding: 20px;border-radius: 50px 0 0 20px;box-shadow: -5px 5px 15px #6666661c;backdrop-filter: blur(3px);float: right;margin:-60px -12px 60px 0;}
.mayor .m_txt .slogan{width:fit-content;margin: 0 auto;}
.mayor .m_txt .slogan img{width: 100%;max-width: 268px;}
.mayor .m_txt .greeting{font-size: 24px;margin: 0 auto;margin-top: 30px;width:fit-content;letter-spacing: -1px;line-height: 44px;word-break: keep-all;color: #0079b2;font-weight: 500;font-family: 'SBAggro';}
.mayor .m_txt .greeting strong{font-size: 34px;color: #18439a;line-height: 34px;font-weight: 800;}

.main_sns h2{color: #fff;text-shadow: 0 0 10px #00000082;font-weight: 400;font-size: 32px;position:relative;display:block;width:fit-content;font-family: 'SBAggro';}
.main_sns h2:after{content:"";display:block;width:46px;height:43px;background:url("/images/04_mayor/main/sns_i.png")no-repeat center bottom;position:absolute;top: -29px;right: -41px;}
.main_sns ul{overflow: hidden;padding: 30px 0 30px 20px;border-left: 1px solid #ffffffa2;}
.main_sns li{float: left;margin: 0 3px;}
.main_sns li a{display: block;width:48px; height:48px; background: url("/upload_data/user_file/04_mayor/main/sns.png")no-repeat; font-size:0;}
.main_sns .threads a{ background: url("/upload_data/board_data/BBS_0000221/174286326193409.png")no-repeat;}
.main_sns li.face a{background-position: -73px 0;}
.main_sns li.insta a{background-position: -146px 0;}
.main_sns li.youtube a{background-position: -218px 0;}
.main_sns li.kakao a{background-position: -291px 0;}
.main_sns li.blog a{background-position: 0 0;}

.quick_link{margin: 40px 0;}
.quick_link li{width:49%;float:left;text-align:center;margin-right:2%;margin-bottom:15px;border-radius:10px;overflow:hidden;box-shadow: -5px 5px 15px #6666662e;border: 2px solid #fff;transition: all .3s;}
.quick_link li:nth-of-type(2n){margin-right:0;}
.quick_link li a{padding:20px 0;background:#fff;display:block;letter-spacing: -1px;}
.quick_link li span:before{content:"";display:block;width: 60px;height:58px;margin:0 auto;background:url("/images/04_mayor/main/q_icon.png")no-repeat center top;}
.quick_link .li01{border-radius:30px 10px 10px;}
.quick_link .li02{border-radius:10px 30px 10px 10px;}
.quick_link .li05{border-radius:10px 10px 10px 30px;}
.quick_link .li06{border-radius:10px 10px 30px 10px;}
.quick_link .li02 span:before{background-position: center top -80px;}
.quick_link .li03 span:before{background-position: center top -154px;}
.quick_link .li04 span:before{background-position: center top -243px;}
.quick_link .li05 span:before{background-position: center top -337px;}
.quick_link .li06 span:before{background-position: center top -421px;}
.quick_link li:hover, .quick_link li:focus{border: 2px solid transparent;background:linear-gradient(45deg, #ffb13c 0%, #3fcb55 50%, #23aae8 100%);background-origin: border-box;}
.quick_link li:hover a{background: #eaf8ff;color: #18439a;font-weight: 500;}

/*Tablet*/
@media all and (min-width:768px) {
.mayor .m_img{float:left;width: 406px;background-position: right top;}
.mayor .m_txt{background:none;box-shadow:none;backdrop-filter:none;margin: 78px 20px 0 0;padding:0;width:fit-content;}
.mayor .m_txt .slogan img{max-width: 310px;}
.mayor .m_txt .greeting{font-size: 30px;margin-top: 84px;}
.mayor .m_txt .greeting strong{font-size: 40px;line-height: 31px;}

.main_sns{margin: 0 auto;margin-top: 60px;width: fit-content;}
.main_sns li{margin: 0 10px;}
.main_sns li a{display:inline-block;}
}

/*PC*/
@media all and (min-width:1023px) {
.head h1 span{margin: -2px 0 0 10px;font-size:28px;}
.m_content{min-width: 1920px;}
.m_content .wrap{padding: 0;}

.mayor .m_img{width:869px;height:670px;margin-top: 53px;left: 0;margin-left: -175px;}
.mayor .m_txt{float:left;margin: 63px 0 0 0;}
.mayor .m_txt .slogan{margin:0;}
.mayor .m_txt .slogan img{max-width: 300px;}
.mayor .m_txt .greeting{font-size:36px;margin-top: 100px;text-shadow: 0 0 10px #fff;overflow: inherit;}
.mayor .m_txt .greeting strong{font-size:60px;}

.m_content .wrap{position:relative;}
.main_sns{position:absolute;bottom: 51px;left: 726px;}
.main_sns ul{padding: 40px 0 30px 30px;}
.main_sns li a{transition:all .5s;}
.main_sns li a:hover, .main_sns li a:focus{transform: translateY(-20px);}
    
.quick_link{position:absolute;top:0;right: 34px;width:480px;margin: 110px 0 0 0;}
.quick_link li{width:199px;margin-right: 15px;}
.quick_link li a{padding:30px 0;font-size: 18px;}
.quick_link li span:before{margin-bottom:10px;}
.quick_link .li03{margin-left:55px;}
}   

@media all and (min-width:1023px) {
/* 레이아웃 수정 */
.sub_site{overflow-x:auto;width: 100%;min-width: max-content;}
.sub_site .head{width: 1760px;height: 100px;margin: 0 auto;}
.sub_site nav{position:static; border:none; max-width: max-content;}
.sub_site .menu>ul{width: 800px;padding-right: 0;}
.sub_site .head .gnb{padding-right:60px;}
.sub_site .menu>ul>li>a{height:100px;padding: 36px 0;}
.sub_site .menu ul li .depth_box{top:100px;min-width: 1760px;}
.sub_site .tsitemap{top: 38px;right: calc((100% - 1760px) / 2);}
.sub_site footer .wrap{width:1760px;}
.sub_site .s_content{width:1760px;}
.sub_site .sub_container::after{width:calc(((100% - 1760px) / 2) + 1760px);}    
    
}

@media all and (min-width:1760px) {
.sub_site{overflow-x: hidden;}  
}