.con { padding:30px 0 40px 0; } .con .nav_tit { font-weight: 600; text-align: center; color: #2b2b2b; line-height: 1; } .con .nav_tit::after { content: ""; display: block; width: 60px; height: 2px; margin: auto; margin-top: 18px; background: #d0121b; } .con .tab { display: flex; align-items: center; max-width: 880px; margin: auto; width: 100%; border-radius: 10px; overflow: hidden; margin-top: 40px; } .con .tab p { flex: 1; background: #f8f9fa; color: #23232b; text-align: center; padding: 20px 0; transition: all 0.2s linear; cursor: pointer; } .con .tab p:hover { color: #fff; background: #b72d29; } .con .tab .act { color: #fff; background: #b72d29; position: relative; } .con .tab .act:after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-left: 8px solid transparent; border-bottom: 8px solid #fff; border-right: 8px solid transparent; } .con .main { margin-top: 40px; } .con .main .sel_box { display: flex; align-items: center; color: #2a2a2a; } .con .main .sel_box > p { flex: 0 0 auto; } .con .main .sel_box .sel { position: relative; margin-left:20px; } .con .main .sel_box .sel > div { min-width: 140px; padding: 0 20px; height: 34px; min-width: 142px; display: flex; justify-content: space-between; align-items: center; background: #ffffff; border: 1px solid #dbdbdb; border-radius: 18px; cursor: pointer; color: #2a2a2a; } .con .main .sel_box .sel > div svg { margin-left: 10px; transition: all 0.2s linear; } .con .main .sel_box .sel ul { position: absolute; top: calc(100% + 2px); left: 0; width: max-content; min-width: 100%; background: #ffffff; border: 1px solid #dbdbdb; padding: 10px 0; border-radius: 18px; display: none; z-index: 2; } .con .main .sel_box .sel ul li { text-align: center; padding: 4px; cursor: pointer; color: #2a2a2a; } .con .main .sel_box .sel.all div { justify-content: center; } .con .main .sel_box .sel.all.act div { background: #d0121b; color: #fff; } .con .main .main_list { margin-top: 20px; width: 100%; } .con .main .main_list .table_header { background: #f5f5f5; padding: 16px 40px; display: flex; } .con .main .main_list .table_header p { flex: 1; text-align: center; padding-right: 10px; color: #4c4c4c; } .con .main .main_list .table_header p:first-child { text-align: left; } .con .main .main_list .table_header p:last-child { text-align: right; padding-right: 0; } .con .main .main_list .table_con { margin-bottom: 40px; } .con .main .main_list .table_con .list { color: #4c4c4c; cursor: pointer; } .con .main .main_list .table_con .list svg { transition: all 0.2s linear; } .con .main .main_list .table_con .list:hover { background: #b72d29; color: #fff; } .con .main .main_list .table_con .list:hover svg path { fill: #fff; } .con .main .main_list .table_con .list.act { background: #b72d29; color: #fff; } .con .main .main_list .table_con .list.act svg { transform: rotate(180deg); } .con .main .main_list .table_con .list.act svg path { fill: #fff; } .con .main .main_list .table_con .list_tit { border-bottom: 1px solid #c0bfbf; transition: all 0.4s linear; padding: 24px 40px; display: flex; } .con .main .main_list .table_con .list_tit p { flex: 1; text-align: center; padding-right: 10px; } .con .main .main_list .table_con .list_tit p .mo { display: none; } .con .main .main_list .table_con .list_tit p:first-child { text-align: left; } .con .main .main_list .table_con .list_tit p:last-child { text-align: right; padding-right: 0; } .con .main .main_list .table_con .list_tit p:last-child svg { cursor: pointer; margin-left: 40px; } .con .main .main_list .table_con .list_mes { background: #fafafa; padding: 40px; display: none; } .con .main .main_list .table_con .list_mes .tit { font-weight: 600; color: #4c4c4c; } .con .main .main_list .table_con .list_mes .mes { margin-top: 20px; color: #888888; line-height: 2; } .con .main .main_list .table_con .list_mes hr { width: 100%; height: 0; opacity: 0.3; margin: 40px 0; border: 1px dashed #c0bfbf; } .con .main .main_list .table_con .list_mes .toPage { cursor: pointer; display: table; margin: auto; margin-top: 40px; padding: 14px 40px; border-radius: 5px; background: #d0121b; } .con .main .main_list .table_con .list_mes .toPage span { color: #fff; } .con .main .main_list .table_con .list_mes .toPage::after { background: #ca0c18; } #mes { display: none; } .pop_form .layui-form { padding: 40px; border-radius: 8px; width: 800px; background-color: #fff; } .pop_form .layui-form .layui-input-block { margin-left: 0; } .pop_form .layui-form .layui-input { height: 50px; line-height: 50px; padding: 0 16px; } .pop_form .layui-form .dis_none { display: none; } .pop_form .layui-form .tit { font-weight: 600; text-align: left; color: #4c4c4c; margin-bottom: 20px; } .pop_form .layui-form .sub { margin-top: 40px; text-align: center; } .pop_form .layui-form .sub button { padding: 12px 40px; background: #d0121b; height: auto; line-height: 1; color: #fff; border-radius: 10px; } .pop_form .layui-form .sub button span { color: #fff; } .pop_form .layui-form .sub button:after { background: #ca0c18; } .pop_form .layui-form .class-accept { padding: 0; background: transparent; color: #b72d29; } @media only screen and (max-width: 1440px) { .con .tab p { padding: 18px; } .con .main .sel_box .sel > div { min-width: 130px; } } @media only screen and (max-width: 1000px) { .pop_form .layui-form { width: 80vw; } } @media only screen and (max-width: 768px) { .con { padding: 20px 0 40px 0; } .con .nav_tit::after { margin-top: 10px; } .con .tab { margin-top: 20px; } .con .main .main_list .table_con{ margin-bottom: 20px; } .con .main{ margin-top: 20px; } .con .tab p { padding: 14px 10px; } .con .main .sel_box .sel > div { padding: 0 10px; } .con .main .sel_box .sel > div { min-width: 100px; } .con .main .sel_box { flex-wrap: wrap; } .con .main .sel_box .sel { margin: 5px; } .con .main .main_list .table_header { display: none; } .con .main .main_list .table_con .list_tit p .mo { display: inline-block; } .con .main .main_list .table_con .list_tit { background: #fafafa; padding: 20px; } .con .main .main_list .table_con .list { margin-bottom: 20px; } .con .main .main_list .table_con .list:hover { background: #fafafa; color: #4c4c4c; } .con .main .main_list .table_con .list_mes { padding: 20px; } .con .main .main_list .table_con .list_mes .toPage { padding: 10px 20px; } .con .main .main_list .table_con .list.act .list_tit { background: #b72d29; color: #fff; } .con .main .main_list .table_con .list_tit p { flex: 0 0 50%; text-align: left; margin-bottom: 10px; } .con .main .main_list .table_con .list_tit p:last-child { text-align: justify; display: flex; align-items: center; justify-content: space-between; flex: 0 0 100%; margin: 0; } .con .main .main_list .table_con .list_tit { flex-wrap: wrap; } .pop_form .layui-form { padding: 20px; width: 90vw; } .pop_form .layui-form .tit { margin-bottom: 20px; } .pop_form .layui-form .sub button { width: 100%; margin-top: 10px; } }