@charset "utf-8";
/* layOut css*/
/*.flexBox > * { flex-grow: 1; }*/
@font-face {
  font-family: NotoCJM;
  src: url("../../common/font/NotoSerifCJKkr-Medium.woff");
}

@font-face {
  font-family: NGothic;
  src: url("../../../../../../html/font/NanumGothic.woff");
}

.NotoCJM{font-family: NotoCJM, sans-serif;}
.NGothic {font-family: NGothic, sans-serif;}

[class*="quizPage_"] {
    background-size: 100% 160px,  100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center;
}
[class*="quizPage_"] header {
    height: 164px;
    border: none;
    color: #03526D;
    padding: 12px 0 1.2em 1.9em;
    background: url(../images/bg_titleArea.png) center/100% 100% no-repeat;
}
[class*="quizPage_"] header h1 {
    padding: 0 0 0 2.9em;
    background: url(../../common/images/soc/icon_haksamo.png) 0 center/90px auto no-repeat;
}
[class*="quizPage_"] .dragObj {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
[class*="quizPage_"] .dropArea {
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 40%, 100% 100%;
}
[class*="quizPage_"] .dragObj_1 {
    background-image: url("../images/soc_drag_01.png");
}
[class*="quizPage_"] .dragObj_2 {
    background-image: url("../images/soc_drag_02.png");
}
[class*="quizPage_"] .dragObj_3 {
    background-image: url("../images/soc_drag_03.png");
}
[class*="quizPage_"] .dragObj_4 {
    background-image: url("../images/soc_drag_04.png");
}
[class*="quizPage_"] .dragObj_5 {
    background-image: url("../images/soc_drag_05.png");
}

/******************************************/
/****************p a g e _ 1***************/
/******************************************/
.quizPage_1 { background-image: url("../images/bg_dragArea.png"), url("../images/bg_page1.png"); }
.quizPage_1 main {
    padding: 0 30px 30px 30px;
}
.quizPage_1 main > .flexBox { padding: 0 90px; }
.quizPage_1 main > .flexBox h2 { margin: 0 0 270px 0; }
.quizPage_1 .flexBox .img-in-box {
    width: 330px;
    text-align: center;
    margin-right: 50px;
}
.quizPage_1 .flexBox .img-in-box > img {
    height: 440px;
    vertical-align: top;
}
.quizPage_1 .flexBox .img-in-box figcaption {
    position: relative;
    color: #4F4F4F;
    font-size: 25px;
    top: -20px;
}
.quizPage_1 .flexBox .drop-in-box { width: 65%; }
.quizPage_1 .flexBox .drop-in-box .fake-dropArea {
    width: 100%;
    height: 290px;
}
.quizPage_1 .textList{
	position:absolute;
	top: 75px;
    left: 295px;
    font-size: 27px;
	width: 730px;
}
.quizPage_1 .textList li{
	margin-bottom:20px;
	line-height:71px
}

.quizPage_1 .ttx{
	position:absolute;
	top:84px;
	left:467px;
	color:#fff;
	font-size:33px;
}
/* 드래그드롭 */
.quizPage_1 .dropArea {
    width: 365px;
    height: 128px;
}
.quizPage_1 .dragObj.dragComplete {
     width: 375px;
    height: 136px;
    margin: -5px 0 0 -5px;
}
.quizPage_1 .dropArea { top: 190px; background-image: url(../../common/images/icon/icon_mark.svg), url("../images/soc_drop_01.png"); }
/*drop*/
.quizPage_1 .dropArea_1 {
    left: 230px;
	top:188px
}
.quizPage_1 .dropArea_2 {
    left: 687px;
	top:188px
}
.quizPage_1 .dropArea_3 {
    left: 918px;
}

/*drag*/
.quizPage_1 .dragObj {
    top: 495px;
    width: 284px;
    height: 127px;
}
.quizPage_1 .dragObj_1 { left: 57px; }
.quizPage_1 .dragObj_2 { left: 353px;}
.quizPage_1 .dragObj_3 { left: 643px; }
.quizPage_1 .dragObj_4 { left: 935px; }
.quizPage_1 .dragObj_5 { left: 1010px; }

/* 스탬프 위치 */
.quizPage_1 .ppang {
    top: 240px;
    left: 960px;
}


/******************************************/
/****************p a g e _ 2***************/
/******************************************/
.quizPage_2 { background-image:  url("../images/bg_page2.png");background-size:100% 100% }
.quizPage_2 main {
    padding: 0 30px 30px 30px;
}
.quizPage_2 main > .flexBox { padding: 0 90px; }
.quizPage_2 main > .flexBox h2 { margin: 0 0 270px 0; }
.quizPage_2 .flexBox .img-in-box {
    width: 330px;
    text-align: center;
    margin-right: 50px;
}
.quizPage_2 .flexBox .img-in-box > img {
    height: 440px;
    vertical-align: top;
}
.quizPage_2 .flexBox .img-in-box figcaption {
    position: relative;
    color: #4F4F4F;
    font-size: 25px;
    top: -20px;
}
.quizPage_2 .flexBox .drop-in-box { width: 65%; }
.quizPage_2 .flexBox .drop-in-box .fake-dropArea {
    width: 100%;
    height: 290px;
}
.quizPage_2 .textList{
	position:absolute;
	top: 75px;
    left: 295px;
    font-size: 27px;
	width: 730px;
}
.quizPage_2 .textList li{
	margin-bottom:20px;
	line-height:71px
}

.quizPage_2 .ttx{
	position:absolute;
	color:#fff;
	font-size:32px;
}
.quizPage_2 .ttx01{
	top:24px;
	left:185px;
	font-weight:bold
}
.quizPage_2 .ttx02{
	top:24px;
	left:601px;
	font-weight:bold
}
.quizPage_2 .ttx03{
	top:24px;
	left:952px;
	font-weight:bold
}
/* 드래그드롭 */
.quizPage_2 .dropArea {
    width: 366px;
    height:239px;
}
.quizPage_2 .dragObj.dragComplete {
     width: 375px;
    height: 250px;
    margin: -5px 0 0 -5px;
}
.quizPage_2 .dropArea { top: 190px; background-image: url(../../common/images/icon/icon_mark.svg), url("../images/soc_drop_02.png"); background-size:auto 25%, 100% 100%;}
/*drop*/
.quizPage_2 .dropArea_1 {
    left: 53px;
	top:75px
}
.quizPage_2 .dropArea_2 {
    left: 453px;
	top:75px
}
.quizPage_2 .dropArea_3 {
    left: 860px;
	top:75px
}

/*drag*/
.quizPage_2 .dragObj {
    top: 389px;
    width: 363px;
    height: 232px; 
	font-size: 30px;
    line-height: 38px;
	background-image: url(../images/soc_drag_05.png);
}

.quizPage_2 .dragObj_1 { left: 87px; }
.quizPage_2 .dragObj_2 { left: 454px;}
.quizPage_2 .dragObj_3 { left: 820px; }
.quizPage_2 .dragObj_4 { left: 935px; }
.quizPage_2 .dragObj_5 { left: 1010px; }

/* 스탬프 위치 */
.quizPage_2 .ppang {
    top: 240px;
    left: 960px;
}