@charset "utf-8";
@import url(/common/css/popup_template.css);
@import url(mymenu.css);

.mainSection {position:relative; padding-left:1em; padding-right:1em;}
.mainSection .inner {position:relative;}

.control-box {display:block;position:absolute;z-index:2;border-radius:9em;background:#fff;left:50%;top: 102.5%;padding:.3em 2em .5em 2em;white-space:nowrap;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);box-shadow:0 .2em .8em rgba(0,0,0,0.15);margin-top: 15px;}
.control-box > * {display:inline-block; vertical-align:middle; margin:0 .1em;}
.control-box .pager {width:auto; bottom:auto; margin-right:1.5em; color:transparent;}
.control-box .pager > * {display:block; position:relative; float:left; color:#888888;}
.control-box .pager > * + * {margin-left:2.25em;}
.control-box .pager > * + *:before {content:""; display:block; position:absolute; width:1.25em; height:1px; background:#bbb; left:-1.75em; top:50%;}
.control-box .pager .swiper-pagination-current {color:#D22259;}
.control-box button,
.control-box a {display:inline-block; width:1.2em; height:1.2em; background:no-repeat 50% 50%; background-size:contain; text-indent:-999px; overflow:hidden;}
.control-box .prev {background-image:url(../img/main/ico_control_prev.svg);}
.control-box .next {background-image:url(../img/main/ico_control_next.svg);}
.control-box .stop {background-image:url(../img/main/ico_control_pause.svg);}
.control-box .play {display:none; background-image:url(../img/main/ico_control_play.svg);}
.control-box .total,
.control-box .more {background-image:url(../img/main/ico_control_total.svg);}

@media all and (max-width:480px) {.control-box > * {margin:0;}}

.popupTemlate.theme- {background:url(../img/common/f_logo.svg) no-repeat 50% 50% #192048; background-size:auto 30%;}
.popupTemlate.theme- > * {background:rgba(0,0,0,.3);}
.popupTemlate.theme- .templ > * {color:#fff;}
.popup-slide-view .item {position:relative; height:100%;}
.popup-slide-view .item a {display:block; position:absolute !important; top:0; left:0; right:0; bottom:0; overflow:hidden; text-indent:-999px;}
.popup-slide-view .popupTemlate {height:100%; font-size:14px;}
.popup-slide-view .popupTemlate:before {display:none;}
.mainPopup.pop-view-box .control-box{border: 1px solid #ddd;}

@media all and (max-width:640px) {.popupTemlate {font-size:.9em;}}
@media all and (max-width:480px) {.popupTemlate {font-size:.8em;}}
@media all and (max-width:380px) {.popupTemlate {font-size:.7em;}}


.tabs .selected {display:none; position:absolute; width:0; height:0; overflow:hidden; text-indent:-999px; opacity:0; z-index:-9999;}
.tabs .on .selected {display:block;}

.no-data {display:block !important; position:relative !important; text-align:center !important; padding:0 !important; margin:0 !important; width:100% !important; text-align:center !important; border:none !important;}
.no-data > span {display:block !important; position:absolute !important; left:0; right:0; top:50%; transform:translateY(-50%);-webkit-transform:translateY(-50%);}

.slider-group {position:relative;}


/******************************************************
	Visual Wrap Style
******************************************************/
.visualWrap > .inner {position:static;}
.visualWrap:before,
.visualWrap:after {content:""; display:block; position:absolute; z-index:-2;}
.visualWrap:before {top:0; bottom:1.25em; left:0; right:50%; margin-right:50px; border-radius:0 0 4em 0; background:url(../img/main/bak_visual_01.png) no-repeat 0 100%, url(../img/main/bak_visual_02.svg) no-repeat 100% 0, #C86A6A; background-size:auto 18.15em, auto 5.15em !important; z-index:-1;}
.visualWrap:after {left:50%; margin-left:-700px; right:0; bottom:0; top:5em; background:url(../img/main/bak_visual_03.png) no-repeat 100% 50% #FFF9F8; background-size:cover !important; border-radius:0 0 0 5em;}

/* Weather */

.divTbl {display:inline-block; /* height:50%; */ /* table-layout:fixed; */ vertical-align:middle; text-align:right;}
.divTbl .cell {display:inline-block;}
.divTbl.mid .cell {vertical-align:middle;}

.mainWeather {position:relative; width:37.5em; float:right; height:7em; z-index:1; padding:1.5em 0 1em; text-align:center;}
.mainWeather:after {content:''; clear:both; display:block;}
.mainWeather > a {display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-indent:-999px; z-index:1; overflow:hidden;}
.mainWeather .cell + .cell {width:auto; margin-left:.5em;}

.mainWeather .temp {position:relative;}
.mainWeather .temp > * {text-align:left; display:inline-block; vertical-align:middle; font-family:'Roboto';}
.mainWeather .temp img {max-width:2em; }
.mainWeather .temp span {margin-left:.5em; vertical-align:middle;}
.mainWeather .temp em {font-size:1.5em; color:#333; font-weight:500;}
.mainWeather .dust {position:relative; margin-left:1em;}
.mainWeather .dust span {padding-left:.65em;color:#546fbf;}
.mainWeather .dust img{margin-bottom:3px;}
.mainWeather .dust strong {width:7em; font-size:.85em;}
.mainWeather .dust span {padding:.4em 0 .4em .85em;}

.mainWeather .divTbl.sns { box-sizing:border-box; margin-left:1em;}
.mainWeather .divTbl.sns li {display:inline-block; position:relative; vertical-align:middle;}
.mainWeather .divTbl.sns li + li {margin-left:.2em;}
.mainWeather .divTbl.sns li a {display:block; position:relative; width:2em; height:2em;  background:no-repeat 50% 50%; background-size:contain; border-radius:9em;}
.mainWeather .divTbl.sns li a span {position:absolute; top:0; left:0; text-indent:-999px; overflow:hidden;}
.mainWeather .divTbl.sns li .face {background-image:url(../img/main/ico_sns_facebook.svg);}
.mainWeather .divTbl.sns li .kaka {background-image:url(../img/main/ico_sns_kakaoplus.svg);}
.mainWeather .divTbl.sns li .blog {background-image:url(../img/main/ico_sns_blog.svg);}
.mainWeather .divTbl.sns li .inst {background-image:url(../img/main/ico_sns_insta.svg);}
.mainWeather .divTbl.sns li .yout {background-image:url(../img/main/ico_sns_youtube.svg);}
.mainWeather .divTbl.sns li .chat {display:none; border:1px solid #ddd; border-radius:1em; width:auto; padding:0 .5em;}
.mainWeather .divTbl.sns li .chat span {position:relative; display:inline-block; top:auto; left:auto; text-indent:0; font-size:.8em; padding-left:2.25em; vertical-align:middle;}
.mainWeather .divTbl.sns li .chat span:before {content:''; position:absolute; left:0; top:50%; transform:translate(0, -50%); width:1.75em; height:1.75em; background:url(../img/main/ico_chat.png) no-repeat center center; background-size:100% auto;}
.mainWeather .divTbl.sns li .chat:hover,
.mainWeather .divTbl.sns li .chat:focus { background:#5546A8; color:#fff; border:1px solid #5546a8;}



/* 코로나 링크 */
.corona_go{display:flex; align-items:center; margin-left: 20px; float:right; margin-top:1.8em;}
.corona_go::after{content: ""; width: 20px;height: 20px; background: url(../img/main/ico_coronaLink02.png) no-repeat 0 0; position: relative;top: 1.5px;}
.corona_go::before {content: ""; width: 22px; height: 22px; background: url(../img/main/ico_corona01.png) no-repeat 0 0;}
.corona_go span{padding:0 6px; font-weight:500; font-size:.85em;}
.mainWeather .corona_go span{padding-left:0px;}

/* Search */
.mainSearch {position:relative; width:28em; float:left; height:7em; padding:1.25em 0 0; box-sizing:border-box;}
.mainSearch div {display:block; position:relative; padding-right:5em;}
.mainSearch .total_search {border-bottom:.15em solid #fff; padding:0;}
.mainSearch .total_search:after {content:""; display:block; clear:both;}
.mainSearch .total_search > * {display:block; float:left; padding:0; height:3.35em; border:none; background:transparent; color:#fff;}
.mainSearch .total_search select {width:28.67%;}
.mainSearch .total_search select option {color:#333 !important; font-size:14px;}
.mainSearch .total_search input[type="text"] {width:71.33%; text-align:center; padding:0 .5em;}
.mainSearch .total_search input[type="text"]::placeholder {color:rgba(255,255,255,.5);}
.mainSearch input[type="submit"] {display:Block; position:absolute; top:0; right:0; width:3.5em; height:3.5em; border-radius:1.25em; background:url(../img/main/ico_search.svg) no-repeat 50% 50% #fff; background-size:1.4em auto; overflow:hdden; text-indent:-999px; box-shadow:0 .3em .8em rgba(0,0,0,.15);}
.iskeyboard .mainSearch input:focus,
.iskeyboard .mainSearch select:focus {outline:2px dotted #000;}


/* Visual */
.mainVisual {position:relative; width:36.5em; float:left; padding-bottom:5em;}
.mainVisual .slider {display:block; position:relative; max-height:17.4em; overflow:hidden; border-radius:1.5em; overflow:hidden; z-index:0; background:#fff;}
.mainVisual .slider:before {content:""; display:block; position:relative; padding-top:47.6712329%;}
.mainVisual .slider *[class^="swiper-"] {height:100%;}
.mainVisual .slider .swiper-container {position:absolute; top:0; left:0; right:0; bottom:0;}
.mainVisual .slider .swiper-slide {position:relative; background:#fff0f5;}
.mainVisual .slider .swiper-slide > * {display:block; position:relative; width:100%; height:100%; overflow:hidden; z-index:0; }
.mainVisual .slider .swiper-slide a {display:block;position:absolute !important;top:0;left:0;right:0;bottom:0;z-index:1;overflow:hidden;text-indent: -9999px;}
.mainVisual .slider .swiper-slide .popupTemlate {height:100%;}
.mainVisual .slider .swiper-slide .popupTemlate:before {display:none;}
.mainVisual .slider .swiper-slide img {position:absolute; top:50%; left:50%; min-height:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.mainVisual .slider .swiper-slide .no-image img {min-height:0;}

.mainVisual .control-box {bottom:1.4em; top:auto;}


/* Mayor */
.mainMayor {position:relative; width:32em; float:right; padding-right:10em;}
.iskeyboard .mainMayor a:focus {outline:2px dotted #000;}

@media all and (max-width:1450px) {
	.mainMayor {width:30em;}
	.mainMayor .mayor:before {width:12em; left:8em;}
}

.mainMayor .mayor {display:block; position:relative; padding:0 1em 1.5em;}
.mainMayor .mayor:before {content:""; display:block; position:absolute; left:9em; top:0; width:13em; height:13.6em; background:url(../img/main/img_mayor.png) no-repeat 100% 100%; background-size:contain; z-index:-1;}
.mainMayor .mayor .tit {font-size:1.5em; color:#333; font-family:'GmarketSans','NotoSans','맑은고딕', Malgun Gothic, 'Noto Sans KR', sans-serif; letter-spacing:-.05em; margin-bottom:.5em;}
.mainMayor .mayor .tit em {color:#D22259; font-weight:700;}
.mainMayor .mayor ul {display:Block; position:relative; width:9em;}
.mainMayor .mayor ul li {display:block; position:relative;}
.mainMayor .mayor ul li + li {margin-top:.25em;}
.mainMayor .mayor li a {display:block; position:relative; border-radius:9em; color:#E83E34; padding:0 1em; line-height:1.8em; border:1px solid #E83E34; transition:.3s all; -webkit-transition:.3s all;}
.mainMayor .mayor li a:after {content:""; display:block; position:absolute; width:.75em; right:.5em; top:0; bottom:0; background:url(../img/main/ico_mayor_link.svg) no-repeat 50% 50%; background-size:contain; transition:.3s all; -webkit-transition:.3s all;}
.mainMayor .mayor li a span {font-size:.75em;}
.mainMayor .mayor li a:hover {color:#fff; background:#E83E34;}
.mainMayor .mayor li a:hover:after {background-image:url(../img/main/ico_mayor_link_on.svg);}

.mainMayor .links {display:block; position:relative; border-radius:1em; box-shadow:0 0 1em rgba(227, 39, 107, 0.1); z-index:1; padding:1.5em .5em; background:#fff;}
.mainMayor .links ul {display:table; width:100%; table-layout:Fixed;}
.mainMayor .links li {display:table-cell; vertical-align:middle;}
.mainMayor .links li + li {background:url(../img/main/bak_mayor_link_line.svg) no-repeat 0 50%;}
.mainMayor .links li a {display:block; position:relative; text-align:center;}
.mainMayor .links li span {display:block;font-size:.85em;}
.mainMayor .links li .icon {display:block; position:relative; height:2.25em; background:no-repeat 50% 50%; background-size:contain; margin-bottom:.5em; transition:.3s all; -webkit-transition:.3s all;}
.mainMayor .links li .icon.ty1 {background-image:url(../img/main/ico_mayor_quick_01.svg);}
.mainMayor .links li .icon.ty2 {background-image:url(../img/main/ico_mayor_quick_02.svg);}
.mainMayor .links li .icon.ty3 {background-image:url(../img/main/ico_mayor_quick_03.svg);}
.mainMayor .links li a:hover .icon {transform:translateY(-10%); -webkit-transform:translateY(-10%);}
.mainMayor .links li a:hover span {font-weight:700;}

@media all and (max-width:1024px) {
	.visualWrap:before {margin-right:0; right:0; top:5.5em; bottom:27em; border-radius:0; background-size:100% auto, auto 5.15em !important;}
	.visualWrap:after {top:auto; height:30em; border-radius:0;}
	.mainVisual {text-align:center; padding-bottom:0;}
	.mainVisual .control-box {display:inline-block; position:relative; left:auto; top:auto; bottom:auto; transform:translate(0, 0); -webkit-transform:translate(0, 0);}
	
	.mainWeather {width:100%; float:none; height:5.5em; text-align:center; padding:1.5em 0;}
	.mainWeather .divTbl {text-align:center; height:auto;}
	
	.mainSearch {width:auto; float:none;}
	.mainSearch .total_search select {display:none;}
	.mainSearch .total_search input[type="text"] {width:100%; text-align:left;}

	.mainVisual {width:auto; float:none;}
	.mainVisual .slider {max-height:100%;}

	.mainMayor {width:auto; float:none; padding-bottom:2em; padding-right:0;}
	.mainMayor .mayor {padding:3em 1em 1em;}
	.mainMayor .mayor:before {background-size:contain; left:auto; width:9em; right:1em; bottom:0; top:-2em; height:auto;}
	.mainMayor .mayor ul {width:auto; float:none;}
	.mainMayor .mayor ul:after {content:""; display:block; clear:both;}
	.mainMayor .mayor ul li {width:8.5em; float:left; margin:.2em !important;}
	.mainMayor .mayor li a {color:#E83E34; background-color:#fffdfd; border:1px solid #E83E34;}
	.mainMayor .mayor li a:hover:after {background-image:url(../img/main/ico_mayor_link_on.svg);}


}

@media all and (max-width:768px) {
	
	.visualWrap:before {top:8em; bottom:30em;}
	.mainWeather {height:8em;}
	.mainWeather .weather .cell {display:inline-block;}
	.mainWeather .divTbl {width:100%; float:none;}

	.mainWeather .divTbl.sns {margin-left:0; margin-top:1em;}
	.mainWeather .divTbl.sns li .chat {display:block;}
	
	.mainMayor .mayor ul {width:70%;}
}
@media all and (max-width:640px) {
	.visualWrap:before {bottom:37em;}
	.visualWrap:after {height:42em;}
}

@media all and (max-width:540px) {
	.divTbl{width:100%;}
	.corona_go {float:none;margin-top:10px;margin-left:0; justify-content:center; background: #f4f4f4;height: 40px;}
	
	.visualWrap:before {bottom:41em;}
	
	.mainMayor .mayor:before {width:12em; top:2em;}
	.mainMayor .mayor ul {margin-right:13em;}
	.mainMayor .mayor ul li {margin:.2em 0 !important; float:none;}

	.mainWeather .divTbl.weather {padding-top:0;}

}



/******************************************************
	Quick Wrap Style
******************************************************/

.quickWrap {padding:0 0 1.5em;}
.quickWrap:after {content:''; display:block; position:absolute; top:-1.25em; right:0; bottom:0; left:0; background:#FFEDED; z-index:-10;}
.mainQuick {position:relative;}
.mainQuick .category {display:block; padding:1.2em 0; text-align:center;}
.mainQuick .category li {display:inline-block; vertical-align:middle; margin:.1em .375em;}
.mainQuick .category .selected {display:none; position:absolute; width:0; height:0; overflow:hidden; text-indent:-999px; opacity:0; z-index:-9999;}
.mainQuick .category button {display:block; position:relative; background:top 50% left 1em #fff; border-radius:9em; border:.1em solid #EED8DD; text-align:center; padding:0 1em .2em; min-width:5em; height:2.1em; box-sizing:border-box; z-index:0; transition:.3s all; -webkit-transition:.3s all;}
.mainQuick .category button span {font-size:.85em;}
.mainQuick .category button.on {border-radius:9em 9em 0 9em; border-color:#7C5693; background:url(../img/main/ico_quick_tabs_on.svg) no-repeat top 50% left 1em #7C5693; background-size:.4em auto; padding-left:1.5em;}
.mainQuick .category button.fav.on {padding-left:2em; background-image:url(../img/main/ico_quick_tabs_fav_on.svg); background-position:top 50% left .75em; background-size:.75em auto;}
.mainQuick .category button.on span {color:#fff;}
.mainQuick .category button.on .selected {display:block;}
.mainQuick .control .prev,
.mainQuick .control .next {display:block; position:absolute; top:50%; margin-top:-1em; width:1em; height:2em; background:no-repeat 50% 50%; background-size:contain; text-indent:-999px; overflow:hidden; transform:translateY(2.05em); -webkit-transform:translateY(2.05em); z-index:2;}
.mainQuick .control .prev {background-image:url(../img/main/ico_quick_prev.svg); left:-2.9em;}
.mainQuick .control .next {background-image:url(../img/main/ico_quick_next.svg); right:-2.9em;}
/* .swiper-button-disabled {opacity:.7;} */

.mainQuick .slider {min-height:6em;}
.mainQuick .swiper-slide {width:auto;}
.mainQuick .swiper-slide a {display:block; position:relative; text-align:center;}
.mainQuick .swiper-slide .icon {display:block; position:relative; width:3.5em; height:3.5em; margin:0 auto .5em; background:#fff; border-radius:50%; transition:.3s all; -webkit-transition: .3s all;}
.mainQuick .swiper-slide a:hover .icon {box-shadow:0 0.2em 0.8em rgba(210,34,89,.15);}
.mainQuick .swiper-slide .icon img {display:block; max-height:100%; max-width:100%;}
.mainQuick .swiper-slide strong {display:block; position:relative; font-size:.75em; font-weight:400; word-break:keep-all; max-width:10em; margin:0 auto; line-height:1.4em; min-height:2.8em;}

@media all and (max-width:1560px) {
	.mainQuick .control .prev {left:-1.3em;}
	.mainQuick .control .next {right:-1.3em;}
}
@media all and (max-width:1480px) {
	.quickWrap {padding:0 1em;}
	.mainQuick {padding-left:1.5em; padding-right:1.5em;}
	.mainQuick .control .prev {left:0;}
	.mainQuick .control .next {right:0;}
}
@media all and (max-width:1024px) {

	.mainQuick .swiper-slide {width:6.5em;}
	/* .mainQuick .swiper-container {overflow:visible;} */
}
@media all and (max-width:940px) {
	.mainQuick {padding:0 1.5em 1em;}
	.mainQuick .category {margin:0 -1.5em .5em;}
	.mainQuick .category li {width:33.33%; float:left; padding:.1em; margin:0; box-sizing:border-box;}
	.mainQuick .category:after {content:""; display:block; clear:both;}
	.mainQuick .category button {width:100%; min-width:0; padding-right:0; padding-left:0;}
	.mainQuick .category button.on {padding-left:1em; background-position:top 50% left .5em;}
	.mainQuick .control .prev,
	.mainQuick .control .next {transform:translateY(3em); -webkit-transform:translateY(3em);}
}
@media all and (max-width:520px) {
	.mainQuick .category li {width:33.33%;}
	.mainQuick .category button.fav.on {padding-left:1em;}

}




/******************************************************
	Board Wrap Style
******************************************************/

.boardWrap {padding-top:3em; padding-bottom:3em;}

/* Board */
.mainBoard {display:block; position:relative; width:43.5em; float:left;}
.mainBoard .tabs {display:block; position:relative; padding-right:3em; border:1px solid #ddd; border-radius:1em; overflow:hidden; z-index:0;}
.mainBoard .tabs ul {display:table; width:100%; table-layout:fixed;}
.mainBoard .tabs ul li {display:table-cell; width:16.66%; border-right:1px solid #ddd;}
.mainBoard .tabs button {display:block; position:relative; width:100%; height:3.5em; font-size:.85em;}
.mainBoard .tabs button strong {color:#666; font-weight:400;}
.mainBoard .tabs button.on, .mainBoard .tabs button:hover {background:#4B4E9A;}
.mainBoard .tabs button.on strong, .mainBoard .tabs button:hover strong {color:#fff; font-weight:700;}
.mainBoard .more {display:block; position:absolute; top:0; right:0; width:3em; height:3em; overflow:hidden; text-indent:-999px; z-index:1; background:url(../img/main/ico_board_more.svg) no-repeat 50% 50%; background-size:.7em auto;}
.mainBoard .list {display:block; position:relative; margin-top:1em; border-radius:1.5em; padding:1.5em; border:1px solid #ddd; height:15.15em; box-sizing:border-box;}
.mainBoard .list li {display:block;}
.mainBoard .list li + li {margin-top:.35em;}
.mainBoard .item-board {display:block; position:relative; z-index:0;}
.mainBoard .item-board > * {position:relative; font-size:.85em; height:1.764em; line-height:1.764em; z-index:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mainBoard .item-board .depart {display:block; position:absolute; top:0; left:0;  width:7.647em; font-size:.85em; text-align:center; background:#F5F3FF; border-radius:1.176em; color:#5546A9;}
.mainBoard .item-board .depart + .subj {margin-left:8.23529em;}
.mainBoard .item-board .subj {margin-right:6.5em; font-size:.85em;}
.mainBoard .item-board .date {display:block; position:absolute; top:0; right:0; font-size:.85em; color:#939393; font-family:'Roboto';}
.mainBoard .item-board .txt {display:none;}
.mainBoard ul li a {display:block; position:relative;}
.mainBoard ul li a:before,
.mainBoard ul li a:after {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0;}
.mainBoard .list li:first-child {padding-bottom:.9em; margin-bottom:.9em; border-bottom:1px dashed #EBEBEB;}
.mainBoard .list li:first-child + li {margin-top:0;}
.mainBoard .list li:first-child .item-board {padding-left:7em; padding-top:.2em; min-height:5em;}
.mainBoard .list li:first-child .item-board > * {font-size:1em; height:auto; line-height:1.4em;}
.mainBoard .list li:first-child .item-board .depart {display:none;}
.mainBoard .list li:first-child .item-board .date {display:block; position:absolute; top:50%; left:0; margin-top:-2.5em; width:5em; height:5em; text-align:center; border-radius:1em; border:.2em solid #f6f6f6; padding:2.8em .2em .5em; box-sizing:border-box; opacity:1;}
.mainBoard .list li:first-child .item-board .date .ym {display:block; position:relative; font-size:.75em; color:#939393;}
.mainBoard .list li:first-child .item-board .date .d {display:block; position:absolute; top:.1em; left:0; right:0; font-size:2em; line-height:1.5em; color:#333; font-weight:700;}
.mainBoard .list li:first-child .item-board .subj {margin:0 !important; color:#222; font-size:1.1em; font-weight:700;}
.mainBoard .list li:first-child .item-board .txt {display:block; position:relative; margin-top:.3em; line-height:1.5em; height:3em; overflow:hidden; white-space:normal; font-size:.85em; color:#888888; font-weight:400;}

.mainBoard .list .no-data {height:13.15em;}


.mainBoard .tabs button:focus {border:2px solid #000;}
.mainBoard .tabs button: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;}

/* Popup */
.mainPopup {display:block; position:relative; width:24.5em; float:right; box-sizing:border-box;}
.mainPopup .slider {display:block;position:relative;max-height:17.6em;overflow:hidden;border-radius:1.5em;overflow:hidden;z-index:0;border: 1px solid #ddd;}
.mainPopup .slider:before,
.mainPopup .slider .swiper-slide:before {content:""; display:block; position:relative; padding-top:71.8367%;}
.mainPopup .slider *[class^="swiper-"] {height:100%;}
.mainPopup .slider .swiper-container {position:absolute; top:0; left:0; right:0; bottom:0;}
.mainPopup .slider .swiper-slide {position:relative; background:#fff0f5;}
.mainPopup .slider .swiper-slide:before {display:none;}
.mainPopup .slider .swiper-slide > * {display:block; position:relative; width:100%; height:100%; overflow:hidden; z-index:0;}
.mainPopup .slider .swiper-slide a {display:block; position:absolute !important; top:0; left:0; right:0; bottom:0; z-index:1; overflow:hidden; text-indent:-999px;}
.mainPopup .slider .swiper-slide .popupTemlate {height:100%;}
.mainPopup .slider .swiper-slide .popupTemlate:before {display:none;}
.mainPopup .slider .swiper-slide img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.mainPopup .control-box {box-shadow:0 .2em .8em rgba(75,79,105,.15);}

@media all and (max-width:1480px) {
	.mainBoard {width:42em;}
}
@media all and (max-width:1024px) {
	.boardWrap {padding-top:2em;}

	.mainBoard {width:auto; float:none; margin-bottom:2em;}
	.mainBoard .tabs {padding-right:3em;}
	.mainBoard .tabs button {height:3em;}
	.mainBoard .tabs button strong {font-size:.9em;}
	.mainBoard .more {width:3em; height:3em;}

	.mainPopup {width:auto; float:none; margin-bottom:2em;}
	.mainPopup .slider {max-height:none; border-radius:0; overflow:visible;}
	.mainPopup .slider:before {display:none;}
	.mainPopup .slider .swiper-container {position:relative; height:auto; overflow:visible;}
	.mainPopup .slider .swiper-slide {width:24.5em; max-width:100%; border-radius:1.5em; overflow:hidden; background-color:transparent;}
	.mainPopup .slider .swiper-slide:before {display:block;}
	.mainPopup .slider .swiper-slide:after {content:""; display:block; position:absolute; top:2px; left:2px; right:2px; bottom:2px; border-radius:1.5em; z-index:-2; background:#192048;}
	.mainPopup .slider .swiper-slide > * {position:absolute; top:0; left:0; right:0; bottom:0; border-radius:1.5em;}
}

@media all and (max-width:640px) {
	.mainBoard .tabs ul li {width:33.33% !important;display: inline-block; border-bottom:1px solid #ddd;}
	.mainBoard .tabs ul li:nth-child(3) ~ li {border-bottom-width:0;}
	.mainBoard .more {height:5.2em;}
	.mainBoard .list {height:auto; padding:0 0 1em; border-width:0 0 1px 0; border-radius:0;}
	.mainBoard .item-board .depart {display:none;}
	.mainBoard .item-board .depart + .subj {margin-left:0;}
	.mainBoard .item-board .depart + .subj:before {content:''; display:inline-block; width:4px; height:4px; margin-right:.5em; background:#D22259; border-radius:50%; vertical-align:middle;}
	.mainBoard .list li:first-child .item-board {padding-left:6.2em;}
	.mainBoard .list li:first-child .item-board .subj:before {display:none;}
}
@media all and (max-width:400px) {
.mainBoard .tabs button strong {letter-spacing:-0.08em;}
}

/******************************************************
	Gallery Wrap Style
******************************************************/

.mainGallery {padding-bottom:2.5em;}

.mainGallery {position:relative;}
.mainGallery .top {margin-bottom:1.5em;}
.mainGallery .sec-title {display:inline-block; position:relative; vertical-align:middle;}
.mainGallery .sec-title > * {position:relative; font-size:2em; color:#333; font-weight:800; font-family:'GmarketSans','NotoSans','맑은고딕', Malgun Gothic, 'Noto Sans KR', sans-serif;}
.mainGallery .sec-title em {color:#D22259;}
.mainGallery .sec-title em:before {content:""; display:block; position:absolute; left:-1.8em; top:-1.8em; width:3.4em; height:4.1em; font-size:.4761904761904762em; background:url(../img/main/ico_gallery_title.svg) no-repeat 50% 50%; background-size:contain;}
.mainGallery .sns {display:inline-block; vertical-align:middle; margin-left:1em;}
.mainGallery .sns li {display:inline-block; position:relative; vertical-align:middle; }
.mainGallery .sns li + li {margin-left:.2em;}
.mainGallery .sns li a {display:block; position:relative; width:2em; height:2em; text-indent:-999px; overflow:hidden; background:no-repeat 50% 50%; background-size:contain; border-radius:9em;}
.mainGallery .sns li .face {background-image:url(../img/main/ico_sns_facebook.svg);}
.mainGallery .sns li .kaka {background-image:url(../img/main/ico_sns_kakaoplus.svg);}
.mainGallery .sns li .blog {background-image:url(../img/main/ico_sns_blog.svg);}
.mainGallery .sns li .inst {background-image:url(../img/main/ico_sns_insta.svg);}
.mainGallery .sns li .yout {background-image:url(../img/main/ico_sns_youtube.svg);}

.mainGallery .tabs {position:absolute; top:0; right:3.5em;}
.mainGallery .tabs li {display:inline-block; vertical-align:middle;}
.mainGallery .tabs li + li {margin-left:.3em;}
.mainGallery .tabs button {position:relative; height:2.4em; background:none; padding:.5em; transition:.3s all; -webkit-transition:.3s all; background-position:0 50%;}
.mainGallery .tabs button:after {content:""; display:block; position:absolute; left:0; right:100%; bottom:0; height:.1em; background:#D22259; transition:.3s all; -webkit-transition:.3s all;}
.mainGallery .tabs button strong {font-weight:400; color:#666;}
.mainGallery .tabs button.on {padding-left:1.9em; background:url(../img/main/ico_gallery_on.svg) no-repeat 0 50%; background-size:1.4em auto;}
.mainGallery .tabs button.on strong {color:#D22259; font-weight:700;}
.mainGallery .tabs button.on:after {right:0;}

.mainGallery .more {display:block; position:absolute; top:0; right:0; width:2.5em; height:2.5em; overflow:hidden; text-indent:-999px; border-radius:100%; border:1px solid #ddd; background:url(../img/main/ico_gallery_more.svg) no-repeat 50% 50%; background-size:.7em auto;}

.mainGallery .slider-group {margin:0 -.8em;}
.mainGallery .swiper-container {padding:0 .8em 1em;}
.mainGallery .no-data {height:16.5em; border-radius:1.5em .5em .5em .5em; border:1px solid #DDDDDD !important;}
.mainGallery ul li a {display:block; position:relative;  border-radius:1.5em .5em .5em .5em; border:1px solid #DDDDDD;  overflow:hidden; z-index:0; transition:.3s;}
.mainGallery ul li a:before,
.mainGallery ul li a:after {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0;}
.mainGallery ul li a:hover {border-color:#D22259; box-shadow:0 .2em .8em rgba(210,34,89,.15);}
.mainGallery .item-board {display:block; position:relative; height:16.5em;}
.mainGallery .item-board .thumb {display:block; position:relative; height:10em; margin-bottom:1em; border-radius:0 0 1.5em 0; overflow:hidden; background:#f8f8f8;}
.mainGallery .item-board .thumb > img {display:block; position:absolute; top:50%; left:50%; max-width:130%; min-height:100%; min-width:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.mainGallery .item-board .thumb.no-image > img {min-width:auto; min-height:auto;}
.mainGallery .item-board .txt {display:none;}
.mainGallery .item-board .subj {display:block; position:relative; padding:2em 1.5em 1.17em; line-height:1.4em; height:9.8em; overflow:hidden; font-size:1.1em; word-break:keep-all;}
.mainGallery .item-board .date {display:block; position:absolute; bottom:1.66em; left:2em; right:2em; font-size:.75em; color:rgba(0,0,0,.6); font-family:'Roboto';}
.mainGallery .item-board .thumb ~ .subj {padding:0 1em; font-size:.85em; height:2.8em;}
.mainGallery .item-board .thumb ~ .date {left:1em; right:1em;}

.mainGallery .control .prev,
.mainGallery .control .next {display:block; position:absolute; top:50%; margin-top:-1em; width:1em; height:2em; background:no-repeat 50% 50%; background-size:contain; text-indent:-999px; overflow:hidden; z-index:99;}
.mainGallery .control .prev {background-image:url(../img/main/ico_quick_prev.svg); left:-2.1em;}
.mainGallery .control .next {background-image:url(../img/main/ico_quick_next.svg); right:-2.1em;}

@media all and (max-width:1560px) {
	.mainGallery .control .prev {left:-1.3em;}
	.mainGallery .control .next {right:-1.3em;}
}
@media all and (max-width:1480px) {
	/* .mainGallery .slider-group {padding-left:1.5em; padding-right:1.5em;} */
	.mainGallery .control .prev {left:0;}
	.mainGallery .control .next {right:0;}
}
@media all and (max-width:1024px) {
	.mainGallery .slider-group {margin:0;}
	.mainGallery .swiper-slide {width:16.75em;}
	.mainGallery .swiper-container {padding:0; overflow:visible;}

	.mainGallery .top {margin-bottom:1em; text-align:center; position:relative;}
	.mainGallery .sns {margin-right:0; position:absolute; right:0;}
	.mainGallery .sec-title {margin-left:1em;}
	.mainGallery .tabs {position:relative; right:auto; margin-bottom:1em; text-align:center; }
	.mainGallery .slider-group {padding-left:0; padding-right:0;}

	.mainGallery .more {position:relative; top:auto; right:auto; width:auto; text-indent:0; text-align:center; border-radius:9em; margin-top:1em; background:none; line-height:2.5em;}
	.mainGallery .more > * {font-size:.9em; margin:0 .2em;}
}
@media all and (max-width:768px) {
	.mainGallery .sns li a {width:1.7em; height:1.7em;}
}
@media all and (max-width:640px) {
	.mainGallery .sns {position:static; display:block; margin-top:.5em;}
}
@media all and (max-width:450px) {
	.mainGallery .top {text-align:center; margin-right:0;}
	.mainGallery .tabs {text-align:center; white-space:nowrap;}
	.mainGallery .tabs li + li {margin-left:0;}
	.mainGallery .tabs button {padding:2em .5em .5em !important; height:4em; background-position:top 0 left 50%;}
	.mainGallery .tabs button.on {background-position:top 0 left 50%;}
}



/******************************************************
	Service Wrap Style
******************************************************/

.serviceWrap {position:relative; padding-top:3em; padding-bottom:3em;}
.serviceWrap:before {content:""; display:block; position:absolute; top:0; left:50%; bottom:0; width:1560px; margin-left:-780px; border-radius:1.5em; background:url(../img/main/bak_service_01.svg) no-repeat 100% 0, url(../img/main/bak_service_02.svg) no-repeat 0 100%, #D2EFFA; background-size:auto 15.5em, auto 21em !important;}
@media all and (max-width:1560px) {.serviceWrap:before {width:auto; margin:0; left:0; right:0; border-radius:0;}}

.serviceWrap .sec-title,
.serviceWrap .tit {font-family:'GmarketSans','NotoSans','맑은고딕', Malgun Gothic, 'Noto Sans KR', sans-serif;}
.serviceWrap .tit {display:block; position:relative; color:#666; padding-top:.25em; margin-bottom:1.15em;}
.serviceWrap .tit span {font-size:1.3em; }
.serviceWrap .tit strong {color:#333; font-weight:800;}

.serviceWrap .sec-title {text-align:center; word-break:keep-all; margin-bottom:2em;}
.serviceWrap .sec-title span {font-size:1.7em; color:#222;}
.serviceWrap .sec-title em,
.serviceWrap .sec-title strong {position:relative; font-size:1.176em; font-weight:800;}
.serviceWrap .sec-title em {color:#cf0041;}
.serviceWrap .sec-title strong:after {content:""; display:block; position:absolute; left:100%; top:0; width:1em; height:1em; margin-left:-.5em; margin-top:-.7em; background:url(../img/main/ico_searvice_title.svg) no-repeat 50% 50%; background-size:contain !important;}

.serviceWrap .group {position:relative;}

.mainLifetime {display:block; position:relative; margin:0 24em 0 18em;}
.mainLifetime .box {display:block; position:relative; background:#fff; border-radius:1em; padding:1.25em; height:16.1em; box-sizing:border-box;}
.mainLifetime .box ul {display:block; position:relative;}
.mainLifetime .box ul:after {content:""; display:block; clear:both;}
.mainLifetime .box li {display:block; position:relative; width:33.33%; float:left; padding:.25em; box-sizing:border-box;}
.mainLifetime .box a {display:block; position:relative; border-radius:.5em; background:#F6F8FE; text-align:center; padding:1em 0; height:6.3em; box-sizing:border-box; word-break:keep-all;}
.mainLifetime .box a:after {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:.5em; border:0px solid #5070DF;}
.mainLifetime .box a span {display:block; letter-spacing:-.06em; font-size:.85em; transition:.3s all; -webkit-transition:.3s all;}
.mainLifetime .box .icon {display:block; position:absolute; left:0; right:0; bottom:0; height:3.9em; background:no-repeat 50% 50%; background-size:contain;}
.mainLifetime .box .icon.ty1 {background-image:url(../img/main/ico_life_01.svg);}
.mainLifetime .box .icon.ty2 {background-image:url(../img/main/ico_life_02.svg);}
.mainLifetime .box .icon.ty3 {background-image:url(../img/main/ico_life_03.svg);}
.mainLifetime .box .icon.ty4 {background-image:url(../img/main/ico_life_04.svg);}
.mainLifetime .box .icon.ty5 {background-image:url(../img/main/ico_life_05.svg);}
.mainLifetime .box .icon.ty6 {background-image:url(../img/main/ico_life_06.svg);}
.mainLifetime .box a:hover:after {border-width:1px;}
.mainLifetime .box a:hover span {font-weight:700;}

.mainStory {position:absolute; top:0; right:0; width:22.5em;}
.mainStory .item {display:block; position:relative; background:#00A3B9; border-radius:1em; padding:2em 1.5em 1.5em; height:16.1em; box-sizing:border-box;}
.mainStory .item .thumb {display:block; position:absolute; top:1.5em; bottom:0; left:1.5em; width:11em; background:#fff; border-radius:.5em .5em 0 0; box-shadow:0 0 .8em rgba(0,0,0,0.12);}
.mainStory .item .thumb > a {display:block; position:relative; width:100%; height:100%;}
.mainStory .item .thumb img {display:block; position:relative; width:100%; height:100%;}
.mainStory .item .thumb .no-image img {display:block; position:absolute; top:50%; left:50%;  width:auto; height:auto; max-width:80%; max-height:80%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.mainStory .item .detail {display:block; position:relative; margin-left:12em; color:#fff;}
.mainStory .item .detail .subj {font-family:'Roboto','NotoSans','맑은고딕', Malgun Gothic, 'Noto Sans KR', sans-serif;}
.mainStory .item .detail .subj > * {display:block;}
.mainStory .item .detail .subj strong {font-size:1.2em; font-weight:400; letter-spacing:-.04em;}
.mainStory .item .detail .subj strong em {font-size:1.33em; font-weight:600; color:#fff;}
.mainStory .item .detail .num {display:inline-block; font-size:.75em; padding:.1em 1em; margin-top:.5em; border-radius:9em; background:#fff;color:#00A3B9;}
.mainStory .item .detail ul {display:block; position:relative; margin-top:2.6em; border:1px solid rgba(255,255,255,.7); border-radius:.5em;}
.mainStory .item .detail li + li {border-top:1px solid rgba(255,255,255,.7);}
.mainStory .item .detail a {display:block; position:relative; padding:.5em 1em .5em 2.5em;}
.mainStory .item .detail a span {font-size:.85em;}
.mainStory .item .detail a:before {content:""; display:block; position:absolute; left:1em; top:50%; margin-top:-.5em; width:1em; height:1em; background:url(../img/main/ico_story_01.svg) no-repeat 50% 50%; background-size:contain; opacity:.9;}
.mainStory .item .detail a.app:before {background-image:url(../img/main/ico_story_02.svg);}

.mainService {position:absolute; top:0; left:0; width:16.5em; background:#359DD8; border-radius:1em; overflow:hidden;}
.mainService .tit {display:block; position:relative; padding:1.5em 1.5em 1.3em; background:url(../img/main/ico_service_title.svg) no-repeat top 100% right 1em #1283C3; background-size:5.5em 5em; margin-bottom:0;}
.mainService .tit span {display:block; position:relative; font-size:.85em; width:8.5em; line-height:1.3em; max-width:100%; color:#fff; font-family:'NotoSans','맑은고딕', Malgun Gothic, 'Noto Sans KR', sans-serif; letter-spacing:-.04em;}
.mainService .tit strong {color:#ffe0a6; font-weight:400;}
.mainService ul {display:block; position:relative; padding:1.275em;}
.mainService ul li + li {margin-top:.35em;}
.mainService a {display:block; position:relative; padding:.74em 1.5em .74em 3.88em; font-size:.85em; border:1px solid rgba(255,255,255,.6); border-radius:.5em; background:url(../img/main/ico_service_arrow.svg) no-repeat top 50% right .7em; background-size:1.17em auto; transition:.3s; top:0;}
.mainService a:hover {border-color:#fff; top:-3px;}
.mainService a .icon {display:block; position:absolute; top:50%; left:.88em; margin-top:-.838em; width:2.117em; height:1.676em; background:no-repeat 50% 50%; background-size:contain;}
.mainService a .icon.ty1 {background-image:url(../img/main/ico_service_01.svg);}
.mainService a .icon.ty2 {background-image:url(../img/main/ico_service_02.svg);}
.mainService a .icon.ty3 {background-image:url(../img/main/ico_service_03.svg);}
.mainService a .icon.ty4 {background-image:url(../img/main/ico_service_04.svg);}
.mainService a span {color:#fff;}

@media all and (max-width:1024px) {
	.mainLifetime {margin:1.5em 0 1.5em 0;}

	.mainStory {position:relative; width:58%;}
	.mainService {position:absolute; width:40%; right:0; bottom:0; top:auto; left:auto;}
}
@media all and (max-width:740px) and (min-width:641px) {
	.mainStory .item {padding:1.5em; height:13em;}
	.mainStory .item .thumb {width:8em;}
	.mainStory .item .detail {margin-left:9em;}
	.mainStory .item .detail ul {margin-top:1.6em;}
	.mainStory .item .detail .num {display:none;}

	.mainService .tit {padding:1em 1em; background-size:4em auto;}
	.mainService .tit span {width:auto; margin-right:3em;}
	.mainService a {padding:.5em 1.5em .5em 3.2em;}
	.mainService a .icon {font-size:.8em;}
	.mainService a span {font-size:.9em;}
}
@media all and (max-width:640px) {
	.mainStory,
	.mainService {position:relative; width:auto; float:none;}
	.mainService {margin-top:1em;}
}
@media all and (max-width:420px) {
	.mainStory .item {height:auto;}
	.mainStory .item .thumb {width:7em; height:9em; left:2em;}
	.mainStory .item .detail {margin-left:0;}
	.mainStory .item .detail .subj {margin-left:9em;}
	.mainStory .item .detail .num {margin-left:12em; margin-top:1em;}
	.mainStory .item .detail ul {overflow:hidden;}
	.mainStory .item .detail li {display:block; width:50%; float:left;}
	.mainStory .item .detail li + li {border-left:1px solid rgba(255,255,255,.7); border-top-width:0;}
	.mainStory .item .detail a {background-color:#BF4158; text-align:center;}
}


/******************************************************
	CSC Wrap Style
******************************************************/

.mapAreaWrap {position:relative; margin-top:2em;}
.mapAreaWrap:before {content:""; display:block; position:absolute; top:.5em; bottom:2.5em; left:0; right:50%; margin-right:-20.5em; border-radius:0 7.5em 0 0; background:url(../img/main/bak_map.svg) no-repeat 0 0 #F4F7FF; background-size:auto 100% !important; z-index:-1;}

.mapAreaWrap > .inner {min-height:34.15em;}
.mapAreaWrap > .inner:before,
.mapAreaWrap > .inner:after {content:""; display:block; position:absolute; }
.mapAreaWrap > .inner:before {top:5.5em; right:-4.7em; width:7.8em; height:3.75em; background:url(../img/main/bak_map_01.svg) no-repeat 50% 50%; background-size:contain;}
.mapAreaWrap > .inner:after {bottom:3em; right:-1.2em; width:5.2em; height:4.75em; background:url(../img/main/bak_map_02.svg) no-repeat 50% 50%; background-size:contain;}

.mapAreaWrap .sec-title {display:block;position:relative;font-size: 2.2em;padding-top: 2.3em;margin-bottom: 2em;font-family: 'GmarketSans';font-weight: 800;}
.mapAreaWrap .sec-title span {position:relative;color: #5546A9;}

.mainMap .detail {display:block; position:relative; width:34em;}
.mainMap .detail.loading {opacity:0; visibility:hidden;}
.mainMap .detail > div {display:block; position:relative; background:#fff;  border-radius:1em; box-shadow:0 .4em 1.25em rgba(75,79,105,.2);}
.mainMap .detail .tit {display:inline-block; position:relative; min-width:8.7em; height:2.7em; padding:.4em 1.75em 0; font-weight:600; border-radius:9em; background:#D22259; margin-left:1.5em; transform:translateY(-1em); -webkit-transform:translateY(-1.35em);}
.mainMap .detail .tit:before {content:""; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; background:url(../img/main/ico_map_title.svg) no-repeat 50% 50%; margin-right:.45em;}
.mainMap .detail .tit span {font-size:1em; color:#fff; vertical-align:middle;}
.mainMap .detail .desc {display:block; position:relative; padding:0 2em 1.5em;}
.mainMap .detail .desc span {font-size:.85em; color:#222; word-break:keep-all;}
.mainMap .detail .desc span br {display:none;}
.mainMap .detail .info {display:block; position:relative; background:#37375B; color:#fff; padding:1.5em 2em; border-radius:0 0 1em 1em;}
.mainMap .detail .info p {display:block; position:relative; padding-left:1.6em;}
.mainMap .detail .info p + p {margin-top:.7em;}
.mainMap .detail .info span {font-size:.85em; font-weight:100;}
.mainMap .detail .info strong {display:block; position:absolute; width:1.1em; height:1.25em; top:50%; margin-top:-.625em; left:0; background:no-repeat 50% 50%; background-size:contain; overflow:hidden; text-indent:-999px;}
.mainMap .detail .info p.addr strong {background-image:url(../img/main/ico_map_detail_map.svg);}
.mainMap .detail .info p.tel strong {background-image:url(../img/main/ico_map_detail_tel.svg);}
.mainMap .detail .more-area {border-radius:0; background:transparent; box-shadow:none; padding-top:1.5em; text-align:right;}
.mainMap .detail .more {display:inline-block; width:8em; height:2.65em; line-height:2.5em; border-radius:9em; border:1px solid rgba(55,55,01,.7); text-align:left; padding:0 1.5em; background:url(../img/main/ico_dong_more.svg) no-repeat top 50% right 1.25em; background-size:1.25em auto; transition:.3s all; -webkit-transition:.3s all;}
.mainMap .detail .more:hover {background-position:top 50% right 1em;}
.mainMap .detail .more span {font-size:.85em; color:#37375B;}

.mainMap .map {position:absolute; top:0; right:0; width:31.3em; height:34.15em; background:url(../img/map/bak.svg) no-repeat 50% 50%; background-size:contain; z-index:0;}
.mainMap .map #over {position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; background:no-repeat 50% 50%; background-size:contain; transition:.3s all; -webkit-transition:.3s all;}
.mainMap .map #over.chowol {background-image:url(/portal/img/map/chowol.svg);}
.mainMap .map #over.docheok {background-image:url(/portal/img/map/docheok.svg);}
.mainMap .map #over.gongiam {background-image:url(/portal/img/map/gongiam.svg);}
.mainMap .map #over.gwangnam1 {background-image:url(/portal/img/map/gwangnam1.svg);}
.mainMap .map #over.gwangnam2 {background-image:url(/portal/img/map/gwangnam2.svg);}
.mainMap .map #over.gyeongan {background-image:url(/portal/img/map/gyeongan.svg);}
.mainMap .map #over.namhansanseong {background-image:url(/portal/img/map/namhansanseong.svg);}
.mainMap .map #over.namjong {background-image:url(/portal/img/map/namjong.svg);}
.mainMap .map #over.neungpyeong {background-image:url(/portal/img/map/neungpyeong.svg);}
.mainMap .map #over.opo1 {background-image:url(/portal/img/map/opo1.svg);}
.mainMap .map #over.opo2 {background-image:url(/portal/img/map/opo2.svg);}
.mainMap .map #over.shinhyun {background-image:url(/portal/img/map/shinhyun.svg);}
.mainMap .map #over.songjeong {background-image:url(/portal/img/map/songjeong.svg);}
.mainMap .map #over.ssangryeong {background-image:url(/portal/img/map/ssangryeong.svg);}
.mainMap .map #over.tanbeol {background-image:url(/portal/img/map/tanbeol.svg);}
.mainMap .map #over.toechon {background-image:url(/portal/img/map/toechon.svg);}

.mainMap .map .marker strong {display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); white-space:nowrap; font-size:.85em; color:#666; font-weight:400; transition:.3s all; -webkit-transition:.3s all;}
.mainMap .map .marker .selected {width:1.4em; height:1.8em; bottom:-1em; margin-top:-.15em; background:url(../img/map/marker.svg) no-repeat 50% 50%; background-size:contain; z-index:1; opacity:1; left:50%; margin-left:-.7em;}
.mainMap .map .marker.on {z-index:5;}
.mainMap .map .marker.on strong {padding:.25em 1.25em; border-radius:9em; background:#222; color:#fff; font-size:1em; bottom:1.6em;}
.mainMap .map .marker.on .selected {bottom:0;}

.mainMap .map .marker:focus {outline: 0px;}
.mainMap .map .marker:focus strong {outline: 2px solid red;}

.mainMap .map .marker {display:block; position:absolute; width:1px; height:1px;}
.mainMap .map .marker[data-cate='chowol'] {top:17.9em; left:17.7em;}
.mainMap .map .marker[data-cate='gongiam'] {top:22em; left:24.6em;}
.mainMap .map .marker[data-cate='docheok'] {top:28.7em; left:18.3em;}
.mainMap .map .marker[data-cate='toechon'] {top:10.6em; left:20.5em;}
.mainMap .map .marker[data-cate='namjong'] {top:5em; left:18.5em;}
.mainMap .map .marker[data-cate='namhansanseong'] {top:9.5em; left:10em;}
.mainMap .map .marker[data-cate='opo1'] {top:22.2em; left:7.8em;}
.mainMap .map .marker[data-cate='opo2'] {top:21.3em; left:12.6em;}
.mainMap .map .marker[data-cate='shinhyun'] {top:21.5em; left:3.5em;}
.mainMap .map .marker[data-cate='neungpyeong'] {top:23.5em; left:3.7em;}
.mainMap .map .marker[data-cate='gyeongan'] {top:16.7em; left:11.8em;}
.mainMap .map .marker[data-cate='ssangryeong'] {top:17.3em; left:14em;}
.mainMap .map .marker[data-cate='songjeong'] {top:14.4em; left:12.8em;}
.mainMap .map .marker[data-cate='tanbeol'] {top:13.7em; left:9.6em;}
.mainMap .map .marker[data-cate='gwangnam1'] {top:17.5em; left:7.5em;}
.mainMap .map .marker[data-cate='gwangnam2'] {top:19.4em; left:9.6em;}


@media all and (max-width:1024px) {
	.mapAreaWrap {margin-top:0;}
	.mapAreaWrap > .inner:before {display:none;}
	.mapAreaWrap:before {top:0; bottom:0; right:0; margin-right:0; border-radius:0;}
	.mapAreaWrap .sec-title {margin-bottom:1em; text-align:center; padding-top:3em;}
	.mainMap .map {position:relative; margin:0 auto;}
	.mainMap .map-area {overflow:auto; margin:0 -1em 2em;}
	.mainMap .detail {width:auto; word-break:keep-all;}
	.mainMap .detail .more-area {text-align:center; padding-bottom:3em;}
}



/******************************************************
	Banner Wrap Style
******************************************************/

.bannerWrap {position:relative; margin-top:1.5em; border-top:1px solid #ddd; overflow:hidden;}
.bannerWrap .inner {position:relative;}
.bannerWrap .sec-tit {position:absolute; left:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); font-weight:700; letter-spacing:-.04em;}
.bannerWrap .mainBanner {position:relative; min-height:4em; margin-left:4em; padding-left:9em;}
.bannerWrap .mainBanner .control {top:30%; left:0; right:auto; transform:translateY(-50%); -webkit-transform:translateY(-50%); box-shadow:none; padding:0;}
.bannerWrap .mainBanner .swiper-slide {width:auto;}
.bannerWrap .mainBanner .swiper-slide a {display:block; position:relative; font-size:.85em; color:#555; padding:1.64em 0;}

@media all and (max-width:1024px) {
	.bannerWrap {padding-left:0; padding-right:0; margin-top:0;}
	.bannerWrap .sec-tit {display:none;}
	.bannerWrap .mainBanner {margin-left:0; padding-left:7em;}
	.bannerWrap .mainBanner .control {left:0;}
}
@media all and (max-width:768px) {
	.bannerWrap .mainBanner .control {top:25%;}
}

/******************************************************
	종합예약 레이어팝업
******************************************************/

#layoutReserve {display:none; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.6); z-index:9999;}
#layoutReserve .layerBox {padding:2.5em 0 2em; position:absolute; top:50%; right:6.5%; left:6.5%; transform:translateY(-50%);}
#layoutReserve .layerBox:before {content:''; width:17.25em; height:10.15em; background:url(../img/main/img_Reserve.png) no-repeat 100% 100%; background-size:100% auto; position:absolute; bottom:0; right:7%;}
#layoutReserve .layerBox:after {content:''; display:block; background:#1ca19a; border-radius:7.5em 3em 2em 2em; position:absolute; top:0; right:3.5em; bottom:0; left:0; z-index:-1;}
#layoutReserve h4 {font-family:'GmarketSans','NotoSans','맑은고딕', Malgun Gothic, 'Noto Sans KR', sans-serif; font-size:2.3em; color:#fff; text-align:center;}
#layoutReserve h4 span {color:#D3F2FF;}
#layoutReserve .tab-group {display:table; width:100%; padding-top:2.5em;}
#layoutReserve .tab-group:after {content:''; display:block; clear:both;}
#layoutReserve .tab-group .tabs {display:table-cell; width:16em; padding-top:4.5em; padding-left:3.5em; vertical-align:top;}
#layoutReserve .tab-group .tabs li {border-bottom:1px solid rgba(255,255,255,.4); position:relative;}
#layoutReserve .tab-group .tabs li:after {content:''; border-radius:1em; position:absolute; top:-1px; right:0; bottom:-1px; left:0; transition:.3s;}
#layoutReserve .tab-group .tabs li.tab-active:after {background:#D22259; box-shadow:0 5px 12px rgba(0,0,0,.16);right:-2em; left:-1em;}
#layoutReserve .tab-group .tabs li button {width:100%; padding:1.1em 0 1.1em .83em; font-family:'GmarketSans','NotoSans','맑은고딕', Malgun Gothic, 'Noto Sans KR', sans-serif; font-size:1.2em; color:rgba(255,255,255,.9); text-align:left; background:none; position:relative; z-index:2;}
#layoutReserve .tab-group .tabs li button.on {font-weight:600; color:#fff;}
#layoutReserve .tab-group .tabs li button .selected {width:.58em; height:1em; background:url(../img/main/img_Reserve_on.svg) no-repeat 0 0; background-size:100% auto; opacity:1; top:50%; transform:translateY(-50%); right:.5em; left:auto;}
#layoutReserve .tab-group .tab-content {display:table-cell; height:29.5em; padding:3.5em 3.5em 2em 4em; background:#fff; border-radius:3em; box-shadow:-20px 10px 40px rgba(0,0,0,.1);}
#layoutReserve .tab-group .tab-con ul {margin:0 -.75em;}
#layoutReserve .tab-group .tab-con ul:after {content:''; display:block; clear:both;}
#layoutReserve .tab-group .tab-con li {display:table; width:33.33%; height:4.5em; padding:0 .75em; margin-bottom:1.5em; float:left; position:relative;}
#layoutReserve .tab-group .tab-con li:after {content:''; border:1px solid #ddd; border-radius:.5em; position:absolute; top:0; left:.75em; right:.75em; bottom:0;}
#layoutReserve .tab-group .tab-con li:hover:after {border-color:#D22259;}
#layoutReserve .tab-group .tab-con a {display:table-cell; padding:0 1em; text-align:center; vertical-align:middle; position:relative; z-index:2;}
#layoutReserve .tab-group .tab-con a[target="_blank"]:after {content:''; display:inline-block; width:1em; height:1em; margin-left:.5em; background:url(../img/common/ico_blank.svg) no-repeat 50% 50%; background-size:contain; vertical-align:middle;}
#layoutReserve .btnClose {display:block; width:3.5em; height:3.5em; text-indent:-9999px; background:#06625e url(../img/main/img_Reserve_close.svg) no-repeat 50% 50%; border-radius:50%; position:absolute; top:2em; right:6em; overflow:hidden; transition:.3s;}
#layoutReserve .btnClose:hover {background-color:#034441;}

/* 도서관 프로그램 이너 모달*/
.innerContent{display:table-cell;width: auto;padding:3.5em 3.5em 2em 4em;background: #ffffff;border-radius:3em;z-index:999;position: absolute;top: 12em;left: 26em;box-shadow: 10px 10px 60px #4f4f4f7d;/* height: 25em; */right: 9em;}
.inner_btnClose{display:block;width: 2.5em;height: 2.5em;text-indent:-9999px;background: #d22259 url(../img/main/img_Reserve_close.svg) no-repeat 50% 50%;border-radius:50%;position:absolute;top: 1em;right: 1em;overflow:hidden;transition:.3s;}
.inner_btnClose:hover {background-color:#034441;}
.innerContent .innerModal ul {margin:0 -.75em;/* margin-top: 1.5em; */}
.innerContent .innerModal ul:after {content:''; display:block; clear:both;}
.innerContent .innerModal li {display:table;width: 33.3333%;height: 4em;padding: 0 .5em;margin-bottom: 1em;float:left;position:relative;}
.innerContent .innerModal li:after {content:'';border:1px solid #ddd;border-radius:.5em;position:absolute;top:0;left: .5em;right: .5em;bottom:0;}
.innerContent .innerModal li:hover:after {border-color:#D22259;}
.innerContent .innerModal a {display:table-cell;padding:0 1em;text-align:center;vertical-align:middle;position:relative;z-index:2;}
.innerContent .innerModal a:after {content:''; display:inline-block; width:1em; height:1em; margin-left:.5em; background:url(../img/common/ico_blank.svg) no-repeat 50% 50%; background-size:contain; vertical-align:middle;}

@media all and (max-width:1420px){
	.innerContent{left: 20%;right: 20%;position:absolute;top: 100px;}
	.innerContent .innerModal li{width:50%;}
}

@media all and (max-width:1024px) {
	#layoutReserve .layerBox {left:3%; right:3%;}
	#layoutReserve .layerBox:before {width:12em; height:7.5em;}
	#layoutReserve .layerBox:after {right:2em;}
	#layoutReserve h4 {font-size:2em;}
	#layoutReserve h4 strong {display:block; padding-top:.15em;}
	#layoutReserve .tab-group {display:block; padding-top:2em; padding-left:2em;}
	#layoutReserve .tab-group .tabs {display:block; width:auto; padding:0 4em 1.5em 0;}
	#layoutReserve .tab-group .tabs ul {display:table; width:100%; table-layout:fixed;}
	#layoutReserve .tab-group .tabs li {display:table-cell; border-right:1px solid rgba(255,255,255,.4); border-bottom:0;}
	#layoutReserve .tab-group .tabs li:last-child {border-right:0;}
	#layoutReserve .tab-group .tabs li.tab-active:after {top:-.6em; right:-1px; bottom:-.6em; left:-1px; border-radius:.6em}
	#layoutReserve .tab-group .tabs li button {padding:.6em 1em; font-size:1em;}
	#layoutReserve .tab-group .tabs li button .selected {right:1em; margin-top:-.5em; transform:rotate(90deg);}
	#layoutReserve .tab-group .tab-content {display:block; height:24em; padding:2em 2em 1.42em; border-radius:2em;}
	#layoutReserve .tab-group .tab-con ul {margin:0 -.29em;}
	#layoutReserve .tab-group .tab-con li {padding:0 .29em; margin-bottom:.58em;}
	#layoutReserve .tab-group .tab-con li:after {left:.29em; right:.29em;}
	#layoutReserve .btnClose  {right:4em;}
	.innerContent{left: 12%;right: 8%;}
	.innerContent:before {width:12em; height:7.5em;}
	.innerContent:after {right:2em;}
}
@media all and (max-width:768px) {
	#layoutReserve .layerBox {left:2%; right:2%;}
	#layoutReserve .tab-group .tabs li button {text-align:center;}
	#layoutReserve .tab-group .tabs li button .selected {background:none;}
}
@media all and (max-width:640px) {
	#layoutReserve .layerBox {padding-bottom:1.5em;}
	#layoutReserve .layerBox:before {display:none;}
	#layoutReserve .layerBox:after {right:1em; border-radius:5em 2em 2em 2em;}
	#layoutReserve h4 {font-size:1.6em;}
	#layoutReserve .tab-group {padding-left:1.5em;}
	#layoutReserve .tab-group .tabs {padding-right:2.5em;}
	#layoutReserve .tab-group .tab-content {overflow-y:auto;}
	#layoutReserve .tab-group .tab-con li {width:50%;}
	#layoutReserve .tab-group .tab-con li.fs09 a{font-size:.9em;}
	#layoutReserve .btnClose {right:3em; top:-1.75em;}
	.innerContent{left: 6%;right: 6%;position:absolute;top: 100px; padding:3em 2em 2em;}
	.innerContent .innerModal li{width:50%;}
	.inner_btnClose {top:0; right:0;}
}



/* 슬라이드팝업 */
.sliding_popup {background:#F4F7FF;}
.sliding_popup img {max-width:100%;}
.sliding_popup .swiper-slide {text-align:center;}
.sliding_popup .swiper-button-prev, .sliding_popup .swiper-button-next {width:1em; height:2em; background:no-repeat 50% 50%; background-size:contain;}
.sliding_popup .swiper-button-prev {background-image:url(../img/main/ico_quick_prev.svg); left:0;}
.sliding_popup .swiper-button-next {background-image:url(../img/main/ico_quick_next.svg); right:0;}
.sliding_popup .control {padding:.3em 1em; font-size:.85em; text-align:center;}
.sliding_popup .control .btn_play,
.sliding_popup .control .btn_stop {display:inline-block; width:1.2em; height:1.2em; background:no-repeat 50% 50%; background-size:contain; text-indent:-999px; overflow:hidden; vertical-align:middle;}
.sliding_popup .control .btn_play {background-image:url(../img/main/ico_control_play.svg);}
.sliding_popup .control .btn_stop {background-image:url(../img/main/ico_control_pause.svg);}
.sliding_popup .control .swiper-pagination {display:inline-block; width:auto; padding-right:10px; position:static; vertical-align:middle;}
.sliding_popup .control .swiper-pagination .swiper-pagination-current {color:#FF6B18;}
.sliding_popup .closeBox {display:inline-block; padding-left:15px; color:#fff; text-align:right; background:#5546A9; border-radius:10px 10px 0 0; overflow:hidden; position:absolute; right:0; bottom:0;}
.sliding_popup .closeBox span {font-size:.85em; line-height:2em;}
.sliding_popup .btn_close {display:inline-block; padding:0 10px; margin-left:5px; color:#fff; background:#333;}

@media all and (max-width:1400px) {
	.sliding_popup .swiper-button-prev {left:1em;}
	.sliding_popup .swiper-button-next {right:1em;}
	.sliding_popup .closeBox {border-radius:10px 0 0 0;}
}
@media all and (max-width:640px) {
	.sliding_popup .control {text-align:left;}
}

/* chatbot */
.callChatbot {position:fixed;right: 1.5em;z-index: 99999;left: auto;bottom: 2.5em;display: block;}
.callChatbot a {display:block;width: 4em;height: 4em;background:#154183 url(../img/main/img_chatbot.png) no-repeat 50% 50%;background-size: 73%;border-radius: 3em;position: absolute;left: auto;bottom: 1px;right: -1px;}
.callChatbot .btn_wrapper {padding: 1em 5.5em 1em 1.5em;border: 2px solid #7377ff;background-color: #fff;border-color: #154183;display: block;color: #333;font-size: 0.8em;border-radius: 3em;line-height: 1.4;display: none;text-align:center;}
.callChatbot:hover .btn_wrapper {display:block;}
.callChatbot:hover a{box-shadow:0 8px 16px rgba(0, 0, 0, 0.3)}

.aiChatbot {position:fixed;right: 1.5em;z-index: 99999;left: auto;bottom: 7.5em;display: block;}
.aiChatbot a {display:block;width: 4em;height: 4em;background:#207527 url(../img/main/greeny_icon.png) no-repeat 50% 50%;background-size: 100%;border-radius: 3em;position: absolute;left: auto;bottom: 1px;right: -1px;}
.aiChatbot .btn_wrapper {padding: 1em 5.5em 1em 1.5em;border: 2px solid #207527;background-color: #fff;border-color: #207527;display: block;color: #333;font-size: 0.8em;border-radius: 3em;line-height: 1.4;display: none;text-align:center;}
.aiChatbot:hover .btn_wrapper {display:block;}
.aiChatbot:hover a{box-shadow:0 8px 16px rgba(0, 0, 0, 0.3)}

/* 배너모음 */
.banner-wrap {position:absolute; width:9em; bottom:0; right:0;}
.banner-wrap > ul > li + li {margin-top:.5em;}
.banner-my {display:block; position:relative; padding:1em .5em 1em 1em; background:#D22259; border-radius:1em; text-align:center;}
.banner-my:before,
.banner-slide:before {content:''; display:block; width:2em; height:2em; background:#FFF9F8 url(../img/main/ico_ban_01.svg) no-repeat 50% 50%; border-radius:50%; position:absolute; top:50%; margin-top:-1em; left:-1em; z-index:2;}
.banner-my span,
.banner-slide a span {display:block; font-size:.9em; font-weight:600; color:#fff; white-space:nowrap;}
.banner-slide {position:relative; background:#E54C4C; border-radius:1em; text-align:center;}
.banner-slide a {padding:1em .5em 1em 1em;}
.banner-slide:before {background-image:url(../img/main/ico_ban_02.svg);}
.banner-wrap .control {position:absolute; bottom:-.75em; right:.75em; z-index:2;}
.banner-wrap .control button {display:inline-block; width:1.5em; height:1.5em; margin-left:.25em; text-indent:-999px; background:#fff no-repeat 50% 50%; background-size:contain; border-radius:50%; box-shadow:0 0 10px rgba(227,39,107,.1); overflow:hidden; float:left;}
.banner-wrap .control button.prev {background-image:url(../img/main/btn_ban_prev.svg);}
.banner-wrap .control button.next {background-image:url(../img/main/btn_ban_next.svg);}
.banner-event .title {position:relative; padding:.2em 0 .2em 1.6em; margin-bottom:.25em;}
.banner-event .title:before {content:''; display:blcok; width:1.3em; height:1.3em; background:url(../img/main/ico_ban_03.svg) no-repeat 50% 50%; background-size:contain; position:absolute; top:50%; margin-top:-.65em; left:0;}
.banner-event .title span {font-size:.8em; font-weight:600;}
.banner-event .event-list {position:relative; background:#FED9D3; border-radius:1em;}
.banner-event .event-wrap {position:relative; padding:2.8em 1em 1.5em 1em;}
.banner-event .event-wrap:focus {border: 2px solid #000000;}
.banner-event .event-wrap .dday {display:block; padding:0 .8em .5em; font-size:1.2em; font-weight:600; color:#E22E2E; line-height:1.2; white-space:nowrap; background:#FFF9F8; border-radius:0 0 1em 1em; position:absolute; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
.banner-event .event-wrap .tit {display:block; height:4.2em; margin-bottom:.8em; font-size:.8em; font-weight:500; line-height:1.4; word-break:keep-all; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical;}
.banner-event .event-wrap .date {display:block; font-size:.7em; color:#666;}

@media all and (max-width:1024px) {
	.banner-wrap {position:relative; width:auto; padding-top:1.5em; padding-right:21em; right:auto; bottom:auto;}
	.banner-my,
	.banner-slide a {padding:1.5em .5em 1.5em 1em;}
	.banner-event {position:absolute; right:0; bottom:0; width:20em;}
	.banner-event .event-wrap {padding:2.5em 1em 1.2em 1em;}
	.banner-event .event-wrap .dday {padding:0 1.2em .5em; font-size:1.1em;}
	.banner-event .event-wrap .tit {height:2.8em; -webkit-line-clamp:2;}
}
@media all and (max-width:768px) {
	.banner-wrap {padding-right:16em;}
	.banner-event {width:15em;}
}
@media all and (max-width:640px) {
	.banner-wrap {padding-right:0;}
	.banner-my,
	.banner-slide a {padding:1em .5em 1em 1em;}
	.banner-my span,
	.banner-slide a span,
	.banner-event .title span,
	.banner-event .event-wrap .date {font-size:.9em;}
	.banner-my:before,
	.banner-slide:before {background-size:65% auto;}
	.banner-event {position:static; width:auto;}
	.banner-event .event-wrap .tit {height:1.4em; margin-bottom:.4em; font-size:1em; -webkit-line-clamp:1;}
	
	.banner-wrap .control {bottom:-1em; right:1em;}
	.banner-wrap .control button {width:2em; height:2em;}
}


/*레이어팝업*/
.layerPopup {position: absolute;z-index: 9999999;top:10px;left:10px;background:#fff;border:1px solid #000;overflow:hidden;}
.layerPopup .pop-con {position:relative;}
.layerPopup .pop-control {display:block; position:relative; background:#000; color:#fff; padding:10px 40px 10px 10px; font-size:11px; min-width:200px; height:40px; overflow:hidden;}
.layerPopup .pop-control .dayCloseCheck {display:block; position:absolute; top:0; left:0; opacity:0; z-index:-9999; height:0 !important; width:0 !important;}
.layerPopup .pop-control .dayCloseCheck + label {display:inline-block; position:relative; line-height:20px; padding:0; cursor:pointer;}
.layerPopup .pop-control .dayCloseCheck + label:before {content:""; display:inline-block; width:12px; height:12px; vertical-align:middle; background:#fff; border:3px solid #fff; border-radius:100%; margin-right:.5em; box-sizing:border-box;}
.layerPopup .pop-control .dayCloseCheck:focus + label {text-decoration:underline;}
.layerPopup .pop-control .dayCloseCheck:checked + label:before {background:#0089ff;}
.layerPopup .pop-control .pop-close {display:block; position:absolute; top:10px; right:10px; width:20px; height:20px; background:transparent; overflow:hidden; text-indent:-999px;}
.layerPopup .pop-control .pop-close:before {content:"⨯"; display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; line-height:20px; text-indent:0; color:#fff; font-size:2em;}

#layerpopup_mycode {top: 80px;left: 100px;}

@media screen and (max-width:1024px){
	#layerpopup_mycode{top: 140px;left:0;}
}

@media screen and (max-width:745px){
	.layerPopup {width:100%;}
	.layerPopup img{width:100%;}
}