@charset "utf-8";
@font-face {
    font-family:'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.Mconts {font-size:20px; clear:both;}
.Mconts .inner {max-width:1680px; position:relative; margin:0 auto; box-sizing:border-box;}
.Mconts img {max-width:100%;}
.Mconts button {font-size:1em;}

@media all and (max-width:1024px) {.Mconts {font-size:19px;}}
@media all and (max-width:780px) {.Mconts {font-size:18px;}}
@media all and (max-width:640px) {.Mconts {font-size:17px;}}
@media all and (max-width:480px) {.Mconts {font-size:16px;}}
@media all and (max-width:380px) {.Mconts {font-size:15px;}}

.trans {transition:.8s all; -webkit-transition:.8s all;}
.trans-delay-1s {transition-delay:.1s; -webkit-transition-delay:.1s;}
.trans-delay-2s {transition-delay:.2s; -webkit-transition-delay:.2s;}
.trans-delay-3s {transition-delay:.3s; -webkit-transition-delay:.3s;}
.trans-delay-4s {transition-delay:.4s; -webkit-transition-delay:.4s;}
.trans-delay-5s {transition-delay:.5s; -webkit-transition-delay:.5s;}
.trans-delay-6s {transition-delay:.6s; -webkit-transition-delay:.6s;}
.trans-delay-7s {transition-delay:.7s; -webkit-transition-delay:.7s;}
.trans-delay-8s {transition-delay:.8s; -webkit-transition-delay:.8s;}
.trans-delay-9s {transition-delay:.9s; -webkit-transition-delay:.9s;}
.trans-delay-10s {transition-delay:1s; -webkit-transition-delay:1s;}

.trans-duration-1s {transition-duration:.1s; -webkit-transition-duration:.1s;}
.trans-duration-2s {transition-duration:.2s; -webkit-transition-duration:.2s;}
.trans-duration-3s {transition-duration:.3s; -webkit-transition-duration:.3s;}
.trans-duration-4s {transition-duration:.4s; -webkit-transition-duration:.4s;}
.trans-duration-5s {transition-duration:.5s; -webkit-transition-duration:.5s;}
.trans-duration-6s {transition-duration:.6s; -webkit-transition-duration:.6s;}
.trans-duration-7s {transition-duration:.7s; -webkit-transition-duration:.7s;}
.trans-duration-8s {transition-duration:.8s; -webkit-transition-duration:.8s;}
.trans-duration-9s {transition-duration:.9s; -webkit-transition-duration:.9s;}
.trans-duration-10s {transition-duration:1s; -webkit-transition-duration:1s;}


/****************************************************************
	Slider Common Style
****************************************************************/

.slider .swiper-slide {width:100%;}
.slider .swiper-slide > a {display:block;}
.slider .swiper-slide img {display:block; max-width:100%;}

.fix-scroll .swiper-container {display:block; position:relative;}
.fix-scroll .swiper-wrapper {display:block !important; transform:none !important; -webkit-transform:none !important; height:100% !important; overflow:auto; white-space:nowrap;}
.fix-scroll .swiper-wrapper li {display:inline-block !important; vertical-align:top; transform:none !important; -webkit-transform:none !important; opacity:1 !important;}
.fix-scroll .swiper-wrapper li a {display:block; position:relative;}
.fix-scroll .swiper-wrapper li a:focus:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:5px solid rgba(0,0,0,.5); z-index:2;}

.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}


/****************************************************************
	Visual
****************************************************************/

.visualWrap {position:relative; overflow:hidden; z-index:0;}
.visualWrap .inner {max-width:1520px; padding:2.5em 1em;}
.visualWrap .mayor-prof {position:absolute; bottom:0; left:0; right:0; text-align:center; height:91%; max-height:540px;}
.visualWrap .mayor-prof img {max-height:100%;}

.visualWrap .tit {display:block; position:relative; overflow:hidden; padding:2em 0;}
.visualWrap .tit > * {display:block; width:50%; float:left; box-sizing:border-box; padding-right:2em;}
.visualWrap .tit > * + * {text-align:right; padding-left:2em; padding-right:0;}
.visualWrap .txt {clear:both;}
.visualWrap .txt .txt {max-width:50%;}
.visualWrap .sign {padding-top:2em; max-width:40%;}
.visualWrap .sign > span {padding-right:.5em; font-weight:600; color:#000;}
.visualWrap .sign img {height:2.1em;}

.visual {display:block; position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; z-index:-1;}
.visual .slider {display:block; position:relative; height:100%; overflow:hidden;}
.visual .slider .swiper-container {}
.visual .slider .swiper-container,
.visual .slider .swiper-wrapper,
.visual .slider .swiper-slide {height:100%;}
.visual .slider .swiper-slide {}
.visual .slider .swiper-slide > * {display:block; position:relative; height:100%; background:no-repeat 50% 50%; background-size:cover;}

/* Animation State */
.visualWrap:not(.active) .tit > * {transform:translateY(30%); -webkit-transform:translateY(30%); opacity:0;}
.visualWrap:not(.active) .txt,
.visualWrap:not(.active) .sign {transform:translateX(-10%); -webkit-transform:translateX(-10%); opacity:0;}

@media all and (max-width:1300px) {.visualWrap .mayor-prof {padding-left:3em;}}
@media all and (max-width:1200px) {.visualWrap .inner {padding-top:1em;}}
@media all and (max-width:1024px) {.visualWrap .txt .txt {display:none !important;}}
@media all and (max-width:640px) {.visualWrap .sign {font-size:.8em;}}
@media all and (max-width:470px) {.visualWrap .sign span {display:block;}}


/****************************************************************
	Quick Icons
****************************************************************/

.quickWrap {padding:5em 1em; overflow:hidden;}
.quickWrap ul {overflow:hidden;}
.quickWrap li {display:block; position:relative; float:left; width:20%;}
.quickWrap li a {display:table; width:100%; table-layout:fixed;}
.quickWrap li a > * {display:table-cell; vertical-align:middle;}
.quickWrap li a em {width:5em; height:5em;}
.quickWrap li a em:before {content:""; display:block; position:relative; width:5em; height:5em; max-width:100%; max-height:100%; background:no-repeat 50% 50%; background-size:contain; transition:.3s all; -webkit-transition:.3s all;}
.quickWrap li dl {padding:0 1em;}
.quickWrap li dt {font-size:1.1em; font-weight:500; color: #141414; letter-spacing:-0.1em; margin-bottom:.1em;}
.quickWrap li dd {font-size:.8em; color:#666; word-break:keep-all; line-height:1.5;}

.quickWrap ul li a:hover em:before {transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg);}
.quickWrap ul li:nth-child(1) a em:before {background-image:url('/gjmayor/img/main/ico_main04.png');}
.quickWrap ul li:nth-child(1) a:hover em:before {background-image:url('/gjmayor/img/main/ico_main04_on.png');}
.quickWrap ul li:nth-child(2) a em:before {background-image:url('/gjmayor/img/main/ico_main01.png');}
.quickWrap ul li:nth-child(2) a:hover em:before {background-image:url('/gjmayor/img/main/ico_main01_on.png');}
.quickWrap ul li:nth-child(3) a em:before {background-image:url('/gjmayor/img/main/ico_main02.png');}
.quickWrap ul li:nth-child(3) a:hover em:before {background-image:url('/gjmayor/img/main/ico_main02_on.png');}
.quickWrap ul li:nth-child(4) a em:before {background-image:url('/gjmayor/img/main/ico_main03.png');}
.quickWrap ul li:nth-child(4) a:hover em:before {background-image:url('/gjmayor/img/main/ico_main03_on.png');}
.quickWrap ul li:nth-child(5) a em:before {background-image:url('/gjmayor/img/main/ico_main05.png');}
.quickWrap ul li:nth-child(5) a:hover em:before {background-image:url('/gjmayor/img/main/ico_main05_on.png');}

/* Animation State */
.quickWrap:not(.active) ul {transform:translateY(30%); -webkit-transform:translateY(30%); opacity:0;}

@media all and (max-width:1400px) and (min-width:641px) {
	.quickWrap li a,
	.quickWrap li a > * {display:block; text-align:center;}
	.quickWrap li a em {margin:0 auto 1em;}
}
@media all and (max-width:1024px) {
	.quickWrap {padding:3em 0;}
	.quickWrap li dl {padding:0 .5em;}
}
@media all and (max-width:640px) {
	.quickWrap {padding:1em 0 3em;}
	.quickWrap li {display:inline-block; position:relative; width:50%; float:none; vertical-align:top; padding:.5em; box-sizing:border-box;}
	.quickWrap li a em {width:3em; height:3em; vertical-align:top;}
	.quickWrap li a em:before {height:3em;}
	.quickWrap li a dl {vertical-align:top; padding-right:0;}
	.quickWrap li dd {min-height:3em;}
	.quickWrap li dd br {display:none !important;}
}
@media all and (max-width:495px) {
	.quickWrap li {display:block; width:auto; padding:1em;}
	.quickWrap li dd {min-height:0em;}
}


/****************************************************************
	Community Icons
****************************************************************/

.communityWrap {display:block; position:relative; padding:0 1em 5em;}
.communityWrap .title,
.communityWrap .title * {font-family:'GmarketSansBold', 'Sans-serif';}
.communityWrap .title {font-size:2em; color:#000; margin-bottom:.5em;}
.communityWrap .title em {color:#2099c0;}
.communityWrap .title em i {position:relative;}
.communityWrap .title em i:before {content:""; display:block; position:absolute; top:0; left:50%; margin-top:-.3em; margin-left:-.075em; width:.15em; height:.15em; border-radius:100%; background:#2099c0;}
.communityWrap .swiper-container {overflow:visible;}
.communityWrap .slider .swiper-slide {width:auto; opacity:0; transition:.3s opacity; -webkit-transition:.3s opacity;}

.communityWrap .slider .swiper-slide-active,
.communityWrap .slider .swiper-slide-prev ~ .swiper-slide,
 .communityWrap .slider .swiper-slide-active ~ .swiper-slide {opacity:1;}
 .communityWrap .slider .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide ~ .swiper-slide {opacity:0;}

.communityWrap .comm-item {display:block; position:relative; width:15.8em; border-radius:3em 0; border:1px solid #fff; box-sizing:border-box; overflow:hidden;}
.communityWrap .comm-item:hover {border:1px solid #ddd;transform:translateY(0.5em); -webkit-transform:translateY(0.5em); -webkit-box-shadow:1em 1em 1.5em 0px rgba(0,0,0,0.1); -moz-box-shadow:1em 1em 1.5em 0px rgba(0,0,0,0.1); box-shadow:1em 1em 1.5em 0px rgba(0,0,0,0.1);}
.communityWrap .comm-item .thumb {display:block; position:relative; height:13em; overflow:hidden;}
.communityWrap .comm-item .thumb img {display:block; position:absolute; height:100%; left:50%; top:0; max-width:unset; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
.communityWrap .comm-item .txtBox {display:block; position:relative; padding:1.25em 1.5em;}
.communityWrap .comm-item .txtBox .subj {display:block; font-weight:500; color:#000; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.communityWrap .comm-item .txtBox .txt {display:block; position:relative; font-size:.8em; color:#666; line-height:1.5em; height:3em; overflow:hidden; word-break:keep-all; margin-bottom:1.5em;}
.communityWrap .comm-item .txtBox .txt {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.communityWrap .comm-item .txtBox .date {display:block; position:relative; font-family:'Play', sans-serif; font-size:.9em; color:#888; text-align:right;}
.communityWrap .comm-item .txtBox .date:before {content:""; display:inline-block; width:1em; height:1em; vertical-align:middle; margin-right:.5em; background:url(/gjmayor/img/main/ico_date.png) no-repeat 0 50%; background-size:contain;}

.communityWrap .control {position:absolute; right:0; top:.5em;}
.communityWrap .control > * {display:inline-block; position:relative; vertical-align:middle; width:1.75em; height:1.75em; border-radius:100%; overflow:hidden; text-indent:-999px;}
.communityWrap .control .next,
.communityWrap .control .prev,
.communityWrap .control .more {background:no-repeat 50% 50%; background-size:.5em auto; opacity:.4;}
.communityWrap .control .next {background-image:url(/gjmayor/img/main/photo_next.png);}
.communityWrap .control .prev {background-image:url(/gjmayor/img/main/photo_prev.png);}
.communityWrap .control .next:hover,
.communityWrap .control .prev:hover {opacity:1;}
.communityWrap .control .more {background-image:url(/gjmayor/img/main/photo_more.png); background-size:contain; opacity:1;}

/* Animation State */
.communityWrap:not(.active) .inner {transform:translateY(30%); -webkit-transform:translateY(30%); opacity:0;}

@media all and (max-width:640px) {
	.communityWrap {padding-bottom:4em;}
}


/****************************************************************
	News Area
****************************************************************/

.newsWrap {display:block; position:relative; padding:3em 1em 4em; background:url(../img/main/section03_bg.jpg) no-repeat 50% 100%; background-size:cover;}

.newsWrap .newArea {display:block; position:relative; min-height:21.4em; margin-right:21.25em;}
.newsWrap .newArea .box {display:table; width:100%; table-layout:fixed;}
.newsWrap .newArea .box > * {display:table-cell; vertical-align:top;}
.newsWrap .newArea .box .tit-box {width:14em;}

.newsWrap .newArea .title,
.newsWrap .newArea .title * {font-family:'GmarketSansBold', 'Sans-serif';}
.newsWrap .newArea .title {font-size:2em; color:#000; margin-bottom:.5em; padding-top:1em;}
.newsWrap .newArea .title em {display:block; color:#b505ca; line-height:1.2;}
.newsWrap .newArea .title em i {position:relative;}
.newsWrap .newArea .title em i:before {content:""; display:block; position:absolute; top:0; left:50%; margin-top:-.3em; margin-left:-.075em; width:.15em; height:.15em; border-radius:100%; background:#b505ca;}

.newsWrap .newArea .tit-box .txt {color:#999; font-size:.85em; word-break:keep-all; line-height:1.5; margin-bottom:2.9em;}
.newsWrap .newArea .link {display:block; position:relative;}
.newsWrap .newArea .link li + li {margin-top:.75em;}
.newsWrap .newArea .link a {display:block; position:relative; max-width:10.5em; border-radius:9em; font-size:.9em; padding:.8em 1.5em; color:#fff; background:#373737 url(../img/main/news_arrow.png) no-repeat right 1em top 50%; background-size:.833333em auto; box-sizing:border-box;}
.newsWrap .newArea .link .hope a {background-color:#b505ca;}

.newsWrap .newArea .board-list {display:block; position:relative;}
.newsWrap .newArea .board-list li + li {margin-top:.75em;}
.newsWrap .newArea .board-list a {display:block; position:relative; padding:1em 1.5em; transition:.3s all; -webkit-transition:.3s all;}
.newsWrap .newArea .board-list .subj {display:block; position:relative; margin-right:5.5em; color:#000; font-size:1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:1em;}
.newsWrap .newArea .board-list .txt {display:block; position:relative; font-size:.85em; line-height:1.4em; height:2.8em; overflow:hidden; word-break:keep-all;}
.newsWrap .newArea .board-list .txt {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.newsWrap .newArea .board-list .date {display:block; position:absolute; top:1.11em; right:1.66em; font-size:.9em; font-family:'Play', sans-serif; color:#888; text-align:right;}
.newsWrap .newArea .board-list .date:before {content:""; display:inline-block; width:1em; height:1em; vertical-align:middle; margin-right:.5em; background:url(/gjmayor/img/main/ico_date.png) no-repeat 0 50%; background-size:contain;}
.newsWrap .newArea .board-list a:hover {background:#fff; -webkit-box-shadow:0 1.25em 1em 0 rgba(10,64,139,.15); -moz-box-shadow:0 1.25em 1em 0 rgba(10,64,139,.15); box-shadow:0 1.25em 1em 0 rgba(10,64,139,.15);}
.newsWrap .newArea .board-list a:hover .subj {text-decoration:underline;}

.newsWrap .promiseArea {display:block; position:absolute; top:0; right:0; width:19.25em; height:21.4em; padding:1.5em 2em; box-sizing:border-box; background:url(/gjmayor/img/main/promise_bg.png) no-repeat #5234ab; background-size:cover; border-radius:0 3em 0 3em;
	-webkit-box-shadow:0 1.25em 1em 0 rgba(10,64,139,.15); -moz-box-shadow:0 1.25em 1em 0 rgba(10,64,139,.15); box-shadow:0 1.25em 1em 0 rgba(10,64,139,.15);
}
.newsWrap .promiseArea .promise {position:relative; padding-top:3.5em;}
.newsWrap .promiseArea .promise:before {content:""; display:block; position:relative; width:4.4em; height:4.4em; margin:0 auto; background:url(../img/main/ico_promise.png) no-repeat 50% 50%; background-size:contain;}

.newsWrap .promiseArea .promise .control {display:block; position:absolute; top:0; left:0; right:0;}
.newsWrap .promiseArea .promise .control > * {display:inline-block; width:auto; vertical-align:middle;}
.newsWrap .promiseArea .promise .control .pager {margin-right:1em;}
.newsWrap .promiseArea .promise .control .pager .swiper-pagination-bullet {text-indent:-999px; font-size:1em; width:.6em; height:.6em; border-radius:100%; box-sizing:border-box; border:1px solid #fff; overflow:hidden; background:transparent;}
.newsWrap .promiseArea .promise .control .pager .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:.4em;}
.newsWrap .promiseArea .promise .control .pager .swiper-pagination-bullet-active {background:#fff;}
.newsWrap .promiseArea .promise .control .stop,
.newsWrap .promiseArea .promise .control .play {position:relative; width:1.5em; height:1.5em; overflow:hidden; text-indent:-999px; font-size:.7em; color:#fff; opacity:.7;}
.newsWrap .promiseArea .promise .control .play {display:none;}
.newsWrap .promiseArea .promise .control .stop:hover,
.newsWrap .promiseArea .promise .control .play:hover {opacity:1;}
.newsWrap .promiseArea .promise .control .stop:before {content:"■"; display:block; position:absolute; top:50%; left:50%; text-indent:0; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.newsWrap .promiseArea .promise .control .play:before {content:"▶"; display:block; position:absolute; top:50%; left:50%; text-indent:0; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}

.newsWrap .promiseArea .promise-item {display:block; position:relative; text-align:center; color:#fff; padding:1.25em 0;}
.newsWrap .promiseArea .promise-item p {font-size:1.6em; font-family:'GmarketSansBold', 'Sans-serif'; word-break:keep-all; color:#fff;}

.newsWrap .promiseArea .more a {display:block; position:relative; border-radius:9em; font-size:.9em; padding:.8em 1.5em; color:#fff; background:url(../img/main/news_arrow.png) #2c1176 no-repeat right 1em top 50%; background-size:.833333em auto; box-sizing:border-box;}

/* Animation State */
.newsWrap:not(.active) .tit-box {transform:translateX(-30%); -webkit-transform:translateX(-30%); opacity:0;}
.newsWrap:not(.active) .board-list {transform:translateX(-30%); -webkit-transform:translateX(-30%); opacity:0;}
.newsWrap:not(.active) .promiseArea {transform:translateX(30%); -webkit-transform:translateX(30%); opacity:0;}

@media all and (max-width:1240px) {
	.newsWrap .newArea {margin-right:16em;}
	.newsWrap .promiseArea {width:15em; padding:1.5em;}
	.newsWrap .promiseArea .promise-item {padding:1.7em 0;}
	.newsWrap .promiseArea .promise-item p {font-size:1.3em;}
	.newsWrap .newArea .box .tit-box {width:13em;}
}
@media all and (max-width:1024px) {
	.newsWrap .newArea {margin-right:0;}
	.newsWrap .newArea .box,
	.newsWrap .newArea .box > * {display:block;}
	.newsWrap .newArea .box .tit-box {width:auto; text-align:center;}
	.newsWrap .newArea .title {padding-top:.5em; margin-bottom:0;}
	.newsWrap .newArea .title em {display:inline-block; vertical-align:middle;}
	.newsWrap .newArea .tit-box .txt {margin-bottom:1em;}
	.newsWrap .newArea .tit-box .txt br {display:none;}
	.newsWrap .newArea .link {margin-bottom:2em;}
	.newsWrap .newArea .link li {display:inline-block; vertical-align:middle;}
	.newsWrap .newArea .link li + li {margin-top:0;}
	.newsWrap .newArea .link li a {padding:.5em 3em .5em 1.5em; max-width:unset; white-space:nowrap;}

	.newsWrap .promiseArea {position:relative; width:auto; height:auto; margin-top:2em;}
	.newsWrap .promiseArea .promise-item p br {display:none;}
}