@charset 'utf-8';
/* 메인공통 */
#ka-main .section {padding-left: 2rem; background: no-repeat center center; background-size: 120% auto; transition: background 2s 0.3s;}
#ka-main .section .fp-tableCell {padding-top: 7.2rem;}
#ka-main #main-section1 {background-image: none;}
#ka-main #main-section2 {background-image: url('../images/bg_main_m_02.png'); background-size: cover;}
#ka-main #main-section3 {background-image: url('../images/bg_main_m_03.png'); background-size: cover;}
#ka-main #main-section4 {background-image: url('../images/bg_main_m_04.png');}
#ka-main #main-section5 {background-image: url('../images/bg_main_m_05.png');}
#ka-main #main-section6 {background-image: url('../images/bg_main_m_06.png');}
#ka-main #main-section1.fp-completely, #ka-main #main-section4.fp-completely {background-size: 105% auto;}
#ka-main .slick-list {padding: 1rem;}
.fp-viewing-section-3 .ka-logo, .fp-viewing-section-4 .ka-logo, .fp-viewing-section-5 .ka-logo {background-image: url('../images/kaps_logo_color.png');}
.fp-viewing-section-3 .side-gnb-btn span, .fp-viewing-section-4 .side-gnb-btn span, .fp-viewing-section-5 .side-gnb-btn span {background-color:#000; opacity: 0.5;}

/* 메인비주얼 */
.main-visual-container {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;}
.main-visual-wrapper {}
.main-visual-slide {background-position: center bottom; background-size: cover;}
.main-visual-slide1 {background-image: url('../images/main_visual_m_img01.jpg');}
.main-visual-slide2 {background-image: url('../images/main_visual_m_img02.jpg');}
.main-visual-slide3 {background-image: url('../images/main_visual_m_img03.jpg');}
.main-visual-slide4 {background-image: url('../images/main_visual_m_img04.jpg');}


/* 풀페이지 왼쪽 메뉴 스타일링 */
#menu-section {position: fixed; left: 4rem; top: 50%; margin-top: -8rem; z-index: 1;}
#menu-section li {width: 12rem; line-height: 3.6rem;}
#menu-section a {display: block; padding-left: 2.5rem; color: rgba(255,255,255,0.4); background: url('../images/nc_01_tr.png') no-repeat left center / 15px auto;}
#menu-section .first a {background-image: url('../images/nc_01_first_tr.png');}
#menu-section .first.active a {background-image: url('../images/nc_01_first.png');}
#menu-section .last a {background-image: url('../images/nc_01_last_tr.png');}
#menu-section .last.active a {background-image: url('../images/nc_01_last.png');}
#menu-section .active a {background-image: url('../images/nc_01.png'); color: #fff;}

.fp-viewing-section-3 #menu-section a, .fp-viewing-section-4 #menu-section a, .fp-viewing-section-5 #menu-section a {display: block; padding-left: 2.5rem; color: #fff; background: url('../images/nc_02_tr.png') no-repeat left center / 15px auto;}
.fp-viewing-section-3 #menu-section .first a, .fp-viewing-section-4 #menu-section .first a, .fp-viewing-section-5 #menu-section .first a {background-image: url('../images/nc_02_first_tr.png');}
.fp-viewing-section-3 #menu-section .first.active a, .fp-viewing-section-4 #menu-section .first.active a, .fp-viewing-section-5 #menu-section .first.active a {background-image: url('../images/nc_02_first.png');}
.fp-viewing-section-3 #menu-section .last a, .fp-viewing-section-4 #menu-section .last a, .fp-viewing-section-5 #menu-section .last a {background-image: url('../images/nc_02_last_tr.png');}
.fp-viewing-section-3 #menu-section .last.active a, .fp-viewing-section-4 #menu-section .last.active a, .fp-viewing-section-5 #menu-section .last.active a {background-image: url('../images/nc_02_last.png');}
.fp-viewing-section-3 #menu-section .active a, .fp-viewing-section-4 #menu-section .active a, .fp-viewing-section-5 #menu-section .active a {background-image: url('../images/nc_02.png');}

.fp-viewing-section-3 #menu-section a, .fp-viewing-section-4 #menu-section a, .fp-viewing-section-5 #menu-section a {color: #666;}
.fp-viewing-section-3 #menu-section li:before, .fp-viewing-section-3 #menu-section li:after {background-color: #999;}
.fp-viewing-section-3 #menu-section .active a, .fp-viewing-section-4 #menu-section .active a, .fp-viewing-section-5 #menu-section .active a {color: #d0503e;}
.fp-viewing-section-3 #menu-section .active:before {background-color: #d0503e;}




.section-h2 {position: relative; margin: 1.2rem 0 1rem; font-size: 3.6rem; font-weight: bold;}
.section-h2:after {position: absolute; content: ''; width: 100%; height: 0.1rem; left: 0; bottom: -3;}
.section-desc {margin-bottom: 3rem; font-size: 1.5rem;}
.section-tab-menu {}
.section-tab-menu li {position: relative; float: left;}
.section-tab-menu li a {width: 17rem; height: 10rem;  margin-right: 0.4rem; font-size: 1.5rem; color: #000; line-height: 2rem; text-align: center; background: transparent;}

.section-tab-menu li a .active {border-color: #fff; background-color: #fff; color: #d0503e;}

.section-container {width: 100%; margin-top: 1.5rem;}
.contents-box {}



/* 1. 무엇을 하나요? */
.main-section2-tab li a {width: 17rem; height: 10rem; padding: 1.3rem 2rem; margin-right: 1.7rem; font-size: 1.4rem; color: white; line-height: 5rem; text-align: center; background: transparent; border: 0.2rem solid rgba(255,255,255,0.3); border-radius: 2.5rem;}
.main-section2-tab li.active a {border-color: #fff; background-color: #fff; color: #717c32; font-weight: bold;}
.int-wrap {}
.int-slide {width: 40rem; height: 50rem; margin-right: 4rem; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3);}
.int-img1 {height: 25rem; background: #d0503e url('../images/gr_img01.png') no-repeat 50% / 50%; }
.int-img2 {height: 25rem; padding: 2rem; background: #d0503e url('../images/gr_img02.png') no-repeat 50% / 50%; }
/* 내용 표시형식 너비 높이 배경이미기가운데 커버 박스웨도우 */
.int-wrap dl {position: relative; height: 25rem;padding: 3rem 2.5rem 0;}
.int-dl1 {background: #fff url(../images/sec1_dl_bg01.png) no-repeat left top;}
.int-dl2 {background: #fff url(../images/sec1_dl_bg02.png) no-repeat right bottom;}
.int-dl dd {}
.round-btn {width: 18rem; height: 10rem; padding: 1.3rem 1.7rem; margin-right: 0.7rem; font-size: 2rem; color: white; line-height: 5rem; text-align: center; background: transparent; border: 0.2rem solid rgba(255,255,255,0.3); border-radius: 2.3rem;}
.round-btn a {width: 100; height: 100%;}
.round-btn a:hover { color: #d0503e; background-color: #fff;}
.int-cate {margin-bottom: 1rem; color: #000; font-size: 2.4rem; font-weight: bold;}
.int-title {margin-bottom: 2.4rem;  font-size: 1.6rem;}
.more-btn {margin:auto;}



/* 2. 어디에 있나요? */
.main-section3-tab li a {width: 17rem; height: 10rem; padding: 1.3rem 2rem; margin-right: 1.7rem; font-size: 1.4rem; color: #717c32; line-height: 5rem; text-align: center; background: transparent; border: 0.2rem solid #717c32; border-radius: 2.5rem;}
.main-section3-tab li.active a {border-color: #717c32; color: #fff; background-color: #717c32; font-weight: bold;}
.st-slide {width: 48rem; height: 55rem; margin-right: 4rem; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3);}
.st-img {height: 30rem; padding: 6rem; background-color: #f6f6f6; background-color: #717c32;}
.st-img:before {content: ''; display: block; width: 100%; height: 100%;  background-size: cover; background-position: center center; box-shadow: 0 3px 5px rgba(0,0,0,0.2);}
/* 내용 표시형식 너비 높이 배경이미기가운데 커버 박스웨도우 */
.st-img1:before {background-image: url('../images/sty_img01.jpg');}
.st-img2:before {background-image: url('../images/sty_img02.jpg');}
.st-img3:before {background-image: url('../images/sty_img03.jpg');}
.st-img4:before {background-image: url('../images/sty_img04.JPG');}
.st-dl {height: 30rem; padding: 4rem; margin: 0 ; }
.st-cate {color: #717c32; margin: 0; font-size: 2.5rem; font-weight: bold}
.st-title {margin: 1rem 0 1.5rem; font-size: 1.6rem; }
.st-writer {line-height: 6rem; color: #999; font-size: 1.4rem;}
.single-arrows {margin-top: 4rem; height: 4.8rem; opacity: 0.2;}
.single-arrows .slick-arrow {float: left;}

/* 3. 입양해요 */
.adopt-process {display: none;}
.adopt-slide {position: relative; width: 36rem; height: 50rem; margin-right: 4rem;}
.adopt-img {height: 30rem;}
.adopt-img1 {background-image: url(../images/adopt_img01.jpg); background-position: center center;}
.adopt-img2 {background-image: url(../images/adopt_img02.jpg); background-position: right center;}
.adopt-img3 {background-image: url(../images/adopt_img03.jpg); background-position: center;}
.adopt-img4 {background-image: url(../images/adopt_img04.jpg); background-position: center;}
.adopt-img5 {background-image: url(../images/adopt_img05.jpg); background-position: center;}
.adopt-img6 {background-image: url(../images/adopt_img06.jpg); background-position: center bottom;}
.adopt-img7 {background-image: url(../images/adopt_img07.jpg); background-position: center ;}
/* 내용 표시형식 너비 높이 배경이미기가운데 커버 박스웨도우 */
.adopt-dl {height: 30rem; padding: 1.5rem 0 1.5rem 1.5rem; margin: 0 ; }
.adopt-cate {width: 30rem; color: #000; margin: 0; font-size: 2.5rem; font-weight: bold}
.adopt-title {width: 30rem; margin: 1rem 0 1.5rem; font-size: 1.6rem; }
.adopt-writer {line-height: 6rem; color: #999; font-size: 1.4rem;}
.adopt-icon {display: block; margin: auto; width: 6rem; height: 6rem; background-color: #d0503e; background-size: 3.5rem 3.5rem;  background-repeat: no-repeat; background-position: center center; margin-bottom: 2.5rem; }
.adopt-icon-img1 { background-image: url(../images/adotp_icon_img01.png);}
.adopt-icon-img2 { background-image: url(../images/adotp_icon_img02.png);}
.adopt-icon-img3, .adopt-icon-img5 { background-image: url(../images/adotp_icon_img03.png);}
.adopt-icon-img4 { background-image: url(../images/adotp_icon_img04.png);}
.adopt-icon-img6 { background-image: url(../images/adotp_icon_img06.png);}
.adopt-icon-img7 { background-image: url(../images/adotp_icon_img07.png);}
#main-section4 .single-arrows {padding: 1rem; margin-top: 2rem;}


/* 4. 후원해요 */
.main-section5-tab li a {width: 17rem; height: 10rem; padding: 1.3rem 2rem; margin-right: 1.7rem; font-size: 1.4rem; color: #717c32; line-height: 5rem; text-align: center; background: transparent; border: 0.2rem solid #717c32; border-radius: 2.5rem;}
.main-section5-tab li.active a {border-color: #717c32; color: #fff; background-color: #717c32; font-weight: bold;}
.dn-slide {width: 48rem; height: 55rem; margin-right: 4rem; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3);}
.dn-img {height: 30rem; padding: 6rem; background-color: #f6f6f6; background-color: #000;}
.dn-img1 {background-image: url(../images/dn_img01.jpg); background-position: center center;}
.dn-img2 {background-image: url(../images/dn_img02.jpg); background-position: bottom center;}
.dn-img3 {background-image: url(../images/dn_img03.jpg); background-position: bottom center; background-size:cover;}
.dn-img4 {background-image: url(../images/dn_img04.jpg); background-position: center;}
/* 내용 표시형식 너비 높이 배경이미기가운데 커버 박스웨도우 */
.dn-dl {height: 30rem; text-align: center; padding: 4rem; color: #fff; background-color: #67782b; }
.dn-title {font-size: 2.5rem; font-weight: bold; margin-bottom: 1.8rem;}
.dn-cm {font-size: 1.7rem; }



/* 5. 커뮤니티 */
#main-section4 {padding: 0 2rem;}
.section-lastest {}
.latest-wrap {background-color: rgba(255,255,255,0.2);}
.latest-slide {padding: 3rem 3.5rem;}
.latest-slide a {display: block;}
.latest-slide span {display: block;}
.latest-cate {float: left; padding: 0.5rem 2.5rem; margin-bottom: 1.5rem; border: 1px solid #fff; border-radius: 2rem; font-size: 2rem;}
.latest-title {height: 6.6rem; clear: both; font-size: 2.2rem; font-weight: 500; overflow: hidden;}
.latest-date {margin-top: 1.5rem; font-size: 2rem; opacity: 0.5;}


.nanum-wrap {text-align: center;}
.nanum-wrap li {float: left; width: 48%; margin: 2% 0; background-color: #fff; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.nanum-wrap li:nth-child(2n+1) {margin-right: 4%;}
.nanum-wrap li a {display: block;}
.nanum1 {background-image: url('../images/cm_img01.jpg');}
.nanum2 {background-image: url('../images/cm_img02.jpg');}
.nanum3 {background-image: url('../images/cm_img03.jpg');}
.nanum4 {background-image: url('../images/cm_img04.jpg');}
.nanum {padding: 2.4rem 0;   color: #fff;}
.nanum dt {margin-bottom: 1.2rem; font-size: 2rem;}
.nanum dd {padding: 0 1rem;}

/* slick */
.slide-controls {/*이전다음버튼영역*/ margin-top: 3rem;}
.slick-dots {}
.slick-dots li {display: inline-block; margin-right: 0.9rem;}
.slick-dots button {width: 1rem; height: 1rem; border: 0; border-radius: 100%; text-indent: -9999em; font-size: 0; line-height: 0; background-color: #fff; opacity: 0.2; box-sizing: content-box;}
.slick-dots .slick-active button {border: 2px solid #fff; background-color: transparent; opacity: 1;}
.slick-arrow {display: none; width: 4.8rem; height: 4.8rem; border: 1px solid rgba(000, 000, 000, 0.9); background: transparent no-repeat 50%; text-indent: -9999em; font-size: 0; line-height: 0;}
.slick-prev {background-image: url('../images/icon_slide_prev_02.png');}
.slick-next {border-left-width: 0; background-image: url('../images/icon_slide_next_02.png');}
.light .slick-arrow {border-color: #666;}
.light .slick-prev {background-image: url('../images/icon_slide_prev_01.png');}
.light .slick-next {background-image: url('../images/icon_slide_next_01.png');}
#main-section6 .slick-arrow {position: absolute; top: 50%; margin-top: -2.4rem; border: 0; z-index: 1; opacity: 0.5;} 
#main-section6 .slick-prev {left: 0;}
#main-section6 .slick-next {right: 0;}
#main-section4 .slick-track:before {position: absolute; left: 0; top: 2.9rem;  content: ''; display: block; width: 100%; height: 0.3rem; background-color: #d0503e;}

#menu-section {display: none;}

/* 모바일까지 ~767px */
@media screen and (max-width: 767px) {
    #main-section1 .section-hgroup-wrap {width: 60%;}
    #main-section1 .section-hgroup-wrap .section-h2 > span {display: block;}
    .section-h2 > span { display: inline;}
    .section-no {display: none;}
    #ka-main .section {padding: 0 0 0 2rem;}
    #ka-main #main-section6 {padding: 0 2rem;}
    .single-arrows {display: none;}
}

/* 태블릿부터 768px~ */
@media screen and (min-width: 768px) {
    .section-h2 {line-height: 8rem; width: 40rem; margin: 4rem 0 3rem; font-size: 6rem; word-break: keep-all;}
    .section-desc {width: 60%; margin-bottom: 6rem; font-size: 2.2rem;}
    .int-slide {height: auto;}
    .int-txt {display: block;}
    .adopt-process {display: block;}
    .adopt-process li {float: left; width: 23%; height: 4rem; padding: 0 2rem;  margin: 0.5rem 2% 0.5rem 0; line-height: 4rem; border: 2px solid #ddd; text-align: center; color: #222; border-radius: 2rem;}
    #main-section6 .fp-tableCell {padding-right: 2%;}
    .nanum {padding: 3.2rem 0;}
    .nanum dt {margin-bottom: 1.6rem; font-size: 3.2rem;}
    .nanum dd {padding: 0 7rem; font-size: 2rem;}
}

/* 태블릿만 768px~1279px */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .section-hgroup-wrap {transform: scale(1.1); transform-origin: left center;}
}

/* PC부터 1280px~ */
@media screen and (min-width: 1280px) {
    #menu-section {display: block;}
    .section-hgroup {float: left; width: 50rem; padding-right: 10rem; }
    #ka-main .section {padding-left: 10rem; background: no-repeat 50%; background-size: 120% 100%;}
    #ka-main .section .fp-tableCell {padding-top: 9rem;}
    #ka-main #main-section1 {background-image: none;}
    #ka-main #main-section2 {background-image: url('../images/bg_main_02.png');}
    #ka-main #main-section3 {background-image: url('../images/bg_main_03.png');}
    #ka-main #main-section4 {background-image: url('../images/bg_main_04.png');}
    #ka-main #main-section5 {background-image: url('../images/bg_main_05.png');}
    #ka-main #main-section6 {background-image: url('../images/bg_main_06.png');}
    #ka-main #main-section1.fp-completely, #ka-main #main-section4.fp-completely {background-size: 100% 100%;}
    #ka-main #main-section2.fp-completely, #ka-main #main-section3.fp-completely {background-size: 100% 100%;}
    
    
    #menu-section {display: block;}

    /*메인비주얼*/
    #ka-main .section-tab1 {padding-left: 0; padding-top: 0;}
    #ka-main .section-tab1 .fp-tableCell {vertical-align: middle;}
    .section-hgroup-wrap {padding-left: 10rem;}
    .main-visual-slide {background-position: 50%; background-size: cover;}
    .main-visual-slide1 {background-image: url('../images/main_visual_img01.jpg');}
    .main-visual-slide2 {background-image: url('../images/main_visual_img02.jpg');}
    .main-visual-slide3 {background-image: url('../images/main_visual_img03.jpg');}
    .main-visual-slide4 {background-image: url('../images/main_visual_img04.jpg');}


    /* 풀페이지 섹션별 글자색과 로고 */
    .fp-viewing-section-2 #ka-hd .hd-menu a {color: #000;}
    .fp-viewing-section-3 #menu-section a {color: #666;}
    .fp-viewing-section-3 #menu-section li:before, .fp-viewing-section-3 #menu-section li:after {background-color: #999;}
    .fp-viewing-section-3 #menu-section .active a {color: #f55521;}
    .fp-viewing-section-3 #menu-section .active:before {background-color: #f55521;}
    .fp-viewing-section-3 #ka-hd a,.fp-viewing-section-4 #ka-hd a,.fp-viewing-section-5 #ka-hd a {color: #222;}
    .fp-viewing-section-3 .ka-logo,.fp-viewing-section-4 .ka-logo,.fp-viewing-section-5 .ka-logo {background-image: url('../images/kaps_logo_color.png');}
    .fp-viewing-footer #ka-hd {background-color: rgba(0,0,0,0.7);}

    
    .section-h2 > span {font-size: 5rem;}
    .section-h2 .sec1_cm2 {font-size: 6.5rem;}
    .section-desc {width: 100%; font-size: 1.8rem;}
    .section-container {float: left; width: calc(100% - 50rem); margin: 0;}
    #main-section1 .section-container {max-width: 91.5rem; overflow: hidden;}
    
    .int-slide {width: 48rem; height: 60rem;}
    .int-img {height: 30rem; padding: 6rem 1.5rem;}
    .int-wrap dl  {padding: 5rem;}

    .adopt-process li {float: left; width: 45%; height: 4rem; margin: 0.5rem 5% 0 0; line-height: 4rem; border: 2px solid #ddd; text-align: center; color: #222; border-radius: 2rem;}

    .nanum-wrap {max-width: 700px;}
    .nanum {height: 24rem;  padding: 6rem 2.4rem 0;   color: #fff;}
    .nanum dt {margin-bottom: 1.2rem; font-size: 2.4rem;}
    .nanum dd {padding: 0 2.5rem;}
}

/* PC부터 1600px~ */
@media screen and (min-width: 1600px) {
    #ka-main .section {padding-left: 26rem;}
    #ka-main .section-tab1 {padding-left: 0; padding-top: 0;}
    .section-hgroup-wrap {padding-left: 26rem;}
}