@charset "UTF-8";

/* 251117 이용안내 추가 */

.manual-info  {
  border-top:2px solid #0E457B;
  padding:37px 10px 40px 10px;
  display: flex;
  flex-direction: column;
  row-gap:60px;
}
.manual-info .section {
  display: flex;
  flex-direction: column;
  row-gap:36px;
} 
.manual-info .section .sub_tit2 {
  margin-bottom: 0px; 
  font-size:38px;
}
.bull_list.txt {
  font-size: 22px; 
  font-weight:400;
}
.bull_list.txt > li {
  margin-bottom: 10px; 
  line-height: 1.7; 
  padding-left:0px;
}
.bull_list.txt > li:before {display: none;}

.manual-info .section p {
  font-size: 22px; 
  font-weight:400; 
  line-height: 1.7;
}
.manual-info .section .bg_box {
  border-radius: 20px; 
  border:0; 
  background: #F4F4F4;
  padding: 40px 40px;
}
 
.manual-info .objection-wrap {
  width:100%; 
  display:flex; 
  flex-direction: column; 
  row-gap:24px;
}
.manual-info .objection-wrap .flex-col {
  display:flex; 
  flex-direction: row; 
  column-gap:24px; 
  align-items: center; 
  flex-wrap: wrap;
  row-gap:12px;
}
.manual-info .objection-wrap .flex-col span {
  color: #000;
  font-size: 24px;
  font-weight: 400;
}
.manual-info .objection-wrap .flex-col span.tit{
  border-radius: 100px;
  background: #0E457B;
  display: flex;
  width: 230px;
  height: 73px;
  padding: 20px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #FFF;
  font-size: 26px;
  font-weight: 600;
}
.manual-info .section .objection-wrap p{
  color: #535353;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
}
.manual-info .border-box {
  border-radius: 20px;
  border: 3px solid #C8C8C8;
  padding:55px 60px;
}
.manual-info .border-box .section {
  display: flex;
  flex-direction: column;
  row-gap:24px;
  align-items: center;
}
.manual-info .border-box .box-tit {
  color: #000;
  font-size: 42px;
  font-weight: 500;
  display: block;
}
.manual_info_pc_img {display:block;}
.manual_info_mo_img {display:none;}
.manual-info .list-box-wrap {
  display: flex;
  flex-direction: column;
  row-gap:64px;
}
.manual-info .list-box {
  border-radius: 30px;
  border: 1px solid #C8C8C8;
  padding:30px 40px;
  display: grid;
  grid-template-columns: 450px 1fr;
  grid-gap: 30px;
  align-items:center;
  position: relative;
}
.manual-info .list-box .tit-group {
  display: flex;
  flex-direction: row;
  column-gap:12px;
  align-items:center;
  justify-content: space-between
}
.manual-info .list-box .tit-group .first {
  display: flex;
  flex-direction: row;
  column-gap:12px;
  align-items:center;
  color: #207ED5;
  font-size: 31px;
  font-weight: 700;
}
.manual-info .list-box .tit-group .num {
  display: flex;
  width: 60px;
  height: 60px;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  background: #207ED5;
  color:#fff; 
  font-size: 24px;
  font-weight: 700;
}
.manual-info .list-box .tit-group .bage {
  border-radius: 5px;
  background: #D8F6FD;
  color: #171717;
  font-size: 25px;
  font-weight: 500;
  min-width:110px;
  text-align:center;
  display: inline-flex;
  height:37px;  
  align-items:center;
  justify-content: center;
}
.manual-info .list-box .tit-group .bage.pastel_sky {background: #D8F6FD;}
.manual-info .list-box .tit-group .bage.pastel_navy {background: #D8E7FD;}
.manual-info .list-box .tit-group .bage.pastel_puple {background: #E0DDFE;}
.manual-info .list-box .tit-group .bage.pastel_aqua {background: #CFEDEF;}
.manual-info .list-box .tit-group .bage.pastel_green {background: #CFEFD7;}

.manual-info .list-box.num1 .num{background: #207ED5;} 
.manual-info .list-box.num2 .num{background: #3757BF;} 
.manual-info .list-box.num2 .sub .num{background: #657FD7;  font-size: 22px;}
.manual-info .list-box.num3 .num{background: #5F52D3;} 
.manual-info .list-box.num4 .num{background: #15A7B2;} 
.manual-info .list-box.num5 .num{background: #28B271;} 

.manual-info .list-box.num1 .tit-group .first{color: #207ED5;} 
.manual-info .list-box.num2 .tit-group .first{color: #3757BF;} 
.manual-info .list-box.num2 .sub .tit-group .first{color: #3757BF;  font-size: 23px; font-weight:400;} 
.manual-info .list-box.num2 .sub .tit-group .first strong{font-weight:700;} 
.manual-info .list-box.num3 .tit-group .first{color: #5F52D3;} 
.manual-info .list-box.num4 .tit-group .first{color: #15A7B2;} 
.manual-info .list-box.num5 .tit-group .first{color: #28B271;} 
.manual-info .list-box .txt {
  color: #000;
  font-size: 22px;
  font-weight: 400;
  line-height:1.7;
}
.manual-info .list-box .txt_info {
  color: #515151;
  font-size: 22px;
  font-weight: 400;
  line-height:1.7;
}
.manual-info .list-box.num2 {
  display: block;
}
.manual-info .list-box.num2 > ul {
  display: flex;
  flex-direction: column;
  row-gap:12px;
}
.manual-info .list-box.num2 > ul > li {
  display: grid;
  grid-template-columns: 450px 1fr;
  grid-gap: 30px;
  align-items:center;
}
.list-box-wrap > li.list-box:after {
    content: '';
    display: block;
    position: absolute;
    right: 50%;
    bottom: -42px;
    width: 33px;
    height: 18px;
    background: url(../images/sub/icon-arrow-down.png) center no-repeat;
    background-size: contain;
}

.list-box-wrap > li.list-box.last:after {
  display: none !important;
}

.manual-info .border-box.square {
  display:block;
  width:100%;
  padding : 40px 30px;
  border: 1px solid #0E457A;
  border-radius: 0px;
}
.manual-info .border-box.square .section {
    display: flex;;
    flex-direction: column;
    row-gap: 12px;
    align-items: flex-start; 
}
.manual-info .border-box.square .inner {
  display: flex;
  flex-direction: column;
  row-gap:36px;
}
.manual-info .border-box.square ul {
  display: flex;
  flex-direction: column;
  row-gap:8px;
}
.manual-info .border-box.square ul > li {
  padding-left: 30px;
  margin-bottom: 10px;
  line-height: 1.7;
  position: relative;
  color: #000;
  font-size: 21px;
  font-weight: 400;
}
.manual-info .border-box.square ul > li:before {
  content: '';
  display: block;
  position: absolute;
  left: 12px;
  top: 14px;
  width: 9px;
  height: 9px;
  background-color: #000;
  border-radius: 0;
}
.manual-info .border-box.square p.point {background:#FFD8D8;}
.manual-info .border-box.square .section .btn-group {
  width:100%;
  display: block;
  margin-top:20px;
}
.manual-info .btn-group .common_btn {
  border-radius: 8px;
  min-width: 90px;
  padding: 0 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
	font-size:19px;
}
.manual-info .btn-group .common_btn:hover {
  border: 1px solid #444;
  background: #eee;
  color:#333 !important;
}
.manual-info .btn-group .common_btn.bg_blue {
  background: #0E457A;
  color:#fff;
}
.manual-info .btn-group .common_btn.bg_blue:hover {
  background: #0A2D50;
  color:#fff !important;
}
@media screen and (max-width: 1260px) {
  .manual-info .list-box {
    display: flex;
    flex-direction: column;
    row-gap:12px;
    align-items: flex-start;
  }
  .manual-info .list-box.num2 > ul {
    row-gap: 20px;
  }
  .manual-info .list-box.num2 > ul > li {
    display: flex;
    flex-direction: column;
    row-gap:4px;
    align-items: flex-start;
  }
}


@media screen and (max-width: 767px) {
  .manual-info .list-box-wrap {
    row-gap:40px;
  }
  .manual_info_pc_img {display:none;}
  .manual_info_mo_img {display:block;}
  .manual-info .border-box {
    border-radius: 14px;
    padding:24px 12px;
  }
  .manual-info .border-box .box-tit {
    font-size: 26px;
  }
  .manual-info .section .sub_tit2 {
    margin-bottom: 0px;
    font-size: 22px;
  }
  .bull_list.txt {
    font-size: 16px;
  }
  .manual-info .section p {
    font-size: 16px;
  }
  .manual-info .section .bg_box {
    border-radius: 14px;
    padding: 26px 20px;
  }
  .manual-info .objection-wrap .flex-col span {
    font-size: 18px;
  }
  .manual-info .objection-wrap .flex-col span.tit {
    width: 145px;
    height: 42px;
    padding: 12px;
    font-size: 19px;
    font-weight:500;
    display:inline-flex;
    justify-content: center;
    align-items: center;
  }
  .manual-info .section .objection-wrap p {
    font-size: 17px;
  }
  .manual-info .list-box {
    border-radius: 14px;
    padding: 14px 20px;
  }

  .manual-info .list-box .tit-group .num {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }  
  .manual-info .list-box.num2 .sub .num{ 
    font-size: 18px;
  }
  .manual-info .list-box .tit-group {
    width:100%;
  }
  .manual-info .list-box .tit-group .first {
    column-gap: 8px;
    font-size: 20px;
  }
  .manual-info .list-box .tit-group .bage {
    font-size: 16px;
    min-width:80px;
    height:29px;  
  }
  .manual-info .list-box.num2 .sub .tit-group .first{
    font-size: 20px; 
  } 
  .manual-info .list-box.num2 .sub .num{ 
    font-size: 15px;
  }
  .manual-info .list-box .txt {
    font-size: 15px;
  }
  .list-box-wrap > li.list-box:after {
    bottom: -30px;
    width: 23px;
    height: 13px;
  }
  .manual-info .list-box .txt_info {
    font-size: 15px;
  }
  .manual-info .border-box.square {
    padding : 24px;
  }
  .manual-info .border-box.square .inner {
    row-gap:24px;
  }
  .manual-info .border-box.square ul > li {
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 15px;
  }
  .manual-info .border-box.square ul > li:before {
    left: 0px;
  }
}


@media screen and (max-width: 599px) {
  .manual-info .border-box.square + .btn-group.ta_r { 
    text-align:center !important;
  }
  .manual-info .btn-group .common_btn.bg_blue {
    font-size: 19px;
    min-width:90px;
    height:56px;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    padding:20px;
  }
}

@media screen and (max-width: 480px) {
  .manual-info {
    padding: 20px 5px;
    row-gap: 40px;
  }
  .manual-info .section {
    row-gap: 24px;
  }
  .bull_list.txt {
    font-size: 14px;
  }
  .manual-info .section p {
    font-size: 14px;
  }
  .manual-info .border-box.square .section .btn-group .common_btn {
    font-size: 19px;
    min-width:90px;
    height:56px;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    border-radius: 8px;
    border: 1px solid #73787D;
    background: #FFF;
  }
}



/* 이용안내 신규 레이어팝업 */

/* 버튼 */
a#openModal {cursor:pointer}

/* 오버레이 */
.overlay{
  position:fixed;
	inset:0;
	background:rgba(0,0,0,0.9);
	display:none;
	align-items:center;
	justify-content:center;
	z-index:1000;
}
.overlay.shown{
  display:flex;
}

/* 모달 박스 */
.modal.head-style{
  position: relative; 
	width:min(800px,94vw);
	max-height:90vh;
	background:#fff;
	border-radius:10px;
	box-shadow:0 10px 30px rgba(0,0,0,0.25);
	overflow:hidden;display:flex;
	flex-direction:column;
	transform:translateY(10px);
	opacity:0;
	transition:transform .18s ease,opacity .18s ease;
}
.overlay.shown .modal.head-style{
  transform:translateY(0);
	opacity:1;
}

/* 헤더 */
.modal.head-style .modal-header{
  padding:16px 30px;
	border:0;
	background:#207ED5;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.modal.head-style .modal-header:before {display: none;} 
.modal.head-style .modal-header:after {display: none;} 

.modal.head-style .modal-title{
	color:#fff;
	font-size: 22px;
  font-weight: 500;
	margin:0;
}
.modal.head-style .close-x{
  color:#fff;
  background:transparent;
	border:0;
	padding:3px 10px;
	border-radius:0;
	cursor:pointer;
	font-size:20px;
}
.modal.head-style .close-x:focus{
  outline:2px solid #fff;
}

/* 콘텐츠 */
.modal.head-style .modal-body{
  padding:24px;
	overflow:auto;
	display: flex;
	flex-direction: column;
	row-gap:24px;
}
.modal.head-style .modal-body .box{
  padding:20px 24px;
	border-radius: 12px;
  border: 2px solid #DBDBDB;
  background: #FFF;
}
.modal.head-style .modal-body > .section{
	display: flex;
	flex-direction: column;
	row-gap:12px;
}
.modal.head-style .modal-body .section h2 {
  font-size:24px; 
	font-weight:bold;
	color:#222;
}
.modal.head-style .modal-body .section h3 {
  font-size:19px; 
	font-weight:bold;
	color:#222;
}
.modal.head-style .modal-body .section h3.fc_blue {
  color:#0E457A; 
}
.modal.head-style .modal-body  .bull_list02 > li {
  position: relative;
  margin-bottom: 3px;
  padding-left: 11px;
  word-break: keep-all;
  color: #252525;
  font-size: 17px;
  font-weight: 400;
  text-align: left;
  letter-spacing: -0.5px;
}
.modal.head-style .modal-body .bull_list02.dot > li {
  padding-left: 20px;
  margin-bottom: 8px;
  line-height: 1.7;
}
.modal.head-style .modal-body .bull_list02.dot > li:before {
  content: '';
  display: block;
  position: absolute;
  left: 5px;
  top: 12px;
  width: 4px;
  height: 4px;
  background-color: #333;
  border-radius: 100%;
}

.modal.head-style .modal-body .section_list {
  display: flex;
	flex-direction: row;
	column-gap: 4px;
}
.modal.head-style .modal-body .section_list > span {
  flex-shrink: 0;
}

.modal-footer .common_btn {
  min-width:50px;
}
.modal-footer .common_btn.bg_blue {
  background: #0E457A;
  color:#fff;
}
.modal-footer .common_btn.bg_blue:hover {
  background: #0A2D50;
  color:#fff !important;
}

/* 푸터 */
.modal.head-style .modal-footer{
  padding:12px 20px 20px 20px;
	border-top:0;
	display:flex;
	justify-content:flex-end;
}


/* 접근성 보조 (visually-hidden) */
.sr-only{
  position:absolute!important;
	height:1px;width:1px;
	overflow:hidden;
	clip:rect(1px,1px,1px,1px);
	white-space:nowrap;
}


@media (max-width:767px){
  .overlay{
	  align-items: flex-start;
		padding: 20px;
  }
  .modal.head-style{
	  width:calc(100% - 0px);
	  border-radius:8px;
    max-height: calc(100vh - 40px);
  }
}
