@charset "utf-8";


#sub_default{float:none; width:100%; font-family: 'NanumSquare'; font-weight: 500; transform: rotate(-0.03deg);}

/* 환영인사 */
#sub_greeting {z-index:1; position:relative; width:100%; line-height:170%; font-weight:400; word-break:keep-all; margin-top: 15px;}
#sub_greeting:before{z-index:-1; content:''; display:block; position:absolute; top:-80px; right:0; width:100%; height:449px; background:#f7f8fa;}
#sub_greeting::after {position: absolute; content: 'GWANGJIN-GU COUNCIL'; font-family: 'Jalnan'; top: 323px; right: 0; color: #f2f3f5; font-size: 80px; z-index: -1;}


#sub_greeting .img{position: relative; float:left; width:36.42%; margin-right: 4.28%;}
#sub_greeting .img::after {position: absolute; content: ''; width: 40px; height: 262px; background: #fff; bottom: -1px; right: -1px;}
#sub_greeting .img img{width: 100%;}


#sub_greeting .txt{float:left; width:57.28%; margin-top: 70px;}
#sub_greeting .tit{margin-bottom: 220px; font-size:18px; color: #666;}
#sub_greeting .tit::after {display: block; content: ''; clear: both;}
#sub_greeting .tit div{height:92px; line-height:56px; font-size:40px; font-family:"Jalnan"; font-weight:900; color: #363d59;}
#sub_greeting .tit div span{color:#387cda;}
#sub_greeting .tit > p {margin-top: 40px;}

#sub_greeting .tit_bottom {line-height: 30px;}
#sub_greeting .txt .name {font-size: 18px; font-weight: 700; margin-top: 50px;}

@media all and (max-width:1400px){
    #sub_greeting:before {height: 400px;}
    #sub_greeting .img::after {display: none;}
    #sub_greeting::after {font-size: 54px; top: 285px;}
    
    #sub_greeting .txt {margin-top: 60px;}
    #sub_greeting .tit {margin-bottom: 180px;}
}

@media all and (max-width:1180px){
    #sub_greeting::after {font-size: 50px;}
}

@media all and (max-width:1040px){
    #sub_greeting:before {height: 320px;}
    #sub_greeting::after {top: 211px; font-size: 35px;}
    
    #sub_greeting .txt {margin-top: 30px;}
    #sub_greeting .tit {margin-bottom: 120px;}
    #sub_greeting .tit div {font-size: 30px; line-height: 44px;}
    #sub_greeting .tit > p {font-size: 16px; margin-top: 20px;}
    
}

@media all and (max-width:790px){
    #sub_greeting::after {display: none;}
    #sub_greeting:before {height: 680px;}
    
    #sub_greeting .img {float: none; margin: 0 auto; width: 320px;}
    
    #sub_greeting .txt {width: 100%;}
    #sub_greeting .tit {text-align: center; margin-bottom: 100px;}
    #sub_greeting .tit > p {margin-top: 10px; font-size: 15px;}
    
    #sub_greeting .tit_bottom {font-size: 15px;}
    #sub_greeting .txt .name {font-size: 16px;}
    
}

@media all and (max-width:568px){
    #sub_greeting .tit div {font-size: 24px; line-height: 38px;}
}

@media all and (max-width:380px){
    #sub_greeting:before {height: 590px;}
    #sub_greeting .img {width: 260px;}
    
    
    #sub_greeting .tit {margin-bottom: 70px;}
    #sub_greeting .tit div {font-size: 20px; line-height: 34px;}
    
    #sub_greeting .tit > p,
    #sub_greeting .tit_bottom {font-size: 14px;}
    #sub_greeting .tit > p {margin-top: 0;}
    
}

/* 의회 연혁*/
#sub_history .history_box {width: 100%; height: 240px; text-align: center; color: #fff; background: url(/images/ch/sub/bg_history.jpg) no-repeat; background-position: center; padding: 80px 0; box-sizing: border-box; margin-bottom: 65px;}
#sub_history .history_box h4 {position: relative; font-family: 'NanumSquare'; font-size: 36px; font-weight: 900; color: #fff; padding: 0;}
#sub_history .history_box h4::after {position: absolute; content: ''; width: 310px; height: 1px; top: 50px; left: 50%; transform: translateX(-50%); background: #fff; filter: opacity(0.3);}
#sub_history .history_box p {margin-top: 40px;}


#sub_history .history {padding-left: 30px;} 
#sub_history .history .his_list {margin-bottom: 70px;}
#sub_history .history .his_list::after {display: block; content: ''; clear: both;}
#sub_history .history .his_list .list_tit {position: relative; float: left; padding-top: 20px;}
#sub_history .history .his_list .list_tit p {padding-top: 8px;}
#sub_history .history .his_list .bar {width: 3px; height: 214px; background: #e5e5e5; display: inline-block; margin: 0 70px 0 103px; float: left;}
#sub_history .history .his_list .list_con {padding-top: 20px;}

#sub_history .history .his_list .list_tit h3 {font-family: 'NanumSquare'; font-size: 28px; font-weight: 900; color: #000;}
#sub_history .history .his_list .list_tit p {font-weight: 600; color: #666;}
#sub_history .history .his_list .list_con ul li {position: relative; padding: 0 0 18px 0;}
#sub_history .history .his_list .list_con ul li:last-child {padding-bottom: 0;}
#sub_history .history .his_list .list_con span {font-weight: 900; margin-right: 55px;}
#sub_history .history .his_list .list_con .blue {color: #3170c8;}

#sub_history .history .his_list:nth-child(2) .bar,
#sub_history .history .his_list:nth-child(5) .bar,
#sub_history .history .his_list:nth-child(6) .bar,
#sub_history .history .his_list:nth-child(8) .bar{height: 175px;}


@media all and (max-width:1024px) {
    #sub_history .history .his_list .list_tit h3 {font-size: 26px;}
    #sub_history .history .his_list .bar {margin: 0 60px 0 73px;}
    #sub_history .history .his_list .list_tit p,
    #sub_history .history .his_list .list_con {font-size: 15px;}
    #sub_history .history .his_list .list_con span {margin-right: 40px;}
}

@media all and (max-width:847px) {
    #sub_history .history {padding: 0 10px;}
    #sub_history .history .his_list .list_tit {float: none;}
    #sub_history .history .his_list .bar {float: none; width: 100%; height: 3px; margin: 20px 0 0 0;}
    
    #sub_history .history .his_list:nth-child(2) .bar,
    #sub_history .history .his_list:nth-child(5) .bar,
    #sub_history .history .his_list:nth-child(6) .bar,
    #sub_history .history .his_list:nth-child(8) .bar{height: 3px;}
    
    #sub_history .history .his_list {margin-bottom: 50px;}
    #sub_history .history .his_list .list_con ul li {padding: 0 0 5px 110px; line-height: 26px}
    #sub_history .history .his_list .list_con span {position: absolute; top: 0; left: 0;}
}

@media all and (max-width:748px){
    #sub_history .history_box h4 {font-size: 32px;}
    #sub_history .history_box h4::after {top: 45px; width: 300px;}
    #sub_history .history_box p {font-size: 15px; margin-top: 30px;}
}


@media all and (max-width:568px) {
    #sub_history .history_box {height: 200px; margin-bottom: 30px; padding: 60px 0;}
    
}

@media all and (max-width:380px) {
    #sub_history .history_box {height: 190px;}
    #sub_history .history_box h4 {font-size: 28px;}
    #sub_history .history_box h4::after {top: 38px; width: 260px;}
    #sub_history .history_box p {font-size: 14px; margin-top: 25px;}
    
    #sub_history .history .his_list .list_tit p,
    #sub_history .history .his_list .list_con {font-size: 14px;}
    #sub_history .history .his_list .list_tit h3 {font-size: 22px;}
    
    #sub_history .history .his_list .list_con ul li {padding-left: 90px;}
    
    
}

/*의회구성*/
#sub_org .org {position: relative; width: 100%; height: auto; min-height: 600px; border: 1px solid #e5e5e5; text-align: center;}
#sub_org .org .org1 span {display: block; position: absolute; top: 61px; left: 50%; transform: translateX(-50%); width: 289px; height: 139px; background: url(/images/ch/sub/org1.png) no-repeat; background-size: contain; z-index: 4; color: #fff; font: 24px 'Jalnan'; line-height: 139px;}
#sub_org .org .org2 span {top: 240px; width: 250px; height: 100px; line-height: 100px; background: url(/images/ch/sub/org2.png) no-repeat; background-size: contain; }
#sub_org .org .org3 span {top: 440px; width: 25.71%; height: 60px; font: 20px 'NanumSquare'; line-height: 60px; background: #495057; border-radius: 50px;}
#sub_org .org .org3_1 span {left: 18.5%;}
#sub_org .org .org3_3 span {left: 81.5%;}

#sub_org .org .org1::after {position: absolute; content: ''; width: 1px; height: 300px; top: 150px; left: 50%; z-index: -1; background: #d2d2d2;}
#sub_org .org .org3::after {position: absolute; content: ''; width: 1px; height: 50px; background: #d2d2d2; top: 390px; left: 18.5%;}
#sub_org .org .org3_2::after {width: 63%; height: 1px;}
#sub_org .org .org3_3::after {left: 81.5%;}


#sub_org .org_b {margin-top: 50px;}
#sub_org .org_b .org1 span{background: url(/images/ch/sub/org1_1.png) no-repeat; background-size:contain;}
#sub_org .org_b .org2 span{background: url(/images/ch/sub/org1_2.png) no-repeat; background-size:contain;}
#sub_org .org_b .org3 span {width: 16%; background: #495057;}
#sub_org .org_b .org3_1 span {left: 20%;}
#sub_org .org_b .org3_2 span {left: 40%;}
#sub_org .org_b .org3_3 span {left: 60%;}
#sub_org .org_b .org3_4 span {left: 80%;}
#sub_org .org_b .org1::after {height: 241px;}
#sub_org .org_b .org3::after {left: 20%;width: 60%;background: none;border: 1px solid #d2d2d2;border-bottom: 0;}
#sub_org .org_b .org3_2::after {left: 40%;width: 20%;height: 50px;}
#sub_org .org_b .org3_3::after {display: none;}

@media all and (max-width: 1024px){
    #sub_org .org .org1 > span,
    #sub_org .org_b .org1 > span{width: 269px; line-height: 133px;}
    #sub_org .org .org2 > span,
    #sub_org .org_b .org2 > span{width: 233px; line-height: 98px; }
}

@media all and (max-width: 768px){
    #sub_org .org .org1 > span,
    #sub_org .org_b .org1 > span{width: 239px; font-size: 20px; line-height: 116px;}
    #sub_org .org .org2 > span,
    #sub_org .org_b .org2 > span{width: 207px; font-size: 20px; line-height: 86px; }
    #sub_org .org .org1::after {height: 230px;}
    #sub_org .org .org2 span {top: 200px;}
    #sub_org .org .org3 span {top: 380px;font-size: 16px;}
    #sub_org .org .org3::after {top: 330px;}
}

@media all and (max-width: 568px){
    #sub_org .org ul li ul li ul {margin-top: 320px;}
    #sub_org .org .org3 span {position: static; width: 230px; transform: translateX(0); margin: 15px auto 0;}
    #sub_org .org .org3::after {display: none;}
	#sub_org .org_b {height: 680px;}
}


/* 찾아오시는길 */
#sub_location .root_daum_roughmap .wrap_map {margin-bottom: 50px;}
#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.jpg); 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 .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_default .chbox_info {width: 100%; height: auto; min-height: 320px; background: #3475b0 url(/images/ch/sub/bg_tour.jpg) no-repeat; background-position: center;  padding: 35px 0; box-sizing: border-box; color: #fff; font-size: 18px; margin-bottom: 94px; }
#sub_default .chbox_info .inner {margin-bottom: 0;}

#sub_default .chbox_info .inner::after {display: block; content: ''; clear: both;}
#sub_default .chbox_info .chbox_pic {float: left; width: 400px;}
#sub_default .chbox_info .chbox_pic img {filter: drop-shadow(14px 14px 0px rgba(0,0,0,0.4)); width: 100%; height: 100%;}
#sub_default .chbox_info .chbox_txt {padding: 52px 0 0 460px; line-height: 40px; word-break: keep-all;}
#sub_default .chbox_info .chbox_txt .chbox_call {position: relative; width: 274px; height: 59px; line-height: 59px; background: rgba(0,0,0,0.4); padding-left: 28px; margin-top: 10px; box-sizing: border-box; text-align: center;}
#sub_default .chbox_info .chbox_txt .chbox_call::after {position: absolute; content: ''; width: 20px; height: 20px; top: 19px; left: 20px; background: url(/images/ch/sub/ico_call.png) no-repeat;}

#sub_default .ch_txt h3 {position: relative; font-size: 22px; color: #3170c8; padding-left: 40px; font-weight: 600; font-family: 'NanumSquare';}
#sub_default .ch_txt h3::after {position: absolute; content: ''; width: 30px; height: 30px; top: -3px; left: 0; background: url(/images/ch/sub/ico_list.png) no-repeat; background-size: contain; }
#sub_default .ch_txt ul {margin: 15px 0 45px 40px;}
#sub_default .ch_txt ul li {position: relative; padding-left: 13px; line-height: 30px;}
#sub_default .ch_txt ul li::after {position: absolute; content: ''; width: 4px; height: 4px; top: 12px; left: 0; background: #3170c8; transform: rotate(-45deg);}
#sub_default .ch_txt ul li.list_none {padding: 0 0 5px 0;}
#sub_default .ch_txt ul li.list_none::after {display: none;}
#sub_default .ch_txt ul li .depth1 {margin: 0;}
#sub_default .ch_txt ul li .depth1 li::after {display: none;}


#sub_work .chbox_info .chbox_txt {padding: 97px 0 0 460px;}


@media all and (max-width: 1374px){
    #sub_work .chbox_info .chbox_txt {padding: 70px 0 0 460px;}
}

@media all and (max-width: 1200px){
    #sub_default .chbox_info {font-size: 17px;}

}

@media all and (max-width: 1080px){
    #sub_default .chbox_info .chbox_pic {width: 40%;}
    #sub_default .chbox_info .chbox_txt {padding: 20px 0 0 44.85%;}
}

@media all and (max-width: 836px){
    #sub_default .chbox_info {margin-bottom: 70px;}
    #sub_default .chbox_info .chbox_pic {float: none; width: 260px; margin: 0 auto 30px;}
    #sub_default .chbox_info .chbox_txt {padding: 0 5px; font-size: 16px; line-height: 26px;}
    #sub_default .chbox_info .chbox_txt .chbox_call {width: 240px; height: 45px; line-height: 45px; font-size: 15px;}
    #sub_default .chbox_info .chbox_txt .chbox_call::after {top: 13px;}
    
    
    #sub_default .ch_txt h3 {font-size: 20px; padding-left: 34px;}
    #sub_default .ch_txt h3::after {width: 26px; height: 26px; top: -1px; }
    #sub_default .ch_txt ul li {font-size: 15px;}
    
}

@media all and (max-width: 568px){
    #sub_default .chbox_info .chbox_txt {font-size: 15px;}
    #sub_default .ch_txt ul {margin-left: 5px;}
}

@media all and (max-width: 380px){
    #sub_default .chbox_info {margin-bottom: 50px;}
    #sub_default .chbox_info .chbox_txt .chbox_call,
    #sub_default .chbox_info .chbox_txt,
    #sub_default .ch_txt ul li {font-size: 14px;}
    
    #sub_default .ch_txt h3 {font-size: 18px; padding-left: 30px;}
    #sub_default .ch_txt h3::after {width: 23px; height: 23px;}
    #sub_default .chbox_info .chbox_txt .chbox_call {width: 225px;}
    #sub_default .chbox_info .chbox_txt .chbox_call::after {top: 12px;}
    
}

/* 어린이 청소년 모의의회 안내 */
#sub_meet .chbox_info .chbox_txt { padding-top: 30px; }
#sub_meet .ref_proc {width: 100%;height: auto;min-height: 200px;background: #f5f5f5;padding: 50px 78px;box-sizing: border-box;margin: 15px 0 45px 40px;}
#sub_meet .ref_proc > ul {display:flex;flex-wrap: wrap;justify-content: space-between;margin: 15px 0 45px;}
#sub_meet .ref_proc > ul > li {position: relative;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;line-height: 1.2;width: 20%;height: 52px;color: #fff;background: #3f79bb url(/images/kr/intro/bg_proc.png) no-repeat;border-radius: 10px;border-top-right-radius: 20px;text-align: center;padding: 0 10px;box-sizing: border-box;}
#sub_meet .ref_proc > ul > li:not(:first-child):after {width: 17px;height: 27px;top: 50%;left: -20%;transform: translateY(-50%);background: url(/images/kr/intro/ico_arrow2.png) no-repeat;}
#sub_meet .ref_proc .box { border: 1px dashed #ccc; padding: 30px; }
#sub_meet .ref_proc .box h1 { text-align: center; }
#sub_meet .ref_proc .box ul { margin: 0; }

@media all and (max-width:1024px){
	#sub_meet .ref_proc {padding:40px 50px;margin-left: 0;}
}
@media all and (max-width:768px){
	#sub_meet .ref_proc > ul {display:block;}
	#sub_meet .ref_proc > ul > li {width:100%; margin:0 0 30px;}
	#sub_meet .ref_proc > ul > li:not(:first-child):after {top: -28px;left: 50%;transform: translateX(-50%) rotate(90deg);}
}


/* 의회용어사전 */
#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_site {position: relative; width: 100%; height: auto; min-height: 620px; border: 10px solid #e6effa; border-top-left-radius: 50px; border-bottom-right-radius: 50px; padding: 100px 0 117px 104px; box-sizing: border-box;}
#sub_site .box_site::after {display: block; content: ''; clear: both;}
#sub_site .box_site::before {position: absolute; content: ''; bottom: -7px; right: -15px; width: 182px; height: 262px; background: url(/images/ch/sub/bg_site.png) no-repeat; z-index: -1;}
#sub_site .box_site ul{float: left; width: 33.33%;}

#sub_site .box_site ul li {position: relative; padding: 0 0 40px 12px;}
#sub_site .box_site ul li::after {position: absolute; content: ''; width: 4px; height: 4px; top: 6px; left: 0; background: #3170c8; transform: rotate(-45deg);}

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

@media all and (max-width: 748px){
    #sub_site .box_site ul{float: none; width: 100%;}
    #sub_site .box_site ul li {font-size: 15px; padding: 0 0 25px 12px}
}
@media all and (max-width: 380px){
    #sub_site .box_site::before {filter: opacity(0.5);}
}