.page_container { flex: 1; background-color: #fff; align-items: center; padding-top: 200px; } .btn_bg { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 500px; height: 120px; background-color: #fff; border-radius: 60px; box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3); margin-top: 88px; position: relative; } .footer { position: absolute; bottom: 96px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .footer_detail { flex-direction: row; align-items: center; } .footer_text { // font-weight: bold; font-size: 28px; color: #CACACA; } .footer_icon { width: 28px; height: 28px; } .ring_center { position: absolute; left: 0; right: 0; top: 0; bottom: 0; align-items: center; justify-content: center; } .sun { width: 48px; height: 48px; // background-color: red; // margin-top: 134px; margin-top: -16px; } .time { margin-top: 0px; font-weight: 700; font-size: 72px; color: #CACACA; // background-color: red; } .date1 { margin-top: 0px; font-weight: 500; font-size: 32px; // line-height: 36px; letter-spacing: -0.5; color: #CACACA; // background-color: red; padding-bottom: 6px; } .location { flex-direction: row; align-items: center; justify-content: center; margin-top: 124px; } .location_icon { width: 32px; height: 32px; } .location_text { font-weight: bold; color: #CACACA; font-size: 40px; margin-left: 8px; } .timezone { font-size: 24px; font-weight: bold; color: #CACACA; } .modal_bg { background-color: #EBEBEB; padding-bottom: 80px; padding-top: 60px; border-top-left-radius: 36px; border-top-right-radius: 36px; } .check { width: 48px; height: 48px; } .language_content { margin-left: 86px; margin-right: 46px; margin-top: 20px; display: flex; flex-direction: column; } .dst_content { margin-left: 20px; margin-right: 20px; flex-direction: row; } .dst_item { flex-direction: row; margin-bottom: 40px; } .dst_card { background-color: #fff; border-radius: 36px; display: flex; flex-direction: column; align-items: center; margin-right: 36px; width: 240px; padding-top: 20px; padding-bottom: 20px; } .language_item { flex-direction: row; align-items: center; justify-content: space-between; height: 96px; } .language_text { color: #262626; font-size: 28px; } .line { background-color: #262626; opacity: 0.2; height: 2px; transform: scaleY(0.5); } .month { color: #1C1C1C; font-size: 28px; line-height: 40px; } .week { color: #1C1C1C; font-size: 28px; line-height: 40px; } .day { font-size: 84px; line-height: 92px; color: #1C1C1C; font-weight: bold; } .year { font-size: 32px; line-height: 40px; color: #EAE9E9; } .dst_title { font-size: 36px; line-height: 48px; color: #1C1C1C; font-weight: bold; margin-top: 20px; } .dst_desc { font-size: 28px; line-height: 40px; margin-top: 10px; color: #9E9E9E; } .dst_note { color: #9E9E9E; font-size: 16px; line-height: 28px; } .history_item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 96px; margin-left: 66px; margin-right: 66px; border-bottom: solid 2px rgba(38, 38, 38, 0.2); } .btn_img_bg { width: 558px; height: 180px; } .btn_bg2 { margin-top: 20px; position: relative; } .more { width: 48px; height: 48px; position: absolute; right: 60px; top: 60px; } .btn_text_bg { left: 0; right: 0; top: 0; height: 160px; position: absolute; align-items: center; justify-content: center; display: flex; } .btn_text { color: #CACACA; font-weight: bold; font-size: 40px; text-align: center; display: flex; }