@charset "utf-8";
.m_content{padding: 30px 20px;}
.m_con{overflow: hidden;}
.m_content *{font-family:'GmarketSans', NotoSans, 'Noto Sans KR', Dotum, "돋움", sans-serif;color:#333;font-weight:400; box-sizing:border-box;}

/* 인포존 */
.info_zone{position: relative;margin:0 0 20px;padding-top: 50px;overflow: hidden;/* height: 315px; */}
.info_zone ul{border-radius: 10px;overflow: hidden;margin-bottom: 6px;}
.info_zone img{width: 100%; height: 180px;}
.info_zone .control{position: absolute; top: 1px;}
.info_zone .control .btn button{display: inline-block;overflow: hidden;width: 36px;height: 36px;background: url('/images/01_potal/new_main/main_ico.png') no-repeat;font-size: 0;}
.info_zone .control .btn button.stop{background-position: -50px -10px;}
.info_zone .control .btn button.play{background-position: -127px -10px;}
.info_zone .control .btn button.prev{background-position: -12px -10px;}
.info_zone .control .btn button.next{background-position: -88px -10px;}
.info_zone .control .btn button.all{width: auto; height: auto; margin-top: 8px; padding-top: 0; color: #004a8f; font-size: 14px; background: none;}
.info_zone .control .btn button.all::before{content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: url('/images/01_potal/new_main/main_ico.png') no-repeat; background-position: -175px -24px;}
.info_zone .link{margin-top:20px;height: auto !important;}
.info_zone .link ul{height: auto !important;margin-bottom: 0;overflow: unset;}
.info_zone .link li{display: inline-block; margin: 0 8px 10px 0;}
.info_zone .link li a{font-size: 15px; line-height: 17px;}
.info_zone .link li a::before{content: ''; display: inline-block; width: 23px; height: 24px; margin-bottom: -8px; margin-right: 6px; background: url('/images/01_potal/new_main/link_ico.png') no-repeat;}
.info_zone .link li.link01 a::before{background-position: -20px -17px;}
.info_zone .link li.link02 a::before{background-position: -78px -17px;}
.info_zone .link li.link03 a::before{background-position: -136px -17px;}
.info_zone #new_info_list a{display:block}
.info_zone #new_info_list a:focus{outline:1px dotted #0f9a4e !important;box-shadow:0 0 0 1px #0f9a4e inset;padding:1px}


.info_allpop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .7);z-index:5}
.info_allpop>div{background:#fff;/* width: 932px; */margin:150px auto 0 auto;position:relative;}
.info_allpop div div{padding:10px;height: 400px;overflow-y:auto;}
.info_allpop h5{background:#434343;color:#fff;font-size:18px;padding:15px}
.info_allpop ul{overflow:hidden}
.info_allpop li{float:left;width: 100%;margin:10px;}
.info_allpop li img{width: 100%;/* height:260px; */}
.info_allpop p{position:absolute;top:0;right:0}
.info_allpop p a{display:block;width:50px;height:0;padding:50px 0 0 0;overflow:hidden;background:url("/images/common/cmd_ico.png") no-repeat center -125px}


/* 군수실 */
.mayor{height: 320px; padding: 60px 0 0 30px; background: #f1f9ff url('/images/01_potal/new_main/mayor.png') no-repeat right bottom; border-radius: 10px; margin:0 0 20px; z-index: 0;}
.mayor h2{margin-bottom: 4px; font-size: 18px; line-height: 20px;}
.mayor .name{position: relative; display: inline-block; margin-bottom: 20px; font-size: 40px; font-family:'ulsanjunggu'; z-index: 1;}
.mayor .name::before{content: ''; position: absolute; bottom: 0; display: block; width: 100%; height: 20px; background: #ffe868; z-index: -1;}
.mayor ul li{margin-bottom: 8px;}
.mayor ul li a{font-size: 16px; }
.mayor ul li a::before{content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 6px; margin-bottom: -6px; background: url('/images/01_potal/new_main/main_ico.png') no-repeat; background-position: -19px -69px;}

/* 게시판 */
.main_bbs{position: relative; height: 260px; overflow: hidden; margin-bottom: 20px; z-index: 0;}
.main_bbs::after{content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 72px; background: #f6f6f6; border-radius: 10px; z-index: -1;}
.main_bbs>div{display: none; position: absolute; bottom: 0; width: 100%;}
.main_bbs>div.on{display: block;}
.main_bbs h3{float: left; width: 28.33%; margin: 10px 2% 0; line-height: 24px; text-align: center;}
.main_bbs h3.on a{font-size: 20px; font-weight: 600; color: #004a8f;}
.main_bbs h3 a{display: block; font-size: 18px; font-weight: 400;}
.main_bbs h3 a:hover{color: #004a8f; font-weight: 600;}
.main_bbs ul{margin-bottom: 14px;}
.main_bbs ul li{margin-bottom: 4px;}
.main_bbs ul li a{display: block; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 16px;}
.main_bbs ul li a:hover{text-decoration: underline;}
.main_bbs ul li a::before{content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 6px 2px 0; background: #d8d8d8; border-radius: 8px;}
.main_bbs ul li span{display: none;}
.main_bbs p{text-align: center;}
.main_bbs p a{font-size: 15px; line-height: 15px;}
.main_bbs p a::before{content: ''; display: inline-block; width: 20px; height: 12px; margin-right: 6px; background: url('/images/01_potal/new_main/main_ico.png') no-repeat; background-position: -66px -73px;}

/* 고창소식지 */
.letter{position: relative; height: 220px; margin-bottom: 20px;}
.letter h2{display: inline-block; margin: 30px 0 6px; color: #004a8f; font-size: 16px; font-weight: 400; border-bottom: 1px #004a8f solid;}
.letter .date{margin-bottom: 30px; font-size: 20px;}
.letter .img{display: block; position: absolute; top: 20px; right: 0;}
.letter .img img{border: 1px #e1e1e1 solid; border-radius: 10px; width: 130px; height: 180px;}
.letter .btn{display: inline-block; width: 105px; height: 40px; background: #004a8f; color: #fff; font-size: 15px; border-radius: 10px;text-align: center;line-height: 40px;}

/* 자주찾는 서비스 */
.quick{margin-bottom: 20px;}
.quick h2{font-family:'BMDOHYEON';font-size: 23px;margin-bottom: 20px;text-align: center;}
.quick h2 i{display:none;}
.quick ul{overflow: hidden; font-size: 0;}
.quick li{display: inline-block; width: 31.33%; margin: 0 1% 20px; text-align: center;}
.quick li a{display: block; padding-top: 40px; background: url('/images/01_potal/new_main/quick_ico.png') no-repeat; font-size: 15px;}
.quick li a:hover,.quick li a:focus{text-decoration: underline;}
.quick li.q01 a{background-position: 50% -9px;}
.quick li.q02 a{background: url('/images/01_potal/new_main/quick_ico2.png') no-repeat top center;}
.quick li.q03 a{background-position: 50% -173px;}
.quick li.q04 a{background-position: 50% -253px;}
.quick li.q05 a{background-position: 50% -335px;}
.quick li.q06 a{background-position: 50% -414px;}
.quick li.q07 a{background-position: 50% -498px;}
.quick li.q08 a{background-position: 50% -580px;}
.quick li.q09 a{background-position: 50% -661px;}
.quick li.q10 a{background: url('/images/01_potal/new_main/q10.png') no-repeat top -12px center;}
.quick li.q11 a{background: url('/images/01_potal/new_main/q11.png') no-repeat top -12px center;}
.quick li.q12 a{background: url('/upload_data/board_data/BBS_0000015/172723225661204.png') no-repeat top -12px center;}
.quick li.q13 a{background: url('/upload_data/board_data/BBS_0000015/174314892531903.png') no-repeat top 2px center;}

/* 보도자료 */
.news{position: relative; margin-bottom: 20px;}
.news h2{font-family:'BMDOHYEON'; font-size: 24px; margin-bottom: 20px;}
.news li{display: none;}
.news li:first-child{display: block;}
.news li a{display: block;}
.news li a img{display: block; width: 100%; height: 200px; margin-bottom: 10px; border-radius: 10px;}
.news li a span{display: block; font-size: 16px;  width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.news li a em{display: block; font-size: 14px; color: #666; font-style: normal;}
.news p.more{position: absolute; top: 6px; right: 0;}
.news p.more a{font-size: 15px; line-height: 15px;}
.news p.more a::before{content: ''; display: inline-block; width: 20px; height: 12px; margin-right: 6px; background: url('/images/01_potal/new_main/main_ico.png') no-repeat; background-position: -66px -73px;}

/* sns */
.sns{position: relative; height: 390px; margin-bottom: 20px; padding: 20px; border-radius: 10px; background: #006cb8;}
.sns h2{font-family:'BMDOHYEON'; font-size: 24px; margin-bottom: 20px; color: #fff; font-weight: normal;}
.sns h3{float: left; margin-right: 20px;}
.sns h3 a{display: block; font-size: 18px; font-weight: 400; color: #fff; padding-bottom: 4px;}
.sns h3 a::before{content: ''; display: inline-block; width: 35px; height: 24px; margin-bottom: -8px; margin-right: 6px; background: url('/images/01_potal/new_main/sns_ico.png') no-repeat;}
.sns h3.youtube a::before{background-position: -21px -18px;}
.sns h3.blog a::before{background-position: -92px -18px;}
.sns h3.on a,
.sns h3 a:hover{border-bottom: 1px #fff solid;}
.sns .sns_con{display: none;}
.sns .sns_con.on{display: block; position: absolute; top: 110px; width: calc(100% - 40px); overflow: hidden;}
.sns .sns_con ul li{display: none;}
.sns .sns_con ul li:first-of-type{display: block;}
.sns .sns_con ul li img{width: 100%; height: 180px; border-radius: 10px;}
.sns .sns_con ul li span{display: none;}
.sns .sns_con ul li a{display: block; position: relative;}
.sns .sns_con ul li a span{position:absolute; bottom:-100px; left:0; right: 0; display:block; width: 90%; margin: 0 auto; text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden; z-index:1; transition:ease-out .2s; color: #fff; text-align: center;}
.sns .sns_con ul li a:hover span,
.sns .sns_con ul li a:focus span{bottom:100px}
.sns .sns_con ul li a:after{content:"";display:block;position:absolute;top:260px;right:0;bottom:0;left:0;background:rgba(0, 0, 0, .8);transition:ease-out .2s; border-radius: 10px;}
.sns .sns_con ul li a:hover:after,
.sns .sns_con ul li a:focus:after{top:0;}

.sns .sns_con.txt a{display:block; height:180px;padding: 33px 20px;background:#fff;border-radius: 10px;}
.sns .sns_con.txt a:after{display:none;}
.sns .sns_con.txt a:hover strong{text-decoration: underline;}
.sns .sns_con.txt a strong{display:block;margin-bottom: 10px;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;font-size: 18px;font-weight: 600;color: #48a130;}
.sns .sns_con.txt a em{display:block; display:-webkit-box; word-wrap:break-word;-webkit-line-clamp: 3;-webkit-box-orient:vertical;  text-overflow:ellipsis;word-wrap:normal;overflow:hidden; font-style:normal;}


.sns .sns_list{position: absolute; bottom: 20px; overflow: hidden;}
.sns .sns_list li{float: left; margin: 0 10px 10px 0;}
.sns .sns_list li a{color: #fff; font-size: 16px;}
.sns .sns_list li a::before{content: ''; display: inline-block; width: 25px; height: 24px; margin-bottom: -8px; margin-right: 6px; background: url('/images/01_potal/new_main/sns_ico.png') no-repeat;}
.sns .sns_list li.facebook a::before{background-position: -167px -21px;}
.sns .sns_list li.insta a::before{background-position: -236px -21px;}
.sns .sns_list li.kakao a::before{background-position: -306px -20px;}
.sns .sns_list li a:hover,
.sns .sns_list li a:focus{border-bottom: 1px #fff solid;}

/* 주요사이트 */
.sitelink h2{font-family:'BMDOHYEON'; font-size: 24px; margin-bottom: 10px;}
.sitelink{position:relative; font-size: 0;}
.sitelink_list>button{display: inline-block; width:48%; margin: 0 1% 2%; border: 1px #006cb8 solid; background: #fff; text-align:left; padding:0 0 0 15px; height:50px; position:relative}
.sitelink_list>button span{display:block;width:15px;height:0;padding:8px 0 0 0 ; overflow:hidden; position:absolute;top:22px;right:15px; background: url('/images/01_potal/new_main/bottom_ico.png') no-repeat; background-position: 50% -12px;}
.sitelink_list div{display:none;position:absolute;left: 1%;width:98%;padding: 20px 15px 50px 15px;border:1px solid #e1e1e1;background:#fff;z-index: 999;}
.sitelink_list div.on{display:block}
.sitelink_list p.tit{display: none;}
.sitelink_list div button{position:absolute; bottom:0;right:0; width:50px; height:0; padding:50px 0 0 0; overflow:hidden; background: #006cb8 url('/images/01_potal/new_main/bottom_ico.png') no-repeat; background-position: 50% -39px;}
.sitelink_list ul,
.sitelink_list dl{overflow:hidden}
.sitelink_list li,
.sitelink_list dd{width: 50%;float:left;margin:0 0 6px 0;}
.sitelink_list li a,
.sitelink_list dd a{display:block; font-size: 14px;} 
.sitelink_list dt{font-size: 16px; color: #006cb8;}
.sitelink_list li a:hover,
.sitelink_list li a:focus,
.sitelink_list dd a:hover,
.sitelink_list dd a:focus{color:#000;text-decoration:underline}

/* Tablet */
@media all and (min-width:768px) {
.m_content{background: #f8fcf6;}
.m_con{margin-bottom: 45px;}

.info_zone{float: left;width: 55%;height: 320px;margin: 0 2% 0 0;}  
.info_zone ul{margin-bottom: 16px;} 
.info_zone img{height: 230px;}

.info_allpop div div{height:470px;}
.info_allpop li{float:left;width:calc(50% - 20px);margin:10px;}

    .info_zone .link{margin-top: 10px;}
    
.mayor{float: left; width: 43%; margin: 0;}

.main_bbs{float: left; width: 55%; margin: 0 2% 0 0;}
.letter{float: left; width: 43%; height: 260px; margin: 0; padding: 0 24px; background: #fff; border-radius: 10px;}
.letter h2{margin: 60px 0 6px;}
.letter .img{right: 20px;}

.quick{margin-bottom: 40px; padding: 20px 0; background: #fff; border-radius: 10px;}
.quick h2{margin: 0 20px 20px;}
.quick ul{text-align: center;}
.quick li{width: 18%;margin:5px 4px;}

.news ul{overflow: hidden;}
.news li{float: left; width: 49%;}
.news li:nth-of-type(2){display: block;}
.news li:first-child{margin-right: 2%;}

.sns{height: 320px;}
.sns .sns_con.on{top:120px}
.sns .sns_con ul li{float: left; width: 49%;}
.sns .sns_con ul li:nth-of-type(2){display: block;}
.sns .sns_con ul li:first-child{margin-right: 2%;}
.sns .sns_list{top: 50px; right: 20px; bottom: auto; width: 430px; height: 50px; padding: 14px 28px; background: #004a8f; border-radius: 40px;}
.sns .sns_list li{margin: 0 30px 0 0;}
.sns .sns_list li:last-child{margin: 0;}


}

@media all and (min-width:1023px) {

.m_content{margin: 0; padding: 0; background: #fff;}
.main01{padding: 45px 0;background: #f8fff4 url('/upload_data/board_data/BBS_0000015/169890798049211.jpg') no-repeat bottom right;}
/*.main01{padding: 45px 0;background: #f8fff4 url('/images/01_potal/new_main/top3.jpg') no-repeat bottom right;}*/
.main02{padding: 45px 0;background: url('/upload_data/board_data/BBS_0000015/171460994327683.jpg') no-repeat;}
/*.main02{padding: 45px 0;background: url('/images/01_potal/new_main/bottom1.jpg') no-repeat;}*/
.main03{background: #f8fbff url('/images/01_potal/new_main/bg03.png') no-repeat bottom right;}

.m_con{width: 1200px; margin: 0 auto 45px; overflow: hidden;}

.info_zone{width: 855px;margin-right: 20px;padding-top: 60px;border-radius: 10px;}
.info_zone ul{margin: 0;}
.info_zone li{float:left;}
.info_zone img{width: auto; height: 260px;}
.info_zone .link{position: absolute;top: 4px;right: 0;margin-top: 0;}
    
.info_allpop>div{width: 932px;}
.info_allpop div div{height:550px;}
.info_allpop li{width: 427px;}
.info_allpop li img{width:427px;height:260px}

    
.mayor{width: 325px;}

.main_bbs{width: 720px; margin-right: 26px;}
.main_bbs::after{width: 100%; height: 60px;}/*width: 580px;*/
.main_bbs h3{width: auto;margin: 0 20px;}
.main_bbs h3 a{height: 60px; padding-top: 20px;}
.main_bbs h3.work{position: absolute; top: 0; right: 0; margin: 0; text-align: left;}
.main_bbs h3.work a{width: 120px; padding-top: 18px; padding-left: 12px; border: 1px #004a8f solid; border-radius: 10px; color: #004a8f;}
.main_bbs h3.work a::before{content: ''; display: inline-block; width: 18px; height: 24px; margin: 0 8px -6px; background: url('/images/01_potal/new_main/main_ico.png') no-repeat; background-position: -166px -67px;}
.main_bbs ul{margin-bottom: 16px; padding-left: 8px;}
.main_bbs ul li{margin-bottom: 10px;}
.main_bbs ul li:last-child{margin: 0;}
.main_bbs ul li a{display: inline-block; width: 80%;}
.main_bbs ul li a::before{margin: 0 8px 2px 0;}
.main_bbs ul li span{display: block; float: right; margin: 6px 10px 0 0; color: #7d7d7d; font-size: 13px;}
.main_bbs p{position: absolute; top: -50px; right:25px;}/* right: 160px;*/


.letter{width: 454px;padding: 20px 40px;border: 1px #004a8f solid;}

.letter .img{right: 40px;}
.letter .img img{width: 200px; height: 220px;}

.quick{width: 1200px;height: 120px;margin: 0 auto;padding: 30px 0;border: 1px #f3f3f3 solid;}
.quick h2{float:left;margin: 5px 0 0 15px;}
.quick h2 i{display:block;}
.quick ul{float:right;}
.quick li{margin: 0px 15px;width: auto;}

.news{width: 1200px; margin: 0 auto 45px;}
.news li{display: block; width: 285px; margin-right: 20px;}
.news li:first-child{margin-right: 20px;}
.news li:last-child{margin-right: 0;}

.sns{width: 1200px; height: 350px; margin: 0 auto; padding: 45px 40px 0; background: none; z-index: 0;}
.sns::after{content: ''; position: absolute; top: 0; right: 0; display: block; width: 100%; height: 260px; background: #006cb8; border-radius: 10px; z-index: -1;}
.sns h2{float: left; margin-bottom: 0; margin-right: 300px;}
.sns .sns_con.on{top: 110px;}
.sns .sns_con ul li{display: block; width: 360px; margin-left: 20px;}
.sns .sns_con ul li:first-child{margin-right: 0; margin-left: 0;}
.sns .sns_con ul li img{height: 240px;}
.sns .sns_list{top: 30px; right: 40px;}

.sitelink{width: 1200px; margin: 0 auto; padding: 50px 0;}
.sitelink h2{margin-bottom: 26px;}
.sitelink_list>button{display: none;}
.sitelink_list div{display: block;width: 100%;position: static;padding: 14px 0 4px;border: none;border-top: 1px #d9e9ff solid;background: none;font-size: 0;overflow: hidden;}
.sitelink_list .sitelink_box1{padding: 0;border-top: none;overflow: hidden;}
.sitelink_list div button{display: none;}
.sitelink_list p.tit{display: block;float: left;font-size: 20px;color: #004a8f;}
.sitelink_list ul,
.sitelink_list dl{float:right;width: 85%;}
.sitelink_list li,
.sitelink_list dd{margin: 0 10px 8px 0;width: auto;}

.sitelink_list dl{width: 85%;margin-bottom: 10px;}
.sitelink_list dt{margin-bottom: 10px;}
}