392 lines
16 KiB
CSS
392 lines
16 KiB
CSS
@charset "utf-8";
|
|
|
|
/* 버튼 */
|
|
.btn_wrap{display:flex;margin:40px 0 0 0;justify-content:space-between;align-items:center;gap:10px;}
|
|
.btn_wrap.right{justify-content:flex-end;}
|
|
.btn_wrap.left{justify-content:flex-start;}
|
|
.btn_wrap.center{justify-content:center;}
|
|
|
|
.btn{display:inline-block;color:#333;border-radius:5px;transition:all 0.2s ease-in-out;}
|
|
.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.3);transition:all 0.2s ease-in-out;}
|
|
|
|
.btn_35{height:35px;font-size:1.6rem;font-weight:400;padding:0 25px;}
|
|
.btn_35.only_icon{width:35px;}
|
|
.btn_40{height:40px;font-size:1.8rem;font-weight:400;padding:0 18px;}
|
|
.btn_40.only_icon{width:40px;}
|
|
.btn_45{height:45px;font-size:1.9rem;font-weight:500;padding:0 30px;}
|
|
.btn_45.only_icon{width:45px;}
|
|
.btn_50{height:50px;font-size:2rem;font-weight:500;}
|
|
.btn_50.only_icon{width:50px;}
|
|
|
|
.btn.round{border-radius:100%;}
|
|
.btn.only_icon{padding:0;}
|
|
|
|
.btn.blue_fill{background:#2870ed;color:#fff;}
|
|
.btn.blue_fill:hover{background:#1e64dc;}
|
|
.btn.blue_border{border:1px solid #2870ed;color:#2870ed;}
|
|
.btn.darkblue_border{background:#fff;border:1px solid #2435ac;color:#2435ac;}
|
|
.btn.gray_border{border:1px solid #d8d8d8;}
|
|
.btn.gray_border:hover{background:#f8f9fa;border:1px solid #b5b5b5;}
|
|
.btn.darkgray_border{border:1px solid #888888;color:#666;}
|
|
.btn.gray_fill{background:#8a8a8a;color:#fff;}
|
|
.btn.skyblue_fill{background:#e3edfe;border:1px solid #c4d9fd;color:#6b75c9;}
|
|
.btn.darkblue_fill{background:#2e40ba;color:#fff;}
|
|
.btn.darkblue_fill:hover{background:#2435ac;}
|
|
.btn.orange_fill{background:#f96502;color:#fff;}
|
|
.btn.orange_fill:hover{background:#eb5e00;}
|
|
|
|
/* input, select, textarea */
|
|
.input_box{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
|
|
.input_box.column{flex-direction:column;}
|
|
|
|
.input_text{height:40px;font-size:17px;color:#333;padding:0 10px;background:#fff;border:1px solid #d8d8d8;border-radius:5px;}
|
|
.input_text:active{border:1px solid #333;}
|
|
|
|
.input_file{position:absolute;width:0;height:0;padding:0;overflow:hidden;border:0;}
|
|
.input_file+.file{display:inline-flex;justify-content:center;align-items:center;}
|
|
|
|
.radio{width:16px;height:16px;margin:0 5px 0 0;border:1px solid #cecece;}
|
|
.radio+label{font-size:1.8rem;color:#666;vertical-align:middle;}
|
|
|
|
.select{min-width:120px;height:40px;font-size:17px;color:#333;padding:0 34px 0 20px;border:1px solid #d8d8d8;border-radius:5px;background:#fff url(/kofair_case_seed/usr/images/component/icon_select.png) no-repeat calc(100% - 16px) calc(50% + 1px);}
|
|
.select:active{border:1px solid #333;}
|
|
|
|
.checkbox{width:18px;height:18px;margin:-4px 10px 0 0;border:1px solid #d8d8d8;}
|
|
.checkbox+label{font-size:1.7rem;color:#333;}
|
|
|
|
input:disabled, input:read-only{background:#f4f4f4;border:1px solid #dddddd;}
|
|
|
|
/* 텍스트 */
|
|
.fw_light{font-weight:300;}
|
|
.fw_regular{font-weight:400;}
|
|
.fw_medium{font-weight:500;}
|
|
.fw_bold{font-weight:700;}
|
|
.fw_extrabold{font-weight:800;}
|
|
|
|
.gMarket_light{font-family:'GmarketSansLight';}
|
|
.gMarket_medium{font-family:'GmarketSansMedium';}
|
|
.gMarket_bold{font-family:'GmarketSansBold';}
|
|
|
|
.color_333{color:#333;}
|
|
.color_666{color:#666;}
|
|
.color_blue{color:#1467cc;}
|
|
.color_darkblue{color:#2e40ba;}
|
|
.color_red{color:#e40000;}
|
|
.color_brown{color:#a5532f !important;}
|
|
|
|
.title{position:relative;font-weight:bold;color:#333;}
|
|
.title.depth01{font-size:2.3rem;}
|
|
.title.depth02{font-size:2.1rem;}
|
|
.title.depth03{font-size:1.7rem;font-weight:400;}
|
|
|
|
.title.orange_border{padding:0 0 0 19px;}
|
|
.title.orange_border::after{position:absolute;content:"";width:10px;height:10px;border:2px solid #f96502;left:0;top:10px;}
|
|
.title.orange_border.round::after{border-radius:100%;}
|
|
|
|
.title.blue_border{padding:0 0 0 19px;}
|
|
.title.blue_border::after{position:absolute;content:"";width:10px;height:10px;border-right:3px solid #2c76f7;border-bottom:3px solid #2c76f7;border-left:3px solid #2e40ba;border-top:3px solid #2e40ba;left:0;top:6px;}
|
|
|
|
.title.blue_border.orange_border{font-size:2.5rem;font-weight:bold;color:#333;line-height:1.5;}
|
|
.title.blue_border.orange_border::before{position:absolute;content:"";width:7px;height:15px;border-radius:15px;background:#2e40ba;border:0;left:0;top:16px;transform: rotate(45deg);z-index:1;}
|
|
.title.blue_border.orange_border::after{position:absolute;content:"";width:7px;height:15px;border-radius:15px;background:#f96502;border:0;left:0;top:8.5px;transform: rotate(-45deg);}
|
|
|
|
.cf_text{font-size:1.5rem;font-weight:300;color:#666;}
|
|
|
|
.required_text{position:absolute;color:#e40000;left:15px;top:22px;}
|
|
.required_text span{position:absolute;text-indent:-9999px;}
|
|
|
|
.length_wrap{position:relative;width:100%;}
|
|
.length_wrap textarea{width:100%;min-height:160px;}
|
|
.length_wrap .length{position:absolute;font-size:1.4rem;font-weight:400;color:#888;line-height:1;top:calc(100% - 32px);right:16px;}
|
|
.length_wrap .length .color_red{font-weight:500;}
|
|
|
|
|
|
/* 노출/숨김 */
|
|
.show{display:block !important;}
|
|
.hide{display:none !important;}
|
|
|
|
/* sub layout */
|
|
.wrap.sub .footer{margin:80px 0 0 0;}
|
|
.sub_visual{display:flex;margin:0 0 30px 0;height:160px;background:url(/kofair_case_seed/usr/images/layout/sub_visual.jpg) no-repeat left center;justify-content:center;align-items:center;box-shadow:inset 0 2px 10px 1px rgba(0,0,0,0.1);}
|
|
.sub_visual h2{font-size:3.5rem;font-weight:bold;color:#2a378b;}
|
|
.contents.sub .inner{display:flex;justify-content:space-between;align-items:flex-start;}
|
|
|
|
.lnb{width:286px;border-bottom:3px solid #2e40ba;}
|
|
.lnb .title{display:flex;height:100px;font-size:2.7rem;color:#fff;font-weight:bold;background:#2e40ba;border-radius:20px 0 0 0;justify-content:center;align-items:center;}
|
|
.lnb .lnb_menu>li{border-bottom:1px solid #d8d8d8;}
|
|
.lnb .lnb_menu>li:last-child{border-bottom:0;}
|
|
.lnb .lnb_menu_title{position:relative;display:flex;width:100%;height:60px;font-size:1.9rem;font-weight:400;color:#333;text-align:left;padding:0 0 0 20px;align-items:center;transition:all 0.2s ease-in-out;}
|
|
.lnb .lnb_menu_title i{position:absolute;right:20px;top:50%;transform:translateY(-50%);}
|
|
.lnb .lnb_menu li .lnb_menu_title:hover{background:#eef4fe;text-decoration:underline;}
|
|
.lnb .lnb_menu li .lnb_menu_title:hover i{background:url(/kofair_case_seed/usr/images/component/icon_lnb_toggle_slide_active.png) no-repeat center bottom;}
|
|
.lnb .lnb_menu li.active .lnb_menu_title:hover i{background:url(/kofair_case_seed/usr/images/component/icon_lnb_toggle_slide_active.png) no-repeat center top;}
|
|
.lnb .lnb_menu li.active .lnb_menu_title{background:#2870ed;font-weight:bold;color:#fff;}
|
|
.lnb .lnb_sub_menu{display:flex;flex-direction:column;padding:22px 20px;background:#f4f5f7;gap:20px;}
|
|
.lnb .lnb_sub_menu a{position:relative;display:flex;padding:0 0 0 15px;font-size:1.9rem;color:#333;align-items:center;}
|
|
.lnb .lnb_sub_menu a::after{position:absolute;content:"";width:8px;height:4px;background:#b4b4b4;left:0;top:12px;}
|
|
.lnb .lnb_sub_menu a.active{color:#4051c0;font-weight:bold;}
|
|
.lnb .lnb_sub_menu a.active::after{background:#4051c0;}
|
|
.lnb .lnb_sub_menu a:hover{text-decoration:underline;text-underline-offset:3px;}
|
|
|
|
/* ==================== 테블릿 ==================== */
|
|
@media screen and (max-width: 1199px){
|
|
|
|
/* 버튼 */
|
|
.btn{border-radius:10px;}
|
|
.btn_35{height:70px;font-size:3.2rem;padding:0 50px;}
|
|
.btn_40{height:80px;font-size:3.4rem;padding:0 38px;}
|
|
.btn_45{height:90px;font-size:3.4rem;padding:0 36px;}
|
|
.btn_50{height:100px;font-size:4rem;}
|
|
|
|
/* input, select, textarea */
|
|
.input_box{gap:30px;}
|
|
.input_text{height:80px;font-size:3.4rem;border-radius:10px;padding:0 20px;}
|
|
.select{min-width:120px;height:80px;font-size:3.4rem;border-radius:10px;background:#fff url(/kofair_case_seed/usr/images/component/icon_select_m.png) no-repeat calc(100% - 16px) calc(50% + 1px);}
|
|
.radio{width:30px;height:30px;margin:0 21px 0 0;}
|
|
.radio+label{font-size:3.4rem;}
|
|
.checkbox{width:36px;height:36px;margin:0 20px 0 0;border:2px solid #d8d8d8;}
|
|
.checkbox+label{font-size:3.4rem;}
|
|
|
|
/* 텍스트 */
|
|
.title.depth02{font-size:4.2rem;}
|
|
.title.depth03{font-size:3.4rem;line-height:1.5;}
|
|
|
|
.title.orange_border{padding:0 0 0 38px;}
|
|
.title.orange_border::after{position:absolute;content:"";width:20px;height:20px;border:4px solid #f96502;border-radius:100%;left:0;top:22px;}
|
|
|
|
.title.blue_border{padding:0 0 0 38px;}
|
|
.title.blue_border::after{position:absolute;content:"";width:20px;height:20px;border-right:6px solid #2c76f7;border-bottom:6px solid #2c76f7;border-left:6px solid #2e40ba;border-top:6px solid #2e40ba;left:0;top:16px;}
|
|
|
|
.title.blue_border.orange_border{font-size:5rem;}
|
|
.title.blue_border.orange_border::before{width:14px;height:30px;border-radius:30px;left:0;top:30px;}
|
|
.title.blue_border.orange_border::after{width:14px;height:30px;border-radius:30px;left:0;top:17px;}
|
|
|
|
.required_text{top:42.5px;left:20px;}
|
|
.cf_text{font-size:3rem;}
|
|
|
|
.length_wrap .length{font-size:2.8rem;top:calc(100% - 64px);right:32px;}
|
|
}
|
|
|
|
/* ==================== 모바일 ==================== */
|
|
@media screen and (max-width: 767px){
|
|
|
|
/* 버튼 */
|
|
.btn{border-radius:5px;}
|
|
.btn_35{height:35px;font-size:1.6rem;padding:0 25px;}
|
|
.btn_40{height:40px;font-size:1.7rem;padding:0 18px;}
|
|
.btn_45{height:45px;font-size:1.7rem;padding:0 18px;}
|
|
.btn_50{height:50px;font-size:2rem;}
|
|
|
|
/* input, select, textarea */
|
|
.input_text{height:40px;font-size:1.7rem;border-radius:5px;padding:0 10px;}
|
|
.select{min-width:120px;height:40px;font-size:1.7rem;border-radius:5px;background:#fff url(/kofair_case_seed/usr/images/component/icon_select_m.png) no-repeat calc(100% - 16px) calc(50% + 1px);}
|
|
.radio{width:16px;height:16px;margin:0 5px 0 0;}
|
|
.radio+label{font-size:1.7rem;}
|
|
.checkbox{width:18px;height:18px;margin:0 10px 0 0;border:2px solid #d8d8d8;}
|
|
.checkbox+label{font-size:1.7rem;}
|
|
|
|
/* 텍스트 */
|
|
.title.depth02{font-size:2.1rem;}
|
|
.title.depth03{font-size:1.7rem;}
|
|
.title.orange_border{padding:0 0 0 19px;}
|
|
.title.orange_border::after{width:10px;height:10px;border:2px solid #f96502;left:0;top:11px;}
|
|
|
|
.title.blue_border{padding:0 0 0 19px;}
|
|
.title.blue_border::after{width:10px;height:10px;border-right:3px solid #2c76f7;border-bottom:3px solid #2c76f7;border-left:3px solid #2e40ba;border-top:3px solid #2e40ba;left:0;top:8px;}
|
|
|
|
.title.blue_border.orange_border{font-size:2.5rem;}
|
|
.title.blue_border.orange_border::before{width:7px;height:15px;border-radius:15px;left:0;top:15px;}
|
|
.title.blue_border.orange_border::after{width:7px;height:15px;border-radius:15px;left:0;top:8.5px;}
|
|
|
|
.cf_text{font-size:1.5rem;}
|
|
.required_text{top:20px;left:10px;}
|
|
.length_wrap .length{font-size:1.4rem;top:calc(100% - 32px);right:16px;}
|
|
}
|
|
|
|
|
|
/* 간격 */
|
|
.p0 {padding: 0px!important;}
|
|
.p5 {padding: 5px!important;}
|
|
|
|
.pt5 {padding-top: 5px!important;}
|
|
.pt10 {padding-top: 10px!important;}
|
|
.pt15 {padding-top: 15px!important;}
|
|
.pt20 {padding-top: 20px!important;}
|
|
.pt25 {padding-top: 25px!important;}
|
|
.pt30 {padding-top: 30px!important;}
|
|
.pt35 {padding-top: 35px!important;}
|
|
.pt40 {padding-top: 40px!important;}
|
|
.pt45 {padding-top: 45px!important;}
|
|
.pt50 {padding-top: 50px!important;}
|
|
|
|
.pr0 {padding-right: 0px!important;}
|
|
.pr20 {padding-right: 20px!important;}
|
|
|
|
.pb5 {padding-bottom: 5px!important;}
|
|
.pb10 {padding-bottom: 10px!important;}
|
|
.pb15 {padding-bottom: 15px!important;}
|
|
.pb20 {padding-bottom: 20px!important;}
|
|
.pb25 {padding-bottom: 25px!important;}
|
|
.pb30 {padding-bottom: 30px!important;}
|
|
.pb35 {padding-bottom: 35px!important;}
|
|
.pb40 {padding-bottom: 40px!important;}
|
|
.pb45 {padding-bottom: 45px!important;}
|
|
.pb50 {padding-bottom: 50px!important;}
|
|
|
|
.pl0 {padding-left: 0px!important;}
|
|
.pl15 {padding-left: 15px!important;}
|
|
.pl20 {padding-left: 20px!important;}
|
|
|
|
.m20 {margin: 20px!important;}
|
|
|
|
.mt-1 {margin-top: -1px!important;}
|
|
.mt0 {margin-top: 0px!important;}
|
|
.mt5 {margin-top: 5px!important;}
|
|
.mt10 {margin-top: 10px!important;}
|
|
.mt15 {margin-top: 15px!important;}
|
|
.mt20 {margin-top: 20px!important;}
|
|
.mt25 {margin-top: 25px!important;}
|
|
.mt30 {margin-top: 30px!important;}
|
|
.mt35 {margin-top: 35px!important;}
|
|
.mt40 {margin-top: 40px!important;}
|
|
.mt45 {margin-top: 45px!important;}
|
|
.mt50 {margin-top: 50px!important;}
|
|
.mt60 {margin-top: 60px!important;}
|
|
.mt70 {margin-top: 70px!important;}
|
|
.mt80 {margin-top: 80px!important;}
|
|
.mt90 {margin-top: 90px!important;}
|
|
.mt100 {margin-top: 100px!important;}
|
|
|
|
.mr0 {margin-right: 0px!important;}
|
|
.mr3 {margin-right: 3px!important;}
|
|
.mr5 {margin-right: 5px!important;}
|
|
.mr10 {margin-right: 10px!important;}
|
|
.mr15 {margin-right: 15px!important;}
|
|
.mr20 {margin-right: 20px!important;}
|
|
.mr25 {margin-right: 25px!important;}
|
|
.mr30 {margin-right: 30px!important;}
|
|
.mr35 {margin-right: 35px!important;}
|
|
.mr40 {margin-right: 40px!important;}
|
|
.mr45 {margin-right: 45px!important;}
|
|
.mr50 {margin-right: 50px!important;}
|
|
.mr60 {margin-right: 60px!important;}
|
|
.mr70 {margin-right: 70px!important;}
|
|
.mr80 {margin-right: 80px!important;}
|
|
.mr90 {margin-right: 90px!important;}
|
|
.mr100 {margin-right: 100px!important;}
|
|
|
|
.mb-4 {margin-bottom: -4px!important;}
|
|
.mb0 {margin-bottom: 0px!important;}
|
|
.mb1 {margin-bottom: 1px!important;}
|
|
.mb5 {margin-bottom: 5px!important;}
|
|
.mb10 {margin-bottom: 10px!important;}
|
|
.mb15 {margin-bottom: 15px!important;}
|
|
.mb18 {margin-bottom: 18px!important;}
|
|
.mb20 {margin-bottom: 20px!important;}
|
|
.mb25 {margin-bottom: 25px!important;}
|
|
.mb30 {margin-bottom: 30px!important;}
|
|
.mb35 {margin-bottom: 35px!important;}
|
|
.mb40 {margin-bottom: 40px!important;}
|
|
.mb45 {margin-bottom: 45px!important;}
|
|
.mb50 {margin-bottom: 50px!important;}
|
|
.mb60 {margin-bottom: 60px!important;}
|
|
.mb70 {margin-bottom: 70px!important;}
|
|
.mb80 {margin-bottom: 80px!important;}
|
|
.mb90 {margin-bottom: 90px!important;}
|
|
.mb100 {margin-bottom: 100px!important;}
|
|
|
|
.ml0 {margin-left: 0px!important;}
|
|
.ml5 {margin-left: 5px!important;}
|
|
.ml10 {margin-left: 10px!important;}
|
|
.ml15 {margin-left: 15px!important;}
|
|
.ml20 {margin-left: 20px!important;}
|
|
.ml25 {margin-left: 25px!important;}
|
|
.ml30 {margin-left: 30px!important;}
|
|
.ml35 {margin-left: 35px!important;}
|
|
.ml40 {margin-left: 40px!important;}
|
|
.ml45 {margin-left: 45px!important;}
|
|
.ml50 {margin-left: 50px!important;}
|
|
.ml60 {margin-left: 60px!important;}
|
|
.ml70 {margin-left: 70px!important;}
|
|
.ml80 {margin-left: 80px!important;}
|
|
.ml90 {margin-left: 90px!important;}
|
|
.ml100 {margin-left: 100px!important;}
|
|
|
|
/* 너비, 높이 */
|
|
.w100per {width: 100% !important;}
|
|
.w99per {width: 99%;}
|
|
.w95per {width: 95%;}
|
|
.w90per {width: 90%;}
|
|
.w85per {width: 85%;}
|
|
.w80per {width: 80%;}
|
|
.w75per {width: 75%;}
|
|
.w70per {width: 70%;}
|
|
.w65per {width: 65%;}
|
|
.w60per {width: 60%;}
|
|
.w50per {width: 50%;}
|
|
.w55per {width: 55%;}
|
|
.w45per {width: 45%;}
|
|
.w40per {width: 40%;}
|
|
.w35per {width: 35%;}
|
|
.w33per {width: 33.3333333%;}
|
|
.w30per {width: 30%;}
|
|
.w25per {width: 25%;}
|
|
.w20per {width: 20%;}
|
|
.w19per {width: 19%;}
|
|
.w18per {width: 18%;}
|
|
.w17per {width: 17%;}
|
|
.w16per {width: 16%;}
|
|
.w15per {width: 15%;}
|
|
.w14per {width: 14%;}
|
|
.w13per {width: 13%;}
|
|
.w12per {width: 12%;}
|
|
.w11per {width: 11%;}
|
|
.w10per {width: 10%;}
|
|
.w9per {width: 9%;}
|
|
.w8per {width: 8%;}
|
|
.w7per {width: 7%;}
|
|
.w6per {width: 6%;}
|
|
.w5per {width: 5%;}
|
|
.w4per {width: 4%;}
|
|
.w3per {width: 3%;}
|
|
.w2per {width: 2%;}
|
|
.w1per {width: 1%;}
|
|
|
|
.w5 {width: 5px;}
|
|
.w10 {width: 10px;}
|
|
.w15 {width: 15px;}
|
|
.w20 {width: 20px;}
|
|
.w25 {width: 25px;}
|
|
.w30 {width: 30px;}
|
|
.w35 {width: 35px;}
|
|
.w40 {width: 40px;}
|
|
.w45 {width: 45px;}
|
|
.w50 {width: 50px;}
|
|
.w55 {width: 55px;}
|
|
.w60 {width: 60px;}
|
|
.w70 {width: 70px;}
|
|
.w80 {width: 80px;}
|
|
.w90 {width: 90px;}
|
|
.w100 {width: 100px;}
|
|
.w110 {width: 110px;}
|
|
.w120 {width: 120px;}
|
|
.w130 {width: 130px;}
|
|
.w140 {width: 140px;}
|
|
.w150 {width: 150px;}
|
|
.w160 {width: 160px;}
|
|
.w170 {width: 170px;}
|
|
.w180 {width: 180px;}
|
|
.w190 {width: 190px;}
|
|
.w200 {width: 200px;}
|
|
.w250 {width: 250px;}
|
|
.w300 {width: 300px;}
|
|
.w325 {width: 325px;}
|
|
.w350 {width: 350px;}
|
|
.w400 {width: 400px;}
|
|
.w500 {width: 500px;}
|
|
|
|
.mw100 {min-width: 100px;}
|
|
|
|
.h100 {height: 100px;}
|
|
.h100per {height: 100%;}
|