/*
    ************************************ 공통 레이아웃 ************************************
*/

* {padding:0; border:0; margin:0;}
html, body {height:100%; overscroll-behavior: none;}

a {text-decoration:none; color:#000000;}
a:visited {text-decoration:none; color:#000000;}
a:active {text-decoration:none; color:#000000;}
a:link {text-decoration:none; color:#000000;}

ul, ol, dl {list-style: none;}

:focus {outline:none;}



.pageOutWrap {font-family: MaplestoryL; display:block; position:relative; width:100%; height:100%; overflow: hidden; background-size:cover; background-position:center center; background-color:#FEF5EA;}

/*스케일로 리사이징 되는 영역*/
.contentsOutWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    overflow: hidden;
}

body {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0); /*모바일에서 하이라이트 안되게 추가해줌.*/
}
/*이미지 드래그 막기위해서*/
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}




/*
    *** 버튼 오버효과
*/
.overEffect {cursor:pointer;}
.overEffect .default {display:block;}
.overEffect .over {display:none;}

.overEffect:hover .default {display:none;}
.overEffect:hover .over {display:block;}



/*
    ********************************************* 컨텐츠 페이지 **********************************************
*/

/*
    *** 전체페이지
*/
.contentAll {display:flex; justify-content: center; align-items: center; height:100%;}
.contentAll > img{width:1120px; height:630px;}


/*
    *** 서브페이지
*/
.subPage {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; background-color:#FEF5EA;}
.subPage .pageImgCell {text-align:center; font-size:0; padding-top:45px; box-sizing: border-box;}
.subPage .pageImgCell img {width:1120px; height:512px;}

.subPage .dragBox {position:absolute; bottom:45px; left:50%; transform:translateX(-50%); margin-left:-21px; width:1161px; height:193px; background-image: url("../images/dragBox.png"); background-size:100% 100%;}


/*
    *** back버튼
*/
.subPage .btnBack {position:absolute; top:30px; left:30px; width:56px; height:38px;}
.subPage .btnBack img {width:100%; height:100%;}


/*
    *** 정답확인, 다시하기버튼
*/
.subPage .btnAnswer,
.subPage .btnRetry {position:absolute; top:519px; left:1060px; width:141px; height:45px;}
.subPage .btnAnswer img,
.subPage .btnRetry img {width:100%; height:100%;}


/*
    *** 드래그 아이템
*/
.subPage .dragItem {
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    z-index:10;
    height:45px;
    font-size:28px;
    color:#000000;
    font-family: MaplestoryL;
    text-align:center;
    line-height:1;
    border-radius: 10px;
    border: 2px solid #E57483;
    padding:10px 16px;
    box-sizing: border-box;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
}


/*
    *** 드롭 아이템
*/
.subPage .dropItem {
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    z-index:9;
    height:45px;
    font-size:28px;
    color:#000000;
    font-family:MaplestoryL;
    text-align:center;
    line-height:1;
    border-radius: 6px;
    border: 3px solid #AFAFAF;
    box-sizing: border-box;
    background-color:#ffffff;
}

.subPage .dropItem:after {
    content: "?";
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    color: #EBACAC;
    font-family: MaplestoryB;
    font-size: 21px;
    border-radius: 6px;
    border: 3px solid #AFAFAF;
    background-color:#ffffff;
}

.subPage .dropItem.m,
.subPage .dropItem.m:after {font-size:18px;}
.subPage .dropItem.s,
.subPage .dropItem.s:after {font-size:15px;}


.subPage .dropItem.open:after {display:none;}


.subPage .dropItem.correct {color:#3A92FA; pointer-events: none !important;}



/*
    ********************************************* 메뉴 **********************************************
*/
.partMenu {position:absolute; top:30px; right:30px;}
.partMenu .charCell {position:relative; z-index:2; width:105px; height:84px; background-image:url("../images/char_click.png"); background-size:100% 100%; cursor:pointer;}
.partMenu .charCell:hover {background-image:url("../images/char_clickOver.png");}

.partMenu .subArea {
    display:none;
    position:absolute;
    left:50%;
    top:77px;
    transform:translateX(-50%);
    z-index:1;
    width:140px;
    padding:12px;
    border-radius: 20px;
    border: 3px solid #975BFF;
    box-sizing: border-box;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.partMenu .subArea .list {
    font-size:13px;
    color:#ffffff;
    font-family:MaplestoryB;
    text-align:center;
    padding:8px 4px;
    border-radius: 20px;
    background: linear-gradient(180deg, #642DD2 0%, #4912A9 100%);
    background-color:#3C067E;
    box-shadow: 0px 3px 0px 2px #3C067E;
    margin-bottom:8px;
    cursor:pointer;
}
.partMenu .subArea .list:last-child {margin-bottom:0;}
.partMenu .subArea .list:hover{
    background: linear-gradient(180deg, #4F14C5 0%, #350B7D 100%);
    box-shadow: 0px 3px 0px 2px #260352;
}


.partMenu.on .charCell:after {content:""; position:absolute; bottom:1px; left:-3px; width:103px; height:92px; background-image: url("../images/char_clickOpen.png"); background-size:100% 100%;}
.partMenu.on .charCell {background-image:none;}

.partMenu.on .subArea {display:block;}



/*
    *************************************** 피드백 팝업 *************************************
*/
.feedbackPopup {position:absolute; top:0; left:0; z-index:100; display:none; justify-content: center; align-items: center; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.6);}
.feedbackPopup .feedback {display:none; width:559px; height:420px;}

.feedbackPopup.on {display:flex;}




/*
    *************************************** 폰트 및 글자 지정 *************************************
*/
.fontStix {font-family:Stix; line-height:1;}

.textX {display:inline; width:16px; height:16px; font-size:0; background-image:url("../images/textX.png"); background-size:100% 100%;}
.textY {display:inline; width:14px; height:22px; font-size:0; background-image:url("../images/textY.png"); background-size:100% 100%;}
.correct .textX {background-image:url("../images/textX_blue.png");}
.correct .textY {background-image:url("../images/textY_blue.png");}

.m .textX {width:13px; height:13px;}
.m .textY {width:11px; height:18px;}

.s .textX {width:10px; height:10px;}
.s .textY {width:9px; height:14px;}




/*
    *************************************** 수학 식 표현 *************************************
*/
/*
    *** 선분
*/
.lineSeg {border-top:solid 2px #000000; padding-top:2px; line-height:1;}
.correct .lineSeg {border-top-color:#3A92FA;}


/*
    *** 지수
*/
.posStd {position:relative;}
.sup {position:relative; bottom:2ex; font-size:0.45em; font-family:MaplestoryL;}


/*
    `*** 분수
*/
.frac {position:relative; display:flex; justify-content: center; align-items: center; flex-direction: column; line-height:1;}
.frac:after {content:""; position:absolute; top:calc(50% - 1px); left:0; width:100%; height:2px; background-color:#000000;}
.frac .top {padding:0 2px; /*padding-bottom:1px;*/}
.frac .bottom {padding:0 2px; padding-top:2px;}

.correct .frac:after {background-color:#3A92FA;}