@charset "utf-8";
/* 스토브리그 PJ 메인페이지 CSS - main.css */

/* 외부 CSS 합치기 */
@import url(reset.css);
@import url(core.css);
@import url(common.css);

/* 공사중 표시 */
/* body *{
    outline: 1px dotted red;
} */

body{
    background: 
    /* url(../images/sl_logo.png) no-repeat fixed 92% 25%, */
    url(../images/sl_main.jpg) no-repeat fixed center/cover;
    /* background-color: #1c5c50; */
}

/****************************** 메인 영역 ******************************/
/* 메인영역 속박스 */
.cont{
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5);
}
/* 전체 캐릭터 박스 */
.cbx{
    width: 90%;
    margin: 0 auto;
    margin-top: 300px;
}
/* 자식요소의 float 해제 clear설정 가상요소로 하기 */
.cbx::after{
    content: '';
    display: block;
    clear: both;
}
/* 각각의 캐릭터 박스 공통 */
.cat{
    float: left;
    width: 24%;
    margin: 0 .5%;
}

/* 캐릭터 이미지(.ci 직계 img에만 적용되게 만들기) */
.ci>img{
    width: 100%;
}
/* 캐릭터 이름 이미지 박스 */
.ci figcaption{
    margin-top: -40%;
    text-align: center;
}
/* 캐릭터 이름 이미지 */
.ci figcaption img{
    width: 60%;
}
/* 캐릭터 이름 이미지 중 첫번째 이미지 처음에 숨기기 */
.ci figcaption img:first-child{
    display: none;
}
/* .cat박스에 마우스오버시 진한 이미지 보이기 */
.cat:hover .ci figcaption img:first-child{
    display: inline;
}
/* .cat박스에 마우스오버시 흐린 이미지 숨기기 */
.cat:hover .ci figcaption img:last-child{
    display: none;
}
/* 캐릭터 설명 박스 공통 */
.cd{
    height: 0px;
    background: #e6e6e6 no-repeat center/cover;
    border-radius: 15px 10px 10px 20px;
    margin-top: 40px;
    overflow-y: scroll;
}
/* 캐릭터 설명 박스 마우스 오버시 */
.cat:hover .cd{
    height: 350px;
}
/* 캐릭터 이미지 박스 */
.cat .ci{
    transition: margin-top .4s;
}
/* 캐릭터 이미지 박스에 마우스 오버시 */
.cat:hover .ci{
    margin-top: -60%;
}
/* 캐릭터 설명박스 안의 배역 이름 */
.cd h3{
    font-family: 'Black Han Sans', sans-serif;
    font-size: 30px;
    font-weight: normal;
    color: #1f1f1f;
    margin-top: 10px;
    padding: 10px 15px 0px;
    white-space: -2px;
}
/* 배역 이름 가상요소 */
.cd h3::before{
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../images/dreams.png) no-repeat 0 0/30px;
    vertical-align: -3px;
    margin-right: 5px;
}
/* 배역 이름 부제목 */
.cd h2{
    font-family: 'Gothic A1', sans-serif;
    font-size: 20px;
    padding: 5px 15px 0px;
}
/* 캐릭터 설명 */
.cd p{
    padding: 10px;
    line-height: 1.5;
}
/* 캐릭터 설명 첫번째 줄 디자인 */
.cd p:first-child::first-letter{
    font-family: 'Gugi', cursive;
    font-size: 25px;
    color: #ffee00;
    text-shadow:
    1px 0 #000,
    -1px 0 #000,
    0 1px #000,
    0 -1px #000;
}

/* 세로 포스터 공통 박스 */
.poster{
    top: 20%;
    right: -200px;
    position: fixed;
    transition: right .3s;
}
/* '포스터보기'에 마우스오버시 이미지 등장 */
.poster:hover{
    right: 0;
}
/* 포스터 보기 텍스트 */
.poster figcaption{
    position: absolute;
    top: 0;
    right: 100%;
    width: 50px;
    height: 100%;
    padding-left: 20px;
    text-align: center;
    background-color: #333;
    writing-mode: vertical-lr;
    font-size: 30px;
    font-weight: bold;
    color: lightsalmon;
    border-radius: 10px 0 0 10px;
}
/* 세로 포스터 이미지 */
.poster img{
    width: 200px;
    vertical-align: middle;
}

/* 
((궁금)) 선생님이랑 똑같이 했는데, 얘는 브라우저 사이즈를 줄이면 이름이미지가 너무 높게 올라가요....... 왜 그럴까요......?
=>%는 기준이 부모박스라서! 부모박스가 세로로 길쭉하니까~ 얘도 덩달아 높게 올라가는 거 아닐까....??
    ((해결))!!!!!아 이거 내가 캐릭터 이름 이미지 박스에 margin-top를 %가 아니라 픽셀로 줘서 고정된거였어!!!!!!
    
((궁금)) 아니 왜 ci가 img보다 더 박스 크기가 작게 나오지요..................??
=>((해결))이거 이미지가 더 커서 그런거 같은데...?!
*/

/* 
((궁금)) 오른쪽 화면밖에 이미지 숨기고 마우스오버하면 이미지 등장하게(fixed 써서) 만들었는데... 픽셀로 만들면 쉽게 되는데, %로 이미지 크기 조절하면 잘 안돼ㅠㅠ...
이거를... 이미지 크기를 %로 조정할 때는... 어떻게 해야 하려나....ㅠㅠ..
*/