@charset "UTF-8";
body { margin: 0; font-family: 'Noto Sans KR', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; overscroll-behavior-x:none; overscroll-behavior-y: none;}
a { color: #000000; text-decoration: none; background-color: transparent; }
a:hover { color: #0056b3; text-decoration: none; }
*:focus { outline:none; }
a:not([href]):not([tabindex]):focus {outline: 0 }
nav a { background: #ffffff; border-bottom: 4px solid #000000; text-decoration: none; border: 0; display: block; height: inherit; line-height: inherit; }
.container { /* background: #F0F3F4; */ top: 48px;background: rgba(255, 255, 255, 0); width: 100%; padding-right: 16px; padding-left: 16px; margin-right: auto; margin-left: auto; }
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -16px; margin-left: -16px; }
.djplus-list .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: 0; margin-left: 0; }
.custom-control-label::before { position: absolute; top: 0.15rem; left: -0.5rem; display: block; width: 1rem; height: 1rem; pointer-events: none; content: ""; background-color: #fff; border: #adb5bd solid 1px; }
.custom-control-label::after { position: absolute; top: 0.15rem; left: -0.5rem; display: block; width: 1rem; height: 1rem; content: ""; background: no-repeat 50%/50% 50%; }
.custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; padding: 0 0 0 15px; }
.list-group-item.active { color: #000; background-color: #FAFAFA; border-color: #FAFAFA; border: 1px solid rgba(0, 0, 0, 0.125); }
.btn-firstary { color: #000; background-color: #F1F9FF; border-color: #007bff; }
.btn-secondary { color: #fff; background-color: #43425D; border-color: #43425D; }
.btn-secondary:hover { color: #fff; background-color: #43425D; border-color: #43425D; }
.card h2, .h2 { font-size: 16px; }
.card h3, .h3 { font-size: 14px; }
.card { font-size: 14px; }
.card-body { padding: 16px; }
.card-body-guide{ padding: 16px; border: 1px solid #d8d8d8;}
.card { border: 0px solid rgba(0, 0, 0, 0.125); border-radius: 0; }
.card img { display: block; margin: 0px auto; }
.card-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 16px; }
.title { display: inline-block; margin: 5px auto; font-size: 18px; font-weight: 400; }
.title h1 { font-size: 18px; }
.stats { font-size: 12px; }
.navbar { background: #ffffff; border-bottom: 1px solid #D8D8D8; padding: .5rem 0rem;}
#banner { background-image: url(../images/Splash03.svg); background-position: top center; background-repeat: no-repeat; background-size: cover; padding: 23em 1em 5em 1em; height: 100vh; min-height: 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { #banner { background-image: url(../images/Splash03.svg); } }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 264dpi), only screen and (min-resolution: 2dppx) { #banner { background-image: url(../images/Splash03.svg); } }
/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w 768px to 1024px ##Device = 태블릿, 아이패드(세로) ##Screen = 768px에서 1024px 사이 */
@media (min-width: 768px) and (max-width: 1024px) { #banner { padding: 49vh 1em 5em 1em; } }
/* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px ##Device = 저해상도 태블릿, 모바일(가로) ##Screen = 481px에서 767px 사이 */
@media (min-width: 481px) and (max-width: 767px) { #banner { padding: 48vh 1em 5em 1em; } }
/* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px ##Device = 대부분의 스마트폰 모바일 기기(세로) ##Screen = 320px에서 479px 사이 */
@media (min-width: 320px) and (max-width: 480px) { #banner { padding: 47vh 1em 5em 1em; } }

	

/* page-loading */
#page-loading { width: 100%; top: 50vh; left: 0; position: fixed; z-index: 9999; text-align: center;}
.bokeh { font-size: 60px; width: 1em; height: 1em; margin: 0px auto; position: relative; border-radius: 50%; border: 0.01em solid rgba(150, 150, 150, 0.1); list-style: none; }
.bokeh li { position: absolute; width: .2em; height: .2em; border-radius: 50%; }
.bokeh li:nth-child(1) { left: 50%; top: 0; margin: 0 0 0 -.1em; background: #00C176; -webkit-transform-origin: 50% 250%; transform-origin: 50% 250%; -webkit-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate; animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate; }
.bokeh li:nth-child(2) { top: 50%; right: 0; margin: -.1em 0 0 0; background: #FF003C; -webkit-transform-origin: -150% 50%; transform-origin: -150% 50%; -webkit-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate; animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate; }
.bokeh li:nth-child(3) { left: 50%; bottom: 0; margin: 0 0 0 -.1em; background: #FABE28; -webkit-transform-origin: 50% -150%; transform-origin: 50% -150%; -webkit-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate; animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate; }
.bokeh li:nth-child(4) { top: 50%; left: 0; margin: -.1em 0 0 0; background: #88C100; -webkit-transform-origin: 250% 50%; transform-origin: 250% 50%; -webkit-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate; animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate; }
/* 아래는 절대로 변경 금지 시작*/
@-webkit-keyframes rota { from {} to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rota { from {} to {
	-webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* 아래는 절대로 변경 금지 끝*/
.contents h4 { font-size: 0.875rem; line-height: 1.5em; font-weight: 500; letter-spacing: 0; line-height: 1em; margin: 0 0 1em 0; text-transform: uppercase; }
.contents p { margin: 0 0 2em 0; }
.box { border-radius: 3px; border: solid 2px #fff; margin-bottom: 2em; padding: 0; }
.box p { color: #666666; }
.box span { font-size: unset; }
.box > :last-child, .box > :last-child > :last-child, .box > :last-child > :last-child > :last-child { margin-bottom: 0; }
.box.alt { border: 0; border-radius: 0; padding: 0; }
.box h4 { font-size: 0.875rem; line-height: 1.5em; font-weight: 500; letter-spacing: 0; line-height: 1em; margin: 0 0 1em 0; text-transform: uppercase; }
.box ol { list-style: decimal; margin: 0 0 2em 0; padding-left: 1.25em; }
.box ol li { padding-left: 0.25em; }
.box ul { list-style: disc; margin: 0 0 2em 0; padding-left: 1em; }
.box ul li { padding-left: 0.5em; }
.box img { max-width: 100% !important; height: auto !important; }
#header .back_btn { display: block; padding: 0; border: 0; width: 13%; height: 100%; background: url(../../images/opinion/common/back_ico.png) no-repeat center 50%; background-size: auto 48%; margin: 0; left: 0; top: 0; }
.icon-right { float: right; }
.fix-downbtn { height: 48px; width: 100%; position: fixed; left: 0; bottom: 60px; }
.fix-down01 { position: fixed; left: 0; bottom: 0; }
.fix-down02 { position: fixed; right: 0; bottom: 0; }
.fix-foot01 { position: fixed; left: -2px; bottom: 0; }
.fix-foot01 p { margin-bottom: 0; }
.fix-foot02 { position: fixed; left: 24.8%; bottom: 0; }
.fix-foot02 p { margin-bottom: 0; }
.fix-foot03 { position: fixed; left: 50%; bottom: 0; }
.fix-foot03 p { margin-bottom: 0; }
.fix-foot04 { position: fixed; left: 75.2%; bottom: 0; }
.fix-foot04 p { margin-bottom: 0; }

.regist-fixed {
    height: 40px;
    width: 100%;
    position: fixed;
    bottom: 60px;
    
}

.input-group > .form-control, .input-group > .form-control-plaintext, .input-group > .custom-select, .input-group > .custom-file { height: 48px; }
.error-type { color: #f44336; font-size: 0.75rem; }
.form-group > .error { color: #f44336; font-size: 0.75rem; }
.form-group > .form-control { color: #495057; font-size: 1rem; }
.regist_btn { margin-bottom: 7%; }
.card-mv h2 { font-size: 16px; }
.card-mv h3 { font-size: 14px; }
.card-mv { font-size: 14px; }
.card-mv-body { padding: 16px; }
.card-mv { border: 0px solid rgba(0, 0, 0, 0.125); border-radius: 0; background: #F0F3F4; padding-bottom: 24px; }
.card-mv img { display: block; margin: 0px auto; }

/* 더보기 버튼 */
.more_to_list { cursor: pointer; position: fixed; bottom: 64px; right: 25%; /*   display: none; */ }
/* top 버튼 */
.foot-top { position: fixed; bottom: 60px; right: 16px; z-index: 2; }
.back-to-top { cursor: pointer; display: inline-block; vertical-align: top; padding: 4px 9px; }
.btn-ta { color: #000; background-color: #eceeeda6; border-color: #9E9E9E; box-shadow: none; }
.btn-ta:hover { color: #fff; background-color: #0069d9a6; border-color: #0062cc; }
.btn-ta:focus, .btn-ta.focus { box-shadow: none; }

/* 새로고침 버튼 */
.top-refresh { height:28px;position:absolute;width: -webkit-fill-available;}
.top-refresh01 { cursor: pointer; display: inline-block; width:100%;}
.btn-tr { color: #000; background-color: #4caf5059; border-color: #9E9E9E; box-shadow: none; }
.btn-tr:hover { color: #fff; background-color: #0069d9a6; border-color: #0062cc; }
.btn-tr:focus, .btn-tr.focus { box-shadow: none; }
.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.btn-gray { color: #000; background-color: #DDDDDD; border-color: #DDDDDD; }
.btn-gray:hover { color: #fff; background-color: #0069d9; border-color: #0062cc; }
.btn-gray:focus, .btn-gray.focus { box-shadow: none; }

.btn-outline-Dcheck { background: #DA4453; color: #FFFFFF; border-color: #ced4da; }
.btn-outline-Dcheck:hover { background: #DA4453; color: #FFFFFF; border-color: #ced4da; }
.card-testimonial, .card-profile { margin-top: 30px; text-align: center; background: transparent; }
.card-testimonial .card-avatar, .card-profile .card-avatar, .card-profile .card-myavatar { margin: -50px auto 0; width: 128px; height: 128px; overflow: hidden; padding: 0; }
.card-testimonial .card-avatar + .card-body, .card-profile .card-avatar + .card-body, .card-profile .card-myavatar + .card-body { margin-top: 15px; }
.card-testimonial .card-avatar img, .card-profile .card-avatar img, .card-profile .card-myavatar img { width: 128px; height: 128px; border-radius: 50%; border: 1px solid #d8d8d8; background: #fff; }
.card-testimonial .card-body + .card-footer, .card-profile .card-body + .card-footer { margin-top: -15px; }
.card-testimonial .card-footer .btn.btn-just-icon, .card-profile .card-footer .btn.btn-just-icon { font-size: 20px; padding: 12px 12px; line-height: 1em; }
.card-plain.card-testimonial .card-avatar, .card-plain.card-profile .card-avatar { margin-top: 0; }
.card-avatar { background: #f1f9ff; }
.card-myavatar { background: #F1F9FF; height: 224px;}
.card-mileage { background: #F1F9FF; height: 128px;}
.card-people { cursor: pointer; position: fixed; border-radius: 50px; padding: 8px 14px; top: 0px; right: 20px; display: none; }
.card-avatar .btn-pp { position: relative; right: -38px; bottom: 48px; color: #1DA6B9; background-color: #ffffff; border-color: #1DA6B9; border-radius: 64px; width: 48px; height: 48px; text-align: center; padding: 0.275rem 0.55rem; font-size: 1.5rem; }
.card-avatar2 .btn-pp { position: relative; right: 0; bottom: 0; color: #1DA6B9; background-color: #ffffff; border-color: #1DA6B9; border-radius: 64px; width: 48px; height: 48px; text-align: center; padding: 0.275rem 0.55rem; font-size: 1.5rem; }
.card-myavatar .btn-pp { position: relative; right: -38px; bottom: 48px; color: #1DA6B9; background-color: #ffffff; border-color: #1DA6B9; border-radius: 64px; width: 48px; height: 48px; text-align: center; padding: 0.275rem 0.55rem; font-size: 1.5rem; }
.btn-pp:hover { color: #fff; background-color: #0069d9; border-color: #0062cc; }
.btn-pp:focus, .btn-pp.focus { box-shadow: none; }

.switch { position: relative; display: inline-block; width: 100%; height: 104px; padding-top: 10px; text-align: center; box-shadow: none; border: 1px solid #DFDFDF;}
.switch input { opacity: 0; width: 0; height: 0; }
.switchin { position: relative; display: inline-block; width: 100%; height: 116px; padding-top: 10px; text-align: center; box-shadow: none; border: 1px solid #DFDFDF;}
.switchin input { opacity: 0; width: 0; height: 0; }
.switch-btn { position: relative; display: inline-block; width: 100%; height: 48px; padding-top: 10px; text-align: center; box-shadow: none; border: 1px solid #DFDFDF;}
.switch-btn input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; padding-top: 14px; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; /*  background-color: white;*/ -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #FADE09; }
input[type="checkbox"][disabled]:checked + .slider { background-color: #DFDFDF; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.switch-time { position: relative; display: inline-block; width: 100%; height: 48px; padding-top: 10px; text-align: center; box-shadow: none; }
.switch-time input { opacity: 0; width: 0; height: 0; }
.slider01 { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; padding-top: 12px; -webkit-transition: .4s; transition: .4s; border: 1px solid #C8D1D3; border-radius:4px; }
.slider01:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; /*  background-color: white;*/ -webkit-transition: .4s; transition: .4s; }
input:checked + .slider01 { background-color: #1967B2; color:#FFFFFF;}
input[type="checkbox"][disabled] + .slider01 { background-color: #DFDFDF; color: #B3B3B3;}
input:focus + .slider01 { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider01:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
/* Rounded sliders */
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
.pb-6, .py-6 { padding-bottom: 4rem !important; }
.pb-7 { padding-bottom: 6rem !important; }
.card-event-01 { font-size: 14px; height: 177px; background-color: #f9c50d; background-image: url(../images/banner01.gif); background-repeat: no-repeat; background-position: center; }
.card-event-02 { font-size: 14px; height: 177px; background-color: #B9E6FD; background-image: url(../images/banner02.gif); background-repeat: no-repeat; background-position: center; }
.card-event-03 { font-size: 14px; height: 177px; background-color: #f2f7fa; background-image: url(../images/banner03.gif); background-repeat: no-repeat; background-position: center; }
.card-event-04 { font-size: 14px; height: 177px; background-color: #64b5f6; background-image: url(../images/banner04.gif); background-repeat: no-repeat; background-position: center; }
.card-event-01 h3, .card-event-02 h3, .card-event-03 h3, .card-event-04 h3 { font-size: 17px; text-align: center; }
.card-event-body { padding: 4px; }
.card-sub-body { padding: 45px 16px 0; }
.card-event-title { margin-bottom: 0.32rem; }
.card-event-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; /* 라인수 */ -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.2em; font-size: 14px; margin-bottom: 8px; }
.card-event img { display: block; margin: 0px auto; }
.card-main { font-size: 14px; box-shadow: none; border-top: 1px solid #DFDFDF;}
.card-main:first-child { border-top: none;}
.card-main h3, .h3 { font-size: 15px; text-align:left;}
.card-main-body { padding: 16px; }
.card-main-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.2em; margin-bottom: 0.32rem; }
.card-main-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; /* 라인수 */ -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.2em; height: 1.2em; font-size: 13px; color: #888888;}
.card-main img { display: block; margin: 0px auto; width:96px; height:64px; border-radius: 6px;}
.card-villpro img { display: block; margin: 0px auto; width:56px; height:auto; border-radius: 6px;}
.card-ps img { display: block; margin: 0px auto; width:46px; height:auto; border-radius: 6px;}
.card-sub { font-size: 14px; /* text-align: center; */ /*    height: 150px; */ background-color: #FADE09; /*     background-image: url(../images/space01_bg.png); */ border-radius: 4px; }
.card-sub h3, .h3 { font-weight: 600; text-align: center; /* text-shadow: -1px -1px #000, -1px 1px #000, -1px -1px #000, -1px -1px #000; */ line-height: inherit; font-size: 15px !important; }
.card-sub-body { padding: 16px; }
.card-sub-title { margin-bottom: 0.32rem; }
.card-sub-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; /* 라인수 */ -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.2em; font-size: 14px; margin-bottom: 8px; }
.card-sub img { display: block; margin: 0px auto; }

.sTn01 { position: absolute; width: 30px; height: 30px; top: 10px; left: 8px; text-transform: uppercase; display: inline-block; font-size: 10px; font-weight: 500; line-height: 1.2; background: #2699FB; border-radius: 16px; padding: 2px 0 0 5px; }
.sTn02 { position: absolute; width: 30px; height: 30px; top: 10px; left: 8px; text-transform: uppercase; display: inline-block; font-size: 10px; font-weight: 500; line-height: 1.2; background: #F06292; border-radius: 16px; padding: 2px 0 0 5px; }
.sTn03 { position: absolute; width: 34px; top: 13px; left: 15px; text-transform: uppercase; display: inline-block; font-size: 11px; background: #AED581; border-radius: 0px; padding:6px; }
.sTn04 { position: absolute; width: 34px; top: 13px; left: 15px; text-transform: uppercase; display: inline-block; font-size: 11px; background: #232B73; border-radius: 0px; padding:6px; }
.sTn05 { position: absolute; top: 13px; left: 15px; text-transform: uppercase; display: inline-block; font-size: 11px; background: #ffdf00; border-radius: 16px; padding: 0 6px; }
.sTn06 { position: absolute; top: 13px; left: 15px; text-transform: uppercase; display: inline-block; font-size: 11px; background: #f06292; border-radius: 16px; padding: 0 6px; }
.sTn07 { position: absolute; top: 13px; left: 15px; text-transform: uppercase; display: inline-block; font-size: 11px; background: black; border-radius: 16px; padding: 0 6px; } 

.d01 { background: #fff; border-radius: 16px; padding: 0 10px; }
.d02 { display: inline-block; background: #308c6c; font-size: 11px; border-radius: 16px; padding: 0 9px; z-index: 76;}
.d03 { background: #eb7e67; border-radius: 16px; padding: 0 10px; }
.d04 { background: #41405a; border-radius: 16px; padding: 0 10px; }
.d05 { background: #ffdf00; border-radius: 16px; padding: 0 10px; }
.d06 { background: #f06292; border-radius: 16px; padding: 0 10px; }
.d07 { background: black; border-radius: 16px; padding: 0 10px; }
.card-detail-body span { font-size: 14px; color: #000000; }
.card-detail-body .time { font-size: 14px; color: #000000; }
.card-detail-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 10px 16px 16px 16px; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 248px;}
.card-detail-body h3, .h3 { font-size: 18px; }
.card-detail-title { margin-bottom: 0.32rem; }
.card-detail-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */ -webkit-box-orient: vertical; word-wrap: break-word; line-height: 28px; padding-top: 40px; }
.card-detail-title.whiteText {color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black}
.card-detail-title.blackText {color: black; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white}

.card-suggest-body span { font-size: 14px; color: #00BCD4; }
.card-suggest-body .time { font-size: 14px; color: #f8f9fa; }
.card-suggest-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 10px 16px 16px 16px; background-color: rgba(0, 0, 0, 0); width: 100%; height: 200px;}
.card-suggest-body h3, .h3 { font-size: 18px; }
.card-suggest-title { margin-bottom: 0.32rem; }
.card-suggest-title { overflow: hidden; width: 67vw; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */ -webkit-box-orient: vertical; word-wrap: break-word; line-height: 28px; padding-top: 16px; }
.card-suggest-title.whiteText {color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black}
.card-suggest-title.blackText {color: black; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white}

.pt4rem {padding-top: 4rem!important;}

/*상세페이지 배경 애니매이션*/
.area { background: #F1F2F3; background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8); width: 100%; height: 248px; }
.area01 { background: #F1F2F3; background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8); width: 100%; height: 154px; }
.circles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.circles li { position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.5); animation: animate 25s linear infinite; bottom: -100px; }
.circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
.circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
.circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
.circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
.circles li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
.circles li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
.circles li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
.circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
.circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
.circles li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }
@keyframes animate { 0% { transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0; }
  100% { transform: translateY(-500px) rotate(720deg);
    opacity: 0;
    border-radius: 100%; } }
.articlemeta { position: absolute; background: #FFF; bottom: 0; left: 0; right: 0; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; }
.articlemeta:before { position: absolute; content: ''; height: 40px; /*   width: 100%; */ top: -41px; }
.articlemeta ul { list-style-type: none; margin: 0px; padding: 0px; }
.articlemeta ul.left { float: left; }
.articlemeta ul.right { float: right; }
.articlemeta ul li { display: inline-block; padding: 12px 15px 13px; cursor: pointer; }
.articlemeta ul li:hover .material-icons { color: #644cad; }
.articlemeta ul .material-icons { margin-right: 5px; }
.votemain { position: inherit; background: #FFF; bottom: 0; left: 0; right: 0; padding-top: 3px; border-top: 1px solid #EEE; }
.votemain ul { list-style-type: none; padding: 0px; }
.votemain ul.left { float: left; }
.votemain ul.right { float: right; }
.votemain ul li { display: inline-block; padding: 12px 15px 13px 0; cursor: pointer; }
.card-votemain { font-size: 14px; height: 144px; box-shadow: none; border: 1px solid #eee;}
.card-votemain h3, .h3 { font-size: 16px; }
.card-votemain-body { padding: 16px; }
.card-votemain-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.2em; margin-bottom: 0.32rem; }
.card-votemain-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.2em; height: 2.4em; font-size: 14px; }
.card-votemain img { width: 296px; }
.bg01 {  /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }
.bg02 {  /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }
.bg03 {  /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }
.bg04 {  /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }
.bg05 {  /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }
.bg06 {  /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }
.bg07 { background-image: url("../images/votebg.png"); background-position: center; background-repeat: no-repeat; }
.card-comment { font-size: 14px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.card-comment h3, .h3 { font-size: 16px; }
.card-comment-body { padding: 16px 4px 0; }
.card-comment-title { margin-bottom: 0.32rem; }
.card-comment-title span{ color:#747474; }
.card-comment-text { line-height: 1.2em; font-size: 14px; margin-bottom: 0.3rem;}
.card-comment img { display: block; margin: 0px auto; border-radius: 50%; width: 40px; height: 40px; }
.card-comment-body close { display: inline-block; }
.card-ripple { font-size: 14px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.card-ripple h3, .h3 { font-size: 16px; }
.card-ripple-body { padding: 12px 4px 0; }
.card-ripple-title { margin-bottom: 0.32rem; }
.card-ripple-title span{ color:#007bff; }
.card-ripple-text { line-height: 1.2em; font-size: 14px; margin-bottom: 0.3rem;}
.card-ripple img { display: block; margin: 0px auto; border-radius: 50%; width: 40px; height: 40px; }
.card-ripple-body close { display: inline-block; }
.input-group-sm > .form-control:not(textarea), .input-group-sm > .custom-select { height: calc(1.5em + 1rem + 2px); }
.modal-content01 { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 264px; margin: 0 auto; pointer-events: auto; background-color: #FEE100; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0; }
.modal-content02 { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 264px; margin: 0 auto; pointer-events: auto; background-color: #B9E6FD; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0; }
.modal-content03 { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 264px; margin: 0 auto; pointer-events: auto; background-color: #FFF176; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0; }
.modal-content04 { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 264px; margin: 0 auto; pointer-events: auto; color: #fff; background-color: #FFFFFF; background-clip: padding-box; border: 0px solid rgba(214, 214, 214, 0.2); border-radius: 0.3rem; outline: 0; }
.modal-content05 { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 264px; margin: 0 auto; pointer-events: auto; color: #fff; background-color: transparent; background-clip: padding-box; border: 0px solid rgba(214, 214, 214, 0.2); border-radius: 0.3rem; outline: 0; }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 0.5; }
.modal-header-event { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; padding: 0; border-bottom: 0px solid #dee2e6; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }
.modal-header-event .close { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; top:10px; right:25px }
.modal-title-event { margin-bottom: 0; line-height: 1.5; }
.modal-body-event { display: inline-block; padding: 1rem; }
.modal-guide { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; pointer-events: auto; background-clip: padding-box; outline: 0; }
.modal-body-guide { display: inline-block; }
.modal-footer-guide { position: relative; bottom: 54px;}
.card-meetingRoom { width: 100vw; height: 0; padding-top: calc(7 / 20 * 100%); background: url(../images/meetingRoom.png) center center/cover no-repeat; }
.card-citizen { width: 100vw; height: 0; padding-top: calc(7 / 20 * 100%); background: url(../images/citizen.png) center center/cover no-repeat; }
.card-oasis { width: 100vw; height: 0; padding-top: calc(7 / 20 * 100%); background: url(../images/oasis.png) center center/cover no-repeat; }
.card-banner-body { position: absolute; right: 15%; top: 0; left: 15%; z-index: 9; padding-top: 20px; padding-bottom: 20px; text-align: center; /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); */ }
.card-banner-body h3 { font-size: 17px; text-align: center; }
.card-banner-body p { /* color: white; */ text-align: center; overflow: hidden; line-height: 1.2em; font-size: 14px; margin-bottom: 8px; }
.circleblue { display: block; padding: 26px; width: 128px; height: 128px; border: 4px solid #4ebdef; border-radius: 64px; }
.circlepink { display: block; padding: 26px; width: 128px; height: 128px; border: 4px solid #F06292; border-radius: 64px; }
.like_btn { display: block; padding: 4px 0; width: 128px; border-radius: 8px; }
.progress .progress-bar.progress-bar-pink { background: #F06292; border-radius: 12px 0 0 12px; }
.progress .progress-bar.progress-bar-lightsky { background: #4EBDEF; border-radius: 0 12px 12px 0; }
.progress .progress-bar.progress-bar-gray { background: #E9E9E9; border-radius: 0 12px 12px 0; }
.btn-outline-pink { color: #F06292; border-color: #F06292; box-shadow: none; border-radius: 8px; }
.btn-outline-lightsky { color: #4EBDEF; border-color: #4EBDEF; box-shadow: none; border-radius: 8px; }
.btn-outline-danger { color: #4ebdef; border-color: #FFFFFF; box-shadow: none; border-radius: 16px; }
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show>.btn-outline-danger.dropdown-toggle {
    color: #fff;
    background-color: #4ebdef;
    border-color: #4ebdef;
}
.btn-outline-danger:hover {
    color: #fff;
    background-color: #4ebdef;
    border-color: #4ebdef;
}
.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show>.btn-outline-info.dropdown-toggle {
    color: #fff;
    background-color: #f06292;
    border-color: #f06292;
}
.btn-outline-info:hover {
    color: #fff;
    background-color: #f06292;
    border-color: #f06292;
}
.btn-outline-info { color: #f06292; border-color: #FFFFFF; box-shadow: none; border-radius: 16px; }
.btn-outline-secondary { color: #6c757d; border-color: #ff99d1; background-color: #FFFFFF; box-shadow: none; border-radius: 4px; }
.btn-outline-myvill { color: #6c757d; border-color: #ced4da; border-radius: 4px; background-color: #FFFFFF; }
.btn-outline-yes { color: #FFFFFF; border-color: #1592E6; background-color: #1592E6; box-shadow: none; }
.btn-outline-no { color: #000000; border-color: #dee2e6; background-color: #FFFFFF; box-shadow: none; }
.mLInfo ul { list-style-type: none; padding: 0px; }
.mLInfo ul.left { float: left; }
.mLInfo ul.right { float: right; }
.mLInfo ul li { width: 27vw;  /*  display: inline-block; padding: 12px 15px 13px 0; */ cursor: pointer; font-size:12px;
overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: 1.2em;
    height: 1.2em;
}
.mLfoot ul { list-style-type: none; padding: 0px; }
.mLfoot ul li { display: inline-block; /* padding: 12px 15px 13px 0; */ cursor: pointer; font-size:12px;}

.djplus { position: inherit; background: #FFF; bottom: 0; left: 0; right: 0; padding-top: 3px; border-top: 1px solid #EEE; }
.djplus ul { list-style-type: none; padding: 0px; }
.djplus ul.left { float: left; }
.djplus ul.right { float: right; }
.djplus ul li { display: inline-block; padding: 12px 15px 13px 0; cursor: pointer; }
.card-djplus { font-size: 14px; width: 100vw; border: 1px solid #DFDFDF }
.card-djplus h3, .h3 { font-size: 16px; }
.card-djplus-body { padding: 16px; }
.card-djplus-body p{ font-size: 12px; }
/* .card-djplus-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.2em; margin-bottom: 0.32rem; } */
.card-djplus-title { position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0px 16px;
    /* background-color: rgba(0, 0, 0, 0.3); */
    width: 100%;
    height: 160px; }
.card-djplus-text { overflow: hidden; width: 80vw; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.2em; height: 2.4em; font-size: 14px; }
.card-djplus .card-djplus-img { width: 100%; }
.card-djplus img { width: 100%; height: 160px; object-fit: cover; display: block; }
.djtext { position: absolute; top: 0px; left: 0px; }

.card-djplus-mf { font-size: 12px; }
.BR0 { border-radius: 0; }
.image { position: relative;}
h7 { position: absolute; padding: 8px; }

.menu-btn { position: absolute; right: 16px; top: 0px; z-index: 1; background-size: 50%; background-repeat: no-repeat; background-position: center; cursor: pointer; line-height: 48px; }
.auth { cursor: pointer; }
.auth a:hover { text-decoration: none; }
.alert-dismissible .close { position: absolute; top: 4px; right: 0; padding: 0; color: inherit; }
.close { width: 30px; height: 30px; position: absolute; right: 0px; top: 0px; background-size: 50%; background-repeat: no-repeat; background-position: center; cursor: pointer; }
.popclose { position: absolute; width: 30px; height: 30px; top: 8px; right: 8px; background-size: 50%; background-repeat: no-repeat; background-position: center; cursor: pointer; z-index:17; padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;}
.card-comment-cdn ul.close { opacity: 1 !important; }
#menu { width: 200px; height: 100%; position: fixed; top: 0px; right: -300px; z-index: 100000; background-color: #F0F3F4; text-align: left; transition: All 0.2s ease; -webkit-transition: All 0.2s ease; -moz-transition: All 0.2s ease; -o-transition: All 0.2s ease; }
#menu.open { right: 0px; }
.page_cover.open { display: block; }
.page_cover { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.4); z-index: 4; display: none; }
.list-group-item-action:hover, .list-group-item-action:focus { z-index: 1; color: #ffffff; text-decoration: none; background-color: #3497FD; }
/* .list-group-item {
  position: relative;
  display: block;
  padding: 0.70rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
} */
.list-group span { position: absolute; right: 16px; top: 0.7rem; }
.list-group-menu span { right: unset; padding: 0 0 0 0.2rem; }
.list-group .right { position: absolute; /*  right: 16px !important;*/ top: auto; bottom: 16px !important; }
.list-group .date { position: absolute; right: 16px; top: 12px; color: #D3CDCD; }
.list-group-item p { margin-bottom: 0; }
.card-point { text-align: center; background: transparent; }
.list-group .point { position: absolute; right: 16px; top: 12px; color: #CD687E; }
.list-group .point.minus { color: #6881CD; }
.list-group .time { color: #2196F3; font-weight: 500; }
.list-group .category { position: initial; right: 0; left: 16px; top: 12px; }
.logo { padding: 16px 0 0 0; }
#menu .foot { position: absolute; width: 200px; background-color: #DBE2DA; bottom: 0 !important; padding: 8px; }
.alert { display: inline-grid; font-size: 14px; padding: 0.75rem 2.25rem 0.75rem 0.75rem; margin-bottom: .5rem; }
.badge-gray { background-color: #DDDDDD; }
.badge-new {
	display: inline-block;
	text-align:center;
	color: #fff;
	background-color: #dc3545;
	width: 17px;
  	height: 17px;
  	margin-top:1px;
  	margin-left:3px;
	font-size: 12px;
	position: absolute;
	border-top-right-radius: 50%;
  	border-top-left-radius: 50%;
  	border-bottom-right-radius: 50%;
  	border-bottom-left-radius: 50%;
}
.badge-my { color: #fff; background-color: #17a2b8; font-size: 100%; }
.btn-intro { width: 222px; margin: 0 auto; color: #fff; background-color: #43425D; border-color: #43425D; border-radius: 48px; border: 2px solid #fff; }
.btn-intro:hover { color: #fff; text-decoration: none; }
.btn-bottom, .btn-group-bottom > .btn { padding: 0.5rem 1rem; font-size: 1.00rem; line-height: 1.5; border-radius: 0; }
.btn-lg, .btn-group-lg > .btn { padding: 0.70rem 0.75rem; font-size: 14px; line-height: 1.5; border-radius: 0.3rem; }
.input-group-prepend .btn, .input-group-append .btn { z-index: 0; }
.image-fit img { width: 132px; padding: 2rem 0; }
.plpr { padding: 0 0.25rem !important; }
.modal-body { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0.5rem; text-align: center; }
.fa-exclamation-circle { color: #00BCD4; }
.fa-exclamation-triangle { color: #FECF01; }
.image-pop img { padding: 0.7rem 0; }
.p-p { padding: 1.25rem !important; }
.btn-foot { color: #fff; background-color: #43425D; border-color: #43425D; }
/* .btn-foot:hover { color: #fff; background-color: #EF4B56; border-color: #EF4B56; } */
.btn-foot:focus, .btn-foot.focus { box-shadow: none; }
.btn.btn-foot { width: 20vw; font-size: 12px; color:#93a6af; background-color: #fff; border-color: #fff; padding: .375rem;}
.btn.btn-foot.focus, .btn.btn-foot:focus { color:#90a4ae; background-color: #fff; border-color: #fff; outline: none; box-shadow: none; }
.btn.btn-foot:hover { color: #93a6af; font-size: 12px; background-color: #fff; border-color: #fff; outline: none; box-shadow: none; }
.btn.btn-foot.active, .btn.btn-foot:active { color: #90a4ae; background-color: #fff; border-color: #fff; outline: none; }
.btn.btn-foot.active.focus, .btn.btn-foot.active:focus, .btn.btn-foot.active:hover, .btn.btn-foot:active.focus, .btn.btn-foot:active:focus, .btn.btn-foot:active:hover { color: #90a4ae; background-color: #fff; border-color: #fff; outline: none; box-shadow: none; }
.foot-fixed { height: 54px; width: 100%; position: fixed; left: 0; bottom: 0; z-index: 33; border-top: 1px solid #d8d8d8; }
.keyword { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.list-group-item.toggle-item { padding: .75rem 1.25rem; }
.list-group .list-group-item.toggle-item span { top: .9rem; }
.list-group-item.toggle-item label { margin-bottom: 0; }
.togglebutton { vertical-align: middle; }
.togglebutton, .togglebutton label, .togglebutton input, .togglebutton .toggle { user-select: none; }
.togglebutton label { cursor: pointer; }
.togglebutton label input[type=checkbox] { opacity: 0; width: 0; height: 0; }
.togglebutton label .toggle { text-align: left; margin-left: 5px; }
.togglebutton label .toggle, .togglebutton label input[type=checkbox][disabled] + .toggle { content: ""; display: inline-block; width: 30px; height: 15px; background-color: rgba(80, 80, 80, 0.7); border-radius: 15px; margin-right: 15px; transition: background 0.3s ease; vertical-align: middle; }
.togglebutton label .toggle:after { content: ""; display: inline-block; width: 20px; height: 20px; background-color: #FFFFFF; border-radius: 20px; position: relative; box-shadow: none; left: -5px; top: -2.5px; border: 1px solid rgba(0, 0, 0, 0.54); transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease; }
.togglebutton label input[type=checkbox][disabled] + .toggle:after, .togglebutton label input[type=checkbox][disabled]:checked + .toggle:after { background-color: #BDBDBD; }
.togglebutton label input[type=checkbox] + .toggle:active:after, .togglebutton label input[type=checkbox][disabled] + .toggle:active:after { box-shadow: none;}
.togglebutton label input[type=checkbox]:checked + .toggle:after { left: 15px; }
.togglebutton label input[type=checkbox]:checked + .toggle { background-color: rgba(156, 39, 176, 0.7); }
.togglebutton label input[type=checkbox]:checked + .toggle:after { border-color: #9c27b0; }
.togglebutton label input[type=checkbox]:checked + .toggle:active:after { box-shadow: none; }
ol.txt_indent33 { list-style: none; padding-left: 0; }
.ripple { position: relative; }
.ripple-container { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; pointer-events: none; border-radius: inherit; }
.ripple-container .ripple-decorator { position: absolute; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; pointer-events: none; background-color: rgba(0, 0, 0, 0.05); border-radius: 100%; opacity: 0; transform: scale(1); transform-origin: 50%; }
.ripple-container .ripple-decorator.ripple-on { opacity: 0.1; transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; }
.ripple-container .ripple-decorator.ripple-out { opacity: 0; transition: opacity 0.1s linear 0s !important; }
.w-49 { width: 49% !important}
.modal-dialog.modal-fullsize { max-width: none; width: 100%; height: 100%; margin: 0; padding: 0; }
.modal-content.modal-fullsize { width: 100%; height: auto; min-height: 100%; border-radius: 0; }
.modal-body-content { padding: 0; }
.mLevent { font-size:11px; }
.mLInfo { font-size:0.85em;}

.timeline { list-style: none; padding: 20px 0 0; position: relative; }
.timeline:before { top: 50px; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #E5E5E5; left: 5%; margin-left: -1px; }
.timeline h6 { color: #333333; font-weight: 400; margin: 10px 0px 0px; }
.timeline.timeline-simple { margin-top: 30px; padding: 0 0 20px; }
.timeline.timeline-simple:before { left: 5%; background-color: #E5E5E5; }
.timeline.timeline-simple > li > .timeline-panel { width: 86%; }
.timeline.timeline-simple > li > .timeline-badge { left: 5%; }
.timeline > li { margin-bottom: 20px; position: relative; }
.timeline > li:before, .timeline > li:after { content: " "; display: table; }
.timeline > li:after { clear: both; }
.timeline > li > .timeline-panel { width: 80%; float: left; padding: 20px; margin-bottom: 5px; position: relative; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); border-radius: 6px; color: rgba(0, 0, 0, 0.87); background: #fff; }
.timeline > li > .timeline-panel:before { position: absolute; top: 12px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #e4e4e4; border-right: 0 solid #e4e4e4; border-bottom: 15px solid transparent; content: " "; }
.timeline > li > .timeline-panel:after { position: absolute; top: 13px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; }
.timeline > li > .timeline-badge { color: #fff; width: 25px; height: 25px; line-height: 51px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 8%; margin-left: -24px; z-index: 22; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; }
.timeline > li > .timeline-badge.default { background-color: #c8c8c8; box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); }
.timeline > li > .timeline-badge.primary { background-color: #9c27b0; box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); }
.timeline > li > .timeline-badge.success { background-color: #4caf50; box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4); }
.timeline > li > .timeline-badge.warning { background-color: #ff9800; box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4); }
.timeline > li > .timeline-badge.info { background-color: #00bcd4; box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4); padding: 0; }
.timeline > li > .timeline-badge.danger { background-color: #f44336; box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4); }
.timeline > li > .timeline-badge [class^="ti-"], .timeline > li > .timeline-badge [class*=" ti-"], .timeline > li > .timeline-badge [class="material-icons"] { line-height: inherit; }
.timeline > li.timeline-inverted > .timeline-panel { float: right; background-color: #fff; }
.timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; }
.timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; }
.timeline-heading { margin-bottom: 15px; }
.timeline-title { margin-top: 0; color: inherit; }
.timeline-body hr { margin-top: 10px; margin-bottom: 5px; }
.timeline-body .btn { margin-bottom: 0; }
.timeline-body > p, .timeline-body > ul { margin-bottom: 0; }
.timeline-body > p + p { margin-top: 5px; }
@keyframes progress-bar-stripes { from { background-position: 1rem 0; }
  to { background-position: 0 0; } }
.progress { height: 25px; border-radius: 0; box-shadow: none; background: #DDDDDD; margin-top: 2px; border-radius: 16px; }
.progress .progress-bar { box-shadow: none; }
.progress .progress-bar.progress-bar-default { background: #c8c8c8 !important; }
.progress .progress-bar.progress-bar-default-rr { background: #c8c8c8 !important; border-top-right-radius:6px; border-bottom-right-radius: 6px;}
.progress .progress-bar.progress-bar-primary { background: #9c27b0 !important; }
.progress .progress-bar.progress-bar-info { background: #00bcd4; }
.progress .progress-bar.progress-bar-success { background: #32AAE1; border-radius: 12px 0 0 12px; }
.progress .progress-bar.progress-bar-success-lr { background: #32AAE1; border-top-left-radius:6px; border-bottom-left-radius: 6px;}
.progress .progress-bar.progress-bar-warning { background: #ff9800; border-radius:  0 12px 12px 0 ; }
.progress .progress-bar.progress-bar-danger { background: #EA2B3A; }
.progress .progress-bar.progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 75%, transparent 0, transparent) !important; background-size: 1rem 1rem !important; }
.progress.progress-line-primary { background: rgba(156, 39, 176, 0.2); }
.progress.progress-line-info { background: rgba(0, 188, 212, 0.2); }
.progress.progress-line-success { background: rgba(76, 175, 80, 0.2); }
.progress.progress-line-warning { background: rgba(255, 152, 0, 0.2); }
.progress.progress-line-danger { background: rgba(244, 67, 54, 0.2); }
.card-collapse, .card-collapse .card-header { box-shadow: none; background-color: transparent; border-radius: 0; }
.card-collapse { margin: 0; }
.card-collapse .card-header { border-bottom: 1px solid #ddd; padding: 25px 10px 5px 0px; margin: 0; box-shadow: none !important; background: #ffffff; }
.card-collapse .card-header a { color: #3C4858; font-size: 0.9375rem; display: block; }
.card-collapse .card-header a:hover, .card-collapse .card-header a:active, .card-collapse .card-header a[aria-expanded="true"] { color: #e91e63; }
.card-collapse .card-header a i { float: right; position: relative; }
.card-collapse .card-header a[aria-expanded="true"] i { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.card-collapse .card-body { padding: 15px 0px 5px; }
.modal {height: auto;}

.charge { width: 100%; border: 1px solid #e8e8e8; padding: 10px 20px 7px 20px; margin-top: 30px; overflow: hidden; }
.charge ul { width: 100%; height: auto; overflow: hidden; padding: 0 0 4px 45px; min-height: 33px; background: url(../images/counseling.png) no-repeat left 10px; }
.charge ul.h7_ul { margin: 5px 0; list-style: none;}
.charge ul:after { content: ""; display: block; clear: both; }
.charge ul li { float: left; margin: 4px 0 0 25px; padding: 5px 0 5px 15px; background: url(/images/common/h5_bul.gif) no-repeat 5px 14px; box-sizing: border-box; }
.charge ul li:first-child { margin: 4px 0 0 0; }
.charge ul li strong { display: inline; font-weight: 600; }
@media screen and (max-width: 768px) { .charge ul li { width: 100%; padding: 5px 0 0 15px; margin: 0; display: inline-block; }
  .charge ul li:first-child { margin: 0; } 
  }
@media screen and (max-width: 480px) { 
 .charge ul { padding: 0 0 0 5px; }
  .charge ul li { width: 78%; padding: 5px 0 0 56px; margin: 0; } 
  }
@media screen and (max-width: 380px) { .charge { padding: 4px 0px 4px 14px; }
  }
@media screen and (max-width: 320px) { .charge { padding: 2px 8px; }
  .charge ul { padding: 0; } 
  }
.top_cont { position: absolute; background-color: #dc3545; color: #fff; width: 18px; height: 19px; font-size: 12px; font-weight: 500; top: 6px; right: 35px; padding: 1px; border-radius: 10px;}  
.top_tSearch_box {position: fixed; z-index: 5; top:48px; left:0; width: 100%; }
.top_tSearch_box div.tSearch {background-color: #F0F3F4; padding:.5rem 1rem; z-index: 10; color: #fff;}

.dropdown-menu { min-width: 6rem; background-color: #fff !important; z-index: 15;}
.dropBtn {width: 30px; height: 30px; position: absolute; right: 0px; top: 0px;}
#page-content-wrapper {width: 100%; height:48px; position: fixed; z-index: 100; border-bottom: 1px solid #D8D8D8; padding:0; background: #fff; top:0}
.hback  { background: transparent; border: none;display: block; position: absolute;top: 5px;z-index: 999; font-size: 20px;}
.dnsys  { background: transparent; border: none;display: block; position: absolute;top: 5px;}
.logo_title { text-align: center!important; z-index: 1; font-size: 18px; font-weight: 400; padding: 13px 0 0 0;}
.top_sns { position: absolute; top: 0px; right: 0px}
.top_sns .btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent; 
    border: 1px solid transparent;
    padding: .7rem .5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.dropdown-item {background-color: #fff;}
.btn-mymenu {width: 33.33333%; height: 88px; font-size:12px; color: #000; background-color: #fff; border-color: #D0D1D3; padding: .375rem 0rem;}
.btn-mymenu p{margin-bottom: 0rem; padding-top:2px;}    
.btn-mymenu:hover { color: #000; background-color: #FADE09; border-color: #D0D1D3; }
.btn-phone {position: relative;
    width: 56px;
    height: 30px;
    top: 7px;
    right: 0px;
    /* text-transform: uppercase; */
    display: block;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    background: #2699FB;
    border-radius: 16px;
    padding: 2px 0 0 5px;
    height: 56px;
    font-size: 19px;
    color: #fff;
    /* background-color: #FADE09; */
    border-color: #D0D1D3;
    padding: 4px 7px;
    border-radius: 40px;}
.btn-phone:hover { color: #000; background-color: #FADE09; border-color: #D0D1D3; }

/*MOBILE Css*/
@media screen and (max-width:360px) {
.mobileOff { display: none !important; }
.mobileOn { display: block !important; }
 }

/* 모바일 일반 게시판 */
.listMobile ul { list-style:none; padding: 0;}
.listMobile ul li { display: inline-block; border-bottom: 1px solid #e0e0e0; padding: 5px; margin-top:10px}
.listMobile dl { margin-bottom: 1em; margin-left: 0; margin-right: 0; }
.listMobile dl dt { float: left; padding: 3px }
.listMobile dl dt a {position:relative; display:block; }
.listMobile dl dt a .title { width:85vw; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.listMobile dl dd { float: left; width: 100%; padding: 3px; color: #607d8b; font-size: 14px; margin-right: 3px; }

/* mandatory */
small { font-size: 80%;}
.mandatory { padding: 8px; background-image: url(/assets/img/mandatory.png); background-repeat: no-repeat; background-position: center; }

/** FAQ 리스트 **/
.faq_list{width:100%; border-top:1px solid #ddd; list-style:none; padding: 0;}
.faq_list li{width:100%; }
.faq_list li.open p.q{border-bottom:2px solid #3b2fb5}
.faq_list li p.q{width:100%; padding:18px 15px 15px 28px; display:table; position:relative; cursor:pointer}
.faq_list li p.q span{display:block;font:500 17px/25px "Noto Sans KR", sans-serif; color:#222}
.faq_list li p.q span.cate{margin-bottom:5px; font:500 16px/18px "Noto Sans KR", sans-serif; color:#000000}
.faq_list li p.q:before{content:"Q"; position:absolute; top:15px; left:10px; font:700 15px/20px "Noto Sans KR", sans-serif; color:#3b2fb5}
.faq_list li div.a{background:#fbfbff; width:100%; padding:8px; color:#333; word-break:keep-all;}

.carousel-item img {vertical-align: middle; border-style: none; height:100vh;}

/** 우리말 색상 리스트 **/
.parang{color:#2699FB !important;}
.parang01{color:#5773FF !important;}
.parang02{color:#3497FD !important;}
.parang03{color:#3ACCE1 !important;}
.bunhong{color:#FF93CE !important;}
.bunhong01{color:#C840E9 !important;}
.jaju{color:#FE5E98 !important;}
.guel{color:#FF8A48 !important;}
.norang{color:#FFB900 !important;}
.chorok{color:#00B336 !important;}
.black01{color:#1e1e1e !important;}
.black02{color:#3C4456 !important;}
.black03{color:#2A2E43 !important;}
.bora{color:#665EFF !important;}
.pink{color:#F06292 !important;}
.lightsky{color:#4EBDEF !important;}
.gray{color:#707070 !important;}
.gray01{color:#75819A !important;}
.gray02{color:#8592AD !important;}
.chunglok{color:#0086C2 !important;}
.BGgray{background:#F7F7F7 !important;}
.BGwhite{background:#FFFFFF !important;}
.BGparang{background:#3497FD !important;}
.BGguel{background:#FF8A48 !important;}
.BGoverlay{background-color: rgba(0, 0, 0, 0.5) !important;}
.badge-primary {color: #fff; background-color: #3B5998; }
.hwangto{color: #ffb74d;}
.blue01{color: #5f99ff;}
.blue02{background-color: #ffffff;}
.body01{background-color: #f1f2f3 !important;}
.reve01{color: #dfdfdf;}
.reve02{color: #ffffff; border: 1px solid #607D8B; height: 13px;}
.reve03{color: #1967b2;}
.ctzn{color: #424242; text-shadow: 0px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff; font-weight: 500;}
.nber{color: #424242; text-shadow: 0px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff; font-weight: 500;}
.oasis{color: #424242; text-shadow: 0px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff; font-weight: 500;}
.life{color: #424242; text-shadow: 0px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff; font-weight: 500;}


/* .mobile_contents {white-space:pre-line;} */
.badge-dongari { color: #fff; background-color: #417623; }

.waves-effect { cursor: pointer; display: inline-block; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; vertical-align: middle; z-index: 1; will-change: opacity, transform; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.waves-effect .waves-ripple { position: absolute; border-radius: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; opacity: 0; background: rgba(0, 0, 0, 0.2); -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; -ms-transition: all 0.7s ease-out; transition: all 0.7s ease-out; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); pointer-events: none; }
.waves-effect.waves-light .waves-ripple { background-color: rgba(255, 255, 255, 0.45); }
.waves-effect.waves-red .waves-ripple { background-color: rgba(244, 67, 54, 0.7); }
.waves-effect.waves-yellow .waves-ripple { background-color: rgba(255, 235, 59, 0.7); }
.waves-effect.waves-orange .waves-ripple { background-color: rgba(255, 152, 0, 0.7); }
.waves-effect.waves-purple .waves-ripple { background-color: rgba(156, 39, 176, 0.7); }
.waves-effect.waves-green .waves-ripple { background-color: rgba(76, 175, 80, 0.7); }
.waves-effect.waves-teal .waves-ripple { background-color: rgba(0, 150, 136, 0.7); }

/** 파란색 아웃라인 제어 **/
.btn:focus, .btn:active, .btn:hover {
    box-shadow: 0 14px 26px -12px rgba(0, 0,  0, 0), 0 4px 23px 0px rgba(0, 0,  0, 0), 0 8px 10px -5px rgba(0, 0,  0, 0);
}
.form-control:focus, .form-control:active, .form-control:hover {
    box-shadow: 0 14px 26px -12px rgba(0, 0,  0, 0), 0 4px 23px 0px rgba(0, 0,  0, 0), 0 8px 10px -5px rgba(0, 0,  0, 0);
}
/** 텍스트 리스트 점 표현 **/

.box ul.list_dj {
	margin:10px 0;
	padding:0
}
.box ul.list_dj li {
	list-style:none;
	margin:3px 0;
	padding-left:11px;
	background-image: url(../images/list_bul.png);
	background-repeat: no-repeat;
	background-position: 2px 9px;
	color:#555;
	font-size:15px;
	text-align:left;
	word-wrap:break-word;
	word-break:keep-all
}

.txt1 {margin: 10px 0; padding: 0;}
.timefont{font-size: 13px; !important; font-weight: 400;}
.imgfull{width: 100vw; height: 100vh;}

.menuActive {color:#ff0202; }
/* .menuActive {color:#000; } */

.bgtop2 {border-top:4px solid #e8e8e8; }
.bgbottom2 {border-bottom:4px solid #e8e8e8; }
.boxintro img { width: 80% !important; height: auto !important; }
.blackclose {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 8px;
    right: 0px;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 17;
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* 모달 안내페이지-내 동네설정 */
.card-mybill h2 { font-size: 16px; }
.card-mybill h3 { font-size: 14px; }
.card-mybill { font-size: 14px; }
.card-mybill-body { padding: 16px; }
.card-mybill { border: 0px solid rgba(0, 0, 0, 0.125); border-radius: 0; padding-bottom: 24px; padding-top: 111px;}
.card-mybill img { display: block; margin: 0px auto; }
.arrow01{width:8px;} 
.arrow02{width:80px;} 
.arrow03{width:46px;} 
.guidebox01{border: 2px solid #ffffff; background: rgba(33, 150, 243, 0.5); padding: 8px;}

/* 모달 안내페이지-메인페이지 */
#info-wrapper {width: 100%; height:48px; position: fixed; z-index: 100; padding:0; top:0}
.card-mainpage h2 { font-size: 16px; }
.card-mainpage h3 { font-size: 14px; }
.card-mainpage { font-size: 14px; }
.card-mainpage-body { padding: 16px; }
.card-mainpage { border: 0px solid rgba(0, 0, 0, 0.125); border-radius: 0; padding-bottom: 24px; padding-top: 36px;}
.card-mainpage img { display: block; margin: 0px auto; } 
@media (min-width:576px) {
  .imgfull {
  top: 48px;
    background: rgba(255, 255, 255, 0);
    width: 100%;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width:768px) {
  .imgfull {
    max-width: 720px
  }
}
@media (min-width:992px) {
  .imgfull {
    max-width: 960px
  }
}
@media (min-width:1200px) {
  .imgfull {
    max-width: 1140px
  }
}
.mt-7{margin-top: 7rem!important;}
.btn-foothelp { color: #fff; background-color: #43425D; border-color: #43425D; }
.btn.btn-foothelp { width: 20vw; font-size: 12px; color:#93a6af; background-color: #fff; border-color: #fff; padding: .375rem;}
.foothelp-fixed { height: 54px; width: 100%; position: fixed; left: 0; bottom: 0; z-index: 33; border-top: 1px solid #d8d8d8; }
.guide-fixed { height: 161px; width: 100vw; position: fixed; left: 0; bottom: 0; margin: 0 auto; z-index: 43; }
.w-17 {width:17.7vw;}
.w-31 {width:31.6vw;}
.w-9 {width:9vw;}
.w-26 {width:26.7vw;}
.w-14 {width:11vw;}
.w-15 {width:11vw;}
.w-16 {width:11vw;}
.w-17 {width:11vw;}
.sTn08 { position: absolute; width: 30px; height: 30px; top: 10px; left: 8px; text-transform: uppercase; display: inline-block; font-size: 10px; font-weight: 500; line-height: 1.2; background: #2699FB; border-radius: 16px; padding: 2px 4px 0 5px; }
.mainguide01{position: absolute; top: 360px; z-index: 64;}

.guidebox02{border: 2px solid #ffffff; background: rgba(33, 150, 243, 0.5); padding: 2px; font-size:0.70rem; height:63px; }
.guidebox03{border: 2px solid #ffffff; background: rgba(33, 150, 243, 0.5); padding: 2px; font-size:0.70rem; height:43px; }

/* 모달 안내페이지-마이페이지 */
.myguide01{position: absolute; top: 360px; z-index: 64;}
.guidebox04 {border: 2px solid #ffffff; background: #00bcd4cc; padding: 8px; height:90px; vertical-align: middle; }
.pt-35{padding-top: 3.5rem!important;}
.pt-26{padding-top: 2.6rem!important;}

/* 모바일 좌우 떨림 방지 */
.col-16{position: relative; width: 100%; padding-right: 16px; padding-left: 16px;}
.juminchong {border-top: 0px !important;}

.searchAlphaDiv{width: 100vw; height: 100vh; z-index:10; background-color:rgba(33, 37, 41, 0); }
.footerMenu .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0;
    vertical-align: .255em;
    content: none;
    border-top: 0 solid;
    border-right: 0 solid transparent;
    border-bottom: 0;
    border-left: 0 solid transparent;
}
.font-14{ font-size: 14px; color: #495057 !important; }