body { min-height: 100vh; } .vs-group { width:95%; margin:0 auto; display: flex; } .vs-group .vs-input-group { position: relative; } #vs-menu-box span{ text-decoration: none; padding-left: 4px; } .vs-group .vs-menu { position: absolute; display: none; } .vs-group button { display: block; height: 100%; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background: #000; border: 1px solid transparent; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 10px 16px; font-size: 17px; line-height: 1.3333333; border-radius: 4px; color: #fff; } .vs-group .vs-menu.active { display: block; width: 150%; top: 100%; left: 0; max-height: 200px; background-color: #fff; } .vs-group .vs-menu .vs-country_list { list-style-type: none; text-align: left; padding-left: 10px; max-height: 200px; overflow-y: scroll; } .vs-group .vs-menu .vs-country_list .vs-country_list_item span, .vs-group #vs-menu-box .vs-flag{ display: inline-block; width: 16px; height: 11px; box-shadow: 0 0 1px 0 #888; background-image: url(/_ext/www.analyticswin.com/static/source/country-v5.png); background-repeat: no-repeat; background-color: #dbdbdb; background-position: -1049px 0; margin-right: 2px; } .vs-group .vs-menu .vs-country_list .vs-country_list_item a{ color: #000; font-size: 14px; } .vs-group #vs-menu-box { display: flex; align-items: center; min-width:120px; } .vs-group #vs-menu-box .code{ display: inline-block; } .vs-group .vs-menu > div { display: flex; align-items: center; } .vs-group .vs-menu.active span { display: block; text-decoration: none; color: #000; } .vs-group input { width: 50%; font-size: 15px; border: 1px solid #c1c1c1; background: #fff; height: 50px; padding: 5px 8px; color: #000; border-radius: 2px; display: block; } .vs-model { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999999999; height: 100%; cursor: pointer; background: #333; background: rgba(0, 0, 0, 0.8); } .vs-model.vs-show { display: block; animation: fadeIn 1s ease forwards; } .vs-model.vs-animate { display: block; animation: fadeOut 1s ease forwards; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .vs-model * { margin: 0; padding: 0; box-sizing: border-box; } .vs-model .vs-content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px; width: 700px; padding: 90px 0; display: table; background: #ff7663 url(bg.png) repeat scroll 0% 0%; box-shadow: 0 0 10px 3px rgba(63, 62, 62, 0.2); } .vs-model .vs-content .model-title .vs_close { cursor: pointer; position: absolute; top: 2%; right: 2%; color: #fff; font-weight: bold; } .vs-model .vs-content .model-content .bold { font-weight: bold; font-size: 3rem; } .vs-model .vs-content .model-content .line { color: #fff; } .vs-model .vs-content .model-content .color-white { color: #fff; } .vs-model .vs-content .model-content .f-form { position: relative; width: 480px; display: block; margin: 30px auto 0; box-sizing: border-box; text-align: center; color: #fff; } .vs-model .vs-content .model-content .f-form h5 { margin-bottom: 25px; font-size: 26px; } .vs-model .vs-content .model-content .f-form p { margin-top: 15px; color: #fff; font-size: 15px; } .vs-model .vs-content .model-content .f-form textarea{ width: 100%; height: 85px; padding: 8px 8px; font-size: 14px; border: 1px solid #c1c1c1; background: #fff; color: #666; border-radius: 2px; } .vs-model .vs-content .model-content .f-form input { width: 95%; font-size: 15px; border: 1px solid #c1c1c1; background: #fff; height: 50px; padding: 5px 8px; color: #666; border-radius: 2px; display: block; margin: 18px auto; } .vs-model .vs-content .model-content .f-form #btn_submit { display: block; margin: 30px auto 0; width: 70%; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background: #000; border: 1px solid transparent; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 10px 16px; font-size: 17px; line-height: 1.3333333; border-radius: 4px; color: #fff; } @media screen and (max-width: 768px) { .vs-model .vs-content .model-content .f-form h5 { margin-bottom: 10px; font-size: 20px; } .vs-model .vs-content { width: 80%; padding: 22px 0; top: 40%; } .vs-model .vs-content .model-content .f-form { width: 90%; margin: 10px auto 0; } } .vs-notes{font-size:14px;padding-bottom: 13px;display: block;} /*clue2*/ .clue2 { width: 600px; background: #fff; margin: 0 auto; margin-top: 21%; } .clue2-close { text-align: right; } .clue2-close img { width: 30px; margin: 15px 15px 0 0; } .clue2-title { text-align: center; font-size: 28px; /* font-weight: bold; */ color: #000; padding-bottom: 30px; } .clue2-content{ display: flex; justify-content: center; align-items: center; padding: 0 40px 40px 40px; } .clue2-content-left{ width: 25%; } .clue2-content-left img { width: 100%; box-shadow: 3px 7px 10px 1px rgba(0, 0, 0, 0.1); } .clue2-content-right { width: 75%; padding-left: 20px; } .clue2-content-input{ margin-bottom: 15px; } .clue2-content-input input{ width: 100%; font-size: 15px; border: 1px solid #c1c1c1; background: #fff; height: 40px; padding: 5px 15px; color: #666; /*border-radius: 2px;*/ display: block; } .clue2-content-button button{ display: block; /* margin: 30px auto 0; */ width: 100%; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background: #214fe2; border: 1px solid transparent; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* padding: 10px 16px; */ font-size: 22px; height: 40px; line-height: 40px; border-radius: 0px; color: #fff; } @media screen and (max-width: 768px) { .clue2 { width: 100%; } .clue2-title { font-size: 22px; } .clue2-content{ padding: 0 20px 40px 20px; } .clue2-content-button button { font-size: 18px; } }