@charset "UTF-8"; font { font-size: inherit; } .accessibility { overflow:hidden; position:absolute; z-index:1000; width:100%;} .accessibility a { display:block; overflow:hidden; height:1px; width:1px; margin:0 -1px -1px 0; font-size:0; line-height:0; text-align:center;} .accessibility a:focus, #accessibility a:hover, #accessibility a:active { width:auto; height:20px; margin:0; background:#20262c; font-size:12px; font-weight:700; line-height:20px; color:#fff;} body { background-color: #fff;} .wrap { position: relative;} ._fixed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .mask { display: none; position: fixed; top: 0; left: 0; z-index: 11; width: 100%; height: 100%; background: rgba(0,0,0,0.6);} .inner { width:100%; max-width: 1440px; margin: 0 auto;} /* ==================== btn_gnb_mb ==================== */ .btn_gnb_mb { position: absolute; top: 22px; left: 10px; z-index: 1;} .btn_gnb_mb .ham { position: relative; width: 20px; height: 14px;} .btn_gnb_mb .ham, .ham > em { display: inline-block; box-sizing: border-box;} .btn_gnb_mb .ham > em { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background-color: #444; } .btn_gnb_mb .ham > em:nth-of-type(1) { top: 0;} .btn_gnb_mb .ham > em:nth-of-type(2) { top: 6px;} .btn_gnb_mb .ham > em:nth-of-type(3) { bottom: 0;} .header_mb{ position: absolute; top: 0; left: 0; right: 0; width: 100%;} /* ==================== header_mb > gnb_mb ==================== */ .gnb_mb { display: none; overflow-y: scroll; overflow: auto; position: relative; z-index: 1000; width: 370px; max-width: 85%; min-width: 270px; height: 100vh; background-color: #fff;} /* 로그인전 gnb_mb_signin */ .gnb_mb .gnb_mb_signin { height: 60px; padding-left: 20px; border-bottom: 1px solid rgba(255,255,255,0.3); background-color: #30beb2; font-size: 0; } .gnb_mb_signin li { display: inline-block; position: relative; } .gnb_mb_signin li, .gnb_mb_signin li a { font-size: 16px; line-height: 60px; color: #fff; } .gnb_mb_signin li + li { margin-left: 10px; padding-left: 10px;} .gnb_mb_signin li + li:before { content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 13px; background-color: #fff; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /* 로그인후 gnb_mb_signout */ .gnb_mb .gnb_mb_signout { height: 60px; background-color: #30beb2; font-size: 0; } .gnb_mb_signout > li { display: inline-block; position: relative; width: calc((100% - 3px) / 4); text-align: center; vertical-align: middle; cursor: pointer;} .gnb_mb_signout > li + li { border-left: 1px solid rgba(255,255,255,0.3);} .gnb_mb_signout > li > a { display: block; width: 100%; height: 60px; padding-top: 31px; font-size: 12px; color: #fff;} .gnb_mb_signout > li:before { content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin-top: -8px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%,-50%);} .gnb_mb_signout > li:nth-of-type(1):before { background: url(../images/icon_user.png) no-repeat; background-size: 400% auto; background-position: 0 -29px; } .gnb_mb_signout > li:nth-of-type(2):before { background: url(../images/icon_user.png) no-repeat; background-size: 400% auto; background-position: -23px -29px; } .gnb_mb_signout > li:nth-of-type(3):before { background: url(../images/icon_user.png) no-repeat; background-size: 400% auto; background-position: -47px -29px; } .gnb_mb_signout > li:nth-of-type(4):before { background: url(../images/icon_user.png) no-repeat; background-size: 400% auto; background-position: -69px -29px; } .gnb_mb_signout > li.is_active:after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background-color: #f22c24; margin: -20px 0 0 13px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } /* 2,3,4depth */ .gnb_mb .gnb_mb_depth { position: relative; height: 60px; background-color: #30beb2; font-size: 0;} .gnb_mb .gnb_mb_depth button { position: relative; width: 60px; height: 60px; font-size: 0; vertical-align: top;} .gnb_mb .gnb_mb_depth button:after { content: ''; position: absolute; right: 25px; top: 50%; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: translateY(-50%) rotate(-135deg); transform: translateY(-50%) rotate(-135deg);} .gnb_mb .gnb_mb_depth span { position: absolute; top: 50%; left: 50%; font-size: 16px; line-height: 1.3; color: #fff; text-align: center; -webkit-transform: translate(-50%, -50); transform: translate(-50%, -50%);} /* ==================== header_mb > gnb_mb > gnb_mb_list ==================== */ .gnb_mb_list > li { position: relative; border-bottom: 1px solid #e5e5e5; font-size: 0;} .gnb_mb_list > li > a:not(.btn_gnb_depth) { display: inline-block; width: calc(100% - 60px);} .gnb_mb_list > li > a > span { display: block; overflow: hidden; position: relative; padding: 0 0 0 20px; font-size: 14px; line-height: 60px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .gnb_mb_list > li.gnb_mb_link1 > a { width: 100%;} .gnb_mb_list > li.gnb_mb_link1 > a span { color: #30beb2} .gnb_mb_list > li.gnb_mb_link2 > a { position: relative; width: 100%;} .gnb_mb_list > li.gnb_mb_link2 > a:after { content: ''; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; background: url(../images/m_icon_link1.png) no-repeat; background-size: 100% auto; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .gnb_mb_list > li.gnb_mb_link2 > a span { font-weight: 700; color: #30beb2; } .gnb_mb_list > li > .btn_gnb_depth { position: absolute; top: 0; right: 0; width: 60px; height: 60px;} .gnb_mb_list > li > .btn_gnb_depth:after { content: ''; position: absolute; right: 23px; top: 50%; width: 6px; height: 6px; margin-top: 1px; border-top: 1.5px solid #444; border-right: 1.5px solid #444; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .gnb_mb_list > li.is_active > a > span, .gnb_mb_list > li > a:hover > span, .gnb_mb_list > li > a:focus > span { color: #30beb2;} .gnb_mb_list > li.is_active > .btn_gnb_depth:after, .gnb_mb_list > li > .btn_gnb_depth:hover:after, .gnb_mb_list > li > .btn_gnb_depth:focus:after { border-top: 1.5px solid #30beb2; border-right: 1.5px solid #30beb2;} /* ==================== header_mb > gnb_mb > gnb_mb_close ==================== */ .gnb_mb_close { position: absolute; top: 0; right: 0; width: 60px; height: 60px; } .gnb_mb_close em { display: block;} .gnb_mb_close em { position: relative; width: 60px; height: 60px;} .gnb_mb_close em:before, .gnb_mb_close em:after { content:''; position:absolute; left:50%; top:50%; width: 20px; height: 2px; margin-left: 2px; background:#fff;} .gnb_mb_close em:before { transform:translate(-50%,-50%) rotate(-45deg);} .gnb_mb_close em:after { transform:translate(-50%,-50%) rotate(45deg);} /* 최상단 배너 */ .wrap_banner { position: relative; width: 100%; background-color: #fff; } .wrap_banner > img { width: 100%; } .wrap_banner .wrap_banner_inner { position: absolute; bottom: 10px; left: 0; right: 0; width: 1440px; margin: 0 auto; text-align: right;} .wrap_banner .btn_banner { position: relative; padding-right: 15px; font-size: 12px; color: #fff;} .wrap_banner .btn_banner:before, .wrap_banner .btn_banner:after { content:''; position: absolute; right: 0; top: 50%; width:10px; height:1px; border-radius:4px; background:#fff} .wrap_banner .btn_banner:before { transform: translateY(-50%) rotate(-45deg);} .wrap_banner .btn_banner:after { transform: translateY(-50%) rotate(45deg);} /* ==================== sidebar ==================== */ .sidebar { height: 200px; background-color: #ccc !important;} .sidebar .sidebar_inner { position: relative; width:1440px; height: 100%; margin: 0 auto;} .sidebar .sidebar_inner .sidebar_tit { position: absolute; top: 50%; left: 50%; width: 100%; font-size: 50px; font-weight: 700; color: #fff; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .sidebar .sidebar_inner .sidebar_icon1 { margin: 20px 0 0 20px;} /* ==================== popup ==================== */ .popup { display: none; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 1002; width: 100%; height: 100%;} .popup.is_active { display: block; } .pop_bg { width: 100%; height: 100%; background-color: rgba(0,0,0,0.6);} .pop_wrap { overflow-y: scroll; overflow: auto; position: absolute; top: 50%; left: 50%; width: 500px; background-color: #fff; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .pop_head { min-height: 40px; padding: 14px 20px; background-color: #30beb2; text-align: left;} .pop_head strong { display: block; color: #fff; } .pop_body { overflow: auto; position: relative; max-height: 750px; padding: 20px; border: 1px solid #e5e5e5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .pop_close { position: absolute; right: 0; top: 0; height: 50px; width: 50px; background: none; cursor: pointer;} .pop_close .line { display: block; width: 18px; height: 2px; margin-top: -2px; background-color: #fff;} .pop_close .line:nth-of-type(1) { position: absolute; top: 50%; left: 15px; -webkit-transform: translateY(50%) rotate(45deg); transform: translateY(50%) rotate(45deg);} .pop_close .line:nth-of-type(2) { position: absolute; top: 50%; left: 15px; -webkit-transform: translateY(50%) rotate(135deg); transform: translateY(50%) rotate(135deg);} .pop_close.is_black .line { background-color: #444;} .pop_body_min1 { height: 400px;} .pop_body_min2 { height: 450px;} .pop_body_min3 { height: 500px;} .pop_body_min4 { height: 550px;} .pop_body_min5 { height: 600px;} .pop_body_min6 { height: 650px;} .pop_button { margin-top: 30px; font-size: 0; text-align: center;} .pop_button a, .pop_button button { display: inline-block; min-width: 100px; height: 40px; padding: 9px 10px; border-radius: 2px; font-size: 12px; text-align: center; vertical-align: middle;} .pop_button.is_small a, .pop_button.is_small button { height: auto; padding: 8px 10px;} .pop_button a + a, .pop_button button + button, .pop_button a + button, .pop_button button + a { margin-left: 10px; } .pop_tit { display: block; margin-bottom: 10px; font-weight: 500; } .popcolor0 { font-size: 14px; color: #f22c24 !important; } .popcolor1 { font-size: 14px; color: #30beb2 !important; } .popcolor2 { font-size: 14px; color: #666 !important; } .area_innerbg { padding: 10px 20px; background-color: #fafafa; font-size: 12px; color: #666;} .area_dun { margin-top: 30px;} .area_dun dl { font-size: 0;} .area_dun dl + dl { margin-top: 10px;} .area_dun dt { display: inline-block; width: 200px; line-height: 40px; vertical-align: top;} .area_dun dd { display: inline-block; width: calc(100% - 200px);} .area_myclviewcir { display: block; position: relative; padding: 45px 0 35px; margin-bottom: 20px; background-color: #ecf9f7; text-align: center;} .area_myclviewcir > img { position: absolute; top: 15px; left: 15px;} .area_myclviewcir > .area_myclviewcir_tit{ font-size: 25px; font-weight: 700; } .popcol1 + .popcol1 { margin-top: 20px;} .popcol2 + .popcol2 { margin-top: 10px;} .popcol3 + .popcol3 { margin-top: 30px;} .popline { position: absolute; left: 0; padding: 20px 0; } .popline::before { content:''; width: 100%; height: 1px; background-color: red;} /* bullet */ .popbullet01 > li { font-size: 14px;} .popbullet01 > li * { font-size: 14px;} .popbullet01 > li + li { margin-top: 10px;} .popbullet02 > li { font-size: 0;} .popbullet02 > li + li { margin-top: 5px;} .popbullet02 > li > .sign { display: inline-block; width: 20px; vertical-align: top; } .popbullet02 > li > .txt { display: inline-block; width: calc(100% - 20px); font-size: 14px; vertical-align: top; } .popbullet03 { margin: 5px 0;} .popbullet03 > li { position: relative; padding-left: 17px; font-size: 14px;} .popbullet03 > li::before { content: ''; position: absolute; top: 12px;; left: 0; width: 20px; height: 20px; background: url(../images/icon_check3.png) no-repeat; } .popbullet04 > li { font-size: 0;} .popbullet04 > li + li { margin-top: 5px;} .popbullet04 > li > .sign { display: inline-block; position: relative; top: 6px; width: 15px; background-color: #30beb2; border-radius: 50%; vertical-align: top; font-size: 10px; font-weight: 500; color: #fff; text-align: center;} .popbullet04 > li > .txt { display: inline-block; width: calc(100% - 15px); padding-left: 10px; font-size: 14px; vertical-align: top; } .poplist01 { display: block; width: 100%; margin-top: 20px; font-size: 0;} .poplist01 > li { display: inline-block; width: calc((100% - 20px) / 2); margin-bottom: 10px;} .poplist01 > li:nth-child(2n) { margin-left: 20px;} .poplist01 .poplist01_tit { padding: 5px 10px; background-color: #ecf9f7; color: #30beb2; } .poplist01 .poplist01_desc { padding: 5px 10px; font-size: 12px; color: #666; } .popbox01 { padding: 10px; background-color: #fafafa;} .tabs_pop.ui-tabs .tab_head { margin-bottom: 10px;} .tabs_pop.ui-tabs .tab_head li a { padding: 0 0 10px 0; font-size: 14px;} .tabs_pop.ui-tabs .tab_head li + li { margin-right: 10px;} .popcategory_wrap { display: block; margin-top: 10px; font-size: 0;} .popcategory_wrap > div + div { margin-left: 10px;} .popcategory_list { display: block; height: 230px; border: 1px solid #e5e5e5; background-color: #fff; vertical-align: top;} .popcategory_list>p {padding:5px 10px;background:#ededed;font-weight:500;} .popcategory_list ul { overflow-y: scroll; overflow: auto; height: 87%; padding: 5px 0;} .popcategory_list ul li { display: block; overflow: hidden; padding: 0 10px; font-size: 12px; line-height: 22px; cursor: pointer; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .popcategory_list .select_box { display: none;} .popcategory_wrap.is_list2 > div { width: calc((100% - 10px) / 2);} .popcategory_wrap.is_list2 .popcategory_list { display: inline-block; height: 260px;} .popcategory_wrap.is_list3 > div { width: calc((100% - 20px) / 2);} .popcategory_wrap.is_list3 .popcategory_list { display: inline-block; height: 260px;} .popcategory_wrap.is_list4 > div { width: calc((100% - 30px) / 4);} .popcategory_wrap.is_list4 .popcategory_list { display: inline-block; height: 260px;} .popcategory_list .select_box option:checked, .popcategory_list li:hover, .popcategory_list li.is_active { background-color: #ecf9f7;} .popbrick01 { font-size: 0;} .popbrick01 .cn0 { width: 100px; font-weight: 500; text-align: left; } .popbrick01 > :nth-child(2n) { display: inline-block; width: calc(100% - 200px); margin: 0 10px;} .popbrick01 .search_button { display: inline-block; vertical-align: top;} .popcategory_form01 .popbrick01 { margin: 10px 0 0 0; } .popcategory_total { display: block; margin-top: 8px; font-weight: 500;} .popcategory_total strong { font-weight: 500; color: #f22c24; } .popbrick02 { font-size: 0;} .popbrick02 .cn0 { position: relative; width: 120px; text-align: left; font-weight: 500; vertical-align: top;} .popbrick02 .cn0.mark::after { content: '*'; position: relative; top: -1px; right: -4px; font-size: 12px; color: #f22c24;} .popbrick02 > :last-child { display: inline-block; width: calc(100% - 120px);} .popbrick03 { font-size: 0;} .popbrick03 > .cn0 { position: relative; width: 160px; font-weight: 500; text-align: left; vertical-align: top; } .popbrick03 > .cn0.mark::after { content: '*'; position: relative; top: -1px; right: -4px; font-size: 12px; color: #f22c24;} .popbrick03 > .popbrick03_right { display: inline-block; width: calc(100% - 160px); font-size: 0; text-align: left;} .popbrick03 > .popbrick03_right > .select_box { width: 200px; margin-right: 10px;} .popbrick03 > .popbrick03_right > .search_button { display: inline-block;} .popbrick04 { font-size: 0;} .popbrick04 > * { display: inline-block;} .popbrick04 .select_box { width: 200px; margin: 0 20px;} .change_up { width: 20px; height: 20px; background: url(../images/btn_updown1.png) no-repeat; background-position: -5px -5px;} .change_down { width: 20px; height: 20px; background: url(../images/btn_updown1.png) no-repeat; background-position: -5px -30px;} .popup .board_wrap { margin-top: 20px;;} .order_mysale5_img { display: block; width: 180px; margin: 50px auto 0; text-align: center;} .myacc_img_cont { display: block; margin: 20px auto 0; text-align: center;} .myacc_img_cont img { max-width: 100%;} /* ==================== dform1 ==================== */ .dform1 { display: block; width: 100%; border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; font-size: 0; text-align: left;} .dform1 + .dform1 { margin-top: 20px;} .dform1 .dform1_tr { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; flex-direction: row; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; font-size: 0; } .dform1 .dform1_tr.visible { overflow:visible;} .dform1 .dform1_tr.visible .fit_box2 { position:relative;} .dform1 .dform1_tr.visible .autoCom { width:calc(100% - 90px);} .dform1 .left { display: inline-block; width: 150px; padding: 4px 20px 5px; border-right: 1px solid #e5e5e5; background-color: #f2f2f2; vertical-align: top;} .dform1 .left .left_box { position: relative; width: 100%; min-height: 40px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .dform1 .left .left_box > span { display: inline-block; font-size: 14px; font-weight: 500; color: #333; word-break: break-word; } .dform1 .left .left_box > span.mark::after { content: '*'; position: relative; top: 0; right: -4px; font-size: 12px; color: #f22c24;} .dform1 .right { display: inline-block; width: calc(100% - 150px); min-height: 40px; padding: 4px 20px 5px; vertical-align: top;} .dform1 .right .right_box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 40px; } .dform1 .right_pd1 { padding: 10px 20px; } .dform1 .right_pd2 { padding: 15px 20px; } .dform1.dform1_unit2 .left { width: 200px;} .dform1.dform1_unit2 .right { width: calc(100% - 200px);} .dform1 .dform1_col2 { display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row;} .dform1 .dform1_col2 .dform1_tr { width: 50%;} .dform1.is_wide .left { width: 200px;} .dform1.is_wide .right { width: calc(100% - 270px)} .dform1_col { padding: 15px 20px; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .dform1 .search_button { text-align: left;} .area_phone { font-size: 0;} .area_phone > em { display: inline-block; width: 30px; line-height: 40px; vertical-align: top;} .area_phone > div:nth-of-type(1) { display: inline-block; width: calc(100% - 30px);} .area_phone2 { font-size: 0;} .area_phone2 > em { display: inline-block; width: 70px; line-height: 40px; vertical-align: top;} .area_phone2 > div:nth-of-type(1) { display: inline-block; width: calc(100% - 70px);} .area_homepage { font-size: 0;} .area_homepage > em { display: inline-block; width: 50px; line-height: 40px; vertical-align: top;} .area_homepage > div:nth-of-type(1) { display: inline-block; width: calc(100% - 50px);} .area_byte { font-size: 0;} .area_byte > div:nth-of-type(1) { display: inline-block; width: calc(100% - 180px);} .area_byte > em { display: inline-block; width: 110px; padding-left: 10px; line-height: 40px; vertical-align: top;} .area_byte2 > .area_byte2_txt { display: block; margin-top: 5px; font-size: 12px; color: #666; text-align: right;} .area_time { position: relative;} .area_time > .input { padding: 0 60px 0 10px;} .area_time > .area_time_txt { position: absolute; top: 0; right: 15px; line-height: 40px;} .area_back1 { display: block; font-size: 0;} .area_back1 > :first-child { display: inline-block; width: calc(100% - 100px);} .area_back1 > em { display: inline-block; width: 100px; padding-left: 10px; text-align: left; vertical-align: top;} .area_back2 { display: block; font-size: 0;} .area_back2 > :first-child { display: inline-block; width: calc(100% - 100px);} .area_back2 > em { display: inline-block; width: 100px; padding-left: 10px; text-align: left; vertical-align: top;} .area_domain { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex-direction: row;} .area_domain em { display: inline-block; width: auto;} .area_domain input { width: 300px; margin: 0 10px;} .area_domain .search_button { margin-left: 10px;} .area_imgupload { margin-bottom: 15px; font-size: 0;} .area_imgupload .area_imgupload_left { display: inline-block; width: 150px;} .area_imgupload .area_imgupload_left dd { display: block; overflow: hidden; margin-top: 5px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .area_imgupload_thumb { overflow: hidden; position: relative; width: 100%; max-width: 100%; height: 150px; border: 1px solid #e5e5e5; background-color: #fff; } .area_imgupload_thumb img { width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .area_imgupload .area_imgupload_right { display: inline-block; width: calc(100% - 150px); padding-left: 20px; vertical-align: top;} .item_tflist1 > li { font-size: 0;} .item_tflist1 > li + li { margin-top: 5px;} .item_tflist1 > li .tflist1_right { display: inline-block; width: 210px; vertical-align: top;} .item_tflist1 > li .tflist1_left { display: inline-block; width: calc(100% - 210px); vertical-align: top;} .item_tflist1 > li .tflist1_left > span { display: block; overflow: hidden; height: 40px; padding: 0 10px; border: 1px solid #e5e5e5; background-color: #fff; font-size: 14px; line-height: 38px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .item_tflist1 > li .tflist1_left > div input{ overflow: hidden; height: 40px; padding: 0 10px; border: 1px solid #e5e5e5; background-color: #fff; font-size: 14px; line-height: 38px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} */ .item_tflist1 > li .tflist1_left > div select{ overflow: hidden; height: 40px; padding: 0 10px; border: 1px solid #e5e5e5; background-color: #fff; font-size: 14px; line-height: 38px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} */ .item_tflist2 > li { font-size: 0;} .item_tflist2 > li + li { margin-top: 5px;} .item_tflist2 > li .tflist1_right { display: inline-block; width: 210px; vertical-align: top;} .item_tflist2 > li .tflist1_left { display: inline-block; width: calc(100% - 210px); vertical-align: top;} .item_tflist2 > li .tflist1_left > strong { display: block; overflow: hidden; height: 40px; background-color: #fff; font-size: 14px; line-height: 38px; color: #666; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .area_addcir_box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; margin-top: 10px; border: 1px solid #e5e5e5; } .area_addcir_box * { display: inline-block;} .area_addcir_box .checks { width: 35px;} .area_addcir_box .dleft { width: 100px; height: 100px; margin-right: 20px; border: 1px solid #e5e5e5;} .area_addcir_box .dleft img { max-width: 100%; height: auto;} .area_addcir_box .dright { width: calc(100% - 165px);} .area_addcir_box .dright .area_addcir_tit { font-weight: 700;} .area_addcir_box .dright dl { display: block;} .area_addcir_box .dright dl dt { display: inline-block; position: relative; width: 65px; margin-right: 10px; font-size: 12px; line-height: 20px; vertical-align: top;} .area_addcir_box .dright dl dt::before { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 10px; background-color: #ccc; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .area_addcir_box .dright dl dd { display: inline-block; width: calc(100% - 80px); font-size: 12px; line-height: 20px; color: #666; vertical-align: top;} .area_pd_box { display: block;} .area_pd_box * { display: inline-block;} .area_pd_box .dleft { width: 100px; height: 100px; margin-right: 20px; border: 1px solid #e5e5e5; vertical-align: top;} .area_pd_box .dleft img { max-width: 100%; height: auto;} .area_pd_box .dright { width: calc(100% - 125px);} .area_pd_box .dright .area_pd_tit { margin-bottom: 5px; font-weight: 700;} .area_pd_box .dright dl { display: block;} .area_pd_box .dright dl dt { display: inline-block; position: relative; width: 65px; margin-right: 10px; font-size: 12px; line-height: 20px; vertical-align: top;} .area_pd_box .dright dl dt::before { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 10px; background-color: #ccc; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .area_pd_box .dright dl dd { display: inline-block; width: calc(100% - 80px); font-size: 12px; line-height: 20px; color: #666; vertical-align: top;} .area_fileselect .area_fileselect_txt { display: inline-block; width: calc(100% - 70px); font-size: 12px; line-height: 1.5; vertical-align: top;} .area_fileselect > div + div { margin-top: 10px;} .area_listgroup_inline { margin: 5px 0;} .area_listgroup_inline li { display: inline-block; position: relative; padding-right: 20px; margin-right: 10px; vertical-align: top;} .area_listgroup_inline span { display: block; max-width: 200px; width: auto; font-size: 12px; color: #666; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .area_listgroup_inline a { display: inline-block; position: absolute; top: 5px; right: 0; width: 13px; height: 13px; background: url(../images/btn_close1.png) no-repeat;} .area_warning { width: 100%; font-size: 0;} .area_warning_box { display: block; margin-top: 5px; font-size: 0;} .area_warning_box > img { display: inline-block; margin-right: 5px; vertical-align: top;} .area_warning_box > p { display: inline-block; width: calc(100% - 23px); line-height: 15px; text-align: left; vertical-align: top;} .icon_face { vertical-align: top;} .icon_face a { display: block; width: 100%; height: 100%;} .right_type1 { display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row;} .right_type1 > :nth-of-type(1) { display: inline-block; margin-right: 10px;} .right_type1 > .search_button { display: inline-block;} .area_delinfo { display: block; width: 100%; font-size: 0;} .area_delinfo > span { display: inline-block; width: calc(100% - 110px); color: #666;} .area_delinfo > .area_delinfo_txt { display: inline-block; position: relative; top: 4px; width: 110px; padding-right: 10px; font-size: 14px; font-weight: 500; line-height: 1.2; color: #30beb2; text-align: right; vertical-align: top;} .area_delinfo > .area_delinfo_txt::before { content: ''; position: absolute; right: 0; top: 50%; width: 4px; height: 4px; border-top: 2px solid #30beb2; border-right: 2px solid #30beb2; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);} .area_delinfo > .area_delinfo_txt br { display: none;} .area_ditem { display: block; font-size: 0;} .area_ditem > :first-child { display: inline-block; width: calc(100% - 350px); margin: 0 20px 0 0;} .area_ditem > :last-child { display: inline-block; width: 330px; vertical-align: top;} .area_ditem > :last-child a { width: calc((100% - 20px) / 2); margin: 0 5px 10px 5px;} /* ==================== table ==================== */ table { width: 100%; border-collapse: collapse; table-layout: fixed; background-color: #fff;} table * { font-size: 14px; line-height: 1.3; vertical-align: middle;} tfoot { border-top: 1px solid #e5e5e5;} .nodata td { position: relative; border: none !important; font-size: 12px; color: #a4a4a4;} .nodata:hover { background-color: transparent !important;} .form1 { width: 100%; border-collapse: collapse; border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; text-align: left;} .form1 th { padding: 15px 20px; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; background-color: #f2f2f2; font-weight: 500; color: #444; word-break: break-word;} .form1 td { padding: 4px 20px 5px; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; color: #666;} .td_pd1 { padding: 10px 20px !important;} .form2 { width: 100%; border-collapse: collapse;} .form2 table { border: 1px solid #e5e5e5; text-align: center;} .form2 th { padding: 15px 10px; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; background-color: #f2f2f2; word-break: break-word;} .form2 td { padding: 15px 10px; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; word-break: break-word;} .form2 thead tr:first-child th:last-child { border-right: none;} .form2 tbody tr:last-child td { border-bottom: 0;} .form2 tbody tr td:last-child { border-right: none;} /* ==================== table 게시판 board ==================== */ .board_header { padding: 14px; margin-bottom: 20px; background-color: #fafafa; border: 1px solid #e5e5e5; font-size: 0; text-align: center;} .board_header .select_box { display: inline-block; width: 180px;} .board_header > div + div { margin-left: 20px;} .board_header .search_button { display: inline-block;} .board_header .search_box2 { display: inline-block; width: 500px;} .board_header.board_header_type1 .search_box2 { display: inline-block; width: 500px;} .board_header.board_header_type0 > * { width: 500px; margin: 0; padding: 0;} .board_header.board_header_type2 .fit_middle { display: inline-block; width: 390px;} .board_header.board_header_type2 .search_button { display: inline-block;} .board_header.board_header_type3 .fit_middle { display: inline-block; width: 400px;} .board_header.board_header_type3 .search_box2 { display: inline-block; width: calc(100% - 820px);} .board_header.board_header_type4 ul { margin: 0 auto; font-size: 0;} .board_header.board_header_type4 ul > li { display: inline-block; font-size: 0;} .board_header.board_header_type4 ul > li > * { display: inline-block ;} .board_header.board_header_type4 ul > li > em { margin: 0 15px; text-align: left;} .board_header.board_header_type5 { font-size: 0;} .board_header.board_header_type5 .select_box { margin: 0 0 0 20px} .board_header.board_header_type5 .area_warning_box { text-align: center;} .board_header.board_header_type5 .area_warning_box > p { width: auto;} .board_header.board_header_type7 { margin-top: 20px; text-align: left;} .board_header.board_header_type7 > :first-child { width: 650px; max-width: 100%;; margin: 0 auto;} .board_header.board_header_type7 .area_warning_box { margin-top: 10px;} .board_top { position: relative; margin-bottom: 15px; font-size: 0; } .board_top::after { display: block; clear: both; content: ''; } .board_top > .f_l { display: inline-block; font-size: 0;} .board_top > .f_r { display: inline-block; font-size: 0;} .board_top .select_box { width: 100px; height: 30px; margin-right: 10px; vertical-align: top;} .board_top .select_box select { line-height: 26px;} .board_top .total { display: inline-block; font-size: 14px; line-height: 30px; } .board_top .total strong { font-size: 14px; line-height: 30px; color: #f22c24;} .board_top .total span { margin-left: 10px; font-size: 14px; line-height: 30px;} .board_area1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 20px;} .board_area1 > .btn_pro > li { display: inline-block;} .board_area1 > .btn_pro > li > span { display: inline-block; margin-right: 15px; line-height: 40px; font-size: 12px;} .board_area1 > .btn_pro > li > i { margin-right: 10px;} .btn_pro_n { display: inline-block; width: 14px; height: 14px; background: url(../images/icon_pay.png) no-repeat; vertical-align: middle;} .btn_pro_p { display: inline-block; width: 14px; height: 14px; background: url(../images/icon_pay2.png) no-repeat; vertical-align: middle;} .board_table { width: 100%; border-collapse: collapse;} .board_table table { border: 1px solid #e5e5e5; text-align: center;} .board_table th { height: 50px; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; background-color: #fafafa; font-weight: 500; word-break: break-word;} .board_table td { height: 50px; padding: 0 15px; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; word-break: break-word;} .board_table thead tr:first-child th:last-child { border-right: none;} .board_table tbody tr:last-child td { border-bottom: 0;} .board_table tbody tr td:last-child { border-right: none;} .board_table .subject { padding: 0 15px; text-align: left; } .board_table .subject > a { display: block; font-size: 0;} .board_table .subject > a:hover > span { text-decoration: underline;} .board_table .subject > a > span { display: inline-block; overflow: hidden; width: 100%; line-height: 22px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .board_table .subject > a > em { display: inline-block; height: 22px; padding: 0 7px; margin-right: 10px; background-color: #30beb2; font-size: 12px; font-weight: 300; line-height: 22px; color: #fff; letter-spacing: 0; vertical-align: top;} .board_table .subject_notice > a > span { width: calc(100% - 60px); } .board_table .subject_news > a > span { width: calc(100% - 60px); } .board_table .subject_webzine > a > span { width: calc(100% - 75px); } .board_table .subject_newsletter > a > span { width: calc(100% - 85px); } .board_top_radio { display: block; margin: -10px 0 5px; text-align: left;} .torder_date { text-align: center;} .torder_date button { width: 100%; max-width: 150px; height: 40px; margin-top: 10px;} .torder_overview { padding: 10px 15px; text-align: left;} .torder_overview .torder_item > li + li { margin-top: 10px; } .torder_overview .torder_tit { display: block; margin-bottom: 10px; font-weight: 500;} .torder_overview .torder_subtit { font-weight: 500; color: #666; } .torder_overview .torder_desc { color: #666;} .torder_ship * { display: block; margin: 0 auto; text-align: center; } .torder_ship button { width: 100%; max-width: 150px; height: 40px; } .torder_ship button + button { margin-top: 5px;} /* ==================== table 게시판 list board ==================== */ .board_list > ul > li { padding-bottom: 50px; border-bottom: 1px solid #e5e5e5; font-size: 0; } .board_list > ul > li + li { margin-top: 50px;} .board_list .item { display: block; position: relative; width: 100%; font-size: 0;} .board_list .item dt { display: inline-block;} .board_list .item dt .item_img { display: block; overflow: hidden; position: relative; width: 220px; height: 220px; border: 1px solid #e5e5e5; background-color: #fff;} .board_list .item dt .item_img img { max-width: 100%; height: auto; transition: 0.5s all;} .board_list .item dt .item_img:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); } .board_list .item dd { display: inline-block; position: relative; width: calc(100% - 220px); padding-left: 24px; vertical-align: top;} .board_list .item dd > .item_btn .search_button { margin-top: 20px; text-align: left;} .board_list .item_state { display: block; width: 100%; font-size: 0;} .board_list .item_state .label { display: inline-block; height: 22px; padding: 0 5px; font-size: 12px; line-height: 22px; color: #fff; vertical-align: top;} .board_list .item_state .label.label_seller { background-color: #7d91f9;} .board_list .item_state .label.label_buyer { background-color: #fa76ab;} .board_list .item_state .date { line-height: 22px; color: #666;} .board_list .item_state .date em { position: relative; padding: 0 10px 0 15px; margin-right: 10px; line-height: 22px; color: #666;} .board_list .item_state .date em::before { content: ''; position: absolute; top: 5px; right: 0; width: 1px; height: 10px; background-color: #ccc;} .board_list .item_title { display: block; margin: 20px 0; } .board_list .item_title a { display: block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 18px; line-height: 1.4; font-weight: 500;} .board_list .item_info > div { position: relative;} .board_list .item_info > div strong { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 500; color: #30beb2;} .board_list .item_info > div .item_info_btn { position: absolute; top: 5px; right: 0; padding-right: 15px; font-weight: 500; color: #30beb2;} .board_list .item_info > div .item_info_btn::before { content: ''; position: absolute; right: 1px; top: 50%; width: 5px; height: 5px; border-top: 2px solid #30beb2; border-right: 2px solid #30beb2; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .board_list .item_info > ul li { font-size: 0;} .board_list .item_info > ul li + li { margin-top: 5px;} .board_list .item_info > ul li strong { display: inline-block; position: relative; width: 80px; font-weight: 500;} .board_list .item_info > ul li strong::before { content: ''; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 10px; background-color: #ccc; } .board_list .item_info > ul li div { display: inline-block; width: calc(100% - 80px); padding-left: 20px; vertical-align: top;} .board_list .item_info > ul li div p { display: block; color: #666; } /* ==================== table 게시판 view board ==================== */ .board_view_header { position: relative; padding: 15px 210px 15px 20px; margin-bottom: 20px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;} .board_view_header > strong { display: block; overflow: hidden; font-size: 18px; font-weight: 500; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .board_view_header > div { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .board_view_header > div span { color: #666;} .board_view_header > div strong { position: relative; margin-right: 10px; padding-right: 10px; color: #666;} .board_view_header > div strong::before { content: ''; position: absolute; top: 6px; right: 0; width: 1px; height: 10px; background-color: #ccc;} .board_view_header2 { position: relative; padding: 15px 120px 15px 20px; margin-bottom: 20px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;} .board_view_header2 > strong { display: block; overflow: hidden; font-size: 18px; font-weight: 500; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .board_view_header2 > div { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .board_view_header2 > div span { color: #666;} .board_view_header2 > div strong { position: relative; margin-right: 10px; padding-right: 10px; color: #666;} .board_view_header2 > div strong::before { content: ''; position: absolute; top: 6px; right: 0; width: 1px; height: 10px; background-color: #ccc;} .board_view_header3 { position: relative; padding: 15px 20px; margin-bottom: 20px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;} .board_view_header3 > strong { display: block; font-size: 18px; font-weight: 500; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .board_view_header3 > .right { display: block; margin-top:10px; } .board_view_header3 > .right > div { display: inline-block; position: relative; } .board_view_header3 > .right > div + div::before{ content: ''; position: absolute; top: 7px; left: 0; width: 1px; height: 10px; background-color: #ccc;} .board_view_header3 > .right > div + div { margin-left: 15px; padding-left: 15px;} .board_view_cont { padding: 20px; min-height: 300px; border: 1px solid #e5e5e5; background-color: #fafafa;} .board_view_cont1 { padding: 20px; min-height: 300px; border: 1px solid #e5e5e5; background-color: #fafafa;} .board_view_cont1 p { overflow-wrap: anywhere;} .board_view_bottom { margin-top: 30px; border-top: 1px solid #e5e5e5; } .board_view_bottom li { display: block; padding: 10px 20px; border-bottom: 1px solid #e5e5e5; font-size: 0;} .board_view_bottom li > span { display: inline-block; position: relative; width: 60px; height: 22px; font-weight: 500; line-height: 22px;} .board_view_bottom li.next_num > span::before { content: ''; position: absolute; right: 0; top: 50%; width: 4px; height: 4px; margin-top: 2px; border-top: 1.5px solid #444; border-right: 1.5px solid #444; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);} .board_view_bottom li.prev_num > span::before { content: ''; position: absolute; right: 0; top: 50%; width: 4px; height: 4px; margin-top: -1px; border-top: 1.5px solid #444; border-right: 1.5px solid #444; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg);} .board_view_bottom li > a { display: inline-block; width: calc(100% - 110px); margin-left: 50px; vertical-align: top; } .board_view_bottom li > a > em { display: inline-block; height: 22px; padding: 0 7px; margin-right: 10px; background-color: #30beb2; font-size: 12px; font-weight: 300; line-height: 22px; color: #fff; letter-spacing: 0; vertical-align: top; } .board_view_bottom li > a > strong { display: inline-block; overflow: hidden; width: 100%; color: #666; line-height: 22px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .board_view_bottom li > a > em + strong { width: calc(100% - 60px);} /* Success Stories */ .board_view_ss.board_view_header { padding: 15px 20px;} .noresult { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 250px; border: 1px solid #e5e5e5; } .noresult strong { font-size: 14px; color: #aaa;} /* accordion */ .accordion { border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;} .accordion .accordion_txt {float:left;display:block; width:200px;text-align:center;padding:20px 0;border-right:1px solid #e5e5e5;} .accordion .q_box {float:left;display:flex;width:calc(100% - 200px);padding:17px 0;} .accordion .accordion_q { display: inline-block; width: 22px; height: 22px; background-color: #30beb2;margin:0 10px; border-radius: 50%; font-size: 12px; font-style: normal; color: #fff; text-align: center; line-height: 22px;} .accordion .accordion_a { display: inline-block; width: 22px; height: 22px; background-color: #444; border-radius: 50%; font-size: 12px; font-style: normal; color: #fff; text-align: center; line-height: 22px;} .accordion .accordion_box { display: none; padding: 20px; border-bottom: 1px solid #e5e5e5;} .accordion .accordion_box > em { display: inline-block; width: calc(100% - 30px); padding-left: 10px; color: #666; vertical-align: top;} .accordion .accordion_btn { display: block; position: relative; width: 100%;border-bottom: 1px solid #e5e5e5;} .accordion .accordion_btn:after {display:block;content:"";clear:both;} .accordion .accordion_btn em { display: inline-block; width: calc(100% - 70px); padding:0; font-weight: 500; vertical-align: top;} .accordion .accordion_btn::before { content: ''; position: absolute; right: 20px; top: 50%; width: 4px; height: 4px; border-top: 1.5px solid #444; border-right: 1.5px solid #444; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); } .accordion > li.is_active .accordion_btn::before{ border-top: 1.5px solid #30beb2; border-right: 1.5px solid #30beb2; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);} .accordion .accordion_box * {word-break:break-all;} /* cookie */ .ff_wrap { width:100%; max-width:1440px; padding: 20px 0; margin: 0 auto;} .foot_fixed { position:fixed; left:0; bottom:0px; z-index: 999; width:100%; height:auto; background-color: #fafafa; border: 1px solid #30beb2; } .foot_fixed p { display: inline-block; width: calc(100% - 160px); padding-right: 30px; font-size:14px; line-height:1.5; } .foot_fixed p u { color: #30beb2; } .foot_link { display: inline-block; width:150px; height:40px; background-color:#30beb2; font-size:14px; line-height:40px; color: #fff; vertical-align: top;} /* nodata_massage */ /* 2022-06-30 */ .nodata_massage { margin-top: 50px; padding-left: 360px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='146' viewBox='0 0 130 146' fill='none'%3E%3Cpath d='M69.949 113.653H109.569C111.723 113.653 113.788 112.797 115.311 111.273C116.834 109.749 117.689 107.681 117.689 105.526V24.2543C117.689 22.0989 116.834 20.0317 115.311 18.5076C113.788 16.9834 111.723 16.1272 109.569 16.1272H28.3557C26.202 16.1272 24.1366 16.9834 22.6137 18.5076C21.0908 20.0317 20.2352 22.0989 20.2352 24.2543V58.8516C17.3698 59.8657 14.6419 61.2335 12.1147 62.9233V24.2543C12.1147 19.9434 13.8258 15.8091 16.8716 12.7608C19.9174 9.7125 24.0484 8 28.3557 8H109.561C113.868 8 117.999 9.7125 121.045 12.7608C124.091 15.8091 125.802 19.9434 125.802 24.2543V105.526C125.802 109.837 124.091 113.971 121.045 117.019C117.999 120.068 113.868 121.78 109.561 121.78H78.0614L69.9408 113.653H69.949ZM42.5747 48.6358C44.19 48.6358 45.7391 47.9936 46.8813 46.8505C48.0235 45.7074 48.6651 44.157 48.6651 42.5404C48.6651 40.9238 48.0235 39.3735 46.8813 38.2303C45.7391 37.0872 44.19 36.4451 42.5747 36.4451C40.9595 36.4451 39.4104 37.0872 38.2682 38.2303C37.126 39.3735 36.4844 40.9238 36.4844 42.5404C36.4844 44.157 37.126 45.7074 38.2682 46.8505C39.4104 47.9936 40.9595 48.6358 42.5747 48.6358ZM60.8378 44.5722C60.8378 43.4945 61.2655 42.4609 62.027 41.6988C62.7884 40.9368 63.8212 40.5086 64.898 40.5086H97.38C98.4569 40.5086 99.4896 40.9368 100.251 41.6988C101.013 42.4609 101.44 43.4945 101.44 44.5722C101.44 45.6499 101.013 46.6835 100.251 47.4456C99.4896 48.2077 98.4569 48.6358 97.38 48.6358H64.898C63.8212 48.6358 62.7884 48.2077 62.027 47.4456C61.2655 46.6835 60.8378 45.6499 60.8378 44.5722ZM60.8378 68.9537C60.8378 67.876 61.2655 66.8424 62.027 66.0803C62.7884 65.3182 63.8212 64.8901 64.898 64.8901H97.38C98.4569 64.8901 99.4896 65.3182 100.251 66.0803C101.013 66.8424 101.44 67.876 101.44 68.9537C101.44 70.0314 101.013 71.065 100.251 71.8271C99.4896 72.5891 98.4569 73.0173 97.38 73.0173H64.898C63.8212 73.0173 62.7884 72.5891 62.027 71.8271C61.2655 71.065 60.8378 70.0314 60.8378 68.9537ZM97.38 97.3988H68.7309C69.0324 94.6981 69.0324 91.9722 68.7309 89.2716H97.3882C98.465 89.2716 99.4977 89.6997 100.259 90.4618C101.021 91.2239 101.448 92.2574 101.448 93.3352C101.448 94.4129 101.021 95.4465 100.259 96.2086C99.4977 96.9706 98.465 97.3988 97.3882 97.3988H97.38ZM7.12062 80.3724C4.19376 86.0964 3.29101 92.644 4.55959 98.9474C5.82817 105.251 9.19323 110.938 14.106 115.082C19.0187 119.225 25.1893 121.581 31.6115 121.764C38.0336 121.948 44.3283 119.948 49.4691 116.091L70.1195 136.88C70.8819 137.642 71.9155 138.07 72.993 138.069C74.0704 138.069 75.1034 137.639 75.8648 136.876C76.6261 136.113 77.0534 135.079 77.0526 134.001C77.0518 132.922 76.6231 131.888 75.8607 131.126L55.1534 110.402C57.5113 107.25 59.1897 103.643 60.0823 99.8078C60.9749 95.973 61.0622 91.9945 60.3388 88.1242C59.6155 84.2538 58.0971 80.5759 55.8798 77.3233C53.6625 74.0707 50.7947 71.3142 47.4578 69.2284C44.1209 67.1425 40.3877 65.7728 36.4945 65.2058C32.6012 64.6387 28.6327 64.8869 24.8403 65.9344C21.0478 66.9819 17.5139 68.8061 14.4624 71.2913C11.4108 73.7766 8.90804 76.8689 7.1125 80.3724H7.12062ZM49.2985 82.0465C50.8087 84.2642 51.8648 86.7594 52.4061 89.3879C52.9473 92.0164 52.9629 94.7261 52.4518 97.3607C51.9408 99.9952 50.9134 102.502 49.4288 104.737C47.9442 106.972 46.032 108.891 43.8025 110.382C41.5729 111.873 39.0703 112.907 36.4392 113.425C33.808 113.943 31.1004 113.934 28.4728 113.398C25.8452 112.863 23.3496 111.812 21.1301 110.306C18.9106 108.8 17.0112 106.869 15.5416 104.624C12.6083 100.143 11.5617 94.6846 12.6294 89.4357C13.6971 84.1867 16.7927 79.5721 21.2428 76.5958C25.6928 73.6195 31.1372 72.5224 36.3914 73.5432C41.6455 74.564 46.2843 77.6201 49.2985 82.0465Z' fill='%23C4C4C4'/%3E%3C/svg%3E") no-repeat 140px center;} .nodata_massage .nodata_title { font-size: 20px; font-weight: 700; color:#000;} .nodata_massage .nodata_desc { margin-top: 26px; color: #000;} .nodata_massage .search_button { display: block; margin-top:46px; text-align: left;} /* 20230410 */ .nodata_message { position: relative; left: -244px; width: calc(100% + 244px); height: 100%; margin-left: 0!important; } .nodata_message .nodata_title { font-size: 38px; font-weight: 700; color:#444; text-align: center; line-height: 46px;} .nodata_message .nodata_desc { display: flex; justify-content: center;} .nodata_message .nodata_desc > div { text-align: center; width: 25%;} .nodata_message .nodata_desc > div p:nth-child(2) { font-size: 16px; padding-top: 11px; line-height: 20px;} .nodata_message .nodata_sub { font-weight: 700; font-size: 24px; line-height: 29px;} .nodata_message .nodata_b2b .nodata_sub::before{ content: ''; display: block; width: 120px; height: 105px; margin: 90px auto 20px auto; background: url(../images/common/ico_no_data_b2b.png);} .nodata_message .nodata_rfq { margin-left: 2%;} .nodata_message .nodata_rfq .nodata_sub::before{ content: ''; display: block; width: 120px; height: 105px; margin: 90px auto 20px auto; background: url(../images/common/ico_no_data_rfq.png);} .nodata_message .search_button { display: block; margin-top:46px; text-align: left;} .nodata_message .nodata_btn { width: 159px; height: 59px; border-radius: 10px; background: #30beb2; display: inline-block; line-height: 59px; color: #fff; font-size: 16px; margin-top: 20px;} /* .nodata_massage { margin-top: 50px; padding-left: 360px; background: url(../images/icon_pdno.png) no-repeat; background-position: 140px center;} .nodata_massage .nodata_title { font-size: 20px; font-weight: 700;} .nodata_massage .nodata_desc { margin: 20px 0; color: #666;} .nodata_massage .search_button { display: block; text-align: left;} */ /* 유튜브 영상 */ .youtube { display:block; position: relative; max-width: 800px; width: 100%; margin: 0 auto; } .youtube::before { display: block; content: ''; padding-top: 55%;} .youtube iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;} /* 2022-10-18, FAQ 개편 */ .faqVisual {position:relative;width:100%;padding:30px 0;background:#5a5a5a;text-align:center;} .faqVisual h3 {position:absolute;top:1.5rem;left:3rem;font-size:2.5rem;font-weight:900;color:#FFF;} .faqVisual p {margin-bottom:1rem;font-size:2.8rem;color:#FFF;font-weight:600;} .faqVisual .faqSearchInput input.faqSearch {width:320px;padding:12px 18px;border-radius:20px;color:#444;font-size:14px;line-height:1;background:#FFF;outline:none;} .faqVisual .faqSearchInput input.faqSearch::placeholder {color:#b3b3b3;} .faqVisual .faqSearchInput button.searchBtn {background: url('../images/icon_search_g.png') right center no-repeat; position: absolute; height: 18px; width: 18px; margin-left: -30px; margin-top: 10px;} input::-ms-clear, input::-ms-reveal {display:none;width:0;height:0;} input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration {display:none;} .faqtabWrap {position:relative;padding-top:3rem;} .faqtabWrap h4 {padding:0 0 2rem 2rem;color:#000;font-size:2.5rem;font-weight:600;} .faqtabWrap .hotBtn {position:absolute;top:5rem;right:0;padding-left:2.2rem;font-size:1.6rem;font-weight:500;} .faqtabWrap .hotBtn:before {position:absolute;top:0;left:0;display:block;content:"+";width:13px;height:13px;border-radius:3px;line-height:1;color:#30beb2;border:1px solid #30beb2;} .faqtabWrap ul {display:flex;justify-content:space-between;} .faqtabWrap ul li {width:19%;} .faqtabWrap ul li a {display:block;width:100%;height:5rem;line-height:5rem;text-align:center;text-indent:2.3rem;color:#000;background-color:#dfdfdf;background-repeat:no-repeat;background-size:12%;border-radius:2.5rem;font-size:1.8rem;font-weight:600;} .faqtabWrap ul li.on a, .faqtabWrap ul li:hover a {color:#FFF;background-color:#000;} .faqtabWrap ul li:nth-child(1) a {background-image:url('../images/faq/faq_ico01_b.png');background-position:left 23% center;} .faqtabWrap ul li:nth-child(2) a {background-image:url('../images/faq/faq_ico02_b.png');background-position:left 23% center;} .faqtabWrap ul li:nth-child(3) a {background-image:url('../images/faq/faq_ico03_b.png');background-position:left 23% center;} .faqtabWrap ul li:nth-child(4) a {background-image:url('../images/faq/faq_ico04_b.png');background-position:left 16% center;} .faqtabWrap ul li:nth-child(5) a {background-image:url('../images/faq/faq_ico05_b.png');background-position:left 19% center;} .faqtabWrap ul li:nth-child(1).on a, .faqtabWrap ul li:nth-child(1):hover a {background-image:url('../images/faq/faq_ico01_w.png');} .faqtabWrap ul li:nth-child(2).on a, .faqtabWrap ul li:nth-child(2):hover a {background-image:url('../images/faq/faq_ico02_w.png');} .faqtabWrap ul li:nth-child(3).on a, .faqtabWrap ul li:nth-child(3):hover a {background-image:url('../images/faq/faq_ico03_w.png');} .faqtabWrap ul li:nth-child(4).on a, .faqtabWrap ul li:nth-child(4):hover a {background-image:url('../images/faq/faq_ico04_w.png');} .faqtabWrap ul li:nth-child(5).on a, .faqtabWrap ul li:nth-child(5):hover a {background-image:url('../images/faq/faq_ico05_w.png');} .queWrap {padding-top:2rem;} .queWrap h4 {padding:0 0 2rem 2rem;color:000;font-size:2.5rem;font-weight:600;} .queWrap span.keyword {color:#30beb2;} .queWrap .afterSearch {margin-bott0m:2rem;} .queWrap .afterSearch:after {display:block;content:"";clear:both;} .queWrap .afterSearch p {float:left;font-size:16px;font-weight:600;} .queWrap .afterSearch p span {font-size:inherit;font-weight:inherit;} .queWrap .afterSearch a {float:right;display:block;font-size:16px;color:#30beb2;font-weight:600;} .faqInfoWrap {width:100%;margin-top:6rem;padding:3rem 20rem 6rem 20rem;background:#dfdfdf;} .faqInfoWrap h4 {margin-bottom:3rem;font-size:2.8rem;color:#000;font-weight:700;text-align:center;} .faqInfoWrap .box {display:inline-block;width:47%;padding:4rem 0 4rem 12rem;background-color:#FFF;background-image:url('../images/faq/faq_info_ico01.png');background-position:left 13% center;background-repeat:no-repeat;} .faqInfoWrap .box + .box {padding:4rem 0 4rem 10rem;margin-left:5%;background-image:url('../images/faq/faq_info_ico02.png');} .faqInfoWrap .box p {font-size:1.8rem;font-weight:700;color:#000;line-height:1.3;} .faqInfoWrap .box span {font-size:1.4rem;font-weight:500;color:#000;line-height:1.3;} .faqInfoWrap .box a {font-size:inherit;font-weight:inherit;color:inherit;} /* 800px이상 : pc + tablet만 */ @media all and (min-width:800px) { /* ==================== breadcrumb ==================== */ .breadcrumb { width: 1440px; margin: 15px auto 50px; font-size: 0;} .breadcrumb > li { display: inline-block; position: relative;} .breadcrumb > li + li { padding-left: 25px;} .breadcrumb > li + li:after { content: ''; position: absolute; left: 10px; top: 50%; width: 2px; height: 2px; border-top: 1.5px solid #444; border-right: 1.5px solid #444; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .breadcrumb > li .breadcrumb_item { display: block; font-size: 12px; } } /* 1440px 이하 공통*/ @media screen and (max-width: 1440px) { .breadcrumb { width: calc(100% - 20px);} .wrap_banner .wrap_banner_inner { width: 100%; padding: 0 20px;} .sidebar { height: 180px;} .sidebar .sidebar_inner { width: 100%; padding: 0 20px 0;} .sidebar .sidebar_inner .sidebar_tit { font-size: 40px;} .board_header.board_header_type1 .search_box2 { width: calc(100% - 200px);} .board_header_type1 .search_box2 { width: calc(100% - 200px);} .board_header.board_header_type .select_box { width: calc((100% - 20px)/2);} .board_header.board_header_type .search_box2 { width: 100%; margin: 10px 0 0 0; } .board_header.board_header_type0 > * { width: 80%; margin: 0; padding: 0;} .board_header.board_header_type2 .fit_middle { width: calc(100% - 300px);} .board_header.board_header_type2 .search_button { display: inline-block;} .board_header.board_header_type3 .fit_middle { display: inline-block; width: calc(100% - 200px); margin-bottom: 10px; } .board_header.board_header_type3 .search_box2 { display: inline-block; width: calc(100% - 200px);} .board_header.board_header_type3 > div:nth-of-type(3) { margin-left: 0 !important;} .board_header.board_header_type4 ul > li > em { display: none;} .board_header.board_header_type4 ul > li + li { margin-left: 10px;} .board_header.board_header_type4 ul > li { width: calc((100% - 20px) / 3);} .board_header.board_header_type4 ul > li .select_box { display: block; width: 100%;} .dform1 .dform1_col2 { flex-direction: column;} .dform1 .dform1_col2 .dform1_tr { width: 100%;} .board_list .item dt .item_img { width: 190px; height: 190px;} .board_list .item dd { width: calc(100% - 190px);} .ff_wrap { padding: 20px;} .board_table td { padding: 0 10px;} /* 2022-06-30 */ .nodata_massage { padding-left: 200px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='146' viewBox='0 0 130 146' fill='none'%3E%3Cpath d='M69.949 113.653H109.569C111.723 113.653 113.788 112.797 115.311 111.273C116.834 109.749 117.689 107.681 117.689 105.526V24.2543C117.689 22.0989 116.834 20.0317 115.311 18.5076C113.788 16.9834 111.723 16.1272 109.569 16.1272H28.3557C26.202 16.1272 24.1366 16.9834 22.6137 18.5076C21.0908 20.0317 20.2352 22.0989 20.2352 24.2543V58.8516C17.3698 59.8657 14.6419 61.2335 12.1147 62.9233V24.2543C12.1147 19.9434 13.8258 15.8091 16.8716 12.7608C19.9174 9.7125 24.0484 8 28.3557 8H109.561C113.868 8 117.999 9.7125 121.045 12.7608C124.091 15.8091 125.802 19.9434 125.802 24.2543V105.526C125.802 109.837 124.091 113.971 121.045 117.019C117.999 120.068 113.868 121.78 109.561 121.78H78.0614L69.9408 113.653H69.949ZM42.5747 48.6358C44.19 48.6358 45.7391 47.9936 46.8813 46.8505C48.0235 45.7074 48.6651 44.157 48.6651 42.5404C48.6651 40.9238 48.0235 39.3735 46.8813 38.2303C45.7391 37.0872 44.19 36.4451 42.5747 36.4451C40.9595 36.4451 39.4104 37.0872 38.2682 38.2303C37.126 39.3735 36.4844 40.9238 36.4844 42.5404C36.4844 44.157 37.126 45.7074 38.2682 46.8505C39.4104 47.9936 40.9595 48.6358 42.5747 48.6358ZM60.8378 44.5722C60.8378 43.4945 61.2655 42.4609 62.027 41.6988C62.7884 40.9368 63.8212 40.5086 64.898 40.5086H97.38C98.4569 40.5086 99.4896 40.9368 100.251 41.6988C101.013 42.4609 101.44 43.4945 101.44 44.5722C101.44 45.6499 101.013 46.6835 100.251 47.4456C99.4896 48.2077 98.4569 48.6358 97.38 48.6358H64.898C63.8212 48.6358 62.7884 48.2077 62.027 47.4456C61.2655 46.6835 60.8378 45.6499 60.8378 44.5722ZM60.8378 68.9537C60.8378 67.876 61.2655 66.8424 62.027 66.0803C62.7884 65.3182 63.8212 64.8901 64.898 64.8901H97.38C98.4569 64.8901 99.4896 65.3182 100.251 66.0803C101.013 66.8424 101.44 67.876 101.44 68.9537C101.44 70.0314 101.013 71.065 100.251 71.8271C99.4896 72.5891 98.4569 73.0173 97.38 73.0173H64.898C63.8212 73.0173 62.7884 72.5891 62.027 71.8271C61.2655 71.065 60.8378 70.0314 60.8378 68.9537ZM97.38 97.3988H68.7309C69.0324 94.6981 69.0324 91.9722 68.7309 89.2716H97.3882C98.465 89.2716 99.4977 89.6997 100.259 90.4618C101.021 91.2239 101.448 92.2574 101.448 93.3352C101.448 94.4129 101.021 95.4465 100.259 96.2086C99.4977 96.9706 98.465 97.3988 97.3882 97.3988H97.38ZM7.12062 80.3724C4.19376 86.0964 3.29101 92.644 4.55959 98.9474C5.82817 105.251 9.19323 110.938 14.106 115.082C19.0187 119.225 25.1893 121.581 31.6115 121.764C38.0336 121.948 44.3283 119.948 49.4691 116.091L70.1195 136.88C70.8819 137.642 71.9155 138.07 72.993 138.069C74.0704 138.069 75.1034 137.639 75.8648 136.876C76.6261 136.113 77.0534 135.079 77.0526 134.001C77.0518 132.922 76.6231 131.888 75.8607 131.126L55.1534 110.402C57.5113 107.25 59.1897 103.643 60.0823 99.8078C60.9749 95.973 61.0622 91.9945 60.3388 88.1242C59.6155 84.2538 58.0971 80.5759 55.8798 77.3233C53.6625 74.0707 50.7947 71.3142 47.4578 69.2284C44.1209 67.1425 40.3877 65.7728 36.4945 65.2058C32.6012 64.6387 28.6327 64.8869 24.8403 65.9344C21.0478 66.9819 17.5139 68.8061 14.4624 71.2913C11.4108 73.7766 8.90804 76.8689 7.1125 80.3724H7.12062ZM49.2985 82.0465C50.8087 84.2642 51.8648 86.7594 52.4061 89.3879C52.9473 92.0164 52.9629 94.7261 52.4518 97.3607C51.9408 99.9952 50.9134 102.502 49.4288 104.737C47.9442 106.972 46.032 108.891 43.8025 110.382C41.5729 111.873 39.0703 112.907 36.4392 113.425C33.808 113.943 31.1004 113.934 28.4728 113.398C25.8452 112.863 23.3496 111.812 21.1301 110.306C18.9106 108.8 17.0112 106.869 15.5416 104.624C12.6083 100.143 11.5617 94.6846 12.6294 89.4357C13.6971 84.1867 16.7927 79.5721 21.2428 76.5958C25.6928 73.6195 31.1372 72.5224 36.3914 73.5432C41.6455 74.564 46.2843 77.6201 49.2985 82.0465Z' fill='%23C4C4C4'/%3E%3C/svg%3E") no-repeat 20px center;} /* 20230410 */ .nodata_message { padding-left: 50px; } .nodata_message .nodata_desc > div { width: 380px;} /* .nodata_massage { padding-left: 200px; background: url(../images/icon_pdno.png) no-repeat; background-position: 20px center;} */ .area_delinfo > span { width: calc(100% - 75px); vertical-align: middle;} .area_delinfo > .area_delinfo_txt { top: 0; width: 75px; text-align: center; vertical-align: middle;} .area_delinfo > .area_delinfo_txt > br { display: block;} .area_ditem > :first-child { display: block; width: 100%; margin: 0 0 20px 0;} .area_ditem > :last-child { display: block; width: 100%;} .area_ditem > :last-child a { width: calc((100% - 20px) / 2); margin: 0 5px 10px 5px;} /* 2022-10-18, FAQ 개편 */ .faqtabWrap h3 {top:1.5rem;left:2rem;font-size:1.5rem;} .faqtabWrap p {font-size:2.5rem;} .faqtabWrap ul li a {font-size:1.6rem;text-indent:0;} .faqtabWrap ul li:nth-child(1) a, .faqtabWrap ul li:nth-child(2) a, .faqtabWrap ul li:nth-child(3) a, .faqtabWrap ul li:nth-child(4) a, .faqtabWrap ul li:nth-child(5) a, .faqtabWrap ul li:nth-child(1).on a, .faqtabWrap ul li:nth-child(2).on a, .faqtabWrap ul li:nth-child(3).on a, .faqtabWrap ul li:nth-child(4).on a, .faqtabWrap ul li:nth-child(5).on a, .faqtabWrap ul li:nth-child(1):hover a, .faqtabWrap ul li:nth-child(2):hover a, .faqtabWrap ul li:nth-child(3):hover a, .faqtabWrap ul li:nth-child(4):hover a, .faqtabWrap ul li:nth-child(5):hover a {background-image:none;} .faqInfoWrap {padding:3rem 2rem 6rem 2rem;} .faqInfoWrap h4 {font-size:2.6rem;} .faqInfoWrap .box {padding:3rem 0 3rem 9rem;background-size:auto 20%;background-position: left 7% center;} .faqInfoWrap .box + .box {padding:3rem 0 3rem 8rem;} .faqInfoWrap .box p {font-size:1.5rem;} .faqInfoWrap .box span {font-size:1.2rem;} } @media screen and (min-width: 801px) and (max-width: 1100px) { .faqInfoWrap .box, .faqInfoWrap .box + .box {background-image:none;padding:3rem 0 3rem 30px;} } /* 모바일만 */ @media screen and (max-width: 800px) { .breadcrumb { display:none;} /* ==================== sidebar ==================== */ .sidebar { display: none;} .hidden_mobile { display: none;} .form1 th { padding: 10px; font-size: 12px;} .form1 td { padding: 4px 10px 5px; font-size: 12px;} .board_header { padding: 10px;} .board_header .select_box { display: inline-block; width: 100%; width: 40%; } .board_header .select_box:nth-of-type(1) { display: block; width: 100%; margin-bottom: 10px; } .board_header.board_header_type1 .search_box2 { display: inline-block; width: calc(60% - 10px); margin-left: 10px;} .board_header.board_header_type1 .search_box2 { display: block; width: 100%; margin: 0;} .board_header.board_header_type1 :first-child { display: block; width: 100%; margin-bottom: 10px;;} .board_header.board_header_type .select_box { display: inline-block; width: calc((100% - 10px)/2)!important; margin: 0;} .board_header.board_header_type .select_box+.select_box { margin-left: 10px;} .board_header.board_header_type0 > * { width: 100%; margin: 0; padding: 0;} .board_header.board_header_type2 .fit_middle { display: block; width: 100%;} .board_header.board_header_type2 .search_button { display: block; width: 100%; margin-top: 10px;} .board_header.board_header_type2 .search_button button { display: block; width: 100%;} .board_header.board_header_type2 .select_box { display: block; width: 100%; margin-bottom: 10px;} .board_header.board_header_type3 .fit_middle { display: block; width: 100%;} .board_header.board_header_type3 .select_box { display: block; width: 100%; margin-bottom: 10px;} .board_header.board_header_type3 .search_box2 { display: block; width: 100%;;} .board_header.board_header_type4 ul > li { display: block; width: 100%;} .board_header.board_header_type4 ul > li + li { margin: 10px 0 0 0;} .board_header.board_header_type5 .cn0 { display: none;} .board_header.board_header_type5 .select_box { display: block; width: 100%; margin: 0;} .board_header.board_header_type5 .search_button { display: block; width: 100%; margin: 10px 0;} .board_header.board_header_type5 .search_button button { display: block; width: 100%; } .board_header.board_header_type5 .area_warning_box { text-align: left;} .board_header.board_header_type5 .area_warning_box > p { width: calc(100% - 23px);} .board_header.board_header_type6 .select_box { display: block; width: 100%; margin-bottom: 10px;} .board_header.board_header_type6 .search_button { display: block; width: 100%;} .board_header.board_header_type6 .search_button button { display: block; width: 100%;} .board_area1 { display: block;} .board_area1 > .btn_pro { display: block; width: 100%; margin: 0 0 10px 0;} .board_area1 > .btn_pro > li > span { line-height: 1.2;} .board_area1 .search_button { display: block; width: 100%;} .board_area1 .search_button button { display: block; width: 100%;} .board_header > div + div { margin-left: 0;} .board_table .subject { padding: 0 10px;} .board_view_header, .board_view_ss.board_view_header { padding: 15px 10px;} .board_view_header > strong { display: block; width: 100%; margin-bottom: 3px; font-size: 14px;} .board_view_header > div { display: block; position: static; top: auto; right: auto; width: 100%; transform: none;} .board_view_header > div strong { font-size:12px;} .board_view_header > div span { font-size: 12px;} .board_view_header2 { padding: 15px 110px 15px 10px; } .board_view_header2 > strong { font-size: 14px;} .board_view_header2 > div strong { font-size: 12px;} .board_view_header2 > div span { font-size: 12px;} .board_view_header3 { padding: 15px 10px; } .board_view_header3 > strong { font-size: 14px;} .board_view_header3 > .right { margin-top: 0;} .board_view_header3 > .right > div { font-size: 12px;} .board_view_bottom li { padding: 15px 5px;} .board_view_bottom li > a { margin-left: 20px;} .board_view_bottom li > a { width: calc(100% - 80px);} .torder_date, .torder_date *, .torder_overview, .torder_overview *, .torder_ship * { font-size: 12px;} .board_xscroll1 { overflow-x:auto; width:100%; } .board_xscroll1 table { width: 150%; white-space:nowrap; border-collapse:collapse; } .board_xscroll2 { overflow-x:auto; width:100%; } .board_xscroll2 table { width: 200%; white-space:nowrap; border-collapse:collapse; } .dform1 { border: 1px solid #e5e5e5; padding: 10px; } .dform1 .dform1_tr { display: block; border: none;} .dform1 .dform1_tr { margin-bottom: 15px;} .dform1 .dform1_tr.visible .autoCom { width:100% !important} .dform1 .left { display: block; width: 100%; padding: 0; border: none; background-color: transparent;} .dform1 .right { display: block; width: 100%; padding: 0; border: none;} .dform1 .right.right_pd1 { padding: 0;} .dform1 .left .left_box { min-height: 35px; font-size: 12px;} .dform1.is_wide .left { width: 100%;} .dform1.is_wide .right { width: 100%;} .dform1_col { padding: 0; border: none;} .area_domain { display: block; align-items: center; flex-direction: row;} .area_domain em { display: inline-block; width: auto;} .area_domain input { width: calc(100% - 165px); margin: 0 10px;} .area_domain .search_button { width: 100%; margin: 10px 0 0 0;} .area_domain .search_button button { width: 100%;} .right_type1 { display: block;} .right_type1 > :nth-of-type(1) { display: block; width: 100%;} .right_type1 > .search_button { display: block; width: 100%;} .right_type1 > .search_button button { display: block; width: 100%;} .area_addcir > .search_button { display: block;} .area_addcir > .search_button button { display: block; width: 100%;} .area_addcir > .search_button button + button { margin: 10px 0 0 0;} .area_addcir_box .checks { width: auto;} .area_addcir_box .dleft { width: 60px; height: 60px;} .area_addcir_box .dright { width: calc(100% - 110px);} .area_addcir_box .dright .area_addcir_tit { margin-bottom: 5px;} .area_pd_box .dleft { width: 60px; height: 60px;} .area_pd_box .dright { width: calc(100% - 85px);} .area_byte > div:nth-of-type(1) { display: block; width: 100%;} .area_byte > em { display: block; width: 100%; padding-left: 0; font-size: 12px;} .area_imgupload .area_imgupload_left { display: block; margin: 0 auto 15px;} .area_imgupload .area_imgupload_right { display: block; width: 100%; padding-left: 0;} .area_imgupload .area_imgupload_right .search_button { display: block; width: 100%;} .area_imgupload .area_imgupload_right .search_button button { display: block; width: 100%;} .area_delinfo > span { width: calc(100% - 120px);} .area_delinfo > .area_delinfo_txt { width: 120px; text-align: right;} .area_delinfo > .area_delinfo_txt > br { display: none;} .area_back2 > :first-child { display: inline-block; width: 100%;} .area_back2 > em { display: block; width: 100%; padding-left: 0;} .item_tflist1 > li .tflist1_right { display: block; width: 100%; } .item_tflist1 > li .tflist1_right .cn0 { font-size: 12px; } .item_tflist1 > li .tflist1_left { display: block; width: 100%; } .item_tflist1 > li .tflist1_left > span { font-size: 12px;} .item_tflist2 > li .tflist1_right { width: 100px; } .item_tflist2 > li .tflist1_right .cn0 { line-height: 30px; font-size: 12px; } .item_tflist2 > li .tflist1_left { width: calc(100% - 100px); } .item_tflist2 > li .tflist1_left > strong { height: 30px; font-size: 12px; } /* Information > success Stories */ .board_list > ul > li { padding-bottom: 30px;} .board_list > ul > li + li { margin-top: 30px;} .board_list .item { margin-bottom: 110px;} .board_list .item dt .item_img { width: 100px; height: 100px;} .board_list .item dd { width: calc(100% - 100px); padding-left: 15px;} .board_list .item_state .date { font-size: 12px;} .board_list .item_state .date em { font-size: 12px;} .board_list .item_title { height: 42px; margin: 10px 0 0;} .board_list .item_title a { font-size: 14px;} .board_list .item_info > div strong { display: inline-block; margin-bottom: 0; font-size: 12px;} .board_list .item_info > div .item_info_btn { position: relative; top: -5px; right: 0; padding-right: 10px; font-size: 0;} .board_list .item_info > ul { display: none;} .board_list .item dd > .item_btn { display: block; position: absolute; left: -100px; bottom: -110px; width: calc(100% + 100px); } .board_list .item dd > .item_btn .search_button { margin-top: 0;} .board_list .item dd > .item_btn .search_button button { display: block; width: 100%;} .board_list .item dd > .item_btn .search_button button + button { margin: 10px 0 0 0;} /* accordion */ .accordion .q_box {width:100%;padding:10px 0;} .accordion .accordion_box { padding: 10px;} .accordion .accordion_txt {display:none;} .accordion .accordion_q {} .accordion .accordion_btn em { font-size: 12px;padding:0;width:calc(100% - 70px);} /* 2022-10-18, FAQ 개편 */ .faqtabWrap {padding:4vw 0;} .faqVisual h3 {top:2vw;left:3vw;font-size:3vw;} .faqVisual p {margin-bottom:1vw;font-size:4vw;} .faqVisual .faqSearchInput input.faqSearch {width:80%;padding:1.5vw 2vw;} .faqtabWrap h4 {padding:0 0 2vw 1vw;font-size:3.5vw;} .faqtabWrap .hotBtn {top:5vw;padding-left:4vw;font-size:2.4vw;line-height:3.4vw;} .faqtabWrap .hotBtn:before {width:2.5vw;height:2.5vw;line-height:2.9vw;} .faqtabWrap ul li a {height:6vw;line-height:6vw;font-size:1.8vw;} .queWrap h4 {padding: 0 0 2vw 1vw;font-size:3.5vw;} .queWrap .afterSearch {margin-bottom:1vw;} .queWrap .afterSearch p, .queWrap .afterSearch a {font-size:1.6vw;} .faqInfoWrap {margin-top:5vw;padding:6vw 2vw 6vw 2vw;} .faqInfoWrap h4 {margin-bottom:3vw;font-size:4vw;} .faqInfoWrap .box {display:block;width:95%;margin:0 auto 3vw auto;padding:4vw 0 4vw 16vw;background-size:auto 23%;background-position: left 4vw center;} .faqInfoWrap .box + .box {padding:4vw 0 4vw 16vw;margin-left:auto;background-size: 8% auto;} .faqInfoWrap .box p {font-size:1.8vw;} .faqInfoWrap .box span {font-size:1.4vw;} /* cookie */ .ff_wrap { padding: 10px;} .foot_fixed p { display: block; width: 100%; padding: 0 0 10px 0; font-size: 12px;} .foot_link { display: block; width: 100%;} .foot_fixed p u { font-size: 12px;} /* pop */ .pop_body { max-height: 600px; padding: 15px;} .pop_button button { width: 100%;} .pop_button button + button, .pop_button a + button, .pop_button button + a { margin: 10px 0 0 0; } .pop_wrap.width_500 { width: 90% !important;} .pop_wrap.width_520 { width: 90% !important;} .pop_wrap.width_600 { width: 90% !important;} .pop_wrap.width_700 { width: 90% !important;} .pop_wrap.width_800 { width: 90% !important;} .pop_wrap.width_960 { width: 90% !important;} .pop_wrap.width_1000 { width: 90% !important;} .popcolor0 { font-size: 12px;} .popcolor1 { font-size: 12px;} .popcolor2 { font-size: 12px;} .popcol1 + .popcol1 { margin-top: 15px;} .popbullet01 li { font-size: 12px;} .popbullet01 li * { font-size: 12px;} .popbullet02 li > .txt { font-size: 12px;} .popbullet03 li { font-size: 12px;} .popbullet03 li * { font-size: 12px;} .popbullet04 li > .txt { font-size: 12px;} .poplist01 .poplist01_tit { font-size: 12px;} .poplist01 .poplist01_desc { font-size: 12px;} .popbrick01 .cn0 { font-size: 12px;} .popbrick02 .cn0 { display: block; width: 100%; font-size: 12px;} .popbrick02 > :last-child { display: block; width: 100%;} .popbrick03 > .cn0 { display: block; width: 100%; font-size: 12px;} .popbrick03 > .popbrick03_right { display: block; width: 100%; } .popbrick03 > .popbrick03_right > .select_box { width: 100%; margin: 0 0 10px 0;} .popbrick03 > .popbrick03_right > .search_button { display: block;} .popbrick03 > .popbrick03_right > .search_button button { display: block; width: 100%;} .popbrick03 > .popbrick03_right > .search_button button + button{ margin: 10px 0 0 0;} .poplist01 > li { display: block; width: 100%;} .poplist01 > li:nth-child(2n) { margin-left: 0;} .popbrick01 .cn0 { display: block; width: 100%;} .popbrick01 > :nth-child(2n) { display: block; width: 100%; margin: 0 0 10px 0;;} .popbrick01 .search_button { display: block;} .popbrick01 .search_button button { display: block; width: 100%;} .tabs_pop.ui-tabs .tab_head li + li { margin: 0;} .tabs_pop.ui-tabs .tab_head li a { font-size: 12px;} .tabs_pop.ui-tabs .tab_head.is_wide2 li { width: 50%;;} .popcategory_wrap .popcategory_list { display: block !important; height: auto !important;} .popcategory_list ul { display: none;} .popcategory_list .select_box { display: block;} .popcategory_wrap.is_list2 > div { width: 100%;} .popcategory_wrap.is_list3 > div { width: 100%;} .popcategory_wrap.is_list4 > div { width: 100%;} .popcategory_wrap > div + div { margin: 5px 0 0 0;} .area_myclviewcir > .area_myclviewcir_tit { font-size: 20px;} .order_mysale5_img { width: 120px; margin: 20px auto 0; } .area_order_priceoffer1 .fit2.per_37 > :first-child { display: block; width: 100%;} .area_order_priceoffer1 .fit2.per_37 > :last-child { display: block; width: 100%; margin: 10px 0 0 0;} .area_order_priceoffer1 .popbrick04 .cn0 { width: 60px; margin-bottom: 10px; text-align: left;} .area_order_priceoffer1 .popbrick04 .select_box { width: calc(100% - 60px); margin: 0;} .popbrick04 > * { font-size: 12px;} /* 2022-06-30 */ .nodata_massage { margin: 0; padding: 150px 0 0 0; background-position: center 35px; background-size: 80px auto;} .nodata_massage .nodata_title { font-size: 14px;} .nodata_massage .nodata_desc { margin: 10px 0 20px; font-size: 12px;} .nodata_massage .nodata_desc br { display:none;} /* 2023-04-10*/ .nodata_message { width: 100%; left: 0px; padding-left:0;} .nodata_message .nodata_title { font-size: 20px; line-height: 24px; padding-top: 20px;} .nodata_message .nodata_desc { display: block;} .nodata_message .nodata_desc > div { width: 80%; margin: 0 auto;} .nodata_message .nodata_desc .nodata_sub { font-size: 18px;} .nodata_message .nodata_desc > div p:nth-child(2) { font-size: 14px; padding-top: 0;} .nodata_message .nodata_b2b .nodata_sub::before { margin-top: 30px; margin-bottom: 10px;} .nodata_message .nodata_rfq .nodata_sub::before { margin: 60px auto 10px;} .nodata_message .nodata_btn { width: 100px; height: 40px; border-radius: 10px; background: #30beb2; display: inline-block; line-height: 40px; color: #fff; font-size: 14px; margin-top: 15px;} .nodata_message .nodata_desc br { display:none;} /* .nodata_massage { margin: 0; padding: 150px 0 0 0; background-position: center 35px; background-size: 80px auto;} .nodata_massage .nodata_title { font-size: 14px;} .nodata_massage .nodata_desc { margin: 10px 0 20px; font-size: 12px;} */ /* 2022-12-23 신규 keyword 스크롤박스 */ .autoCom{ width: calc( 100% - 22px)!important; height: 200px;} } /* Dimmed layer */ .dimmedLayer { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 151; background-color: #000; } .other_site_page_link_wrap{padding-top: 10px;} .other_site_link_wrap{ overflow: hidden; position: relative; width: 100%; padding: 10px 0px 0px; background: transparent; } .other_site_header{ width:100%; position: relative; display: inline-block; padding: 0px 50px; border-bottom: 1px solid #c0c3c6;} .other_site_header .logo_wrap{ width: 50%; height: 50px; background-color: transparent; float: left; position: relative; } .other_site_header .logo_wrap a img{width: auto; height: auto; max-width: calc( 100% - 20px ); max-height: calc( 100% - 20px ); position: absolute; transform:translate(0%, -50%); top: 50%;} .other_site_header .view_more_wrap{ width: 50%; height: 50px; background-color: transparent; float: right; position: relative; } .other_site_header .view_more_wrap p{position: absolute; bottom: 10px; right: 10px; font-size: 17px; font-weight: 400;} .other_site_list{ display: inline-block; padding: 15px 30px 0px; width: 100%; } .other_site_list li{ float: left; width: 20%; padding: 20px; border: 0; text-align: left; list-style: none; } .other_site_list .product_wrap{ position: relative; width: 100%; height: 175px; border: 1px solid #ddd; } .other_site_list .product_wrap img{ width: auto; height: auto; max-width: 90%; max-height: 90%; position: absolute; transform:translate(-50%, -50%); top: 50%; left: 50%; } .other_site_list .product_text_wrap{width: 100%; display: inline-block;} .other_site_list .product_text_wrap p{ text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 38px; text-align: left; word-break: break-all; font-size: 14px; margin-top: 10px; line-height: 1.4; word-break: keep-all; } .is_clipped { overflow: hidden !important; } /* DUNS 찾기 */ .findDuns {padding:10px 20px;} .findDuns:after {display:block;content:"";clear:both;} .findDuns p {float:left;line-height:40px;} .findDuns a {float:right;display:block;width:32%;height:40px;text-align:center;border:1px solid #005172;color:#005172;line-height:38px;border-radius:2px;} /* 2022-12-23 신규 keyword 스크롤박스 */ .autoOn{ display: block ;} .autoNone{ display: none ;} .autoCom{ border: 1px solid #eee; position: absolute; z-index: 2; background: #fff; width : calc(100% - 330px); height: 200px;} .autoCom .autoLeft{ width:50%; } .autoCom .autoRight{ width:50%; } .autoCom .twin-autoCom{ overflow: scroll; overflow-x:hidden; height: 180px; } .autoCom .trade-autoCom{ overflow: scroll; overflow-x:hidden; height: 180px;} .autoCom .trade-autoCom:before{ content: ""; display: inline-block; width: 1px; height: 100%; background: #eee; position: absolute; } .autoCom ul li { padding:0 10px; white-space:nowrap; } .autoCom ul li a{ display: block; height: 26px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; } .autoCom p{ font-size: 12px; color: #888; margin-right: 5px; text-align: right;} .autoCom .autoRight{ background: #fafafa; margin: 0;}