@charset "utf-8";

.photo2 li a{height:355px;}

@media all and (max-width:1024px){
	.photo2 li a{height:320px;}
}
@media all and (max-width:840px){
	.photo2 li a{height:250px;}
}
@media all and (max-width:680px){
	.photo2 li a{height:220px;}
}
@media all and (max-width:430px){
	.photo2 li a{height:200px;}
}
@media all and (max-width:380px){
	.photo2 li a{height:175px;}
}
@media all and (max-width:340px){
	.photo2 li a{height:162px;}
}

#sub_default {font-size:20px;}

/* 환영인사 */
#sub_greeting {font: 500 30px 'score';}
#sub_greeting .greeting .img {position: relative; padding: 20px 0 0 20px;}
#sub_greeting .greeting .img::before {content: ""; position: absolute;top: 0; left: 0; width: 98.33%; height: 630px; background: #f3f3f3; z-index: -1;}

#sub_greeting .greeting .img_txt {position: absolute; bottom: 0; right: 0; padding: 0 2.5% 30px 0; text-align: center;  color: #fff; z-index: 1;}
#sub_greeting .greeting .img_txt p {font-size: 45px; padding: 0;}
#sub_greeting .greeting .img_txt::before {content: ""; position: absolute; bottom: 0; right: 0; width: 1180px; height: 440px; background: url(/images/ch/sub/txt_box.png) bottom no-repeat; background-size: contain; z-index: -1;}

#sub_greeting .txt {text-align: center;}
#sub_greeting .txt .slogan {position: relative; padding: 50px 0 0 0; font-size: 30px; font-weight: 700; color: #3d3e75;}
#sub_greeting .txt .slogan::before {display: none;}
#sub_greeting .txt .txt_line {padding: 25px 0; margin: 0 auto; width: 28px; height: 8px; background: url(/images/ch/sub/txt_line.png) center no-repeat;}
#sub_greeting .txt p {width: 87%; margin: 0 auto; font-size: 25px; font-weight: 400; word-break: keep-all;}
#sub_greeting .txt p .red {font-weight: 500; color: #ef3948;}
#sub_greeting .txt div {padding: 50px 0 0 0; font: 200 20px 'Noto Sans KR'; word-break: keep-all;}


@media all and (max-width:1024px){
    #sub_greeting .greeting .img::before{max-height: 98.33%;}
    #sub_greeting .greeting .img_txt {padding: 0 2.5% 20px 0; font-size: 24px;}
    #sub_greeting .greeting .img_txt p {font-size: 39px;}
    #sub_greeting .greeting .img_txt::before {width: 850px;}
    #sub_greeting .txt p {white-space: normal;}
}
@media all and (max-width:768px){
    #sub_greeting .greeting .img {padding: 10px 0 0 10px;}
    #sub_greeting .greeting .img::before{height: 380px;}
    #sub_greeting .greeting .img_txt::before {width: 640px;}
    #sub_greeting .txt .slogan {font-size: 24px;}
    #sub_greeting .txt p {font-size: 20px;}
    #sub_greeting .txt div {font-size: 18px;}
}
@media all and (max-width:568px){
    #sub_greeting .greeting .img::before {}
    #sub_greeting .txt .slogan {padding-top: 30px; font-size: 20px;}
    #sub_greeting .greeting .img_txt {padding: 0 3% 10px 0; font-size: 16px;}
    #sub_greeting .greeting .img_txt p {font-size: 28px;}
    #sub_greeting .greeting .img_txt::before {width: 450px;}
    #sub_greeting .txt {text-align: left; padding-left: 10px;}
    #sub_greeting .txt p {margin: 0; padding-left: 0; font-size: 18px;}
    #sub_greeting .txt div {padding: 25px 0 0 0; font-size: 16px;}
    #sub_greeting .txt .txt_line {padding: 15px 0; margin: 0;}
    
}
@media all and (max-width:380px){
    #sub_greeting .greeting .img_txt {padding: 0 3% 7px 0; font-size: 15px;}
    #sub_greeting .greeting .img_txt::before {width: 350px;}
    #sub_greeting .greeting .img_txt p {font-size: 22px;}
}

/* 의회구성 */
.org{position:relative; height: 1200px; padding:100px 60px; box-sizing:border-box; background: #f3f3f3;}
.org div, .org3 li, .org4 li, .org5 div, .org5_1 div, .org5_1 ul li, .org5_2{position:absolute; z-index:2; width:240px; height:60px; left: 50%; top: 0; line-height: 60px; display: block; color:#333333; font-size:20px; font-weight:300; background:#fff; text-align:center; box-sizing:border-box; transform: translateX(-50%);}
.org1 > div, .org2 > div{padding: 0; width: 150px; height: 150px; border-radius: 50%; line-height: 150px; font-size: 25px; font-weight: 700; color: #fff; background: #0c84d6;}
.org1::before {content: ""; position: absolute; width: 91px; height: 91px; top: 84px; left: 50%; background: url(/images/ch/sub/bg_org1_2.png) no-repeat;}
.org1 > div {top: 100px; background: url(/images/ch/sub/bg_org1.png) no-repeat center center / 100%;}
.org1 > div::after {content: ""; position: absolute; width: 119px; height: 29px; top: 110px; left: -64px; background: url(/images/ch/sub/bg_org1_1.png) no-repeat;}
.org2 > div {top: 300px;}
.org3 div, .org4 div, .org5 > div {top: 500px; left: 15%; background: #00bac8; border-radius: 10px; color: #fff; font-weight: 700;}
.org3 ul li, .org4 ul li, .org5_1 div, .org5_2{top: 590px; left: 15%; border: 1px solid #00bac8;}

.org3 .org3_2 {top: 655px;}
.org3 .org3_3 {top: 720px;}
.org3 .org3_4 {top: 785px;}
.org3 .org3_5 {top: 850px;}
.org3 .org3_6 {top: 915px;}

.org4 div, .org4 ul li {left: 38.33%;}

.org4 .org4_2 {top: 655px;}
.org4 .org4_3 {top: 720px;}
.org4 .org4_4 {top: 785px;}
.org4 .org4_5 {top: 850px;}

.org5 > div {left: 73.33%;}
.org5_1 div {left: 61.66%;}
.org5_1 > ul > li {top: 680px; left: 61.66%; background: #fff; border: 1px solid #7569d9;}
.org5_1 .org5_1_2 {top: 745px;}
.org5_1 .org5_1_3 {top: 810px;}
.org5_1 .org5_1_4 {top: 875px;}
.org5_1 .org5_1_5 {top: 940px;}
.org5_1 .org5_1_6 {top: 1005px;}
.org5_1 .org5_1_7 {top: 1070px;}
.org5_2 {left: 85%;}

.line::before, .org2::before, .org3::before, .org4::before, .org5::before, .org5::after, .org5_1::before, .org5_1::after{content: ""; width: 1px; position: absolute; background: #ccc;}
.line::before{height: 326px; top: 150px; left: 50%;}
.org2::before{width: 58.33%; height: 54px; top: 475px; left: 15%; background: #f3f3f3; border: 1px solid #ccc; border-bottom: none; }
.org3::before{height: 411px; top: 475px; left: 15%;}
.org4::before{height: 145px; top: 475px; left: 38.33%;}
.org5::before{height: 53px;top: 522px;left: 73.33%;}
.org5::after{width: 23.41%; height: 54px; top: 575px; left: 61.66%; background: #f3f3f3; border: 1px solid #ccc; border-bottom: none; }
.org5_1::before{height: 411px; top: 575px; left: 61.66%;}


@media all and (max-width:1180px){
    .org3 div, .org4 div, .org5 > div, .org3 li, .org4 li, .org5 div, .org5_1 div, .org5_1 ul li, .org5_2 {width: 200px;}

}

@media all and (max-width:1024px){
    .org3 div, .org4 div, .org5 > div, .org3 li, .org4 li, .org5 div, .org5_1 div, .org5_1 ul li, .org5_2 {width: 160px; font-size: 18px;}
}

@media all and (max-width:768px){
    .org{height: 1625px;}
    .org3 ul li, .org4 ul li, .org5_1 div, .org5_2, .org3 div, .org4 div, .org5 > div {left: 20%;}
    .org3 div, .org4 div, .org5 > div, .org3 li, .org4 li, .org5 div, .org5_1 div, .org5_1 ul li, .org5_2 { width: 30%; font-size: 16px;}
    .org4 div, .org4 ul li {left: 80%;}
    .org5_1 div, .org5_2 {top: 1090px;}
    .org5_2 {left: 80%;}
    .org5 > div {top: 990px; left: 50%;}
    .org5_1 div, .org5_1 > ul > li {left: 20%;}
    .org5_1 > ul > li {top: 1160px;}
    .org5_1 .org5_1_2 {top: 1225px;}
    .org5_1 .org5_1_3 {top: 1290px;}
    .org5_1 .org5_1_4 {top: 1355px;}
    .org5_1 .org5_1_5 {top: 1420px;}
	.org5_1 .org5_1_6 {top: 1485px;}
	.org5_1 .org5_1_7 {top: 1550px;}
    
    .org2::before{width: 60.2%; left: 20%;}
    .org3::before{left: 20%;}
    .org4::before{left: 80%;}
    .org5::before{top: 475px; left: 50%; height: 586px;}
    .org5::after{width: 60.2%; left: 20%; top: 1060px;}
    .org5_1::before{left: 20%; top: 1060px;}
}
@media all and (max-width:568px){
    .org3 div, .org4 div, .org5 > div, .org3 li, .org4 li, .org5 div, .org5_1 div, .org5_1 ul li, .org5_2 {width: 35%;}
}
@media all and (max-width:380px){
    .org3 li, .org4 li, .org5 div, .org5_1 div, .org5_1 ul li, .org5_2 {font-size: 15px;}
    .org3 ul li, .org4 ul li, .org5_1 div, .org5_2, .org3 div, .org4 div, .org5 > div {left: 24%;}
    .org4 div, .org4 ul li {left: 76%;}
    .org5_2 {left: 76%;}
    .org5_1 div, .org5_1 > ul > li {left: 24%;}
    
    .org3 div, .org4 div, .org5 > div, .org3 li, .org4 li, .org5 div, .org5_1 div, .org5_1 ul li, .org5_2 {width: 40%;}
    .org2::before{width: 51.99%; left: 24%;}
    .org3::before{left: 24%;}
    .org4::before{left: 76%;}
    .org5 > div {left: 50%;}
    .org5::after{left: 24%;}
    .org5_1::before{left: 24%;}
}



/* 의회 연혁*/
.history_box {position: relative; height: 297px; padding: 50px 50px 0px 50px; box-sizing: border-box; background: url(/images/ch/sub/bg_hbox.jpg) no-repeat 50% 0 ; background-size: cover; text-align: center;}
.history_box img {padding-bottom: 50px; opacity: 0.35;}
.history_box p {color: #fff; font: 300 20px/30px 'score'; word-break: keep-all; text-align: left;}

.history {position: relative; padding: 50px 0 0 0;}
.history::before{content: ""; position: absolute; width: 1px; height: 2269px; top: 0; left: 50%; background: #ccc; z-index: -1;}
.history ul > li {position: relative; padding-bottom: 65px; height: 100px; font-size: 40px; font-weight: 400; color: #fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);}
.history .sky .txt_con  {background: #039dd0;}
.history .cyan .txt_con {background: #00bac8;}
.history .mint .txt_con {background: #00c6c3;}
.history .pale .txt_con {background: #20b1c8;}
.history .indigo .txt_con {background: #4e8ad1;}
.history .violet .txt_con {background: #7569d9;}
.history ul li .txt_con {padding-top: 8px; margin: 0 auto; text-align: center; width: 200px; height: 100px; background: #0c84d6; border-radius: 100px; box-sizing: border-box;}
.history ul li span, .history .his_con {font-size: 20px;}
.history ul li span {display: block; line-height: 20px;}
.history .his_con {position: absolute; top: 0px; top: 40px; left: 50%; margin: 0 0 0 189px; color: #333; font-weight: 300; text-shadow: none; word-break: keep-all;}
.history .his_con.r_txt {margin: 0 189px 0 0; left: auto; right: 50%;}

.history ul li::after {content: ""; position: absolute; width: 178px; height: 71px; top: 45px; left: 50%; background: url(/images/ch/sub/history_line.png) no-repeat; background-size: contain;}
.history ul li.r_line::after {transform: scaleX(-1); left:auto; right: 50%;}


@media all and (max-width:1024px) {
    .history_box {padding-bottom: 30px; height: auto;}
    .history_box p {font-size: 18px;}
}

@media all and (max-width:768px) {    
    .history::before, .history ul li::after, .history .his_con {left: 105px;}
    .history ul li .txt_con {padding-top: 14px; margin: 0 0 0 6px; font-size: 32px; width: 200px; }
    .history ul li span {font-size: 18px;}
    .history ul li.r_line::after {transform: scaleX(1); left: 105px; right: auto;}
    .history .his_con.r_txt {margin: 0 0 0 189px; right: auto; left: 105px;}
    
}

@media all and (max-width:568px) {
    .history_box {padding: 50px 30px 30px;}
    .history_box img {padding-bottom: 35px;}
    .history_box p {font-size: 16px;}
    
    .history::before, .history ul li::after, .history .his_con, .history ul li.r_line::after, .history .his_con.r_txt {left: 65px;}
    .history ul li::after {top: 30px;width: 120px;}
    .history ul > li {padding-bottom: 30px;}
    .history ul li .txt_con {padding-top: 8px;width: 120px;height: 70px;font-size: 24px;}
    .history .his_con, .history .his_con.r_txt{top: 25px; margin: 0 0 0 130px; font-size: 18px;}
}

@media all and (max-width:380px) {
    .history_box img {padding-bottom: 25px;}
    .history_box p {font-size: 15px;}
    
    .history::before, .history ul li::after, .history .his_con, .history ul li.r_line::after, .history .his_con.r_txt {left: 58px;}
    .history ul li::after {width: 115px;}
    .history ul li .txt_con {padding-top: 7px;margin-left: 2px;width: 110px;font-size: 24px;}
    .history .his_con, .history .his_con.r_txt{top: 10px; margin-left: 125px;font-size: 18px;}
}

/* 찾아오시는길 */
#sub_location .root_daum_roughmap .wrap_map{width: 100%; height:648px !important;}
#sub_location .root_daum_roughmap .cont{display: none;}
#sub_location .roughmap_maker_label .roughmap_lebel_text{font-size: 0;}
#sub_location .os_mac .roughmap_maker_label .roughmap_lebel_text {padding: 12px 20px; font: 900 0px/100% 'Noto Sans KR'; border-radius: 100px;}
#sub_location .roughmap_maker_label{border-radius: 100px;}
#sub_location .roughmap_maker_label .roughmap_lebel_text:before{content:''; display:inline-block; width:30px; height:30px; margin:0 5px 0 0; vertical-align:middle; background-image:url(/images/common/ico_logo.png); background-repeat:no-repeat; background-size:contain;}
#sub_location .roughmap_maker_label .roughmap_lebel_text::after{content:"수원시의회"; font-size: 20px; line-height: 100%; vertical-align: middle;}
#sub_location .root_daum_roughmap_landing .border2 {display: block;}

@media all and (max-width: 1024px){
    #sub_location .root_daum_roughmap .wrap_map {height: 440px !important;}
}

@media all and (max-width: 568px){
    #sub_location .root_daum_roughmap .wrap_map {height: 380px !important;}
}

@media all and (max-width: 380px){
    #sub_location .root_daum_roughmap .wrap_map {height: 300px !important;}
}

/* 숙제도우미 */
#sub_default h4 + ul {margin-top:0 !important;}
#sub_default h4 ~ ul {margin:-15px 0 30px; padding:0 0 0 30px;}

#sub_default .con_box {position: relative; padding: 50px; margin-bottom: 50px; box-sizing: border-box;  border: 5px solid transparent; border-image: linear-gradient(to right, #0c83d7 0%, #00c6c4 50%, #7569d9 100%); border-image-slice: 1;}
#sub_default .con_box dt {position: absolute; top: -20px; left: 50%; padding: 0 10px; font-size: 22px; font-weight: 800; text-align: center; background: #fff; transform: translateX(-50%); word-break: keep-all;}
#sub_default .con_box dd {font-size: 18px; font-weight: 300;}

#sub_default h4 {position: relative; clear: both; width: 100%; padding: 0 0 10px 30px; font-size: 23px; font-weight: 900; line-height: 100%; background: url(/images/ch/sub/txt_bullet.png) no-repeat 0 5px;}
#sub_default .con_txt p {padding: 0 0 30px 30px;}
#sub_default .tabmenu ol li p {padding: 0 0 0 0;}


.tabmenu {position:relative;}
.tabmenu > li > a {display:block; position:absolute; top:0; left:305px; width:300px; height:60px; line-height:60px; border-radius: 5px; font-weight:400; transition:0.3s; text-align:center; background:#fff; border:1px solid #ccc; text-decoration:none; font-size:23px;}
.tabmenu > li:first-child > a {left:0;}
.tabmenu > li > a:hover,
.tabmenu > li > a:focus,
.tabmenu > li > a:active,
.tabmenu > li.on > a {color:#fef991; background-color:#ef3948; border: none;}
.tabmenu > li > .tab_con {display:none; padding-top:87px;}
.tabmenu > li.on > .tab_con {display:block;}

.tabmenu .tab_con ol {padding-left:30px;}
.tabmenu .tab_con ol > li {padding:0 0 20px;}
.tabmenu .tab_con ol li em {display:block; padding:0 0 4px; font-weight:400;}
.tabmenu .tab_con ol li em span.number {margin-right: 5px; color: #0c83d7;}

.tabmenu .tab_con ol li em ~ p,
.tabmenu .tab_con ol li em ~ ul {font-size:18px;}
.tabmenu .tab_con ol li ul li:not(:last-of-type) {padding-bottom:5px;}

.tabmenu .tab_con .star {margin-left: 10px;}

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

    .tabmenu .tab_con ol li em ~ p,
    .tabmenu .tab_con ol li em ~ ul {font-size:1em;}
    #sub_default .con_box {border:5px solid #0c83d7;}
}

@media all and (max-width:768px) {
    #sub_default {font-size: 18px;}
    #sub_default .con_box dt {top: -18px; font-size: 20px;}
    
    #sub_default h4 {padding-left:23px; background-size:16px; font-size: 20px;}
    #sub_default .con_txt p {padding-left: 20px; font-size: 18px;}
    #sub_default h4 ~ ul {padding-left: 23px;}
    
    .tabmenu:before {top:51px;}
	.tabmenu > li > a {left:185px; width:180px; height:51px; line-height:51px; font-size: 21px;}
	.tabmenu > li > .tab_con {padding-top:75px;}
    .tabmenu .tab_con ol {padding-left:20px;}
}

@media all and (max-width:568px) {
    #sub_default {font-size: 16px;}
    #sub_default .con_box {padding: 50px 30px 30px;margin-bottom: 35px;}
    #sub_default .con_box dt {top: -15px;font-size: 18px;}
    #sub_default .con_box dd {font-size: 15px;}
    
    #sub_default h4, .tit_txt {padding: 0 0 5px 20px; font-size: 16px; background-size:14px; background-position:top 3px left;}
    #sub_default .con_txt p {font-size: 16px;}
    
    .tabmenu:before {top:35px;}
    .tabmenu > li > a {left:145px; left: 50%; width: 47.5%; height: 45px; line-height: 45px; font-size: 15px;}
    .tabmenu > li > .tab_con {padding-top: 65px;}
    .tabmenu .tab_con ol > li {padding:0 0 15px;}
}

@media all and (max-width:380px) {
    #sub_default .con_box {padding: 50px 30px 30px; }
    #sub_default .con_box dt {font-size: 17px;}

}

/* 의회용어사전 */
#sub_voca a{color:#222;}
#sub_voca .indexArea{overflow:hidden; width:100%; padding:40px 60px 35px; margin:0 0 40px; box-sizing:border-box; border:1px solid #dedede; background:#f7f7f7;}
#sub_voca .index_word,
#sub_voca .indexArea form{overflow:hidden; position:relative; width:100%; margin:0 0 1em 0; padding:0 0 1em 110px; border-bottom:1px dashed #ccc; box-sizing:border-box;}
#sub_voca .search_result{padding-left:0 !important;}
#sub_voca .indexArea form *{float:left;}
#sub_voca .indexArea fieldset{width:100%;}
#sub_voca .indexArea #word {width:100%; padding:0 150px 0 20px; font-weight:800; color:#111; border:1px solid #ddd; border-radius:3px; box-sizing:border-box; background:#fff;}
#sub_voca .indexArea button[type="submit"]{position:absolute; top:0; right:0; width:120px; height:42px; padding:0 0 0 20px; font-weight:800; color:#fff; border-radius:0 3px 3px 0; box-sizing:border-box; background:#507cc9;}
#sub_voca .indexArea button:before,
#sub_voca .indexArea button:after{content:''; display:block; position:absolute; top:10px; left:25px; width:17px; height:17px; border:2px solid #fff; border-radius:50%; box-sizing:border-box;}
#sub_voca .indexArea button:after{left:37px; top:26px; width:8px; height:2px; border:none; border-radius:2px; transform:rotate(45deg); background:#fff;}
#sub_voca .indexArea form label,
#sub_voca .index_word .titTxt{position:absolute; top:12px; left:0; font-weight:800; color:#222; font-size:19px;}
#sub_voca .index_word ul {width:100%;}
#sub_voca .index_word li {display:inline-block; margin:0 1px 5px 0; text-align:center;}
#sub_voca .index_word li a{display:block; width:42px; height:42px; line-height:40px; font-size:24px; font-weight:800; text-decoration:none; border-radius:50%; box-sizing:border-box; border:1px solid #ddd; background:#fff;}
#sub_voca .index_word li.current_on a,
#sub_voca .index_word li a:focus,
#sub_voca .index_word li a:hover{color:#fff; border-color:#f05952; background:#f05952;}
#sub_voca .search_result ul{overflow:hidden; width:100%;}
#sub_voca .search_result li {float:left; width:20%; padding:0 0 10px 10px; letter-spacing:-1px; box-sizing:border-box; word-break:break-all;}
#sub_voca .none,#sub_voca .word_defined{width:100%;}
#sub_voca #pagingNav{margin:40px 0 0 0;}
@media all and (max-width:1000px) {
	#sub_voca .indexArea{padding:35px 50px 30px; margin:0 0 30px;}
	#sub_voca .index_word li a{width:45px; height:45px; line-height:43px;}
	#sub_voca .search_result ul{padding:0 0 0 2%; box-sizing:border-box;}
}
@media all and (max-width:768px) {
	#sub_voca .indexArea{padding:30px; margin:0 0 25px;}
	#sub_voca .indexArea #word{padding-right:110px;}
	#sub_voca .indexArea form label, #sub_voca .index_word .titTxt{font-size:18px;}
	#sub_voca .indexArea button[type="submit"]{height:42px; width:100px;}
	#sub_voca .indexArea button:before{left:20px;}
	#sub_voca .indexArea button:after{left:32px;}
	#sub_voca .index_word, #sub_voca .indexArea form{padding:0 0 12px 100px; margin-bottom:12px;}
	#sub_voca .index_word li{margin:0 1px 3px 0;}
	#sub_voca .index_word li a{height:40px; width:40px; line-height:38px; font-size:21px;}
}
@media all and (max-width:660px) {
	#sub_voca .search_result li{width:25%;}
}
@media all and (max-width:568px) {
	#sub_voca .indexArea{padding:23px; margin:0 0 20px;}
	#sub_voca .index_word, #sub_voca .indexArea form{padding-left:0;}
	#sub_voca .indexArea form label, #sub_voca .index_word .titTxt{position:static; width:100%; margin:0 0 10px; text-align:center;}
	#sub_voca .indexArea button[type="submit"]{top:auto; bottom:12px; height:38px; width:85px;}
	#sub_voca .indexArea button:before{left:15px;  width:15px; height:15px; }
	#sub_voca .indexArea button:after{left:26px; top:24px;}
	#sub_voca .index_word li a{height:35px; width:35px; line-height:33px; font-size:20px;}
	#sub_voca .search_result li{width:33.33%;}
	#sub_voca .indexArea #word {height:37px; line-height:37px; padding-right:95px;}
	#sub_voca #pagingNav{margin:25px 0 0 0;}
}
@media all and (max-width:380px) {
	#sub_voca .indexArea{padding:20px; margin:0 0 17px;}
	#sub_voca .indexArea form label, #sub_voca .index_word .titTxt{font-size:17px;}
	#sub_voca .index_word li a{height:32px; width:32px; line-height:30px; font-size:19px;}
	#sub_voca .search_result li{width:50%;}
	#sub_voca #pagingNav{margin:20px 0 0 0;}
}

/* 유용한 사이트 */
#sub_site .box_info {padding:50px 50px 20px 50px; border:20px solid #e0e0e0; background:#f3f3f3; text-shadow:none; box-sizing: border-box;}
#sub_site .box_info:after {content:""; display:block; clear:both;}
#sub_site .box_info li {float: left; padding: 0 5px 30px 0; width: 25%; text-align: center;}
#sub_site .box_info li:before{display:none;}

@media all and (max-width: 1024px) {
    #sub_site .box_info {padding:40px 40px 15px 40px;}
}

@media all and (max-width: 768px) {
    #sub_site .box_info {padding:20px 30px 5px;}
    #sub_site .box_info li {width:33.33%; padding:0 5px 15px;}
    
}
@media all and (max-width: 568px) {
    #sub_site .box_info {border: 10px solid #e0e0e0;}
    #sub_site .box_info {padding:20px 25px 5px;}
    #sub_site .box_info li {width:49.5%;}
}

@media all and (max-width:500px) {
    #sub_site .box_info {padding:20px 10px 10px;}
    #sub_site .box_info li {padding-bottom: 10px;}
}