/* HTML5 display definitions */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block; }
audio, canvas, video { display:inline-block; *display:inline; *zoom:1; }
audio:not([controls]) { display:none; }
[hidden] { display:none; }

 /* Base */
html {font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
html, button, input, select, textarea {font-family:Arial,'Microsoft JhengHei',Geneva,sans-serif ; color:#565457; }

/* GLOBAL */
body 	{background:#FFF url(img/bg.png) repeat-x;  margin:30px auto; text-align:center;}
img 	{border:0; -ms-interpolation-mode:bicubic; vertical-align:middle; max-width:100%;}

small { font-size:85%; }

p		{margin:5px 0 20px;}
sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
sup { top:-0.5em; }
sub { bottom:-0.25em; }
button, input, select, textarea {font-size:100%; margin:0; vertical-align:baseline;}

.clear	{clear:both;}
.clearfix:before, .clearfix:after, .container:before, .container:after, .pns3features:before, .pns3features:after, .overview-boxes:after {content:''; display:table;}
.clearfix:after, .container:after, .pns3features:after {clear:both;}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {*zoom:1;}

.wrap	{max-width:1020px; margin:0 auto; padding:0 10px; position:relative;}

.half-width	{width:50%; margin:0 auto;}

.top-logo 	{max-width:50%;}
.main-frame	{background:url(img/frame.png) no-repeat center top; min-height:570px; box-sizing: border-box; padding:70px 20px 30px 50px; margin-top:20px; 
	font-size:28px; text-align:left;;}
.main-frame-logo 	{position:absolute; max-width:50%; top:10px; right:25px;}

.btn 	{display:inline-block; width:258px; height:81px; line-height:81px; text-align:center; text-align:center; font-size:28px; color:#FFF; text-decoration:none;}
.btn0	{background:url(img/btn-base0.png) no-repeat;}
.btn1	{background:url(img/btn-base1.png) no-repeat;}
.btn2	{background:url(img/btn-base2.png) no-repeat;}
.btn3	{background:url(img/btn-base3.png) no-repeat;}


.main-left	{float:left; width:48%;}
.photo-frame	{float:right; width:45%; background:url(img/photo-frame.png) no-repeat; box-sizing: border-box; padding:45px 20px; min-height:433px;}


.question	{padding-bottom:10px;}
.answer .ans-line	{background-repeat:no-repeat; padding:8px 0 5px 0; margin-bottom:3px; min-height:65px; }
.answer .ans-line.ans-0	{background-image:url(img/ans-0.png); }
.answer .ans-line.ans-1	{background-image:url(img/ans-1.png); }
.answer .ans-line.ans-2	{background-image:url(img/ans-2.png); }
.answer .ans-line.ans-3	{background-image:url(img/ans-3.png); }

.answer .ans-txt	{display:inline-block; min-width:120px; padding-left:75px; cursor:pointer; }

.btn-next, .answer .mark	{display:none;}


.options-drag 	{margin-bottom:20px;}
.options-drag .line 	{float:left; width:28%;}
.options-drag .option-drag 	{display:inline-block; padding:4px 0; min-width:150px; border-radius:10px; text-align:center; background:#6E3076; color:#FFFFFF; cursor:default;}

.options-drop		{text-align:center;}
.options-drop .option-drop 	{background:#e6e7e8; border-radius:8px; margin:0 2% 0 0; padding:10px 20px;  float:left; width:26%; }
.options-drop .option-drop>img 	{max-height:80%; border:1px solid #FFF;}

.options-drop .option-drop .droppable-area	{height:65px; width:100%; position:relative;}

.options-drop .option-drop .droppable-area .dotted	{border:2px #f17db1 dashed; border-radius:5px; height:80%; width:80%; margin-left:10%;}

.options-drop .option-drop .droppable-area .check	{display:block; position:absolute; right:0; top:0; background-repeat:no-repeat; background-position:center right; width:80px; height:50px;}
.options-drop .option-drop .droppable-area .check-yes	{background-image:url(img/ans-yes.png);}
.options-drop .option-drop .droppable-area .check-no	{background-image:url(img/ans-no.png);}