@charset "UTF-8";
/* prettier-ignore */
@import url("/static/portal/css/default.css?v5127");
@import url("/static/portal/css/main-mapinfor.css?v8188");
@media (max-width: 749px) {
body {
overflow-x: hidden;
}
}

.header {
margin: 0;
}

.mainContainer {
margin: 0 auto;
max-width: 1440px;
padding: 0 20px;
font-family: GmarketSans;
}

@media (min-width: 1200px) {
.main-s1 {
display: grid;
grid-template-columns: 48.0714285714% 46.7142857143%;
justify-content: space-between;
padding-bottom: 48px;
background: url(/static/portal/img/main/mount-bg.png) 0 bottom no-repeat;
}
}
.main-sh {
display: none;
padding-left: 15px;
padding-top: 24px;
}
@media (min-width: 1200px) {
.main-sh {
display: block;
padding-top: 70px;
}
}
.main-sh .keyword-help {
left: 0;
}
@media (min-width: 1200px) {
.main-sh .keyword-help {
top: 9px;
font-size: 27px;
}
}
.main-sh .main-sh__keyword-group:focus-within .keyword-help {
top: -10px;
opacity: 0;
}
.sh--detail .main-sh .main-sh__keyword-group:focus-within .keyword-help {
top: -18px;
}
.main-sh__keyword-group {
position: relative;
flex-grow: 1;
display: grid;
grid-template-columns: auto 50px;
border-bottom: 4px solid var(--mid-blue);
}
@media (min-width: 750px) {
.main-sh__keyword-group {
grid-template-columns: auto 56px;
padding-bottom: 11px;
}
}
@media (max-width: 749px) {
.main-sh__keyword-group {
border-bottom-width: 3px;
}
}
.main-sh__keyword-group input[type=text] {
display: block;
border: none;
width: 100%;
height: 56px;
background-color: #fff;
font-size: 20px;
font-weight: 400;
font-family: GmarketSans;
}
.main-sh__keyword-group .autokeyword {
position: absolute;
top: 71px;
left: 0;
border: 1px solid var(--mid-blue);
background-color: #fff;
z-index: 1;
width: calc(100% - 0px);
padding: 10px;
display: none;
}
.main-sh__keyword-group .autokeyword button {
display: block;
width: 100%;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.main-sh__keyword-group .autokeyword .active {
background-color: rgba(0, 0, 0, 0.06);
}
.main-sh__submit {
transform: translateX(2px);
background-color: var(--mid-blue);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
@media (max-width: 749px) {
.main-sh__submit {
width: 40px;
height: 40px;
border-radius: 40px;
}
}
@media (min-width: 750px) {
.main-sh__submit {
width: 56px;
height: 56px;
border-radius: 56px;
margin: -5px 0;
}
}
.main-sh__submit i {
display: inline-block;
}
.main-sh__submit:focus {
outline-color: #fff;
}
.main-sh__keyword {
margin-top: 20px;
font-family: GmarketSans;
}
.main-sh__keyword dl {
transform: translateX(-12px);
display: grid;
grid-template-columns: 110px 1fr;
gap: 17px;
}
@media (max-width: 749px) {
.main-sh__keyword dl {
gap: 10px;
}
}
.main-sh__keyword dt {
position: relative;
width: 110px;
height: 30px;
margin-right: 30px;
border-radius: 15.5px;
background-color: var(--teal);
font-style: italic;
font-weight: 400;
color: #fff;
text-align: center;
line-height: 35px;
font-family: GmarketSans;
}
.main-sh__keyword dt::before {
content: "";
position: absolute;
left: 19px;
top: -7px;
width: 9px;
height: 10px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="10"><path fill-rule="evenodd" fill="%234EA47E" d="M0 7.998S2.955 2.771 8.999.1c0 0-6.715 9.387 0 9.899L0 7.998z"/></svg>') 0 0 no-repeat;
}
@media (max-width: 749px) {
.main-sh__keyword dt {
font-size: 13px;
width: 87px;
height: 22px;
padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 3px;
}
}
.main-sh__keyword dd {
margin-top: -4px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
@media (max-width: 749px) {
.main-sh__keyword dd {
flex-wrap: nowrap;
gap: 4px;
overflow-x: auto;
}
}
.main-sh__keyword button {
height: 40px;
padding: 0 18px;
color: #252525;
overflow-wrap: anywhere;
text-align: left;
word-break: auto-phrase;
border-width: 1px;
border-color: rgb(217, 217, 217);
border-style: solid;
background-color: rgb(255, 255, 255);
border-radius: 50px;
line-height: 1;
flex-shrink: 0;
}
@media (max-width: 749px) {
.main-sh__keyword button {
font-size: 14px;
height: 28px;
padding: 5px 8px;
}
}
@media (min-width: 1200px) {
.main-sh__keyword button:hover, .main-sh__keyword button:focus {
color: #fff;
background-color: #5489de;
}
}
@keyframes moveUpFadeOut {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(-10px, -30px);
opacity: 0;
}
}
@keyframes moveUpFadeOut2 {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(15px, -30px);
opacity: 0;
}
}
@keyframes moveUpFadeOut3 {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(20px, -30px);
opacity: 0;
}
}
@keyframes moveUpFadeOut4 {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(0, -30px);
opacity: 0;
}
}
.main-mayor__top {
padding-bottom: 47px;
background: url(/static/portal/img/main/mayor-pic.png) right bottom no-repeat;
}
@media (max-width: 749px) {
.main-mayor__top {
padding-bottom: 18px;
background-image: url(/static/portal/img/main/mayor-pic-m.png);
}
}
.main-mayor__slogan {
padding-top: 34px;
}
.gnb-set .main-mayor__slogan {
padding-top: 20px;
pointer-events: none;
opacity: 0;
}
.gnb-stiky .gnb-set .main-mayor__slogan {
opacity: 1;
}
.main-mayor__slogan div {
display: inline-block;
position: relative;
}
.gnb-stiky .gnb-set .main-mayor__slogan div {
position: absolute;
margin-left: -20px;
width: 0;
z-index: 9999;
height: 10px;
}
.gnb-stiky .gnb-set .main-mayor__slogan div img {
display: none;
}
.main-mayor__slogan i {
position: absolute;
}
.main-mayor__slogan .i0 {
top: 6px;
right: 6px;
background: url(/static/portal/img/main/heart-copy-4.png) 0 0 no-repeat;
width: 16px;
height: 14px;
animation: moveUpFadeOut 2s infinite;
animation-duration: 2s;
}
.main-mayor__slogan .i1 {
top: 9px;
right: 23px;
background: url(/static/portal/img/main/heart-copy-3.png) 0 0 no-repeat;
width: 11px;
height: 9px;
animation: moveUpFadeOut2 2s infinite;
animation-duration: 2s;
animation-delay: 0.8s;
}
.main-mayor__slogan .i2 {
top: 6px;
right: 6px;
background: url(/static/portal/img/main/heart-copy-2.png) 0 0 no-repeat;
width: 14px;
height: 14px;
animation: moveUpFadeOut3 2s infinite;
animation-duration: 2s;
animation-delay: 0.5s;
}
.main-mayor__slogan .i3 {
top: 6px;
right: 14px;
background: url(/static/portal/img/main/heart-copy-2.png) 0 0 no-repeat;
width: 14px;
height: 14px;
animation: moveUpFadeOut4 2s infinite;
animation-duration: 2s;
animation-delay: 1s;
}
.main-mayor__slogan .i4 {
top: 6px;
right: -6px;
background: url(/static/portal/img/main/heart-copy-4.png) 0 0 no-repeat;
width: 16px;
height: 14px;
animation: moveUpFadeOut4 2s infinite;
animation-duration: 2s;
animation-delay: 1.6s;
}
.main-mayor__t1 {
margin: 23px 0 13px;
display: block;
font-size: 21px;
font-family: "GmarketSans";
color: rgb(17, 17, 17);
line-height: 1;
}
@media (max-width: 749px) {
.main-mayor__t1 {
margin: 15px 0 10px;
}
}
@media (max-width: 749px) {
.main-mayor__t1 {
font-size: 15px;
}
}
.main-mayor__t2 {
font-size: 38px;
font-family: "GmarketSans";
color: rgb(17, 17, 17);
font-weight: bold;
line-height: 1;
}
@media (max-width: 749px) {
.main-mayor__t2 {
font-size: 24px;
}
}
.main-mayor__btns {
margin-top: 36px;
}
@media (max-width: 749px) {
.main-mayor__btns {
margin-top: 14px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
}
.main-mayor__btns a {
display: inline-block;
border-style: solid;
border-width: 1px;
border-color: rgb(237, 237, 237);
background-image: -ms-linear-gradient(90deg, rgb(246, 246, 246) 0%, rgb(255, 255, 255) 100%);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.06);
border-radius: 50px;
line-height: 1;
}
@media (max-width: 749px) {
.main-mayor__btns a {
padding: 12px 20px 10px;
}
}
@media (min-width: 750px) {
.main-mayor__btns a {
margin-right: 8px;
padding: 17px 24px;
height: 50px;
}
.main-mayor__btns a:hover, .main-mayor__btns a:focus {
background-color: #fafafe;
position: relative;
}
.main-mayor__btns a:hover::before, .main-mayor__btns a:focus::before {
position: absolute;
left: 24px;
bottom: 15px;
width: calc(100% - 48px);
height: 1px;
background-color: var(--linkcolor);
content: "";
}
}
.main-mayor__btns a::after {
content: "";
display: inline-block;
margin-left: 5px;
width: 6px;
height: 9px;
background: url(/static/portal/img/main/mayor-btn-arr.png) 0 0 no-repeat;
}
.main-mayor__bottom {
display: grid;
gap: 0;
border-radius: 10px;
overflow: hidden;
border: 1px solid #dedede;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 750px) {
.main-mayor__bottom {
grid-template-columns: repeat(4, 1fr);
}
.main-mayor__bottom a + a {
border-left: 1px solid #dedede;
}
}
.main-mayor__bottom a {
display: block;
padding: 13px 4px;
text-align: center;
color: rgb(2, 29, 73);
}
@media (max-width: 749px) {
.main-mayor__bottom a {
padding: 8px 4px;
}
}
@media (min-width: 750px) {
.main-mayor__bottom a:hover, .main-mayor__bottom a:focus {
color: #fff;
background-color: #5489de;
}
.main-mayor__bottom a:hover i, .main-mayor__bottom a:focus i {
background-color: #fff;
}
}
@media (max-width: 749px) {
.main-mayor__bottom a img {
height: 30px;
}
}
.main-mayor__bottom a i {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 46px;
width: 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
background-color: #02275c;
}
.main-mayor__bottom a i.mayor1 {
-webkit-mask-image: url(/static/portal/img/main/mayor1.png);
mask-image: url(/static/portal/img/main/mayor1.png);
}
.main-mayor__bottom a i.mayor2 {
-webkit-mask-image: url(/static/portal/img/main/mayor2.png);
mask-image: url(/static/portal/img/main/mayor2.png);
}
.main-mayor__bottom a i.mayor3 {
-webkit-mask-image: url(/static/portal/img/main/mayor3.png);
mask-image: url(/static/portal/img/main/mayor3.png);
}
.main-mayor__bottom a i.mayor4 {
-webkit-mask-image: url(/static/portal/img/main/mayor4.png);
mask-image: url(/static/portal/img/main/mayor4.png);
}
.main-mayor__bottom a span {
margin-top: 10px;
display: block;
font-size: 16px;
font-family: "GmarketSans";
line-height: 1;
}
@media (max-width: 749px) {
.main-mayor__bottom a span {
margin-top: 6px;
}
}
@media (max-width: 749px) {
.main-mayor__bottom a:nth-child(2) {
border-left: 1px solid var(--bdcolor);
}
.main-mayor__bottom a:nth-child(3) {
border-top: 1px solid var(--bdcolor);
border-right: 1px solid var(--bdcolor);
}
.main-mayor__bottom a:nth-child(4) {
border-top: 1px solid var(--bdcolor);
}
}

.issue-survey {
margin-top: 28px;
}
@media (min-width: 1200px) {
.issue-survey {
margin-top: -48px;
}
}

.tabs-head {
padding-left: 6px;
display: flex;
flex-direction: row;
/* prettier-ignore */
}
@media (max-width: 749px) {
.tabs-head {
padding-top: 4px;
overflow-x: auto;
width: calc(100vw - 40px);
}
.tabs-head.ovx-visible {
overflow-x: visible;
}
}
.tabs-head ~ * {
margin-top: -5px;
position: relative;
z-index: 10;
}
@media (min-width: 750px) {
.issue-survey .tabs-head {
margin-left: 20px;
}
}
.tabs-head a {
position: relative;
margin-left: -4px;
padding: 18px 26px;
border-radius: 10px 10px 0 0;
box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.3);
background-color: #fafafe;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-family: GmarketSans;
font-size: 17px;
font-weight: 500;
line-height: 1;
text-align: center;
color: #454545;
}
@media (min-width: 750px) {
.tabs-head a {
min-width: 124px;
}
}
@media (min-width: 750px) and (min-width: 1300px) {
.online-app .tabs-head a {
min-width: 150px;
}
}
@media (min-width: 750px) {
.tabs-head a:hover, .tabs-head a:focus {
font-weight: 700;
}
}
@media (max-width: 749px) {
.tabs-head a {
font-size: 15px;
padding: 11px 11px;
flex-shrink: 0;
}
}
.tabs-head a span {
position: absolute;
line-height: 1;
padding: 6px 9px 4px;
border-radius: 5px;
background-color: var(--mid-blue-2);
font-size: 13px;
color: #fff;
right: -11px;
top: -12px;
}
.tabs-head a.on {
color: #fff;
background-image: linear-gradient(180deg, #6893d8, #3d76d0);
z-index: 10 !important;
}
.tabs-head a.on::before {
content: "";
position: absolute;
right: -5px;
bottom: 5px;
width: 6px;
height: 6px;
background: url(/static/portal/img/main/tab-off.png) 100% 100% no-repeat;
}
.tabs-head a:nth-child(1) {
z-index: 5;
}
.tabs-head a:nth-child(2) {
z-index: 4;
}
.tabs-head a:nth-child(3) {
z-index: 3;
}
.tabs-head a:nth-child(4) {
z-index: 2;
}
.tabs-head a:nth-child(5) {
z-index: 1;
}

.tabs-panel {
display: none;
padding: 26px 20px;
border-width: 1px;
border-color: rgb(236, 236, 236);
border-style: solid;
border-radius: 10px;
background-color: rgb(255, 255, 255);
}
.tabs-panel.on {
display: block;
}
@media (max-width: 749px) {
.tabs-panel {
position: relative;
}
.tabs-panel::before {
animation: sk-bouncedelay 3.4s infinite ease-in-out both;
content: "";
position: absolute;
bottom: 4px;
height: 3px;
background-color: var(--mid-blue);
opacity: 0.6;
border-radius: 3px;
width: 200px;
}
}

.issue-list {
width: 100%;
}
@media (max-width: 749px) {
.issue-list {
white-space: nowrap;
overflow-x: auto;
}
.issue-list li {
display: inline-block;
}
.issue-list a {
display: inline-block;
line-height: 60px;
}
.issue-list a img {
vertical-align: middle;
}
}
@media (min-width: 750px) {
.issue-list {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
overflow-x: auto;
gap: 20px;
}
.issue-list li {
flex-shrink: 0;
}
.issue-list a {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.issue-list a i {
flex-shrink: 0;
}
}
@media (min-width: 1300px) {
.issue-list {
align-items: center;
}
}
@media (min-width: 750px) {
.issue-list a:hover span, .issue-list a:focus span {
border-bottom: 2px solid #000;
}
}
.issue-list a span {
font-family: GmarketSans;
font-size: 15px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
letter-spacing: normal;
}
@media (min-width: 1300px) {
.issue-list a span {
font-size: 21px;
}
}

.color-mid-blue-2 {
color: var(--mid-blue-2);
}

.color-rouge {
color: var(--rouge);
}

.color-teal {
color: var(--teal);
}

.color-golden-brown {
color: var(--golden-brown);
}

.color-bright-orange {
color: var(--bright-orange);
}

.servie-nav {
margin-top: 30px;
}

.tabs2-head {
display: flex;
flex-direction: row;
margin-left: 20px;
gap: 5px;
}
@media (max-width: 749px) {
.tabs2-head {
position: relative;
z-index: 1;
margin-left: 14px;
overflow-x: auto;
align-items: flex-start;
}
}
.tabs2-head a {
position: relative;
height: 44px;
padding: 15px 24px;
font-family: GmarketSans;
font-size: 17px;
font-weight: 500;
line-height: 1;
text-align: center;
color: #454545;
border: solid 1px #797979;
border-radius: 0 0 10px 10px;
background-color: #fff;
flex-shrink: 0;
}
@media (max-width: 749px) {
.tabs2-head a {
height: auto;
font-size: 15px;
padding: 11px 20px;
flex-shrink: 0;
}
}
.tabs2-head a::before {
content: "";
position: absolute;
top: 0;
right: -6px;
width: 5px;
height: 5px;
background: url(/static/portal/img/main/tab2-off.png) 100% 0 no-repeat;
}
.tabs2-head a.on {
color: #fff;
background-color: #5489de;
border-color: #5489de;
}
.tabs2-head a.on::before {
background: url(/static/portal/img/main/tab2-on.png) 100% 0 no-repeat;
}
.tabs2-head ~ .tabs-panel {
margin-top: -39px;
}

.servie-nav-list {
padding-top: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
@media (max-width: 749px) {
.servie-nav-list {
width: 100%;
width: calc(100vw - 60px);
overflow-x: auto;
align-items: flex-start;
gap: 10px;
}
}
@media (min-width: 750px) {
.servie-nav-list {
overflow-x: auto;
align-items: flex-start;
gap: 20px;
align-items: center;
justify-content: space-around;
}
}
.servie-nav-list a {
font-family: GmarketSans;
font-weight: 500;
font-style: normal;
line-height: 1.29;
letter-spacing: normal;
text-align: left;
color: #413f3f;
}
@media (max-width: 749px) {
.servie-nav-list a {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
width: 120px;
font-size: 15px;
word-break: keep-all;
text-align: center;
}
}
@media (min-width: 750px) {
.servie-nav-list a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 152px;
font-size: 17px;
white-space: nowrap;
flex-shrink: 0;
transition: property 0.3s;
transition-property: margin;
}
.servie-nav-list a:hover, .servie-nav-list a:focus {
margin-top: -20px;
color: var(--mid-blue);
}
}
[lang=en] .servie-nav-list a {
font-size: 13px;
word-break: break-all;
}
.servie-nav-list a i {
display: block;
}
@media (max-width: 749px) {
.servie-nav-list a img {
height: 44px;
}
}
.servie-nav-list a span {
margin-top: 8px;
display: block;
}

.main-more {
width: 31px;
height: 25px;
}
.main-more::before {
content: "";
display: block;
width: 17px;
height: 17px;
background: url(/static/portal/img/main/tab-extend.png) 0 0 no-repeat;
}

.sbject {
margin-bottom: 14px;
font-weight: bold;
color: #161616;
line-height: 1;
}
@media (max-width: 749px) {
.sbject {
font-size: 21px;
}
}
@media (min-width: 750px) {
.sbject {
padding-left: 8px;
font-size: 25px;
}
}
.sbject span {
color: #245eb0;
}

.mainyoutube {
position: relative;
}
.mainyoutube__more {
position: absolute;
right: 0;
top: 0;
}

.mainyoutube-list {
position: relative;
}
@media (max-width: 749px) {
.mainyoutube-list {
display: none;
}
}
@media (min-width: 750px) {
.mainyoutube-list {
padding-left: calc(100% - 240px);
display: grid;
}
}
.mainyoutube-list .on + a {
display: block;
}
.mainyoutube-list a {
display: block;
position: relative;
aspect-ratio: 16.1/9;
border-radius: 10px;
}
@media (min-width: 750px) {
.mainyoutube-list a {
display: none;
max-height: 100%;
}
}
.mainyoutube-list a:focus {
outline: 1px dashed #000;
outline-offset: 1px;
}
.mainyoutube-list a:hover img, .mainyoutube-list a:focus img {
transform: scale(1.08);
}
@media (min-width: 750px) {
.mainyoutube-list a {
width: calc(100% - 260px);
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
}
.mainyoutube-list a img {
transition: all 0.3s ease-in-out;
vertical-align: top;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
overflow: hidden;
}
@media (max-width: 749px) {
.mainyoutube-list a img {
max-width: 320px;
}
}
.mainyoutube-list a::before {
content: "";
position: absolute;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 71px;
height: 71px;
border-radius: 71px;
background: url(/static/portal/img/main/play.png) 0 0 no-repeat;
z-index: 1;
}
.mainyoutube-list__link-txt {
display: none;
}
@media (max-width: 749px) {
.mainyoutube-list__link-txt {
display: block;
position: absolute;
left: 0;
bottom: 0;
padding: 5px;
width: 100%;
background-color: rgba(255, 255, 255, 0.6666666667);
}
}
@media (min-width: 750px) {
.mainyoutube-list li + li {
border-top: 1px solid #e8eaf1;
}
}
@media (max-width: 749px) {
.mainyoutube-list ul {
display: flex;
gap: 20px;
overflow-x: auto;
width: calc(100vw - 40px);
}
.mainyoutube-list ul li {
flex-shrink: 0;
}
}
@media (min-width: 750px) {
.mainyoutube-list ul {
height: 100%;
padding: 20px 6px;
border-radius: 10px;
background-color: #fafafe;
}
}
.mainyoutube-list button {
display: none;
padding: 11px;
font-family: GmarketSans;
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: normal;
text-align: left;
color: #2f2f2f;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
max-width: 228px;
}
@media (min-width: 750px) {
.mainyoutube-list button {
display: block;
}
.mainyoutube-list button:hover, .mainyoutube-list button:focus {
text-decoration: underline;
}
}
.mainyoutube-list button::before {
content: "· ";
}
.mainyoutube-list button.on {
color: #245eb0;
}

.main-notices {
margin-top: 50px;
display: grid;
gap: 44px 40px;
}
@media (min-width: 1200px) {
.main-notices {
grid-template-columns: repeat(2, 1fr);
}
}

.notice-panel {
position: relative;
display: none;
background: #fff url(/static/portal/img/main/tabs-dot-x.png) 0 0 repeat-x;
min-height: 202px;
}
.notice-panel.on {
display: block;
}
@media (min-width: 750px) {
.notice-panel__more {
position: absolute;
right: 0;
top: -34px;
}
}
@media (max-width: 749px) {
.notice-panel__more {
display: none;
}
.notice-panel__more.mobile {
display: block;
margin: 20px auto;
width: 44px;
height: 22px;
background: url(/static/portal/img/main/more_btn.png) 0 0 no-repeat;
}
.notice-panel__more.mobile::before {
display: none;
}
.area-notice .notice-panel__more {
display: block;
margin: 20px auto;
width: 44px;
height: 22px;
background: url(/static/portal/img/main/drow_btn.png) 0 0 no-repeat;
}
.area-notice .notice-panel__more::before {
display: none;
}
}

.list-app {
padding-top: 10px;
}
.list-app li {
margin-top: 10px;
gap: 7px;
display: flex;
width: 100%;
font-size: 15px;
}
@media (min-width: 750px) {
.list-app li {
font-size: 17px;
}
.list-app li:hover {
background-color: #f8f9fb;
}
}
@media (max-width: 749px) {
.list-app li {
gap: 0 6px;
}
}
.list-app li a {
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
flex-grow: 1;
font-family: GmarketSans;
font-weight: 500;
color: #2f2f2f;
}
.ie .list-app li a {
display: block;
height: 16px;
overflow: hidden;
}
@media (max-width: 749px) {
.list-app li a {
width: 100%;
}
}
@media (min-width: 750px) {
.list-app li a:focus {
background-color: #f8f9fb;
}
}
.list-app li a::before {
content: "· ";
}
.list-app .list-app__txt-set {
display: grid;
align-items: center;
}
@media (min-width: 750px) {
.list-app .list-app__txt-set {
grid-template-columns: auto 170px;
gap: 8px;
}
}
.list-app .list-app__txt-set::before {
display: none;
}
.list-app .list-app__txt-set .txt {
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.ie .list-app .list-app__txt-set .txt {
display: block;
height: 16px;
overflow: hidden;
}
.list-app .list-app__txt-set .txt::before {
content: "· ";
}
.list-app .list-app__txt-set .date {
font-size: 14px;
}
@media (max-width: 749px) {
.list-app .list-app__txt-set .date {
padding-left: 12px;
}
}
@media (min-width: 750px) {
.list-app .list-app__txt-set .date {
text-align: right;
}
}
.list-app li > span {
width: 68px;
padding-top: 2px;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #fff;
font-size: 15px;
font-weight: 500;
text-align: center;
flex-shrink: 0;
}
@media (max-width: 749px) {
.list-app li > span {
flex-shrink: 0;
}
}
[lang=en] .list-app li > span {
display: block;
font-size: 11px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: left;
}
.list-app .first {
border: solid 1px #648fd4;
background-color: #5489de;
}
.list-app .ing {
border: solid 1px #098c94;
background-color: #0d9ca5;
}
.list-app .ing--접수마감 {
border-color: var(--steel);
background-color: var(--steel);
}
.list-app .day {
width: 100px;
flex-shrink: 0;
font-weight: 500;
color: #909090;
}
@media (max-width: 749px) {
.list-app .day {
width: 50px;
}
}
@media (max-width: 749px) {
.list-app .day .year {
display: none;
}
}

.main-photo-list a {
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-family: GmarketSans;
font-weight: 500;
color: #2f2f2f;
}
.ie .main-photo-list a {
display: block;
height: 16px;
overflow: hidden;
}
.main-photo-list a::before {
content: "· ";
}
.main-photo-list .i {
display: none;
}
.main-photo-list li:first-child .i {
display: block;
}
@media (max-width: 749px) {
.main-photo-list li:first-child .i {
text-align: center;
}
}
@media (max-width: 749px) {
.main-photo-list {
padding-top: 187px;
}
.main-photo-list a {
font-size: 15px;
}
.main-photo-list .i {
position: absolute;
left: 0;
top: 10px;
width: 100%;
}
.main-photo-list .i img {
max-width: 258px;
vertical-align: top;
border-radius: 10px;
}
}
@media (min-width: 750px) {
.main-photo-list {
padding-top: 10px;
padding-left: 300px;
}
.main-photo-list li {
margin-top: 10px;
gap: 7px;
display: flex;
width: 100%;
}
.main-photo-list li:hover, .main-photo-list li:focus {
background-color: #f8f9fb;
}
.main-photo-list .i {
position: absolute;
left: 0;
top: 29px;
width: 268px;
}
.main-photo-list .i img {
width: 100%;
vertical-align: top;
}
.main-photo-list a {
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
flex-grow: 1;
font-family: GmarketSans;
font-size: 17px;
font-weight: 500;
color: #2f2f2f;
}
.ie .main-photo-list a {
display: block;
height: 16px;
overflow: hidden;
}
.main-photo-list a::before {
content: "· ";
}
}

.popup-banner {
margin: 50px 0 40px;
padding: 40px 0 44px;
background-image: linear-gradient(to right, #f5faff, #e9fbfa);
}
.popup-banner__tit {
height: 22px;
margin: 0 11px 25px 1px;
font-family: GmarketSans;
font-size: 25px;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
font-weight: 500;
color: #161616;
}
.popup-banner__tit strong {
font-weight: bold;
color: #245eb0;
}
.popup-banner__tit span {
display: inline-block;
margin-left: 10px;
font-family: Montserrat;
font-size: 15px;
font-weight: 600;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #89898a;
}
.popup-banner__ctrl {
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 7px;
}
.popup-banner__ctrl button {
width: 36px;
height: 36px;
}
.popup-banner__pager-first {
background-image: url(/static/portal/img/main/pager-first.png);
}
.popup-banner__pager-prev {
background-image: url(/static/portal/img/main/pager-prev.png);
}
.popup-banner__play_btn {
background-image: url(/static/portal/img/main/play_btn.png);
}
.popup-banner__pause_btn {
background-image: url(/static/portal/img/main/pause_btn.png);
}
.popup-banner__pager-next {
background-image: url(/static/portal/img/main/pager-next.png);
}
.popup-banner__pager-end {
background-image: url(/static/portal/img/main/pager-end.png);
}
.popup-banner__all-open {
background-image: url(/static/portal/img/main/ad-list-open.png);
}
.popup-banner__pagination {
width: auto;
line-height: 1;
font-family: SUIT;
font-size: 15px;
background-color: #fff;
border-radius: 50px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 36px;
padding: 0 10px;
border: 1px solid #f1f1f1;
}

.popup-banner-swiper {
position: relative;
}
@media (max-width: 749px) {
.popup-banner-swiper {
margin: 0 -20px;
}
}
.popup-banner-swiper::before {
content: "";
height: 100%;
width: 60px;
position: absolute;
left: 0;
z-index: 10;
}

.swiper {
width: 100%;
}

.popup-banner-swiper-area .swiper-slide {
background-position: center;
background-size: cover;
width: 550px;
height: 330px;
border-radius: 10px;
overflow: hidden;
padding: 1px;
}
@media (max-width: 749px) {
.popup-banner-swiper-area .swiper-slide {
width: 90%;
height: auto;
}
}
@media (min-width: 750px) {
.popup-banner-swiper-area .swiper-slide {
box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.1);
}
}
.popup-banner-swiper-area .swiper-slide img {
width: calc(100% + 2px);
border: 1px solid transparent;
transition: all 0.5 ease-out;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);
border-radius: 10px;
vertical-align: top;
}
.popup-banner-swiper-area .swiper-slide .n {
position: absolute;
}

.popup-banner-swiper-area .swiper-slide-active img {
border: 1px solid var(--bdcolor);
}
.popup-banner-swiper-area .swiper-slide img {
display: block;
width: 100%;
height: 100%;
}
.popup-banner-swiper-area a:focus img {
outline: 1px dashed #000;
outline-offset: 0px;
}

.main-ad-list {
overflow-x: auto;
}
@media (max-width: 749px) {
.main-ad-list {
position: relative;
}
.main-ad-list::before {
animation: sk-bouncedelay 3.4s infinite ease-in-out both;
content: "";
position: absolute;
bottom: 4px;
height: 3px;
background-color: var(--mid-blue);
opacity: 0.6;
border-radius: 3px;
width: 200px;
}
}
.main-ad-list ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
@media (max-width: 749px) {
.main-ad-list ul {
width: 1200px;
}
}
@media (min-width: 750px) {
.main-ad-list ul {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
padding: 2px 0;
}
}
@media (max-width: 749px) {
.main-ad-list li {
flex-basis: calc((100% - 30px) / 4);
}
}
.main-ad-list a {
display: block;
overflow: hidden;
border-radius: 6px;
}
@media (min-width: 750px) {
.main-ad-list a:hover {
outline: 2px solid var(--mid-blue);
outline-offset: -2px;
}
}
.main-ad-list a img {
vertical-align: top;
}
@media (max-width: 749px) {
.main-ad-list a img {
width: 100%;
max-width: 320px;
}
}

.area-notice {
margin-top: 44px;
margin: 44px 0 64px;
}
@media (max-width: 749px) {
.area-notice {
margin-bottom: 20px;
}
}

.area-notice-list {
overflow-x: auto;
}
@media (max-width: 749px) {
.area-notice-list {
position: relative;
}
.area-notice-list::before {
animation: sk-bouncedelay 3.4s infinite ease-in-out both;
content: "";
position: absolute;
bottom: 4px;
height: 3px;
background-color: var(--mid-blue);
opacity: 0.6;
border-radius: 3px;
width: 200px;
}
}
@media (max-width: 749px) {
.area-notice-list ul {
padding-top: 10px;
display: flex;
align-items: flex-start;
}
}
.area-notice-list ul li {
flex-basis: 116px;
word-break: keep-all;
padding-top: 5px;
flex-shrink: 0;
}
@media (min-width: 750px) {
.area-notice-list ul {
height: 217px;
gap: 15px;
display: flex;
word-break: break-all;
}
}
@media (min-width: 1200px) {
.area-notice-list ul {
height: 217px;
overflow: hidden;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 30px;
}
}
.area-notice-list a {
word-break: keep-all;
transition: property 0.3s;
transition-property: margin;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
}
@media (min-width: 750px) {
.area-notice-list a {
padding-top: 35px;
}
.area-notice-list a:hover, .area-notice-list a:focus {
margin-top: -20px;
}
.area-notice-list a:hover span, .area-notice-list a:focus span {
color: var(--mid-blue);
}
}
.area-notice-list a i {
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
@media (max-width: 749px) {
.area-notice-list a i {
height: 60px;
}
}
@media (max-width: 749px) {
.area-notice-list a img {
height: 100%;
}
}
.area-notice-list a span {
display: block;
font-family: GmarketSans;
font-size: 15px;
font-weight: 500;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
text-align: center;
color: #2d2d2d;
}
@media (min-width: 750px) {
.area-notice-list a span {
font-size: 18px;
}
}

.area-notice-more-list {
display: none;
position: relative;
}
.area-notice-more-list.on {
display: block;
}
@media (max-width: 749px) {
.area-notice-more-list {
padding: 40px 16px;
border-radius: 20px;
background-color: rgb(250, 250, 254);
}
.area-notice-more-list .i {
position: absolute;
top: 40px;
right: 45px;
}
.area-notice-more-list .i img {
height: 100px;
}
}
@media (min-width: 750px) {
.area-notice-more-list {
padding: 35px 55px 35px 12%;
border-radius: 30px;
background: #fafafe url(/static/portal/img/main/area-extend-deco.png) 40px 64px no-repeat;
}
.area-notice-more-list .i {
position: absolute;
top: 169px;
left: 11.1%;
}
}
.area-notice-more-list__close {
position: absolute;
right: 20px;
top: 35px;
width: 25px;
height: 25px;
background: url(/static/portal/img/main/area-panel-close.png) center center no-repeat;
}
.area-notice-more-list dl {
display: grid;
}
@media (max-width: 749px) {
.area-notice-more-list dl {
gap: 24px;
}
}
@media (min-width: 750px) {
.area-notice-more-list dl {
grid-template-columns: 190px auto;
}
}
@media (max-width: 749px) {
.area-notice-more-list dt {
padding-left: 20px;
}
}
@media (min-width: 750px) {
.area-notice-more-list dt {
padding-top: 22px;
}
}
.area-notice-more-list dt strong {
font-family: GmarketSans;
font-size: 30px;
font-weight: bold;
color: var(--mid-blue);
line-height: 1;
}
@media (max-width: 749px) {
.area-notice-more-list dt strong {
font-size: 22px;
}
}
.area-notice-more-list dt span {
display: block;
margin-top: 16px;
line-height: 1.5;
color: #646363;
}
@media (max-width: 749px) {
.area-notice-more-list dt span {
margin-top: 12px;
}
}
.area-notice-more-list dd {
background-color: #fff;
border-radius: 30px;
}
@media (max-width: 749px) {
.area-notice-more-list dd {
padding: 20px;
}
}
@media (min-width: 750px) {
.area-notice-more-list dd {
padding: 30px 40px;
min-height: 296px;
}
}
.area-notice-more-list dd ul {
display: flex;
flex-wrap: wrap;
gap: 12px 10px;
}
.area-notice-more-list dd a {
display: block;
font-family: GmarketSans;
font-size: 16px;
font-weight: 500;
padding: 10px 25px 7px;
line-height: 1.3;
border-radius: 21.5px;
border: solid 1px #ccc;
}

.mainyoutube-list-mobile {
display: none;
overflow: hidden;
width: calc(100vw - 40px);
}
@media (max-width: 749px) {
.mainyoutube-list-mobile {
display: block;
}
}
.mainyoutube-list-mobile .swiper-slide {
text-align: center;
width: calc(100vw - 60px);
}
.mainyoutube-list-mobile .swiper-slide img {
vertical-align: top;
aspect-ratio: 16/9;
object-fit: cover;
width: 100%;
}
.mainyoutube-list-mobile .swiper-slide a {
display: flex;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.mainyoutube-list-mobile__link-txt {
display: block;
position: absolute;
left: 0;
bottom: 0;
padding: 5px;
width: 100%;
background-color: rgba(255, 255, 255, 0.6666666667);
}
@keyframes sk-bouncedelay {
0%, 80% {
transform: translateX(30px);
}
40% {
transform: translateX(0);
}
100% {
transform: translateX(30px);
opacity: 0;
}
}
.banner-all {
display: none;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100vh;
z-index: 9999;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0;
}
@media (min-width: 750px) {
.banner-all {
padding: 20px;
}
}
.banner-all.on {
display: flex;
}
.banner-all__set {
position: relative;
max-width: 1240px;
background-color: #fff;
overflow: hidden;
padding-bottom: 29px;
}
@media (min-width: 750px) {
.banner-all__set {
border-radius: 15px;
}
}
.banner-all__close {
position: absolute;
top: 1px;
right: 1px;
background: url(/static/portal/img/main/e-5-cd-close.png) center center no-repeat;
}
@media (max-width: 749px) {
.banner-all__close {
width: 50px;
height: 50px;
background-size: 20px;
}
}
@media (min-width: 750px) {
.banner-all__close {
height: 78px;
width: 120px;
}
}
.banner-all__close2 {
display: block;
margin: 16px auto 0;
width: 170px;
padding: 14px 0;
line-height: 1;
font-family: GmarketSans;
font-size: 18px;
font-weight: 500;
color: #fff;
border-radius: 21.5px;
border: solid 1px var(--mid-blue);
background-color: var(--mid-blue);
}
.banner-all__tit {
box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.15);
background-image: linear-gradient(120deg, var(--mid-blue), var(--teal));
font-family: GmarketSans;
font-weight: bold;
color: #fff;
line-height: 1;
padding: 15px;
font-size: 20px;
}
@media (min-width: 750px) {
.banner-all__tit {
padding: 29px 10px 26px;
font-size: 25px;
text-align: center;
}
}
.banner-all__body {
border: 1px solid #d8d8d8;
border-width: 1px 0;
margin: 22px 30px;
}
.banner-all__body img {
border-radius: 10px;
box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #e9e9f3;
}
.banner-all__ov {
padding: 22px 0;
padding-right: 10px;
overflow-y: auto;
max-height: calc(100vh - 250px);
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 15px;
}
@media (max-width: 749px) {
.banner-all__ov {
max-height: calc(100vh - 173px);
}
}
@media (min-width: 750px) {
.banner-all__ov {
gap: 22px;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.banner-all__ov {
grid-template-columns: repeat(3, 1fr);
}
}
.banner-all__ov::-webkit-scrollbar {
width: 8px; /* 세로축 스크롤바 길이 */
height: 10px; /* 가로축 스크롤바 길이 */
}
.banner-all__ov::-webkit-scrollbar-track {
background-color: transparent;
background-color: rgba(255, 255, 255, 0.5);
background-color: #f0f1f2;
border-radius: 10px;
}
.banner-all__ov::-webkit-scrollbar-track-piece {
background-color: transparent;
}
.banner-all__ov::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: var(--mid-blue, #fff);
}
.banner-all__ov::-webkit-scrollbar-button {
width: 20px;
height: 10px;
}
.banner-all__ov::-webkit-scrollbar-corner {
background-color: violet; /* 우측 하단의 코너 부분 */
}
.banner-all__ov::-webkit-resizer {
background-color: green;
}
.top-banner__con {
text-align: center;
}
.top-banner__con img {
vertical-align: top;
}
@media (max-width: 749px) {
.top-banner__con .pc {
display: none;
}
}
.top-banner__con .pc img {
height: 93px;
object-fit: cover;
}
@media (min-width: 750px) {
.top-banner__con .mobile {
display: none;
}
}
.top-banner__con a {
display: block;
}
.top-banner__ctrl {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
text-align: right;
height: 24px;
margin-top: -24px;
pointer-events: none;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.top-banner__close {
pointer-events: fill;
border-radius: 3px;
padding: 0 10px;
height: 23px;
color: #fff;
font-size: 12px;
line-height: 11px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 5px;
background-color: #78b47b;
}
.top-banner__close::before {
content: "";
background-image: url(/static/portal/img/sprite-common.png?20241017163355);
background-position: -31px -577px;
width: 11px;
height: 11px;
display: inline-block;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.top-banner__close::before {
background-image: url(/static/portal/img/sprite-common@2x.png?20241017163355);
background-size: 609px 593px;
}
}
/*# sourceMappingURL=main.css.map */