@charset "utf-8";

body { width: 100%; height: 100%; font-family:'Noto Sans JP', sans-serif; font-size:16px; font-weight: 400; line-height: 1.7em; word-break: break-all; word-wrap: break-word; color: #222; }
.container{ padding-right: 10px; padding-left: 10px; }
.mob { display:none; }

.subject{ display: block; text-align: left; text-overflow:ellipsis; white-space:nowrap; word-wrap: break-word; overflow:hidden; }
.subject2{  text-overflow:ellipsis; overflow:hidden; display: -webkit-box; -webkit-line-clamp: 2; /* text-overflow: ellipsis;  라인수 */
-webkit-box-orient: vertical; line-height: 1.5em; height: 3em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */}
.line_02{ line-height: 1.7em; height: 3.4em; overflow: hidden; }
/*16px 기준*/
h1, .h1{ margin: 0; padding: 0; font-size: 1.75em; } /* 28px */
h2, .h2{ margin: 0; padding: 0; font-size: 1.63em; } /* 26px */
h3, .h3{ margin: 0; padding: 0; font-size: 1.50em; line-height: 1.5em; } /* 24px */
h4, .h4{ margin: 0; padding: 0; font-size: 1.25em; } /* 20px */
h5, .h5{ margin: 0; padding: 0; font-size: 1.12em; } /* 18px */
h6, .h6{ margin: 0; padding: 0; font-size: 0.87em; color: #555; } /* 14px */

@media (max-width:991px) {
	.web { display:none; }
	.mob { display:block; }
	html,body{height:100%; font-size:14px;}
}

@media (max-width:767px) {
	html,body{font-size:12px;}
	
	.tab-panel {
		font-size: 14px;
	}
}

@media (max-width:320px) {
}

/*기준 패딩*/
.con-pd{ min-height: 650px; padding: 3em 0; }
.pd_2p{ padding:2% 0; }
.pd_b2p{ padding:0 0 2% 0; }

@media (max-width:991px) {
	.con-pd{ min-height: 450px; padding: 0 0 2em 0; }
	.bg_co{ background: #f2f2f2; }
}

/*기준색*/
.main_co{ color: #51ac17 !important; }
.sub_co{ color: #414852 !important; }
.point_co{ color: #fa4169 !important; }

.main_bg{ color: #fff !important; background: #51ac17 !important; }
.sub_bg{ color: #fff !important; background: #414852 !important; }
.point_bg{ color: #fff !important; background: #fa4169 !important; }

.gray_bg{ background: #f3f3f3; }
.white_bg{ border: 1px solid #aaa; }

.red_co{ color: #e72d18; }
.bg_01 { color: #000; background: #ebfce2; }

.naver { color:#fff; padding:3px; font-size: 27px; border-radius: 10px; background: #00C300; }
.face { padding:6px 1px 0 1px; font-size: 31px; color:#fff; border-radius: 10px; background: #3a5896; }
.kakao { color:#361d1d; padding:3px; font-size: 27px; border-radius: 10px; background: #f9e000; }

@media (max-width:991px) {
	.naver { color:#fff; padding:5px 3px; font-size: 27px; border-radius: 10px; background: #00C300; }
	.face { padding:10px 1px 0 1px; font-size: 31px; color:#fff; border-radius: 10px; background: #3a5896; }
	.kakao { color:#361d1d; padding:5px 3px; font-size: 27px; border-radius: 10px; background: #f9e000; }
}

.naver_bg a{ color: #fff; background: #1ec800; }
.face_bg a{ color: #fff; background: #3a5896; }
.kakao_bg a{ color: #fff; background: #ffcb01; }
.kakao_bg a i{ color: #361d1d; }


/*탭메뉴*/
.tab { overflow: hidden; padding: 0 0 2em 0; }
.tab ul li{ float: left; text-align: center; }
.tab ul li a{ display: block;  padding: 12px 0; border: 1px solid #ccc; border-left: 0; }
.tab ul li:first-child a{ border-left: 1px solid #ccc; }
.tab .on a{ color: #fff; background: #51ac17; border-color: #51ac17; }

.tab .tab_02 li{ width: 50%; }
.tab .tab_04 li{ width: 25%; }
.tab .tab_05 li{ width: 20%; padding: 0 }
/* .tab .tab_05 li a{ padding: 12px 10px; }
.tab .tab_05 .on a{ color: #fff; background: #51ac17; border-color: #51ac17; } */
.tab .tab_06 li{ width: 16.6%; }

@media ( max-width: 991px) {
	.tab .tab_04 li{ width: 50%; }
	.tab .tab_04 li:nth-child(3) a{ border-top: 0; border-left: 1px solid #ccc; }
	.tab .tab_04 li:nth-child(4) a{border-top: 0; }
	.tab .tab_05 { border-top: 1px solid #ccc; }
	.tab .tab_05 li{ width: 50%; }
	.tab .tab_05 li a{ border-top:0; }
	.tab .tab_05 li:nth-child(3) a{ border-left: 1px solid #ccc; }
	.tab .tab_05 li:nth-child(5) a{ border-left: 1px solid #ccc; }
	/* .tab .tab_05 li{ width: auto; padding: 0 }
	.tab .tab_05 li a{ border: 0; background: #eee; } */
	.tab .tab_06 li{ width: 33.3%; padding: 0 0 2% 0; }
	.tab .tab_06 li:nth-child(4) a{ border-left: 1px solid #ccc; }
}

/* 서브타이틀 */
.sub_title{ text-align: center; padding: 2em 0; background: #fff; }
.sub_title h2{ font-weight: 500; }
.sub_title p{ padding: 1em 0 0 0; }
.sub_title ul{ padding: 1em 0 0 0; }
.sub_title ul li{ display: inline-block; padding: 0 10px; border-left: 1px solid #d5d5d5; font-weight: 500; }
.sub_title ul li:nth-child(1){ border-left: 0; }
.sub_title ul li:hover{ color: #01615d; }

.sub_title .category { padding: 1em 2em 0 2em; }
.sub_title .category select{ border: 2px solid #51ac17; border-radius: 40px; }

/* 모달 약관보기 */
.modal-body .scroll{ height: 450px; overflow-y: scroll; }

/* 이용약관 */
.terms > div{ padding:15px 10px; border-bottom: 1px solid #e5e5e5; }
.terms h1{ padding: 0 0 10px 0; font-size: 1.2em; font-weight: 800; }
.terms .small{ padding: 0; font-size:12px; text-align: right; line-height: 1em; }

.terms ul li{ position: relative; }
.terms .list01 > li{ padding:0 0 0 25px; }
.terms .list01 i { position: absolute; left: 10px; }
.terms .list02 > li{ padding:0 0 0 35px; }
.terms .list02 i { position: absolute; left: 10px; }

.terms table{ border-top: 2px solid #15aae8; }
.terms table th{ font-weight: 300; background: #eee; }
.terms table th, .terms table td{ padding:10px; border-top: 1px solid #ddd; }

/* -- 약관 -- */
.terms h4{ padding: 15px 0 5px 5px; font-size: 1.1em; font-weight: 800; }
.terms .agree_box { padding: 10px; overflow-y: scroll; width: 100%; height: 150px; border: 1px solid #ddd;}
.terms p{ padding: 0 5px 5px 5px; }

.terms .circle > li:nth-child(1) > i:before{ content: "①"; }
.terms .circle > li:nth-child(2) > i:before{ content: "②"; }
.terms .circle > li:nth-child(3) > i:before{ content: "③"; }
.terms .circle > li:nth-child(4) > i:before{ content: "④"; }
.terms .circle > li:nth-child(5) > i:before{ content: "⑤"; }
.terms .circle > li:nth-child(6) > i:before{ content: "⑥"; }
.terms .circle > li:nth-child(7) > i:before{ content: "⑦"; }
.terms .circle > li:nth-child(8) > i:before{ content: "⑧"; }
.terms .circle > li:nth-child(9) > i:before{ content: "⑨"; }
.terms .circle > li:nth-child(10) > i:before{ content: "⑩"; }
.terms .circle > li:nth-child(11) > i:before{ content: "⑪"; }

.terms .num > li:nth-child(1) > i:before{ content: "1."; }
.terms .num > li:nth-child(2) > i:before{ content: "2."; }
.terms .num > li:nth-child(3) > i:before{ content: "3."; }
.terms .num > li:nth-child(4) > i:before{ content: "4."; }
.terms .num > li:nth-child(5) > i:before{ content: "5."; }
.terms .num > li:nth-child(6) > i:before{ content: "6."; }
.terms .num > li:nth-child(7) > i:before{ content: "7."; }
.terms .num > li:nth-child(8) > i:before{ content: "8."; }
.terms .num > li:nth-child(9) > i:before{ content: "9."; }
.terms .num > li:nth-child(10) > i:before{ content: "10."; }
.terms .num > li:nth-child(11) > i:before{ content: "11."; }
.terms .num > li:nth-child(12) > i:before{ content: "12."; }
.terms .num > li:nth-child(13) > i:before{ content: "13."; }
.terms .num > li:nth-child(14) > i:before{ content: "14."; }
.terms .num > li:nth-child(15) > i:before{ content: "15."; }

.terms .brac > li:nth-child(1) > i:before{ content: "1)"; }
.terms .brac > li:nth-child(2) > i:before{ content: "2)"; }
.terms .brac > li:nth-child(3) > i:before{ content: "3)"; }
.terms .brac > li:nth-child(4) > i:before{ content: "4)"; }
.terms .brac > li:nth-child(5) > i:before{ content: "5)"; }
.terms .brac > li:nth-child(6) > i:before{ content: "6)"; }
.terms .brac > li:nth-child(7) > i:before{ content: "7)"; }
.terms .brac > li:nth-child(8) > i:before{ content: "8)"; }
.terms .brac > li:nth-child(9) > i:before{ content: "9)"; }
.terms .brac > li:nth-child(10) > i:before{ content: "10)"; }
.terms .brac > li:nth-child(11) > i:before{ content: "11)"; }
.terms .brac > li:nth-child(12) > i:before{ content: "12)"; }
.terms .brac > li:nth-child(13) > i:before{ content: "13)"; }
.terms .brac > li:nth-child(14) > i:before{ content: "14)"; }
.terms .brac > li:nth-child(15) > i:before{ content: "15)"; }
.terms .brac > li:nth-child(16) > i:before{ content: "16)"; }
.terms .brac > li:nth-child(17) > i:before{ content: "17)"; }
.terms .brac > li:nth-child(18) > i:before{ content: "18)"; }
.terms .brac > li:nth-child(19) > i:before{ content: "19)"; }
.terms .brac > li:nth-child(20) > i:before{ content: "20)"; }
.terms .brac > li:nth-child(21) > i:before{ content: "21)"; }
.terms .brac > li:nth-child(22) > i:before{ content: "22)"; }
.terms .brac > li:nth-child(23) > i:before{ content: "23)"; }
.terms .brac > li:nth-child(24) > i:before{ content: "24)"; }
.terms .brac > li:nth-child(25) > i:before{ content: "25)"; }

.terms .han > li:nth-child(1) > i:before{ content: "가."; }
.terms .han > li:nth-child(2) > i:before{ content: "나."; }
.terms .han > li:nth-child(3) > i:before{ content: "다."; }
.terms .han > li:nth-child(4) > i:before{ content: "라."; }
.terms .han > li:nth-child(5) > i:before{ content: "마."; }
.terms .han > li:nth-child(6) > i:before{ content: "바."; }
.terms .han > li:nth-child(7) > i:before{ content: "사."; }

.terms .hyphen > li > i:before{ content: "-"; }
.terms .squ > li > i:before{ content: "•"; }
.terms .title:before{ content: "■"; }

/* 모달 */
.modal .modal-content{ padding: 1em; border:5px solid #51ac17; }
.modal .modal-header{ text-align: center; border-bottom: 0; }
.modal h5{ line-height: 1.5em; }
.modal a{ display: block; line-height: 40px; text-align: center; color: #fff; background: #aaaaaa; }
.modal .modal-footer { display: flex; justify-content: center; align-items: center; gap: 10px; }

.popup .modal-content { padding: 0; border: 0; }
.popup .modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.popup .modal-footer:before,
.popup .modal-footer:after { display: none; }
.modal .modal-footer a,
.modal .modal-footer button { padding: 5px 20px; border-radius: 5px; }
/* 	.modal .modal-footer * { padding: 5px 20px; border-radius: 5px; } */
@media ( max-width: 991px) {
	.popup .modal-footer { padding: 15px 10px; }
}

.view_modal .modal-body { max-height: calc(100vh - 150px); overflow-y: auto; }
.view_modal .modal_down { position: absolute; left: 0; right:0; bottom: 50px; width: 60%; margin: 0 auto; border-radius: 50px; background: #51ac17; }

/* 버튼 애니메이션 */
@keyframes btn_effect {
  50% {
    opacity: 0;
  }
}
.btn_ani { animation: btn_effect 1.5s infinite; }