@charset "utf-8";
/* reset */
*,
:before,
:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
font-size: 62.5%;
scroll-behavior: smooth;
}
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
form,
fieldset,
legend,
input,
textarea,
button,
select {
margin: 0;
padding: 0;
}
body,
input,
textarea,
select,
button,
table {
color: #2d2d2d;
font-family: "Pretendard", "Noto Sans KR", "YiSunShinDotum", "SBAggro"; font-size: 1.4rem; line-height: 1.42857;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: keep-all;
line-break: normal;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
line-height: inherit;
}
img,
fieldset {
border: 0;
}
img {
max-width: 100%;
vertical-align: top;
}
ul,
ol {
list-style: none;
}
i,
em,
address {
font-style: normal;
}
a {
color: inherit;
background-color: transparent;
-webkit-text-decoration-skip: objects;
text-decoration: none;
}
a:active,
a:focus {
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
legend {
*width: 0;
}
iframe {
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
input::-webkit-input-placeholder {
line-height: normal !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="submit"],
input[type="tel"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="number"]::-webkit-inner-spin-button {
display: none;
}
input[type="checkbox"] {
box-shadow: none;
}
input[type="search"] {
-webkit-appearance: textfield;
}
button,
input {
border-radius: 0;
}
button {
padding: 0;
border: 0;
background-color: transparent;
cursor: pointer;
}
[onclick],
label,
select {
cursor: pointer;
}
select {
background: #fff;
}
select::-ms-expand {
background: transparent;
border: 0;
}
textarea {
overflow: auto;
}
[hidden] {
display: none;
}
caption {
overflow: hidden;
width: 0.1rem;
height: 0.1rem;
margin-top: -0.1rem;
}
.blind,
legend {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: -9999em;
}
/* common */
.skip a {
display: block;
position: absolute;
left: 0;
top: -9999em;
z-index: 9999;
overflow: hidden;
width: 100%;
background-color: #333;
color: #fff;
font-size: 1.2em;
font-weight: bold;
text-align: center;
text-decoration: none;
line-height: 2.2;
}
.skip a:hover,
.skip a:active,
.skip a:focus {
top: 0;
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
/**
* 공통 레이아웃
*/
/* 메인 header */
#main_header {
position: fixed;
top: 0;
padding: 3.5rem 0;
left: 0;
right: 0;
z-index: 100;
}
#main_header.active {
top: 0;
background-color: #556980;
animation: dropHeader 0.3s ease-in-out;
}
@keyframes dropHeader {
0% {
top: -5rem;
}
100% {
top: 0;
}
}
#main_header .container {
width: 100%;
padding: 0 12.4rem;
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
#main_header .logo-box {
width: 34.5rem;
}
#main_header .menu-box {
top: 2.5rem;
right: 30rem;
}
#main_header .menu-box .menu-title {
color: #fff;
}
#main_header .header-info {
font-weight: 500;
padding: 0;
}
#main_header .header-info a {
color: #b7ad93;
font-family: "SBAggro";
font-weight: 300;
}
#main_header .header-info a + a::after {
top: -0.5rem;
}
@media (max-width: 1400px) {
#main_header .container {
padding: 0 4rem;
}
#main_header .menu-box {
right: 20rem;
}
}
@media (max-width: 1024px) {
#main_header .container {
padding: 0 4rem;
align-items: center;
}
#main_header .menu-box {
display: none;
}
#main_header .header-info {
top: 50%;
right: 11.2rem;
transform: translateY(-50%);
}
}
@media (max-width: 768px) {
#main_header {
top: 1.5rem;
}
#main_header .container {
padding: 0 2rem;
}
#main_header .logo-box {
width: 15rem;
}
#main_header .header-info {
right: 5.6rem;
padding-bottom: 0.4rem;
}
}
/* // 메인 header */
/* 서브 header */
#header {
position: relative;
}
#header .container {
position: static;
}
.header-info {
text-align: right;
padding: 2rem 0;
color: #727c89;
font-weight: 400;
}
.header-info a {
display: inline-block;
position: relative;
font-weight: 400;
letter-spacing: -0.04em;
color: #727c89;
}
.header-info a + a {
margin-left: 0.8rem;
padding-left: 0.8rem;
}
.header-info a + a::after {
content: "";
width: 0.1rem;
height: 70%;
background-color: #989fa8;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto 0;
}
.header-wrap {
display: flex;
align-items: flex-end;
}
.header-wrap .logo-box {
position: relative;
width: 26.5rem;
z-index: 1;
}
.header-wrap .logo-box a {
display: block;
height: 100%;
}
.header-wrap .logo-box .logo-mobile {
display: none;
}
.header-wrap .search-separation {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.header-wrap .search-separation form {
width: 100%;
}
.header-wrap .search-box {
position: relative;
display: inline-flex;
justify-content: center;
align-items: flex-end;
}
.header-wrap .search-input {
width: 39rem;
height: 4.5rem;
border: none;
padding: 0 1rem 0 0;
font-size: 1.8rem;
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1.4;
color: #8e8e8e;
border-bottom: 0.4rem solid #cddcf1;
outline: none;
}
.header-wrap .search-btn {
width: 4.6rem;
font-size: 2.3rem;
color: #257ff6;
padding-bottom: 0.8rem;
border-bottom: 0.4rem solid #257ff6;
text-align: center;
}
.header-wrap .search-btn i {
margin-right: 0.8rem;
}
.header-wrap .search-detail {
width: 7rem;
color: #16b4e6;
border-bottom: 0.4rem solid #16b4e6;
font-size: 1.6rem;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
padding-bottom: 1.2rem;
margin-left: -0.4rem;
position: relative;
text-align: right;
vertical-align: bottom;
}
.header-wrap .search-detail::after {
content: "";
width: 0.1rem;
height: 60%;
background-color: #d0d1d2;
position: absolute;
top: 0;
left: 0;
}
.menu-box {
position: absolute;
top: 7.4rem;
right: 0;
z-index: 10;
display: flex;
align-items: center;
cursor: pointer;
}
#header .menu-box {
position: relative;
top: 1.2rem;
right: auto;
margin-left: auto;
}
.menu-box .item {
position: relative;
font-family: "SBAggro";
padding: 0 2.3rem;
}
.menu-box .item:last-child {
padding-right: 0;
}
.menu-box .drop-btn.on .menu-title::after {
display: block;
}
.menu-box .menu-title {
font-size: 3rem;
font-weight: 400;
font-family: "SBAggro";
letter-spacing: -0.04em;
color: #262626;
position: relative;
}
.menu-box .menu-title::after {
content: "";
width: 1.3rem;
height: 1.3rem;
border-radius: 50%;
background-color: #ff154c;
position: absolute;
top: -2.4rem;
left: 0;
right: 0;
margin: 0 auto;
display: none;
}
.menu-box .drop-box {
width: 11.8rem;
border: 0.2rem solid #3173d8;
position: absolute;
top: 4rem;
left: -1.2rem;
display: none;
z-index: 100;
}
.menu-box .drop-btn.on + .drop-box {
display: block;
}
.menu-box .drop-box .depth1 {
text-align: center;
border-bottom: 0.1rem solid #eaeaea;
position: relative;
background-color: #fff;
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.14);
}
.menu-box .drop-box .depth1:last-child {
border-bottom: 0;
}
.menu-box .drop-box .depth1 a {
display: block;
color: #2d2d2d;
font-size: 1.6rem;
font-weight: 600;
line-height: 2.5;
letter-spacing: -0.03em;
}
.menu-box .drop-box .depth1:hover > a {
background-color: #3173d8;
color: #fff;
}
.menu-box .drop-box .depth1:hover .depth2 {
display: block;
}
.menu-box .drop-box .depth2 {
width: 11.8rem;
position: absolute;
top: -0.2rem;
right: -11.8rem;
border: 0.2rem solid #9fc3fa;
background-color: #edf4ff;
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.14);
display: none;
}
.menu-box .drop-box .depth2 li {
border-bottom: 0.2rem solid #d2e0f6;
}
.menu-box .drop-box .depth2 li:last-child {
border-bottom: none;
}
.menu-box .drop-box .depth2 a {
display: block;
font-weight: 300;
}
.menu-box .drop-box .depth2 a:hover {
background-color: #3173d8;
color: #fff;
font-weight: 600;
}
.sub-all-menu {
display: none;
}
@media (max-width: 1400px) {
.header-wrap .search-box {
margin-left: 7%;
}
.header-wrap .search-input {
width: auto;
}
}
@media (max-width: 1024px) {
#header > .container {
margin-bottom: 13.4rem;
padding: 0;
background-color: #1c6bcc;
}
#header .header-wrap {
padding: 2.8rem 4rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-wrap .logo-box {
position: static;
}
.header-wrap .logo-box .logo-pc {
display: none;
}
.header-wrap .logo-box .logo-mobile {
display: block;
}
.header-wrap .search-separation {
display: flex;
align-items: center;
justify-content: center;
height: 13.4rem;
position: absolute;
bottom: -13.4rem;
left: 0;
right: 0;
padding: 0 4rem;
border-bottom: 0.1rem solid #0d48be;
background-color: #fff;
}
.header-wrap .search-box {
width: 100%;
margin-left: 0;
padding: 0 3rem;
background-color: #337fdd;
border-radius: 3.7rem;
align-items: center;
}
.header-wrap .search-input {
background-color: #337fdd;
border-bottom: none;
flex: 1 1 auto;
min-width: 0;
color: #fff;
height: 7.4rem;
}
.header-wrap .search-btn-wrap {
background-color: #337fdd;
display: flex;
align-items: center;
}
.header-wrap .search-btn {
width: auto;
color: #fff;
border-bottom: none;
padding: 0;
}
.header-wrap .search-btn i {
margin: 0;
}
.header-wrap .search-detail {
width: auto;
color: #fff;
border-bottom: none;
padding-bottom: 0;
margin-left: 1.3rem;
padding-left: 1.3rem;
}
.header-wrap .search-detail::after {
height: 100%;
}
.header-wrap .search-input::-webkit-input-placeholder {
color: #fff;
}
.header-info {
position: absolute;
top: 4rem;
right: 13.7rem;
padding: 0;
}
.header-info a {
color: #fff;
}
.menu-box {
display: none;
}
.sub-all-menu {
display: inline-block;
width: 5.4rem;
height: 4rem;
background: url("../images/common/all_menu_btn.png") no-repeat 50% 50% / 100% auto;
}
}
@media (max-width: 768px) {
#header > .container {
margin-bottom: 6.7rem;
}
.header-wrap .logo-box {
width: 15rem;
}
.sub-all-menu {
width: 2.3rem;
}
.header-info {
top: 2.3rem;
right: 5.6rem;
}
.header-info a {
font-size: 1rem;
}
#header .header-wrap {
padding: 1.4rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-wrap .search-separation {
height: 6.7rem;
bottom: -6.7rem;
padding: 0 2rem;
}
.header-wrap .search-box {
padding: 0 1.5rem;
}
.header-wrap .search-input {
height: 3.7rem;
font-size: 1.3rem;
}
.header-wrap .search-btn {
font-size: 1.5rem;
}
.header-wrap .search-detail {
font-size: 1.3rem;
margin-left: 0.8rem;
padding-left: 0.8rem;
}
.search-separation input::-webkit-search-cancel-button {
width: 1.5rem;
height: 1.5rem;
background-size: contain;
padding-left: 1rem;
}
}
/* 메인 footer */
#main_footer {
position: absolute;
bottom: 2.5rem;
left: 0;
right: 0;
z-index: 10;
}
#main_footer .container {
width: 100%;
padding: 0 12.4rem;
display: flex;
align-items: center;
}
#main_footer .logo-box {
opacity: 0.28;
}
#main_footer .footer-info {
margin-left: 5.4rem;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: -0.05em;
line-height: 1.68;
color: #bcc6d4;
opacity: 0.28;
}
#main_footer .footer-info span {
margin-right: 2.3rem;
}
#main_footer .footer-info p {
font-weight: 700;
}
#main_footer .footer-select-wrap .footer-select {
background-color: #919293;
color: #323e4e;
opacity: 0.28;
background-image: url(../images/common/footer_angle_down.png);
}
@media (max-width: 1400px) {
#main_footer .container {
padding: 0 4rem;
}
}
@media (max-width: 1024px) {
#main_footer .logo-box {
opacity: 1;
}
#main_footer .container {
padding: 0 4rem;
flex-direction: column;
align-items: flex-start;
}
#main_footer .footer-info {
margin-top: 10rem;
margin-left: 0;
font-size: 1.8rem;
opacity: 1;
}
#main_footer .footer-select-wrap .footer-select {
width: 100%;
opacity: 1;
background-color: #294666;
color: #fff;
/*background-image: url(../images/common/footer_angle_down_mobail.png);*/
background-image: url(../images/common/footer_angle_down.png);
}
}
@media (max-width: 768px) {
#main_footer {
bottom: 1.5rem;
}
#main_footer .container {
padding: 0 2rem;
}
#main_footer .logo-box {
width: 14rem;
}
#main_footer .footer-info {
font-size: 1.2rem;
margin-top: 6rem;
}
#main_footer .footer-info span + span {
display: block;
margin-left: 0;
}
#main_footer .footer-select-wrap .footer-select {
font-size: 1rem;
height: 3rem;
border-radius: 0.2rem;
background-size: 1.4rem auto;
}
}
/* 서브 검색 */
.sub-search-detail {
border-bottom: 0.1rem solid #0d48be;
text-align: center;
padding: 2rem 0;
position: absolute;
top: 12.5rem;
left: 0;
right: 0;
background-color: #fff;
z-index: 1;
display: none;
}
.sub-search-detail.on {
display: block;
z-index: 10;
}
.sub-search-detail .search-drop {
position: relative;
}
.sub-search-detail .search-drop .drop-title {
font-family: "SBAggro";
font-size: 3rem;
font-weight: 400;
letter-spacing: -0.05em;
}
.drop-list .drop-item {
display: flex;
align-items: center;
padding: 2rem 0;
border-bottom: 0.1rem solid #f5f5f5;
}
.drop-list .drop-item:last-child {
border-bottom: none;
}
.drop-list .drop-item .title {
width: 8rem;
font-size: 1.8rem;
font-weight: 500;
letter-spacing: -0.05em;
text-align: left;
flex: 0 0 auto;
}
.drop-list .drop-item .check-box {
text-align: left;
flex: 1 1 auto;
min-width: 0;
}
.check-box .check-item {
display: inline-block;
margin-right: 1.5rem;
}
.reset-btn {
position: absolute;
top: 0.6rem;
right: 0;
color: #0d48be;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.05em;
text-underline-offset: 0.3rem;
text-decoration-color: #437bd8;
text-decoration: underline;
text-underline-position: under;
}
.search-close-wrap {
display: none;
position: absolute;
bottom: -4.1rem;
right: 3rem;
}
.sub-search-detail.on .search-close-wrap {
display: block;
}
.search-close-btn {
width: 0;
height: 0;
border-top: 3.7rem solid #0d48be;
border-left: 5.2rem solid transparent;
border-right: 5.2rem solid transparent;
border-radius: 0.4rem;
position: relative;
}
.search-close-btn::after {
content: "\f00d";
font-family: "Font Awesome 5 Pro";
font-size: 2rem;
font-weight: 700;
color: #fff;
position: absolute;
top: -3.2rem;
left: -0.6rem;
line-height: 1;
}
@media (max-width: 1024px) {
.sub-search-detail {
padding: 0;
top: 23.1rem;
}
.sub-search-detail > .container {
padding: 0;
}
.sub-search-detail .search-drop {
padding: 2rem;
max-height: 35rem;
overflow-y: auto;
}
/* .sub-search-detail .search-drop .drop-title {
font-size: 4rem;
} */
.drop-list .drop-item {
flex-direction: column;
align-items: flex-start;
}
.drop-list .drop-item .title {
width: 100%;
text-align: center;
/* font-size: 2.8rem; */
}
.drop-list .drop-item .check-box {
margin-top: 2rem;
margin-left: 0;
}
.search-close-wrap {
left: 0;
right: 0;
margin: 0 auto;
}
.reset-btn {
/* font-size: 2.6rem; */
right: 1rem;
top: 4.5rem;
}
}
@media (max-width: 768px) {
.sub-search-detail {
top: 13.5rem;
}
.sub-search-detail .search-drop {
padding: 2.2rem 2rem;
}
.sub-search-detail .search-drop .drop-title {
font-size: 2rem;
}
.drop-list .drop-item:first-child .check-box {
margin-top: 0;
}
.drop-list .drop-item {
padding: 2rem 0;
}
.drop-list .drop-item + .drop-item {
margin-top: 0;
}
.drop-list .drop-item .title {
font-size: 1.4rem;
}
.reset-btn {
font-size: 1.3rem;
top: 2.4rem;
}
}
/* footer */
#footer {
background-color: #003b7a;
padding: 5rem 0;
}
#footer .container {
display: flex;
align-items: center;
}
.footer-info {
margin-left: 4.4rem;
}
.footer-info li {
font-family: "Pretendard";
font-size: 1.6rem;
font-weight: 400;
letter-spacing: -0.05em;
line-height: 1.5;
color: #5a7da8;
}
.footer-info li + li {
margin-top: 0.4rem;
}
.footer-info li:last-child {
font-weight: 700;
}
.footer-select-wrap {
margin-left: auto;
}
.footer-select-wrap .footer-select {
width: 28rem;
height: 4.5rem;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.5;
border-radius: 0.3rem;
font-family: "Pretendard";
color: #51769d;
background-color: #a3b8cf;
appearance: none;
background-image: url(../images/common/sub_footer_angle_down.png);
background-repeat: no-repeat;
background-position: right 1.5rem center;
padding: 0 2rem;
outline: none;
border: none;
}
@media (max-width: 1024px) {
#footer {
padding: 4rem 0;
}
#footer .container {
align-items: flex-start;
flex-direction: column;
}
.footer-info {
margin-top: 13rem;
margin-left: 0;
}
.footer-select-wrap {
position: absolute;
top: 8.5rem;
left: 0;
right: 0;
width: 100%;
padding: 0 4rem;
opacity: 1;
}
.footer-select-wrap .footer-select {
width: 100%;
}
}
@media (max-width: 768px) {
#footer {
padding: 2rem 0;
}
#footer .logo-box {
width: 14rem;
}
.footer-info {
margin-top: 6rem;
}
.footer-select-wrap {
padding: 0 2rem;
top: 4.2rem;
}
.footer-select-wrap .footer-select {
height: 3rem;
border-radius: 0.2rem;
font-size: 1.2rem;
padding: 0 1rem;
}
.footer-info li {
font-size: 1.2rem;
}
}
/* container */
.container {
position: relative;
width: 120rem;
margin: 0 auto;
}
@media (max-width: 1400px) {
.container {
width: auto;
margin: 0;
padding: 0 5rem;
}
}
@media (max-width: 1400px) {
.container {
padding: 0 4rem;
}
}
@media (max-width: 768px) {
.container {
padding: 0 2rem;
}
}
/* 왼쪽메뉴 */
#snb {
}
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
/* 컨텐츠 영역 */
#contents {
padding: 2rem 0 12rem;
}
@media (max-width: 1024px) {
#contents {
padding: 0 0 7rem;
}
}
@media (max-width: 768px) {
#contents {
padding: 0 0 6rem;
}
}
/**
* 전체메뉴
*/
.open-all-menu {
overflow: hidden;
height: 100%;
}
#all_menu {
display: none;
text-align: left;
}
#all_menu .all-menu-wrap {
position: fixed;
top: 0;
right: 0;
z-index: 55100 !important;
width: 100%;
height: 100%;
background: #fff;
transition: all 0.3s ease;
transform: translateX(100%);
overflow-y: auto;
}
#all_menu .all-menu-top {
padding: 2.6rem 4rem;
background-color: #1c6bcc;
}
#all_menu .all-menu-body {
display: flex;
height: auto;
flex-direction: column;
justify-content: space-between;
}
#all_menu .all-menu-tab {
display: flex;
align-items: center;
border-bottom: 0.1rem solid #1c6bcc;
}
#all_menu .all-menu-tab .tab-list {
width: 50%;
text-align: center;
}
#all_menu .all-menu-tab .tab-list.active a {
color: #1c6bcc;
background-color: #edf4ff;
}
#all_menu .all-menu-tab .tab-list:last-child {
border-left: 0.1rem solid #1c6bcc;
}
#all_menu .all-menu-tab .tab-list a {
display: block;
padding: 2.6rem 0;
font-family: "SBAggro";
font-size: 3.2rem;
font-weight: 400;
letter-spacing: -0.04em;
line-height: 1;
}
#all_menu .tab-content {
display: none;
}
#all_menu .tab-content.on {
display: block;
}
#all_menu .tab-content .all-depth1 {
border-bottom: 0.1rem solid #d9dce0;
}
#all_menu .tab-content .all-depth1 .depth1-title {
display: block;
width: 100%;
padding: 2.4rem 4rem;
font-family: "SBAggro";
font-size: 2.6rem;
font-weight: 400;
letter-spacing: -0.03em;
text-align: left;
position: relative;
}
#all_menu .tab-content .all-depth1 .depth-btn::after {
content: "\f067";
font-size: 3rem;
font-weight: 400;
line-height: 1;
font-family: "Font Awesome 5 Pro";
color: #3173d8;
position: absolute;
top: 2.5rem;
right: 4rem;
}
#all_menu .tab-content .all-depth1 .depth-btn.on ~ .all-depth2 {
display: block;
}
#all_menu .tab-content .all-depth2 {
display: none;
border-top: 0.1rem solid #1c6bcc;
}
#all_menu .tab-content .all-depth2 li {
border-bottom: 0.1rem solid #d9dce0;
}
#all_menu .tab-content .all-depth2 li:last-child {
border-bottom: none;
}
#all_menu .tab-content .all-depth2 li a {
display: block;
font-family: "SBAggro";
font-size: 2.4rem;
font-weight: 300;
letter-spacing: -0.03em;
padding: 1.4rem 4rem;
background-color: #edf4ff;
}
#all_menu .tab-content .all-depth2 li a:hover {
background-color: #3173d8;
color: #fff;
}
#all_menu .btn-close {
position: absolute;
top: 3rem;
right: 4rem;
width: 3.3rem;
height: 3.3rem;
background: url(../images/common/sub_main_all_menu_close.png) no-repeat 50% 50% / cover;
}
#all_menu .all-menu-bg {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5500;
background: rgba(0, 0, 0, 0.65);
}
#all_menu.on {
display: block;
z-index: 1001;
}
#all_menu.on .all-menu-wrap {
transform: translateX(0);
-ms-transform: translateX(0);
}
#all_menu.on .all-menu-bg {
display: block;
}
@media (max-width: 768px) {
#all_menu .all-menu-top {
padding: 1.4rem 2rem;
}
#all_menu .all-menu-top .logo-box {
width: 15rem;
}
#all_menu .btn-close {
width: 1.6rem;
height: 1.6rem;
top: 1.7rem;
right: 2rem;
}
#all_menu .all-menu-tab .tab-list a {
font-size: 1.6rem;
padding: 1.5rem 0;
}
#all_menu .tab-content .all-depth1 .depth1-title {
font-size: 1.3rem;
padding: 1.2rem 2rem;
}
#all_menu .tab-content .all-depth1 .depth-btn::after {
font-size: 1.6rem;
top: 50%;
transform: translateY(-50%);
right: 2rem;
}
#all_menu .tab-content .all-depth2 li a {
font-size: 1.3rem;
padding: 1.2rem 2rem;
}
}
/**
* 공통 요소
*/
/* 타이틀 */
h3.contents-title {
position: relative;
color: #222;
font-size: 8rem;
font-weight: 400;
text-align: center;
margin-bottom: 8rem;
letter-spacing: -0.05em;
}
h3.contents-title strong {
font-weight: 600;
}
h4.contents-title {
position: relative;
margin-bottom: 1.5rem;
color: #222;
font-size: 2.6rem;
font-weight: 600;
padding-left: 3.3rem;
}
h4.contents-title::after {
content: "\f192";
position: absolute;
top: 0.8rem;
left: 0;
color: #18569e;
font-size: 2.2rem;
font-weight: bold;
font-family: "Font Awesome 5 Pro";
line-height: 1;
}
@media (max-width: 1024px) {
h3.contents-title {
margin-bottom: 5rem;
font-size: 6rem;
}
}
@media (max-width: 768px) {
h3.contents-title {
font-size: 3rem;
margin-bottom: 2.5rem;
}
h4.contents-title {
font-size: 1.5rem;
padding-left: 2rem;
margin-bottom: 0.8rem;
}
h4.contents-title::after {
font-size: 1.3rem;
top: 0.4rem;
}
}
/* 텍스트 */
.contents-desc {
color: #222;
font-size: 2.8rem;
text-align: center;
letter-spacing: -0.04em;
word-break: keep-all;
line-height: 1.5;
padding: 0 2rem;
}
.contents-desc strong {
color: #326dce;
font-weight: 600;
}
.text-desc {
display: inline-block;
color: #1582d6; /* font-size:1.8rem; */
word-break: keep-all;
overflow-wrap: break-word;
vertical-align: middle;
letter-spacing: -0.04em;
}
.text-warning {
display: inline-block;
color: #f30a31; /* font-size:1.8rem; */
font-weight: 500;
word-break: keep-all;
overflow-wrap: break-word;
vertical-align: middle;
letter-spacing: -0.04em;
}
.text-blue {
color: #057ae7;
font-weight: 500;
}
.text-green {
color: #2ebb88;
font-weight: 500;
}
/* 링크 */
.text-link {
font-size: inherit;
word-break: keep-all;
overflow-wrap: break-word;
text-decoration: underline;
text-underline-position: under;
text-decoration-color: #7b7b7b;
}
.text-link.point {
color: #006fd6;
text-decoration-color: #006fd6;
}
@media (max-width: 1024px) {
.contents-desc {
font-size: 2.6rem;
}
}
@media (max-width: 768px) {
.contents-desc {
font-size: 1.3rem;
}
}
/**
* 리스트
*/
/* 점이 있는 리스트 */
.dotted-list {
color: #222;
font-size: 2rem;
line-height: 1.8;
letter-spacing: -0.04em;
}
.dotted-list li {
position: relative;
padding-left: 3.5rem;
word-break: keep-all;
overflow-wrap: break-word;
}
.dotted-list li::before {
content: "";
position: absolute;
top: 1.4rem;
left: 0.8rem;
width: 0.8rem;
height: 0.8rem;
background: #222;
border-radius: 50%;
}
@media (max-width: 1024px) {
.dotted-list {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
.dotted-list {
font-size: 1.2rem;
}
.dotted-list li {
padding-left: 1.8rem;
}
.dotted-list li::before {
width: 0.4rem;
height: 0.4rem;
top: 0.8rem;
left: 0.5rem;
}
}
/**
* 버튼
*/
.btn {
display: inline-block;
border-radius: 0.4rem;
color: #fff;
font-weight: 500;
line-height: 1;
text-align: center;
cursor: pointer; /*white-space:nowrap;*/
vertical-align: middle;
}
/*** 버튼 - 채워진 형태 ***/
.btn.btn-background {
min-width: 20.9rem;
height: 4.6rem;
padding: 0 2rem;
border: none;
background: #666;
color: #fff !important;
font-size: 1.8rem;
font-weight: 500;
line-height: 4.6rem;
border-radius: 0.7rem;
text-align: left;
position: relative;
box-shadow: 3px 3px 3px 0px rgba(10, 14, 17, 0.16);
}
.btn.btn-background i {
margin-right: 0.6rem;
}
.btn.btn-background:last-child {
margin-left: 1.8rem;
}
/* 크기 */
.btn.btn-background.btn-regular {
min-width: 0;
/* min-width: 12.2rem; */
height: 3.6rem;
line-height: 3.6rem;
border-radius: 0.5rem;
font-size: 1.6rem;
font-weight: 600;
letter-spacing: -0.025em;
padding: 0 2.5rem;
}
.btn.btn-background.btn-medium {
min-width: 10.5rem;
height: 4.1rem;
line-height: 4.4rem;
border-radius: 0.3rem;
font-size: 1.4rem;
font-weight: 400;
letter-spacing: -0.075em;
}
.btn.btn-background.btn-small {
min-width: 5.4rem;
height: 3.3rem;
line-height: 3.3rem;
border-radius: 0.7rem;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.01em;
}
/* 색상*/
.btn.btn-background.search {
background: linear-gradient(to bottom, #4f9ee8 0%, #056ac8 100%);
}
/* 찾기 */
.btn.btn-background.write {
background: linear-gradient(to top, #204bca 0%, #2e6cd6 100%);
}
/* 글쓰기 */
.btn.btn-background.apply {
background: linear-gradient(to top, #204aca 0%, #2e6cd6 100%);
}
/* 신청하가 */
.btn.btn-background.confirm {
background: linear-gradient(to top, #0081db 0%, #1999f3 100%);
}
/* 확인 */
.btn.btn-background.correction {
background: linear-gradient(to top, #10a1c2 0%, #18b6d0 100%);
}
/* 수정 */
.btn.btn-background.delete {
background: linear-gradient(to top, #0c89e8 0%, #11a3ed 100%);
}
/* 삭제 */
.btn.btn-background.list {
background: linear-gradient(to top, #0c89e8 0%, #11a3ed 100%);
}
/* 목록 */
.btn.btn-background.cancel {
background: linear-gradient(to top, #777777 0%, #959595 100%);
}
/* 삭제 */
.btn.btn-background.send {
background: linear-gradient(to top, #0c89e8 0%, #11a3ed 100%);
}
/* 등록 */
.btn.btn-background.more {
background-color: #3670d1;
text-align: center;
}
/* 더보기 */
/* 버튼 아이콘 */
.btn.btn-background.list::after {
content: "\f03a";
font-family: "Font Awesome 5 Pro";
font-size: 1.8rem;
font-weight: 500;
position: absolute;
right: 1.6rem;
}
.btn.btn-background.cancel::after {
content: "\f00d";
font-family: "Font Awesome 5 Pro";
font-size: 1.8rem;
font-weight: 500;
position: absolute;
right: 1.6rem;
}
.btn.btn-background.apply::after {
content: "\f0e0";
font-family: "Font Awesome 5 Pro";
font-size: 1.8rem;
font-weight: 500;
position: absolute;
right: 1.6rem;
}
.btn.btn-background.send::after {
content: "\f044";
font-family: "Font Awesome 5 Pro";
font-size: 1.8rem;
font-weight: 500;
position: absolute;
right: 1.6rem;
}
/* 위치 */
.btn.btn-background.center {
text-align: center;
}
/*** 버튼 - 라인 형태 ***/
.btn.btn-border {
position: relative;
min-width: 18.5rem;
height: 5.6rem;
padding: 0 3rem;
border: 0.3rem solid #777;
background: #fff;
box-shadow: 0.4rem 0.4rem 0.7rem rgba(132, 132, 132, 0.16);
}
.btn.btn-border:after {
content: "";
position: absolute;
background: #777;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
height: 0;
transition: height 0.3s ease;
}
.btn.btn-border span {
position: relative;
z-index: 2;
color: #222;
font-size: 2rem;
line-height: 5rem;
}
.btn.btn-border:hover:after,
.btn.btn-border:focus:after {
height: 100%;
}
.btn.btn-border:hover span,
.btn.btn-border:focus span {
color: #fff;
}
/* 크기 */
.btn.btn-border.btn-small {
border-width: 0.2rem;
height: 4.8rem;
min-width: 12.8rem;
}
.btn.btn-border.btn-small span {
line-height: 4.4rem;
}
/* 색상 */
.btn.btn-border.confirm,
.btn.btn-border.list {
border-color: #18569e;
}
.btn.btn-border.confirm:after,
.btn.btn-border.list:after {
background: #18569e;
}
.btn.btn-border.update {
border-color: #4788f5;
}
.btn.btn-border.update:after {
background: #4788f5;
}
.btn.btn-border.cancel,
.btn.btn-border.delete {
border-color: #5f5f5f;
}
.btn.btn-border.cancel:after,
.btn.btn-border.delete:after {
background: #5f5f5f;
}
/* 버튼 로딩중 */
.btn.loading {
opacity: 0.75;
position: relative;
font-size: 0;
pointer-events: none;
}
.btn.loading i {
display: none;
}
.btn.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -1rem 0 0 -1rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 0.2rem solid transparent;
border-left-color: #fff;
border-top-color: #fff;
border-right-color: #fff;
animation: spin 1s infinite ease-in-out;
vertical-align: top;
}
@media (max-width: 1024px) {
/*** 버튼 - 채워진 형태 ***/
.btn.btn-background {
height: 4.2rem;
line-height: 4.2rem;
}
/* 크기 */
.btn.btn-background.btn-large {
height: 5.4rem;
line-height: 5.4rem;
}
}
@media (max-width: 768px) {
.btn {
border-radius: 0.2rem;
}
/*** 버튼 - 채워진 형태 ***/
.btn.btn-background {
min-width: 13rem;
height: 3.1rem;
line-height: 3.1rem;
font-size: 1.2rem;
padding: 0 1.2rem;
border-radius: 0.4rem;
}
/* 크기 */
.btn.btn-background.btn-large {
min-width: 8rem;
height: 3.6rem;
line-height: 3.6rem;
font-size: 1.2rem;
padding: 0 1.2rem;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(64, 71, 81, 0.3);
}
.btn.btn-background.btn-small {
min-width: 3rem;
font-size: 1.2rem;
height: 2.3rem;
line-height: 2.3rem;
border-radius: 0.4rem;
}
.btn.btn-background.apply {
min-width: 12rem;
}
/*** 버튼 - 라인 형태 ***/
.btn.btn-border {
min-width: 12rem;
height: 3.6rem;
border-width: 0.2rem;
box-shadow: 0.2rem 0.2rem 0.3rem rgba(132, 132, 132, 0.16);
}
.btn.btn-border span {
font-size: 1.3rem;
line-height: 3.2rem;
}
/* 크기 */
.btn.btn-border.btn-small {
border-width: 0.1rem;
height: 3rem;
min-width: 7.5rem;
}
.btn.btn-border.btn-small span {
line-height: 2.8rem;
font-size: 1.2rem;
}
}
/**
* 버튼 그룹
*/
.btn-group {
display: table;
width: 100%;
table-layout: fixed;
margin-top: 5rem;
}
.btn-group.top {
margin-top: 0;
margin-bottom: 2rem;
}
.btn-group [class$="group"] {
display: table-cell;
vertical-align: middle;
}
.btn-group .left-group {
text-align: left;
}
.btn-group .right-group {
text-align: right;
}
.btn-group .center-group {
text-align: center;
}
.btn-group .left-group a,
.btn-group .left-group .btn {
margin-right: 1.6rem;
}
.btn-group .right-group a,
.btn-group .right-group .btn {
margin-left: 1.6rem;
}
@media (max-width: 1024px) {
.btn-group {
margin-top: 4rem;
}
}
@media (max-width: 768px) {
.btn-group {
margin-top: 3rem;
}
.btn-group .left-group a,
.btn-group .left-group .btn {
margin-right: 0.8rem;
}
.btn-group .right-group a,
.btn-group .right-group .btn {
margin-left: 0.8rem;
}
.btn-group .center-group a,
.btn-group .center-group .btn {
margin: 0 0.4rem;
}
}
/**
* 폼요소
*/
/* placeholder */
::-webkit-input-placeholder {
color: #818181;
}
:-moz-placeholder {
color: #818181;
}
::-moz-placeholder {
color: #818181;
}
:-ms-input-placeholder {
color: #818181;
}
/* form 공통 */
input.inp-file {
display: none;
}
input.inp-file {
max-width: 27rem;
width: 100%;
height: 3.6rem;
}
input.inp-text.full,
input.inp-file.full,
select.sel.full {
width: 100%;
}
/* input[type=text, password, number] */
input.inp-text {
padding: 0 1.2rem;
}
input.inp-text[readonly] {
color: #a7a7a7;
cursor: default;
}
input.inp-text[numberOnly] {
text-align: right;
}
input.inp-text.datepicker {
cursor: pointer;
color: #515151;
background: #fff url("../../../images/onioncms/cmm/icon_calendar.gif") no-repeat right 1rem top 50%;
}
input.inp-text::-webkit-outer-spin-button,
input.inp-text::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Chrome, Safari, Edge, Opera */
input.inp-text {
-moz-appearance: textfield;
}
/* Firefox */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
-webkit-appearance: none;
width: 2rem;
height: 2rem;
padding-left: 2rem;
background: url(../images/common/times.png) center center no-repeat;
cursor: pointer;
}
@media (max-width: 768px) {
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
-webkit-appearance: none;
width: 1.5rem;
height: 1.5rem;
padding-left: 1rem;
background-size: contain;
}
}
/* label */
label.lbl,
label.rdo-lbl,
label.chk-lbl {
vertical-align: middle;
}
input.rdo + label.lbl,
input.chk + label.lbl {
margin-left: 0.4rem;
}
/* file 라벨 */
label.file-lbl {
display: inline-block;
height: 3.6rem;
line-height: 3.6rem;
border-radius: 0.5rem;
color: #fff;
padding: 0 1.6rem;
background-color: #a5aaae;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
}
/* textarea */
textarea.txtarea {
resize: vertical;
width: 100%;
padding: 1rem 1.5rem;
}
/* select box */
select.sel {
padding: 0 1.6rem;
}
/* disabled/readonly color */
input.inp-text[disabled],
select.sel[disabled],
textarea.txtarea[disabled] {
background: #efefef !important;
}
/* focus color */
input.inp-text:focus,
input.inp-file:focus,
textarea.txtarea:focus,
select.sel:focus {
border: 0.2rem solid #bfc9d7;
outline: none;
box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1);
}
input.inp-text[readonly]:focus,
input.inp-text[disabled]:focus,
select.sel[readonly]:focus,
select.sel[disabled]:focus {
border-color: #a7a7a7;
outline: none;
}
/* 폼 요소 너비 조절 */
div.form-control {
width: 100%;
max-width: 100%;
}
* + div.form-control:not(.horizonal) {
margin-top: 1rem;
}
div.form-control input.inp-text,
div.form-control input.inp-file,
div.form-control select.sel {
width: 100%;
}
span.form-control {
display: inline-block;
max-width: 100%;
margin: 0.2rem 1.5rem 0.2rem 0;
vertical-align: middle;
}
span.form-control:last-child {
margin-right: 0;
}
.lbl + span.form-control {
margin-left: 0.5rem;
}
span.form-control .text + input.inp-text,
span.form-control .text + select.sel,
span.form-control .lbl + input.inp-text,
span.form-control .lbl + select.sel {
margin-left: 0.4rem;
}
span.form-control input.inp-text + .text,
span.form-control select.sel + .text {
margin-left: 0.3rem;
}
span.form-control .bul {
margin: 0 0.5rem;
}
span.form-control .btn + .btn {
margin-left: 0.3rem;
}
/* span.form-control .inp-text + .btn{margin-left:.6rem;} */
span.form-control .text {
vertical-align: middle;
line-height: 2.8rem;
font-weight: 500;
}
span.form-control .text + .text {
margin-left: 2rem;
}
span.form-control .text strong {
/* font-size:1.4rem; */
font-weight: 500;
margin-right: 0.3rem;
}
.bul {
font-size: 1.4rem;
font-weight: 500;
margin: 0 0.2rem;
vertical-align: middle;
}
.form-control.horizonal {
display: inline-block;
width: auto;
margin: 0.2rem 0.5rem 0.2rem 0;
vertical-align: middle;
}
.form-control.no-radius * {
border-radius: 0 !important;
}
.form-control.control-center {
margin-left: auto;
margin-right: auto;
}
/* 버튼이 있는 폼요소 */
div.form-control.with-btn {
display: flex;
}
div.form-control.with-btn .btn {
flex: 0 0 auto;
margin-left: 0.8rem;
}
div.form-control.with-btn-search {
position: relative;
padding-right: 11.5rem;
}
div.form-control.with-btn-search .btn {
position: absolute;
top: 0;
right: 0;
width: 11rem;
padding-left: 0;
padding-right: 0;
}
div.form-control .btn {
margin-right: 0.3rem;
}
/* 날짜 아이콘이 있는 폼요소 */
.form-control.date {
position: relative;
width: 14.7rem;
padding-right: 2.7rem;
}
/* .form-control.date .inp-text{text-align:center;} */
.form-control.date img {
position: absolute;
top: 50%;
right: 0;
margin-top: -1.2rem;
cursor: pointer;
}
/* 이메일 */
div.form-control.email {
*zoom: 1;
}
div.form-control.email::after {
content: "";
display: block;
clear: both;
}
div.form-control.email .inp-text {
float: left;
width: 32%;
}
div.form-control.email .email-at {
float: left;
width: 4%;
height: 100%;
margin-top: 1rem;
text-align: center;
font-family: "Gmarket Sans", sans-serif;
}
div.form-control.email select {
float: left;
width: 31%;
margin-left: 1%;
}
div.form-control.email.no-select .inp-text {
width: 47%;
}
div.form-control.email.no-select .email-at {
width: 6%;
}
/* 전화번호 */
div.form-control.phone {
*zoom: 1;
}
div.form-control.phone::after {
content: "";
display: block;
clear: both;
}
div.form-control.phone select {
float: left;
width: 30%;
}
div.form-control.phone .phone-bar {
float: left;
width: 5%;
height: 100%;
margin-top: 0.6rem;
font-size: 2rem;
text-align: center;
line-height: 1;
}
div.form-control.phone .inp-text {
float: left;
width: 30%;
}
/* 생년월일 */
div.form-control.birthday {
display: flex;
}
div.form-control.birthday.horizonal {
display: inline-flex;
}
div.form-control.birthday .sel + .sel {
margin-left: 1rem;
}
/** form-control 크기 **/
.form-control.number {
width: 7.5rem;
}
.form-control.xsmall {
width: 12rem;
}
.form-control.small {
width: 24rem;
}
.form-control.medium {
width: 36rem;
}
.form-control.large {
width: 48rem;
}
.form-control.xlarge {
width: 60rem;
}
/* 라벨이 있는 폼요소 */
.form-control.with-label {
position: relative;
padding-left: 6rem;
}
.form-control.with-label .lbl {
position: absolute;
left: 0;
top: 50%;
width: 6rem;
color: #3f3f3f;
font-size: 1.4rem;
font-weight: 500;
transform: translateY(-50%);
}
.form-control.with-label .rdo + .lbl,
.form-control.with-label .chk + .lbl {
position: static;
width: auto;
font-weight: 400;
}
/* 라벨이 길 경우 */
.form-group.label .form-control {
position: relative;
padding-left: 10rem;
}
.form-group.label .form-control .lbl {
position: absolute;
left: 0;
top: 50%;
width: 10rem;
color: #3f3f3f;
font-size: 1.4rem;
font-weight: 500;
transform: translateY(-50%);
}
/* form 여백 */
* + .form-row {
margin-top: 1rem;
}
@media (max-width: 1024px) {
input.inp-text,
input.inp-file,
select.sel,
textarea.txtarea {
font-size: 1.4rem;
}
}
@media (max-width: 768px) {
input.inp-text,
input.inp-file,
select.sel,
textarea.txtarea {
font-size: 1.2rem;
border-radius: 0.3rem;
}
input.inp-file {
max-width: 24rem;
height: 3.1rem;
}
label.file-lbl {
height: 3rem;
line-height: 3rem;
border-radius: 0.3rem;
color: #fff;
padding: 0 0.8rem;
background-color: #a5aaae;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.025em;
}
input.inp-text {
padding: 0 0.8rem;
}
textarea.txtarea {
padding: 0.6rem 0.8rem;
}
select.sel {
padding: 0 0.6rem;
}
div.form-control:not(.horizonal) + div.form-control:not(.horizonal) {
margin-top: 0.5rem;
}
div.form-control.with-btn .btn {
margin-left: 0.4rem;
}
div.form-control.email .email-at {
margin-top: 0.8rem;
}
* + .form-row {
margin-top: 0.5rem;
}
}
/**
* 테이블
*/
table {
width: 100%; /* table-layout:fixed; */
}
table.text-left th,
table.text-left td {
text-align: left;
}
table.text-center th,
table.text-center td {
text-align: center;
}
table th.text-left,
table td.text-left {
text-align: left !important;
}
table td.text-left {
padding-left: 1.5rem;
}
table th.text-right,
table td.text-right {
text-align: right !important;
}
table td.text-right {
padding-right: 1.5rem;
}
/* 기본 테이블 */
.table-basic {
margin-top: 0.6rem;
}
.table-basic th,
.table-basic td {
height: 3.7rem;
color: #222;
font-size: 1.6rem;
border: 0.1rem solid #dedede;
text-align: center;
}
.table-basic tbody td {
height: 4rem;
}
.table-basic .text-left {
text-align: left;
}
.table-basic th {
background: #f1f2f4;
font-weight: 600;
}
.table-basic th:first-of-type,
.table-basic td:first-of-type {
border-left: 0;
}
.table-basic th:last-of-type,
.table-basic td:last-of-type {
border-right: 0;
}
.table-basic .text-left,
.table-basic .text-right {
padding-left: 2rem;
padding-right: 2rem;
}
.table-basic .text-left {
text-align: left;
}
.table-basic .text-right {
text-align: right;
}
@media (max-width: 768px) {
.table-basic {
border-top-width: 0.2rem;
}
.table-basic th,
.table-basic td {
font-size: 1.2rem;
height: 3.4rem;
}
.table-basic .text-left,
.table-basic .text-right {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
/* 검색결과가 없을 경우 */
.nodata {
margin: 0;
width: 100%;
padding: 7rem 0;
font-size: 1.8rem;
font-weight: 500;
/* border-top:.2rem solid #141414;border-bottom:.1rem solid #dcdee2;*/
text-align: center;
}
@media (max-width: 768px) {
.nodata {
padding: 4rem 0;
font-size: 1.2rem;
}
}
/* 검색영역 */
.search-area {
position: relative;
margin-bottom: 2rem;
min-height: 2.8rem;
}
.search-area .total {
float: left;
margin-top: 3.8rem;
color: #242424;
font-size: 1.5rem;
font-weight: 500;
}
.search-area .total strong {
color: #f34b4b;
}
.search-area .total .bar,
.search-area .total .number {
font-size: 1.3rem;
font-weight: normal;
}
.search-area .search-wrap {
float: right;
position: relative;
border: 0.1rem solid #dfdfdf;
}
.search-area .search-wrap select.sel {
width: 14rem;
height: 5.4rem;
margin-right: 0;
border: 0;
font-size: 1.5rem;
}
.search-area .search-wrap input.inp-text {
width: 24rem;
height: 5.4rem;
border: 0;
font-size: 1.5rem;
}
.search-area .search-wrap .btn.search {
width: 5.4rem;
height: 5.4rem;
font-size: 0;
}
.search-area .search-wrap .btn.search i {
color: #18569e;
font-size: 2.2rem;
}
.search-area.with-button .search-wrap {
margin-right: 16.6rem;
}
.search-area.with-button .search-wrap .btn.write {
position: absolute;
bottom: 0;
right: -16.6rem;
height: 5.6rem;
font-size: 2rem;
line-height: 5.6rem;
padding: 0 3rem;
}
@media (max-width: 1024px) {
.search-area .total {
margin-top: 3rem;
}
.search-area .search-wrap select.sel,
.search-area .search-wrap input.inp-text,
.search-area .search-wrap .btn.search {
height: 5.2rem;
}
.search-area .search-wrap input.inp-text {
width: 20rem;
}
.search-area .search-wrap .btn.search {
width: 5.2rem;
}
.search-area.with-button .search-wrap .btn.write {
height: 5.4rem;
line-height: 5.4rem;
}
}
@media (max-width: 88rem) {
.search-area.with-button .total,
.search-area.with-button .search-wrap {
float: none;
}
.search-area.with-button .total {
margin: 0 0 1rem;
}
.search-area.with-button .search-wrap input.inp-text {
width: calc(100% - 20.2rem);
}
}
@media (max-width: 768px) {
.search-area {
margin-bottom: 1rem;
}
.search-area .total,
.search-area .search-wrap {
float: none;
}
.search-area .total {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.2rem;
}
.search-area .total .bar,
.search-area .total .number {
font-size: 1.1rem;
}
.search-area .search-wrap {
border: 0;
position: relative;
display: block;
}
.search-area .search-wrap select.sel,
.search-area .search-wrap input.inp-text,
.search-area .search-wrap .btn.search {
height: 3.6rem;
}
.search-area .search-wrap select.sel,
.search-area .search-wrap input.inp-text {
width: 100%;
font-size: 1.2rem;
padding: 0 1rem;
border: 0.1rem solid #dfdfdf;
}
.search-area .search-wrap input.inp-text {
margin-top: 0.6rem;
padding-right: 4.2rem;
}
.search-area .search-wrap .btn.search {
width: 4.2rem;
position: absolute;
bottom: 0;
right: 0;
}
.search-area .search-wrap .btn.search i {
font-size: 1.9rem;
}
.search-area.with-button .search-wrap {
margin-right: 0;
}
.search-area.with-button .search-wrap .btn.write {
right: 0;
}
.search-area.with-button .search-wrap input.inp-text {
width: calc(100% - 8.9rem);
}
.search-area.with-button .search-wrap .btn.search {
right: 8.9rem;
}
.search-area.with-button .search-wrap .btn.write {
height: 3.6rem;
line-height: 3.6rem;
font-size: 1.2rem;
padding: 0 1.2rem;
}
}
/* 커스텀 select box */
.custom-select {
width: 12.5rem;
height: 3.6rem;
line-height: 3.6rem;
padding: 0 2.8rem 0 1.3rem;
border-radius: 0.5rem;
border: 0.1rem solid #ced2d5;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: -0.025em;
color: #5f5f5f;
appearance: none;
background: url(../images/common/select_box_caret_down.png) no-repeat right 1.5rem center;
}
.custom-input {
width: 21rem;
height: 3.6rem;
line-height: 3.6rem;
padding: 0 1.3rem;
border-radius: 0.5rem;
border: 0.1rem solid #ced2d5;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: -0.025em;
outline: none;
}
/* 커스텀 라디오 */
.radio-box {
display: flex;
align-items: center;
margin-left: 4.2rem;
}
input.custom-radio-box {
display: none;
}
.custom-radio-box + .custom-radio-text {
position: relative;
display: flex;
align-items: center;
margin-left: 2.6rem;
}
.custom-radio-text {
font-size: 1.6rem;
font-weight: 400;
letter-spacing: -0.03em;
}
.custom-radio-text:first-of-type {
margin-left: 0;
}
.custom-radio-box + .custom-radio-text::before {
content: "";
display: inline-block;
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 0.1rem solid #d2d7db;
background: #fff;
margin-right: 0.6rem;
}
.custom-radio-box:checked + .custom-radio-text::before {
border: 0.1rem solid #336cd7;
}
.custom-radio-box:checked + .custom-radio-text::after {
content: "";
width: 1rem;
height: 1rem;
position: absolute;
top: 50%;
left: 0.5rem;
transform: translateY(-50%);
right: auto;
background-color: #336cd7;
border-radius: 50%;
}
@media (max-width: 768px) {
.custom-radio-text {
font-size: 1.4rem;
}
.custom-radio-box + .custom-radio-text::before {
width: 1.6rem;
height: 1.6rem;
}
.custom-radio-box:checked + .custom-radio-text::after {
width: 0.8rem;
height: 0.8rem;
left: 0.4rem;
}
}
/* 커스텀 라디오 네모 박스 */
input.custom-radio-square {
display: none;
}
.custom-radio-square + .custom-radio-text {
display: block;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 500;
z-index: 1;
padding: 0.4rem 1rem;
}
.custom-radio-square + .custom-radio-text::before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
border-radius: 0.6rem;
border: 0.1rem solid #d2d7db;
background: #fff;
position: absolute;
z-index: -1;
}
.custom-radio-square:checked + .custom-radio-text {
color: #fff;
}
.custom-radio-square:checked + .custom-radio-text::before {
background-color: #1572e4;
border: none;
}
@media (max-width: 768px) {
.custom-radio-square + .custom-radio-text {
font-size: 1.4rem;
padding: 0.3rem 0.7rem;
}
.custom-radio-square + .custom-radio-text::before {
border-radius: 0.3rem;
}
}
/* 커스텀 textarea */
.custom-textarea {
width: 100%;
resize: none;
height: 18rem;
border-radius: 0.5rem;
border: 0.1rem solid #cdd1d4;
padding: 1.6rem 1.8rem;
}
/* 커스텀 checkbox */
.custom-checkbox {
display: none;
}
.custom-checkbox-label {
position: relative;
padding-left: 2.2rem;
font-size: 1.8rem;
letter-spacing: -0.05em;
font-weight: 300;
}
/* .custom-checkbox:checked + .custom-checkbox-label {
color: #0079d6;
font-weight: 400;
} */
.custom-checkbox:checked + .custom-checkbox-label::after {
content: "\f00c";
position: absolute;
top: 0.5rem;
left: 0.2rem;
line-height: 2rem;
font-size: 1.2rem;
font-family: "Font Awesome 5 Pro";
font-weight: 700;
/* color: #006bf0; */
}
.custom-checkbox-label::before {
content: "";
position: absolute;
top: 0.5rem;
left: 0;
display: inline-block;
width: 1.6rem;
height: 1.6rem;
border-radius: 0.3rem;
border: 0.1rem solid #cccccc;
background: #fff;
}
@media (max-width: 768px) {
.drop-list .drop-item .check-box {
margin-top: 1.5rem;
}
.check-box .check-item {
margin-right: 0.8rem;
}
.custom-checkbox-label {
font-size: 1.4rem;
padding-left: 1.8rem;
}
.custom-checkbox-label::before {
width: 1.3rem;
height: 1.3rem;
top: 0.4rem;
}
.custom-checkbox:checked + .custom-checkbox-label::after {
top: 0.1rem;
left: 0.2rem;
font-size: 1rem;
}
}
/* 게시판 목록 */
.board-list th,
.board-list td {
height: 5.8rem;
padding: 1.2rem 1rem;
color: #222;
border: 0.1rem solid #dedede;
font-size: 1.6rem;
text-align: center;
}
.board-list thead th:first-of-type,
.board-list tbody td:first-of-type {
border-left: 0;
}
.board-list thead th:last-of-type,
.board-list tbody td:last-of-type {
border-right: 0;
}
.board-list th {
background: #f7f7f7;
font-weight: 600;
}
.board-list tr.strong td {
color: #006edf;
}
.board-list tr.notice td {
font-weight: 500;
}
.board-list tr.notice td:first-child span {
display: inline-block;
font-size: 1.4rem;
color: #fff;
background: #3d70c6;
height: 2.9rem;
line-height: 2.9rem;
padding: 0 1.6rem;
border-radius: 1.4rem;
}
.board-list tr.on td {
background: #5581d0;
color: #fff;
}
.board-list .checkbox {
margin-top: 0.4rem;
}
.board-list .await {
color: #bcbcbc;
}
.board-list .complete {
color: #3173d8;
font-weight: 700;
}
@media (max-width: 768px) {
.board-list {
border-top: 0.2rem solid #5b5b5b;
}
.board-list colgroup,
.board-list thead {
display: none;
}
.board-list tr {
display: block;
}
.board-list tr {
position: relative;
padding: 1rem;
border-bottom: 0.1rem solid #b5b8c4;
}
/* .board-list tr td:first-child{display:none;} */
.board-list td {
display: none;
text-align: left;
border: 0;
height: auto;
padding: 0;
}
.board-list tr td[colspan] {
display: block;
text-align: center;
padding: 1rem 0;
}
.board-list td {
display: block;
}
.board-list td br {
display: none;
}
.board-list td a.text-link {
display: inline;
}
.board-list th,
.board-list td {
font-size: 1.2rem;
}
.board-list th.text-left,
.board-list td.text-left {
padding-left: 0;
padding-right: 0;
}
.board-list .bbs-num {
display: none;
}
.board-list .bbs-title {
font-weight: 600;
line-height: 1.6;
margin-bottom: 0.4rem;
}
.board-list .bbs-file {
position: absolute;
bottom: 0.8rem;
right: 1rem;
}
.board-list .bbs-writer,
.board-list .bbs-date,
.board-list .bbs-views {
display: inline-block;
margin-right: 1.5rem;
color: #778697;
}
.board-list .bbs-writer::before,
.board-list .bbs-date::before,
.board-list .bbs-views::before {
font-family: "Font Awesome 5 Pro";
font-weight: bold;
margin-right: 0.6rem;
}
.board-list .bbs-date::before {
content: "\f073";
}
.board-list .bbs-views::before {
content: "\f06e";
}
.board-list .bbs-writer::before {
content: "\f4ff";
margin-right: 0.3rem;
}
.board-list .bbs-status {
margin-top: 0.6rem;
}
}
/* pagination */
.pagination {
margin-top: 6rem;
text-align: center;
}
.pagination .pagination-wrap {
display: inline-block;
}
.pagination .pagination-wrap:after {
content: "";
display: block;
clear: both;
}
.pagination a,
.pagination img {
vertical-align: top;
}
.pagination a {
float: left;
display: inline-block;
width: 2.8rem;
height: 2.8rem;
line-height: 2.8rem;
margin-right: 0.9rem;
border-radius: 0.3rem;
}
.pagination a:last-child {
margin-right: 0;
}
.pagination a.num {
width: auto;
min-width: 2.8rem;
padding: 0 0.6rem;
color: #2c2c2c;
font-size: 2rem;
font-weight: 700;
}
.pagination a.num.on {
color: #ff426e;
font-weight: 600;
}
.pagination .pg-btn {
display: block;
color: #fff;
background: #8faddf;
}
.pagination .pg-btn.pg-prev {
margin-right: 2rem;
}
.pagination .pg-btn.pg-next {
margin-left: 1.1rem;
}
.pagination .pg-btn::before {
font-family: "Font Awesome 5 Pro";
font-weight: bold;
font-size: 1.5rem;
color: #fff;
}
.pagination .pg-btn.pg-first::before {
content: "\f100";
}
.pagination .pg-btn.pg-prev::before {
content: "\f104";
}
.pagination .pg-btn.pg-next::before {
content: "\f105";
}
.pagination .pg-btn.pg-last::before {
content: "\f101";
}
@media (max-width: 768px) {
.pagination {
margin-top: 4rem;
}
.pagination a {
width: 2rem;
height: 2rem;
margin-right: 0.3rem;
line-height: 2rem;
}
.pagination a.num {
min-width: 2rem;
font-size: 1.2rem;
}
.pagination .pg-btn::before {
font-size: 1.2rem;
}
.pagination .pg-btn.pg-prev {
margin-right: 1rem;
}
.pagination .pg-btn.pg-next {
margin-left: 0.7rem;
}
}
/* 게시판 상세/글쓰기 */
.board-detail {
border-top: 0.3rem solid #5b5b5b;
}
.board-detail .detail-head {
position: relative;
}
.board-detail .detail-category {
position: absolute;
left: 2rem;
top: 50%;
margin-top: -2.4rem;
display: inline-block;
width: 9.4rem;
height: 4.9rem;
line-height: 4.9rem;
color: #fff;
font-size: 2.2rem;
font-weight: 500;
background: #3d70c6;
border-radius: 2.4rem;
text-align: center;
}
.board-detail .detail-title {
position: relative;
padding: 3rem 15rem;
text-align: center;
background: #f7f7f7;
color: #222;
font-size: 2.6rem;
font-weight: 600;
border-bottom: 0.1rem solid #dedede;
word-break: keep-all;
overflow-wrap: break-word;
}
.board-detail .detail-sub-head {
position: relative;
padding: 2.5rem 3.5rem;
background: #f7f7f7;
border-bottom: 0.1rem solid #dedede;
word-break: keep-all;
overflow-wrap: break-word;
font-size: 2.4rem;
line-height: 1.5;
}
.board-detail .detail-sub-title {
color: #222;
font-weight: 600;
}
.board-detail .detail-sub-head .text-warning {
vertical-align: top;
}
.board-detail .detail-option {
padding: 1.6rem 2.5rem;
text-align: right;
border-bottom: 0.1rem solid #dedede;
}
.board-detail .detail-title .detail-option {
border-bottom: 0;
padding: 0;
}
.board-detail .detail-option span {
color: #7f8d9c;
font-size: 1.5rem;
font-weight: 500;
}
.board-detail .detail-option span + span {
margin-left: 2.6rem;
}
.board-detail .detail-option span::before {
font-family: "Font Awesome 5 Pro";
display: inline-block;
font-size: 130%;
margin-right: 1rem;
font-weight: bold;
}
.board-detail .detail-option .writer::before {
content: "\f4ff";
}
.board-detail .detail-option .date::before {
content: "\f073";
}
.board-detail .detail-option .views::before {
content: "\f06e";
margin-top: -0.2rem;
vertical-align: middle;
}
.board-detail .detail-contents {
padding: 2.4rem 4rem;
color: #222;
font-size: 1.8rem;
line-height: 1.8;
border-bottom: 0.1rem solid #dedede;
word-break: keep-all;
overflow-wrap: break-word;
}
.board-detail .detail-contents img {
display: block;
}
.board-detail .detail-contents img + img {
margin-top: 2.4rem;
}
.board-detail .detail-contents .contents-text {
margin-bottom: 2.4rem;
}
.board-detail .detail-contents img ~ .contents-text {
margin-bottom: 0;
margin-top: 2.4rem;
}
.board-detail .detail-file {
display: flex;
align-items: stretch;
border-bottom: 0.1rem solid #dedede;
}
.board-detail .detail-file .file-title {
font-size: 1.5rem;
font-weight: 500;
flex: 0 0 13.5rem;
position: relative;
border-right: 0.1rem solid #dedede;
}
.board-detail .detail-file .file-title span {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
}
.board-detail .detail-file .file-list {
flex: 1;
}
.board-detail .detail-file .file-list li {
font-size: 1.6rem;
padding: 1.4rem 2.4rem;
}
.board-detail .detail-file .file-list li + li {
border-top: 0.1rem solid #dedede;
}
.board-detail .detail-file .text-link {
margin-right: 1rem;
}
.board-detail .detail-file .btn-view {
display: inline-block;
min-width: 8.8rem;
color: #222;
font-size: 1.3rem;
height: 3rem;
line-height: 2.8rem;
border: 0.1rem solid #cfcfcf;
border-radius: 1.5rem;
text-align: center;
background: linear-gradient(to top, #ededed 0%, #fff 100%);
}
/* .board-detail .detail-form{display:table;width:100%;table-layout:fixed;} */
.board-detail .detail-form.form-bg {
background: #f3f8fc;
}
.board-detail .detail-form .form-wrap {
display: flex;
align-items: center;
border-bottom: 0.1rem solid #dedede;
}
.board-detail .detail-form .form-col {
font-size: 1.8rem;
vertical-align: middle;
padding: 2rem 3.5rem;
flex: 1 1 auto;
}
.board-detail .detail-form .form-col:first-child:not(:only-of-type) {
width: 17.3rem;
flex: 0 0 auto;
}
.board-detail .detail-form .form-col:only-of-type {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.board-detail .detail-form .form-col > .lbl {
color: #222;
font-weight: 600;
font-size: 2rem;
line-height: 1.5;
word-break: keep-all;
}
.board-detail .detail-form .form-col:only-of-type > .lbl {
margin-bottom: 2rem;
}
.board-detail .detail-form * + .text-desc,
.board-detail .detail-form * + .text-warning {
margin-left: 2rem;
}
.board-detail .detail-form span.form-control + .text-desc {
margin-left: 0;
}
.board-detail .detail-form .form-row ~ .file-upload {
margin-top: 2rem;
}
.board-detail .detail-form .detail-form {
margin: -2.5rem -3.5rem;
padding: 2rem 3.5rem;
}
.board-detail .detail-form .lbl ~ .detail-form {
margin-top: 0;
border-top: 0.1rem solid #dedede;
}
.board-detail .detail-form .detail-form .form-wrap {
border-bottom: 0;
}
.board-detail .detail-form .detail-form .form-wrap + .form-wrap {
margin-top: 1.5rem;
}
.board-detail .detail-form .detail-form .form-col {
padding: 0;
}
.board-detail .detail-form .detail-form .form-col > .lbl {
font-weight: 400;
font-size: 1.8rem;
}
/* 1:1문의 답변 */
.board-detail.board-answer {
margin-top: 6rem;
background: #f6fdff;
border-top: 0.1rem solid #00b0e8;
}
.board-detail.board-answer .detail-category {
background: #12aee1;
}
.board-detail.board-answer .detail-title {
background: #eaf6fd;
padding-left: 2.5rem;
padding-right: 2.5rem;
min-height: 9.8rem;
}
.board-detail.board-answer .nodata {
border-bottom: 0.1rem solid #dedede;
background: #fff;
}
@media (max-width: 1024px) {
.board-detail .detail-title {
font-size: 2.4rem;
padding-left: 12rem;
padding-right: 12rem;
}
.board-detail .detail-sub-headd {
padding-left: 2.5rem;
padding-right: 2.5rem;
font-size: 2.2rem;
}
.board-detail .detail-category {
height: 4.1rem;
line-height: 4.1rem;
font-size: 2rem;
width: 7.8rem;
margin-top: -2rem;
border-radius: 2rem;
}
.board-detail .detail-form .form-col {
padding: 1.5rem 2.5rem;
font-size: 1.6rem;
}
.board-detail .detail-form > .form-col {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.board-detail .detail-form .form-col:first-child:not(:only-of-type) {
width: 14.4rem;
}
.board-detail .detail-form .form-col > .lbl {
font-size: 1.8rem;
}
.board-detail .detail-form * + .text-desc,
.board-detail .detail-form * + .text-warning {
display: block;
margin-left: 0;
margin-top: 1rem;
}
.board-detail .detail-form .detail-form {
margin: -2.5rem;
padding: 1.5rem 2.5rem;
}
.board-detail .detail-form .detail-form .form-col > .lbl {
font-size: 1.6rem;
}
/* 1:1문의 답변 */
.board-detail.board-answer {
margin-top: 5rem;
}
}
@media (max-width: 768px) {
.board-detail {
border-top-width: 0.2rem;
}
.board-detail .detail-category {
position: static;
width: 4.8rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 1.2rem;
display: block;
margin: 0 auto 0.6rem;
border-radius: 1.2rem;
}
.board-detail .detail-title {
font-size: 1.5rem;
padding: 1.4rem 1rem;
}
.board-detail .detail-sub-head {
margin: -0.1rem -2rem 0;
border-top: 0.1rem solid #dedede;
padding: 1.4rem 3.5rem;
font-size: 1.5rem;
}
.board-detail .detail-sub-head .text-warning br {
display: none;
}
.board-detail .detail-option {
padding: 0.8rem 1rem;
}
.board-detail .detail-option span {
font-size: 1.2rem;
}
.board-detail .detail-option span + span {
margin-left: 1rem;
}
.board-detail .detail-option span::before {
margin-right: 0.6rem;
}
.board-detail .detail-contents {
padding: 1.5rem;
font-size: 1.2rem;
}
.board-detail .detail-contents img + img {
margin-top: 1.5rem;
}
.board-detail .detail-contents .contents-text {
margin-bottom: 1.5rem;
}
.board-detail .detail-contents img ~ .contents-text {
margin-bottom: 0;
margin-top: 1.5rem;
}
.board-detail .detail-file .file-title {
font-size: 1.2rem;
flex-basis: 7rem;
}
.board-detail .detail-file .file-list li {
font-size: 1.2rem;
padding: 0.7rem 1.2rem;
}
.board-detail .detail-file .btn-view {
font-size: 1rem;
min-width: 5.6rem;
height: 2.2rem;
line-height: 2rem;
}
.board-detail .detail-form,
.board-detail > .detail-form > .form-wrap,
.board-detail > .detail-form > .form-col {
display: block;
}
.board-detail .detail-form.form-bg {
background: none;
}
.board-detail .detail-form .form-wrap {
padding: 1.5rem 1.5rem;
}
.board-detail .detail-form .form-col {
width: auto;
border-bottom: 0;
padding: 0;
font-size: 1.2rem;
}
.board-detail .detail-form .form-col:only-of-type {
padding: 0;
}
.board-detail .detail-form .form-col > .inp-text {
width: 100%;
}
.board-detail .detail-form .form-col > .lbl {
font-size: 1.3rem;
display: block;
margin-bottom: 1rem !important;
}
.board-detail .detail-form * + .text-desc,
.board-detail .detail-form * + .text-warning {
margin-top: 1rem;
}
.board-detail .detail-form .form-row ~ .file-upload {
margin-top: 1rem;
}
.board-detail .detail-form .detail-form {
margin: 0 -1.5rem -1.5rem;
padding: 1.5rem;
border-top: 0;
}
.board-detail .detail-form .detail-form .form-wrap {
padding: 0;
}
.board-detail .detail-form .detail-form .form-wrap + .form-wrap {
margin-top: 0.8rem;
}
.board-detail .detail-form .detail-form .form-col:first-child {
width: 8rem;
}
.board-detail .detail-form .detail-form .form-col > .lbl {
font-size: 1.2rem;
}
/* 1:1문의 답변 */
.board-detail.board-answer {
margin-top: 4rem;
}
.board-detail.board-answer .detail-title {
min-height: 0;
}
.board-detail.board-answer .detail-title .detail-category {
margin-bottom: 0;
}
.board-detail.board-answer .detail-title .detail-option {
text-align: center;
margin-top: 0.6rem;
}
}
/* 파일 첨부 */
/* .file-upload{display:flex;align-items:center;flex-wrap:wrap;} */
.file-upload .upload-wrap label + input[type="file"] {
display: none;
}
.file-upload .upload-wrap .btn.search {
min-width: 7rem;
height: 4.6rem;
padding: 0 2rem;
border: none;
background: #666;
color: #fff !important;
font-size: 1.8rem;
font-weight: 500;
line-height: 4.6rem;
border-radius: 0.7rem;
background: linear-gradient(to bottom, #4f9ee8 0%, #056ac8 100%);
}
.file-upload .upload-wrap .btn.search i {
margin-right: 0.6rem;
}
.file-list {
position: relative;
}
.file-list .file-wrap {
color: #222;
}
.file-list .file-wrap {
margin-top: 1rem;
}
.file-list .file-wrap .file-text {
color: inherit;
font-size: 1.6rem;
}
.file-list .file-wrap .file-del {
margin-left: 0.5rem;
margin-top: -0.2rem;
border: none;
border-radius: 0.3rem;
font-size: 0;
vertical-align: middle;
line-height: 1;
}
.file-list .file-wrap .file-del::after {
content: "\f057";
font-family: "Font Awesome 5 Pro";
color: #768491;
font-size: 1.6rem;
font-weight: bold;
vertical-align: top;
}
.file-list .text-desc,
.file-list .text-warning {
max-width: calc(100% - 17rem);
}
@media (max-width: 1024px) {
.file-upload .upload-wrap .btn.search {
height: 4.3rem;
line-height: 4.3rem;
}
.file-list .text-desc,
.file-list .text-warning {
display: inline-block !important;
margin-left: 1rem !important;
margin-top: 0 !important;
}
}
@media (max-width: 768px) {
.file-upload .upload-wrap .btn.search {
border-radius: 0.2rem;
height: 3.1rem;
line-height: 3.1rem;
font-size: 1.2rem;
padding: 0 1.2rem;
border-radius: 0.4rem;
}
.file-list .file-wrap {
margin-top: 1rem;
}
.file-list .file-wrap .file-text {
color: inherit;
font-size: 1.3rem;
}
.file-list .file-wrap .file-del::after {
font-size: 1.5rem;
}
.file-list .text-desc,
.file-list .text-warning {
max-width: calc(100% - 11rem);
}
}
/**
* 모달
*/
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
.modal.on {
display: block;
z-index: 1100;
}
.modal.off {
z-index: 1000;
}
.modal .modal-wrap {
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 51.2rem;
max-width: 90%;
margin: 0 auto;
z-index: 1001;
background: #fff;
border-radius: 1rem;
/* transform: translate3d(-50%, -50%, 0); */
word-break: keep-all;
word-wrap: break-word;
animation: 0.3s fadeIn;
border-radius: 1rem;
}
.modal .modal-wrap.wrap-medium {
width: 64rem;
}
.modal .modal-wrap.wrap-large {
width: 97rem;
}
.modal .modal-head {
position: relative;
background: #18569e;
text-align: center;
height: 5.8rem;
}
.modal .modal-title {
color: #fff;
font-size: 2.2rem;
font-weight: bold;
line-height: 5.8rem;
}
.modal-line {
border: 0.4rem solid #185cb0;
border-radius: 0 0 1rem 1rem;
border-top: 0;
}
.modal .modal-body {
overflow-y: auto;
height: 100%;
max-height: calc(100vh - 20rem);
}
.modal .modal-contents {
background: #edf4ff;
padding: 2rem 4rem;
text-align: center;
}
.modal .modal-contents p {
font-size: 1.4rem;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.5;
color: #537ab4;
}
.modal .modal-form-wrap {
padding: 2.5rem 4rem 0;
}
.modal .form-box {
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
}
.modal .form-box + .form-box {
margin-top: 2rem;
}
.modal .form-box .radio-box {
width: 100%;
margin-left: 0;
flex-wrap: wrap;
}
.modal .radio-item {
display: inline-block;
margin-right: 3.5rem;
}
.modal .custom-radio-box + .custom-radio-text::before {
width: 1.6rem;
height: 1.6rem;
}
.modal .custom-radio-box:checked + .custom-radio-text::after {
width: 0.8rem;
height: 0.8rem;
left: 0.4rem;
}
.modal .form-box .inp-box {
width: 100%;
}
.modal .form-box.text-box .text {
width: 100%;
text-align: left;
font-size: 1.6rem;
color: #5f5f5f;
}
.modal .form-box.start {
align-items: flex-start;
}
.modal .form-box.start .form-lbl,
.modal .form-box.start .title {
padding-top: 0.6rem;
}
.modal .form-box .form-lbl,
.modal .form-box .title {
font-size: 1.6rem;
font-weight: 500;
letter-spacing: -0.03em;
width: 8rem;
flex: 0 0 auto;
}
.modal .principle {
font-size: 1.4rem;
font-weight: 400;
letter-spacing: -0.05em;
color: #9b9b9b;
text-align: right;
margin: 0.2rem 0 1rem;
}
.modal .inp-text,
.modal .sel {
width: 100%;
max-width: 100%;
height: 3.6rem;
color: #515151;
font-size: 1.4rem;
border: 0.1rem solid #ced2d5;
border-radius: 0.5rem;
text-align: left;
padding: 0 1.2rem;
}
.modal .sel {
appearance: none;
background-image: url("../images/sub/sel_arrow.png");
background-repeat: no-repeat;
background-position: right 1.2rem top 50%;
padding-right: 3rem;
}
.modal .area-text {
width: 100%;
max-width: 100%;
height: 11rem;
font-size: 1.4rem;
border: none;
resize: none;
border: 0.1rem solid #ced2d5;
border-radius: 0.5rem;
text-align: left;
padding: 1rem 1.2rem;
overflow-y: auto;
}
.modal .area-text::-webkit-scrollbar {
width: 0.4rem;
}
.modal .area-text::-webkit-scrollbar-thumb {
background-color: #eaeaea;
border-radius: 0.2rem;
}
.modal .area-text::-webkit-scrollbar-track {
background-color: #fff;
}
.modal .modal-text {
text-align: center;
margin-top: 2rem;
color: #5f5f5f;
font-size: 1.2rem;
letter-spacing: -0.025em;
line-height: 1.6;
padding: 1.5rem 1rem;
background: #eee;
margin-left: -4rem;
margin-right: -4rem;
}
.modal .modal-text p + p {
margin-top: 0.5rem;
}
.modal .modal-text strong {
color: #185cb0;
font-weight: 500;
font-size: 1.3rem;
}
.modal .modal-text i {
margin-right: 0.4rem;
}
.modal .modal-button {
padding: 3rem 4rem 3rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal .modal-button .btn {
height: 4.6rem;
line-height: 4.6rem;
min-width: 7.9rem;
border-radius: 0.7rem;
font-size: 1.6rem;
font-weight: 500;
flex: 0 1 50%;
box-shadow: 0.3rem 0.3rem 0.4rem rgba(34, 47, 60, 0.16);
}
.modal .modal-button .btn:only-child {
flex-basis: 100%;
}
.modal .modal-button .btn ~ .btn {
margin-left: 1.4rem;
}
.modal .modal-button .btn.send,
.modal .modal-button .btn.download {
background: linear-gradient(to bottom, #11a3ed 0%, #0c89e8 98%);
text-align: left;
padding: 0 2rem;
position: relative;
}
.modal .modal-button .btn.send::after {
content: "\f0e0";
font-family: "Font Awesome 5 Pro";
font-size: 1.8rem;
font-weight: 400;
position: absolute;
right: 1.5rem;
}
.modal .modal-button .btn.download::after {
content: "\f019";
font-family: "Font Awesome 5 Pro";
font-size: 1.8rem;
font-weight: bold;
position: absolute;
right: 1.5rem;
}
.modal .modal-button .btn.cancel {
background: linear-gradient(to bottom, #959595 0%, #6c6c6c 98%);
flex: 0 1 50%;
text-align: left;
padding: 0 2rem;
position: relative;
}
.modal .modal-button .btn.cancel::after {
content: "\f00d";
font-family: "Font Awesome 5 Pro";
font-size: 1.8rem;
font-weight: 400;
position: absolute;
right: 1.5rem;
}
.modal .modal-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.57);
}
.modal .btn-modal-close {
position: absolute;
top: 1.5rem;
right: 2rem;
width: 3rem;
height: 3rem;
color: #fff;
font-size: 2.6rem;
line-height: 1;
}
.modal .btn-modal-close i {
line-height: 1;
vertical-align: top;
}
.need {
position: relative;
}
.need::after {
content: "*";
font-size: 1.6rem;
font-weight: 500;
color: #f75178;
position: absolute;
line-height: 1;
top: 0;
right: -0.8rem;
}
@media (max-width: 768px) {
.modal .modal-head {
height: 6rem;
}
.modal .modal-title {
font-size: 2rem;
line-height: 6rem;
}
.modal .modal-contents {
padding: 1.5rem 2rem;
}
.modal .modal-contents p {
font-size: 1.3rem;
}
.modal .modal-form-wrap {
padding: 2rem 2.5rem 0;
}
.modal .form-box + .form-box {
margin-top: 1.5rem;
}
.modal .form-box .form-lbl {
font-size: 1.4rem;
flex: 0 0 auto;
}
.modal .form-box .title {
font-size: 1.4rem;
}
.modal .form-box.text-box .text {
font-size: 1.4rem;
}
.modal .form-box.start .form-lbl,
.modal .form-box.start .title {
padding-top: 0.3rem;
}
.modal .principle {
font-size: 1.2rem;
margin: 0.2rem 0 0.6rem;
}
.modal .form-box .principle {
font-size: 1.2rem;
}
.modal .radio-item {
display: inline-block;
margin-right: 2rem;
}
.modal .inp-text,
.modal .sel {
height: 3.8rem;
font-size: 1.3rem;
padding: 0 1rem;
}
.modal .area-text {
border-radius: 0.3rem;
padding: 0.8rem 1rem;
font-size: 1.3rem;
}
.modal .modal-text {
margin-left: -2.5rem;
margin-right: -2.5rem;
font-size: 1rem;
}
.modal .modal-text strong {
font-size: 1.2rem;
}
.modal .modal-button {
padding: 2rem;
}
.modal .modal-button .btn {
height: 4rem;
line-height: 4rem;
font-size: 1.4rem;
min-width: 7rem;
border-radius: 0.3rem;
}
.modal .btn-modal-close {
font-size: 2.2rem;
}
}
@media (max-width: 520px) {
.modal .modal-wrap {
width: 100%;
height: 100%;
max-width: 100%;
border-radius: 0;
display: flex;
flex-direction: column;
}
.modal .modal-head {
flex: 0 0 auto;
}
.modal-line {
border-radius: 0;
flex: 1 1 auto;
min-width: 0;
overflow-y: auto;
border: 0;
}
.modal .modal-body {
max-height: none;
height: auto;
overflow-y: visible;
}
.modal .inp-text {
width: 100%;
flex: 1 1 auto;
border-radius: 0.3rem;
}
.modal .area-text,
.modal .form-box.text-box .text,
.modal .form-box .radio-box,
.modal .form-box .inp-box,
input.inp-file {
width: 100%;
flex: 1 1 auto;
}
}
/* 의견글 제시 모달 */
/* 비밀번호 모달 */
.modal-password {
text-align: center;
padding: 4rem;
}
.modal-password .title {
font-size: 1.6rem;
font-weight: 500;
letter-spacing: -0.03em;
}
.modal-password .inp-text {
max-width: 100%;
margin-top: 2.2rem;
text-align: center;
}
.modal .password.modal-button .btn {
width: 50%;
text-align: center;
}
.modal .password.modal-button .btn.cancel::after,
.modal .password.modal-button .btn.send::after {
display: none;
}
/* 인증키 모달 */
.modal .proposal.modal-wrap {
width: 52.2rem;
}
.modal .proposal.area-text {
height: 20rem;
max-width: 35.2rem;
}
.proposal.modal-form-wrap .form-box .inp-text {
max-width: 35.2rem;
}
.proposal.modal-form-wrap .form-box + .form-box {
margin-top: 2.6rem;
}
.modal .proposal.form-box {
position: relative;
}
.modal .proposal.form-box .principle {
font-size: 1.4rem;
font-weight: 400;
letter-spacing: -0.05em;
color: #9b9b9b;
position: absolute;
bottom: -1.8rem;
right: 0;
}
.modal .proposal.modal-button .btn {
flex: 0 1 50%;
}
.modal .modal-button .btn.send::after {
content: "\f044";
font-family: "Font Awesome 5 Pro";
font-size: 1.8rem;
font-weight: 400;
position: absolute;
right: 1.5rem;
}
@media (max-width: 768px) {
.modal .modal-button .btn.send::after {
font-size: 1.5rem;
}
.modal .proposal.area-text {
height: 20rem;
max-width: 35.2rem;
}
}
/**
* 팝업 (CMS에서 팝업관리가 있는 경우 필수로 포함되어야함)
*/
.popup-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #333;
font-size: 1.4rem;
/* padding-bottom: 3.7rem; */
}
.popup-wrap .popup-body {
height: 100%;
overflow-y: auto;
}
.popup-wrap .popup-body img {
display: block;
}
.popup-wrap .body-contents {
padding: 1rem 1.5rem;
}
.popup-wrap .popup-bottom {
position: absolute;
top: 100%;
left: -0.1rem;
right: -0.1rem;
height: 3.7rem;
padding: 0.8rem 1.5rem;
border-top: 0.1rem solid #ccc;
background-color: #fbf9fa;
color: #444;
font-size: 1.3rem;
font-weight: 500;
}
.popup-wrap .popup-bottom::after {
content: "";
display: block;
clear: both;
}
.popup-wrap .popup-bottom .left-area {
float: left;
}
.popup-wrap .popup-bottom .right-area {
float: right;
}
.popup-wrap .popup-bottom .today-chk,
.popup-wrap .popup-bottom .today-lbl {
vertical-align: middle;
}
.popup-wrap .popup-bottom .today-lbl {
margin-left: 0.4rem;
}
.popup-wrap .popup-bottom .popup-close {
width: 3rem;
height: 2rem;
border: none;
background-color: transparent;
font-size: 1.3rem;
font-weight: 500;
}
/* 레이어 */
.popup-layer {
position: absolute;
z-index: 990;
outline: 0.1rem solid #ccc;
background: #fff;
max-height: calc(100vh - 6rem);
}
.popup-layer.layer-center {
top: 50% !important;
left: 50% !important;
transform: translate3d(-50%, -50%, 0);
}
@media (max-width: 1024px) {
.popup-layer,
.popup-layer.layer-center {
top: 50% !important;
left: 50% !important;
transform: translate3d(-50%, -50%, 0);
}
}
@media (max-width: 768px) {
.popup-layer,
.popup-layer.layer-center {
top: 3rem !important;
left: 2rem !important;
right: 2rem !important;
transform: none;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.popup-layer {
width: auto !important;
max-width: 90%;
}
.popup-layer img {
width: 100%;
}
}
/* animation */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 서브콘텐츠 헤더 */
.content-head {
background: url(../images/common/sub_content_head_bg.png) no-repeat 50% 50% / cover;
text-align: center;
position: relative;
}
.content-head::before {
content: "";
width: 30.8rem;
height: 9rem;
/* background: url(../images/common/sub_content_head_img01.png) no-repeat 50% 50% / cover; */
position: absolute;
bottom: -1rem;
right: 4rem;
pointer-events: none;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
.content-head.img-kite::before {
background-image: url(../images/main/main_search_box_kite02.png);
}
.content-head.img-hanbok::before {
background-image: url(../images/main/main_search_box_hanbok02.png);
}
.content-head.img-buddha::before {
background-image: url(../images/main/main_search_box_buddha02.png);
}
.content-head.img-soldier::before {
background-image: url(../images/main/main_search_box_soldier02.png);
}
.content-head.img-autumn::before {
background-image: url(../images/main/main_search_box_autumn02.png);
}
.content-head.img-hangeul::before {
background-image: url(../images/main/main_search_box_hangeul02.png);
}
.content-head.img-winter::before {
background-image: url(../images/main/main_search_box_winter02.png);
}
.content-head-title {
font-size: 3.8rem;
font-weight: 500;
letter-spacing: -0.04em;
line-height: 1.15;
color: #fff;
padding: 2rem 0;
}
.content-head-title span {
display: inline-block;
max-width: 100%;
}
.content-head-title[data-font-size="xsmall"] {
font-size: 3rem;
}
.content-head-title[data-font-size="small"] {
font-size: 3.4rem;
}
.content-head-title[data-font-size="large"] {
font-size: 4.2rem;
}
.content-head-title[data-font-size="xlarge"] {
font-size: 4.6rem;
}
@media (max-width: 768px) {
.content-head::before {
display: none;
}
.content-head-title {
font-size: 2.5rem;
padding: 1.4rem 0;
}
.content-head-title[data-font-size="xsmall"] {
font-size: 1.9rem;
}
.content-head-title[data-font-size="small"] {
font-size: 2.2rem;
}
.content-head-title[data-font-size="large"] {
font-size: 2.8rem;
}
.content-head-title[data-font-size="xlarge"] {
font-size: 3.1rem;
}
}
