@charset "utf-8";

/*----------------------------------------
TEMPLATE - all menu
----------------------------------------*/
/* all menu */
.mask {
  z-index: 100;
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--black);
  opacity: .5;
  cursor: pointer;
}

.all__menu--wrap {
  z-index: 101;
  position: absolute;
  display: none;
  width: 100%;
  height: auto;
  top: 0px;
  left: 0;
  background-color: var(--white);
  padding: 2rem 5rem 3rem;
}

.all__menu--title {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid;
  border-color: var(--border-color);
}

.all__menu--title h2 {width: 100%;  text-align: center;}

.all_depth1 {display: block;  width: 100%;}

.all_depth1_item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.all_depth1_item>a {
  display: block;
  padding: 1rem;
  background-color: var(--bg-color);
  border-bottom: 1px solid;
  border-color: var(--border-color);
  font-size: 1.35rem;
  margin-bottom: 0;
}

.all_depth1_item>a:hover {color: inherit;}

.all_depth2 li a {
  display: block;
  padding: 1rem 2rem;
  border-bottom: 1px solid;
  border-color: var(--border-color);
}

.all_depth2 li a:active,
.all_depth2 li a:focus,
.all_depth2 li a:hover {color: var(--first-color);}

.all_depth3 ul   {display: none;}
.all_depth3 li a {display: block;  padding: 1rem 3rem;}

.close_all__menu i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  width: 2.5rem;
  height: 2.5rem;
}

/* mobile menu */
.mobiel__menu--util {display: none;}
.mobiel__menu--top  {display: none;}

@media (max-width: 991.98px) {
  .pc-only {display: none;}

  /* all menu */
  .all_depth1_item>a:hover {background: var(--first-color);  color: var(--white);}
  .all_depth2 li a:hover {color: var(--first-color);}

  .depth1.on {background: var(--first-color);  color: var(--white);}
  .depth1.on:hover {color: var(--white);}

  /* all__menu--wrap */
  .all__menu--wrap {
    position: fixed;
    top: 0;
    left: auto;
    bottom: 0;
    right: 0;
    width: 55%;
    height: auto;
    padding: 0;
  }

  .mobiel__menu--top {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin: auto 1.5rem;
    min-height: 5rem;
  }

  .mobiel__menu--top h1 {font-size: 1.35rem;}

  .mobiel__menu--util {
    display: block;
    background-color: var(--bg-color);
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--border-color);
    padding: 1rem;
  }

  .mobiel__menu--util ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
  }

  .mobiel__menu--util li::before {
    content: "";
    display: inline-block;
    background-color: var(--black);
    opacity: .2;
    width: 1px;
    height: 12px;
    margin: 0 1rem;
  }

  .mobiel__menu--util li:nth-child(1)::before {display: none;}

  .mobiel__menu--util li a {font-size: .95rem;  font-weight: 700;}

  /* mobile__menu */
  .btn__allmenu i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 575.98px) {
  /* all menu */
  .all__menu--wrap {width: 80%;}
}

@media (min-width: 992px) {
  .all_depth1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .all_depth1_item {
    display: block;
    width: 25%;
    padding: 0 .5rem;
    margin-bottom: 3rem;
    box-sizing: border-box;
  }

  .all_depth1_item>a {
    display: block;
    margin-bottom: 1rem;
    color: var(--white);
    background-color: var(--first-color);
    border-radius: .5rem;
    text-align: center;
  }

  .all_depth1_item>a:hover {color: var(--white);}

  .all_depth2 li {padding-left: 1rem;}

  .all_depth2 li a {
    display: inline-block;
    padding: .25rem 0;
    position: relative;
    font-size: 1.2rem;
    font-weight: 500;
    border: none;
  }

  .all_depth2 li a:active,
  .all_depth2 li a:focus,
  .all_depth2 li a:hover {color: var(--first-color);}

  .all_depth2 li :before {
    display: block;
    content: '';
    width: 3px;
    height: 19px;
    position: absolute;
    left: -15px;
    top: 50%;
    margin-top: -10px;
    background-color: var(--first-color);
  }

  .all_depth3 li a {
    position: relative;
    padding: .25rem 0;
    font-size: 1.075rem;
    opacity: .8;
  }

  .all_depth3 li a:before {display: none;}
}


/*----------------------------------------
TEMPLATE 1 - header
----------------------------------------*/
header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  min-height: 6.25rem;
}

header .logo {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
}

header .logo h1 {
  font-size: clamp(1.075rem, 0.8405rem + 1.1724vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.05rem;
  color: var(--text-color);
  opacity: .8;
}

header .logo h1 img {max-height: 3.5rem;}

header .header_right {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: flex-end;
  min-height: 80px;
}

/* util menu */
header .util__menu {
  position: relative;  
  /* font-size: .95rem; */
}
header .util__menu li {display: inline-flex;  padding: 0 .5rem;}
header .util__menu li a:hover {color: var(--black);  opacity: 1;  font-weight: 700;}
header .util__menu li button:hover {color: var(--black);  opacity: 1;  font-weight: 700;}
header .util__menu li button {font-size: .95rem;  font-weight: 500;  padding: 0rem;}

/* main_menu */
header .main_menu a {font-size: 1.35rem;  padding: .75rem 1rem;  font-weight: 500;}
header .main_menu a:active,
header .main_menu a:focus,
header .main_menu a:hover {color: var(--first-color);  text-decoration: none;}

header .main_menu>ul {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

header .main_menu>ul>li {position: relative;  display: inline-block;}
header .main_menu>ul>li::after {
  content: "";
  display: inline-block;
  background-color: var(--black);
  opacity: .2;
  width: 1px;
  height: 15px;
}

header .main_menu>ul>li:nth-last-child(1) a {padding-right: .5rem;}
header .main_menu>ul>li:nth-last-child(1)::after {display: none;}

.submenu {
  position: absolute;
  display: none;
  width: 10rem;
  margin-top: .5rem;
  background-color: var(--white);
  border: solid 1px;
  border-color: var(--border-color);
  z-index: 100;
}

.submenu ul {display: block;}

.submenu li {
  box-sizing: border-box;
  border-bottom: solid 1px;
  border-color: var(--border-color);
  margin: 0 .75rem;
}
.submenu li:last-child {border: none;}

.submenu li a {display: block;  font-size: .95rem;  padding: .75em 0;}

@media (max-width: 991.98px) {
  /* util menu */
  header .util__menu {display: none;}

  /* main_menu */
  .main_menu {display: none;}
}


/*----------------------------------------
TEMPLATE 1 - footer
----------------------------------------*/
footer {
  position: relative;
  margin: 1.5rem 0;
  font-size: .95rem;
}

footer hr {
  border-top: 1px solid;
  border-color: var(--border-color);
  margin-top: 0;
  margin-bottom: 0;
}

/* foot-info */
.foot-info .title {
  display: block;
  font-size: 1.075rem;
  font-weight: 700;
  margin-bottom: .25rem;
}

.foot-info span {
  position: relative;
  display: inline-block;
  opacity: .8;
  margin: .25rem 0;
}

.foot-info span a:hover {
  color: var(--black);
  opacity: 1;
  font-weight: 700;
}

.foot-info span::after {
  content: "";
  display: inline-block;
  background-color: var(--black);
  opacity: .2;
  width: 1px;
  height: 11px;
  margin: 0 .75rem 0 1rem;
}

.foot-info span:last-child::after {display: none;}

.foot-info .use {text-align: right;}
.foot-info .use span::after {margin: 0 .5rem 0 .75rem;}

/* site-info */
.site-info {position: relative;}
.site-info .copyright {font-size: .85rem;  opacity: .7;}
.site-info .copyright span {text-transform: uppercase;}
.site-info .by {font-size: .7rem;  font-weight: 300;  opacity: .5;}

@media (max-width: 991.98px) {
  /* foot-info */
  .foot-info address span.add {display: block;}
  .foot-info address span.add::after {display: none;}
}

@media (max-width: 575.98px) {
  /* foot-info */
  .foot-info address span {display: block;}
  .foot-info address span::after {display: none;}
}


/*----------------------------------------
TEMPLATE 1 - main layout
----------------------------------------*/
main {
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: var(--border-color);
  background-color: var(--bg-color);
}

section {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* Background Image - square dots */
.back-img {
  width: 100%;
  min-height: 250px;
  z-index: 1;
  position: absolute;
  background-color: #b5b8c3;
}

.back-img::after {
  width: 100%;
  height: 100%;
  content: "";
  background: url("https://cdn.hakjisa.site/ws/img/dev/v1-bg.png");
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: .25;
}

/* Background */
.main-bg {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

/* Carousel buton */
.carousel-inner {height: 22rem;}

.carousel-inner .carousel-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));
}

.carousel-indicators {
  left: auto;
  margin-right: 2rem;
  margin-left: 2rem;
  margin-bottom: 1rem;
}

.carousel-indicators li {width: 1.5rem;}

.carousel-control-prev,
.carousel-control-next {display: none;}

.carousel-caption {left: 2.5rem;  text-align: left;}

.carousel-caption h5 {
  font-size: clamp(1.5rem, 1.2241rem + 1.3793vw, 2rem);
  font-weight: 500;
  margin-bottom: .5rem;
}

.carousel-caption p {
  font-size: clamp(1rem, 0.8621rem + 0.6897vw, 1.25rem);
  margin-bottom: .5rem;
}

/* login */
.login-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  background-color: var(--first-color);
  padding: 2rem;
}

.login-box .caption {color: var(--white);}

.login-box .caption h2 {
  font-size: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.login-box .caption h3 {
  font-size: .95rem;
  font-weight: 300;
  opacity: .9;
  text-transform: capitalize;
}

/* quick-list */
.quick-list-wrap {display: grid;  margin: .5rem 0;}

.quick-list-wrap a {
  color: #3b5998;
  background-color: #f0f7fe;
  border: 1px solid #d7dfe7;
}
.quick-list-wrap a:hover {color: #3b5998;  background-color: #e6f0fa;}

.quick-list-wrap i {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(1.5rem, 1.0862rem + 2.069vw, 2.25rem);
}

.quick-list-wrap h5 {
  font-size: clamp(1.2rem, 1.1172rem + 0.4138vw, 1.35rem);
  line-height: normal;
  margin-bottom: .25rem;
}

.quick-list-wrap h6 {
  font-size: .85rem;
  font-weight: 400;
  opacity: .75;
  line-height: normal;
}

.quick-list-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0;
}
.quick-list-column div {text-align: center;  margin-top: .5rem;}

.quick-list-row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
}

.quick-info-wrap {
  margin: .5rem 0;
  padding: 1rem 1.5rem;
  color: #4f4249;
  background-color: #fefbf0;
  border: 1px solid #e7e2d7;
  border-radius: .25rem;
}

.quick-info-wrap h6 {font-size: 1.2rem;  margin-bottom: .75rem;}
.quick-info-wrap ul {list-style-type: circle;  margin-left: 1.5rem;  font-size: .95rem;}
.quick-info-wrap li {margin: .5rem 0;}

/* sitelink */
.sitelink {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  padding: .5rem;
  margin: .5rem 0;
  border: solid 1px;
  border-color: var(--border-color);
  background-color: var(--white);
}

.sitelink a {
  display: flex;
  justify-content: center;
  margin: .25rem;
  font-size: .85rem;
  color: var(--gray);
}
.sitelink a:hover {color: var(--first-color);}
.sitelink a img {max-height: 40px;}

@media (min-width: 768px) {
  /* Carousel buton */
  .carousel-indicators li {width: 1rem;  height: 1rem;  border-radius: 50%;}
}

@media (max-width: 991.98px) {
  /* login */
  .login-box {display: none;}

  /* quick-list */
  .quick-list-row {flex-direction: column;  padding: 1.5rem 0;}
  .quick-list-row div {text-align: center;  margin-top: .5rem;}

  /* sitelink */
  .sitelink a {width: calc(100% / 3 - 10px);}
}

@media (max-width: 767.98px) {
  /* Carousel buton */
  .carousel-inner {height: 19.5rem;}
}

@media (max-width: 575.98px) {
  /* Background Image - square dots */
  .back-img {min-height: auto;}

  /* Background */
  .main-bg .row {padding-left: 0;  padding-right: 0;}

  /* Carousel buton */
  .carousel-inner {height: 15rem;}
  .carousel-caption {left: 1.5rem;}

  /* sitelink */
  .sitelink a {width: calc(100% / 2 - 10px);}
}


/*----------------------------------------
TEMPLATE 1 - sub layout
----------------------------------------*/
/* Background */
.sub-bg {position: absolute;  min-height: 330px;}

/* Sub Navigation Bar */
#snb {
  position: relative;
  padding-right: 0;
  z-index: 8;
}

#snb .category {
  padding: 2rem 1.5rem;
  min-height: 330px;
  color: var(--white);
  background-color: var(--first-color);
}

#snb .category h2 {
  font-size: 1.75rem;
  padding-bottom: 1rem;
  margin: 0;
}

/* #snb .category ul {padding-bottom: .5rem;} */
#snb .category li {list-style-type: none;  margin: 0;}
#snb .category li .img_snb_arrow {display: contents;}

#snb .category .m2 {font-size: 1.2rem;}
#snb .category .m2 a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  color: var(--white);
  opacity: .8;
  line-height: 2.25rem;
}

#snb .category .m2 a:hover {
  text-decoration: none;
  color: #fbffbf;
  opacity: 1;
}

#snb .menu2_selected {
  position: absolute;
  display: none;
  top: 0;
  height: 29px;
  line-height: 29px;
  right: 0;
  color: var(--white);
}

#snb .category .m3 {margin-left: 1rem;padding-bottom:1rem}
#snb .category .m3 a {color: var(--white);  font-size: 1rem;  line-height: 1.7;}

#snb .category .selected a {opacity: 1;}
#snb .category .selected a:hover {text-decoration: none;}
#snb .category .selected span.num {color: var(--white);}

/* page wrap */
#sub {
  z-index: 9;
  border-left: 1px solid;
  border-color: var(--border-color);
  padding-left: 0;
}

#sub .page-wrap {
  height: 100%;
  background-color: var(--white);
  border-right: 1px solid;
  border-color: var(--border-color);
  padding: 2rem 2.5rem;
}

.page-title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.page-title h3 {font-size: clamp(1.75rem, 1.4741rem + 1.3793vw, 2.25rem);}

.sub_cont_util {text-align: right;}
.sub_cont_util .location {display: inline-block;  font-size: .95rem;  opacity: .8;}
.sub_cont_util .location a {padding: 0 .25rem;}
.sub_cont_util .location a:hover {color: var(--black);  opacity: 1;  font-weight: 500;}

.page-content {min-height: 25rem;}

@media (max-width: 991.98px) {
  /* Sub Navigation Bar */
  #snb {display: none;}

  /* page wrap */
  .page-title {display: flex;  flex-direction: column;  flex-wrap: nowrap;  align-items: stretch;}
  .sub_cont_util {margin-top: .5rem;}
}

@media (max-width: 575.98px) {
  /* page wrap */
  #sub {padding-right: 0;}
  #sub .page-wrap {border: none;  padding: 2rem 1rem;}
}

/* .page-link {
    color:#727272;
} */