@charset "utf-8";
/* 1024px 이상 해상도 */

.ta-mo-block, .mo-inlinblock {display:none}

/* layout */
.inner, .inner-cont {position:relative; margin:0 auto; padding:0 30px; width:1024px}
.inner:after {display:block; clear:both; content:""}
.inner-cont {padding-top:40px}

#wrap {position:relative}
#wrap:before {position:absolute; right:0; top:0; display:block; width:100%; height:90px; background:linear-gradient(to right, #d3f1f6, #ede7ff); content:""}
#wrap:after {position:absolute; right:0; top:0; display:block; width:213px; height:161px; background:url('/images/gasarang/main/bg-main-circle.png') right 0 no-repeat; content:""}
#wrap.main:before {height:530px}

#header {position:relative; height:90px; z-index:100}
#header h1 {position:absolute; left:20px; top:50px; z-index:101}
#header h1 a {display:block; width:167px; height:36px; background:url('/images/gasarang/common/logo-h1.png') 0 0 no-repeat; font-size:0; line-height:0}
#header .user {float:right; position:relative; padding-left:80px; display:block; margin:10px 0 10px 0; height:27px; border:1px solid #a9a9ad; border-radius:10px; background:rgba(255,255,255,0.8)}
#header .user a {position:relative; display:inline-block; padding:0 16px; line-height:27px; font-size:14px; color:#666; font-weight:600}
#header .user a + a:before {position:absolute; left:-3px; top:6px; display:block; width:2px; height:13px; background:#e0dfe4; content:""}
#header .user .org {position:absolute; left:-1px; top:-1px; width:80px; height:27px; line-height:27px; border-radius:10px; background:#666; color:#fff; font-weight:600; text-align:center}
#header.on {background:#fff; border-bottom:1px solid #eee}
#header .background {display:none; width:100%; position:absolute; top:43px; left:0; background:#fcfcfc; box-shadow:0 3px 6px rgb(0,0,0,0.1); z-index:100}
#header.on .background {display:block}

#nav-mo {display:none}
#nav-pc {position:relative; width:100%; clear:both}
#nav-pc, #nav-pc > ul.menu:after {display:block; clear:both; content:""}
#nav-pc ul.menu {float:right; margin-top:9px}
#nav-pc ul.menu > li {position:relative; float:left; width:150px; text-align:center}
#nav-pc ul.menu > li > a {position:relative; display:block; padding:0 0 10px; height:33px; font-size:16px; font-weight:600; color:#333; letter-spacing:0}
#nav-pc ul.menu > li > a.on:after, #nav-pc ul.menu > li:hover > a:after, #nav-pc ul.menu > li:focus > a:after{position:absolute; left:0; bottom:-1px; display:block; width:100%; height:2px; background:#9744fd; content:""}
#nav-pc ul.menu > li:last-child {padding-right:0}
#nav-pc ul.menu > li .sub {display:none; position:absolute; left:0; top:34px; padding:0 10px 0 20px; width:100%; height:270px; background:#fcfcfc; text-align:left; z-index:101}
#nav-pc ul.menu > li .sub > ul {height:100%}
#nav-pc ul.menu > li .sub li {position:relative; padding:9px 0}
#nav-pc ul.menu > li .sub li a {position:relative; line-height:20px; font-size:16px; color:#666; word-break:keep-all}
#nav-pc ul.menu > li .sub li a:hover, #nav-pc ul.menu > li .sub li a:focus, #nav-pc ul.menu > li .sub li a:active {color:#9948fd}
#nav-pc ul.menu > li a.on + .sub, #nav-pc ul.menu > li:hover .sub {background:#f8f6fc}

#container {position:relative}
.main #contents {padding-bottom:0}
.main #contents a:hover {text-decoration:none}
#contents {position:relative; padding-bottom:80px; width:100%}
#contents a:hover {text-decoration:underline}

#footer {width:100%; background:#555; color:#fff}
#footer .link {display:block; padding:14px 0 13px 0; border-bottom:2px solid #676767}
#footer .link a {display:inline-block; color:#ccc; font-size:16px; font-weight:600}
#footer .link a.policy {color:#46e6ff}
#footer .link a + a {margin-left:70px}
#footer .f-btm {display:table; padding:30px 0 45px 0}
#footer .f-btm .logo {display:table-cell; width:120px; vertical-align:top}
#footer .f-btm .copyright {display:table-cell; font-size:14px; color:#ccc; vertical-align:top}
#footer .f-btm .copyright .addr {display:block; margin-bottom:5px}
#footer .f-btm .copyright .addr em {position:relative; display:inline-block; padding-left:30px}
#footer .f-btm .copyright .addr em:before {position:absolute; left:12px; top:4px; display:block; width:2px; height:12px; background:#9c9c9c; content:""}

/* main */
.main-visual {position:relative; padding-top:60px; height:444px}
.main-visual:before {position:absolute; left:0; top:17px; display:block; width:133px; height:210px; background:url('/images/gasarang/main/bg-main-circle-left.png') 0 0 no-repeat; background-size:100%; content:""}
.main-visual:after {position:absolute; right:0; bottom:4px; display:block; width:462px; height:317px; background:url('/images/gasarang/main/bg-main-circle-btm.png') 0 0 no-repeat; background-size:100%; content:""}
/*.main-visual .bg {position:relative; height:100%}*/
.main-visual .inner {padding:0 30px}
.main-visual .tit {display:inline-block; margin-bottom:18px; padding:0 13px; line-height:36px; border-radius:18px; border-top-left-radius:18px; border-top-left-radius:24px; border-bottom-left-radius:0; font-size:20px; font-weight:600; background:#46e6ff}
.main-visual .bx-wrapper {margin:0; border:none; box-shadow:none; background:transparent}
.main-visual .bx-wrapper li {line-height:40px; font-size:30px}
.main-visual .bx-wrapper .bx-pager {padding-top:0; bottom:-38px}
.main-visual .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {width:auto; z-index:5}
.main-visual .bx-wrapper .bx-pager.bx-default-pager a {background:#fff}
.main-visual .bx-wrapper .bx-pager.bx-default-pager a.active {width:30px; background:#9744fd}
.main-visual .bx-wrapper .bx-controls-auto {right:initial; left:82px; bottom:-38px; text-align:left; z-index:5}
.main-visual .bx-wrapper .bx-controls-auto .bx-start {width:10px; height:12px; background:url('/images/gasarang/common/btn/btn-bxSlider-controls.png') 0 0 no-repeat}
.main-visual .bx-wrapper .bx-controls-auto .bx-stop {width:9px; height:12px; background:url('/images/gasarang/common/btn/btn-bxSlider-controls.png') 0 -11px no-repeat}

.main-visual-link {position:relative; margin:-130px auto 0; padding:74px 0 0; width:964px; height:260px; border-radius:50px; background:#fff; box-shadow:3px 3px 6px 1px rgba(0,0,0,0.1)}
.main-visual-link:before {position:absolute; right:20px; top:-157px; width:511px; height:182px; background:url('/images/gasarang/main/bg-main-visual.png') 0 0 no-repeat; content:""}
.main-visual-link:after {display:block; clear:both; content:""}
.main-visual-link li {float:left; padding-left:36px; width:33.3%}
.main-visual-link li a {position:relative; display:block; padding-left:100px}
.main-visual-link li a .img-area {position:absolute; left:0; top:16px; display:block; width:80px; height:80px; border-radius:50%; background:#a65dff; box-shadow:0 2px 6px 2px rgb(0,0,0,0.2)}
.main-visual-link .tit {display:inline-block; padding-right:31px; line-height:26px; background:url('/images/gasarang/common/btn/btn-link-gray.png') right center no-repeat; font-size:22px; font-weight:600}
.main-visual-link em {display:block; margin-top:18px; line-height:22px; font-size:16px; color:#666}

.main-svc {margin:60px auto; width:964px; height:256px; overflow:hidden}
.main-svc .box-purple, .main-svc .movie {float:left; margin-left:15px; padding:23px 20px 0 20px; width:267px; height:256px; border-radius:10px}
.main-svc .movie {padding:0; width:400px; background:#ccc}
.main-svc .box-purple {background:#f7f3ff}
.main-svc .box-purple .title {display:block; margin-bottom:20px; line-height:28px; font-size:24px}
.main-svc .box-purple .title span {display:block; font-size:18px; font-weight:400}
.main-svc .srch {margin-left:0; background:#f7f3ff url('/images/gasarang/main/bg-srchBox.png') 87px 160px no-repeat}
.main-svc .srch a {display:block; height:231px}
.main-svc .srch .find {display:inline-block; padding-right:25px; background:url('/images/gasarang/common/btn/btn-link-gray.png') right center no-repeat; color:#9744fd; font-size:22px; font-weight:600}
.main-svc .ask ul > li {position:relative; padding-top:7px; line-height:18px; overflow:hidden}
.main-svc .ask ul > li .tit {position:relative; float:left; width:72px; line-height:18px; font-size:14px; font-weight:600; color:#333}
.main-svc .ask ul > li .tit:before {position:absolute; left:0; top:-7px; display:block; width:20px; height:2px; background:#9744fd; content:""}
.main-svc .ask ul > li .tit span {display:block}
.main-svc .ask ul > li > p {float:left; padding-left:8px; width:calc(100% - 72px)}
.main-svc .ask ul > li > p span {word-break:keep-all}
.main-svc .ask ul > li .call {display:block; font-size:16px; font-weight:600; color:#333}
.main-svc .ask ul > li .call .num {color:#9744fd; font-size:24px}
.main-svc .ask ul > li .add {display:block; margin-top:2px; line-height:18px; font-size:14px; color:#666}
.main-svc .ask ul > li.system {margin-top:17px}
.main-svc .ask ul > li.system .call {color:#666; font-size:18px; font-weight:400}
.main-svc .srch .ta-mo, .box-purple.ask.mo {display:none}

.main-board-wrp {position:relative; width:100%}
.main-board-wrp .tab {margin:0 auto; padding:0 20px; width:1024px}
.main-board-wrp .tab:after {display:block; clear:both; content:""}
.main-board-wrp .tab a {position:relative; display:block; float:left; margin-right:-1px; padding:0 20px; height:54px; line-height:52px; border:1px solid #999; border-top-left-radius:10px; border-top-right-radius:10px; background:#fff; font-size:20px; font-weight:600}
.main-board-wrp .tab a.on {border:none; background:#9744fd; color:#fff; z-index:1}
.main-board-wrp i.ico-set {display:inline-block; margin-right:10px; background-image:url('/images/gasarang/main/icoset-board.png'); background-repeat:no-repeat}
.main-board-wrp i.latest {width:22px; height:22px; background-position:0 0; vertical-align:-5px}
.main-board-wrp i.notice {width:20px; height:20px; background-position:0 -40px; vertical-align:-3px}
.main-board-wrp i.data {width:21px; height:15px; background-position:0 -80px}
.main-board-wrp i.faq {width:22px; height:19px; background-position:0 -120px; vertical-align:-3px}
.main-board-wrp .on i.latest {background:url('/images/gasarang/main/icoset-board.png') -20px 0 no-repeat}
.main-board-wrp .on i.notice {background:url('/images/gasarang/main/icoset-board.png') -20px -40px no-repeat}
.main-board-wrp .on i.data {background:url('/images/gasarang/main/icoset-board.png') -20px -80px}
.main-board-wrp .on i.faq {background:url('/images/gasarang/main/icoset-board.png') -20px -118px}

.m-board-slider {margin-top:-1px; padding:30px 0; border-top:1px solid #999; background:#f7f3ff}
.m-board-slider .bx-wrapper {border:none; margin:0; box-shadow:none; background:transparent}
.m-board-slider .bx-wrapper .bx-viewport {padding:10px 0; height:auto !important}
.m-board-slider ul > li {float:left; margin-left:20px; height:222px}
.m-board-slider ul > li:first-child {margin-left:0}
.m-board-slider ul > li a {position:relative; display:block; padding:30px; height:222px; border-radius:10px; background:#fff; box-shadow:2px 2px 5px 1px rgba(0,0,0,0.1)}
.m-board-slider ul > li a:hover, .m-board-slider ul > li a:focus {border:1px solid #9744fd}
.m-board-slider ul > li a .category {display:inline-block; margin-bottom:20px; padding:0 12px; line-height:26px; border-radius:13px; background:#f8f3ff; font-size:16px; color:#9744fd}
.main-board-wrp .m-board-slider i {margin-right:5px}
.m-board-slider ul > li a .tit {display:block; line-height:28px; height:56px; font-size:20px; font-weight:600; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; display:-ms-flexbox; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.m-board-slider ul > li a .tit.noti {padding-left:25px; background:url('/images/gasarang/common/ico/ico-notice-pur.png') 0 4px no-repeat}
.m-board-slider ul > li a .date {position:absolute; right:30px; bottom:28px; font-size:18px; color:#777}
.m-board-slider .btn-more {position:absolute; right:20px; top:-72px; padding-left:22px; font-size:18px; font-weight:600}
.m-board-slider .btn-more:before {position:absolute; left:0; top:12px; display:block; width:16px; height:2px; background:#9aa1a5; content:""}
.m-board-slider .btn-more:after {position:absolute; left:7px; top:5px; display:block; width:2px; height:16px; background:#9aa1a5; content:""}
.m-board-slider .bx-wrapper .bx-controls-direction a {margin-top:-30px; width:60px; height:60px; border-radius:50%; background:#000; opacity:0.15; z-index:10}
.m-board-slider .bx-wrapper .bx-controls-direction a:hover {opacity:0.4}
.m-board-slider .bx-wrapper .bx-controls-direction a.bx-prev {left:-30px; background:#000 url('/images/gasarang/common/btn/btn-prev-wh.png') center center no-repeat}
.m-board-slider .bx-wrapper .bx-controls-direction a.bx-next {right:-30px; background:#000 url('/images/gasarang/common/btn/btn-next-wh.png') center center no-repeat}

.family-site {margin:0 auto; width:1024px; height:80px; background:#fff; overflow:hidden}
.family-site > li {float:left; padding-top:2px; width:25%; height:80px; text-align:center}
.family-site > li a {display:inline-block}

/* popup */
.dimm {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999}
.popup {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:50%; max-width:600px; background:#fff; z-index:1000}
.popup.mw600px {max-width:600px}
.popup .tit-pop {display:block; height:60px; line-height:60px; padding:0 40px 0 20px; background:#a65dff; color:#fff; font-size:20px; font-weight:600}
.popup .pop-cont {padding:30px 20px; border:1px solid #ccc; border-top:none}
.popup .pop-cont.scroll-y {overflow-y:auto; max-height:80vh}
.popup .pop-cont.scroll-y.h720 {max-height:720px}
.popup .pop-cont .txt {line-height:34px; font-size:20px; color:#666}
.popup .pop-cont .txt.fs-18 {line-height:28px; font-size:18px}
.popup .pop-cont .tit-label {display:inline-block; padding-right:20px; line-height:50px; font-size:16px; font-weight:600; color:#666}
.popup .pop-cont .srch {position:relative; margin:15px 0 20px; padding-left:75px; padding-right:90px; overflow:hidden}
.popup .pop-cont .srch * {float:left}
.popup .pop-cont .srch .tit-label {position:absolute; left:0; top:0; padding-right:0; width:75px}
.popup .pop-cont .srch input[type="text"] {width:100%}
.popup .pop-cont .srch .btn-h50 {position:absolute; right:0; top:0}
.popup .pop-btn-close {position:absolute; right:20px; top:20px; display:block; width:18px; height:18px; line-height:0; background:url('/images/gasarang/common/btn/btn-wh-close.png') 0 0 no-repeat; font-size:0}
.popup .ico-box {display:table; padding:0 20px; width:100%; min-height:140px}
.popup .ico-box .txt {display:table-cell; padding-left:120px; line-height:38px; font-size:24px; font-weight:600; color:#666; vertical-align:middle}
.popup .ico-box .delete {background:url('/images/gasarang/common/ico/ico-delete-big.png') 0 center no-repeat}
.popup .ico-box .alarm {background:url('/images/gasarang/common/ico/ico-alarm-big.png') 0 center no-repeat}
.popup .ico-box .withdraw {background:url('/images/gasarang/common/ico/ico-withdraw-big.png') 0 center no-repeat}
.popup .btn-group {margin-top:10px}
.popup .txt + .btn-group {margin-top:30px}
.popup .tbl-list th {font-size:16px}
.popup .tbl-list th, .popup .tbl-list td {padding-left:20px}

/* datepicker */
.ui-datepicker {z-index:2001 !important;}
.ui-datepicker .ui-datepicker-title select {display:inline-block; width:40%; height:28px; vertical-align: middle; margin:0 4px;}
.ui-datepicker-trigger {width:40px; height:50px; margin:0 0 0 -7px; padding:0; font-size:0; line-height:0; vertical-align:top; border:1px solid #999; border-left:none; border-top-right-radius:5px; border-bottom-right-radius:5px; background:#fff url('/images/gasarang/common/ico/datepicker-cal.png') center center no-repeat;}
.datepicker {display:inline-block; width:120px; height:40px; padding:0 5px; border:1px solid #ccc; border-width:1px 0 1px 1px; vertical-align: middle; font-family:'suit', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.datepicker[readonly] {background-color:#f5f5f5; border-width:1px; !important;}
.datepicker.v2 {background:#fff; border-right:none}
.datepicker::-ms-clear {display: none;}
.datepicker::-webkit-input-placeholder {color:#cacaca !important;}
.datepicker:-ms-input-placeholder {color:#cacaca !important;}
.datepicker-month::-webkit-input-placeholder {color:#cacaca !important;}
.datepicker-month::-ms-input-placeholder {color:#cacaca !important;}
.datepicker-change {display:inline-block; width:90px; height:40px; padding:0 5px; border-radius:0 !important; border:1px solid #ccc; border-width:1px 0 1px 1px; vertical-align: middle; font-family:NanumGothic, '나눔고딕', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.datepicker-change::-ms-clear {display: none;}
.datepicker-month {display:inline-block; width:90px; height:40px; padding:0 5px; border-radius:0 !important; border:1px solid #ccc; border-width:1px 0 1px 1px; vertical-align: middle; font-family:NanumGothic, '나눔고딕', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.datepicker-month::-ms-clear {display: none;}
.ui-datepicker-current,
.onlyMonth .ui-datepicker-calendar {display:none;}
.onlyMonth .ui-datepicker-buttonpane {margin:0; border:0; overflow:hidden;}
.onlyMonth .ui-datepicker-title select {height:33px;}
.onlyMonth .ui-datepicker-prev, .onlyMonth .ui-datepicker-next {top:7px;}
.datepicker-year {display:inline-block; width:90px; height:40px; padding:0 5px; border-radius:0 !important; border:1px solid #ccc; border-width:1px 0 1px 1px; vertical-align: middle; font-family:NanumGothic, '나눔고딕', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.datepicker-year::-ms-clear {display: none;}
.datepicker.through,
.datepicker-month.through {text-decoration:line-through;}
.date-picker {display:inline-block; width:90px; height:40px; padding:0 5px; border-radius:0 !important; border:1px solid #ccc; border-width:1px 0 1px 1px; vertical-align: middle; font-family:NanumGothic, '나눔고딕', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.date-picker::-ms-clear {display: none;}

/* button */
a[class|="btn"]:hover, a[class|="btn"]:focus {text-decoration:none !important}
.btn-floating {display:none}

.btn-file-wrp {line-height:initial}
.btn-file-wrp .file-btn {position:relative; display:inline-block; width:100px; height:36px}
.btn-file-wrp .file-btn input[type="file"] {position:absolute; right:0; top:0; width:100px; height:36px; opacity:0; z-index:1; cursor:pointer}
.btn-file-wrp .file-btn input[type="file"]:focus + button {border:1px dotted #666}
.btn-file-wrp .file-btn button {position:absolute; right:0; top:0}
.btn-file-wrp .file-list {display:inline-block; line-height:36px; margin-left:15px; vertical-align:top}
.btn-file-wrp .file-list p {display:inline-block; line-height:24px; color:#1558d6; font-size:16px; text-decoration:underline}
.btn-file-wrp .file-list button {display:inline-block; margin-left:5px; width:24px; height:24px; border:1px solid #ccc; border-radius:5px; background:#fff url('/images/gasarang/common/btn/btn-delete.png') center center no-repeat; box-shadow:1px 1px 1px rgba(0,0,0,0.1); vertical-align:middle}

.btn-group {margin-top:40px; text-align:center}
.btn-group:after {display:block; clear:both; content:""}
.btn-group a, .btn-group button {min-width:160px; border-radius:5px}
.btn-group button + button, .btn-group a + a, .btn-group button + a, .btn-group a + button {margin-left:8px}
.btn-srch-grp-wel {margin-top:20px; text-align:center;} /* 가사랑 복지몰 지원혜택, 가사서비스종합지원센터 */
.btn-srch-grp {margin-top:20px; text-align:center}
.btn-srch-grp button, .btn-srch-grp a {width:160px; height:50px; line-height:50px; border:1px solid #ccc; border-radius:5px; background:#fff; font-size:16px; font-weight:600; color:#333; text-align:center}
.btn-srch-grp button + button, .btn-srch-grp a + a, .btn-srch-grp button + a, .btn-srch-grp a + button {margin-left:8px}
.btn-h55 {display:inline-block; padding:0 15px; height:70px; line-height:30px; border:1px solid #ccc; background:#fff; font-size:16px; font-weight:600; color:#333; text-align:center} /* 가사랑 가사서비스종합지원센터 */
.btn-h50 {display:inline-block; padding:0 20px; height:50px; line-height:48px; border:1px solid #ccc; background:#fff; font-size:16px; font-weight:600; color:#333; text-align:center}
.btn-h40 {display:inline-block; height:40px; line-height:38px; border:1px solid #ccc; background:#fff; font-size:14px; color:#333; text-align:center}
.btn-h36 {display:inline-block; padding:0 20px; height:36px; line-height:34px; border:1px solid #ccc; border-radius:5px; background:#fff; font-size:14px; color:#333; text-align:center}
.btn-h34 {display:inline-block; height:34px; line-height:32px; border:1px solid #ccc; background:#fff; font-size:14px; font-weight:600; color:#333; text-align:center}
.btn-h34.rnd {padding:0 20px; border-radius:17px}
.b-rnd5 {border-radius:5px !important}
.b-rnd0 {border-radius:0 !important}
.b-br-gray {border-color:#666}
.b-purple {border:1px solid #9744fd !important; background:#9744fd !important; color:#fff !important}
.b-black {border:1px solid #333 !important; background:#333 !important; color:#fff !important}

/* ico */
.ico-link {display:inline-block; padding-right:28px; background:url('/images/gasarang/common/ico/ico-link.png') right center no-repeat}
.pdf-down {padding-left:30px; width:20px; height:20px; background:url('/images/gasarang/common/ico/ico-download.png') 0 0 no-repeat; text-decoration:underline !important; color:#1558d6 !important}
.ico-modify {padding-left:20px; background:url('/images/gasarang/common/ico/ico-modify.png') 0 0 no-repeat}
.ico-delete {padding-left:20px; background:url('/images/gasarang/common/ico/ico-delete.png') 0 0 no-repeat}
.ico-reset {display:inline-block; padding-left:28px; background:url('/images/gasarang/common/ico/ico-reset.png') 0 center no-repeat}
.icoset {padding-left:38px; line-height:28px}
.icoset.call {background:url('/images/gasarang/common/ico/icoset-call.png') 0 0 no-repeat}
.icoset.browser {background:url('/images/gasarang/common/ico/icoset-browser.png') 0 0 no-repeat}
.icoset.mo {background:url('/images/gasarang/common/ico/icoset-mo.png') 0 0 no-repeat}
.icoset.use {background:url('/images/gasarang/common/ico/icoset-use.png') 0 0 no-repeat}
.icoset.etc {background:url('/images/gasarang/common/ico/icoset-etc.png') 0 0 no-repeat}

/* sub page */
#contents h3 {display:block; margin:40px 0 20px; padding-left:25px; background:url('/images/gasarang/common/ico/ico-h3.png') 0 4px no-repeat; font-size:20px; font-weight:600; color:#333}
#contents h3.default {padding-left:0; line-height:28px; background:none; font-weight:800}
h4 {line-height:36px; line-height:28px; font-size:18px; font-weight:600}
h4.bul-squ {margin:50px 0 2px; padding-left:15px; line-height:36px; background:url('/images/gasarang/common/ico/ico-h4.png') 0 12px no-repeat; font-size:18px; font-weight:600}
h4.bul-cir {margin:50px 0 2px; padding-left:20px; line-height:36px; background:url('/images/gasarang/common/ico/ico-h4-cir.png') 0 12px no-repeat; font-size:18px; font-weight:600}
.txt + h4.bul-cir {margin-top:43px}
h4.bul-dash {position:relative; padding-left:15px; margin:30px 0 2px; line-height:36px; font-size:18px; font-weight:400}
h4.bul-dash:before {position:absolute; left:0; top:0; display:block; content:"-"}
.sub-top {position:relative; display:table; width:100%; height:200px; background:linear-gradient(to right, #d3f1f6, #ede7ff); text-align:center; overflow:hidden}
.sub-top:before {position:absolute; left:0; top:17px; display:block; width:133px; height:210px; background:url('/images/gasarang/main/bg-main-circle-left.png') 0 0 no-repeat; background-size:100%; content:""}
.sub-top:after {position:absolute; right:0; bottom:0; display:block; width:391px; height:73px; background:url('/images/gasarang/bg-sub-circle-btm.png') 0 0 no-repeat; background-size:100%; content:""}
.sub-top .inner {display:table-cell; height:100%; vertical-align:middle}
.sub-top .btn-prev {display:none}
.sub-top h2 {margin-bottom:15px; color:#333; font-size:32px; font-weight:800}
.sub-top p {font-size:16px; color:#666}
.location {position:relative; height:41px; line-height:40px; border-bottom:1px solid #e3e3e3; background:#fff; z-index:1}
.location span, .location strong {position:relative; display:inline-block; font-size:14px; color:#999}
.location span + span, .location span + strong {padding-left:20px}
.location span + span:before, .location span + strong:before {position:absolute; left:5px; top:0; display:block; color:#999; content:">"}
.location .home {padding-left:23px; background:url('/images/gasarang/common/ico/ico-home.png') 0 center no-repeat}
.location strong {color:#333; font-weight:600}
.sub-title {padding:35px 0; background:#f5f5f5}
.sub-title strong {display:block; padding-left:40px; background:url('/images/gasarang/common/ico/sub-title.png') 0 4px no-repeat; font-size:26px; font-weight:600; color:#333}
.txt {line-height:28px; font-size:16px}
.txt.sm {line-height:26px; font-size:16px}
.txt-ico-cir {padding-left:20px; font-size:14px; background:url('/images/gasarang/common/ico/ico-h4-cir.png') 0 5px no-repeat}
.numbering {position:relative; display:inline-block; line-height:28px; font-size:16px}
.numbering + .numbering {margin-left:96px}
.numbering em {display:inline-block; margin-right:10px; width:20px; height:20px; line-height:20px; border-radius:50%; background:#9453e4; color:#fff; font-size:14px; font-weight:800; text-align:center}
.numbering.arr:before {position:absolute; left:-69px; top:7px; width:40px; height:13px; background:url('/images/gasarang/contents/bg-txt-arr.png') 0 0 no-repeat; content:""}
.no-data {padding-top:113px; background:url('/images/gasarang/common/ico/bg-nodata.png') center 0 no-repeat; text-align:center}
.no-data.sm {padding-top:90px; background-size:80px}
.no-data.sm .txt {font-size:16px; color:#333}

/* join */
.join-wrp .step {margin-bottom:30px; text-align:center}
.join-wrp .step ol {position:relative; display:inline-block; overflow:hidden}
.join-wrp .step ol:before {position:absolute; left:75px; top:20px; display:block; width:calc(100% - 150px); height:3px; background:#eee; content:""}
.join-wrp .step ol li {position:relative; float:left; width:190px; color:#999; font-size:16px; font-weight:600; text-align:center}
.join-wrp .step ol li em {position:relative; display:block; margin:0 auto 5px; width:40px; height:40px; line-height:40px; border-radius:50%; background:#ccc; color:#fff; font-size:22px; font-weight:800; text-align:center; z-index:1}
.join-wrp .step ol li.on {color:#333}
.join-wrp .step ol li.on em {background:linear-gradient(-45deg, #4fd5ff, #8f56fd)}
.join-wrp .step ol li.finish em {background:#ac8aff url('/images/gasarang/common/ico/ico-chek-join.png') center center no-repeat; font-size:0}
.join-wrp .step ol li.finish:after {position:absolute; right:-50%; top:20px; display:block; width:100%; height:3px; background:#ac8aff; content:""}
.box-terms {margin-top:3px; padding:10px 20px; line-height:26px; border:1px solid #ccc; border-radius:10px; background:#fafafa; font-size:16px; color:#666}
.box-terms.h200px {height:200px; overflow-y:auto}
.mail-wrp {display:inline-block}
.mail-wrp input[type="text"] {width:180px}
.mail-wrp + select {width:180px; vertical-align:top}

/* login */
.login-wrp {position:relative; padding-left:284px; padding-right:20px; margin:80px auto 0; width:704px; background:url('/images/gasarang/bg-login.png') 20px 0 no-repeat}
.login-wrp input[type="text"], .login-wrp input[type="password"] {margin-bottom:20px}
.login-wrp .chk-wrap {margin-bottom:30px}
.login-wrp .link-member {margin-top:25px; text-align:center}
.login-wrp .link-member a {position:relative; display:inline-block; color:#666; font-size:16px}
.login-wrp .link-member a + a {margin-left:36px}
.login-wrp .link-member a + a:before {position:absolute; left:-20px; top:6px; display:block; width:1px; height:11px; background:#ccc; content:""}

/* find Id Password */
.certifi-wrp {margin:0 auto; padding:0 30px; width:640px}
.certifi-wrp .certi-method {display:flex; justify-content:center}
.certifi-wrp .certi-method > li {padding-top:32px; width:calc(50% - 9px); height:378px; border:1px solid #e1e1e1; border-radius:10px; background:#fafafa; text-align:center}
.certifi-wrp .certi-method > li.h-auto {height:auto; padding-bottom:40px}
.certifi-wrp .certi-method > li + li {margin-left:18px}
.certifi-wrp .certi-method > li .title {display:block; margin-bottom:3px; font-size:24px; font-weight:600}
.certifi-wrp .certi-method > li p {font-size:16px; color:#666}
.certifi-wrp .certi-method > li .img-area {display:block; margin:33px 0 30px; text-align:center}
.certifi-wrp .certi-method > li a {display:inline-block; width:200px; height:50px; line-height:50px; border-radius:5px; background:#9744fd; color:#fff; font-size:16px; font-weight:600; text-align:center}
.certifi-wrp .certi-method > li a:hover {text-decoration:none !important}
.find-result {margin-top:40px; text-align:center}
.find-result .txt {margin-top:17px; line-height:36px; font-size:24px; font-weight:600}
.find-result .btn-group {margin-top:52px}

/* radio, checkbox */
.chk-wrap {overflow:hidden; margin-left:-20px}
.chk-wrap.pc {min-width:713px}
.chk-wrap > li {position:relative; float:left; margin-left:20px; height:26px}
.chk-wrap.ty12 {margin-left:-12px !important} /* 간격 12px */
.chk-wrap.ty12 > li {margin-left:12px}
.chk-wrap.mg > li {margin-top:5px; margin-bottom:5px}
.chk-wrap > li input {position:relative; left:0; top:0}
.chk-wrap > li input + label {margin-left:5px; font-size:16px; color:#333}
/*.chk-wrap > li input:focus + label {border:1px dotted #333}*/
.chk-wrap > li input[type="radio"] + label:before {display:block; position:absolute; left:-1px; top:4px; width:22px; height:22px; background:url('/images/gasarang/common/ico/ico-radio.png') 0 0 no-repeat; content:""}
.chk-wrap > li input[type="radio"]:checked + label:before {background:url('/images/gasarang/common/ico/ico-radio.png') 0 -22px no-repeat}
.chk-wrap > li input[type="checkbox"] + label:before {display:block; position:absolute; left:-1px; top:4px; width:22px; height:22px; background:url('/images/gasarang/common/ico/ico-checkbox.png') 0 0 no-repeat; content:""}
.chk-wrap > li input[type="checkbox"]:checked + label:before {background:url('/images/gasarang/common/ico/ico-checkbox.png') 0 -22px no-repeat}
.chk-wrap > li.h50 {margin-top:20px; height:50px}
.chk-wrap > li.h50 input[type="checkbox"] + label:before, .chk-wrap > li.h50 input[type="radio"] + label:before {top:16px}
.chk-wrap.line {margin-left:0} /* 1줄 텍스트+input */
.chk-wrap.line > li {float:none; margin-left:0; height:50px}
.chk-wrap.line > li + li {margin-top:10px}
.chk-wrap.line > li input[type="checkbox"] + label:before {top:16px}
.chk-wrap.line > li .tit {float:left; display:block; width:115px; height:50px; line-height:50px}
.chk-wrap.line > li input[type="text"] {width:calc(100% - 115px)}
.chk-wrap.line > li .tit.w40 {width:40px}
.chk-wrap.line > li .tit.w40 + input[type="text"] {width:calc(100% - 40px)}
div.chk-wrap {position:relative; margin-left:0; padding-left:20px}/* 단독으로 쓰일 때 */
div.chk-wrap input {position:absolute; left:0; top:1px; opacity:0}
div.chk-wrap input + label {margin-left:5px; line-height:26px; font-size:16px; color:#333}
div.chk-wrap input[type="radio"] + label:before {display:block; position:absolute; left:-1px; top:4px; width:22px; height:22px; background:url('/images/gasarang/common/ico/ico-radio.png') 0 0 no-repeat; content:""}
div.chk-wrap input[type="radio"]:checked + label:before {background:url('/images/gasarang/common/ico/ico-radio.png') 0 -22px no-repeat}
div.chk-wrap input[type="checkbox"] + label:before {display:block; position:absolute; left:-1px; top:2px; width:22px; height:22px; background:url('/images/gasarang/common/ico/ico-checkbox.png') 0 0 no-repeat; content:""}
div.chk-wrap input[type="checkbox"]:checked + label:before {background:url('/images/gasarang/common/ico/ico-checkbox.png') 0 -22px no-repeat}
/* .chk-wrap > li input:focus + label {border:1px dotted #333} 웹접근성 */

/* tab */
ul.tab {position:relative; margin-bottom:20px; overflow:hidden}
ul.tab > li {float:left; height:54px; text-align:center}
ul.tab > li > a {display:inline-block; padding:0 20px; line-height:52px; height:54px; border:1px solid #999; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#fff; font-size:20px; font-weight:600}
ul.tab > li > a:hover, ul.tab > li > a:focus {text-decoration:none !important}
ul.tab > li > a.on {border-color:#9744fd; background-color:#9744fd; color:#fff}

ul.tab-box {display:flex; margin-top:15px; height:50px; border-radius:10px; border:1px solid #ccc}
ul.tab-box > li {flex:1; position:relative; height:50px; line-height:50px}
ul.tab-box > li + li:before {position:absolute; left:0; top:16px; display:block; width:1px; height:16px; background:#ccc; content:""}
ul.tab-box > li a {position:relative; display:block; text-align:center; color:#666; font-size:16px; font-weight:600}
ul.tab-box > li a:hover {text-decoration:none !important}
ul.tab-box > li a i {display:inline-block; margin-right:10px; width:20px; height:20px; vertical-align:middle}
ul.tab-box > li a i.type {background:url('/images/gasarang/contents/ico-type.png') 0 0 no-repeat}
ul.tab-box > li a i.region {background:url('/images/gasarang/contents/ico-region.png') 0 0 no-repeat}
ul.tab-box > li a i.corp {background:url('/images/gasarang/contents/ico-corp.png') 0 0 no-repeat}
ul.tab-box > li a.on {border-radius:10px; background:#9744fd; color:#fff; z-index:1}
ul.tab-box > li a.on i {background-position:0 -50px}

.tb-sub-wrp {width:100%}
ul.tab-sub {width:100%; padding-left:30px; height:50px; border-radius:10px;}
ul.tab-sub > li {float:left; padding-right:30px; height:50px; line-height:50px}
ul.tab-sub > li a {position:relative; display:block; height:50px; font-size:16px; color:#666}
ul.tab-sub > li a:hover {text-decoration:none !important}
ul.tab-sub > li a.on {color:#333; font-weight:800}
ul.tab-sub > li a.on:after {position:absolute; left:0; bottom:0; display:block; width:100%; height:2px; background-color:#333; content:""}

.tab-swiper {padding-right:30px;background:#fafafa;border-radius:10px;}
.tab-swiper .swiper-button-next, .tab-swiper .swiper-button-prev {margin-top:0 !important; top:14px !important; width:24px !important; height:24px !important; border-radius:50%; background:rgba(0,0,0,0.4); background-position:center; background-repeat:no-repeat; background-size:7px 12px !important}
.tab-swiper .swiper-button-next {right:0 !important; background-image:url('/images/gasarang/common/btn/btn-next-sm-wh.png') !important}
.tab-swiper .swiper-button-prev {left:0 !important; background-image:url('/images/gasarang/common/btn/btn-prev-sm-wh.png') !important}

/* table */
h4 + table {margin-top:10px}
.board-count {margin:40px 0 20px}
.board-count:after {display:block; clear:both; content:""}
.board-count .count {float:left; margin-top:12px; font-size:16px; color:#666}
.board-count .count span {color:#9745fd; font-weight:600}
.board-count .util {float:right}
.board-count .util:after {display:block; clear:both; content:""}
.board-count .util button, .board-count .util select, .board-count .util input[type="text"] {float:left}
.board-count .util button {margin-left:10px; padding:0 20px; height:36px; line-height:34px; border:1px solid #ccc; border-radius:18px; font-size:14px; color:#333}
.board-count .util button.view {margin-left:-1px; padding:0 5px; width:68px; border-radius:5px; border-top-left-radius:0; border-bottom-left-radius:0; background:#eee}
.board-count .util .order span {display:inline-block; padding-right:23px; background:url('/images/gasarang/common/ico/ico-order.png') right 0 no-repeat}
.board-count .util .order span.asending {background-position:right -35px}
.board-count .util select.view {margin-left:10px; width:100px; height:36px; border-top-right-radius:0; border-bottom-right-radius:0; border-color:#ccc; vertical-align:top; font-family: 'suit';}
.board-count .util .txt {float:left; display:inline-block; line-height:36px; font-size:16px}
.board-count .util .inp-txt {margin-left:10px; width:300px; height:36px; line-height:34px; border:1px solid #ccc; border-radius:5px; border-top-right-radius:0; border-bottom-right-radius:0; vertical-align:top}

.tbl-list {border-top:1px solid #909090}
.tbl-list tr {border-bottom:1px solid #efefef}
.tbl-list tr:hover {background:#f7f3ff}
.tbl-list th, .tbl-list td {padding:17px 0 17px 30px; line-height:26px; color:#333; font-size:16px}
.tbl-list th {background:#fafafa; color:#666; font-size:18px; font-weight:600}
.tbl-list.a-c th, .tbl-list th.a-c, .tbl-list.a-c td {padding: 17px 5px; text-align:center}
.tbl-list td .ico-noti {padding-left:25px; background:url('/images/gasarang/common/ico/ico-notice-pur.png') 0 1px no-repeat}

.tbl-fix {border-top:1px solid #909090} /* 변형없는 tbl-list */
.tbl-fix tr {border-bottom:1px solid #efefef}
.tbl-fix tr:hover {background:#f7f3ff}
.tbl-fix th, .tbl-fix td {padding:17px 0 17px 30px; line-height:26px; color:#333; font-size:16px}
.tbl-fix th {background:#fafafa; color:#666; font-size:18px; font-weight:600}
.tbl-fix.a-c th, .tbl-fix.a-c td {padding: 17px 5px; text-align:center}

.tbl-detail {border-top:1px solid #909090}
.tbl-detail th, .tbl-detail td {padding:18px 0 18px 30px; line-height:26px; border-bottom:1px solid #efefef; color:#333; font-size:16px; text-align:left}
.tbl-detail th {background:#fafafa; color:#666; font-weight:600}
.tbl-detail td {padding-right:30px; background:#fff}

.tbl-detail.board thead .title {background:#fff; font-size:18px; color:#333}
.tbl-detail.board tbody tr.board-cont div {min-height:400px}

.tbl-info {border-top:2px solid #333}
.tbl-info .bl {border-left:1px solid #ddd !important}
.tbl-info .a-c {padding-left:0; padding-right:0}
.tbl-info th, .tbl-info td {padding:13px 20px; line-height:28px; border-left:1px solid #ddd; border-bottom:1px solid #ddd; font-size:16px}
.tbl-info th {padding-left:0; padding-right:0; font-weight:600; text-align:center}
.tbl-info th.a-l {padding-left:20px; padding-right:20px}
.tbl-info tbody th {border-left:none}

table + .txt-info {margin-top:7px}
.txt-info {padding-left:25px; background:url('/images/gasarang/common/ico/ico-info.png') 0 3px no-repeat; font-size:16px; color:#666}
.txt-info.sm {padding-left:22px; line-height:20px; background-size:16px; background-position:0 1px; font-size:14px}
.txt-info.pur {background-image:url('/images/gasarang/common/ico/ico-info-pur.png')}
.txt-info.red {background-image:url('/images/gasarang/common/ico/ico-info-red.png'); color:#ff0000 !important}
.txt-noti {padding-left:25px; background:url('/images/gasarang/common/ico/ico-notice.png') 0 3px no-repeat; font-size:16px; color:#666}

/* prev, next */
.prev-next {border-top:1px solid #efefef}
.prev-next > li {position:relative; padding-left:180px; height:60px; border-bottom:1px solid #efefef}
.prev-next > li .tit {position:absolute; left:0; top:0; display:block; padding-left:30px; width:180px; height:59px; line-height:59px; background:#fafafa; font-size:16px; color:#666}
.prev-next > li .tit span {display:inline-block; padding-right:28px; background-image:url('/images/gasarang/common/ico/ico-prev-next.png'); background-repeat:no-repeat}
.prev-next > li .tit span.prev {background-position:right 24px}
.prev-next > li .tit span.next {background-position:right -36px}
.prev-next > li .link {display:block; padding:0 30px; line-height:60px; color:#333; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* pagination */
.pagination {margin-top:40px; text-align:center}
.pagination a, .pagination strong {display:inline-block; width:36px; height:36px; line-height:34px; border:1px solid #ccc; border-radius:10px; background:#fff; font-size:16px; font-weight:400; color:#666; text-align:center; vertical-align:top}
.pagination a + a, .pagination strong + a, .pagination a + strong {margin-left:10px}
.pagination a:hover, .pagination a:focus {text-decoration:none !important}
.pagination .control {line-height:0; background:#fff url('/images/gasarang/common/btn/btn-paging.png'); background-repeat:no-repeat; font-size:0}
.pagination .first {background-position:center 0 no-repeat}
.pagination .prev {background-position:center -36px}
.pagination .next {background-position:center -72px}
.pagination .last {background-position:center -108px}
.pagination .active {border-color:#9745fd; background-color:#9745fd; color:#fff}

/* srch */
.srch-wrp {padding:20px 30px; border-radius:10px; background:#fafafa}
.srch-wrp .txt-info {margin:0 0 15px}
.srch-wrp .txt-info p, .txt-info p.sm {padding-left:23px; line-height:20px; background-size:16px; background-position:0 2px; font-size:14px}
.srch-org:after {display:block; clear:both; content:""}
.srch-org .item {position:relative; float:left}
.srch-org .item + .item {margin-left:8px}
.srch-org .item button.sel {position:relative; padding:0 25px 0 10px; width:122px; height:50px; border:1px solid #999; border-radius:5px; background:#fff; font-size:16px; color:#666; text-align:left; word-break:keep-all; word-wrap:break-word} /* 20221011 수정 */
.srch-org .item button.sel:after {position:absolute; right:10px; top:50%; width:15px; height:8px; background:url('/images/gasarang/common/btn/btn-toggle-sm.png') 0 0 no-repeat; transform:translateY(-50%); content:""}
.srch-org .item button.sel.on {background:#eee}
.srch-org .item button.sel.on:after {top:calc(50% - 3px); transform:rotate(-180deg)}
.srch-org .item button.sel.on + .item-layer {display:block}
.srch-org .item .item-layer {display:none; position:absolute; left:0; top:50px; padding:20px 20px 10px 20px; width:100%; border-top:none; border-radius:5px; background:#fff; box-shadow:0 0 8px 4px rgb(0,0,0,0.1); max-height:401px; overflow-y:auto; z-index:5}
.srch-org .item .item-layer .btn-close {position:absolute; right:5px; top:5px; padding:10px} /* 20220502 추가 */
.srch-org .item.day .item-layer {width:680px; left:-268px}
.srch-org .item.time .item-layer {width:730px; left:-293px}
.srch-org .item.svc .item-layer {width:910px; left:-608px}
.srch-org .item.means .item-layer {width:810px; left:-666px}

.srch-org .item .item-layer .txt {padding:0 10px; height:40px; line-height:40px; font-size:16px; color:#999}
.srch-org .item .item-layer .check-wrp {overflow:hidden; margin-left:-10px}
.srch-org .item .item-layer .check-wrp li {position:relative; float:left; padding:0 10px; margin:0 0 10px 10px; width:120px; height:50px}
.srch-org .item .item-layer .check-wrp input {position:relative; left:0; top:0}
.srch-org .item .item-layer .check-wrp label {position:absolute; left:0; top:0; display:block; width:100%; height:100%; line-height:48px; border:1px solid #999; border-radius:5px; background:#fff; font-size:16px; color:#333; text-align:center}
.srch-org .item .item-layer .check-wrp label span {display:inline-block; padding-left:22px; background:url('/images/gasarang/common/ico/ico-chek-group.png') 0 0 no-repeat}
.srch-org .item .item-layer .check-wrp input:checked + label {border-color:#9745fd}
.srch-org .item .item-layer .check-wrp input:checked + label span {background:url('/images/gasarang/common/ico/ico-chek-group.png') 0 -50px no-repeat}
/*.srch-org .item .item-layer .check-wrp input:focus + label {border:1px dotted #333} 접근성 */

.srch-org .item .item-layer.col {padding:0; width:100%; left:0}
.srch-org .item .item-layer.col .check-wrp {margin-left:0}
.srch-org .item .item-layer.col .check-wrp li {float:none; margin:0; width:100%; height:40px; line-height:39px; border-bottom:1px solid #eee}
.srch-org .item .item-layer.col .check-wrp li:last-child {border-bottom:none}
.srch-org .item .item-layer.col .check-wrp li + li {margin-left:0}
.srch-org .item .item-layer.col .check-wrp label {padding-left:30px; line-height:39px; border:none; border-radius:0; text-align:left}
.srch-org .item .item-layer.col .check-wrp input:checked + label, .srch-org .item .item-layer.col .check-wrp label:hover, .srch-org .item .item-layer.col .check-wrp label:focus {background:#f3f3f3}
.srch-org .item .item-layer.col .check-wrp input:checked + label:before {position:absolute; left:10px; top:12px; display:block; width:14px; height:11px; background:url('/images/gasarang/common/ico/ico-chek-group.png') -3px -69px no-repeat; content:""}

.srch-select-box {position:relative; margin-top:20px; padding:10px 20px 0 126px; border-radius:5px; background:#eee}
.srch-select-box .title {position:absolute; left:20px; top:10px; display:block; padding-left:20px; line-height:40px; background:url('/images/gasarang/common/ico/bg-title-chk.png') 0 11px no-repeat; font-size:16px; font-weight:400; color:#333}
.srch-select-box ul {overflow:hidden}
.srch-select-box ul li {position:relative; float:left; margin:0 0 10px 10px; padding:0 35px 0 12px; height:40px; line-height:40px; border-radius:5px; background:#fff; box-shadow:0 1px 3px rgb(0,0,0,0.1); font-size:16px; font-weight:600; color:#333}
.srch-select-box ul li .del {position:absolute; right:12px; top:50%; width:12px; height:12px; background:url('/images/gasarang/common/btn/btn-delete.png') 0 0 no-repeat; line-height:0; font-size:0; transform:translateY(-50%)}

.srch-keyword {display:flex; margin-top:20px; padding:20px 0; border-radius:10px; background:#fafafa; justify-content:center}
.srch-keyword .btn-h50 {margin-left:10px; min-width:65px}

/* box */
.box-gray {padding:10px; border-radius:5px; background:#f5f5f5}
.box-gray.ty2 {padding:21px 20px;}
.box-gray.ty3 {padding:15px 20px;}
.box-gray.bg2 {background:#fafafa}
.box-info {margin-bottom:40px; padding:30px 30px 30px 40px; border:1px solid #e1e1e1; border-radius:10px; background:#fafafa}
.box-info .title {display:block; margin-bottom:10px}
.box-info .txt-info {line-height:24px; background-position:0 1px; color:#333; font-size:18px; font-weight:600}
.box-info .txt {line-height:21px; font-size:14px}
.box-info .txt + .txt {margin-top:10px}
.box-purple {padding:21px 20px; background:#f3f3ff}
.box-quotation {position:relative; margin-top:40px; padding:50px 0; line-height:32px; border-left:3px solid #ddd; border-right:3px solid #ddd; font-size:20px; text-align:center}
.box-quotation:before {display:block; position:absolute; left:-3px; top:0; width:50px; height:46px; background:url('/images/gasarang/contents/quotation-left.png') 0 0 no-repeat; content:""}
.box-quotation:after {display:block; position:absolute; right:-3px; bottom:0; width:50px; height:46px; background:url('/images/gasarang/contents/quotation-right.png') 0 0 no-repeat; content:""}
.box-quotation .line {display:inline-block}
.box-quotation .line:before {position:absolute; left:0; bottom:0; display:block; width:37px; height:3px; background:#ddd; content:""}
.box-quotation .line:after {position:absolute; right:0; top:0; display:block; width:37px; height:3px; background:#ddd; content:""}

/* list */
.dot-list > li, p.dot-list {position:relative; padding-left:10px; line-height:28px; font-size:16px}
.dot-list > li:before, p.dot-list:before {position:absolute; left:0; top:11px; display:block; width:4px; height:4px; background:#666; content:""}
.dot-list.blue > li:before, p.dot-list.blue:before {background:#29aaca}
.dash-list > li {position:relative; padding-left:14px; line-height:28px; font-size:16px}
.dash-list > li:before {position:absolute; left:0; top:0; display:block; content:"-"}
.indent-list > li {position:relative; padding-left:15px; line-height:28px; font-size:16px}
.indent-list > li em {position:absolute; left:0; top:0}
.indent-list.ty2 > li + li {margin-top:6px}
.heart-list > li, p.heart-list {position:relative; padding-left:27px; line-height:28px; background:url('/images/gasarang/common/ico/ico-heart.png') 0 5px no-repeat; font-size:16px}

/* system intro */
.box-system {display:flex; margin:10px 0 18px; padding:0 20px 0 50px; height:160px; border-radius:20px; background:#f3f3ff url('/images/gasarang/contents/bg-boxSystem.png') right 20px bottom no-repeat; font-size:24px; align-items:center; letter-spacing:-1px}
.intro1 {position:relative; margin:35px auto 0; width:573px; height:407px; background:url('/images/gasarang/contents/bg-intro1.png') center 0 no-repeat}
.intro1 .tit {display:block; padding-top:30px; line-height:30px; font-size:22px; font-weight:400; text-align:center}
.intro1 .tit em {display:block; color:#9453e4; font-weight:700}
.intro1 ul > li {position:absolute; display:flex; width:180px; height:120px; line-height:24px; border-radius:30px; font-size:18px; font-weight:600; color:#fff; text-align:center; align-items:center}
.intro1 li.bg-pur {left:0; top:117px; border-bottom-right-radius:0; background:#9453e4}
.intro1 li.bg-grn {left:196px; bottom:0; border-top-right-radius:0; background:#2d9f9f}
.intro1 li.bg-blu {right:0; top:117px; border-bottom-left-radius:0; background:#306daf}
.intro1 ul > li > p {width:100%}
.intro2 {margin-top:40px; padding:30px 20px; background:#eee}
.intro2:after {display:block; clear:both; content:""}
.intro2 > li {position:relative; float:left; width:452px; height:358px; border-radius:10px}
.intro2 > li + li {margin-left:20px}
.intro2 > li + li:before {position:absolute; left:-40px; top:50%; display:block; margin-top:-32px; width:58px; height:64px; background:url('/images/gasarang/contents/bg-intro-arr.png') 0 0 no-repeat; content:""}
.intro2 > li .tit {position:absolute; left:50%; top:-20px; display:inline-block; width:200px; height:40px; line-height:40px; border-radius:10px; font-size:18px; color:#fff; transform:translateX(-50%); text-align:center}
.intro2 > li:first-child .tit {background:#2d9f9f}
.intro2 > li:last-child .tit {background:#9453e4}
.intro2 > li img {width:100%; height:100%}
.org-procedure {margin-top:10px; overflow:hidden}
.org-procedure > li {position:relative; float:left; width:290px; height:170px; border:1px solid #ddd; border-radius:15px; border-bottom-right-radius:0; background:#f5f5f5; text-align:center}
.org-procedure > li + li {margin-left:47px}
.org-procedure > li + li:before {position:absolute; left:-37px; top:50%; display:block; margin-top:-14px; width:26px; height:28px; background:url('/images/gasarang/contents/bg-procedure-arr.png') 0 0 no-repeat; content:""}
.org-procedure > li .tit {display:flex; height:70px; background:#fff; border-top-left-radius:15px; border-top-right-radius:15px; font-size:15px; font-weight:400; align-items:center; justify-content:center}
.org-procedure > li .tit em {padding-right:3px; font-size:30px; font-weight:800; color:#a65dff}
.org-procedure > li .tit em.color2 {color:#ac8aff}
.org-procedure > li .tit em.color3 {color:#29aaca}
.org-procedure > li .txt {display:flex; height:calc(100% - 68px); align-items:center; justify-content:center}
.gsr-procedure {margin-top:20px; overflow:hidden}
.gsr-procedure > li {position:relative; float:left; margin-top:20px; width:290px; border:1px solid #ddd; border-radius:15px; border-bottom-right-radius:0; background:#f5f5f5; text-align:center}
.gsr-procedure > li + li {margin-left:47px}
.gsr-procedure > li + li:before {position:absolute; left:-37px; top:50%; display:block; margin-top:-14px; width:26px; height:28px; background:url('/images/gasarang/contents/bg-procedure-arr.png') 0 0 no-repeat; content:""}
.gsr-procedure.col3 > li:nth-child(3n+1) {margin-left:0}
.gsr-procedure.col3 > li:nth-child(3n+1):before {display:none}
.gsr-procedure > li .tit {display:flex; height:70px; background:#fff; border-top-left-radius:15px; border-top-right-radius:15px; font-size:18px; font-weight:600; align-items:center; justify-content:center}
.gsr-procedure > li .tit em {padding-right:8px; font-size:30px; font-weight:800; color:#9453e4}
.gsr-procedure > li .tit em.c-blue {color:#306daf}
.gsr-procedure > li .tit em.c-green {color:#2d9f9f}
.gsr-procedure > li .txt {display:flex; padding:20px 0; min-height:126px; align-items:center; justify-content:center}
.gsr-procedure > li .txt.h152 {height:152px}

/* support intro */
.info-vat {margin:40px 0 33px; padding:40px 0 40px 370px; background:#f6f6f6}
.info-vat > li {position:relative; padding:23px 40px; width:503px; min-height:167px; border-radius:15px; border:1px solid #ddd; background:#fff}
.info-vat > li + li {margin-top:40px}
.info-vat > li .tit {position:absolute; left:-276px; top:0}
.info-vat > li .tit:before {position:absolute; left:155px; top:50%; display:block; width:10px; height:10px; border:4px solid #fff; border-radius:50%; background:#9453e4; transform:translateY(-50%); content:""}
.info-vat > li .tit:after {position:absolute; left:169px; top:50%; display:block; width:106px; height:1px; background:#9453e4; content:""}
.info-vat > li:last-child .tit:before, .info-vat > li:last-child .tit:after {background:#0b6ed2}
.br-box {display:flex}
.br-box > li {flex:1; padding:25px 0 30px; border:1px solid #ddd; text-align:center}
.br-box > li:first-child {border-top-left-radius:15px; border-bottom-left-radius:15px}
.br-box > li:last-child {border-top-right-radius:15px; border-bottom-right-radius:15px}
.br-box > li + li {border-left:none}
.br-box > li .tit {display:inline-block; margin-bottom:14px; line-height:28px; font-size:18px; font-weight:400}
.br-box > li p {line-height:28px; font-size:16px}
.info-consulting {position:relative; margin:0 30px; padding-top:3px; height:303px}
.info-consulting .title {position:absolute; left:361px; top:52px; display:table; padding:9px 10px; width:182px; height:182px; border:1px solid #ddd; border-radius:50%; text-align:center}
.info-consulting .title > strong {display:table-cell; width:160px; height:160px; line-height:32px; background:#9453e4; border-radius:50%; font-size:24px; font-weight:400; color:#fff; vertical-align:middle}
.info-consulting .title em {display:block; font-weight:800; color:#99ebff}
.info-consulting .item {position:absolute; width:300px}
.info-consulting .item.fir {left:0; top:4px}
.info-consulting .item.sec {left:604px; top:4px}
.info-consulting .item.thr {left:0; top:216px}
.info-consulting .item.four {left:604px; top:216px}
.info-consulting .item .tit {position:relative; display:block; padding:0 0 3px 20px; border-bottom:1px solid #ccc; font-size:20px; color:#9453e4}
.info-consulting .item .tit:before {position:absolute; display:block; width:95px; height:1px; background:#ccc; content:""}
.info-consulting .item.fir .tit:before {right:-89px; top:56px; transform:rotate(29deg)}
.info-consulting .item.sec .tit:before {left:-89px; top:56px; transform:rotate(-29deg)}
.info-consulting .item.thr .tit:before {right:-89px; top:10px; transform:rotate(-29deg)}
.info-consulting .item.four .tit:before {left:-89px; top:10px; transform:rotate(29deg)}
.info-consulting .item ul {padding:3px 0 0 20px}
.info-consulting .item ul > li {padding-left:16px; line-height:28px; background:url('/images/gasarang/common/ico/ico-tri.png') 0 9px no-repeat; font-size:16px}
.pc-sprt-period {margin-top:13px}
.sprt-period {display:none}

/* download-line-box */
.download-box {position:relative; margin-top:13px; padding-top:13px; border-top:1px solid #898989}
.download-box a {position:absolute; right:0; top:15px}

/* policy */
.indicPolicy-box {margin:15px 0 15px; padding:30px; border-radius:25px; background:#eee}
.version-box {margin-top:43px; padding:20px 0; background:#f6f6f6; text-align:center}
.version-box .txt {margin-right:7px; line-height:50px}
.version-box select {margin-right:7px}
.version-box select, .version-box .btn-h50 {width:160px; vertical-align:top}

/* etc benefit */
.best-benefit {margin-top:7px}
.best-benefit:after {display:block; clear:both; content:""}
.best-benefit > li {position:relative; float:left; width:calc(50% - 10px); border-radius:10px}
.best-benefit > li + li {margin-left:20px}
.best-benefit > li a {display:block; padding:25px 30px 17px 150px; border:1px solid #ddd; border-radius:10px; background:#fff}
.best-benefit > li a:hover {text-decoration:none !important; border-color:#9744fd; box-shadow:0 3px 6px rgb(0,0,0,0.15)}
@media screen and (min-width:0\0){
	/* ms */
	.best-benefit > li a:hover {box-shadow:0 0 3px 0 #666}
}

.best-benefit li a .img-area {position:absolute; left:1px; top:50%; width:149px; height:9rem; transform:translateY(-50%); text-align:center}
.best-benefit li a .img-area img {position:absolute; left:50%; top:50%; max-width:90px; max-height:90px; transform:translate(-50%, -50%)}
.best-benefit li a .txt {line-height:26px}
.best-benefit li a .txt .tit {display:block; margin-bottom:10px; font-size:20px; color:#333; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.best-benefit li a .txt span {display:block; color:#666; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.best-benefit li a .txt span em {margin-right:10px; color:#333}
.best-benefit li a .txt span.coupon {display:inline-block; margin-top:8px; padding-right:15px; background:url('/images/gasarang/common/btn/btn-link-gray-ty2.png') right center no-repeat; color:#333; font-weight:600}
.best-benefit li a:hover .txt span.coupon {background:url('/images/gasarang/common/btn/btn-link-purple-ty2.png') right center no-repeat; color:#9744fd}
.list-thumb {margin-top:40px; border-top:1px solid #333}
.list-thumb .dis-flex {display:flex; border-bottom:1px solid #ededed}
.list-thumb a:hover {text-decoration:none !important; background:#f7f3ff}
.list-thumb li .img-area {width:170px; flex-shrink:0; text-align:center; align-self:center}
.list-thumb li .img-area img {max-width:90px; max-height:90px}
.list-thumb li .info {position:relative; padding:25px 175px 23px 20px; width:calc(100% - 170px)}
.list-thumb li .info .txt {line-height:26px}
.list-thumb li .info .txt .tit {display:block; margin-bottom:10px; max-width:100%; font-size:20px; color:#333; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.list-thumb li .info .txt span {display:block; max-width:100%; color:#666; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.list-thumb li .info .txt span em {margin-right:10px; color:#333}
.list-thumb li .info .coupon {position:absolute; right:30px; top:50%; transform:translateY(-50%)}
.list-thumb li .info .btn-h36 {border-color:#333; font-weight:600}
.list-thumb a:hover .info .btn-h36 {border-color:#9744fd; background-color:#9744fd; color:#fff}
.coupon-title {text-align:center}
.coupon-title .logo {width:87px}
.coupon-title .text {margin-top:20px; width:280px}
.coupon-title .name {display:flex; margin-top:24px; height:90px; justify-content:center}
.coupon-title .name .img-area {margin-left:40px; width:90px; align-self:center}
.coupon-title .name .img-area img {max-width:90px; max-height:90px}
.coupon-title .name .img-qr {margin-left:40px; align-self:center}
.coupon-title .name .img-qr img {max-width:90px; max-height:90px}
.coupon-title .name p {max-width:90px; color:#333; font-size:20px; font-weight:800; align-self:center}
.coupon-dtl {margin-top:30px; padding-top:30px; border-top:2px dashed #ccc}
.coupon-dtl > li {display:flex; margin-bottom:10px; line-height:24px; font-size:16px; color:#333; word-break:break-word}
.coupon-dtl > li .tit {display:block; margin-right:20px; width:70px; flex-shrink:0; height:26px; line-height:26px; border-radius:13px; background:#f7f3ff; color:#9744fd; font-weight:600; text-align:center}