/*
**  자주사용하는 커스컴 CSS
*/
/*-------- 1.1 Typography --------*/
/* rem reference
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem
*/


:root {
  /*----primary-color: #212121;
  --secondary-color:#104cba;
  --border-color: #E5E5E5;
   --foreground-sub-color: #969697;
     --body-background-color: #fff;
  --bg-offwhite-color: #fdfdfd;
  --b_grey2:#b8c8dc;
  --light-grey #f3f6fb;
  --color-1: #ff0071;

 */


 --primary-blue:#004dda;
 --secondary-blue:#0163d2;
 --primary-color:#202026;
 --point-blue:#172bff;


  --border-color: #dde0e3;
   --border-color-1: #ededed;
  --border-color-2: #ddd;
 --borderdark-color:#cfcfd0;

  --bg-light-dark-color: #1a1818;
 --grey-sub-color: #f8f8f8 ;
  --light_blue: #598bfd;

  --bg-black-color: #000000;

  --text-white: #fff;
  --bg-whiite: #fff;


  --b_grey:#99b2cc;

  --thm-black2:#666666;
  --thm-black3:#444444;
  --thm-grey:#d6d6d6;

   --color-1: #ff0071;
  --color-2: #ff001d;
  --color-3: #5db408;
  --color-4: #00a4e4;


  --primary-red:#ED1D24;
  --grey:#e2eaf3;


 
 --purple :#9933cc;

  --yel : #cabc25;
 --green: #32a067;

  --red-2: #fc3333;
  --green2: #3dbf8c;
 --sblue: #06f4e6;


  --open-sans-fonts: "Open Sans", sans-serif;
  --rubik-fonts: "Rubik", sans-serif;
  --inter-fonts: "Inter", sans-serif;
   --noto-fonts:'Noto Sans KR',"Noto Sans Korean", sans-serif;

  --body-font-size: 1.5rem;
  --body-font-weight: 400;
  --mid-font-weight: 500;
  --body-line-height: 2.8rem;
  --headings-weight: 700;
  --transition: all 0.3s ease 0s;
  --container-fluid-offset: 12rem;
/* Border radius */
  --border-radius-none: 0;
  --border-radius-small: 3px;
  --border-radius-medium: 5px;
  --border-radius-large: 10px;
  --border-radius-circle: 50%;


}



/*-------- 1.1 Typography -------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body { background-color: #fff;  
 /*  font-family: Rubik;color:#606269;	font-family:'Noto Sans KR',"Noto Sans Korean", sans-serif; letter-spacing:-0.02em;
font-family: "pretendard", sans-serif;---*/
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	font-style: normal; 
    color: var(--primary-color);
    padding: 0;
    margin: 0; letter-spacing:-0.02em;
    overflow-x: hidden;	
	}

/* Sizes */
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-md { font-size: 16px; }
.text-lg { font-size: 20px; font-weight: 700;}
.text-xl { font-size: 20px;  }

/* Responsive */
@media (max-width: 767px){	
body {font-size: 14px;}
.text-lg { font-size: 16px; }

}


.rounded {
	border-radius: 5px !important;
}
.border-all {
	border: 1px solid #DADADA !important;
}


/*=== >background color ===*/

.bg-transparent { background-color: transparent;}
.bg-light_blue  {background-color:#b8c8dc ;}
.bg-primary {background-color:#e2eaf3;}
.bg-primary_blue{background-color:#004dda;}

.bg-white { background-color: #FFF;}
.bg-black {    background-color: #000;}
.bg-dark2 {    background-color: #15141b;}
.bg-black-light {    background-color: #1C1C1C;}
.bg-gray {    background-color: #F7F9FB;}
.bg-gray2 {    background-color: #f3f6fb;}

.bg-gray3 { background: #E7EDF8;}

.bg-gray-dark {    background-color: #edecff;}
.bg-red {    background-color: #FF4045;}
.bg-green {    background-color: #34bfa3;}
.bg-yellow {    background-color: #ffb822;}
.bg-pink {    background-color: #ff3c85;}
.bg-sky {    background-color: #00c5dc;}
.bg-orange {    background-color: #ef9800;}

.bg-blue { background-color: #0163d2; }

.sky-gradient { background: -webkit-linear-gradient(left,#004dda, #00c5dc);}

.blue-gradient { background: -webkit-linear-gradient(left,#00a4e4, #5db408);}
.red-gradient { background: -webkit-linear-gradient(left,#FF4045, #ff3c85); }
.green-gradient { background: -webkit-linear-gradient(left,#22b14c, #34bfa3); }

.bg-gray {
  background-color: #f9f9f9;
}

.bg-theme-small {
  background-color: #edf5ff;
}

.bg-light {
  background-color: #ffffff;
}

.bg-theme {
  background-color: #bb9225;
}


/* Colors */
.text-primary { color: #0f4fb9; }
.text-secondary { color: #1f1f1f; }
.text-blue { color:#0051a1; }
.text-red { color: #e83231; }
.text-red2 { color: #c40614; }
.text-info { color: #2786c9; }
.text-sky { color: #05c0fd; }
.text-green { color: #22b14c; }

.text-yel { color: #ddcb03; }
.text-yel2 { color: #edae05; }
.text-warning { color: #f19354; }
.text-danger { color: #e74c3c; }
.text-success { color: #8ac04b; }
.text-dark { color: #1f1f1f; }
.text-light { color: #fff; }
.text-grey { color: #9ca2ab; }
.text-grey2 { color: #7a8391; }




/* 영문폰트와 한글폰트 기본Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:400,500,600,700,800&family=Source+Sans+Pro&display=swap');*/

.Mont {font-family: "Montserrat",sans-serif;}
.Poppins{font-family: 'Poppins', sans-serif;}
.op{font-family: 'Open Sans', sans-serif;}




/*-------- 1.2 Structure --------*/

p {
  color: var( --primary-color);
  margin-bottom: 1.5em;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto; }

a {
  color: inherit;
  text-decoration: none;
  color: var( --primary-color);
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s; }

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none;
  color: inherit; }

a:hover {
  color: var(--bg-black-color); }


/*---------------------------------------------------------------
img
---------------------------------------------------------------*/

/* img 기본 설정 중요 및 기본*/
img { border-style: none; height: auto; max-width: 100%;  vertical-align: middle;}

/* class 값을 img로 별도로 줄 때*/
.img {max-width: 100%;transition: all 0.3s ease-out 0s;}

a img, iframe { border: none;}

/*---------------------------------------------------------------
3. TEXT & PARAGRAPH

---------------------------------------------------------------*/


/*---------------------------------------------------------------
2. HEADINGS
--------------------------------------------------------


h2 {
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 25px;
	
}
h3 {
    font-size: 24px;
   line-height: 38px;
    margin-bottom: 28px;
	
}
h4 {
    font-size: 20px;
    line-height:24px;
    margin-bottom:10px;
	
}
h5 {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;

	
}
h6 {
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 0px;
}

h2,h3,h4,h5,h6 {letter-spacing:-0.04em;	
	margin-top: 0px;
	font-style: normal;
	font-weight: 700;
	text-transform: normal;
}

h2 a,h3 a,h4 a,h5 a,h6 a {	color: inherit;}

@media only screen and (max-width: 767px) {

h2 {	
   font-size: 22px;
    line-height: 24px;
    margin-bottom: 0px;
	margin-top: 0px;
	font-style: normal;
	font-weight: 700;
	text-transform: normal;
}


h3,h4,h5 {	
   font-size: 18px;
    line-height: 24px;
    margin-bottom: 10px;
	margin-top: 0px;
	font-style: normal;
	font-weight: 700;
	text-transform: normal;
}

h6 {	
   font-size: 16px;
    line-height: 16px;
    margin-bottom: 0px;
	
}

p {font-size:14px;
  line-height:16px;
  
}

}

-------*/
/*---------------------------------------------------------------
4. LISTS
---------------------------------------------------------------*/

dl,ul,ol {
    list-style-position: outside;
    padding: 0;
}
ul,ol {
    margin-bottom: 24px;
}
ul li,ol li {
    padding: 0;
}
ul, li {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

dl {
    margin-left: 0;
    margin-bottom: 30px;
}
dl dd {
    margin-bottom: 10px;
}

.list-inline > li{
	padding-left:2px;
	padding-right:2px;
	display:inline-block;font-family: 'Montserrat', sans-serif;
}


.bg-cover {
  background-position: center center;
  background-size: cover;
}

.bg-contain {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.bg-fixed {
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
}




/* 메인 및 서브 오버 bg 배경색들 */
.shadow {
  position: relative;
  z-index: 1;
}

.shadow.dark::after {
  background: #082733 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.2;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.dark-hard::after {
  background: #1d2024 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.light::after {
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.theme::after {
  background: #bb9225 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.theme-hard::after {
  background: #bb9225 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}


.default-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

.md-padding {
  padding-top: 60px;
  padding-bottom: 60px;
}


.sm-padding {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Responsive */
@media (max-width: 767px){	
.sm-padding {
  padding-top: 20px;
  padding-bottom: 20px;
}

.md-padding {
  padding-top: 30px;
  padding-bottom: 30px;
}


}


/* --------------------------------------------------------------------------
/* ---마진
/* ----------------------------------------------------------------------------- */
/* Padding */
.p-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

.pt-10 {
  padding-top:10px;
}


.pb-0 {
  padding-bottom: 0;
}

.pb-15 {
  padding-bottom: 1.5rem;
}

.pb-20 {
  padding-bottom: 2rem;
}

/* Section padding */
.section--padding {
  padding-top:30px;
  padding-bottom: 30px;
}

/* Section padding2 */
 .banner--padding  {
  padding-top:10px;
  padding-bottom: 20px;
}


/* Section padding */
.section--main {
  padding-top:40px;
  padding-bottom: 20px;
}

/* Section padding2 */
 .news--padding  {
  padding-top:10px;
  padding-bottom:60px;
}


@media (max-width: 767px) {
.section--padding {
    padding-top:10px;
    padding-bottom:10px;
  }
 .banner--padding  {
    padding-top:10px;
    padding-bottom:10px;
  }
.section--main {
  padding-top:20px;
  padding-bottom: 20px;
}

 .news--padding  {
  padding-top:10px;
  padding-bottom: 20px;
}

}

/* ==========================================================================
   반응형
========================================================================== */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}



@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}


@media (min-width: 769px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}
.visible-print-inline {
  display: none !important;
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}
.visible-print-inline-block {
  display: none !important;
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}