@charset "utf-8";
/* link css */
@import url("font.css");
@import url("main.css");
@import url("sub.css");

/* 기본 베이스 */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
form,
fieldset,
p,
button {
  margin: 0;
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
input,
button,
textarea {
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-style: 400;
}

/* IE 용 스크롤 바 (kison) */
html {
  scrollbar-3dlight-color: #efefef;
  scrollbar-arrow-color: #dfdfdf;
  scrollbar-base-color: #efefef;
  scrollbar-face-color: #dfdfdf;
  scrollbar-track-color: #efefef;
  scrollbar-darkshadow-color: #efefef;
  scrollbar-highlight-color: #efefef;
  scrollbar-shadow-color: #efefef;
  background: #111111;
}

WA ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border: 3px solid #fff;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 10px;
  background: #efefef;
}

::-webkit-scrollbar-track {
  background: #efefef;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  height: 50px;
  width: 50px;
  background: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}

body {
  background: #fff;
  word-break: keep-all;
  -webkit-text-size-adjust: none;
  width: 100%;
  height: 100%;
  line-height: 150%;
  min-width: 300px;
  letter-spacing: -0.25px;
}

img,
fieldset,
iframe {
  border: 0 none;
}

li {
  list-style: none;
}

input,
select,
button {
  vertical-align: middle;
}

img {
  vertical-align: top;
}

i,
em,
address {
  font-style: normal;
}

label,
button,
input[type="button"],
input[type="submit"] {
  cursor: pointer;
}

button {
  margin: 0;
  padding: 0;
}

a {
  color: #363636;
  text-decoration: none;
  cursor: pointer;
}

button * {
  position: relative;
}

button img {
  left: -3px;
  left: auto;
}

html:first-child select {
  height: 20px;
  padding-right: 6px;
}

option {
  padding-right: 6px;
}

hr {
  display: none;
}

legend {
  position: absolute;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  text-indent: -9999em;
  overflow: hidden;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.blind {
  display: block;
  position: absolute;
  top: -9999em;
  left: 0;
}

.skip a {
  display: block;
  position: absolute;
  left: 0;
  top: -9999em;
  z-index: 9999;
  width: 100%;
  background: lime;
  color: black;
  font: 1.8em/3em arial, sans-serif;
}

.skip a:focus {
  top: 0;
}

.ff {
  zoom: 1;
}

.ff:after {
  clear: both;
  content: "";
  display: block;
}

.ff > li {
  float: left;
}

.ff > dd {
  float: left;
}

.ff dt {
  display: block;
  position: absolute;
  top: -9999em;
  left: 0;
}

div {
  position: relative;
}

* {
  box-sizing: border-box;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="image"],
input[type="button"],
input[type="submit"],
textarea,
button {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  outline: none;
}

td,
th {
  display: table-cell;
}

#boxWrapp {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  min-width: 300px;
}

.inputBox {
  padding: 10px;
  height: 43px;
  border: 1px #e1e1e1 solid;
  border-radius: 5px;
  width: 100%;
}

.pdb30 {
  padding-bottom: 30px;
}

.pd20 {
  padding: 0 20px;
}

.noline {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.txt_hidden {
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -99999999px;
}

.sr-only {
  position: absolute;
  top: -999em;
  left: -999em;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: none;
}

/*헤더영역*/
.noScroll {
  overflow: hidden;
}

#header {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 77px;
  background: #fff;
}

#header h1 {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  z-index: 1;
}

#header h1 img {
  width: 210px;
}
#header.active h1 img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(95%) saturate(4930%)
    hue-rotate(-6deg) brightness(95%) contrast(97%);
}
#header .gnb {
  text-align: center;
  height: 77px;
  line-height: 77px;
  background: #fff;
}

#header .gnb ul li {
  padding: 0 25px;
  font-size: 17px;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

#header .gnb ul li ul {
  position: absolute;
  background: #fff;
  border: 1px #e1e1e1 solid;
  top: 76px;
  width: auto;
  border-top: 0px;
  padding: 10px 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 99;
}

#header .gnb ul > li.active > a {
  color: #cf132c;
}

#header .gnb li a.on {
  color: #cf132c;
}

#header .gnb ul li a {
  color: #555;
  height: 77px;
  display: block;
}

#header .gnb ul li a:hover {
  color: #cf132c;
  /*border-bottom:2px #CF132C solid; */
}

#header .gnb ul li ul li {
  display: block;
  padding: 0;
}

#header .gnb ul li ul li a {
  font-size: 14px;
  font-weight: 400;
  height: auto;
  line-height: 30px;
  white-space: nowrap;
}

#header .gnb ul li ul li a:hover {
  text-decoration: underline;
}

#header .m_menu .seach .serchBtn {
  width: 36px;
  height: 36px;
  text-indent: -99999em;
  overflow: hidden;
  background: url(/assets/img/common/seach_img.png) no-repeat;
  display: block;
  border: 0;
}

#header .m_menu .seach .serchBtn.open {
  background: url(/assets/img/common/seach_close.png) no-repeat;
}

#header .m_menu {
  display: flex;
  align-items: center;
  position: absolute;
  right: 50px;
  height: 36px;
  top: 50%;
  margin-top: -18px;
  z-index: 10;
}

#header .m_menu li {
  height: 36px;
  float: left;
  padding-left: 10px;
  position: relative;
}

#header .m_menu li .login_Btn {
  width: 36px;
  height: 36px;
  overflow: hidden;
  display: block;
  border-radius: 90px;
  border: 1px #d7d7d7 solid;
}

#header .m_menu .mymenu ul {
  background: #cf132c;
  width: 120px;
  padding: 0px;
  border-radius: 5px;
  display: none;
  overflow: hidden;
}

#header .m_menu .mymenu .login_Btn {
  border: 0px;
}

#header .m_menu .mymenu .login_Btn img {
  width: 100%;
}

#header .m_menu .active:before {
  content: "";
  display: block;
  position: absolute;
  width: 22px;
  height: 10px;
  background: url(/assets/img/common/triangle_icon.png) no-repeat;
  top: 47px;
  right: 7px;
}

#header .m_menu .active ul {
  display: block !important;
  position: absolute;
  top: 56px;
  right: -20px;
  z-index: 99;
}

#header .m_menu .active ul li {
  float: none;
  line-height: 35px;
  height: auto;
  padding: 0px;
  height: 35px;
  border-bottom: 1px #CF132C solid;
}

#header .m_menu .active ul li:last-child {
  border-bottom: 0;
}

#header .m_menu .active ul li a {
  color: #ebbac0;
  font-size: 14px;
  padding: 0 20px;
  height: 100%;
  display: block;
}

#header .m_menu .active ul li a:hover {
  color: #fff;
  background: #CF132C;
}

#header.main_header {
  background: none;
}

#header.main_header .gnb {
  background: none;
  color: #fff;
  border-bottom: 0;
}

#header.main_header .gnb > ul > li > a {
  color: #fff;
  position: relative;
}

#header.main_header .gnb > ul > li a:before {
  content: "";
  width: 100%;
  position: absolute;
  top: 80%;
  height: 0;
  webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  background: #fff;
}

#header.main_header .gnb > ul > li > a:hover:before {
  height: 2px;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

#header.main_header .m_menu li .login_Btn {
  box-sizing: content-box;
}

#header.main_header .gnb ul li ul {
  top: 62px;
}

/*검색창*/
.search_list {
  width: 100%;
  position: absolute;
  top: 76px;
  left: 0;
  display: none;
  z-index: 2;
}

#header.fix .search_list {
  top: 60px;
}

.search_list.active {
  display: block !important;
}

.search_list .search_wrap {
  width: 100%;
  background: #cf132c;
}

.search_list .search_wrap .wrap {
  width: 1140px;
  margin: auto;
}

.search_list .search_wrap .searchBar {
  padding: 10px 0;
}

.search_list .search_wrap .wrap input {
  width: 90%;
  height: 60px;
  line-height: 60px;
  color: #fff;
  font-size: 27px;
  border: 0;
  background: none;
}

.search_list .search_wrap .wrap .placeholder {
  background: url(/assets/img/common/text_seach.png) no-repeat 0 center;
}

.search_list .search_wrap .btn_seach {
  border: 0;
  background: url(/assets/img/common/seach_img_wr.png) center no-repeat;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 27px;
}

.serch_dimd {
  display: none;
}

.serch_dimd.active {
  display: block !important;
  z-index: 2;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  opacity: 0.8;
  filter: alpha(opacity=80);
  background: #000;
}

.src_option {
  width: 100%;
  background: #fff;
  border-bottom: 1px #e1e1e1 solid;
}

.src_option .wrap {
  width: 1140px;
  margin: auto;
  padding: 20px 0;
}

.src_option .wrap dl dt,
.src_option .wrap dl dd,
.src_option .wrap dl dd li {
  display: inline-block;
}

.src_option .wrap dl dt {
  font-size: 17px;
  font-weight: 700;
  color: #cf132c;
  padding-right: 30px;
}

.src_option .wrap dl dd li {
  position: relative;
  margin-right: 20px;
}

.src_option .wrap dl dd li label {
  padding-left: 15px;
}

.src_option .wrap dl dd li label:after {
  content: "";
  top: -4px;
  left: 0px;
  display: inline-block;
  position: absolute;
  width: 29px;
  height: 29px;
  background: url(/assets/img/common/radio.png) no-repeat;
  z-index: 99;
  background-size: 29px;
}

.src_option .wrap dl dd li input:checked + label:after {
  background: url(/assets/img/common/radio_on.png) no-repeat;
  background-size: 29px;
}

.overlay {
  display: none;
}

.listBtn {
  display: none;
}

@media screen and (min-width: 890px) {
  #boxWrapp .blocker {
    display: none !important;
  }

  #boxWrapp .dimd {
    display: none !important;
  }
}

#container {
  padding: 77px 0 100px 0;
  width: 100%;
  /* overflow: hidden; */
  min-height: 600px;
}

#container.space {
  padding: 64px 0 0px 0;
}

#container.space02 {
  padding: 77px 0 0px 0;
}

#footer {
  width: 100%;
  background: #111111;
  padding: 20px 0;
  font-size: 12px;
  color: #a6a6a6;
}

#footer .foorter_wrap {
  width: 1140px;
  margin: auto;
  font-size: 13px;
  padding: 20px 0;
}

#footer h2 {
  font-weight: 700;
  font-size: 22px;
  padding-bottom: 35px;
  color: #fff;
}

#footer .footer_menu {
  position: absolute;
  right: 0px;
  z-index: 1;
}

#footer .footer_menu span {
  padding-left: 16px;
  font-size: 13px;
}

#footer .footer_menu span a {
  color: #fff;
  display: inline-block;
  text-align: center;
}

#footer .address {
  padding: 0px 0 0 0;
}

#footer .address span {
  padding-right: 20px;
}

#footer .address .copyright {
  font-size: 11px;
  padding-top: 5px;
}

#footer .address a {
  color: #a6a6a6;
}

.TopScroll {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 42px;
  height: 43px;
  z-index: 99;
  transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  opacity: 0;
  display: none;
}

.TopScroll.show {
  opacity: 1;
  filter: alpha(opacity=100);
  display: block;
}

.TopScroll a {
  text-indent: -99999em;
  display: block;
  overflow: hidden;
  width: 42px;
  height: 43px;
  background: url(/assets/img/common/top_btn.png) 0px top no-repeat;
}

.TopScroll a:hover {
  background-position: 0 -42px;
}

.state_red {
  color: #cf132c;
}

/*텍스트 레드*/

/*팝업*/
.basic_info.commnet .commnet_area .control {
  padding-top: 10px;
}

.popup {
  position: absolute;
  width: 100%;
  top: 50%;
  display: none;
}

.popup_body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/*버튼*/

a.BtnGray,
.BtnGray {
  text-align: center;
  font-weight: 600;
  background: #f4f4f4;
  border: 1px #e1e1e1 solid;
  color: #7e8083;
  font-size: 15px;
  width: 100%;
  display: block;
  height: 52px;
  line-height: 52px;
}

a.BtnGray_Dark,
.BtnGray_Dark {
  text-align: center;
  font-weight: 600;
  background: #7e8083;
  border: 1px #707274 solid;
  color: #7e8083;
  font-size: 15px;
  width: 100%;
  display: block;
  height: 52px;
  line-height: 52px;
  color: #fff;
}

a.BtnGray_Dark:hover,
.BtnGray_Dark:hover {
  background: #767575;
}

a.BtnRed,
.BtnRed {
  text-align: center;
  font-weight: 600;
  background: #cf132c;
  border: 1px #cf132c solid;
  color: #fff;
  width: 100%;
  font-size: 15px;
  display: block;
  height: 52px;
  line-height: 52px;
}

a.BtnRed:hover,
.BtnRed:hover {
  background: #cf132c;
}

a.BtnWhite {
  padding: 5px 15px;
  border: 1px #d7d7d7 solid;
  font-size: 14px;
  border-radius: 50px;
}

a.BtnWhite:hover {
  background: #f4f4f4;
}

a.BtnRed_radius {
  padding: 5px 15px;
  font-size: 14px;
  border-radius: 50px;
  background: #cf132c;
  color: #fff;
}

a.BtnBlack,
.BtnBlack {
  text-align: center;
  font-weight: 600;
  background: #363636;
  border: 1px #363636 solid;
  color: #7e8083;
  font-size: 15px;
  width: 100%;
  display: block;
  height: 52px;
  line-height: 52px;
  color: #fff;
}

/*데모사이트*/
.chkmode_pc {
  -ms-overflow-style: none;
}

.chkmode_pc::-webkit-scrollbar {
  display: none;
}

.chkmode_pc #wrap {
  height: 100%;
  overflow: hidden;
}

#wrap {
  min-width: 100%;
  margin: 0 auto;
}

.chkmode_pc .demoSimulator {
  height: 100%;
  overflow: hidden;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  margin: -1px;
}

.chkMode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  line-height: 70px;
  font-size: 0;
  text-align: center;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.chkMode button {
  position: absolute;
  top: 0px;
  right: 0;
  width: 70px;
  height: 70px;
  background: url("/assets/img/common/ico_confirmlayer_close.png") 50% 50%
    no-repeat;
  cursor: pointer;
  font-size: 0;
  text-indent: -99999px;
}

.chkMode input {
  display: none;
  width: 0;
  height: 0;
  opacity: 0;
}

.chkMode label {
  display: inline-block;
  position: relative;
  width: 33.33%;
  width: 90px;
  height: 70px;
  vertical-align: top;
  border-left: 1px solid #e0e0e0;
  background-position: center;
  background-size: auto 80%;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-position 0.2s;
}

.chkMode label:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  transition: height 0.3s;
}

.chkMode :checked + label:before {
  background-color: #cf132c;
}

.chkMode label:hover:before,
.chkMode :checked + label:before {
  height: 3px;
  ackground-color: #cf132c;
}

.chkMode label[for="chkmode_pc"] {
  background-image: url("/assets/img/common/btn_mode_pc.png");
}

.chkMode label[for="chkmode_tablet"] {
  background-image: url("/assets/img/common/btn_mode_tablet.png");
}

.chkMode label[for="chkmode_mobile"] {
  border-right: 1px solid #e0e0e0;
  background-image: url("/assets/img/common/btn_mode_mobile.png");
}

.chkMode :checked + label[for="chkmode_pc"] {
  background-image: url("/assets/img/common/btn_mode_pc_on.png");
}

.chkMode :checked + label[for="chkmode_tablet"] {
  background-image: url("/assets/img/common/btn_mode_tablet_on.png");
}

.chkMode :checked + label[for="chkmode_mobile"] {
  border-right: 1px solid #e0e0e0;
  background-image: url("/assets/img/common/btn_mode_mobile_on.png");
}

#demoBox {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding-top: 0px;
  box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3;
  border-radius: 10px;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

.chkmode_pc #demoBox {
  height: 100%;
  width: 100%;
  padding-top: 70px;
}

.chkmode_tablet #demoBox {
  width: 700px;
  height: 750px;
  margin-top: 150px;
  margin-bottom: 30px;
  padding: 0px;
}

/* 787*1069 */
.chkmode_mobile #demoBox {
  width: 400px;
  height: 650px;
  margin-top: 150px;
  margin-bottom: 30px;
  padding: 0px;
}

/* 373*676 */

.chkMode h1 {
  text-align: left;
  position: fixed;
  left: 30px;
  top: 13px;
}

.chkMode h1 img {
  width: 75px;
}

.demoFrame {
  position: relative;
  height: 100%;
}

.demoFrame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.isMobile .demoSimulator {
  width: 100%;
}

.isMobile .chkMode {
  display: none;
}

.isMobile #wrap {
  min-width: 0 !important;
}

.isMobile #demoBox {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
}

.isMobile #demoBox .demoFrame {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.chkMode .btn_down {
  position: absolute;
  right: 80px;
  padding: 10px 20px;
  top: 15px;
  border-radius: 90px;
  background: #cf132c;
  color: #fff;
  display: block;
  font-size: 15px;
  line-height: 18px;
}

@media screen and (max-device-width: 1799px) {
  #wrap {
    min-width: 0;
  }

  .chkMode label[for="chkmode_laptop"] {
    display: none;
  }

  .chkmode_laptop #demoBox {
    width: auto;
  }
}

.sc-inner {
  margin: 0 auto;
  padding: 0 40px;
  max-width: 1520px;
}

.header__util-app {
  position: relative;
}

#header .m_menu .header__util-app.active::before {
  content: none;
}

.header__util-app .btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 20px;
  font-weight: 500;
  border-radius: 20px;
  font-size: 14px;
  color: #000;
  background: #fff;
  height: 40px;
}

.header__util-app button {
  padding: 6px 16px;
}

.header__util-app.active button {
  border-color: #111;
}

.ico-down-arrow::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url("../img/common/ico_arrow_down.svg");
  transition: transform 0.3s;
}

.header__util-app.active button::after {
  transform: rotate(-180deg);
}

.header__util-app-content {
  display: flex;
  align-items: center;
  gap: 20px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  opacity: 0;
  visibility: hidden;
  padding: 24px;
  width: 70vw;
  max-width: 400px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  transition: opacity 0.3s, visibility 0.3s;
}

.header__util-app.active .header__util-app-content {
  opacity: 1;
  visibility: visible;
}

.header__util-app-item {
  flex: 1;
  height: 100%;
}

.header__util-app-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 21px 30px;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  background: #cf132c;
  border-radius: 4px;
  color: #fff;
  transition: 0.3s;
}

.btn-primary:hover {
  background-color: rgba(207, 19, 44, 0.8);
}

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 21px 30px;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  background: #fff;
  border-radius: 4px;
  transition: background 0.3s;
}

.btn-white:hover {
  background: #e5e5e5;
}

@media (max-width: 600px) {
  .header__util-app {
    display: none;
  }
}
@media (max-width: 992px) {
  .btn-primary,
  .btn-white {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 24px;
  }
}
.ico-warning {
  background: url("../img/common/ico_warning.svg") no-repeat center / cover;
}

.ico-success {
  background: url("../img/common/ico_success.svg") no-repeat center / cover;
}
.ico-contact {
    background: url("../img/common/ico_contact.svg") no-repeat center / cover;
  }
[data-media="mo"] {
  display: none;
}