@charset "utf-8";

.basic {}
.basic > div {background-color: #fff;}
.basic > div > .container {display: flex; padding: 120px 0;}
.basic > div h4 {width: 25%; font-weight: 600;}
.basic > div h4 b {color: #00a041; font-weight: 600;}
.basic > div h4:before {position: relative; display: block; width: 40px; height: 3px; background-color: #00a041; margin-bottom: 20px; content: '';}
.basic > div h4 .small {display: block; margin-top: 5px; font-weight: 300;}
.basic > div .cont {width: 75%;}
.basic > div .cont > .image { border-radius: 10px; overflow: hidden; margin-bottom: 40px;}
.basic > div .cont > .text b {color: #00a041; font-weight: 600;}
.basic > div .cont p {word-break: keep-all;}
.basic > div .cont > .text p {margin-bottom: 20px; word-break: keep-all; font-size: 1em;}
.basic > div .cont > .text p:last-child{margin-bottom: 0;}

.basic > div:nth-child(odd) {background-color: #000; background-size: cover; background-repeat: no-repeat; background-position: center;}
.basic > div:nth-child(odd) h4,
.basic > div:nth-child(odd) h4 b {color: #fff;}
.basic > div:nth-child(odd) .cont {color: #fff;}

	@media screen and (max-width:1449px){
                .basic > div > .container {padding: 100px 2%;}
                .basic > div h4 {width: 30%;}
                .basic > div .cont {width: 70%;}
	}

	@media screen and (max-width:1199px){
                .basic > div h4 {width: 25%;}
                .basic > div .cont {width: 75%;}
	}

	@media screen and (max-width:1024px){
                .basic > div > .container {padding: 80px 4%;}
	}

	@media screen and (max-width:999px){
                .basic > div > .container {flex-direction: column;}
                .basic > div h4 {width: 100%; margin-bottom: 50px;}
                .basic > div h4 > br {display: none;}
                .basic > div h4 .small > br {display: none;}
                .basic > div .cont {width: 100%;}
	}

	@media screen and (max-width:799px){
                .basic > div > .container {padding: 60px 4%;}
                .basic > div h4 {margin-bottom: 30px;}
	}

	@media screen and (max-width:499px){
                .basic > div > .container {padding: 40px 4%;}
                .basic > div h4 {margin-bottom: 20px;}
                .basic > div .cont > .image  {margin-bottom: 20px;}
                .basic > div .cont > .text p {margin-bottom: 10px;}
	}



/* 대한민국그래핀산업협회는 */
.company > div.sec01 {background-image: url('../img/content/companySec01Bg.jpg');}

/* 인사말 */
.company > div.sec02 {}
.company > div.sec02 .image {display: flex; justify-content: center; align-items: center; background-color: #fafafa; height: 350px;}
.company > div.sec02 .image > img {width: 40%;}
.company > div.sec02 .text .sign {font-weight: 600; padding-top: 30px;}

	@media screen and (max-width:1199px){
                .company > div.sec02 .image {height: 300px;}
                .company > div.sec02 .image > img {width: 50%;}
                }

	@media screen and (max-width:599px){
                .company > div.sec02 .image {height: 200px;}
                .company > div.sec02 .image > img {width: 70%;}
	}

	@media screen and (max-width:499px){
                .company > div.sec02 .image > img {width: 90%;}
	}

/* 목적과 사업 */
.company > div.sec03 {background-image: url('../img/content/companySec03Bg.jpg');}
.company > div.sec03 ul.cont {display: flex; flex-wrap: wrap; gap: 5px;}
.company > div.sec03 ul.cont > li {position: relative; width: calc(20% - 5px); padding-top: calc(20% - 5px); border-radius: 50%;}
.company > div.sec03 ul.cont > li:nth-child(odd) {background-color: #00a041;}
.company > div.sec03 ul.cont > li:nth-child(even) {background-color: #fff; color: #333;}
.company > div.sec03 ul.cont > li > h5 {display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: 600; text-align: center; letter-spacing: -0.05em; padding: 10px; word-break: keep-all;}
.company > div.sec03 ul.cont > li > h5 .small {display: block; font-weight: 400; letter-spacing:-0.03em; margin-bottom: 5px;}

	@media screen and (max-width:1449px){
                .company > div.sec03 ul.cont > li {width: calc(25% - 5px); padding-top: calc(25% - 5px);}
                .company > div.sec03 ul.cont > li:nth-child(5),
                .company > div.sec03 ul.cont > li:nth-child(7) {background-color: #fff; color: #333;}
                .company > div.sec03 ul.cont > li:nth-child(6),
                .company > div.sec03 ul.cont > li:nth-child(8) {background-color: #00a041; color: #fff;}
        }

	@media screen and (max-width:649px){
                .company > div.sec03 ul.cont > li {width: calc(33.33% - 5px); padding-top: calc(33.33% - 5px);}
                .company > div.sec03 ul.cont > li:nth-child(2),
                .company > div.sec03 ul.cont > li:nth-child(4),
                .company > div.sec03 ul.cont > li:nth-child(6),
                .company > div.sec03 ul.cont > li:nth-child(8) {background-color: #fff; color: #333;}
                .company > div.sec03 ul.cont > li:nth-child(3),
                .company > div.sec03 ul.cont > li:nth-child(5),
                .company > div.sec03 ul.cont > li:nth-child(7),
                .company > div.sec03 ul.cont > li:nth-child(9) {background-color: #00a041; color: #fff;}
        }

	@media screen and (max-width:499px){
                .company > div.sec03 ul.cont > li {width: calc(50% - 5px); padding-top: calc(50% - 5px);}
                .company > div.sec03 ul.cont > li:nth-child(2),
                .company > div.sec03 ul.cont > li:nth-child(3),
                .company > div.sec03 ul.cont > li:nth-child(6),
                .company > div.sec03 ul.cont > li:nth-child(7) {background-color: #fff; color: #333;}
                .company > div.sec03 ul.cont > li:nth-child(4),
                .company > div.sec03 ul.cont > li:nth-child(5),
                .company > div.sec03 ul.cont > li:nth-child(8),
                .company > div.sec03 ul.cont > li:nth-child(9) {background-color: #00a041; color: #fff;}
        }


/* 연혁 */
.company > div.sec04 .year {display: flex;}
.company > div.sec04 .year > h5 {width: 90px; font-weight: 500;}
.company > div.sec04 .year > ul {position: relative; width: calc(100% - 90px); padding: 0 0 57px 30px;}
.company > div.sec04 .year > ul::before {position: absolute; display: block; width: 8px; height: 8px; top: 10px; left: 1px; background-color: #00a041; border-radius: 50%; content: ''; z-index: 2;}
.company > div.sec04 .year > ul::after {position: absolute; display: block; width: 1px; height: 100%; top: 14px; left: 3.5px; background-color: #ddd; content:''; z-index: 1;}
.company > div.sec04 .year:last-child > ul {padding-bottom: 0;}
.company > div.sec04 .year:last-child > ul::after {display: none;}
.company > div.sec04 .year > ul > li {display: flex; padding: 0; margin-bottom:10px;}
.company > div.sec04 .year > ul > li:last-child {margin-bottom: 0;}
.company > div.sec04 .year > ul > li > b {display: inline-block; font-weight: 500; margin-right: 10px;}
.company > div.sec04 .year > ul > li:last-child {padding-bottom: 0;}
.company > div.sec04 .year > ul > li > h6 {position: relative; top: -2px; font-weight: 500; width: 80px; margin-right: 3vw;}
.company > div.sec04 .year > ul > li > .info {}
.company > div.sec04 .year > ul > li > .info > dl {display: flex; margin-bottom: 15px;}
.company > div.sec04 .year > ul > li > .info > dl:last-child {margin-bottom: 0;}
.company > div.sec04 .year > ul > li > .info > dl > dt {width: 30px; margin-right: 10px; font-weight: 500;}
.company > div.sec04 .year > ul > li > .info > dl > dd {width: calc(100% - 30px);}


	@media screen and (max-width:499px){
                .company > div.sec04 .year > h5 {width: 60px;}
                .company > div.sec04 .year > ul {position: relative; width: calc(100% - 60px);}
                .company > div.sec04 .year > ul::before {left: 0;}
        }


/* 조직도 */
.company > div.sec05 {background-image: url('../img/content/companySec05Bg.jpg');}

/* 주요 회칙 */
.company > div.sec06 .cont > ul {display: flex; flex-wrap: wrap; gap: 2vw; margin: 0;}
.company > div.sec06 .cont > ul > li {position: relative; width: calc(50% - 1vw); padding-top: 35%; overflow: hidden; border-radius: 10px;}
.company > div.sec06 .cont > ul > li > .image {position: absolute; top: -30%; left: 0;}
.company > div.sec06 .cont > ul > li > .image > img {transform: scale(1); transition: 0.3s;}
.company > div.sec06 .cont > ul > li > .text {display: flex; flex-direction: column; justify-content: flex-end; position: absolute; width: 100%; height: 100%; bottom: 0; color: #fff; padding: 40px; background-color: rgba(0,0,0,0.4);}
.company > div.sec06 .cont > ul > li > .text > h5 {font-weight: 600;}
.company > div.sec06 .cont > ul > li > .text > h5 .small {display: block; font-weight: 400;}
.company > div.sec06 .cont > ul > li > a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.company > div.sec06 .cont > ul > li:hover > .image > img {transform: scale(1.1);}
.company > div.sec06 .cont > ul > li:hover > .text {background-color: rgba(0,0,0,0.1);}

.company > div.sec06 .modal {display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 1;}
.company > div.sec06 .modal.show {display: flex;}
.company > div.sec06 .modal-content {position: relative; width: 80%; height: 100%; max-width: 800px; min-height: 400px; max-height: 500px; border-radius: 30px; overflow: hidden; color: #333;}
.company > div.sec06 .modal .close {position: absolute; top: 27px; right: 30px; width: 30px; height: 30px; font-size: 0; cursor: pointer; background: url('../img/common/btn_close.png') center no-repeat; z-index: 99;}
.company > div.sec06 .rules h5 {position: absolute; display: flex; align-items: center; width: 100%; height: 80px; top: 0; left: 0; padding: 10px 50px 0; background-color: #00a041; color: #fff; font-weight: 600;}
.company > div.sec06 .rulesWrap {height: calc(100% - 80px); margin-top: 80px; padding: 25px 0; background-color:#fff; }
.company > div.sec06 .rulesWrap .rulesCont {height: 100%; overflow-y: auto; margin:0 20px; padding: 0 30px;}
.company > div.sec06 .rulesWrap .rulesCont .sec {margin-bottom: 30px; word-break: keep-all;}
.company > div.sec06 .rulesWrap .rulesCont .sec h6 {color: #00a041; font-weight: 600;}

.company > div.sec06 .rulesWrap .rulesCont .sec dl {padding: 15px 0 0;}
.company > div.sec06 .rulesWrap .rulesCont .sec dl > dt {font-weight: 500;}
.company > div.sec06 .rulesWrap .rulesCont .sec dl > dt > b {font-weight: 500;}
.company > div.sec06.rulesWrap .rulesCont .sec dl > dd .subBox {padding: 5px 10px;}

        @media screen and (max-width:1449px){
                .company > div.sec06 .cont > ul > li {padding-top: 40%;}
                .company > div.sec06 .cont > ul > li > .image {top: -10%;}
                .company > div.sec06 .cont > ul > li > .text {padding: 40px 30px;}
        }

        @media screen and (max-width:1199px){
                .company > div.sec06 .modal .close {top: 22px;}
                .company > div.sec06 .rules h5 {height: 70px; padding: 5px 50px 0;}
                .company > div.sec06 .rulesWrap {height: calc(100% - 70px); margin-top: 70px;}
        }

        @media screen and (max-width:599px){
                .company > div.sec06 .cont > ul > li {width: 100%; padding-top: 200px;}
                .company > div.sec06 .cont > ul > li > .image {top: -50%;}
        }

        @media screen and (max-width:499px){
                .company > div.sec06 .cont > ul > li{padding-top: 180px; }
                .company > div.sec06 .cont > ul > li > .image {top: -30%;}
                .company > div.sec06 .cont > ul > li > .text {padding: 30px 20px;}
        }

        
/* Office */
.company > div.sec07 {background-image: url('../img/content/companySec07Bg.jpg');}
.company > div.sec07 .cont .map iframe {border-radius: 10px; overflow: hidden;}
.company > div.sec07 .cont .info {margin: 40px 0 0 0;}
.company > div.sec07 .cont .info > h5 {font-weight: 500; margin-bottom: 20px;}
.company > div.sec07 .cont .info > ul.num {display: flex;}
.company > div.sec07 .cont .info > ul.num > li {display: flex;}
.company > div.sec07 .cont .info > ul.num > li:before {position: relative; display: block; top: 7px; width: 1px; height: 14px; background-color: #ddd; margin: 0 10px; content: '';}
.company > div.sec07 .cont .info > ul.num > li:first-child:before {display: none;}

.company > div.sec07 .cont .info > ul.traffic {display: flex; flex-wrap: wrap;}
.company > div.sec07 .cont .info > ul.traffic:before {position: relative; display: block; width: 100%; height: 1px; background-color: #ddd; margin: 20px 0; content: '';}
.company > div.sec07 .cont .info > ul.traffic > li {margin-right: 20px;}
.company > div.sec07 .cont .info > ul.traffic > li > .small {color: #888; font-weight: 400;}

	@media screen and (max-width:1449px){
                .company > div.sec07 .cont .info {margin: 30px 0 0 0;}
        }

	@media screen and (max-width:999px){
                .company > div.sec07 .cont .map iframe {height: 400px;}
        }

	@media screen and (max-width:799px){
                .company > div.sec07 .cont .map iframe {height: 300px;}
        }

	@media screen and (max-width:599px){
                .company > div.sec07 .cont .map iframe {height: 250px;}

                .company > div.sec07 .cont .info > ul.traffic {flex-direction: column;}
                .company > div.sec07 .cont .info > ul.traffic > li {margin-right: 0;}
        }

	@media screen and (max-width:599px){
                .company > div.sec07 .cont .map iframe {height: 200px}
        }


/* 그래핀산업협회란? */
.graphene > div.sec01 {background-image: url('../img/content/grapheneSec01Bg.jpg');}
.graphene > div.sec01 .cont > .video {margin-bottom: 40px;}
.graphene > div.sec01 .cont > .video iframe {width:100%; height: 500px; border-radius: 10px; overflow: hidden;}
.graphene > div.sec01 .cont > .video > .authorship {text-align: center;}
.graphene > div.sec01 .cont .subCont {display: flex; margin-top: 40px;}
.graphene > div.sec01 .cont .subCont .image {width: 39%; padding-top: 39%; background:url('../img/content/grapheneSec01Img02.jpg') center no-repeat; background-size: cover; border-radius: 10px; margin-right: 1%; overflow: hidden;}
.graphene > div.sec01 .cont .subCont .image > img {width: 100% !important;}
.graphene > div.sec01 .cont .subCont .accordion {width: 60%; margin: 0 auto; max-height: 400px;}

.graphene > div.sec01 .accordion .item {border-radius: 12px; margin-bottom: 10px; overflow: hidden;}
.graphene > div.sec01 .accordion .item:last-child {margin-bottom: 0;}
.graphene > div.sec01 .accordion .question {padding: 14px 20px; cursor: pointer; position: relative; font-size: 1em; font-weight: 600; background-color: #fff; color: #00a041; transition: background 0.3s;}
.graphene > div.sec01 .accordion .question:hover,
.graphene > div.sec01 .accordion .item.active .question {background: #00a041; color: #fff;}
.graphene > div.sec01 .accordion .question::after {content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; transition: transform 0.3s, content 0.3s;}
.graphene > div.sec01 .accordion .item.active .question::after {content: '–';}
.graphene > div.sec01 .accordion .answer {max-height: 0; overflow: hidden; word-break: keep-all; padding: 0 20px; font-size: 1em; background: #fff; transition: max-height 0.4s ease; color:#333;}
.graphene > div.sec01 .accordion .answer .conT {font-size: 1em;}
.graphene > div.sec01 .accordion .item.active .answer {padding: 20px 15px 20px 25px; max-height: 290px; }
.graphene > div.sec01 .accordion .item.active .answer .conT {height: 230px; overflow-y: auto;}

	@media screen and (max-width:1399px){
                .graphene > div.sec01 .accordion .item.active .answer .con {overflow-y: auto;}
	} 

	@media screen and (max-width:999px){
                .graphene > div.sec01 .cont > .video iframe {height: 400px;}
	} 

	@media screen and (max-width:799px){
                .graphene > div.sec01 .cont > .video iframe {height: 300px;}
                .graphene > div.sec01 .cont .subCont {flex-direction: column}
                .graphene > div.sec01 .cont .subCont .image {width: 100%; padding-top: 300px; margin-bottom: 30px;}
                .graphene > div.sec01 .cont .subCont .accordion {width: 100%; max-height: inherit;}

                .graphene > div.sec01 .accordion .item.active .answer {max-height: inherit;}
                .graphene > div.sec01 .accordion .item.active .answer .conT {height: auto; line-height: 1.6em;}
	} 

	@media screen and (max-width:599px){
                .graphene > div.sec01 .cont > .video iframe {height: 250px;}
	} 

	@media screen and (max-width:499px){
                .graphene > div.sec01 .cont > .video iframe {height: 200px;}
                .graphene > div.sec01 .cont .subCont .image {width: 100%; padding-top: 200px; margin-bottom: 20px;}
	} 


/* 그래핀 12대 특성 */
.graphene > div.sec02 ul.cont {display: flex; flex-wrap: wrap; gap: 20px;}
.graphene > div.sec02 ul.cont > li {position: relative; width: calc(33.333% - 20px); text-align: center; background-color: #fafafa; padding: 40px 20px;}
.graphene > div.sec02 ul.cont > li > .icon {margin-bottom: 20px;}
.graphene > div.sec02 ul.cont > li > h5 {font-weight: 600; margin-bottom: 10px;}
.graphene > div.sec02 ul.cont > li > p {word-break: keep-all; font-size: 1em;}

	@media screen and (max-width:1199px){
                .graphene > div.sec02 ul.cont > li {width: calc(50% - 20px);}
                .graphene > div.sec02 ul.cont > li > .icon img {height: 75px !important;}

                .graphene > div.sec02 ul.cont > li > p {line-height: 1.4em;}
	} 

	@media screen and (max-width:799px){
                .graphene > div.sec02 ul.cont > li {padding: 30px 10px;}
                .graphene > div.sec02 ul.cont > li > .icon img {height: 65px !important;}
	} 

	@media screen and (max-width:599px){
                .graphene > div.sec02 ul.cont > li {width: 100%;}
                .graphene > div.sec02 ul.cont > li > .icon img {height: 60px !important;}
	} 


/* 그래핀의 역사 */
.graphene > div.sec03 {background-image: url('../img/content/grapheneSec03Bg.jpg');}
.graphene > div.sec03 ul.image {display: flex; text-align: center; gap: 10px;}
.graphene > div.sec03 ul.image > li > img {max-width: 300px !important; border-radius: 10px; overflow: hidden;}
.graphene > div.sec03 ul.image > li .name {margin-top: 10px; color: #888;}

	@media screen and (max-width:1449px){
                .graphene > div.sec03 ul.image > li > img {max-width: 250px !important;}
	}

	@media screen and (max-width:799px){
                .graphene > div.sec03 ul.image > li > img {max-width: 200px !important;}
	}

	@media screen and (max-width:599px){
                .graphene > div.sec03 ul.image > li {width: 50%;}
                .graphene > div.sec03 ul.image > li > img {max-width: 100% !important;}
                .graphene > div.sec03 ul.image > li .name {line-height: 1.2em;}
	}


/* 고품질 그래핀 기준 */
.standard > div.sec01 {background-color: #fff;}
.standard > div.sec01 h4,
.standard > div.sec01 h4 > b {color: #222;}
.standard > div.sec01 .cont {color: #333;}
.standard > div.sec01 .cont {display: flex; flex-direction: column; gap: 20px;}
.standard > div.sec01 .cont .box {display: flex; background-color: #fafafa; border-radius: 10px; overflow: hidden;}
.standard > div.sec01 .cont .box > .image {width: 40%; padding-top: 40%; background-size: cover; background-position: center;}
.standard > div.sec01 .cont .box > .image > img {width: 100% !important;}
.standard > div.sec01 .cont .box > .text {display: flex; justify-content: center; flex-direction: column; width: 60%; padding: 30px 3%; font-size: 1em;}
.standard > div.sec01 .cont .box > .text h5 {color: #00a041; font-weight: 600;}
.standard > div.sec01 .cont .box > .text h5 .small {font-weight: 400; letter-spacing: 0; color: #666; margin-left: 10px;}
.standard > div.sec01 .cont .box > .text ul {margin-top: 10px;}
.standard > div.sec01 .cont .box > .text ul > li {margin-top: 10px; word-break: keep-all; line-height: 1.4em; margin-left: 12px;}
.standard > div.sec01 .cont .box > .text ul > li > strong {display: block; font-weight: 600;}
.standard > div.sec01 .cont .box > .text ul > li > strong:before {position: relative; display: inline-block; width: 3px; height: 3px; background-color: #333; top: -5px; margin-left: -7px; margin-right: 5px; content:'';}

.standard > div.sec01 .cont .box:nth-child(1) > .image {background-image:url('../img/content/standardSec01Img01.jpg');}
.standard > div.sec01 .cont .box:nth-child(2) > .image {background-image:url('../img/content/standardSec01Img02.jpg');}
.standard > div.sec01 .cont .box:nth-child(3) > .image {background-image:url('../img/content/standardSec01Img03.jpg');}
.standard > div.sec01 .cont .box:nth-child(4) > .image {background-image:url('../img/content/standardSec01Img04.jpg');}
.standard > div.sec01 .cont .box:nth-child(5) > .image {background-image:url('../img/content/standardSec01Img05.jpg');}

	@media screen and (max-width:999px){
                .standard > div.sec01 .cont .box > .text {padding: 40px 3%;}
	}

	@media screen and (max-width:799px){
                .standard > div.sec01 .cont .box {flex-direction: column;}
                .standard > div.sec01 .cont .box > .image {width: 100%; padding-top: 300px;}
                .standard > div.sec01 .cont .box > .text {width: 100%;}
	}

	@media screen and (max-width:599px){
                .standard > div.sec01 .cont .box > .image {width: 100%; padding-top: 200px;}
	}

	@media screen and (max-width:499px){
                .standard > div.sec01 .cont .box > .text h5 .small {display: block; margin-left: 0;}
                .standard > div.sec01 .cont .box > .text {padding: 30px 3%;}
	}


/*케이핀*/
.kphene > div .cont > .text  > h5 {font-weight: 600; margin-bottom: 20px;}
.kphene > div .cont > .text  > h5 .small {font-weight: 400x;}

.kphene > div.sec01 {background-image: url('../img/content/kpheneSec01bg.jpg');}
.kphene > div.sec01 .cont > .image {background-color: #fff; text-align: center; padding: 50px 0;}
.kphene > div.sec01 .cont > .image > img {max-width: 300px !important;}
.kphene > div.sec01 .cont > .text > .sTit {display: inline-flex; margin-bottom: 10px; background-color: #00a041; padding: 3px 10px; border-radius: 5px;}
.kphene > div.sec01 .cont .moreBtn {border-color: #fff; color: #fff;}

.kphene > div.sec03 {background-color: #efefef;}
.kphene > div.sec03 h4 {color: #222;}
.kphene > div.sec03 .cont {color: #333;}
.kphene > div.sec03 .cont > .text > .box {padding: 23px 20px; border: 1px solid rgba(0,160,65,0.6); background-color: rgba(255,255,255,0.6); margin-bottom: 20px;}
.kphene > div.sec03 .cont > .text > .box > dl {margin-bottom: 20px;}
.kphene > div.sec03 .cont > .text > .box > dl:last-child {margin-bottom: 0;}
.kphene > div.sec03 .cont > .text > .box > dl > dt {font-weight: 600; margin-bottom: 5px; color: #00a041;}

.kphene > div.sec03 .accordion {margin-bottom: 20px;}
.kphene > div.sec03 .accordion .item {border-radius: 12px; margin-bottom: 10px; overflow: hidden;}
.kphene > div.sec03 .accordion .title {padding: 14px 20px; cursor: pointer; position: relative; font-weight: 600; background-color: #fff; color: #00a041; transition: background 0.3s;}
.kphene > div.sec03 .accordion .title:hover,
.kphene > div.sec03 .accordion .item.active .title {background: #00a041; color: #fff;}
.kphene > div.sec03 .accordion .title::after {content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; transition: transform 0.3s, content 0.3s;}
.kphene > div.sec03 .accordion .item.active .title::after {content: '–';}
.kphene > div.sec03 .accordion .text {font-size: 1em; max-height: 0; overflow: hidden; word-break: keep-all; padding: 0 20px; background: #fff; transition: max-height 0.4s ease; color:#333;}
.kphene > div.sec03 .accordion .text > ul > li {font-size: 1em; word-break: keep-all; margin-left: 22px;}
.kphene > div.sec03 .accordion .text > ul > li:before {position: relative; display: inline-block; margin-left: -18px; margin-right: 10px; content: '-';}
.kphene > div.sec03 .accordion .item.active .text {padding: 20px; max-height: 500px; /* 내용 길이에 따라 조절 가능 */}

        @media screen and (max-width:1199px){
                .kphene > div.sec01 .cont > .image > img {max-width: 250px !important;}
        }

        @media screen and (max-width:999px){
                .kphene > div.sec01 .cont > .image > img {max-width: 200px !important;}
        }

        @media screen and (max-width:599px){
                .kphene > div.sec01 .cont > .image > img {max-width: 150px !important;}
        }

        @media screen and (max-width:499px){
                .kphene > div.sec01 .cont > .image {padding:40px 0;}
                .kphene > div.sec01 .cont > .image > img {max-width: 100px !important;}
        }

    

/* 후원 */
.donate > div.sec01 {background-image: url('../img/content/donateSec01bg.jpg');}
.donate > div.sec01 h4,
.donate > div.sec01 h4 > b {color: #222;}
.donate > div.sec01 .cont {color: #333;}
.donate > div.sec01 .cont > h5 {font-weight: 600; margin-bottom: 20px; word-break: keep-all;}
.donate > div.sec01 .cont > h5 > b {color: #00a041; font-weight: 600;}
.donate > div.sec01 .cont > p {font-size: 1em;}
.donate > div.sec01 .cont ul.box {display: flex; gap: 2vw; margin-top: 50px;}
.donate > div.sec01 .cont ul.box > li {width:calc(33.333% - 1vw);}
.donate > div.sec01 .cont ul.box > li .image {margin-bottom: 20px; border-radius: 10px; overflow: hidden;}
.donate > div.sec01 .cont ul.box > li .text > h6 {font-weight: 600; margin-bottom: 10px;}
.donate > div.sec01 .cont ul.box > li .text > p {word-break: keep-all; min-height: 58px; word-break: keep-all;}
.donate > div.sec01 .cont ul.box > li .moreBtn {background-color: #fff; margin-top: 20px;}

        @media screen and (max-width:799px){
                .donate > div.sec01 .cont ul.box > li .text > p {line-height: 1.2em;}
        }

        @media screen and (max-width:599px){
                .donate > div.sec01 .cont ul.box {flex-direction: column}
                .donate > div.sec01 .cont ul.box > li {width: 100%;}
                .donate > div.sec01 .cont ul.box > li .image {height: 250px; overflow: hidden;}
                .donate > div.sec01 .cont ul.box > li .image img {position: relative; top: 50%; transform: translateY(-50%);}
        }

        @media screen and (max-width:499px){
                .donate > div.sec01 .cont ul.box > li .image {height: 200px;}
        }


/* 회원가입 프로세스 */
.signup > div.sec01 {background-image: url('../img/content/signupSec01bg.jpg'); background-attachment: fixed;}
.signup > div.sec01 ul.cont {display: flex; gap: 0;}
.signup > div.sec01 ul.cont > li {position: relative; width:20%; padding-top: 20%; background-color: #fff; border-radius: 50%;}
.signup > div.sec01 ul.cont > li:after {position: absolute; display: flex; align-items: center; justify-content: center; top: calc( 50% - 20px); right: -20px; width: 40px; height: 40px; background-color: #00a041; border-radius: 50%; z-index: 1; content:'→';}
.signup > div.sec01 ul.cont > li:last-child:after {display: none;}
.signup > div.sec01 ul.cont > li > h5 {position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; color: #333; text-align: center;}

	@media screen and (max-width:799px){
                .signup > div.sec01 ul.cont > li:after {width: 30px; height: 30px; top:calc(50% - 15px); right: -15px;}
                .signup > div.sec01 ul.cont > li > h5.fs24 {font-size: 1.0rem !important;}
        }

	@media screen and (max-width:599px){
                .signup > div.sec01 ul.cont {flex-wrap: wrap; justify-content: center;}
                .signup > div.sec01 ul.cont > li {width: 33.333%; padding-top: 33.333%;}
                .signup > div.sec01 ul.cont > li:nth-child(3):after {display: none;}
                .signup > div.sec01 ul.cont > li:nth-child(4):before {position: absolute; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; top:calc(50% - 15px); left: -15px; background-color: #00a041; border-radius: 50%; z-index: 1; content:'→';}
        }


/* 회원 분류 소개 */
.signup > div.sec02 .cont > ul {display: flex; flex-wrap: wrap;; gap: 2vw; margin: 0 -0.5vw;}
.signup > div.sec02 .cont > ul > li {position: relative; width: calc(50% - 1vw); padding-top: 35%; border-radius: 10px; overflow: hidden; cursor: pointer;}
.signup > div.sec02 .cont > ul > li > .image {position: absolute; top: -30%; left: 0;}
.signup > div.sec02 .cont > ul > li > .image > img {transform: scale(1); transition: 0.3s;}
.signup > div.sec02 .cont > ul > li > .text {display: flex; flex-direction: column; justify-content: flex-end; position: absolute; width: 100%; height: 100%; bottom: 0; color: #fff; padding: 30px; background-color: rgba(0,0,0,0.4);}
.signup > div.sec02 .cont > ul > li > .text > h5 {margin-bottom: 10px; font-weight: 600;}
.signup > div.sec02 .cont > ul > li > .text > h5 .price {font-weight: 400;}
.signup > div.sec02 .cont > ul > li > .text > ul {margin-top: 10px; min-height: 70px; padding-left: 25px;}
.signup > div.sec02 .cont > ul > li > .text > ul > li {word-break: keep-all; line-height: 140%;}
.signup > div.sec02 .cont > ul > li > .text > ul > li:before {position: relative; display: inline-block; top: -6px; width: 8px; height: 1px; background-color:#fff; margin-right: 10px; margin-left: -18px; content:'';}

.signup > div.sec02 .cont .btnWrap {margin-top: 50px; text-align: center;}
.signup > div.sec02 .cont .btnWrap .moreBtn {justify-content: center; min-width: 150px;}

.signup > div.sec02 .cont > ul > li:hover > .image > img {transform: scale(1.1);}
.signup > div.sec02 .cont > ul > li:hover > .text {background-color: rgba(0,0,0,0.1);}

        @media screen and (max-width:1199px){
                .signup > div.sec02 .cont > ul > li > .text {padding: 20px;}
        }

	@media screen and (max-width:999px){
                .signup > div.sec02 .cont > ul > li > .text > ul > li:before {width: 6px;}
        }

	@media screen and (max-width:799px){
                .signup > div.sec02 .cont > ul > li {padding-top: 45%;}
                .signup > div.sec02 .cont > ul > li > .image {top: 0;}
                .signup > div.sec02 .cont > ul > li > .text > ul {min-height: 80px;}
                .signup > div.sec02 .cont > ul > li > .text > h5 .price {display: block;}
        }

	@media screen and (max-width:599px){
                .signup > div.sec02 .cont > ul > li {width: 100%; padding-top: 250px; top:}
                .signup > div.sec02 .cont > ul > li > .image {top: 50%; transform: translateY(-50%);}
                .signup > div.sec02 .cont > ul > li > .text > ul {min-height: inherit; margin-top: 0;}
                .signup > div.sec02 .cont > ul > li > .text > h5 .price {display: inline-block;}
        }

/* 이용약관 & 개인정보처리방침 */
.privacy > .sec {margin-top: 25px;}
.privacy > .sec > h4 {word-break: keep-all; font-weight: 500;}
.privacy > .sec > h4 > b {font-weight: 500;}
.privacy > .sec > p {word-break: keep-all; padding: 15px 0 0;}
.privacy > .sec .subSec {padding: 15px 0 0 26px;}
.privacy > .sec .subSec > li {word-break: keep-all; margin-bottom: 5px;}
.privacy > .sec .subSec > li:last-child {margin-bottom: 0;}
.privacy > .sec .subSec > li:before {position: relative; display: inline-block; margin-left: -22px; margin-right: 5px;}
.privacy > .sec .subSec > li:nth-child(1):before { content: '1)';}
.privacy > .sec .subSec > li:nth-child(2):before { content: '2)';}
.privacy > .sec .subSec > li:nth-child(3):before { content: '3)';}
.privacy > .sec .subSec > li:nth-child(4):before { content: '4)';}
.privacy > .sec .subSec > li:nth-child(5):before { content: '5)';}
.privacy > .sec .subSec > li:nth-child(6):before { content: '6)';}

.privacy > .sec .subSec2 {padding: 15px 0 15px 26px;}
.privacy > .sec .subSec2 > li {word-break: keep-all; margin-bottom: 5px;}
.privacy > .sec .subSec2 > li:last-child {margin-bottom: 0;}
.privacy > .sec .subSec2 > li:before {position: relative; display: inline-block; margin-left: -22px; margin-right: 5px; font-family:'Verdana;'; font-weight: 600;}
.privacy > .sec .subSec2 > li:nth-child(1):before { content: '①';}
.privacy > .sec .subSec2 > li:nth-child(2):before { content: '②';}
.privacy > .sec .subSec2 > li:nth-child(3):before { content: '③';}

        @media screen and (max-width:599px){
                .privacy > .sec {margin-top: 20px;}
                .privacy > .sec > p {padding: 10px 0 0;}
                .privacy > .sec .subSec {padding: 10px 0 10px 26px;}
                .privacy > .sec .subSec > li {margin-bottom: 3px;}
                .privacy > .sec .subSec2 {padding: 10px 0 10px 26px;}
                .privacy > .sec .subSec2 > li {margin-bottom: 3px;}
        }