299 lines
17 KiB
CSS
299 lines
17 KiB
CSS
@charset "utf-8";
|
|
|
|
.main .icon.arrow.left{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_prev.png) no-repeat center center;margin:0 0 0 -2.5px;}
|
|
.main .icon.pause{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_pause.png) no-repeat center center;}
|
|
.main .icon.play{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_play.png) no-repeat center center;}
|
|
.main .icon.arrow.right{width:9px;height:16px;background:url(/kofair_case_seed/usr/images/main/icon_slide_next.png) no-repeat center center;margin:0 0 0 3px;}
|
|
|
|
/* 바로가기 */
|
|
|
|
.visual{width:100%;padding:70px 0;background:url(/kofair_case_seed/usr/images/main/main_visual.jpg) no-repeat center center;text-align:center;background-size:cover;}
|
|
.visual_title{font-size:3.5rem;color:#4c5591;font-weight:bold;}
|
|
.visual_title span{font-size:4.2rem;color:#2a378b;}
|
|
|
|
.baro_content{display:flex;flex-wrap:wrap;gap:35px;padding:0 55px;margin:55px 0 0 0;}
|
|
.baro_content .baro_link{position:relative;width:calc((100% - 70px)/3);padding:35px 35px 50px 35px;border-radius:10px;background:#fff;text-align:left;transition:all 0.3s ease-in-out;}
|
|
.baro_content .baro_link.darkblue_box{background:#2e40ba;}
|
|
.baro_content .baro_link.blue_box{background:#2870ed;}
|
|
.baro_content .baro_link::after{position:absolute;content:"";width:13px;height:13px;background:#cbd1f8;border-radius:100%;left:calc(100% - 40px);top:90px;}
|
|
.baro_content .darkblue_box::after,.baro_content .blue_box::after{background:#fe9a17;}
|
|
.baro_content .baro_link:hover{background:#eff1fb;box-shadow:0 0 10px 3px rgba(0,9,65,0.15);transition:all 0.3s ease-in-out;}
|
|
.baro_content .baro_link.darkblue_box:hover{background:#1f309f;}
|
|
.baro_content .baro_link.blue_box:hover{background:#1e64dc;}
|
|
.baro_title{position:relative;display:block;font-size:2.7rem;font-weight:bold;color:#2e40ba;padding:0 0 30px 0;margin:0 0 25px 0;}
|
|
.baro_title::after{position:absolute;content:"";width:34px;height:4px;background:#6b75c9;left:0;bottom:0;}
|
|
.darkblue_box .baro_title, .blue_box .baro_title{color:#fff;}
|
|
.baro_text{font-size:1.8rem;font-weight:400;color:#6b75c9;}
|
|
.darkblue_box .baro_text{color:#bfd4fa;}
|
|
.blue_box .baro_text{color:#d3e2fd;}
|
|
.baro_content .icon{position:absolute;width:120px;height:120px;right:20px;bottom:0;background-repeat:no-repeat;background-position:right calc(100% - 35px);}
|
|
.baro_apl{background:url(/kofair_case_seed/usr/images/main/baro_apl.png) ;}
|
|
.baro_inquiry{background:url(/kofair_case_seed/usr/images/main/baro_inquiry.png);}
|
|
.baro_free_counsel{background:url(/kofair_case_seed/usr/images/main/baro_free_counsel.png);}
|
|
.baro_data{background:url(/kofair_case_seed/usr/images/main/baro_data.png);}
|
|
.baro_online_counsel{background:url(/kofair_case_seed/usr/images/main/baro_online_cunsel.png);}
|
|
.baro_form{background:url(/kofair_case_seed/usr/images/main/baro_form.png);}
|
|
|
|
/* //바로가기 */
|
|
|
|
/* 분쟁조정 사례 */
|
|
|
|
.case_content{padding:60px 0;text-align:center;}
|
|
.case_content .title_wrap{position:relative;margin:0 0 35px 0;}
|
|
.case_content .title{font-size:3.2rem;font-weight:bold;color:#333;}
|
|
.case_content .title .btn_plus{width:40px;height:40px;vertical-align:middle;margin:-5px 0 0 16px;}
|
|
.case_content .case_slide_util{position:absolute;right:0;top:4px;}
|
|
.case_content .case_slide_util .btn.only_icon{width:40px;height:40px;margin:0 2.5px;}
|
|
.case_content .case_slide_util .btn.only_icon:hover{background:#f8f9fa;}
|
|
.case_content .case_slide_util .btn.only_icon:last-child{margin:0 0 0 2.5px;}
|
|
|
|
.case_content .case{position:relative;padding:28px 30px;margin:10px 0;border:1px solid #d8d8d8;border-radius:10px;text-align:left;}
|
|
.case_content .case:hover::after{position:absolute;content:"";width:calc(100% + 1px);height:calc(100% + 1px);border:2px solid #6b75c9;left:-1px;top:-1px;border-radius:9px;}
|
|
.case_content .case:hover{box-shadow:0 0 10px 3px rgba(0,9,65,0.15);}
|
|
.case_content .case_type_box{height:34px;padding:0 15px;margin:0 0 15px 0;border-radius:5px;background:#d5d5d5;color:#Fff;font-size:1.9rem;font-weight:500;display:inline-flex;align-items:center;justify-content:center;}
|
|
.case_content .case_type{width:100%;font-size:1.9rem;font-weight:400;color:#888;padding:0 0 15px 0;margin:0 0 15px 0;border-bottom:1px dotted #e0e0e0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
.case_content .case_title{display:-webkit-box;font-size:2.2rem;font-weight:500;color:#333;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
|
|
|
|
.case_content .orange{background:#f96502;}
|
|
.case_content .red{background:#e33926;}
|
|
.case_content .yellow{background:#d97d0d;}
|
|
.case_content .darkorange{background:#da560e;}
|
|
.case_content .darkred{background:#c83828;}
|
|
.case_content .darkyellow{background:#b7610d;}
|
|
|
|
/* //분쟁조정 사례 */
|
|
|
|
|
|
.main_bottom{background:#f4f5f7;padding:60px 0;}
|
|
.main_bottom .inner{display:flex;justify-content:space-between;gap:24px;}
|
|
|
|
/* 자주하는질문 + 공지사항 */
|
|
.notice_content{position:relative;display:flex;width:calc(100% - 732px);flex-wrap:wrap;}
|
|
.notice_content .tab{width:auto;font-size:3.3rem;font-weight:bold;color:#888;padding:0 27px;}
|
|
.notice_content .tab:first-child{position:relative;padding:0 27px 0 0;}
|
|
.notice_content .tab:first-child::after{position:absolute;content:"";width:8px;height:8px;border-radius:100%;background:#888;right:0;top:50%;transform:translateY(-50%);}
|
|
.notice_content .tab.active{color:#333;text-decoration:underline;text-underline-offset:10px;text-decoration-thickness:5px;}
|
|
.notice_content .tab_content{display:none;margin:44px 0 0 0;}
|
|
.notice_content .tab_content.active{display:block;width:100%;}
|
|
.notice_content .tab_content .btn_plus{position:absolute;left:387px;top:16px;background:#fff;}
|
|
.notice_content .tab_content .btn_plus i{margin:-2px -0.9px 0 0;}
|
|
.notice_content .faq{order: 2;}
|
|
.notice_content a{position:relative;display:flex;padding:0 0 12px 12px;font-size:2.1rem;color:#333;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;justify-content:space-between;}
|
|
.notice_content .faq a{display:block;}
|
|
.notice_content a::after{position:absolute;content:"";width:4px;height:4px;background:#b4b4b4;left:0;top:12.5px;}
|
|
.notice_content a:hover{color:#4051c0;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px;}
|
|
.notice_content .list_title{display:inline-block;width:calc(100% - 100px);text-overflow:ellipsis;overflow:hidden;vertical-align:middle;}
|
|
.notice_content a:hover .list_title{text-decoration:underline;text-underline-offset:4px;}
|
|
.notice_content .date{font-size:1.7rem;color:#888;}
|
|
.notice_content .notice a:hover,.notice_content a:hover .date{text-decoration:none;}
|
|
/* //자주하는질문 + 공지사항 */
|
|
|
|
/* 뉴스레터 */
|
|
.news_content{width:342px;padding:36px 30px 30px 30px;background:#fff;border:1px solid #d8d8d8;border-radius:10px;}
|
|
.news_content .title{font-size:2.7rem;font-weight:bold;color:#333;line-height:1.2;margin:0 0 20px 0;}
|
|
.news_content .title span{display:block;width:100%;margin:15px 0 0 0;font-size:1.9rem;font-weight:400;color:#888;}
|
|
.news_content .news_list{margin:20px 0 15px 0;}
|
|
.news_content a{position:relative;display:inline-block;padding:0 20px 12px 12px;font-size:2.1rem;color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
|
|
.news_content a.new::before{position:absolute;content:"N";font-size:1.6rem;font-weight:900;color:#f96502;right:0;top:3px;}
|
|
.news_content a::after{position:absolute;content:"";width:4px;height:4px;background:#b4b4b4;left:0;top:12.5px;}
|
|
.news_content .btn_wrap{margin:10px 0 0 0;}
|
|
.news_content .btn_wrap button{width:calc((100% / 2) - 5px);}
|
|
.news_content .btn_wrap button:first-child{margin:0 3px 0 0;}
|
|
.news_content .btn_wrap button:last-child{margin:0 0 0 3px;}
|
|
/* //뉴스레터 */
|
|
|
|
/* 콜센터 */
|
|
.callcenter_content{width:342px;background:#d4c9fe url(/kofair_case_seed/usr/images/main/callcenter_img.png) no-repeat center bottom;border-radius:10px;}
|
|
.callcenter_content a{width:100%;height:100%;padding:30px 35px;}
|
|
.callcenter_content .title{display:inline-block;padding:3px 16px;font-size:2.6rem;font-weight:bold;color:#ede9fe;background:#671ec1;border-radius:50px;margin:0 0 16px 0;}
|
|
.callcenter_content p{color:#671ec1;font-size:1.9rem;}
|
|
.callcenter_content .gMarket_bold{font-size:4rem;}
|
|
/* //콜센터 */
|
|
|
|
/* 배너 */
|
|
.banner_contents{border-top:1px solid #e8e8e9;padding:18px 0;}
|
|
.banner_contents .inner{display:flex;align-items:center;}
|
|
.banner_contents .case_slide_util{width:140px;}
|
|
.banner_contents .case_slide_util .btn.only_icon{width:40px;}
|
|
.banner_contents .banner_slide{width:calc(100% - 160px);}
|
|
|
|
.banner_contents .btn.only_icon{width:40px;height:40px;margin:0 2.5px;}
|
|
.banner_contents .btn.only_icon:hover{background:#f8f9fa;}
|
|
.banner_contents .btn.only_icon:last-child{margin:0 0 0 2.5px;}
|
|
.banner_contents .btn.only_icon .icon.left{margin:-3px 0 0 -4px;}
|
|
.banner_contents .btn.only_icon .icon.pause{margin:-3px 0 0 -0.3px;}
|
|
.banner_contents .btn.only_icon .icon.right{margin:-3px 0 0 4px;}
|
|
/* //배너 */
|
|
|
|
/* ==================== PC분기 ==================== */
|
|
@media screen and (max-width: 1380px){
|
|
|
|
/* 바로가기 */
|
|
.baro_text{width:calc(100% - 80px);}
|
|
.baro_text br{display:none;}
|
|
.baro_content .baro_link::after{top:auto;bottom:110px;right:35px;}
|
|
/* //바로가기 */
|
|
|
|
/* 자주하는 질문 + 공지사항 */
|
|
.notice_content .tab{font-size:3.2rem;}
|
|
.notice_content .tab_content .btn_plus{left:auto;right:0;}
|
|
/* //자주하는 질문 + 공지사항 */
|
|
}
|
|
|
|
/* ==================== 테블릿 ==================== */
|
|
@media screen and (max-width: 1199px){
|
|
|
|
/* 바로가기 */
|
|
.baro_title{font-size:3.2rem;letter-spacing:-2px;text-align:center;}
|
|
.baro_title::after{display:none;}
|
|
.baro_text{display:none;}
|
|
.baro_content .icon{width:48px;height:48px;background-size:auto 100%;background-position:center;left:50%;transform:translateX(-50%);right:auto;bottom:30px;}
|
|
.baro_content .baro_link::after{bottom:78px;left:55%;}
|
|
/* //바로가기 */
|
|
|
|
/* 사례 */
|
|
.case_content .title{font-size:3.8rem;text-align:left;}
|
|
.case_content .title .btn_plus{width:60px;height:60px;}
|
|
.case_content .title .btn_plus i{width:100%;height:100%;background:url(/kofair_case_seed/usr/images/component/icon_plus_60.png) no-repeat center center;}
|
|
.case_content .case_slide_util .btn.only_icon{width:60px;height:60px;margin:0;padding:0;}
|
|
.main .icon.arrow.left{width:60px;height:60px;background:url(/kofair_case_seed/usr/images/component/icon_arrow_left_60.png) no-repeat center center;margin:0;}
|
|
.main .icon.pause{width:60px;height:60px;background:url(/kofair_case_seed/usr/images/component/icon_pause_60.png) no-repeat center center;margin:0;}
|
|
.main .icon.arrow.right{width:60px;height:60px;background:url(/kofair_case_seed/usr/images/component/icon_arrow_right_60.png) no-repeat center center;margin:0;}
|
|
.case_content .case{padding:40px;}
|
|
.case_content .case_type_box{height:48px;font-size:3.2rem;border-radius:10px;margin:0 0 20px 0;}
|
|
.case_content .case_type{font-size:3.2rem;padding:0 0 30px 0;margin:0 0 30px 0;border-bottom:3px dotted #e0e0e0;}
|
|
.case_content .case_title{font-size:3.6rem;line-height:1.4;}
|
|
/* //사례 */
|
|
|
|
.main_bottom .inner{flex-wrap:wrap;}
|
|
.notice_content,.news_content,.callcenter_content{width:100%;border-radius:20px;;}
|
|
/* 자주하는 질문 + 공지사항 */
|
|
.notice_content .tab{font-size:3.8rem;}
|
|
.notice_content .tab_content{margin:55px 0 0 0;}
|
|
.notice_content .tab_content .btn_plus{width:60px;height:60px;left:434px;top:35px;}
|
|
.notice_content .tab_content .btn_plus .icon.plus{width:100%;height:100%;background:url(/kofair_case_seed/usr/images/component/icon_plus_60.png) no-repeat center center;}
|
|
.notice_content a{font-size:3.4rem;padding:0 0 30px 30px;}
|
|
.notice_content a::after{width:6px;height:6px;top:25.5px;}
|
|
.notice_content .list_title{width:calc(100% - 200px);}
|
|
.news_content a::after{width:6px;height:6px;top:20.5px;}
|
|
.notice_content .date{font-size:3.0rem;float:right;margin:3px 0 0 0;}
|
|
/* //자주하는 질문 + 공지사항 */
|
|
|
|
/* 뉴스레터 */
|
|
.news_content .title{font-size:3.6rem;}
|
|
.news_content .title span{font-size:2.6rem;}
|
|
.news_content a{font-size:3.4rem;padding:0 30px 20px 22px;}
|
|
.news_content a.new::before{font-size:3rem;}
|
|
.news_content .btn_wrap button{height:70px;font-size:3.4rem;border-radius:10px;border:2px solid #c4d9fd;}
|
|
/* //뉴스레터 */
|
|
|
|
/* 콜센터 */
|
|
.callcenter_content{background-position:calc(100% - 10px) bottom;}
|
|
.callcenter_content a{padding:40px;}
|
|
.callcenter_content .title{font-size:3.2rem;padding:3px 26px;}
|
|
.callcenter_content p{font-size:2.8rem;}
|
|
.callcenter_content .gMarket_bold{font-size:5rem;}
|
|
/* //콜센터 */
|
|
|
|
.banner_contents .inner{flex-wrap:wrap;justify-content:center;}
|
|
.banner_contents .banner_slide{width:100%;}
|
|
.banner_contents img{margin:0 auto;}
|
|
.banner_contents .case_slide_util{display:flex;width:100%;order:2;justify-content:center;gap:10px;}
|
|
.banner_contents .case_slide_util .btn.only_icon{width:60px;height:60px;margin:0;}
|
|
.banner_contents .btn.only_icon .icon.left,.banner_contents .btn.only_icon .icon.pause,.banner_contents .btn.only_icon .icon.right{margin:0;}
|
|
}
|
|
|
|
/* ==================== 모바일 ==================== */
|
|
@media screen and (max-width: 767px){
|
|
|
|
/* 비주얼 */
|
|
.visual{padding:35px 0;}
|
|
.visual_title{font-size:1.7rem;}
|
|
.visual_title span{font-size:2.1rem;}
|
|
/* //비주얼 */
|
|
|
|
/* 바로가기 */
|
|
.baro_content{margin:0 0 0 0;padding:27px 0 0 0;gap:17px;}
|
|
.baro_content .baro_link{width:calc(((100% / 3) - 11.4px));min-height:110px;padding:17px 17px 25px 17px;}
|
|
.baro_content .baro_link::after{width:8px;height:8px;left:auto;right:10px;bottom:48px;}
|
|
.baro_title{padding:0;margin:0;font-size:1.6rem;letter-spacing:0;word-break:keep-all;text-align:left;}
|
|
.baro_content .icon{width:30px;height:30px;background-size:auto 100%;bottom:15px;left:auto;right:15px;transform:none;}
|
|
/* //바로가기 */
|
|
|
|
/* 사례 */
|
|
.case_content{padding:30px 0 0 0;}
|
|
.case_content .title_wrap{margin:0 0 17px 0;}
|
|
.case_content .title{font-size:1.9rem;}
|
|
.case_content .title .btn_plus,.case_content .case_slide_util .btn.only_icon{width:30px;height:30px;padding:0;}
|
|
.case_content .title .btn_plus{margin:-5px 0 0 8px;}
|
|
.case_content .title .btn_plus i{width:30px;height:30px;background-size:100%;margin:-1px 0 0 -1px;}
|
|
.case_content .case_list{margin:-10px 0 0 0;}
|
|
.case_content .case_slide_util{display:flex;top:-2px;gap:3px;}
|
|
.case_content .case_slide_util .btn.only_icon i{width:30px;height:30px;background-size:100%;}
|
|
.case_content .case{padding:20px;}
|
|
.case_content .case_type_box{height:24px;font-size:1.6rem;border-radius:5px;margin:0 0 10px 0;}
|
|
.case_content .case_type{font-size: 1.6rem;border-bottom:1px dotted #e0e0e0;padding:0 0 15px 0;margin:0 0 15px 0;}
|
|
.case_content .case_title{font-size:1.8rem;}
|
|
/* //사례 */
|
|
|
|
.main_bottom{padding:30px 0;}
|
|
|
|
/* 자주하는 질문 + 공지사항 */
|
|
.notice_content .tab{font-size:1.9rem;padding:0 13px;}
|
|
.notice_content .tab.active{text-decoration-thickness:3px;}
|
|
.notice_content .tab:first-child::after{width:4px;height:4px;right:-2px;}
|
|
.notice_content .tab:first-child{padding:0 13px 0 0;}
|
|
.notice_content .tab_content.active{margin:22.5px 0 0 0;}
|
|
.notice_content .tab_content .btn_plus{width:30px;height:30px;left:218px;top:15px;}
|
|
.notice_content .tab_content .btn_plus .icon.plus{background-size:100%;margin:0;;}
|
|
.notice_content a{font-size:1.7rem;padding:0 0 15px 8px;}
|
|
.notice_content a::after{width:3px;height:3px;top:10.5px;}
|
|
.notice_content .list_title{width:calc(100% - 90px);}
|
|
.notice_content .date{font-size:1.5rem;margin:0;}
|
|
/* //자주하는 질문 + 공지사항 */
|
|
|
|
/* 뉴스레터 */
|
|
.news_content{padding:30px;border-radius:10px;}
|
|
.news_content .title{font-size:1.8rem;}
|
|
.news_content .title span{font-size:1.4rem;margin:10px 0 0 0;}
|
|
.news_content a{font-size:1.7rem;padding:0 15px 10px 11px;}
|
|
.news_content a.new::before{font-size:1.5rem;top:1.5px;}
|
|
.news_content a::after{width:3px;height:3px;top:10.5px;}
|
|
.news_content .btn_wrap{margin:0;}
|
|
.news_content .btn_wrap button{height:35px;border-radius:5px;font-size:1.7rem;border:1px solid #c4d9fd;}
|
|
/* //뉴스레터 */
|
|
|
|
/* 콜센터 */
|
|
.callcenter_content{border-radius:10px;background-position:center bottom;}
|
|
.callcenter_content a{padding:30px 30px 150px 30px;text-align:center;}
|
|
.callcenter_content .title{font-size:1.6rem;}
|
|
.callcenter_content p{font-size:1.4rem;}
|
|
.callcenter_content .gMarket_bold{font-size:2.5rem;}
|
|
/* //콜센터 */
|
|
|
|
/* 배너 */
|
|
.banner_contents .case_slide_util{margin:20px 0 0 0;}
|
|
.banner_contents .case_slide_util .btn.only_icon{width:30px;height:30px;}
|
|
.banner_contents .btn.only_icon .icon.left, .banner_contents .btn.only_icon .icon.pause, .banner_contents .btn.only_icon .icon.right{width:100%;height:30px;background-size:100%;}
|
|
/* //배너 */
|
|
}
|
|
|
|
@media screen and (max-width: 360px){
|
|
|
|
/* 비주얼 */
|
|
.visual_title span{display:block;}
|
|
/* //비주얼 */
|
|
|
|
/* 바로가기 */
|
|
.baro_content .baro_link{width:calc((100% / 2) - 9.1px);}
|
|
/* //바로가기 */
|
|
|
|
/* 사례 */
|
|
.case_content{padding:30px 0 20px 0;}
|
|
/* //사례 */
|
|
|
|
/* 자주하는 질문 + 공지사항 */
|
|
.notice_content .tab_content.active{margin:30.5px 0 0 0;}
|
|
/* //자주하는 질문 + 공지사항 */
|
|
|
|
} |