@charset "UTF-8";

:root {
  --main-color: #1e59ff;
}

/* content wrapper */
.content_wrap {position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;scroll-behavior:smooth;transition:padding 0.1s 0.1s ease;padding:270px 0 142px;}
.content_wrap > .content_inner {position:relative;width:100%;max-width:1500px;background:#fff;padding:0 60px;margin:0 auto;}
.content_wrap::-webkit-scrollbar {width:5px;height:5px;}
.content_wrap::-webkit-scrollbar-thumb {background-color:#c1c1c1;}

.content_wrap.scroll_down .roadmap_footer {transform:translateY(42px);}

/* header */
header {position:fixed;top:0;left:0;width:100%;z-index:10;transition:top 0.3s ease;background:#f5f5f5;}

.header_wrap  {position:relative;display:flex;max-width:1500px;align-items:center;justify-content:center;padding:57px 60px;margin:0 auto;}
.header_wrap .title_wrap {position:absolute;top:50%;left:60px;transform:translateY(-50%);}
.header_wrap .title_wrap h1 {position:relative;font-size:40px;font-weight:bold;letter-spacing:-0.03em;padding-left:60px;}
.header_wrap .title_wrap h1:before {content:'';position:absolute;top:5px;left:0;width:50px;height:50px;background-image:url(../images/emoji.svg);background-size:contain;background-position:center;background-repeat:no-repeat;}

/* navigation */
.nav_wrap {border-top:1px solid #ccc;}
.nav_wrap ul {position:relative;display:flex;width:100%;max-width:1500px;padding:0 60px;margin:0 auto;}
.nav_wrap ul li {flex:1 0 auto;}
.nav_wrap ul li a {position:relative;display:flex;align-items:center;justify-content:center;height:70px;font-size:18px;color:#909090;padding:0 12px;}
.nav_wrap ul li a.active {font-weight:bold;}
.nav_wrap ul li a:hover,
.nav_wrap ul li a.active {color:var(--main-color);}
.nav_wrap ul li a:hover:after,
.nav_wrap ul li a.active:after {content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#3166fd;}
.nav_wrap .nav_item .link br {display:none;}

/* content */
.content_wrap section.roadmap {display:none;flex-direction:column;gap:61px;}
.content_wrap section.roadmap.active {display:flex;}

.roadmap_header {display:flex;flex-direction:column;gap:30px;}
.roadmap_header .desc {line-height:25px;font-size:16px;color:var(--main-color);}
.roadmap_header .sub_desc {display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;}
.roadmap_header .sub_desc span {display:inline-block;font-size:18px;font-weight:normal;letter-spacing:-.3px;}
.roadmap_header .sub_desc .label {flex-grow:0;flex-shrink:0;height:31px;line-height:31px;color:#fff;background-color:var(--main-color);border-radius:50px;padding:0 16px;}
.roadmap_header .sub_desc .txt {flex:1;line-height:27px;color:#1e1e1e;}

.roadmap_content {display:flex;flex-direction:column;gap:1px;border-top:3px solid var(--main-color);}
.roadmap_content .cont_header {display:grid;grid-template-columns:98px 1fr 1fr;gap:1px;}
.roadmap_content .cont_header li {height:52px;line-height:52px;font-size:18px;color:var(--main-color);font-weight:bold;letter-spacing:-.3px;text-align:center;background-color:#f5f5f5;}

.roadmap_content .cont_list {display:flex;flex-direction:column;gap:1px;}
.roadmap_content .cont_list .cont_item {display:grid;grid-template-columns:98px 1fr 1fr;gap:1px;}
.roadmap_content .cont_list .cont_item .tit_wrap {display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;font-weight:bold;background-color:var(--main-color);}

.roadmap_content .cont_list .cont_item .txt_wrap,
.roadmap_content .cont_list .cont_item .link_wrap {background-color:#c4e6ff;padding:20px;}
.roadmap_content .cont_list .cont_item .txt_wrap .box,
.roadmap_content .cont_list .cont_item .link_wrap a {height:100%;line-height:25px;font-size:16px;color:#1e1e1e;font-weight:normal;letter-spacing:-.3px;background-color:#fff;padding:20px;}
.roadmap_content .cont_list .cont_item .txt_wrap .box em {font-weight:bold;}

.roadmap_content .cont_list .cont_item:nth-child(odd) .txt_wrap,
.roadmap_content .cont_list .cont_item:nth-child(odd) .link_wrap {background-color:#ddefff;}

.roadmap_content .cont_list .cont_item .link_wrap {display:grid;grid-template-rows:repeat(1fr);gap:10px;}
.roadmap_content .cont_list .cont_item .link_wrap a {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;}
.roadmap_content .cont_list .cont_item .link_wrap a:hover {border:1px solid #b2bcc5;}
.roadmap_content .cont_list .cont_item .link_wrap a .label {display:inline-block;height:20px;line-height:18px;font-size:13px;color:var(--main-color);font-weight:normal;letter-spacing:-.3px;border:1px solid var(--main-color);border-radius:15px;padding:0 10px;}
.roadmap_content .cont_list .cont_item .link_wrap a .txt {display:block;line-height:25px;font-size:16px;color:#1e1e1e;font-weight:normal;letter-spacing:-.3px;text-align:center;}

/* footer */
.roadmap_footer {position:fixed;flex-shrink:0;bottom:0;left:0;width:100%;height:42px;transition:transform 0.12s ease-out;}
.roadmap_footer::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#eee;}
.roadmap_footer .logo {position:relative;width:100%;max-width:1540px;height:100%;background:url(../images/logo.png) right 20px center no-repeat;background-size:130px;margin:0 auto;}

@media screen and (max-width: 1200px) {
  .header_wrap {justify-content: space-between;padding:51px 30px;}
  .header_wrap .title_wrap {position:static;transform:translateY(0);}

  .nav_wrap ul {white-space:nowrap;overflow-x:auto;padding:0 30px;}
  .nav_wrap ul::-webkit-scrollbar {width:5px;height:5px;}
  .nav_wrap ul::-webkit-scrollbar-thumb {background-color:#c1c1c1;}
  .nav_wrap ul li .link {padding:0 12px;}

  .content_wrap > .content_inner {padding:0 30px;}
}

@media screen and (max-width:768px) {
  .header_wrap {padding:20px;}
  .header_wrap .title_wrap h1 {font-size:21px;padding-left:40px;}
  .header_wrap .title_wrap h1:before {top:0;width:30px;height:30px;}

  .nav_wrap ul {overflow-x:auto;white-space:nowrap;padding:0 20px;}
  .nav_wrap ul::-webkit-scrollbar {width:5px;height:5px;}
  .nav_wrap ul::-webkit-scrollbar-thumb {background-color:#c1c1c1;}
  .nav_wrap ul li .link {height:45px;min-height:45px;font-size:13px !important;}

  .roadmap_header .sub_desc {flex-direction:column;}

  .content_wrap {padding:156px 0 60px 0;}

  .roadmap_content {overflow-x:auto;}
  .roadmap_content .scroll_wrap {width:200vw;}

  .roadmap_footer {height: 40px;}
  .roadmap_footer .logo {background-image: url(../images/logo_m.png);background-size: 100px;}
}

@media screen and (max-width: 412px) {
  .content_wrap {padding-top:180px;}
  .content_wrap > .content_inner {padding:0 20px;}
}