@charset 'utf-8';/* 공통(모바일위주) */
/* 1. 독서동아리 소개 */
.intro-img { margin-bottom: 6rem; } 
.intro-img:before { content: ''; display: block; width: 100%; padding-top: 74%; margin-bottom: 3rem; background-position: center center; background-size: cover; background-repeat: no-repeat; } 
.intro-ov:before { background-image: url('../images/introduce_01.jpg'); } 
.intro-good:before { background-image: url('../images/introduce_02.jpg'); } 
.intro-good-list { position: relative; margin: auto; text-align: center; } 
.intro-good-list:before { position: absolute; left: 0; top: 50%; content: ''; display: block; width: 100%; height: 0.1rem; background-color: #ddd; } 
.intro-good-list li { position: relative; border-right: 1px solid #ddd; } 
.intro-good-list li:nth-child(even) { border-right-width: 0; } 
.intro-good-list li:before { content: ''; display: block; width: 100%; padding-top: 100%; } 
.intro-good-list li span { position: absolute; left: 0; top: 0; display: block; width: 100%; padding-top: calc((100% - 11.6rem) * 0.5); } 

/* 2. 독서동아리 시작하기 */
.intro-start-container { background-color: #f6f6f6; } 
.intro-join { } 
.intro-join dt, .intro-make li { margin: 0.8rem 0; color: #333; font-weight: 500; } 
.intro-join dt:before, .intro-make li:before { position: relative; top: 0.7rem; content: '·'; margin-right: 0.5rem; color: #027758; font-size: 3.2rem; line-height: 0; } 
.intro-join dd { margin-bottom: 1.5rem; } 
.intro-make { margin-top: 2rem; } 

/* 3. */
.intro-space:before { background-image: url('../images/introduce_03.jpg'); } 
.intro-space strong, .intro-space strong a { display: inline-block; } 


/* 4.토의하기 */
.discussion-container { text-align: center; background-color: #027758; } 
.discussion-container p { opacity: 0.7; } 
.discussion-wrap { margin: 3rem 0; font-size: 1.6rem; font-weight: 500; } 
.discussion-wrap li { height: 24rem; padding: 1.2rem 0; } 
.discussion { position: relative; display: table; width: 100%; height: 100%; border: 0.3rem solid #fff; } 
.discussion:before { content: ''; position: absolute; right: 0; top: 0; width: 6rem; height: 0.1rem; background-color: #fff; opacity: 0.5; transform: rotate(-45deg); transform-origin: right top; } 
.discussion-inner { display: table-cell; vertical-align: middle; } 

/* 5. 활동 */
.doing-container { } 
.doing-wrap { } 
.doing-wrap li { } 
.intro-ending { padding: 15rem 0; margin: 10rem 0; background-image: url('../images/bg_introduce_02.jpg'), url('../images/bg_introduce_03.jpg'); background-position: center top, center bottom; background-repeat: no-repeat; background-size: 16rem auto; font-size: 2.2rem; color: #333; } 
.intro-ending span { display: block; } 

/* 모바일만 ~767px */
@media screen and (max-width: 767px){
 .intro-good-list { max-width: 46rem; } 
 }

/* 태블릿부터 768px~ */
@media screen and (min-width: 768px){
 .intro-img:before { padding-top: 33%; } 
 .intro-ov:before { background-position: center 80%; } 
 .intro-good-list li:before { padding-top: 60%; } 
 .intro-good-list li span { padding-top: calc((60% - 13.2rem) * 0.5); } 
 .book-choice dd:first-of-type { height: 7rem; } 
 .discussion-wrap { margin: 6rem 0; } 
 .discussion-wrap li { padding: 0 1.2rem; } 
 }

/* 태블릿만 768px~1023px */
@media screen and (min-width: 768px) and (max-width: 1023px){
 .doing-container .doing-wrap li { padding: 5rem 0; border-top: 1px solid #ddd; } 
 .doing-wrap li:nth-child(1), .doing-wrap li:nth-child(2) { border-top-width: 0; } 
 .doing-wrap li:nth-child(even) { border-right-width: 0; } 
 }

/* PC부터 1024px~ */
@media screen and (min-width: 1024px){
 .intro-img { position: relative; overflow: hidden; margin-bottom: 9rem; } 
 .intro-img:before { position: absolute; top: 0; width: 45%; height: 100%; } 
 .intro-img-left { padding: 8rem 0 8rem 55%; } 
 .intro-img-left:before { left: 0; } 
 .intro-img-right { padding: 8rem 55% 8rem 0; } 
 .intro-img-right:before { right: 0; } 
 .intro-good-list { padding: 6rem 0; } 
 .intro-good-list:before { display: none; } 
 .intro-good-list li:before { display: none; } 
 .intro-good-list li:nth-child(2) { border-right-width: 0.1rem; } 
 .intro-good-list li span { position: static; padding: 2rem 0; } 
 /* 2. 독서동아리 시작하기 */
 .intro-start-container { padding: 0; background-color: #f6f6f6; } 
 .intro-start-container > .wrap { position: relative; padding: 9rem 0; z-index: 1; } 
 .intro-start-bg { position: absolute; right: 0; top: 0; width: 24.9rem; height: 33.6rem; background: url('../images/bg_introduce_01.jpg') right top no-repeat; z-index: -1; } 
 .discussion-wrap { font-size: 1.8rem; } 
 .intro-ending { max-width: 108rem; padding: 6rem 0; margin: 10rem auto; background-position: left center, right center; background-size: inherit; font-size: 2.5rem; } 
 .intro-ending span { display: inline; } 
 .intro-ending span:last-of-type { display: block; } 
 }

/* 작은 PC 1024px~1279px */
@media screen and (min-width: 1024px) and (max-width: 1279px) {}

/* PC 1280px~ */
@media screen and (min-width: 1280px) {}