@charset "utf-8";

#conts {font-size:.85em; color:#4F5869; line-height:1.4;}

/************************************
	Heading Text
************************************/

.conts h4,
.conts h5,
.conts h6 {display:block; position:relative; margin-bottom:calc((25 / 30) * 1em); font-family:'RiaSans',sans-serif; font-weight:600; color:#17212D; line-height:1.4em;}
.conts h4 {font-size:calc((30 / 17) * 1em); padding-left:calc((35 / 30) * 1em);}
.conts h4:before {content:""; display:block; position:absolute; top:.7em; left:0; width:calc((22 / 30) * 1em); height:calc((29 / 30) * 1em); transform:translateY(-50%); background:url(../img/common/bul_h4.svg) no-repeat 50% 50% / contain;}
.conts h5 {font-size:calc((26 / 17) * 1em); color:#003E7A;}
.conts h6 {font-size:calc((20 / 17) * 1em);}


/************************************
	Default Text
************************************/

.conts em {color:#d72e65;}
.conts strong {font-weight:600;}
.conts p + p {margin-top:calc((25 / 17) * 1em);}
.conts a:not([class*="btn"]) {color:#0c64b9; font-weight:600;}
.conts a:not([class*="btn"]):hover,
.conts a:not([class*="btn"]):focus {text-decoration:underline;}
.conts a:not([class*="btn"])[target="_blank"]:after {content:""; display:inline-block; position:relative; margin-left:.3em; vertical-align:middle; width:calc((25 / 17) * 1em); height:calc((25 / 17) * 1em); background:url(../img/common/ico_blank.svg) no-repeat 50% 50% / contain;}

.point:not([class*="btn"]) {color:#0c64b9;}
.em:not([class*="btn"]) {color:#d72e65;}

.tip {position:relative; padding-left:calc((33 / 17) * 1em); color:#17212D; background:none !important;}
.tip:before {content:""; display:block; position:absolute; left:0; top:.7em; width:calc((24 / 17) * 1em); height:calc((24 / 17) * 1em); border-radius:100%; background:#17212D url(../img/common/ico_tip.svg) no-repeat 50% 50% / contain; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.tip.point {color:#0C64B9;}
.tip.point:before {background-color:#0C64B9;}
.tip.error {color:#d72e65;}
.tip.error:before {background-color:#d72e65;}


/************************************
	Box
************************************/

.box-default {border:1px solid #DAE1EC; border-radius:calc((30 / 17) * 1em); padding:calc((50 / 17) * 1em);}
.box-default p {font-size:calc((18 / 17) * 1em);}

.box-button {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:.5em 1em;}
.box-button .btn {margin:.5em;}
@media all and (max-width:580px) {
	.box-button .btn {flex-grow:1;}
}

.box-design {display:flex; align-items:center; position:relative; padding:calc((50 / 17) * 1em) calc((70 / 17) * 1em); background:#F8F8FC; border-radius:calc((30 / 17) * 1em);}
.box-design .icon {display:flex; position:relative; flex-shrink:0; width:calc((120 / 17) * 1em); height:calc((120 / 17) * 1em); margin-right:calc((54 / 17) * 1em); background:#fff; align-items:center; justify-content:center; border-radius:calc((20 / 17) * 1em); box-shadow:0 calc((20 / 17) * 1em) calc((25 / 17) * 1em) 0 rgba(17,43,98,.1);}
.box-design .icon img {display:block; position:relative; width:calc((75 / 17) * 1em);}
.box-design h4,
.box-design h5,
.box-design h6 {color:#17212D !important; padding-left:0 !important; font-size:calc((30 / 17) * 1em); margin-bottom:calc((18 / 30) * 1em) !important;}
.box-design h4:before,
.box-design h5:before,
.box-design h6:before {display:none;}
.box-design .desc {flex-grow:1; color:#7F899C;}
.box-design p {word-break:keep-all;}

@media all and (max-width:1024px) {
	.box-design {padding:2em;}
	.box-design .icon {margin-right:3em;}
}
@media all and (max-width:720px) {
	.box-design {padding:1.5em;}
	.box-design .icon {margin-right:2em; font-size:.8em;}
}
@media all and (max-width:640px) {
	.box-design {flex-direction:column; padding:2em;}
	.box-design .icon {margin-right:0; margin-bottom:3em;}
	.box-design h4,
	.box-design h5,
	.box-design h6 {text-align:center;}
}


/************************************
	UL / OL List
************************************/

.list-ol li,
.list-ul li {display:block; position:relative; line-height:1.3em;}
.list-ol li + li,
.list-ul li + li {margin-top:calc((7 / 17) * 1em);}
.list-ol ul,
.list-ol ol,
.list-ul ul,
.list-ul ol {margin-top:calc((10 / 17) * 1em);}

.list-ul > li:before,
.list-ul ul > li:before {content:""; display:block; position:absolute; top:.65em; left:0; margin-top:-.5em; width:1em; height:1em; background:url(../img/common/bul_li.svg) no-repeat 0 0 / 1em auto;}
.list-ul > li {padding-left:calc((15 / 17) * 1em);}
.list-ul > li:before {background-position-y:0;}
.list-ul > li li {padding-left:calc((12 / 17) * 1em);}
.list-ul > li li:before {background-position-y:-1em;}

.list-ol li {padding-left:calc((30 / 17) * 1em);}
.list-ol .num {display:flex; position:absolute; left:0; top:calc((1.3em / 2) * (17 / 14)); align-items:center; justify-content:center; border-radius:9em; font-size:calc((14 / 17) * 1em); color:#fff; font-weight:800; background:#003E7A; width:calc((23 / 14) * 1em); height:calc((22 / 14) * 1em); transform:translateY(-50%); -webkit-transform:translateY(-50%);}


/************************************
	Table
************************************/

.tbl {width:100%; table-layout:fixed;}
.tbl th,
.tbl td {height:calc((60 / 17) * 1em); box-sizing:border-box; padding:1em .5em; border:1px solid #D0D0DD; border-top-width:0; vertical-align:middle; font-size:1em; word-break:break-word;}
.tbl thead,
.tbl tbody {border-top:2px solid #333;}
.tbl thead + tbody  {border-top-width:0;}
.tbl thead th {background:#f3f6f9; font-weight:600;}
.tbl tbody th {background:fbfcfd; font-weight:400;}

.tbl thead tr .bo-point {border-left:3px solid #E73656; border-right:3px solid #E73656;}
.tbl thead tr:first-child .bo-point {border-top:3px solid #E73656;}
.tbl tbody tr .bo-point {border-left:3px solid #E73656; border-right:3px solid #E73656;}
.tbl tbody tr:first-child .bo-point {border-top:3px solid #E73656;}
.tbl tbody tr:last-child .bo-point {border-bottom:3px solid #E73656;}
.tbl thead + tbody tr:first-child .bo-point {border-top:1px solid #D0D0DD;}

.tbl-legend {display:block; position:relative; margin:0 !important; font-size:.95em; text-align:right; margin-bottom:.7em !important; flex:auto;}
.tbl-respon {position:relative;}
.tbl-respon > .guide {display:none; position:relative; padding-left:calc((33 / 17) * 1em); color:#17212D; background:none !important; opacity:.8; font-size:.95em; margin-bottom:.7em;}
.tbl-respon > .guide:before {content:""; display:block; position:absolute; left:0; top:.7em; width:calc((24 / 17) * 1em); height:calc((24 / 17) * 1em); border-radius:100%; background:#17212D url(../img/common/ico_tip.svg) no-repeat 50% 50% / contain; transform:translateY(-50%); -webkit-transform:translateY(-50%);}

.tbl-respon.tbl-all-scroll {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.tbl-respon.tbl-all-scroll > .guide {display:block;}
.tbl-respon.tbl-all-scroll .tbl-box {width:100%; overflow:auto;}
.tbl-respon.tbl-all-scroll .tbl-box .tbl {width:109em;}

@media all and (max-width:1000px) {
	.tbl-respon {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
	.tbl-respon > .guide {display:block;}
	.tbl-respon .tbl-box {width:100%; overflow:auto;}
	.tbl-respon .tbl-box .tbl {width:56em;}
}


/************************************
	Button
************************************/

.btn {display:inline-block; vertical-align:middle; border:1px solid #17212D; background:#17212D; border-radius:5px; line-height:1.294em; padding:calc((13 / 17) * 1em) calc((45 / 17) * 1em); color:#fff; font-weight:500; text-decoration:none;}
.btn:hover,
.btn:focus {text-decoration:underline;}
.btn.line {background-color:#fff !important; color:#17212D;}
.btn.normal {background-color:#003E7A; border-color:#003E7A;}
.btn.normal.line {color:#003E7A;}
.btn.point {background-color:#003E7A; border-color:#003E7A;}
.btn.point.line {color:#003E7A;}
.btn.del {background-color:#D72E65; border-color:#D72E65;}
.btn.del.line {color:#D72E65;}
.btn.cancel {border-color:#DAE1EC; color:#949AA6; background-color:#fff;}
.btn.disabled,
.btn[disabled] {pointer-events:none; cursor:default; border-color:#DAE1EC !important; background-color:#F2F5FA !important; color:#A9B3C4 !important;}

/* Color : White */

.btn.icon {text-align:left; padding-right:calc((65 / 17) * 1em); background-repeat:no-repeat; background-position:top 50% right calc((30 / 17) * 1em); background-size:calc((25 / 17) * 1em) auto;}
.btn.icon.down {background-image:url(../img/button/white/down.svg);}
.btn.icon.popup {background-image:url(../img/button/white/pop.svg);}

/* Color : Black */

.btn.line.icon.down {background-image:url(../img/button/black/down.svg);}
.btn.line.icon.popup {background-image:url(../img/button/black/pop.svg);}

/* Color : Blue */

.btn.line.point.icon.down,
.btn.line.normal.icon.down {background-image:url(../img/button/blue/down.svg);}
.btn.line.point.icon.popup,
.btn.line.normal.icon.popup {background-image:url(../img/button/blue/pop.svg);}

/* Color : Gray */

.btn.line.cancel.icon.down {background-image:url(../img/button/gray/down.svg);}
.btn.line.cancel.icon.popup {background-image:url(../img/button/gray/pop.svg);}

/* Color : Delete */

.btn.line.del.icon.down {background-image:url(../img/button/red/down.svg);}
.btn.line.del.icon.popup {background-image:url(../img/button/red/pop.svg);}

/* Color : disabled */

.btn.disable.icon.down,
.btn[disabled].icon.down {background-image:url(../img/button/light/down.svg) !important;}
.btn.disable.icon.popup,
.btn[disabled].icon.popup {background-image:url(../img/button/light/pop.svg) !important;}


/************************************
	Scroll Bar
************************************/

.conts .scroll {width:100%; height:100%;}
.conts .scroll.scroll-wrapper {position:relative; height:100%; overflow:visible !important;}
.conts .scroll-element_outer,
.conts .scroll-element_outer .scroll-element_size,
.conts .scroll-element_track {width:100%; height:100%;}
.conts .scroll .scroll-element {background:#EBEBF5; border-radius:9em;}
.conts .scroll .scroll-element .scroll-bar {display:block; position:absolute; top:0; left:0; background:#17212D; border-radius:9em; opacity:1;}
.conts .scroll .scroll-element.scroll-x,
.conts .scroll .scroll-element.scroll-y {display:none; position:absolute;}
.conts .scroll .scroll-element.scroll-x.scroll-scrollx_visible,
.conts .scroll .scroll-element.scroll-y.scroll-scrolly_visible {display:block;}

.conts .scroll .scroll-element.scroll-x {left:0; bottom:-.6em; right:0; height:calc((6 / 17) * 1em);}
.conts .scroll .scroll-element.scroll-x .scroll-bar {bottom:0;}
.conts .scroll .scroll-element.scroll-y {top:0; bottom:0; right:-.6em; width:calc((6 / 17) * 1em);}
.conts .scroll .scroll-element.scroll-y .scroll-bar {right:0;}


/************************************
	Event Month Scroll Calendar
************************************/

.monthlyList {display:flex; align-items:center; margin-top:calc((45 / 17) * -1em); padding:calc((20 / 17) * 1em) 0; border-bottom:1px solid #DAE1EC; margin-bottom:calc((90 / 17) * 1em);}
.monthlyList .scroll .scroll-element.scroll-x {bottom:.2em;}
.monthlyList .year {display:flex; align-items:center; justify-content:center; width:calc((224 / 17) * 1em); position:relative; padding-right:calc((20 / 17) * 1em); margin-right:calc((47 / 17) * 1em); flex-shrink:0;}
.monthlyList .year:after {content:""; display:block; position:absolute; width:1px; height:calc((25 / 17) * 1em); background:#000; right:0; top:50%; transform:translateY(-50%);-webkit-transform:translateY(-50%);}
.monthlyList .year select {display:block; position:relative; height:calc((39 / 28) * 1em); font-size:calc((28 / 17) * 1em); font-family:'RiaSans',sans-serif; color:#17212D; font-weight:400; padding-right:1.1em; font-weight:800; color:#17212D; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:transparent url(../img/main/ico_select.svg) no-repeat top 50% right 0 / 12px auto; border:0; cursor:pointer;}
.monthlyList .year select::-ms-expand {display:none;}
.monthlyList .year select option {font-size:calc((18 / 28) * 1em);}
.monthlyList .month {display:block; position:relative; flex-grow:1; padding:0 calc((13 / 17) * 1em); margin:-1em 0; overflow:hidden;}
.monthlyList .month ul {display:flex; align-items:center; justify-content:space-between; width:calc((1300 / 17) * 1em); padding:1em 0;}
.monthlyList .month li {display:block; position:relative;}
.monthlyList .month button {display:block; position:relative; width:calc((90 / 17) * 1em); height:calc((90 / 17) * 1em); border-radius:5px; border:1px solid #DAE1EC;}
.monthlyList .month button .selected {display:none; position:absolute; top:0; left:0; width:0; height:0; text-indent:-999px; overflow:hidden; z-index:-9999; opacity:0;}
.monthlyList .month button span {display:block; font-size:calc((16 / 17) * 1em); color:#7F899C; margin-bottom:4px;}
.monthlyList .month button strong {display:block; font-size:calc((20 / 17) * 1em); color:#17212D; font-weight:600; font-family:'RiaSans',sans-serif;}
.monthlyList .month button.on {background:#17212D; border-color:#17212D; box-shadow:0 calc((20 / 17) * 1em) calc((25 / 17) * 1em) 0 rgba(17,43,98,.05);}
.monthlyList .month button.on .selected {display:block;}
.monthlyList .month button.on span,
.monthlyList .month button.on Strong {color:#fff;}
.monthlyList .month button.on span {opacity:.8;}

@media all and (max-width:1024px) {
	.monthlyList {display:block; margin-bottom:3em;}
	.monthlyList .year {display:block; margin:0 0 1.5em; padding:0; width:auto;}
	.monthlyList .year select {width:100%; text-align:center; background-position-x:90%;}
	.monthlyList .year:after {display:none;}
	.monthlyList .month {margin:0;}
	.monthlyList .month ul {padding:1em .5em;}
}

.eventList {display:flex; flex-wrap:wrap; justify-content:space-between; font-size:calc((20 / 17) * 1em);}
.eventList > li {display:block; position:relative; width:49%; margin-bottom:2em;}
.eventList .no_data {width:100%; border-bottom:1px solid #DAE1EC; padding:5.5em 1em; text-align:center;}
.eventList .no_data:before {content:""; display:block; position:relative; height:3.15em; background:url(../img/common/img_no_data.png) no-repeat 50% 50% / contain; margin:0 auto 1.85em;}
.eventList .no_data span {display:block; font-size:.9em; color:#4B5361;}

.eventList .item {display:flex; align-items:start; justify-content:space-between; position:relative; padding:2.25em; border:2px solid #DAE1EC; border-radius:1em;}
.eventList .item .thumb {display:block; position:relative; width:13.5em; height:19em; background:#F8F8FC url(../img/common/img_no_img.png) no-repeat 50% 50% / 7.75em auto; flex-shrink:0;}
.eventList .item .thumb img {display:block; position:absolute; width:100%; height:100%; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); object-fit:cover; z-index:0;}
.eventList .item .thumb .cate {position:absolute; font-size:.9em; top:1em; left:1em; line-height:calc((35 / 18) * 1em); border-radius:9em; padding:0 1em; background:#333; color:#fff; font-weight:600; z-index:1;}
.eventList .item .thumb .cate.ty1 {background:#D72E65;}
.eventList .item .thumb .cate.ty2 {background:#1462B3;}
.eventList .item .desc {display:block; padding-bottom:2.25em; margin-left:2em; flex-grow:1; width:calc(100% - 15.5em);}
.eventList .item .desc .subj,
.eventList .item .desc dl {position:relative; z-index:1;}
.eventList .item .desc .subj {display: -webkit-box; position: relative; color: #000; font-size: 1.3em; margin-bottom: calc((15 / 26) * 1em); font-weight: 700; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 2.8em;}
.eventList .item .desc dl {display:flex; align-items:start; flex-wrap:wrap; justify-content:space-between;}
.eventList .item .desc dl > * {font-size:.9em; margin-bottom:.556em; color:#4B5361;}
.eventList .item .desc dt {display:flex; align-items:center; width:4.667em; flex-shrink:0; font-weight:600;}
.eventList .item .desc dt:before {content:""; display:block; position:relative; font-size:calc((20 / 18) * 1em); width:1em; height:1em; background:no-repeat 50% 50% / contain; margin-right:.5em;}
.eventList .item .desc dt.date:before {background-image:url(../img/common/ico_date.svg);}
.eventList .item .desc dt.area:before {background-image:url(../img/common/ico_area.svg);}
.eventList .item .desc dt.detail:before {background-image:url(../img/common/ico_desc.svg);}
.eventList .item .desc dd {display:block; position:relative; flex-grow:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:calc(100% - 4.667em);}
.eventList .item .desc dt.detail {width:100%; margin-bottom:calc((15 / 18) * 1em);}
.eventList .item .desc dt.detail + dd {width:100%; white-space:normal; border-radius:calc((15 / 18) * 1em); background:#F8F8FC; padding:calc((12 / 18) * 1em) calc((19 / 18) * 1em); height:calc((170 / 18) * 1em); overflow:hidden; color:#7F899C;}
.eventList .item .more {display:block; position:absolute; top:0; left:0; bottom:0; right:0; border-radius:1em; z-index:0; transition:.3s all; -webkit-transition:.3s all; overflow:hidden;}
.eventList .item a.more span {display:flex; position:absolute; right:0; bottom:0; font-size:.9em; color:#fff; background:#DAE1EC; line-height:1.4em; font-weight:600; align-items:center; padding:1em calc((25 / 18) * 1em); border-top-left-radius:calc((20 / 18) * 1em); transition:.3s background; -webkit-transition:.3s background;}
.eventList .item a.more span:after {content:""; display:block; position:relative; width:calc((13 / 18) * 1em); height:calc((13 / 18) * 1em); margin-left:calc((15 / 18) * 1em); background:url(../img/common/ico_more.svg) no-repeat 50% 50% / contain;}
.eventList .item:hover a.more,
.eventList .item a.more:focus,
.eventList .item a.more:hover {box-shadow:0 1em 1.25em 0 rgba(17, 43, 98, 0.1);}
.eventList .item:hover a.more span,
.eventList .item a.more:focus span,
.eventList .item a.more:hover span {background-color:#17212D;}

@media all and (max-width:1600px) {
	.eventList .item {font-size:.9em; padding:1.8em;}
}
@media all and (max-width:1024px) {
	.eventList > li {width:100%;}
	.eventList .item {font-size:1em;}
}
@media all and (max-width:780px) {
	.eventList .item .thumb {width:10em; height:13em; background-size:4em auto;}
}
@media all and (max-width:600px) {
	.eventList .item .thumb {width:8em; height:11em;}
	.eventList .item .desc {margin-left:1.5em;}
}
@media all and (max-width:540px) {
	.eventList .item {display:block;}
	.eventList .item .thumb {height:auto; width:15em; min-height:8em; max-width:100%; margin:0 auto 1.5em; border-radius:1em; overflow:hidden;}
	.eventList .item .thumb img {position:relative; height:auto; transform:none; -webkit-transform:none; top:auto; left:auto;}
	.eventList .item .desc {margin-left:0; width:100%;}
}