.body { background: #fff; } .invitation_container { padding-top: 2rem; /*background: #f5f5f5;*/ } .invitation_bg_div { position: relative; font-size: 0; } .invitation_bg_div>img { width: 302%; position: relative; left: -106%; } .invitation_bg_div_txt { width: 100%; position: absolute; top: 0; text-align: left; margin-top: 3rem; margin-left: 30px; text-shadow: 6px 0 4px rgba(15,60,129,0.2); } .invitation_bg_div_txt>img { margin-bottom: 1rem; } .invitation_bg_div_txt>p { color: #fff; line-height: 1.5; /*font-weight: bold;*/ } .territory { background: #f5f5f5; margin-top: 3rem; padding-top: 2rem; } .invitation_bg_div_txt .lang_p13_1 { font-size: 1.2rem; font-weight: bold; color: #e6373c; line-height: 1.1; } .lang_p13_2 { font-size: 0.35rem; font-weight: normal; width: 400px; } .lang_p13_3 { line-height: 1rem; font-size: 0.37rem; font-weight: normal; /*letter-spacing: 0.01rem;*/ } .lang_p13_3 span {} .lang_p13_9 { font-size: 0.8rem; font-weight: bold; line-height: 1; margin-top: 1.1rem; } .lang_p13_6 { font-size: 0.6rem; line-height: 1; margin-top: 1.1rem; } .lang_p13_7 { font-size: 0.6rem; font-weight: normal; line-height: 1; } .territory>h3 { text-align: center; line-height: 1.5; letter-spacing: 0; } .invitation_logo { width: 2.5rem; margin-bottom: 1rem; } .invitation_title_en {} .invitation_title_en>p { color: #fff; } .invitation_guest_container { width: 100%; padding: 2rem 1rem 3rem; text-align: center; /*margin-top: 1rem;*/ background: #f5f5f5; } .invitation_guest_nav, .invitation_card_nav { display: flex; justify-content: space-around; font-size: 0.6rem; color: #999; margin-bottom: 1.7rem; letter-spacing: 0; } .invitation_card_nav { color: #999; } .invitation_guest_nav_item { flex: 1; padding-bottom: 0.3rem; border-bottom: 0.05rem solid #999; } .nav_item_active { color: #333; border-bottom: 0.12rem solid #e8383d; } .guest_list { width: 100%; margin-bottom: 2rem; } .guest_list_item { margin-top: 0.8rem; background: #fff; width: 100%; height: 100%; display: flex; flex-direction: column; -o-box-shadow: 3px 3px 10px rgba(0, 0, 0, .2); -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .2); -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .2); box-shadow: 1px 1px 10px rgba(0, 0, 0, .2); } .guest_list_item_img, .guest_list_item_name { flex: 1; width: 100%; } .guest_list_item_img { width: 100%; height: 50%; font-size: 0; } .guest_list_item_img>img { width: 100%; height: 50%; box-shadow: 1px 1px 10px rgba(0, 0, 0, .2); } .guest_list_item_name { width: 100%; height: 50%; position: relative; font-size: 0; } .guest_list_item_name>img { opacity: 0; width: 100%; font-size: 0; } .guest_list_item_name_txt { position: absolute; text-align: center; top: 0; width: 94%; height: 50%; left: 0; bottom: 0; right: 0; margin: auto; display: flex; flex-direction: column; justify-content: center; } .guest_list_item_name_txt>div { font-size: 0.65rem; line-height: 1.6; } .guest_list_item_name_txt_title { margin: 0 0 1.2rem; font-weight: bold; font-size: 0.9rem; } .commit_btn { background: #ccc; color: #fff; font-size: 0.7rem; width: 30%; vertical-align: middle; border-radius: 0.1rem; text-align: center; cursor: pointer; margin: 2rem auto 1rem; padding: 0.5rem 0; } .commit_btn { width: 100%; margin: 1.5rem auto 0; } .conference, .invite_card, .partner { padding: 3rem 1rem 0; background: #fff; text-align: center; } /*.partner{ padding: 3rem 1rem 0; }*/ .invite_card { padding: 1rem 0 0; } .conference { padding: 2rem 1rem; } .conference_container {} .conference_item { margin-top: 1rem; display: flex; flex-direction: column; -o-box-shadow: 3px 3px 10px rgba(0, 0, 0, .2); -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .2); -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .2); box-shadow: 1px 1px 10px rgba(0, 0, 0, .2); } .conference_item_img>img { width: 100%; } .conference_item_txt { margin: 1rem 0 0; } .conference_item_txt_tag { font-size: 0.7rem; color: #fff; font-weight: bold; margin: 0 auto; } .conference_item_txt_tag span { background-color: #505050; padding: 0.1rem 0.2rem; } .conference_item_txt_title { width: 90%; font-weight: bold; font-size: 0.9rem; letter-spacing: 0; margin: 1rem auto; line-height: 1.5; } .conference_item_txt_sub { text-indent: 1.2rem; line-height: 1.5; margin: 1rem 1rem 1.8rem 1rem; text-align: justify; letter-spacing: 0; } .conference_item_txt_sub p { font-size: 0.6rem; } .conference_item_txt_sub .fix_p{ text-indent: 0; display: flex; } .conference_item_txt_sub .margin_t{ margin-top: 1rem; } .invite_card_container { background: #1e1e1e; padding: 3rem 1rem; margin-top: 2rem; background-image: url(../images/invitation/spbbt.png); background-position: 0 281px; background-size: 100%; background-repeat: no-repeat; } .invite_nav_item_active { color: #fff; border-bottom: 0.12rem solid #e8383d; } .invitation_card_input { margin-top: 1rem; font-size: 0.7rem; } .invitation_card_title { color: #fff; font-size: 0.6rem; } .invitation_card_input_list {} .invitation_card_input_list_item { border: 1px solid hsla(0, 0%, 100%, .8); font-size: 0.7rem; margin: 1.1rem auto 0; line-height: 2rem; height: 2rem; width: 100%; border-radius: 0.2rem; background-color: #2b2b2b; position: relative; } input { border: none; float: left; background: #2b2b2b; color: #fff; width: 89%; font-size: 0.6rem; height: 100%; line-height: 1; margin-left: 0.3rem; } .invitation_card_input_list_item>img { position: absolute; top: 0.5rem; right: 0.3rem; display: inline-block; } .invitation_card_detail { margin-top: 3rem; font-size: 0.6rem; color: #fff; } .invitation_card_detail_title { font-weight: 600; color: #e6373c; margin-top: 1.5rem; } .invitation_card_detail_txt { margin-top: 0.6rem; } .partner {} .logo_container { padding: 2rem 0 1rem; display: flex; width: 100%; flex-wrap: wrap; border-bottom: 1px solid #ccc; } .logo_container_item { width: 50%; } .logo_container_item>img { width: 100%; text-align: center; } .btn_active { background: #5d5656; } .drop-down-content { position: absolute; top: 48px; left: -.5%; display: block; width: 101%; opacity: 0; height: 0; overflow: hidden; transition: all .3s ease; border-radius: 5px; border: 1px solid #fff; background-color: #e3e3e3; font-size: 0; text-align: left; z-index: 100; } .drop-down-content_active { opacity: 1; height: 9rem; z-index: 100; transition: opacity .3s ease; transition: height .3s ease; font-size: 0.5rem; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: auto; } ::-webkit-scrollbar { width: 3px; height: 3px; } ::-webkit-scrollbar-thumb:vertical { background-color: #a6a6a6; border-radius: 3px; } ::-webkit-scrollbar-track-piece:vertical:decrement, ::-webkit-scrollbar-track-piece:vertical:increment { background-color: rgba(166, 166, 166, 0.2); } .drop-down-content>li { line-height: 3.5; padding-left: 0.3rem; } .dropActive { background-color: #c8c8c8; } .drop-down-content_coor_active { opacity: 1; height: 6.5rem; font-size: 0.45rem; z-index: 100; transition: opacity .3s ease; transition: height .3s ease; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling:auto; } .name_png { width: 40%; margin-bottom: 0.5rem; } .fix_research_img { position: relative; top: 0.3rem; left: 0.7rem; } .note_sty { font-size: 0.5rem; background-color: #404040; color: #b1b1b1; text-align: left; padding: 0.2rem 0.5rem; border-radius: 0.2rem; margin-top: 0.5rem; display: none; align-items: flex-start; } .note_close { width: 0.7rem; position: relative; top: 0.1rem; } /*iphone 8*/ @media screen and (min-width: 375px) and (max-width: 410px) { html, body { font: 24px "Microsoft YaHei", "Microsoft JhengHei"; } .invitation_bg_div_txt>p {} .invitation_title_en>p {} .guest_list_item_name_txt>div {} .guest_list_item_name_txt_title {} .guest_btn, .commit_btn {} } @media screen and (min-width: 351px) and (max-width: 374px) { html, body { font: 24px "Microsoft YaHei", "Microsoft JhengHei"; } .invitation_bg_div_txt>p {} .invitation_title_en>p {} .guest_list_item_name_txt>div {} .guest_list_item_name_txt_title {} .guest_btn, .commit_btn {} .invitation_guest_nav, .invitation_card_nav {} .conference_item_txt_sub {} .conference_item_txt_title { font-size: 17px; } .invitation_card_input {} .invitation_card_detail { font-size: 16px; } } /*iphone se*/ @media screen and (min-width: 300px) and (max-width: 350px) { html, body { font: 21px "Microsoft YaHei", "Microsoft JhengHei"; } .invitation_bg_div_txt>p {} .invitation_title_en>p {} .guest_list_item_name_txt>div {} .guest_list_item_name_txt_title {} .guest_btn, .commit_btn {} .invitation_guest_nav, .invitation_card_nav {} .conference_item_txt_sub { font-size: 14px; } .conference_item_txt_title { font-size: 17px; } .invitation_card_input { font-size: 16px; } .invitation_card_detail { font-size: 16px; } }