@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&display=swap');

body {font-family: 'Noto Sans KR', sans-serif;}
.alt-font {font-family: 'Montserrat', sans-serif; font-weight: 500;}
.roboto-font {font-family: 'Roboto', sans-serif;}
p {color: #666;}
/*  */
section {
  padding: var(--spacing-section-large) 0;
}

.section-heading {
  margin-bottom: var(--section-heading-margin);
  text-align: center;
}

.section-heading h5 {
  padding-bottom: 20px;
  margin-bottom: 30px;
  position: relative;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif; 
  font-weight: 700;
}

.section-heading h5::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 2px;
  background-color: #f7d23d;
}

/*  */
h1, h2, h3, h4, h5, h6 {padding:0; letter-spacing: 0;}
h1 {font-size:70px; line-height: 70px;}
h2 {font-size:55px; line-height:60px}
h3 {font-size:48px; line-height:54px}
h4 {font-size:40px; line-height:46px}
h5 {font-size:32px; line-height:40px}
h6 {font-size:25px; line-height:30px}

/* text size */
.text-extra-small {font-size:11px; line-height:14px}
.text-small {font-size:12px; line-height:20px}
.text-medium {font-size:16px; line-height:23px}
.text-large {font-size:18px; line-height:26px}
.text-extra-large {font-size: 20px; line-height:26px}
.title-large {font-size: 100px; line-height:95px}
.title-extra-large {font-size: 130px; line-height:120px}

/* text color */
.text-white {color:#FFF}
.text-black {color:#000}
.text-extra-dark-gray {color:#232323}
.text-dark-gray {color:#626262}
.text-extra-medium-gray {color:#757575}
.text-medium-gray {color:#939393}
.text-extra-light-gray {color:#b7b7b7}
.text-light-gray {color:#d6d5d5}
.text-very-light-gray {color:#ededed}
.text-deep-pink {color:#ff214f}
.text-yellow {color:#f7d23d;}

.font-weight-100 {font-weight:100}
.font-weight-200 {font-weight:200}
.font-weight-300 {font-weight:300}
.font-weight-400 {font-weight:400}
.font-weight-500 {font-weight:500}
.font-weight-600 {font-weight:600}
.font-weight-700 {font-weight:700}
.font-weight-800 {font-weight:800}
.font-weight-900 {font-weight:900}


@media (max-width: 1199px) {
  h1 {font-size:65px; line-height: 65px;}
  h2 {font-size:50px; line-height:55px}
  h3 {font-size:42px; line-height:48px}
  h4 {font-size:35px; line-height:41px}
  h5 {font-size:27px; line-height:32px}
  h6 {font-size:22px; line-height:27px}
  
}


@media (max-width: 991px) {
  h1 {font-size:57px; line-height: 58px;}
  h2 {font-size:43px; line-height:48px}
  h3 {font-size:36px; line-height:41px}
  h4 {font-size:30px; line-height:35px}
  h5 {font-size:24px; line-height:30px}
  h6 {font-size:22px; line-height:26px}
  
  .title-large {font-size: 70px; line-height:65px}
  .title-extra-large {font-size: 100px; line-height:95px}
  .percent {line-height: 125px;}
  
}

@media (max-width: 767px) {
  h1 {font-size:37px; line-height: 42px;}
  h2 {font-size:30px; line-height:36px}
  h3 {font-size:28px; line-height:34px}
  h4 {font-size:24px; line-height:30px}
  h5 {font-size:20px; line-height:28px}
  h6 {font-size:18px; line-height:23px}
  
  .page-title-large h1 {font-size: 35px; line-height: 35px;}
  .page-title-medium h1 { font-size: 25px; line-height: 30px;}
  .title-large {font-size: 38px; line-height:44px}
  .title-extra-large {font-size: 35px; line-height:40px}

}


/* BACKGROUND */
.cover-background {
	overflow: hidden !important;
	position: relative !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.fix-background {
  overflow: hidden;
  position: relative;
  background-size: cover;
  animation-duration: 0s;
  animation-fill-mode: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-animation-duration: 0s;
  -webkit-animation-fill-mode: none;
  -moz-animation-duration: 0s;
  -moz-animation-fill-mode: none;
  -ms-animation-duration: 0s;
  -ms-animation-fill-mode: none;
  -o-animation-fill-mode: none;
}


/* gap */
.gap-5 {gap: 5px;}
.gap-10 {gap: 10px;}
.gap-15 {gap: 15px;}
.gap-20 {gap: 20px;}
.gap-25 {gap: 25px;}
.gap-30 {gap: 30px;}
.gap-35 {gap: 35px;}
.gap-40 {gap: 40px;}

.gap-y-5 {gap: 5px 0;}
.gap-y-10 {gap: 10px 0;}
.gap-y-15 {gap: 15px 0;}
.gap-y-20 {gap: 20px 0;}
.gap-y-25 {gap: 25px 0;}
.gap-y-30 {gap: 30px 0;}
.gap-y-35 {gap: 35px 0;}
.gap-y-40 {gap: 40px 0;}
.gap-y-45 {gap: 45px 0;}
.gap-y-50 {gap: 50px 0;}
.gap-y-55 {gap: 55px 0;}
.gap-y-60 {gap: 60px 0;}

.gap-x-5 {gap: 0 5px;}
.gap-x-10 {gap: 0 10px;}
.gap-x-15 {gap: 0 15px;}
.gap-x-20 {gap: 0 20px;}
.gap-x-25 {gap: 0 25px;}
.gap-x-30 {gap: 0 30px;}
.gap-x-35 {gap: 0 35px;}
.gap-x-40 {gap: 0 40px;}

.accordion-item .accordion-title {
  position: relative;
  border-bottom: 1px solid #e4e4e4;
}

.accordion-item .accordion-title i {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.accordion-item .accordion-title h6 {
  padding: 18px 0;
  padding-right: 30px;
  font-weight: 500;
  color: #232323;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.accordion-item .accordion-content {
  padding: 25px 10px;
  background: #f9f9f9;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
  color: #666;
}

.tab-menu .tab-list {
  display: flex;
  -ms-flex-pack: center!important;
  justify-content: center!important;
}
.tab-menu .tab-list > li {
	padding: 10px;
	cursor: pointer;
}
.tab-menu .tab-list > li.active {background-color: #f1f1f1;}
.tab-menu .tab-content {display: none;}
.tab-menu .tab-content.active {display: block;}