@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

*, *:after, *:before {margin:0; padding:0; box-sizing:border-box}

html {overflow:auto}
html, body {width:100%; height:100%}
body {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 350;
  font-size: 14px;
  margin: 0;
  padding: 0;
  color: #181c32;
  letter-spacing: -0.25px;
  background-color: #fff;
  position: relative;
}

body, div, font, form, h1, h2, h3, h4, h5, h6, html, i, label, li, p, pre, span, ul {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent}

ul, li {list-style:none}
button:focus, li:focus, textarea:focus {outline:0 none}
button {font-family:'Noto Sans KR', sans-serif; width:32px; height:32px; color:#fff; font-size:13px; font-weight:400; letter-spacing:-.25px; background-color:#C2C9D3; border:none; border-radius:.42rem; cursor:pointer}
button i.feather {color:#fff; font-size:1.123rem; line-height:2.2}
button:hover {background-color:#ACB5C2; color:#fff}
button:hover i.feather {color:#fff}
textarea {font-family:'Noto Sans KR', sans-serif; font-size:14px; font-weight:350; line-height:32px; width:100%; padding:32px 0; border:none; resize:none; word-break:keep-all}
a {text-decoration:none; color:#181c32; font-weight:400}
a:hover {color:#1D81FA; cursor:pointer}

/* ============================================================== main page ======================================================================================= */
#main-view {position:relative; width:100%; height:100vh; background-color:#fff}
#main-view .header {display:flex; align-items:center; justify-content:center; height:200px}
#main-view .header h1 {font-weight:900}
#main-view .container {position:relative; display:flex; justify-content:flex-start; align-items:center; flex-direction:column; width:100%; padding-bottom:40px}
.flag-wrapper {position:relative; display:flex; justify-content:center; align-items:center; flex-direction:column; width:88%}
.collapsible {width:100%; margin-bottom:10px}
.collapsible .collapse-header {width:100%; height:56px; padding:0 24px; background-color:#F1F1F1; color:#181c32; font-weight:500; text-align:left; cursor:pointer}
.collapsible .collapse-content {position:relative; display:none; max-height:0; margin-top:5px; background-color:#fff; font-size:14px; text-align:center; letter-spacing:.25px; transition:max-height 0.2s ease-out}
.collapse-content ul {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; padding:12px 0}
.collapse-content li {width:25%; padding:12px}
.collapse-content li:hover {color:#1D81FA; font-weight:400; cursor:pointer}
.arrow {position:relative; float:right; height:8px; width:8px}
.arrow::before, .arrow::after {content:""; position:absolute; bottom:-5px; width:0.15rem; height:100%; transition:all 0.5s}
.arrow::before {left:-1px; transform:rotate(-45deg); background-color:#181c32}
.arrow::after {left:4px; transform:rotate(45deg); background-color:#181c32}
.active .arrow::before {left:-1px; transform:rotate(45deg)}
.active .arrow::after {left:4px; transform:rotate(-45deg)}


/* ============================================================== content page ======================================================================================= */
main {position:relative; overflow:auto; height:100%}
#page-container .header-content, #page-container .container {width:88%; max-width:1502px; margin:0 auto}

#page-container {position:relative; display:flex; flex-direction:column}
#page-container .container {position:relative; display:flex; flex:1; margin-top:76px}

/* header */
#main-header {position:fixed; top:0; width:100%; height:76px; background:#fff; border-bottom:1px solid rgba(0,0,0,.1); z-index:100}
.header-content {position:relative; display:flex; justify-content:space-between; align-items:center; height:100%; margin:auto}
.header-content .left, .header-content .right {display:flex; flex:0 auto}
.header-content h1 {font-size:22px; font-weight:900; text-align:center; line-height:1.25; letter-spacing:-0.5px}
button.go-main img {vertical-align:middle}

/* mobile-nav */
#mobile-nav-bar {display:none; margin-right:10px; margin-top: 4px;}
span.mobile-nav-toggle {display:inline-block; cursor:pointer}

#mobile-nav {position:fixed; left:-100%; top:76px; width:100%; height:100%; visibility:visible; opacity:1; background:#fff; z-index:100; transition: left .3s ease-in-out}
#mobile-nav.open {left:0}
.mobile-nav {width:88%; height:100%; margin:0 auto; padding:25px 0}
.mobile-nav ul.items li {display:block; min-height:44px; padding:10px 34px; color:#181c32; border-bottom:1px solid rgba(0,0,0,.03); cursor:pointer}
.mobile-nav ul.items li:hover {background-color:rgba(0,0,0,.03); opacity:.7}
.mobile-nav-top {position:relative; display:flex; justify-content:flex-start; align-items:center; height:88px}

/* tab */
.tab-menu {position:fixed; width:340px; height:100%; padding:32px 0; background:#F7F7F7}
ul.tabs {padding:0px}
ul.tabs li {display:flex; align-items:center; height:70px; padding:0 1.4rem 0 1.7rem; border-right:3px solid transparent; cursor:pointer}
ul.tabs li:hover {background-color:rgba(0,0,0,.03)}
ul.tabs li.active {color:#181c32; font-weight:500; background-color:rgba(0,0,0,.05); border-color:#1D81FA}
.tab-content {position:relative; width:100%; height:100%; margin-left:340px; padding:24px 0 40px 36px}
.tab-content .title {color:#1D81FA; font-weight:900}
.tab-content .title:not(:first-of-type) { display:block; border-top-width:1px; border-top-style:solid; margin:40px 0; padding-top:40px; border-color:rgba(0,0,0,0.12)}[data-tab-content] {display:none; height:100%; line-height:34px}
[data-tab-content] {display:none; height:100%; line-height:34px}
.active[data-tab-content] {display:block}
.divider {display:block; border-top-width:1px; border-top-style:solid; margin:40px 0; border-color:rgba(0,0,0,0.12)}

/* tooltip */
[data-tooltip-text]:hover {
	position: relative;
}

[data-tooltip-text]:after {
	-webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
	-moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
	transition: bottom .3s ease-in-out, opacity .3s ease-in-out;

	background-color: #fff;

  -webkit-box-shadow: 0 0 50px 0 rgba(82,63,105,.20);
	-moz-box-shadow: 0 0 50px 0 rgba(82,63,105,.20);
	box-shadow: 0 0 50px 0 rgba(82,63,105,.20);

  color: #181c32;
	font-size: 12px;
  font-weight: 350;
	margin-bottom: 10px;
	padding: 7px 12px;
	position: absolute;
  width: auto;
	min-width: 50px;
	max-width: 300px;
  white-space: nowrap;
	word-wrap: break-word;

	z-index: 9999;

	opacity: 0;
	left: -9999px;
  top: 90%;

	content: attr(data-tooltip-text);
}

[data-tooltip-text]:hover:after {
	top: 130%;
	left: -200%;
	opacity: 1;
}



/* responsive */
@media (max-width: 980px) {
  #mobile-nav-bar {
    display: block;
  }

  .tab-menu {
    display: none;
  }

  .tab-content {
    margin-left: 0;
    padding: 24px 0 !important;
  }

  [dir="rtl"] .tab-content {
    margin-right: 0 !important;
  }

  .header-content h1 {
    font-size: 18px;
  }
}

@media (max-width: 1000px) {
  .collapse-content li  {
    width: 33%
  }

  #main-view .header {
    height: 140px;
  }
}

@media (max-width: 800px) {
  .collapse-content li  {
    width: 50%;
  }
}

@media (max-width: 600px) {
  .collapse-content li  {
    width: 100%;
  }
}

@media (min-width: 980px) {
  #mobile-nav {
    display: none!important;
  }
}

/* notice list */
.notice-tabs:first-child {
    border-top: 1px solid#dddddd;
    margin-top: 10px;
}

.notice-tabs {
    position: relative;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 1px solid#dddddd;
}

.notice-tabs::before {
    display: inline-block;
    margin: 0 5px;
}

.notice-tabs.on>span {
    font-weight: bold;
}

.notice-content {
    display: none;
    overflow: hidden;
    background-color: #F9F9F9;
    padding: 10px 0;
}

.notice-content::before {
    display: inline-block;
    font-weight: bold;
    color: #F9F9F9;
    margin: 0 5px;
}

[dir="ltl"] .arrow-wrap {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translate(0, -50%);
}

[dir="rtl"] .arrow-wrap {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translate(0, -50%);
}

.notice-tabs .arrow-top {
    display: none;
}

.notice-tabs .arrow-bottom {
    display: block;
}

.notice-tabs.on .arrow-bottom {
    display: none;
}

.notice-tabs.on .arrow-top {
    display: block;
}

[dir="ltl"] .notice-title {
    padding-left: 20px;
    width: max-content;
    max-width: 50%;
    word-break: break-all;
}

[dir="rtl"] .notice-title {
    padding-left: 20px;
    width: max-content;
    max-width: 50%;
    word-break: break-all;
    padding-right: 20px;
}

[dir="ltl"] .notice-date {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translate(0, -50%);
}

[dir="rtl"] .notice-date {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translate(0, -50%);
}

.notice-data-service-item {
    padding-left: 20px;
}

.release-history-divider {
  text-align: right;
}

@media (max-width: 600px) {
    .notice-title {
        padding-left: 20px;
        width: max-content;
        max-width: 100%;
        word-break: break-all;
    }

    .notice-date {
        position: relative;
        top: 150%;
        right: 0px;
        transform: translate(0, -50%);
        text-align: right;
    }
}