kcscDev/egovframe-template-simple-r.../src/css/layout.css

222 lines
12 KiB
CSS

@charset "utf-8";
body {min-width: 1400px;}
/*.header {position: relative;}*/
.header::after {content: ""; display: block; left: 0; bottom: 0; width: 100%; height: 1px; background: #dedede;}
.header > .inner {max-width: 1400px; height: 210px; margin: 0 auto; } /* position: relative; padding: 0 50px; */
.header h1 {display: inline-block; margin-top: 32px;}
.header h1 a,
.header h1 img {display: block;}
.header .logo .m {display: none;}
.header .logo .logotop {display: flex; width: 220px; justify-content: flex-end;}
.header .user_info {position: absolute; right: 50px; top: 10px; line-height: 30px;}
.header .person {width: 30px; height: 30px; margin-right:20px; cursor: pointer;}
.header .person::before {content: ""; display: inline-block; width: 30px; height: 30px; background: url(css/images/ico_user.png) no-repeat center bottom; background-size: 30px 30px; }
.header .user_info .btn {margin-left: 14px; padding: 0 20px; border-radius: 15px; color: #fff; font-size: 14px; line-height: 30px; background: #169bd5;}
/*.header .gnb {position: absolute; left: 430px; top: 50px; width: 920px;}*/
/*.header .gnb ul {font-size: 0; text-align: center;}*/
/*.header .gnb ul::after {content: ""; display: block; clear: both;}*/
/*.header .gnb ul li {float: left;}*/
/*.header .gnb ul li + li {margin-left: 98px;}*/
/*.header .gnb ul li a {color: #666; font-size: 20px; font-weight: 700; letter-spacing: -0.25px;}*/
/*.header .gnb ul li a.cur {color: #222;}*/
/*.header .right_a {position: absolute; right: 50px; top: 65px;}*/
.header .right_a .btn {width: 30px; height: 30px; font-size: 0; background: url(css/images/ico_allmenu.png) no-repeat center; background-size: 22px 18px;}
.header .right_a .btn.active {background: url(css/images/ico_allmenu_close.png) no-repeat center; background-size: 22px 18px;}
.header .right_a .btn.mobile {display: none;}
.header .search {height:96px; padding:24px 0px 10px; margin: 0 auto; }
.header .search .search_input {max-width: 734px; width: calc(100% - 40px); height:62px; margin: 0 auto; border: 2px solid #004994; border-radius: 20px; padding: 10px}
.header .search .search_input select {border: none;}
.header .search .search_input input {ime-mode:active; border: none;}
.header .search .topsearch {width: 40px; height: 40px; background: url(css/images/ico_search_b.png) no-repeat center center; background-size: 22px 22px; filter: brightness(1) sepia(1) saturate(3) hue-rotate(175deg);}
.header .topcode {position: relative; width: 100%; top: -8px;}
.header .topcode .topcode_c {max-width: 1020px; margin:0 auto; border: 1px solid #ccc; z-index: 100; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); background-color: #fff; padding: 0 20px; }
.header .topcode .topcode_n {max-width: 1020px; margin:0 auto; border: 1px solid #fff; z-index: 100; background-color: #fff; padding: 0 20px; }
.header .topcode .row {flex-wrap: wrap; padding: 8px 0; }
.header .topcode .topcodebnt {
min-width: 45px;
height: 40px;
line-height: 40px;
display: block;
background-color: #fff;
text-align: center;
border-radius: 20px;
color: #909090;
text-decoration: none;
/*margin: 5px;*/
padding: 0 12px 0 12px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
.header .topcode .topcodebnt:hover{
background-color: #8F8F8F;
color: #fff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
}
/* All menu */
.all_menu {transition: transform .2s ease-in-out, opacity .2s ease-in-out; transform-origin: top; z-index: 10; padding: 50px 20px;}
.all_menu.Mobile {display: none;}
.all_menu.WEB.closed {transform: scaleY(0); opacity: 0;}
.all_menu.WEB {position: absolute; right: calc((100% - 1400px) / 2); top: 70px; width: 340px; background: #fff; border-radius: 20px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); z-index: 200;}
/*.all_menu.WEB::after {content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #ddd;}*/
/*.all_menu.WEB .inner {width: 1400px; margin: 0 auto; } !* padding: 41px 50px 47px 50px; *!*/
/*.all_menu.WEB .inner::after {content: ""; display: block; clear: both;}*/
/*.all_menu.WEB .inner .col {float: left; width: 280px;}*/
/*.all_menu.WEB .inner .col:last-child {width: auto;}*/
.all_menu.WEB .inner h3 {color: #222; font-size: 20px; font-weight: 700; pointer-events: none;}
.all_menu.WEB .inner ul {display: flex; flex-wrap: wrap; padding: 16px 0 16px;}
.all_menu.WEB .inner ul li {padding: 0 15px 0 0;}
.all_menu.WEB .inner ul li a {color: #777; font-size: 12px;}
.all_menu.WEB .inner ul li a:hover {color: #333; border-bottom: 1px solid transparent; transition: border-color 0.3s; border-color: #36588B; }
/*.inner img {height: 35px !important;}*/
.user_info_m {display: none;}
.container {min-width: 1400px; min-height: calc(100vh - 400px); padding: 0; }
.c_wrap { margin: auto 0; } /* removed by lim width: 1400px; padding: 0 50px; */
.c_wrap .layout {display: table; width: 100%; table-layout: fixed; padding-bottom: 20px;} /* added by lim padding-bottom: 20px; */
/* sub navigation */
.c_wrap .layout .nav:not(.tabs) {display: table-cell; width: 220px; vertical-align: top;} /* changed by lim width: 260px; */
.c_wrap .layout .nav .inner {border: 1px solid #dde2e5; border-radius: 10px;}
.nav_title{padding: 35px 30px 26px 20px;} /* changed by lim border-bottom: 4px solid #dde2e5; */
.c_wrap .layout .nav h2 {color: #222; font-size: 24px; font-weight: 700;}
.c_wrap .layout .nav ul {padding: 0 10px; } /* changed by lim padding: 26px 30px 27px 30px;*/
.c_wrap .layout .nav ul li + li {margin-top: 18px; } /* changed by lim margin-top: 27px; */
.c_wrap .layout .nav ul li a {display: block; position: relative; color: #666; font-size: 14px;} /* changed by lim font-size: 18px; */
.c_wrap .layout .nav ul li a:hover::after {content: ""; display: block; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 9px; height: 15px; background: url(css/images/ico_arrow_r_gray_9x15.png) no-repeat;}
.c_wrap .layout .nav ul li a.cur {color: #222; font-weight: 700;}
.c_wrap .layout .contents {display: table-cell; width: auto; vertical-align: top; padding-left: 30px;} /* changed by lim padding: 0 0 120px 70px; */
/* 센터소개 */
.c_wrap .layout .nav1:not(.tabs) {display: table-cell; width: 220px; vertical-align: top;}
.c_wrap .layout .nav1 h2 {color: #222; font-size: 24px; font-weight: 700;}
.c_wrap .layout .nav1 .menu10 {mnargin: 0; border: 1px solid #dde2e5;}
/*.c_wrap .layout .nav1 li {margin: 10px;}*/
.c_wrap .layout .nav1 .menu10 li + li {border-top: 1px solid #dde2e5; }
.c_wrap .layout .nav1 ul li a {display: block; position: relative; color: #666; font-size: 14px; padding: 10px;} /* changed by lim font-size: 18px; */
/*.c_wrap .layout .nav1 ul li a:hover {}*/
.c_wrap .layout .nav1 ul li a:hover::after {content: ""; display: block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 9px; height: 15px; background: url(css/images/ico_arrow_r_gray_9x15.png) no-repeat; }
.c_wrap .layout .nav1 ul li a.cur {color: #fff; font-weight: 700; background-color: #004994; }
/* location */
.location {height: 30px; padding-top: 23px; text-align: right;} /* chagned by lim height: 70px; padding-top: 43px; */
.location ul, .location ul li {display: inline-block; vertical-align: top;}
.location ul li {position: relative; color: #666; font-size: 14px;}
.location ul li + li::before {content: ""; display: inline-block; width: 4px; height: 7px; margin: 0 9px 0 3px; line-height: 18px; background: url(css/images/ico_arrow_r_gray_4x7.png) no-repeat; vertical-align: 2px;}
.location ul li:last-child {text-decoration: underline;}
.location ul li a {display: inline-block; color: #666; font-size: 14px;}
.location ul li a:hover {color: #222; text-decoration: underline;}
.location ul li a.home {position: relative; padding-left: 19px;}
.location ul li a.home::before {content: ""; display: block; position: absolute; left: 0; top: 3px; width: 14px; height: 13px; background: url(css/images/ico_home.png) no-repeat;}
.footer {position: relative; background-color: #2c394b; }
.footer .upper {width: 100%; background-color: #384556; font-size: 12px; border-bottom: 1px solid #56626F;}
.footer .upper .up {width: 1400px; margin: 0 auto; padding: 20px 0; }
.footer .upper .up .left {width: 100px; color: #D9DADB; font-weight: 700; line-height: 30px;}
.footer .upper .up .right {color: #96A1AE; line-height: 30px;}
.footer .upper .up .right a {color: #96A1AE; margin-right: 15px;}
.footer .upper .open {width: 100px; text-align: right; }
.footer .upper button {color: #fff; border: 1px solid #A2A2A2; padding: 3px 30px;}
.footer::before {content: ""; display: block; width: 100%; height: 1px; background: #ccc;}
.footer .inner {width: 1400px; margin: 0 auto; }
.footer .inner::after {content: ""; display: block; clear: both;}
.footer h1 {float: left; width: 220px; padding-top: 20px;}
.footer h1 .m {display: none;}
.footer .info {padding: 20px 0; color: #A4A4A4; font-size: 12px; }
.footer .info .copy {padding-top: 5px;}
.footer .info .m_show {display: none;}
.footer .right_col {width: 220px; text-align: right;}
.footer .right_col a {color: #A4A4A4; font-size: 12px;}
/*.footer .right_col {position: absolute; right: 0; top: 73px; font-size: 0;}*/
/*.footer .right_col a {display: inline-block; margin-right: 60px; vertical-align: top;}*/
/*.footer .right_col a .m {display: none;}*/
/*.footer .right_col img {display: block;}*/
/* popup */
.wrap_pop {display: none;}
.wrap_pop::before {content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);}
.pop_header {position: relative; height: 94px; padding: 42px 100px 0 40px; border-bottom: 1px solid #dde2e5; border-radius: 19px 19px 0 0; background: #fff;}
.pop_header h1 {color: #222; font-size: 24px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.pop_header .close {position: absolute; right: 40px; top: 40px; width: 30px; height: 30px; font-size: 0; background: url(css/images/ico_close_black44.png) no-repeat; background-size: contain;}
.pop_container {padding: 40px; border-radius: 0 0 19px 19px; background: #fff;}
/* Space */
.contents .tit_3:first-child {margin-top: -2px;}
.condition + .board_list {margin-top: 10px;} /* changed by lim margin-top: 50px; */
.condition + .calendar_list {margin-top: 10px;} /* changed by lim margin-top: 50px; */
.condition + .logs_list {margin-top: 10px;} /* added by lim margin-top: 10px; */
.condition + .tit_5 {margin-top: 42px;}
.top_tit + .tit_2 {margin-top: 13px; margin-bottom: 10px;} /* added by lim margin-bottom: 10px; */
/*.tit_2 + .condition {margin-top: 26px;}*/ /* removed by lim .tit_2 + .condition {margin-top: 26px;} */
.tit_2 + .board_view {margin-top: 43px;}
.tit_2 + .board_view2 {margin-top: 43px;}
.tit_2 + .board_view3 {margin-top: 43px;}
.tit_3 + .txt_1 {margin-top: 33px;}
.tit_4 + .tit_5 {margin-top: 35px;}
.tit_5 + .msg_1 {margin-top: 24px;}
.tit_5 + .pds_des {margin-top: 14px;}
.txt_1 + .tit_4 {margin-top: 64px;}
.board_attach + .board_btn_area {margin-top: 30px;}
.board_view2 dl + .board_btn_area {margin-top: 30px;}
.board_view3 + .tit_5 {margin-top: 22px;}
.board_bot + .board_btn_area {margin-top: 30px;}
.pds_des + .board_btn_area {margin-top: 30px;}
.board_btn_area + .bottom_navi {margin-top: 30px;}
.msg_1 + .tit_5 {margin-top: 42px;}
.qna_a + .replay {margin-top: 30px;}
.btn-22498E {
--bs-btn-color: #fff;
--bs-btn-bg: #22498E;
--bs-btn-border-color: #22498E;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #2B5AB3;
--bs-btn-hover-border-color: #2B5AB3;
--bs-btn-focus-shadow-rgb: 130, 138, 145;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #2B5AB3;
--bs-btn-active-border-color: #51585e;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #1B376D;
--bs-btn-disabled-bg: #2a4702;
--bs-btn-disabled-border-color: #1B376D;
}
.btn-outline-22498E {
--bs-btn-color: #22498E;
--bs-btn-border-color: #2B5AB3;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #22498E;
--bs-btn-hover-border-color: #2B5AB3;
--bs-btn-focus-shadow-rgb: 108, 117, 125;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #2B5AB3;
--bs-btn-active-border-color: #2B5AB3;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #2B5AB3;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #2B5AB3;
--bs-gradient: none;
}