/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	body {
		overflow: hidden;
	}
	.logo {
	    /*background: url('../images/logo_ctbc.svg');*/
	    background: url('../images/logo.png');
	    background-size: contain;
	    background-repeat: no-repeat;
	    width: 150px;
	    height: 40px;
	    position: fixed;
	    left: 20px;
	    top: 5px;
	    margin-left: 0px;
	    z-index: 1;
	}
	.green_bg {
	    background: #daeaea;
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    z-index: -1;
	    transform: translateY(100%);
	}
	.green_bg.active {
		-webkit-animation: enterUp 1s ease-in-out;
		-moz-animation: enterUp 1s ease-in-out;
		-ms-animation: enterUp 1s ease-in-out;
		-o-animation: enterUp 1s ease-in-out;
		animation: enterUp 1s ease-in-out;
		transform: translateY(0%);
	}
	/*.end_animate .green_bg.active {
		animation: footer_hidden 1.5s ease-in-out;
		transform: translateY(100%);
	}
	.end .icon_bg_right {
		animation: footer_hidden 1.5s ease-in-out;
		transform: translateY(100%);
	}*/
	.icon_bg_right {
	    width: 500px;
        height: 300px;
        right: -80px;
        bottom: 0px;
	}
	.icon_bg_left {
	    width: 200px;
        height: 120px;
        left: 50px;
        bottom: 0px;
	}
	.icon_bg_top {
	    width: 430px;
	    height: 200px;
	    left: -50px;
	    top: 0px;
	    opacity: 1;
	}
	.icon_phone {
		width: 120px;
		height: 160px;
		left: -30px;
		bottom: 0px;
	}
	.icon_ruler {
		width: 130px;
		height: 90px;
		left: 220px;
		bottom: 0px;
	}
	.icon_cafe {
		width: 150px;
		height: 150px;
		left: 18%;
		top: -30px;
	}
	.icon_questionnaire {
		width: 400px;
	    height: 200px;
	    left: 45%;
	    top: -30px;
	}
	.icon_pen {
	    width: 240px;
	    height: 100px;
	    left: 65%;
	    bottom: 0px;

	}
	.header_title {
		text-align: center;
		position: relative;
    	top: 100px;
	}
	.header_bg.active .header_title {
		top: 120px;
	}
	.header_bg.active .header_title.dispear {
		animation: title_up_hidden 0.8s ease-in-out;
		top:-100px;
	}
	@keyframes title_up_hidden {
		0% {
			top:90px;
		}
		100% {
			top:-100px;
		}
	}
	.brand {
		font-size: 30px;
	}
	.topic {
		font-size: 40px;
		letter-spacing: 8px;
		margin-top: 20px;
	}
	.intro_text {
	    font-size: 20px;
	    text-align: center;
	    letter-spacing: 1.5px;
	    line-height: 34px;
	    width: 78%;
	    margin: 0 auto;
	    margin-top: 10%;
	    margin-bottom: 5%;
	}

	.section.active {
	    -webkit-animation: t_from_down 0.7s ease-in-out;
	    -moz-animation: t_from_down 0.7s ease-in-out;
	    -ms-animation: t_from_down 0.7s ease-in-out;
	    -o-animation: t_from_down 0.7s ease-in-out;
	    animation: t_from_down 0.7s ease-in-out;
	    top: 18%;
	    bottom: 0;
	}
	.testPositionAbsolute {
		margin: 0px;
	}
	.ques_circle {
	    width: 80px;
	    height: 80px;
	    margin: 0px;
	}
	.num_text {
	    top: 30px;
	    left: 24px;
	}
	.ques_title {
	    margin: 50px 0px 0px 0px;
	    line-height: 1.6em;
	    width: 83%;
	    float: right;
	    padding-right: 10px;
	}
	.ques_item {
		margin: 5px 0px;
	}
	.ques_signal {
		margin-top: -25px;
	}
	.footer_data {
	    width: 100%;
	    background: #fff;
	    position: fixed;
	    bottom: 0px;
	    left: 0px;
	}
	.footer_line {
	    position: fixed;
	    left: 0px;
	    bottom: 0px;
		width: 100%;
		height: 6px;
		background: #00a9a2;
	}
	.not_finish_area {
	    width: 100%;
	    height: 32px;
	    background: #00a9a2;
	    color: #df4526;
	    padding-top: 6px;
	    padding-top: 4px;
	    bottom: 75px;
	}
	.not_finish {
		width: 100%;
	}
	.not_finish .mdl-list__item-primary-content {
	 	float: right;
	}
	.mdl-textfield {
	    width: 90%;
	    padding-top: 0px;
	    float: right;
	    padding-right: 20px;
	}
	.mdl-textfield.mdl-js-textfield.text_area {
		width: 100%;
		margin-left: 20px;
		float: left;
		/*height: 34px!important;*/
	}
	.lastbtn {
		padding-left: 15%;
		margin-top: 25px;
	}
	.nextbtn {
		margin-top: 25px;
	}
	.endbtn {
		width: 37%;
		margin-top: 25px;
	}
	.endbtn span {
		right: 25px;
	}
	.process {
		height: 72px;
		width: 100%;
	}

	#myProgress {
	    border: 1px solid #02aaa3;
	    border-radius: 10px;
	    margin-top: 30px;
    	margin-left: 15px;
	}
	#myBar {
	    margin-top: 2px;
	    margin-left: 2px;
	    border-radius: 10px;
	    max-width: 99%;
	}
	#label {
	    line-height: 30px;
	    color: #00a9a2;
	    margin-top: -30px;
	}
	/* end */
	.q_woman {
		width: 200px;
	    height: 820px;
	    right: 0px;
	    top: 0px;
	}
	.end_text {
	    width: 450px;
	    position: absolute;
	    top: 15%;
	    left: 10%;
	    color: #fff;
	}
	.close_end_page {
	    margin-top: 10%;
	    color: #333;
	}
	.moutain_1 {
	    height: 200px;
        width: 500px;
        left: -150px;
        bottom: 0px;
	}
	.moutain_2 {
		background: url('../images/finish/finish_mountain2.svg');
		background-size: 100%;
		background-repeat: no-repeat;
        width: 460px;
        height: 130px;
        position: fixed;
        left: 150px;
        bottom: 0px;
	    transform: translateY(100%);
	}
	.moutain_3 {
		background: url('../images/finish/finish_mountain2.svg');
		background-size: 100%;
		background-repeat: no-repeat;
	    width: 400px;
        height: 160px;
        position: fixed;
        right:-120px;
        bottom: 0px;
	    transform: translateY(100%);
	}
	.green_cloud_1 {
		width: 200px;
		height: 120px;
		left: 120px;
		top: 45%;
	}
	.white_cloud_2 {
		background: url('../images/finish/finish_cloud.svg');
		background-size: 100%;
		background-repeat: no-repeat;
	    width: 220px;
	    height: 180px;
	    position: fixed;
	    right: 200px;
	    bottom: 150px;
	    transform: translateX(300%);
	}
	.end_page.active .white_cloud_2.enter {
		-webkit-animation: right_show 1s ease-in-out;
		-moz-animation: right_show 1s ease-in-out;
		-ms-animation: right_show 1s ease-in-out;
		-o-animation: right_show 1s ease-in-out;
		animation: right_show 1s ease-in-out;
		transform: translateX(0%);
	}
	#myProgress {
        height: 16px;
	}
	/* nick teach */
	.number {
		position: absolute;
		left: 30px;
		top:20px;

	}
	.test {
		/*position: absolute;*/
	    /*top: 100px;*/
	    height: 100%;
	    left: 14.8%;
	    bottom: 0px;
	    overflow-y: auto;
	    overflow-x: hidden;
	    margin: 0px;
	    max-width: 83%;
	    /*padding-bottom: 150px;*/
	    padding-bottom: 100px;
	}
	/*.test > div:last-child {
		margin-bottom: 100px;
	}*/
}