fairnet/src/main/webapp/kofair_case_seed/usr/style/info.css

146 lines
8.7 KiB
CSS

/* 뉴스레터 */
.news_service .text_explain{margin:40px 0;font-size:1.7rem;font-weight:400;color:#333;line-height:1.4;}
.news_service .box.gray_fill{margin:40px 0 30px 0;}
.news_service .box.gray_fill .input_box{justify-content:flex-start;}
.news_service .box.gray_fill .apl_tit{display:inline-block;margin:0 13px 0 0;font-size:1.6rem;font-weight:500;color:#333;}
.news_service .box.gray_fill.agree_box{padding:20px;margin:40px 0;}
.news_service .box.gray_fill .email_wrap{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;}
.news_service .gray_border.box{max-height:384px;line-height:1.4;overflow:auto;}
.news_service .gray_border.box .title{font-size:1.9rem;font-weight:500;}
.news_service .gray_border.box .title+p{margin:15px 0 30px 15px;color:#666;}
.news_service .sub_dl{display:flex;margin:15px;font-size:1.7rem;color:#666;flex-direction:column;gap:6px;}
.news_service .sub_dl dd{padding:0 0 4px 20px;font-size:1.5rem;}
/* 분쟁조정 제도 */
.system_info .system_dl{color:#333;line-height:1.5;border-bottom:1px solid #d8d8d8;padding:0 0 40px 0;margin:0 0 40px 0;}
.system_info .system_dl:last-child{border-bottom:0;padding:0;margin:0;}
.system_info .system_dl dt{margin:30px 0 0 0;}
.system_info .system_dl dd{font-size:1.7rem;padding:8px 0 0 23px;}
.system_info .system_dl dd span{display:block;margin:8px 0 0 0;}
.system_info ul{font-size:1.7rem;color:#333;padding:0 0 0 20px;margin:20px 0 0 0;}
.system_info ul>li{padding:0 0 20px 0;}
.system_info ul b{font-weight:bold;}
.system_info .sub_info_ul{padding:0;margin:10px 0 0 0;}
.system_info .sub_info_ul li{padding:0 0 0 10px;}
.system_info .sub_info_ul .sub_info_ul li{margin:0;}
/* 분쟁조정 절차 */
.process_content .title.blue_border.orange_border{display:block;margin:0 0 30px 0;}
.process_content .box.gray_border{margin:0 0 40px 0;padding:60px 30px;}
.process_content .box.gray_border img{margin:0 auto;}
.process_content .box.gray_border .info_ul{margin:40px 0 0 20px;padding:0 20px;font-size:1.7rem;font-weight:400;color:#888;text-indent:-19px;gap:6px;}
.process_content .info_ul.text{padding:0 0 36px 0;margin:0 0 30px 0;gap:0;border-bottom:2px solid #2e40ba}
.process_content .info_ul.text:last-child{border-bottom:0;}
.process_content .info_ul.text dd{font-size:1.7rem;line-height:1.5;margin:10px 0 30px 0;padding:0 0 0 22px;}
.process_content .info_ul.text dd .sub_info_ul.color_brown{margin:0;}
.process_content .info_ul.text dd .color_brown{display:block;font-size:1.7rem;}
.process_content .info_ul.text dd .color_brown:nth-child(2){margin:10px 0 0 0;}
.process_content .box.gray_border.gray_fill.terms_info{padding:40px;text-align:left;}
.process_content .terms_info p{font-size:1.7rem;font-weight:400;color:#666;line-height:1.5;margin:10px 0 0 0;}
.process_content .m_img{display:none;}
/* 오시는 길 */
.map_area{width:100%;height:auto;}
.map_box{display:flex;background:#f4f5f7;border-radius:0 0 5px 5px;padding:30px 90px;align-items:center;}
.map_box .adress_ul{position:relative;display:flex;padding:0 0 0 60px;margin:0 0 0 60px;align-items:flex-start;gap:60px;}
.map_box .adress_ul::after{position:absolute;content:"";width:1px;height:40px;background:#d8d8d8;top:50%;left:0;transform:translateY(-50%);}
.map_box .adress_ul .title{font-size:2.3rem;}
.map_box .adress_ul span{font-size:1.9rem;color:#666;}
.directions_content .title.blue_border.orange_border{display:block;margin:60px 0 30px 0;}
.directions_content .item_list{display:flex;align-items:center;gap:30px;}
.directions_content .icon_box{width:130px;height:110px;background:#f4f5f7;border-radius:5px;}
.directions_content .icon_box .subway{display:inline-block;width:100%;height:100%;background:url(/kofair_case_seed/usr/images/info/icon_subway.png) no-repeat center;}
.directions_content .icon_box .bus{display:inline-block;width:100%;height:100%;background:url(/kofair_case_seed/usr/images/info/icon_bus.png) no-repeat center;}
.directions_content .item_list ul{display:flex;flex-direction:column;font-size:1.7rem;font-weight:300;gap:6px;}
.directions_content .subway_text{display:inline-flex;width:24px;height:24px;margin:0 4px 0 0;font-weight:400;color:#fff;border-radius:100%;justify-content:center;align-items:center;}
.directions_content .subway_text.subway_1{background:#263c96;}
.directions_content .subway_text.subway_2{background:#35a142;}
.directions_content .subway_text.subway_4{background:#2b99d9;}
/* ==================== 테블릿 ==================== */
@media screen and (max-width: 1199px){
.news_service .text_explain{font-size:3.4rem;margin:80px 0;}
.news_service .box.gray_fill .input_box{justify-content:flex-start;}
.news_service .box.gray_fill li{display:flex;width:100%;flex-wrap:wrap;justify-content:flex-start;}
.news_service .box.gray_fill .apl_tit{width:120px;font-size:3.2rem;margin:15px 0 0 0;}
.news_service .box.gray_fill .input_text,.news_service .box.gray_fill .email_wrap{width:calc(100% - 140px);}
.news_service .box.gray_fill .email_wrap{gap:20px;}
.news_service .box.gray_fill .input_email.input_text{width:calc(100% - 70px);}
.news_service .box.gray_fill .input_email.input_text:nth-child(2){width:calc(100% - 315px);}
.news_service .box.gray_fill.agree_box{padding:40px;margin:80px 0;}
/* 분쟁조정 절차 */
.process_content .box.gray_border .info_ul{margin:80px 0 0 40px;padding:0 40px;font-size:3.4rem;text-indent:-34px;gap:12px;}
.process_content .info_ul.text dd{font-size:3.4rem;margin:20px 0 60px 0;padding:0 0 0 50px;}
.process_content .info_ul.text dd .color_brown{font-size:3.4rem;}
.process_content .terms_info p{font-size:3.4rem;margin:20px 0 0 0;}
.process_content .m_img{display:block;}
.process_content .pc_img{display:none;}
/* 분쟁조정 제도 */
.system_info{margin:80px 0 0 0;}
.system_info .system_dl dt{margin:60px 0 0 0;}
.system_info .system_dl dd{font-size:3.4rem;padding:16px 0 0 46px;}
.system_info .system_dl dd span{margin:16px 0 0 0;}
.system_info ul{font-size:3.4rem;padding:0 0 0 40px;margin:40px 0 0 0;}
.system_info .sub_info_ul li{padding:0 0 0 30px;}
/* 오시는 길 */
.map_box{padding:30px;}
.map_box img{display:none;}
.map_box .adress_ul{display:flex;padding:0;margin:0;flex-direction:column;gap:30px;}
.map_box .adress_ul::after{display:none;}
.map_box .adress_ul li{display:flex;align-items:center;gap:30px;}
.map_box .adress_ul li .title,.map_box .adress_ul li span{font-size:3.2rem;}
.directions_content .item_list{padding:0 40px;}
.directions_content .icon_box{display:none;}
.directions_content .item_list ul{font-size:3.4rem;gap:20px;}
.directions_content .subway_text{width:48px;height:48px;}
}
/* ==================== 모바일 ==================== */
@media screen and (max-width: 767px){
.news_service .text_explain{margin:40px 0;font-size:1.7rem;}
.news_service .box.gray_fill .input_box{gap:15px;}
.news_service .box.gray_fill .apl_tit{width:70px;font-size:1.6rem;margin:7.5px 0 0 0;}
.news_service .box.gray_fill .input_text,.news_service .box.gray_fill .email_wrap{width:calc(100% - 80px);}
.news_service .box.gray_fill .email_wrap{gap:10px;}
.news_service .box.gray_fill .input_email.input_text{width:calc(100% - 35px);}
.news_service .box.gray_fill .email_select{width:190px;}
.news_service .box.gray_fill .input_email.input_text:nth-child(2){width:calc(100% - 200px);}
/* 분쟁조정 제도 */
.system_info{margin:40px 0 0 0;}
.system_info .system_dl dt{margin:30px 0 0 0;}
.system_info .system_dl dd{font-size:1.7rem;padding:8px 0 0 23px;}
.system_info .system_dl dd span{margin:8px 0 0 0;}
.system_info ul{font-size:1.7rem;padding:0 0 0 20px;margin:20px 0 0 0;}
.system_info .sub_info_ul li{padding:0 0 0 15px;margin:0 0 0 10px;}
/* 분쟁조정 절차 */
.process_content .box.gray_border .info_ul{margin:40px 0 0 20px;padding:0;font-size:1.7rem;text-indent:-17px;gap:6px;}
.process_content .info_ul.text dd{font-size:1.7rem;margin:10px 0 30px 0;padding:0 0 0 25px;}
.process_content .info_ul.text dd .color_brown{font-size:1.7rem;}
.process_content .terms_info p{font-size:1.7rem;margin:10px 0 0 0;}
/* 오시는 길 */
.map_box{padding:15px;}
.map_box .adress_ul{gap:8px;}
.map_box .adress_ul li{gap:15px;}
.map_box .adress_ul li .title,.map_box .adress_ul li span{font-size:1.6rem;}
.directions_content .title.blue_border.orange_border{margin:30px 0 15px 0;}
.directions_content .item_list{padding:0 20px;}
.directions_content .item_list ul{font-size:1.7rem;gap:10px;}
.directions_content .subway_text{width:24px;height:24px;}
}
@media screen and (max-width: 500px){
.news_service .box.gray_fill .input_email.input_text:nth-child(2),.news_service .box.gray_fill .email_select{width:100%;}
.news_service .box.gray_fill.agree_box{padding:20px;margin:40px 0;}
}