/* Reset */
* {margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; word-break: keep-all;}
html, body {max-width: 100%; min-height: 100%; font-size: 16px;}
html {overflow-x: hidden; -webkit-text-size-adjust: none; scroll-behavior: smooth;}
body {-webkit-print-color-adjust: exact; background: var(--white-color); font-family: 'Pretendard'; font-style: normal; font-weight: 300; color: var(--black-color); line-height: 1.3; letter-spacing: -0.5px; -ms-overflow-style: none; overflow: hidden; scroll-behavior: smooth;}
h1, h2, h3, h4, h5, h6 {font-family: 'Pretendard';}
ul, li, dl,dt,dd {margin: 0; padding: 0; list-style: none;}
a {color: var(--color-666); text-decoration: none;}
img {border: 0; font-size: 0; max-width: 100%;}
table, tr, td {border-collapse: collapse;}
p {word-break: keep-all;}
textarea, select {font-family: 'Pretendard'; font-size: 1em;}
select {min-width: 120px; height: 50px; padding: 10px 40px 10px 20px; border: 1px solid var(--color-ccc); background: var(--white-color) url('../img/ico_select.png') no-repeat center right 18px; appearance: none; border-radius: 0; outline: none; font-size: 16px; font-weight: 400; color: var(--color-666);}
select::-ms-expand {display: none;}
input, button {margin: 0; padding: 0; font-family: 'Pretendard'; font-size: 1em;}
input[type="submit"], button {cursor: pointer;}
input {height: 50px; padding: 10px 15px; border: 1px solid var(--color-ccc); border-radius: 0;}
input[type="text"] {min-width: 200px; font-size: 16px; font-weight: 400; color: var(--color-666);}
input::placeholder {font-size: 16px; font-weight: 400; color: var(--color-666);}
textarea {padding: 10px 15px; border: 1px solid var(--color-ccc);}
fieldset {margin: 0; padding: 0; border: none;}
caption, legend {position: relative; font-size: 0; line-height: 0; height: 0;}
:focus-visible {outline: 2px dashed #ff0000;}

/* Contents Line */
.container {width: 100%; padding-left: 1rem; padding-right: 1rem;}
.wrapper {position: relative; width: 1620px; max-width: 100%; margin: 0 auto;}
.wrapper2 {width: 1280px; max-width: 100%; margin: 0 auto;}

/* Color */
:root {
  --red-color: #CC2733;
  --navy-color: #1F3A74;
  --sub-color: #F1F3FE;
  --black-color: #000000;
  --white-color: #FFFFFF;

  --color-82: #828282;

  --color-333: #333333;
  --color-444: #444444;
  --color-555: #555555;
  --color-666: #666666;
  --color-888: #888888;
  --color-999: #999999;
  --color-bbb: #BBBBBB;
  --color-ccc: #CCCCCC;
  --color-ddd: #DDDDDD;
  --color-eee: #EEEEEE;

  --color-fa: #FAFAFA;
  --color-f0: #F0F0F0;
  --color-f1: #F1F1F1;
  --color-f5: #F5F5F5;
  --color-f7: #F7F7F7;
  --color-f9: #F9F9F9;
  --color-e5: #E5E5E5;
  --color-d9: #D9D9D9;
  --color-b6: #B6B6B6;
}

/* Font */
.f-jalnan {font-family: 'jalnan';}
.f-gmarket {font-family: 'GmarketSans';}
.f-pretendard {font-family: 'Pretendard';}

/* Typography */
h1 {font-size: 3.125rem; font-weight: 800;}
h2 {font-size: 2.5rem; font-weight: 700;}
h3 {font-size: 2.25rem; font-weight: 600;}
h4 {font-size: 1.75rem; font-weight: 500;}
h5 {font-size: 1.25rem; font-weight: 700;}
h6 {font-size: 1rem; font-weight: 700;}

/* Width / Height */
.w-per100 {width: 100%;}
.w-per95 {width: 95%;}
.w-per90 {width: 90%;}
.w-per85 {width: 85%;}
.w-per80 {width: 80%;}
.w-per75 {width: 75%;}
.w-per70 {width: 70%;}
.w-per66 {width: 66.667%;}
.w-per65 {width: 65%;}
.w-per60 {width: 60%;}
.w-per55 {width: 55%;}
.w-per50 {width: 50%;}
.w-per45 {width: 45%;}
.w-per40 {width: 40%;}
.w-per35 {width: 35%;}
.w-per33 {width: 33.333%;}
.w-per30 {width: 30%;}
.w-per25 {width: 25%;}
.w-per20 {width: 20%;}
.w-per15 {width: 15%;}
.w-per10 {width: 10%;}
.w-per5 {width: 5%;}
.w-auto {width: auto;}

.h-per100 {height: 100%;}

/* Round */
.round-per50 {border-radius: 50%;}
.round-100 {border-radius: 6.25rem;}
.round-90 {border-radius: 5.625rem;}
.round-80 {border-radius: 5rem;}
.round-70 {border-radius: 4.375rem;}
.round-60 {border-radius: 3.75rem;}
.round-50 {border-radius: 3.125rem;}
.round-40 {border-radius: 2.5rem;}
.round-30 {border-radius: 1.875rem;}
.round-25 {border-radius: 1.563rem;}
.round-20 {border-radius: 1.25rem;}
.round-15 {border-radius: 0.938rem;}
.round-10 {border-radius: 0.625rem;}
.round-5 {border-radius: 0.313rem;}

/* Align */
.left {text-align: left !important;}
.center {text-align: center !important;}
.right {text-align: right !important;}

/* Sound only */
.sound-only{display: inline-block !important; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;}

/* Text cut */
.text-row1 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.text-row2 {white-space: normal; overflow: hidden; line-height: 1.5; max-height: 3em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.text-row3 {white-space: normal; overflow: hidden; line-height: 1.5; max-height: 4.5em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

/* Overflow */
.ovh {overflow: hidden;}

/* Scroll */
.scroll-lock {overflow: hidden !important;}

/* Column */
.i-col-0{font-size: 0;}
.i-col-1{font-size: 0;}
.i-col-2{font-size: 0;}
.i-col-3{font-size: 0;}
.i-col-4{font-size: 0;}
.i-col-5{font-size: 0;}
.i-col-6{font-size: 0;}
.i-col-7{font-size: 0;}
.i-col-8{font-size: 0;}
.i-col-9{font-size: 0;}
.i-col-10{font-size: 0;}
.i-col-11{font-size: 0;}
.i-col-12{font-size: 0;}

.i-col-0 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: auto;}
.i-col-1 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 100%;}
.i-col-2 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 50%;}
.i-col-3 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 33.333%;}
.i-col-4 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 25%;}
.i-col-5 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 20%;}
.i-col-6 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 16.666%;}
.i-col-7 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 14.285%;}
.i-col-8 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 12.5%;}
.i-col-9 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 11.111%;}
.i-col-10 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 10%;}
.i-col-11 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 9.09%;}
.i-col-12 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 8.333%;}

/* Input : radio */
.radio-item {display: inline-block; vertical-align: top;}
.radio-wrap input[type=radio] {display: none;}
.radio-wrap input[type=radio] + label {display: inline-block; position: relative; padding-left: 36px; font-size: 16px; font-weight: 400; color: var(--color-333); line-height: 1.6; cursor: pointer;}
.radio-wrap input[type=radio]+ label:before {content: ""; display: inline-block; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border: 2px solid var(--color-ddd); border-radius: 50%; z-index: 1;}
.radio-wrap input[type=radio]:checked + label:before {border-color: var(--red-color); background: var(--red-color) url('../img/ico_check.png') no-repeat center center/contain;}

/* Input : checkbox */
.check-item {display: inline-block; vertical-align: top;}
.check-wrap input[type=checkbox] {display: none;}
.check-wrap input[type=checkbox] + label {display: inline-block; position: relative; padding-left: 36px; font-size: 16px; font-weight: 400; color: var(--color-333); line-height: 1.6; cursor: pointer;}
.check-wrap input[type=checkbox]+ label:before {content: ""; display: inline-block; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border: 2px solid var(--color-ddd); border-radius: 50%; z-index: 1;}
.check-wrap input[type=checkbox]:checked + label:before {border-color: var(--red-color); background: var(--red-color) url('../img/ico_check.png') no-repeat center center/contain;}

input[type="radio"]:focus-visible + label::before {outline: 2px solid var(--black-color);}

/* Input : default */
.d-input {border: 1px solid var(--color-ccc); font-size: 15px; font-weight: 500; color: var(--black-color);}
.d-input::placeholder {color: var(--color-82);}
.d-input:read-only {background-color: var(--color-f0);}

.d-select {height: 41px; border: 1px solid var(--color-ccc); font-size: 15px; font-weight: 500; color: var(--black-color);}

.d-textarea {width: 100%; min-height: 200px; border: 1px solid var(--color-ccc); font-size: 16px; font-weight: 400; color: var(--color-666); resize: none;}

/* Button */
.btn {display: flex; align-items: center; justify-content: center; width: 150px; height: 50px; line-height: 50px; border-radius: 10px; font-weight: 400; font-size: 16px; color: var(--white-color); text-align: center; border: none;}
.btn.type01 {background-color: var(--navy-color);}
.btn.type02 {background-color: var(--color-444);}

/* Animate */
.obj-animated{opacity:0;}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@keyframes fadeIn{
  from{opacity:0}
  100%{opacity:1}
}
@keyframes fadeInUp{
  from{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown{
  from{opacity:0;transform:translate3d(0,-100px,0);-webkit-transform:translate3d(0,-100px,0);}
  100%{opacity:1;transform:none;-webkit-transform:none;}
}
@keyframes fadeInLeft{
  /*from{opacity:0;transform:translate3d(100px,0,0);-webkit-transform:translate3d(100px,0,0);}*/
  from{opacity:0;transform:translate3d(50px,0,0);-webkit-transform:translate3d(50px,0,0);}
  100%{opacity:1;transform:none;-webkit-transform:none;}
}
@keyframes fadeInRight{
  from{opacity:0;transform:translate3d(-100px,0,0);-webkit-transform:translate3d(-100px,0,0);}
  100%{opacity:1;transform:none;-webkit-transform:none;}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}

/* Skip navigation */
#skip-nav { position: fixed   ; left: 0; top: -1000px; width: 100%; height: 0px; z-index: 1000; line-height: 0px; font-size: 0px; }
#skip-nav a { display: block; text-align: center; width: 100%; line-height: 0px; font-size: 0px; }
#skip-nav a:focus, #skip-nav a:hover, #skip-nav a:active { position: absolute; left: 0px; top: 1000px; padding: 8px 0; display: block; height: 30px; background: var(--color-333); font-size: 12px; font-weight: bold; line-height: 18px; color: var(--white-color);}

/* Popup */
.pop-wrap {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;}
.pop-back {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5);}
.pop-inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1240px; max-width: calc(100% - 60px); padding: 50px; background-color: var(--white-color); border-radius: 20px;}
.pop-head {padding-bottom: 21px; margin-bottom: 21px; font-size: 18px; font-weight: 500; color: var(--color-333); border-bottom: 2px solid var(--color-888);}
.pop-body {max-height: calc(100vh - 350px); border: 1px solid var(--color-eee); overflow-y: auto;}
.pop-foot {padding-top: 16px; margin-top: 20px; border-top: 1px solid var(--color-ccc); text-align: right;}
.pop-close-btn {width: 150px; line-height: 50px; background: var(--color-444); font-size: 16px; font-weight: 400; color: var(--white-color); border: none; border-radius: 10px;}

/* Main Popup */
.m-popup-pc {display: block; position: relative; z-index: 100;}
.m-popup-item {position:absolute; display: inline-block; vertical-align: middle; max-width: 90%;}
.m-popup-body {max-width: 100%; height: auto;}
.m-popup-body img {display: block;}
.m-popup-ctrl {padding: 2px 7px; background: var(--black-color); overflow: hidden;}
.m-popup-button {padding: 7px 5px; border: none; background: none; font-size: 16px; font-weight: 400; color: var(--white-color);}
.m-popup-today {float: left;}
.m-popup-close {float: right;}

.m-popup-mobile {display: none; position: relative; z-index: 100;}
.m-popup-slider-wrap {position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 500px; max-width: 90%;}
.m-popup-slider {background: var(--white-color);}
.m-popup-slide {}
.m-popup-img {}
.m-popup-img img {display: block; width: 100%;}
.m-popup-pagination.swiper-pagination {bottom: 47px !important;}
.m-popup-pagination .swiper-pagination-bullet {width: 10px; height: 10px;}
.m-popup-pagination .swiper-pagination-bullet-active {background: var(--red-color);}


/***************************************************************/
/**************************** 반응형 ****************************/
/***************************************************************/

@media screen and (max-width: 1800px) {
  /* Contents Line */
  .wrapper {width: 100%; padding-left: 34px; padding-right: 34px;}
}

@media screen and (max-width: 1440px) {
  /* Contents Line */
  .wrapper {padding-left: 14px; padding-right: 14px;}
  .wrapper2 {width: 100%; padding-left: 34px; padding-right: 34px;}
}

@media screen and (max-width: 1024px) {
  /* Contents Line */
  .wrapper {padding-left: 9px; padding-right: 9px;}
  .wrapper2 {padding-left: 25px; padding-right: 25px;}

  /* Pop Up */
  .pop-inner {max-width: calc(100% - 50px); padding: 30px;}
}

@media screen and (max-width: 768px) {
  /* Contents Line */
  .wrapper {padding-left: 0; padding-right: 0;}
  .wrapper2 {padding-left: 0; padding-right: 0;}

  select {height: 45px; padding: 10px; font-size: 14px;}
  input {height: 45px; padding: 10px;}
  input[type="text"] {min-width: 150px; font-size: 14px;}
  input::placeholder {font-size: 14px;}

  /* Input : radio */
  .radio-wrap input[type=radio]+ label:before {width: 18px; height: 18px;}
  .radio-wrap input[type=radio] + label {padding-left: 28px; font-size: 14px; line-height: 1.5;}
  
  /* Input : checkbox */
  .check-wrap input[type=checkbox]+ label:before {width: 18px; height: 18px;}
  .check-wrap input[type=checkbox] + label {padding-left: 28px; font-size: 14px; line-height: 1.5;}

  /* Input : default */
  .d-select {font-size: 14px;}

  /* Button */
  .btn {width: 120px; height: 45px; line-height: 45px; border-radius: 7px; font-size: 14px;}
  
  /* Pop Up */
  .pop-inner {max-width: calc(100% - 32px); padding: 20px; border-radius: 15px;}
  .pop-head {padding-bottom: 10px; margin-bottom: 15px;}
  .pop-foot {padding-top: 13px; margin-top: 13px;}
  .pop-close-btn {width: 120px; line-height: 45px; border-radius: 7px; font-size: 14px;}

  /* Main Popup */
  .m-popup-button {padding: 5px; font-size: 14px;}
  .m-popup-pagination.swiper-pagination {bottom: 40px !important;}
}

@media screen and (max-width: 480px) {
  /* Button */
  .btn {width: 100px;}

  /* Pop Up */
  .pop-inner {padding: 15px;}
  .pop-body {max-height: calc(100vh - 280px);}
  .pop-close-btn {width: 80px; line-height: 35px;}
}