@charset "utf-8";

/*** faq 공통 ***/
.faq-inner-list>li {margin-bottom:10px; border:1px solid #E5E5E5; border-radius:20px;}
.faq-inner-list>li:last-child {margin-bottom:0;}
.faq-inner-list li h4 {color:#000; font-weight:700; padding:30px; font-size:var(--fontSize20); cursor: pointer; background: url(../../images/common/more.png) right 30px center no-repeat;}
.faq-inner-list li.on h4 {color:var(--base2); background: url(../../images/common/more-top.png) right 30px center no-repeat;}
.faq-inner-list li h4 span {padding-right:30px;}
.faq-inner-list>li>div {padding:0 30px 30px 30px;}
.faq-inner-list li>div>span>img {border-radius:20px; width:200px;}
.faq-inner-list li>div div span {display:block; padding-top:35px; font-size:var(--fontSize16);}

.faq-inner-list li>div ol li p {font-size:var(--fontSize16);}
.faq-inner-list li>div ol li img {border:1px solid #E5E5E5; border-radius:20px;}

.faq-inner-list li>div ol {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; list-style: none; padding: 0;}
.faq-inner-list li>div ol li {display: flex; flex-direction: column; align-items: center; text-align: center;}
.faq-inner-list li>div ol .item3 {grid-column: 1 / span 2;}
.faq-inner-list li>div ol .item3 .image-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-bottom: 10px;}
.faq-inner-list li>div ol img {max-width: 100%; height: auto;}

.faq-inner>span {background: var(--base1);
    padding: 5px 20px;
    margin-top: 10px;
    border-radius: 100px;
    color: #fff;
    display: inline-block;}

/*** 테이블 공통 ***/
.wildanimals .wildtable table {width:100%; margin:20px 0; border:1px solid #E0E0E0; }
.wildanimals .wildtable table tr th {width:50%; height:60px; text-align:center; background:var(--gray1); border-bottom:1px solid #E0E0E0; border-left:1px solid #E0E0E0;}
.wildanimals .wildtable table tr td {padding:20px 0 20px 10px; border-bottom:1px solid #E0E0E0; border-left:1px solid #E0E0E0;}
.wildanimals .wildtable table hr {margin: 5px 0; border: 0; border-top: 1px solid #ccc;}
.wildanimals .wildtable table tr .hr {padding:10px 0;}
.wildanimals .wildtable table tr .hr p {padding-left:10px;}
.wildanimals .wildtable .third table tr th {width:33.333%;}
.wildanimals .wildtable .fourth table tr th {width:25%;}
.wildanimals .wildtable .third table tr .sm-col {width:15%;}
.wildanimals .wildtable .fourth table tr .sm-col {width:15%;} 


/*** 야생동물이란? ***/
.wild>ul {display:grid; grid-template-columns:360px auto; gap:95px;}
.wild>ul {padding-bottom:70px; margin-top:70px; border-bottom:1px solid #E5E5E5;}
.wild>ul:nth-child(1) {margin-top:0;}
.wild>ul:last-child {padding-bottom:0; border-bottom:0;}
.wild>ul li h3 {position:relative; font-size:var(--fontSize32); font-weight:600; color:var(--base1); padding-bottom:30px; line-height:1.4}
.wild>ul li h3:before {position:absolute; content:""; width:50px; height:2px; background:var(--base1); left:0; bottom:0;}
.wild>ul:nth-child(even) li h3 {color:var(--base2);}
.wild>ul:nth-child(even) li h3:before {background:var(--base2);}
.wild>ul li .img {height:250px; margin-top:20px; border-radius:20px; background:url(../../images/sub/wild.jpg) center -280px no-repeat; background-size:100%;}

.wild>ul li .imgIn {display:flex; gap:20px; text-align:center; margin-top:20px;}
.wild>ul li .imgIn p {padding-top:5px;}

.wild .faq-inner-list li:nth-child(2)>div {display:grid; grid-template-columns:200px auto; gap:30px;}
.wild .faq-inner-list li:nth-child(3)>div {display:grid; grid-template-columns:380px auto; gap:30px;}
.wild .faq-inner-list li:nth-child(3)>div img {width:100%;}
.wild .faq-inner-list li:nth-child(3)>div span {text-align:center;}

.wild ol {margin-top:20px;}


/*** 야생동물구조 ***/
.rescue .top_txt {text-align:center;}
.rescue .top_txt h3 {font-size:32px; font-weight:800; color:var(--base1);}
.rescue .top_txt p {padding:20px 0 50px 0; line-height:1.8; color:#000;}
.rescue .tabWrap .tabBtn {cursor:pointer;}
.rescue .tabInner .tabItem {display:none;}
.rescue .tabInner .tabItem.on {display:block;}

.scroll-tab .scrollable {width:100%; white-space:nowrap; overflow-x:auto; display:flex; justify-content:center; border:1px solid rgba(0,0,0,.3); border-radius:20px; margin:0 auto;}
.scroll-tab .scrollable::-webkit-scrollbar {display:none;}
.scroll-tab .scrollable li {display:inline-block; cursor:pointer; user-select:none; color:#000; width:100%; line-height:1; text-align:center; font-weight:700; position:relative; font-size:36px; padding:30px;}
.scroll-tab .scrollable li.on,
.scroll-tab .scrollable li:hover {color:#fff; background:var(--base2);}
.scroll-tab .scrollable li.on {background:var(--base2) url(../../images/sub/i-check.png) left 30px center no-repeat;}

.tabItemI n{display:block; padding:30px 0;}
.tabItemIn.two-cols {display:grid; grid-template-columns:600px auto; align-items:start;}
.tabItemIn p {margin-bottom:30px; line-height:1.8;}

.rescue .left {align-self:start;}
.rescue .left h3 {font-size:var(--fontSize28); font-weight:800; color:var(--base2); padding-top:70px;}
.rescue .left p {font-weight:200;}
.rescue .left ol li {margin-bottom:10px;}
.rescue .left ol li span {position:relative; display:inline-block; padding:10px 20px; padding-left:35px; font-weight:300; border:1px solid rgba(0,0,0,.15); border-radius:100px;}
.rescue .left ol li span:before {content:""; position:absolute; width:5px; height:5px; background:var(--base1); border-radius:100px; top:20px; left:20px;}

.rescue .right {margin:70px 0;}
.rescue .right h3 {font-size:var(--fontSize28); font-weight:800; color:#000;}
.rescue .right p {line-height:1.8; margin-bottom:0;}

.rescue .right div img {border-radius:20px; margin:20px 0;}

.rescue .right ol {margin-bottom:70px;}
.rescue .right ol li {margin-bottom:15px;}
.rescue .right ol li span {padding:10px 15px; font-size:var(--fontSize14); color:#fff; font-weight:700; border-radius:100px; background:var(--base1); margin-right:10px;}

.rescue .faq-inner {margin-bottom:70px;}
.rescue .faq-inner:last-child {margin-bottom:0px;}
.rescue .faq-inner-list {margin-top:20px;}

.rescue h5 {color:var(--base1); font-weight:600; margin:25px 0 5px 0;}
.rescue table {margin:0;}
.rescue table tr td {padding: 10px 15px;}
.rescue table tr th {height:50px;}
.rescue table tr th {}

.rescue .txt p {font-weight:700; color:var(--base1); padding:15px 0 5px 0; line-height:1;}

.faq-inner-list>li a {background:var(--base1); padding:5px 20px; margin-top:10px; border-radius:100px; color:#fff; display:inline-block;}

.sticky {position:sticky; top:60px; padding:20px; z-index:5;}


/*** re-wild ***/
.re-wild h3 {text-align:center; font-size:24px;}
.re-wild h3 strong {color:var(--base2);}
.re-wild .img {width:900px; margin:0 auto; padding-top:30px;}
.re-wild .img img {border-radius:10px; border:1px solid #e5e5e5;}

/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1024px) {
	
	/*** 야생동물이란? ***/
	.wild>ul{grid-template-columns:1fr;gap:40px;padding-bottom:50px;}
	.wild .faq-inner-list li>div,
	.wild .faq-inner-list li:nth-child(2)>div,
	.wild .faq-inner-list li:nth-child(3)>div{display:block;}
	.wild .faq-inner-list li>div>span>img,
	.wild .faq-inner-list li>div img{width:100%;max-width:100%;margin-bottom:10px;}
	.faq-inner-list li h4{font-size:var(--fontSize18);padding:20px;}
	.faq-inner-list li h4 span{padding-right:20px;}
	.faq-inner-list>li>div{padding:0 20px 20px 20px;}
	.wild>ul li h3{font-size:var(--fontSize28);padding-bottom:20px;}
	.wild>ul li .imgIn{flex-direction:column;gap:15px;text-align:left;}
	.wild .faq-inner-list li>div ol{grid-template-columns:1fr 1fr;}
	.wild>ul li .img {background: url(../../images/sub/wild.jpg) center no-repeat; background-size: 100%;}

	/*** 야생동물구조 ***/
	.rescue .top_txt h3{font-size:28px;}
	.rescue .top_txt p{padding:15px 0 30px 0; line-height:1.6;}
	.tabItemIn.two-cols{grid-template-columns:1fr;gap:40px;}
	.faq-inner-list li h4{font-size:var(--fontSize18);padding:20px;}
	.faq-inner-list li h4 span{padding-right:20px;}
	.faq-inner-list>li>div {overflow-x:auto !important;}
	.wildanimals .fourth table {min-width:1000px;}

	.faq-inner-list>li>div{padding:0 20px 20px 20px;}
	.faq-inner-list li>div ol{grid-template-columns:1fr;}
	.faq-inner-list li>div img{width:100%;margin-bottom:15px;}
	.faq-inner-list li>div div span{padding-top:20px;}
	.rescue .left h3{font-size:24px;padding-top:40px;}
	.rescue .left ol li span{padding:8px 18px 8px 30px;}
	.rescue .right{overflow-x:auto !important; margin:40px 0;}
	.rescue .right h3{font-size:24px;}
	.rescue .right div img{width:100%;margin:20px 0;}
	.rescue .right ol li{margin-bottom:10px;}
	.rescue .right ol li span{font-size:13px;padding:8px 12px;}
	.rescue .faq-inner{margin-bottom:50px;}
	.scroll-tab .scrollable{justify-content:flex-start;}
	.scroll-tab .scrollable li{font-size:20px;padding:20px;}
	.sticky{position:static;padding:0;z-index:auto;}


	
}


/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	

	.wild>ul{gap:30px;margin-top:50px;padding-bottom:40px;}
	.wild>ul li h3{padding-bottom:15px;line-height:1.4; font-size:24px;}
	.faq-inner-list>li{border-radius:10px;}
	.faq-inner-list li h4{padding:15px;background-position:right 15px center;font-size:18px;}
	.faq-inner-list li.on h4{background-position:right 15px center;}
	.faq-inner-list>li>div{padding:0 15px 15px 15px;}
	.wild .faq-inner-list li:nth-child(2)>div,
	.wild .faq-inner-list li:nth-child(3)>div{display:block;}
	.wild .faq-inner-list li:nth-child(3)>div{grid-template-columns:1fr;}
	.wild .faq-inner-list li>div ol{grid-template-columns:1fr;}
	.wild>ul li .imgIn{flex-direction:column;}
	.wild>ul li .imgIn img{width:100%;}
	.wild>ul li p{line-height:1.6;}
	.table-wrap{overflow-x:auto !important; margin-bottom:30px;}
	.wildanimals table tr th {height:45px;}
	.wildanimals table tr td {padding:10px;}
	
	



	/*** 야생동물구조 ***/
	.rescue .top_txt h3{font-size:22px;}
	.rescue .top_txt p{font-size:16px;padding:10px 0 25px 0;}
	.rescue .top_txt p br {display:none;}
	.tabItemIn.two-cols{grid-template-columns:1fr;gap:30px;}
	.faq-inner-list>li{border-radius:10px;}
	.faq-inner-list li h4{font-size:16px;padding:15px;background-position:right 15px center;display:flex;align-items: flex-start; padding-right:38px; line-height:1.3;}
	.faq-inner-list li h4 span {padding-right:10px;}
	.faq-inner-list li.on h4{background-position:right 15px center;}
	.faq-inner-list>li>div{padding:0 15px 15px 15px;}
	.faq-inner-list li>div ol{grid-template-columns:1fr;}
	.faq-inner-list li>div img{width:100%;margin-bottom:10px;}
	.faq-inner-list li>div div span{font-size:13px;padding-top:15px;}
	
	.rescue .left h3{font-size:20px;padding-top:30px;}
	.rescue .left ol li span{padding:7px 16px 7px 25px;}
	.rescue .right{margin:0;}
	.rescue .right h3{font-size:20px;}
	.rescue .right div img{width:100%;margin:15px 0;}
	.rescue .right p {line-height:1.4;}
	
	.rescue .right ol {margin-bottom:40px;}
	.rescue .right ol li {display:flex;align-items: flex-start;}
	.rescue .right ol li span{font-size:12px;padding:6px 10px;}
	
	.rescue .faq-inner{margin-bottom:40px;}
	.scroll-tab .scrollable{border-radius: 8px;}
	.scroll-tab .scrollable li{font-size:16px;padding:15px;}
	.table-wrap{margin-bottom:20px;}
	.scroll-guide{font-size:13px;color:#888;margin-bottom:8px;padding-left:5px;}
	.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
	.table-scroll table{min-width:600px;border-collapse:collapse;table-layout:auto;}
	.table-scroll table th,
	.table-scroll table td{white-space:nowrap;padding:8px;}
	.scroll-tab .scrollable li.on {background:var(--base2);}
	.tabItemIn p {margin-bottom:10px;}

	.rescue .left ol li span:before {top: 16px; left: 14px;}
	
	
	
	/*** re-wild ***/
	.re-wild h3 {font-size:18px; line-height:1.4;}
	.re-wild h3 br {display:none;}
	.re-wild .img {width:100%;}

	
}