/*********************************************************
        Modal style css
*/
#modal-wrap {
  position: fixed; left: 0; top: 0; z-index: 11;
  width: 100%; height: 100%;
  transform: scale(0);
}
#modal-wrap .modal-bg {
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center; justify-content: center;
  height: 100%;
}
#modal-wrap .modal-bg .modal-cont {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 50px;
  min-width: 500px;
}
#modal-wrap.warranty-wrap .modal-bg .modal-cont {
  max-width: 900px; max-height: 700px;
  overflow-x: hidden;
}
#modal-wrap.example-wrap .modal-bg .modal-cont {
  max-width: 700px; max-height: 550px;
  overflow-y: auto;
}
#modal-wrap.know-wrap .modal-bg .modal-cont {
  max-width: 700px; max-height: 720px;
  overflow: hidden;
}
#modal-wrap .modal-bg .modal-cont h2 {
  position: relative;
  padding: 0; margin: 0;
  margin-bottom: 1rem;
  font-size: var(--fS-ttl-1-55); font-weight: 700;
}
#modal-wrap .modal-bg .claose-box {
  position: absolute; top: 50px; right: 50px;
  width: 24px; height: 24px;
  cursor: pointer;
}
#modal-wrap .modal-bg .claose-box a {
  display: block;
  position: relative;
  margin: 0px;
  width: 100%; height: 100%;
  border-radius: 0px;
}
#modal-wrap .modal-bg .claose-box i.icon-btn-close {
  display: block;
  width: 25px; height: 25px;  
  background-color: #000; background-size: 100%;
  -webkit-mask: url('../img/sub/icon-btn-close.svg') no-repeat;
          mask: url('../img/sub/icon-btn-close.svg') no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}
#modal-wrap .modal-bg .close svg {
  width: 25px; fill: #fff; vertical-align: top;
}
#modal-wrap .modal-bg .modal-cont > .table-wrap {
  position: relative;
  max-height: 650px;
  overflow-y: auto;
}
#modal-wrap .modal-bg .modal-cont > .table-wrap table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0; border-collapse: collapse;
}
#modal-wrap .modal-bg .modal-cont > .table-wrap table thead tr {
  position: sticky; top: 0;
}
#modal-wrap .modal-bg .modal-cont > .table-wrap table th
, #modal-wrap .modal-bg .modal-cont > .table-wrap table td {
  font-size: var(--fS-txt-875); font-weight: 400; line-height: 1.4;
  padding: 8px 15px; text-align: center;
  border: 1px solid var(--color-ligth-gray);
  vertical-align: middle;
}
#modal-wrap .modal-bg .modal-cont > .table-wrap table thead tr th {
  position: relative;
  font-weight: 700; color: var(--color-white);
  background-color: var(--color-blue);
  border: 1px solid #024FC1;
}
#modal-wrap .modal-bg .modal-cont > .table-wrap.sticky-scrolling table thead tr th::before {
  content: "";
  position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: -1;
  border: 1px solid #024FC1;
  pointer-events: none;
}
#modal-wrap .modal-bg .modal-cont > .table-wrap.sticky-scrolling table thead tr:nth-child(2) {
  top: 37px;
}
#modal-wrap .modal-bg .modal-cont > .table-wrap table tbody tr th {
  background-color: var(--color-snow);
}
#modal-wrap .modal-bg .modal-cont > .table-wrap table tbody tr td:last-child {
  text-align: left;
}
#modal-wrap.example-wrap .modal-bg .modal-cont > .table-wrap > span {
  display: flex; justify-content: flex-end;
  margin-bottom: 10px;
  font-size: var(--fS-txt-875); font-weight: 500;
}
#modal-wrap.example-wrap .modal-bg .modal-cont > .risk-level {
  margin-top: 30px;
}
#modal-wrap.example-wrap .modal-bg .modal-cont > .risk-level > h3 {
  font-size: var(--fS-ttl-1-125); font-weight: 700;
}
.risk-level > ul {
  margin: 10px 0 0;
}
.risk-level > ul li.type-dot {
  position: relative;
  font-size: var(--fS-txt-875); font-weight: 400;
  padding: 5px 0 0 12px;
}
.risk-level > ul li.type-dot:before {
  content: "";
  position: absolute; top: 11px; left: 0;
  width: 3px; height: 3px;
  background-color: var(--color-black); border-radius: 100%;
}

#modal-wrap.know-wrap .modal-bg .modal-cont .know-info-conts {
  height: 620px;
  overflow-y: auto;
}
#modal-wrap.know-wrap .modal-bg .modal-cont .know-info-conts > ul {
  width: 95%;
  margin-right: 5%;
}
.know-info-conts > ul li {
  font-size: var(--fS-txt-875); font-weight: 400; color: var(--color-deep-gray);
  margin-top: 5px;
  word-break: keep-all;
}
.know-info-conts > ul li.title {
  margin-top: 30px; margin-bottom: 10px;
  font-size: var(--fS-ttl-1-125); font-weight: 700;
  color: var(--color-black);
}
.know-info-conts > ul li.type-dash {
  text-indent: -9px; padding-left: 9px;
}
.know-info-conts > ul li.type-dash > ul {
  text-indent: 0px;
}
.know-info-conts > ul li.type-number {
  text-indent: -15px; padding-left: 15px;
}
.know-info-conts > ul li.type-number > ul {
  text-indent: 0px;
}
.know-info-conts > ul li.type-dash > ul li
, .know-info-conts > ul li.type-number > ul li {
  text-indent: -15px; padding-left: 15px;
}
.know-info-conts > ul li.last {
  margin-top: 30px;
  font-weight: 600;
}



/* one */
#modal-wrap.one {
	transform: scale(1);
}
#modal-wrap.one.out {
	transform: scale(0);
}
/* two */
#modal-wrap.two {
	transform: scaleY(0.01) scaleX(0);
	animation: unfoldIn 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal-wrap.two .modal-bg .modal-cont {
	transform: scale(0);
	animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal-wrap.two.out {
	transform: scale(1);
	animation: unfoldOut 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal-wrap.two.out .modal-bg .modal-cont {
	transform: scale(0);
	animation: zoomOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

/* three */
#modal-wrap.three {
	transform: scale(1);
}
#modal-wrap.three .modal-bg {
	background: rgba(0,0,0,0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal-wrap.three .modal-bg .modal-cont {
	opacity: 0;
	animation: scaleUp 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal-wrap.three.out {
	animation: quickScaleDown 0s .5s linear forwards;
}
#modal-wrap.three.out .modal-bg {
	background: rgba(0,0,0,0);
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal-wrap.three.out .modal-bg .modal-cont {
	opacity: 0;
	animation: scaleDown 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

#modal-wrap.two .modal-bg .modal-cont .btnArea {
    display: flex; justify-content: flex-start; align-items: center;
    margin-top: 30px;
}
#modal-wrap.two .modal-bg .modal-cont .btnArea a {
    display: flex; justify-content: center; align-items: center;
}
#modal-wrap.two .modal-bg .modal-cont .btnArea a:not(:first-child) {
    margin-left: 10px;
}


/***************************************** 스크롤바 */
/* 스크롤바 설정*/
#modal-wrap .modal-cont::-webkit-scrollbar
, #modal-wrap .modal-cont::-webkit-scrollbar
, #modal-wrap .modal-cont::-webkit-scrollbar {
  width: 8px;
}
/* 스크롤바 막대 설정*/
#modal-wrap .modal-cont::-webkit-scrollbar-thumb
, #modal-wrap .modal-cont::-webkit-scrollbar-thumb
, #modal-wrap .modal-cont::-webkit-scrollbar-thumb {
    background: #353535; border: 1px solid var(--color-black);
    border-radius: 1px;
}
/* 스크롤바 뒷 배경 설정*/
#modal-wrap .modal-cont::-webkit-scrollbar-track
, #modal-wrap .modal-cont::-webkit-scrollbar-track
, #modal-wrap .modal-cont::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .05);
}


/* 스크롤바 설정*/
#modal-wrap.example-wrap .modal-bg .modal-cont::-webkit-scrollbar
, #modal-wrap .modal-bg .modal-cont > .table-wrap::-webkit-scrollbar
, #modal-wrap.know-wrap .modal-bg .modal-cont .know-info-conts::-webkit-scrollbar {
  width: 8px;
}
/* 스크롤바 막대 설정*/
#modal-wrap.example-wrap .modal-bg .modal-cont::-webkit-scrollbar-thumb
, #modal-wrap .modal-bg .modal-cont > .table-wrap::-webkit-scrollbar-thumb
, #modal-wrap.know-wrap .modal-bg .modal-cont .know-info-conts::-webkit-scrollbar-thumb {
    background: #353535; border: 1px solid var(--color-black);
    border-radius: 1px;
}
/* 스크롤바 뒷 배경 설정*/
#modal-wrap.example-wrap .modal-bg .modal-cont::-webkit-scrollbar-track
, #modal-wrap .modal-bg .modal-cont > .table-wrap::-webkit-scrollbar-track
, #modal-wrap.know-wrap .modal-bg .modal-cont .know-info-conts::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .05);
}



@media screen and (max-width: 1024px) {
    #modal-wrap .modal-bg {
        align-items: flex-start;
    }
    #modal-wrap .modal-bg .claose-box {
        right: 20px;
    }
    #modal-wrap.warranty-wrap .modal-bg .modal-cont {
        width: 100%;
        min-width: 100%;
        padding: 50px 20px;
        box-sizing: border-box;
        max-height: 100%;
        height: 100%;
        overflow-y: auto;
    }
    #modal-wrap.know-wrap .modal-bg .modal-cont {
        width: 100%;
        min-width: 100%;
        padding: 50px 20px;
        box-sizing: border-box;
        max-height: 100%;
        height: 100%;
        overflow-y: auto;
    }
    #modal-wrap.example-wrap .modal-bg .modal-cont {
        width: 100%;
        min-width: 100%;
        padding: 50px 20px;
        box-sizing: border-box;
        max-height: 100%;
        height: 100%;
        overflow-y: auto;
    }
    #modal-wrap .modal-bg .modal-cont .table-wrap {
        max-height: none;
    }
    #modal-wrap.know-wrap .modal-bg .modal-cont .know-info-conts {
        height: auto;
        overflow-y: hidden;
    }
    
    #modal-wrap .modal-bg .modal-cont > .table-wrap table {
        width: 100%; min-width: 768px;
        overflow: hidden;
    }

}
@media screen and (max-width: 768px) {
    #modal-wrap .modal-bg .modal-cont {

    }
 }