@charset "utf-8";

/****************************************
*			    gym.css              *
****************************************/

/*******************************[design]****************************/
/* title */
header > h1 { align-items: center;}
header > h1 > .titleIcon {
    width: 47px;
    height: 40px;
    margin-right: 10px;
    background: url(../../include/images/common/baseball.png)no-repeat;
    background-size: contain;
    /*    align-items: center;*/
}
.textcenter { text-align: center; }
header > .lineTwo {  align-items: flex-start; }
header > .lineTwo > .titleIcon { margin-top: 10px;}

main h1.maintitle {
    display: flex;
    position: absolute;
    top: -75px;
    left: 0px;
    align-items: center;
    font-size: 40px;
}
main h1.maintitle > .titleIcon {
    width: 47px;
    height: 40px;
    margin-right: 10px;
    background: url(../../include/images/common/baseball.png)no-repeat;
    background-size: contain;
    align-items: center;
}



/*================================= main 영역 ===================================== */
main { font-size: 37px; }
/* 예시 답안 */
.answer {  font-size: 35px; }
.answer.exanswer { color: #06418e; }


/* starBullet */
.starList.blue > li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 0.4em;
    letter-spacing: -1px;
}
.starList.blue > li:before {
    content: '';
    position: absolute;
    left: 0px;
    width: 30px;
    height: 30px;
    margin-top: 14px;
    margin-right: 10px;
    background: url(../images/common/star_blue.svg) no-repeat;
    background-size: 30px;
}
/* dotBullet */
.dotList > li:before {
    background: #05b9a0;
}
.dotList.orange > li:before { background: #edae4d; }

.dotText {
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
}
.dotText:before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 12px;
    height: 12px;
    background: #a481b9;
    border-radius: 50%;
}
.blueText { color: #4f81bd; }



.borderBox.text2 { padding: 10px; }




.pencil {
    background: url(../images/common/pencil.svg) 10px 14px no-repeat;
    background-size: 30px;
}
/* */
.board {
    position: relative;
    display: inline-block;
    line-height: 50px;
    padding: 0px 25px 0 65px;
    margin-bottom: 20px;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: #e3ecae;

}
.board:before {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
    width: 70px;
    height: 60px;
    background: url(../images/common/bord.png) no-repeat;
    background-size: 55px 56px;
}
.flower {
    position: relative;
    padding-left: 45px;
}
.flower:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 53px;
    background: url(../images/common/flower.png) no-repeat;
    background-size: contain;
}


/* 이야기 해보기 박스 */
.squarWrap { position: relative; }
.squareBox {
    position: absolute;
    top: -35px;
    left: 50%;
    font-size: 34px;
    color: #ffffff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: #85bfdc;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    z-index: 1;
}

/* 이미지 보더 */
.imgBorder {
    border-radius: 20px;
    border: 3px dashed #0980b9;
}

/* 보기 박스 */
.bogiWrap {
    position: relative;
    border-radius: 20px;
    border: 3px solid #b1c7eb;
    padding: 30px 20px 15px 20px;
    box-sizing: border-box;
}
.orangeBogi {
    position: absolute;
    top: -30px;
    left: 30px;
    padding: 0 15px;
    color: #ffffff;
    font-size: 34px;
    font-family: NanumsquareB;
    text-align: center;
    border-radius: 20px;
    background-color: #f79646;
}

/* 게임방법 깃발 */
.gameFlag {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 100px;
    color: #fff;
    font-size: 20px;
    background: url(../images/common/game_flag.svg) no-repeat;
    background-size: contain;
}
.gameFlag2 {
    position: absolute;
    top: 400px;
    right:20px;
    width: 150px;
    height: 115px;
    color: #fff;
    font-size: 20px;
    background: url(../images/common/game_flag2.svg) no-repeat;
    background-size: 150px;
}
.gameFlag > span {
    display: inline-block;
    margin-top:-6px;
    vertical-align: top;
}
.gameFlag > span:nth-child(1) {
    color: yellow;
    padding-left: 34px;
}
.gameFlag2 > span {
    display: inline-block;
    margin-top:-6px;
    vertical-align: top;
}
.gameFlag2 > span:nth-child(1) {
    color: yellow;
    padding-left: 34px;
}



/* 비디오 팝업 버튼 */
.openPopBtn.video {
    top: 42px;
    right: 44px;
    /*  min-width: 160px;*/
    padding: 7px 57px 7px 20px;
}
.openPopBtn.video {
    top: 38px;
    right: 44px;
    min-width: 160px;
}
.openPopBtn.video:before {
    content: '';
    top: -28px;
    right: -30px;
    width: 80px;
    height: 80px;
}
.openPopBtn.video:hover {
    background-color: #3f2475;
}

.contentsBox.halfLinePop {
    margin-top: -70px;
}

/* 반전 */
.transX {
    transform: scaleX(-1);
}
/* 스케일 효과 줄때  */
.scale:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.hover.scale {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}



/* 드러그 앤 드랍 text */
.textDrap .dragObj,
.imgDrag .dragObj {
   position: fixed;
   cursor: pointer;
}

.textDrap .dragObj {
    width: 110px;
    height: 55px;
    line-height: 50px;
    font-size: 34px;
    text-align: center;
    font-family: NanumSquareEB;
    border-radius: 20px;
    background-color: #fcebee;
    border: 3px dashed #eea1ac;
    z-index: 2;
}
.textDrop {   font-size: 34px;  }
.textDrop .dropArea {
    position: absolute;
    width: 110px;
    height: 55px;
}

/*선긋기*/
.lineContainer .topArea li:after,
.lineContainer .bottomArea li:before,
.lineContainer .leftArea li:after,
.lineContainer .rightArea li:before {
    background-color: #000000;
}
.lineContainer .topArea li:after,
.lineContainer .bottomArea li:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}



/*.textDrap .dragObj.complete{
    color: #06418e;
    background-color: white;
}
*/


/* 말풍선 */
.balloonCheck .sky-balloon { visibility: hidden; }
.balloonCheck .sky-balloon.visible { visibility: visible; }



.sky-balloon{
    position: relative;
    padding: 10px;
    border-radius: 20px;
    font-size: 37px;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;
    background-color: #BDE3F4;
}
.sky-balloon:after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -37px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 15px;
    margin-left: -10px;
    border-color: #BDE3F4 transparent transparent transparent;
}
.sky-balloon.right:after { /*top 수치는 개별적으로*/
    bottom: auto;
    left: auto;
    right: -33px;
    transform: rotate(-90deg);
}
.sky-balloon.left:after {
    bottom: auto;
    left: -23px;
    transform: rotate(90deg);
}
.sky-balloon.top:after {
    top: -37px;
    transform: rotate(180deg);
    /*    border-color: transparent transparent #f5aac5 transparent !important;*/
}

/*색상*/
.sky-balloon.blue { background-color: #8fd1e0; }
.sky-balloon.blue:after { border-color: #8fd1e0 transparent transparent transparent; }

.sky-balloon.pink { background-color: #f5aac5; }
.sky-balloon.pink:after { border-color: #f5aac5 transparent transparent transparent; }


.sky-balloon.yellow { background-color: #fbc728; }
.sky-balloon.yellow:after { border-color: #fbc728 transparent transparent transparent; }

.sky-balloon.mint { background-color:#78c7bc; }
.sky-balloon.mint:after { border-color:#78c7bc transparent transparent transparent; }

.sky-balloon.purple { background-color: #c688b9; }
.sky-balloon.purple:after { border-color: #c688b9 transparent transparent transparent; }

.sky-balloon.yellowGreen { background-color: #9cc813; }
.sky-balloon.yellowGreen:after { border-color: #9cc813 transparent transparent transparent; }

/*popup 동그라미*/

.popupContainer .circleBtn {
    position: absolute;
    width: 65px;
    height: 65px;
    box-sizing: border-box;
    border-radius: 100%;
    font-size: 19px;
    padding: 8px 5px;
    text-align: center;
    color: #ffffff;
    font-family: 'naNumSquareB';
    top: 23px; left: 20px;
}

.popupContainer .circleBtn.orange {
    background-color: #ea5504;
}
.popupContainer .circleBtn.blue {
    background-color: #225aa8;
}

.popupContainer .circleBtn.purple {
    background-color: #664281;
}

.popupContainer .circleBtn.pink {
    background-color: #e9567e;
}









/*============깜빡이는 css!!

.test {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 0.45s;
    animation-iteration-count: infinite;
}
@keyframes example {
    0%   {
        transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
    }
    100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
   }
   }*/




   /*  스크롤 */
/*.scrollContainer .scrollInner {
    left: 0px!important;
    width: 925px!important;
    }*/
    .scrollContainer .openPopBtn.video {  top: 25px;  right: 26px; }
    .scrollContainer .dapBtn,
    .scrollContainer .dapBtn.reset {
        position: absolute;
        top: 66px;
        right: 0px;
        bottom: auto;
    }

    /* 글씨 정렬 */
    .text_Center { text-align: center; }

    /* 여백 */
    .mt20 { margin-top: 20px; }

    .pt_20 { padding-top: 20px;}
    .pb_20 { padding-bottom: 20px;}
    .pr_70 { padding-right: 70px;  }

    .ls0 { letter-spacing: 0; }
    .ls_15 { letter-spacing: -1.5px; }
    .ls_2 { letter-spacing: -2px; }
    .ls_3 { letter-spacing: -3px; }

/*================================= popup 영역 ===================================== */

/*  원형제목  */
.circleBtn {
    display: flex;
    align-items: center;
    width: 120px;
    height: 120px;
    box-sizing: border-box;
    border-radius: 50%;
    font-size: 30px;
    text-align: center;
    color: #ffffff;
    font-family: 'naNumSquareB';
}
.circleBtn > span {
    width: 100%;
    text-align: center;
    line-height: 38px;
}
.circleBtn.orange {
    background-color: #ea5504;
}
.circleBtn.blue {
    background-color: #225aa8;
}
.circleBtn.purple {
    background-color: #664281;
}
.circleBtn.pink {
    background-color: #e9567e;
}
.blink { -webkit-animation: blink 1.5s linear infinite; }

@-webkit-keyframes blink {
    0% { border: 3px solid transparent; }
    50% { border: 3px solid #ffffff;}
    100% { border: 3px solid transparent;  }
}



/* 영상 full */
#wrap .mediaContainer video {
    top: 0;
    transform: none;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    margin-top: -50px;
}
/* 애니 상하여백 */
#wrap .mediaContainer .videoContainer video {
    margin-top:0;
}