@charset "utf-8";

#main_content {padding:50px 0 80px; background:#f5f5f5;}
#main_content .inner {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
#main_content .wrap {width: 450px;}
#main_content .wrap:nth-child(n + 2) {overflow: hidden; border-radius: 5px; background: #fff; box-shadow: 0 0 15px 0 rgba(0,0,0,.05);}
h4 {font-family: 'gmarket'; font-size: 30px; font-weight: 900; color: #fff;}
#main_content .wrap.donggu:nth-child(n + 2), #main_content .wrap.junggu:nth-child(n + 2){height:750px;}


/* 비주얼 */
.visual {padding: 40px 35px; height: 560px; color: #fff; text-align: center; background: url(/images/assembly/main/bg_main.jpg)no-repeat; background-size: cover; border-radius: 5px; box-shadow: 0 0 15px 0 rgba(0,0,0,.05); box-sizing: border-box;}
.visual .slogan .top {position: relative; padding: 0 0 25px; margin: 0 0 25px; font-family: 'gmarket'; font-size: 30px; font-weight: 800; text-shadow: 0 0 5px rgba(0,0,0,.3);}
.visual .slogan .top::after {content: ''; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 350px; height: 1px; background: rgba(255,255,255,.3);}
.visual .slogan .top strong {font-family: 'JSArirangPPURI'; font-size: 45px; color: #f5ffd9;}
.visual .slogan .top strong:last-child {color: #ffdde4;}
.visual .slogan .top p {font-size: 36px; font-weight: 900; color: #fff;}
.visual .slogan .bottom {font-weight: 500; text-shadow: 0 0 5px rgba(0,0,0,.3);}
.visual.donggu{ background: url(/images/assembly/main/bg_main_donggu.jpg)no-repeat;}
.visual.junggu{ background: url(/images/assembly/main/bg_main_junggu.jpg)no-repeat;}
.visual.donggu .slogan .bottom, .visual.donggu .slogan .bottom{ display:none;} 



/* 의안 */
.search {margin: 30px 0 0; padding: 24px 30px 30px; height: 160px; background: #2a9b94 url(/images/assembly/main/bg_search.jpg)no-repeat; background-size: cover; border-radius: 5px; box-sizing: border-box;}
.search .tit_wrap {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 0 20px;}
.search .tit_wrap .btn_wrap {display: flex; flex-wrap: wrap;}
.search .tit_wrap .btn_wrap a {display: block; width: 90px; height: 35px; line-height: 35px; font-size: 16px; font-weight: 600; color: #fff; text-align: center; text-decoration: none; background: rgba(0,0,0,.2); border-radius: 5px;}
.search .tit_wrap .btn_wrap a:last-child {margin: 0 0 0 10px;}
.search fieldset {position: relative;}
.search fieldset::after {content: ''; display: block; position: absolute; top: 20px; left: 85px; width: 1px; height: 10px; background: #ccc;}
.search fieldset label {z-index: 1; position: absolute; top: 16px; left: 20px; font-size: 14px; font-weight: 500; color: #555;}
.search fieldset input {position: relative; padding: 0 54px 0 101px; width: 100%; height: 50px; font-size: 14px; border: none; border-radius: 5px; box-sizing: border-box;}
.search fieldset button {position: absolute; top: 0; right: 0; width: 55px; height: 50px; font-size: 0; text-indent: -9999px; background: url(/images/assembly/main/ico_sch.png)no-repeat center;} 

/* 전자회의록 */
.assem_wrap > .tit_wrap {padding: 0 29px; height: 90px; background: #272a42 url(/images/assembly/main/bg_late.png)no-repeat right bottom; box-sizing: border-box;}
.assem_wrap > .tit_wrap h4 {line-height: 96px;}
.assem_wrap .comm_btn {display: flex;flex-wrap: wrap;justify-content: space-around;padding: 20px 18px;}
.assem_wrap .comm_btn li {width: calc(33.33% - 3px);margin: 0 0 3px;height: 50px;}
.assem_wrap .comm_btn li a {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-weight: 400; color: #6e8fb3; text-align: center; text-decoration: none; background: #f2f5f9; border: 1px solid #b3c4d8; border-radius: 5px; box-sizing: border-box;}
.assem_wrap .comm_btn li:nth-child(3) a,
.assem_wrap .comm_btn li:nth-child(4) a {font-size: 14px;}
.assem_wrap .comm_btn li.on a {font-weight: 700; color: #fff; background: #2c6bb3; border-color: #2c6bb3;}

.assem_wrap .comm_list {padding: 0 30px;}
.assem_wrap .comm_list h4 {font-size: 24px; color: #222;}
.assem_wrap .comm_list .tit_wrap {display: flex; justify-content: space-between; padding: 0 0 10px; margin: 0 0 15px; border-bottom: 1px solid #ddd;}
.assem_wrap .comm_list .tit_wrap h4 {position: relative;}
.assem_wrap .comm_list .tit_wrap h4::after {content: '';display: block;position: absolute;bottom: -11px;left: 0;width: 100%;height: 3px;background: #2a9b94;}

.assem_wrap .comm_list .more {position: relative;display: flex;align-items: center;font-size: 14px;font-weight: 400;color: #777;text-decoration: none;}
.assem_wrap .comm_list .more::before {content: '';display: inline-block;margin: 0 4px 0 0;width: 15px;height: 15px;background: url(/images/assembly/main/ico_more.png)no-repeat;}

.assem_wrap .list ul > li {position: relative; padding: 0 0 0 15px; margin: 0 0 15px;}
.assem_wrap .list ul > li:last-child {margin: 0;}
.assem_wrap .list ul > li::before {content: '';display: block;position: absolute;top: 13px;left: 0;width: 5px;height: 5px;background: #999;border-radius: 1.5px;}
.assem_wrap .list ul > li.none::before {top: 9px;}
.assem_wrap .list ul > li a {display: flex; flex-wrap: wrap; align-items: center; font-weight: 500; color: #222331; text-decoration: none;}
.assem_wrap .list ul > li .hs,
.assem_wrap .list ul > li .cha {display: block; width: 80px; height: 30px; line-height: 30px; text-align: center; background: #ddefee; border-radius: 15px;}
.assem_wrap .list ul > li .cha {margin: 0 0 0 5px; width: 60px; background: #eee;}
.assem_wrap .list ul > li .tit {overflow: hidden;display: block;padding: 0 2px 0 9px;width: calc(100% - 260px);font-weight: 500;text-overflow: ellipsis;white-space: nowrap;box-sizing: border-box;}
 .assem_wrap.junggu .list ul > li .tit{width: calc(100% - 170px);}
 
 .assem_wrap .late_list .list {display: none;}
.assem_wrap .late_list .list.on {display: block;}

.late_list {height: 264px;}
.assem_wrap .comm_list.late_list2 {position: relative;height: 250px;}
.assem_wrap .comm_list.late_list2 .tit_wrap {position: relative;display: flex;justify-content: flex-start;padding: 0 0 10px;margin: 0 0 15px;border-bottom: 1px solid #ddd;}
.assem_wrap .comm_list.late_list2 .tit_wrap::after {content: '';display: block;position: absolute;top: 4px;left: 110px;width: 1px;height: 15px;background: #cdcdcd;}
.assem_wrap .comm_list.late_list2 .tit_wrap h4 {position: relative;cursor: pointer;}
.assem_wrap .comm_list.late_list2 .tit_wrap li h4::after {display: none;}
.assem_wrap .comm_list.late_list2 .tit_wrap li.on h4::after {content: '';display: block;position: absolute;bottom: -11px;left: 0;width: 100%;height: 3px;background: #2a9b94;}
.assem_wrap .comm_list.late_list2 .tit_wrap > li:last-child {padding: 0 0 0 40px;}
.assem_wrap .comm_list.late_list2 .tit_wrap .more {display: none;position: absolute;top: 0;right: 0;}
.assem_wrap .comm_list.late_list2 .tit_wrap li.on .more {display: flex;}
.assem_wrap .comm_list.late_list2 .list {position: absolute;top: 53px;left: 0;display: none;width: 100%;}
.assem_wrap .comm_list.late_list2 .tit_wrap li.on .list {display: block;}

.live_wrap > .tit_wrap {background: #e2586f url(/images/assembly/main/bg_live.jpg)no-repeat right bottom;}
.live_wrap .comm_btn li a {color: #ca6d6d; background: #faf3f3; border-color: #e4b9b9;}
.live_wrap .comm_btn li.on a {background: #e25858; border-color: #e25858;}

@media all and (max-width:1440px){
    #main_content .wrap:first-child {width: 100%;}
    #main_content .wrap:nth-child(2),
    #main_content .wrap:nth-child(3) {width: 49%;}

    .visual {height: auto; background-position: center;}

    .search {margin-bottom: 50px;}
}
@media all and (max-width:1024px){
    .assem_wrap .comm_list h4 {font-size: 20px;}
    .assem_wrap .comm_list.late_list2 .tit_wrap::after {top: 3px;left: 97px;}

    .late_list2 .tit_wrap::after {top: 3px;left: 86px;}
    .late_list2 .tit_wrap > li:last-child {padding: 0 0 0 20px;}

    .assem_wrap .list ul > li .hs, 
    .assem_wrap .list ul > li .cha {width: 70px; font-size: 15px;}
    .assem_wrap .list ul > li .cha {width: 55px;}
    .assem_wrap .list ul > li .tit {width: calc(100% - 235px);}
    .assem_wrap .list ul > li .date {font-size: 15px;}
}
@media all and (max-width:768px){
    #main_content .wrap:nth-child(2), 
    #main_content .wrap:nth-child(3) {width: 100%;}
    #main_content .wrap:nth-child(3) {margin: 35px 0 0;}

    .assem_wrap .comm_list h4 {font-size: 18px}
    .assem_wrap .comm_list.late_list2 .tit_wrap::after {top: 1px;left: 90px;}

    .late_list2 .tit_wrap::after {top: 1px; left: 73px;}
    .late_list2 .tit_wrap > li:last-child {padding: 0 0 0 10px;}
    
    .assem_wrap .list ul > li .hs,
    .assem_wrap .list ul > li .cha {width: auto;padding: 0 5px;font-size: 13px;border-radius: 10px;}
    .assem_wrap .list ul > li .cha {width: 45px;}
    .assem_wrap .list ul > li .tit {width: calc(100% - 230px);}
}
@media all and (max-width:568px){
    #main_content {padding: 35px 0 50px;}
    h4 {font-size: 26px;}

    .visual {padding: 30px 10px 50px;}
    .visual .slogan .top {font-size: 26px;}
    .visual .slogan .top strong {font-size: 40px;}
    .visual .slogan .top p {font-size: 32px;}

    .search {margin-bottom: 35px;}
    .search .tit_wrap .btn_wrap a {width: 80px; font-size: 14px;}
    .search .tit_wrap .btn_wrap a:last-child {margin: 0 0 0 5px;}

    .assem_wrap .list ul > li .tit {width: calc(100% - 120px);}
    .assem_wrap .list ul > li .date {display: none;}
}
@media all and (max-width:380px){
    .visual .slogan .top {padding: 0 0 20px;margin: 0 0 20px;font-size: 22px;}
    .visual .slogan .top::after {width: 90%;}
    .visual .slogan .top strong {font-size: 32px;}
    .visual .slogan .top p {margin: 5px 0 0;font-size: 28px;}
    
    .assem_wrap > .tit_wrap {padding: 0 20px;}
    .assem_wrap .comm_btn {padding: 20px 10px;}
    .assem_wrap .comm_list {padding: 0 15px}
}