/* A A A : A : A : A : */ #transferList { width : 100%; height : auto; text-align : center; margin-top : clamp(40px,5vw,60px);} #transferList .search_option { font-size : clamp(30px, 5vw, 40px); width : 100%; color : #1ba33d99; font-weight : 600;} #transferList .sectionWrap { width : 100%; height : auto; max-width : 1500px; display : inline-block; } #transferList .sectionPaddingWrap { margin-top : clamp(30px,3vw,50px); overflow : hidden; } /* 체크박스 Wrap */ .transferCheckBoxWrap { width : 100%; height : auto; margin-top : -4px; border-top : 1px solid #666; } .transferCheckListBox { width : 100%; height : auto; display : flex; justify-content : flex-start; align-items : stretch; border-bottom : 1px solid #ddd; border-left : 1px solid #ddd; border-right : 1px solid #ddd; } .transferCheckListTit { width : 20%; height : auto; display : flex; justify-content : center; align-items : center; font-size : clamp(16px,2vw,18px); color : #333; font-weight : 700; line-height : 1em; margin-right : clamp(15px,5vw,25px); border-right : 1px solid #ddd; background : #f7f7f7; } .transferCheckListContBox { width : 80%; height : auto; display : flex; flex-wrap : wrap; justify-content : flex-start; align-items : center; align-content : center; padding : clamp(10px,5vw,20px) 0; } .transferChk { display : none; } .labelWrap { width : calc(100% / 6); height : auto; display : flex; justify-content : flex-start; align-items : center; } .labelFullWrap { width : 100%; height : auto; text-align : left; } .labelBigWrap { width : 50%; height : auto; display : flex; justify-content : flex-start; align-items : center; } .transferCheckBoxWrap .transferCheckListBox:nth-child(3) .labelBigWrap:nth-child(even) { padding-left : 25px; } .BigWrapTit { width : auto; height : auto; font-size : clamp(14px,2vw,16px); color : #666; transition : .2s; cursor : default; display : flex; align-items : center; line-height : 1.9em; font-weight : 400; letter-spacing : -0.057em; } .item { width : auto; height : auto; font-size : clamp(14px,2vw,16px); color : #666; transition : .2s; cursor : default; display : flex; align-items : center; line-height : 1.9em; margin : 0 4px; } .transferChkLabel { width : auto; height : auto; font-size : clamp(14px,2vw,16px); color : #666; transition : .2s; cursor : pointer; display : flex; align-items : center; line-height : 1.9em; } .labelFullWrap .transferChkLabel { display : inline-flex; } .transferChkLabel.All { font-weight : 700; color : #208b3b; } .transferChkLabel:hover { color : #37d95f; transition : .2s; } .transferChkLabel p { width : clamp(15px,2vw,18px); height : clamp(15px,2vw,18px); margin-right : clamp(7px,1vw,8px); transition : .2s; position : relative; display : inline-block; opacity : 0.4; background-image : url("../../../../Image/uncheck.png"); background-size : 100%; background-position : center; background-repeat : no-repeat; } .transferChk:checked + .transferChkLabel { color : #16782e; transition : .2s; } .transferChk:checked + .transferChkLabel p { opacity : 0.9; transition : .2s; background-image : url("../../../../Image/checked_green.png"); background-size : 100%; background-position : center; background-repeat : no-repeat; } .searchWrap { width : 100%; height : auto; border : 1px solid #ddd; padding : clamp(10px,2vw,15px) 0; margin-top : clamp(10px,2vw,15px); } .searchInWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : space-evenly; } .transferChkLabel .radioBtn { width : clamp(15px,2vw,18px); height : clamp(15px,2vw,18px); margin-right : clamp(7px,1vw,8px); transition : .2s; position : relative; display : inline-block; opacity : 0.4; background-image : url("../../../../Image/uncheck.png"); background-size : 100%; background-position : center; background-repeat : no-repeat; } .transferChk:checked + .transferChkLabel .radioBtn { opacity : 0.9; transition : .2s; background-image : url("../../../../Image/checked_green.png"); background-size : 100%; background-position : center; background-repeat : no-repeat; } .searchLabel { font-size : clamp(14px,2vw,16px); color : #000; display : flex; align-items : center; } .searchLabel .searchBar { height : clamp(29px,2vw,40px); font-size : clamp(14px,2vw,16px); color : #000; margin-left : clamp(4px,2vw,6px); border : 2px solid #ddd; border-radius : 5px; padding-left : clamp(5px,2vw,8px); pointer-events : none; } .searchLabel .searchBar:focus { border : 2px solid #208b3b; } .searchBtnLabel { width : clamp(95px,10vw,120px); height : clamp(28px,2vw,40px); font-size : clamp(13px,2vw,18px); color : #fff; background : #208b3b; display : flex; align-items : center; justify-content : center; border-radius : 5px; border : 2px solid #208b3b; transition : .4s; cursor : pointer; } .searchBtnLabel:hover { background : #fff; color : #208b3b; transition : .4s; } .searchBtnLabel svg { font-size : clamp(14px,2vw,16px); margin-right : clamp(3px,2vw,5px); } .searchBtnLabel .submitBtn { display : none;} .mouse_notice { width : 100%; height : auto; text-align : center; overflow : hidden; } .mouse_notice p { font-size : 14px; color : #666; font-weight : 400; } .mouse_notice .pointerWrap { width : 60%; height : 35px; display : inline-block; transform : scale(1.3); position : relative; margin-top : 10px; } .mouse_notice .pointerWrap img { height : 30px; position : absolute; transition : 0.6s; opacity : 0; animation-duration: 8s; animation-iteration-count: infinite; } .mouse_notice .pointerWrap img.pointer_left { animation-name : pointer_left; } .mouse_notice .pointerWrap img.pointer_right { animation-name : pointer_right; } .mouse_notice .pointerWrap img.pointer_center { animation-name : pointer_center; } @keyframes pointer_left { 0% { left : 0; opacity : 0; } 45% { left : calc(100% - 45px);opacity : 0; } 50% { left : calc(100% - 45px);opacity : 1; } 95% { left : 0; opacity : 1; } 100% { left : 0; opacity : 0; } } @keyframes pointer_right { 0% { left : 45px; opacity : 1; } 45% { left : 100%; opacity : 1; } 50% { left : 100%; opacity : 0; } 95% { left : 45px; opacity : 0; } 100% { left : 45px; opacity : 1; } } @keyframes pointer_center { 0% { left : 18px; opacity : 1; } 45% { left : calc(100% - 25px);opacity : 1; } 50% { left : calc(100% - 25px);opacity : 1; } 95% { left : 18px; opacity : 1; } 100% { left : 18px; opacity : 1; } } /* A A A : A : A : A : */ /* 리스트 Wrap */ .transferListWrap { width : 100%; height : auto; overflow : scroll; overflow-y : hidden; margin-bottom : clamp(15px, 1.5vw, 25px);} .transferListWrap::-webkit-scrollbar { height : 8px; margin-top : 5px; } .transferListWrap::-webkit-scrollbar-thumb { background : #919191; border-radius : 5px; } .transferListWrap::-webkit-scrollbar-thumb:hover { background : #b5b5b5; } .wrapTitBox { width : 100%; height : auto; display : flex; align-items : center; margin-bottom : 12px; } .wrapTitBox .titBefore { width : clamp(10px,2vw,20px); height : clamp(1px,1vw,4px); background : #17469e; margin-right : clamp(6px,2vw,8px);} .wrapTitBox .tit { font-size : clamp(16px,2vw,24px); font-weight : 700; } .wrapTitBox .ps { font-size : clamp(12px,2vw,16px); font-weight : 400; flex-grow : 1; text-align : right; } .bbs_naviWrap { width : 100%; height : auto; text-align : left; padding : 15px 10px; background-color : #f7f7f7; margin-bottom : 15px; display : flex; flex-wrap : wrap; } .bbs_naviWrap p { font-size : clamp(12px,2vw,17px); padding : 0; color : #0471b8; font-weight : 400; width : 100%; } .bbs_naviWrap .bbs_naviWrap_inner { width : 100%; margin-top : 6px; display : flex; justify-content : space-between; align-items : center; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_left ,.bbs_naviWrap .bbs_naviWrap_inner .adm_menu_right { width : auto; display : inline-block; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_left .admct { font-size : clamp(12px,2vw,15px); font-weight : 300; display : inline-block; border : 1px solid #ccc; padding : 3px 7px; margin : 2px 3px; transition : all 0.6s; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_left .admct.on { background-color : #00c6ff; color : #fff; border : 1px solid #00c6ff; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_left .admct:hover { background-color : #00c6ff; color : #fff; border : 1px solid #00c6ff; transition : all 0.6s; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_right .delete_bt { font-size : clamp(12px,2vw,15px); font-weight : 400; display : inline-block; border : 1px solid #980000; padding : 3px 7px; margin : 0 3px 0px 3px; transition : all 0.6s; background-color : #fff; color : #980000; margin : 2px 3px; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_right .delete_bt:hover { background-color : #980000; color : #fff; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_right .write_bt { font-size : clamp(12px,2vw,15px); font-weight : 400; display : inline-block; border : 1px solid #3a8afd; padding : 3px 7px; margin : 0 3px 0px 3px; transition : all 0.6s; background-color : #fff; color : #3a8afd; margin : 2px 3px; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_right .write_bt:hover { background-color : #3a8afd; color : #fff; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_right .admct.on { background-color : #00c6ff; color : #fff; border : 1px solid #00c6ff; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_right .admct:hover { background-color : #00c6ff; color : #fff; border : 1px solid #00c6ff; transition : all 0.6s; } .transferListWrap .transferListBoxWrap { width : 1500px; height : auto; border-top : 1px solid #666; margin-bottom : 7px; border-right : 1px solid #ccc; border-left : 1px solid #ccc; } .transferListWrap .transferListBoxWrap .transferListNameBoxWrap { width : 100%; height : auto; display : flex; align-items : stretch; background : #fafafa; border-bottom : 1px solid #ccc; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap { width : 100%; height : auto; display : flex; align-items : stretch; border-bottom : 1px solid #ccc; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap:hover { background : #ededed; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .detailBoxUL { position : fixed; top : 100%; left : 100%; background : #fff; width : clamp(400px,20vw,500px); height : auto; display : none; padding : clamp(10px,2vw,12px); flex-direction : column; text-align : left; pointer-events : none; z-index : 100; border : 4px solid #00c6ff; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .detailBoxUL li { font-size : clamp(12px,2vw,14px); line-height : 1.5em; color : #666; word-break : keep-all; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap:hover .detailBoxUL { display : flex; } /* 리스트 이름 Wrap */ .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox { border-right : 1px solid #ccc; display : flex; align-items : center; flex-wrap : wrap; align-content : center; justify-content : center; padding : clamp(5px, 3%, 10px) 0; } .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox:last-child { border-right : none; } .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox p { width : 100%; font-size : clamp(15px,2vw,18px); font-weight : 500; color : #333; line-height : 1.5em; } .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox p.p1 { padding : clamp(3px, 3%, 10px) 0; } .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox p .ps { font-weight : 300; color : #666; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .cp_typeWrap .cp_type.green, .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox.green p { color : #4bb341;} .transferListWrap .transferListBoxWrap .blue, .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox.blue p, .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox .divisionBox p, .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox p.m_d.blue { color : #2e59a8;} .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox.red p, .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox p.red { color : #e03645;} .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox .divisionBox { width : 100%; display : flex; align-items : center; border-top : 1px solid #ccc; } .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox .divisionBox p:first-child { width : calc(100% - 1px); padding: clamp(3px, 3%, 10px) 0;} .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox .divisionBox p:last-child { width : calc(100% + 2px); padding: clamp(3px, 3%, 10px) 0; } .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox .divisionBox p:first-child { border-right : 1px solid #ccc; } .listName0 { width : 40px; position : relative; } .listName1 { width : calc(10% - 4px); } .listName2 { width : calc(10% - 4px); } .listName3 { width : calc(10% - 4px); } .listName4 { width : calc(10% - 4px); } .listName5 { width : calc(10% - 4px); } .listName6 { width : calc(30% - 4px); } .listName7 { width : calc(10% - 4px); } .listName8 { width : calc(10% - 4px); } .listName9 { width : calc(10% - 4px); } .transferListWrap .transferListBoxWrap .transferListNameBoxWrap .transferListNameBox.listName6 { padding : 0; } /* 리스트 내용 Wrap */ .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox { border-right : 1px solid #ccc; display : flex; align-items : center; flex-wrap : wrap; align-content : center; justify-content : center; padding : clamp(6px,2vw,12px) 0; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox.listCont6 { align-items : stretch; align-content : stretch; padding : 0 0; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap div:last-of-type { border-right : none; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .cp_typeWrap { width : 100%; height : auto; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .cp_typeWrap .cp_type { display : inline-block; margin : 2px 0; font-size : clamp(13px,2vw,15px); color : #333; font-weight : 500; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox p { width : 100%; font-size : clamp(13px,2vw,15px); line-height : 1.5em; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox p.m_d { padding : 3px 0; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox p { display : inline-block; } @keyframes qnabackLink_ani { 0% { left : -40%; bottom : 0%; } 20% { left : -40%; bottom : 0%; } 80% { left : 160%; bottom : -230%; } 100% { left : 160%; bottom : -230%; } } @keyframes selling_font_ani { 0% { background-color : #6F0000; } 20% { background-color : #6F0000; } 50% { background-color : #DB3A00; } 80% { background-color : #6F0000; } 100% { background-color : #6F0000; } } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .divisionBox { width : 50%; display : flex; flex-direction : column; align-items : center; justify-content : center; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .divisionBox.year3Box { border-right : 1px solid #ccc; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .icon { font-size : 14px; display : block; position : relative; line-height : 1em; width : auto; font-weight : 500; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .icon.recommend { color : #3e6bd2; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .icon.popular { color : #ca7418; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .icon.emergency { color : #980000; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .icon.new { color : #00c6ff; } .listCont0 { width : 40px; position : relative; } .listCont1 { width : calc(10% - 4px); } .listCont2 { width : calc(10% - 4px); } .listCont3 { width : calc(10% - 4px); } .listCont4 { width : calc(10% - 4px); } .listCont5 { width : calc(10% - 4px); } .listCont6 { width : calc(30% - 4px); } .listCont7 { width : calc(10% - 4px); } .listCont8 { width : calc(10% - 4px); } .listCont9 { width : calc(10% - 4px); } /* 페이징 */ .PageWrap { width : 100%; height : auto; } .pg_wrap { padding : 10px 0; text-align : center; font-size : 12px; margin-bottom : clamp(20px, 2.5vw, 45px); width : 100%; } .pg_page, .pg_current { display : inline-block; padding : 0 10px; height : 32px; color : #333; letter-spacing : 0; line-height : 30px; vertical-align : middle; border : 1px solid #ddd; background : #fff; } .pg a:hover { background : #e8e8e8; } .pg a:focus, .fz_wrap .pg a:hover { text-decoration : none; } .pg_page { text-decoration : none; } .pg_current { display : inline-block; margin : 0 0 0 0; background : #888; color : #fff; font-weight : normal; border : 1px solid #888; } .pg .fa { font-size : 14px; } .pg_end { background : url(./img/button/btn_end.gif) no-repeat 50% 50% #fff; } .pg_end:hover { background : url(./img/button/btn_end.gif) no-repeat 50% 50% #e8e8e8 !important; } .pg_start { background : url(./img/button/btn_first.gif) no-repeat 50% 50% #fff; } .pg_start:hover { background : url(./img/button/btn_first.gif) no-repeat 50% 50% #e8e8e8 !important; } .sound_only { display : none; } /* A A A : A : A : A : */ /* 리스트 상세내용 CSS */ #transferListDetail { width : 100%; height : auto; text-align : center; margin : clamp(20px,5vw,60px) 0;} #transferListDetail .sectionWrap { width : 100%; height : auto; max-width : 1500px; display : inline-block; } #transferListDetail .bussinessCate { font-size : 14px; font-weight : 600; } #transferListDetail .bussinessCate span { font-size : 14px; } #transferListDetail .bussinessCate:last-child { margin-bottom : 10px;} .recommendWrap { width : 100%; height : auto; display : flex; margin-bottom : clamp(5px, 1vw, 10px); justify-content : flex-start; } .recommendWrap p { font-size : clamp(12px, 2vw, 15px); color : #fff; display : inline-block; margin : 0 clamp(2px, 0.3vw, 4px) 4px clamp(2px, 0.3vw, 4px); line-height : 1em; border-radius : 5px; padding : 0.5em 1.3em; } .recommendWrap p.recommend { background : #3e6bd2; } .recommendWrap p.popular { background : #ca7418; } .recommendWrap p.emergency { background : #980000; } .recommendWrap p.new { background : #00c6ff; } .detailBoxWrap { width : 100%; height : auto; margin-bottom : clamp(30px,5vw,50px); border-top : 1px solid #666; } .check_lastchild { margin-bottom : 0; } .prg_last_margin { margin-bottom : clamp(30px,5vw,60px); } .detailbox4Wrap { margin-bottom : clamp(20px,5vw,40px);} .detailBox { width : 100%; height : auto; display : flex; align-items : stretch; flex-wrap : wrap; } .detailBox_contentWrap { width : calc(100% / 3); height : auto; display : flex; align-items : stretch; justify-content : center; border-bottom : 1px solid #ccc; } .detailBox_name { width : 50%; height : auto; background : #fafafa; font-size : clamp(13px,2vw,19px); font-weight : 400; color : #333; border-right : 1px solid #ccc; padding : clamp(8px,2vw,10px) 0; display : flex; justify-content : center; align-items : center; word-break : keep-all; flex-wrap : wrap; } .detailBox_value { width : 50%; height : auto; font-size : clamp(11px,2vw,17px); color : #666; padding : clamp(8px,2vw,10px) 0; border-right : 1px solid #ccc; display : flex; justify-content : center; align-items : center; word-break : keep-all; } .detailBox_value .colorRed { color : #ff0000; display : inline-block; position : relative; width : auto; font-weight : 500; font-size : clamp(11px,2vw,17px); } .detailBoxWrap .detailBox_contentWrap:nth-child(3n) .detailBox_value { border-right : none; } .detailBox_contentWrap.remarkWrap { width : 100%; justify-content : flex-start; } .detailBox_contentWrap.remarkWrap .detailBox_name { width : 16.667%; } .remarkContWrap { display : flex; flex-direction : column; flex-grow : 1; } .remarkContWrap .detailBox_value { width : 100%; justify-content : flex-start; align-items : center; padding : 0 0 0 clamp(10px,2vw,15px); border-right : none; line-height : 1.8em; } .remarkContWrap .detailBox_value:first-child { padding-top : clamp(8px,2vw,10px); } .remarkContWrap .detailBox_value:last-child { padding-bottom : clamp(8px,2vw,10px); } .detailbox3Wrap { overflow-x : scroll; } .detailbox3Wrap::-webkit-scrollbar { height : 8px; margin-top : 5px; } .detailbox3Wrap::-webkit-scrollbar-thumb { background : #919191; border-radius : 5px; } .detailbox3Wrap::-webkit-scrollbar-thumb:hover { background : #b5b5b5; } .detailBox3 { width : 1500px; } .detailBox_nameBox, .detailBox_valueBox { border-bottom : 1px solid #ccc; } .detailBox_name3 { display : flex; } .detailBox_name3 p { width : 100%; word-break : break-word; } .detailBox_name3:nth-child(11n) p { border-right : none; } .detailBox_name3_1 { width : 13%; } .detailBox_nameCommon { width : 8.7%; } .onlyPrint { display : none;} .popupBtnWrap { flex-grow : 1; display : flex; justify-content : flex-end; } .popupBtn { font-size : clamp(12px,2vw,15px); color : #fff; background : #817f7f; padding : 0.75em 1.5em; line-height : 1em; cursor : pointer; border : 1px solid #817f7f; transition : .4s; } .popupBtn:hover { background : #fff; color : #817f7f; transition : .4s; } .detailBox_nameCommon:last-child .detailBox_name ,.detailBox_nameCommon:last-child .detailBox_value { border-right : 0px; } /* A A A : A : A : A : */ /* 버튼 */ .buttonWrap { width : 100%; height : auto; display : flex; justify-content : space-between; align-items : center; flex-wrap : wrap; } .btnsWrap { width : auto; height : auto; display : flex; justify-content : flex-end; } .btnsBtn { width : clamp(85px,10vw,140px); height : auto; display : flex; align-items : center; justify-content : center; font-size : clamp(13px,2vw,16px); line-height : 1em; padding : 0.8em 0; transition : .4s; cursor : pointer; margin-right : clamp(6px,2vw,8px); } .btnsBtn img { width : clamp(17px,2vw,24px); height : auto; margin-right : clamp(3px,2vw,5px); } .delBtn { background : #980000; color : #fff; border : 1px solid #980000; } .delBtn:hover { background : #98000080; transition : .4s; border : 1px solid #98000080; } .kakaoBtn { background : #ffcc00; color : #3a1c1a; border : 1px solid #ffcc00; margin-left : clamp(6px,2vw,8px); } .kakaoBtn:hover { background : #ffcc0050; transition : .4s; border : 1px solid #ffcc0050; } .writeBtn { background : #17469e; color : #fff; border : 1px solid #17469e; margin-left : clamp(6px,2vw,8px); } .writeBtn:hover { background : #17469e50; color : #17469e; border : 1px solid #17469e50; transition : .4s; } .returnBtn { background : #817f7f; color : #fff; border : 1px solid #817f7f; } .returnBtn:hover { background : #817f7f50; color : #817f7f; border : 1px solid #817f7f50; transition : .4s; } /* 팝업창 */ /* A A A : A : A : A : */ .popupBoxBack{ width : 100%; height : 100vh; position : fixed; top : 50%; left : 50%; transform : translate(-50%,-50%); background : #000000a6; z-index : 100; display : none; justify-content : center; align-items : center; } .popupBoxBack.on { display : flex; } .popupPositionWrap { width : 80%; height : auto; position : relative; box-shadow : 0px 0px 10px 0px #000;} .popupBox { width : 100%; height : 60vh; background : #fff; position : relative; overflow-y : scroll; padding : 0 clamp(5px,2vw,10px); } .popupBox::-webkit-scrollbar { width : 10px; height : 10px; } .popupBox::-webkit-scrollbar-thumb { background : #919191; border-radius : 5px; background-clip: padding-box; } .popupBox::-webkit-scrollbar-thumb:hover { background : #b5b5b5; } .popupBox::-webkit-scrollbar-track { border-radius : 100px; } .popupTitBox { width : 100%; height : auto; background : #17469e; position : sticky; top : 0; left : 0; } .popupTitBox p { font-size : clamp(18px,2vw,28px); color : #fff; font-weight : 500; padding : 0.6em; } .popupTitBox p span { font-size : clamp(14px,1.5vw,20px); color : #fff; font-weight : 400; } .popupCloseBtn { position : absolute; bottom : 115%; right : 0; cursor : pointer; } .popupCloseBtn svg { font-size : clamp(20px,2vw,28px); color : #fff; } #transferListDetail .popupWrap { width : 100%; height : auto; padding : clamp(20px,2vw,40px) 0; max-width : 1400px; margin : 0 auto; } .popupOffWrap { width : 100%; height : 100%; position : absolute; top : 0; left : 0; } .calcInfo { width : 1400px; height : auto; background : #EFEFEF; padding : clamp(10px,2vw,20px) 0;} .calcInfo p { font-size : clamp(13px,2vw,16px); color : #555; } .calcInfo p span { font-size : inherit; font-weight : 500; } .popupTableWrap { width : 100%; height : auto; margin-top : clamp(10px,2vw,20px); } .popupTable { width : 1400px; height : auto; display : grid; border-top : 2px solid #333; grid-auto-columns : 1fr; grid-auto-rows : minmax(45px, auto); } .tableNameBox { background : #F1F1F1; border-right : 1px solid #ddd; display : flex; align-items : center; justify-content : center; border-bottom : 1px solid #ddd; } .tableNameBox p { font-size : clamp(11px,2vw,15px); color : #333;} .tableNameBoxWrap { width : 100%; height : 100%; display : flex; flex-wrap : wrap; align-items : stretch; justify-content : center; } .tableNameBoxWrap p { width : calc(100% / 3); border-right : 1px solid #ddd; display : flex; justify-content : center; align-items : center; } .tableNameBoxWrap p:nth-child(1) { width : 100%; border-bottom : 1px solid #ddd; border-right : none; } .tableNameBoxWrap p:last-child { border-right : none; } .tableValueBox { border-right : 1px solid #ddd; display : flex; align-items : center; justify-content : center; border-bottom : 1px solid #ddd; padding : clamp(8px,2vw,10px) 0; } .tableValueBox p { font-size : clamp(11px,2vw,15px); color : #333; } .tableValueBoxWrap { width : 100%; height : 100%; display : flex; flex-wrap : wrap; align-items : stretch; justify-content : center; } .tableValueBoxWrap p { width : calc(100% / 3); border-right : 1px solid #ddd; display : flex; justify-content : center; align-items : center; } .tableValueBoxWrap.tableValueBoxWrap_15 .tableValue_15_2, .tableValueBoxWrap.tableValueBoxWrap_40 .tableValue_40_2 { width : calc((100% / 3) * 2); } .tableValueBoxWrap p:last-child { border-right : none; } /* row 설정 */ .tableNameBox_1, .tableNameBox_2, .tableNameBox_3, .tableNameBox_4, .tableNameBox_5, .tableNameBox_6 { grid-row : 1 / 3;} .tableValueBox_1 { grid-row : 3 / 11;} .tableValueBox_8, .tableValueBox_9 { grid-row : 4 / 11;} .tableValueBox_18, .tableValueBox_19, .tableValueBox_20 { grid-row : 7 / 9;} .tableValueBox_21, .tableValueBox_22, .tableValueBox_23 { grid-row : 9 / 11;} .tableValueBox_24 { grid-row : 11 / 19;} .tableValueBox_36, .tableValueBox_37 { grid-row : 13 / 19;} .tableValueBox_46, .tableValueBox_47, .tableValueBox_48 { grid-row : 16 / 18;} /* column 설정 */ .tableNameBox_1, .tableValueBox_1, .tableValueBox_24 { grid-column : 1 / 3; } .tableNameBox_2, .tableValueBox_2, .tableValueBox_7, .tableValueBox_12, .tableValueBox_15, .tableValueBox_18, .tableValueBox_21, .tableValueBox_25, .tableValueBox_30, .tableValueBox_35, .tableValueBox_40, .tableValueBox_43, .tableValueBox_46, .tableValueBox_49 { grid-column : 3 / 7; padding : 0;} .tableNameBox_3, .tableValueBox_3, .tableValueBox_8, .tableValueBox_26, .tableValueBox_31, .tableValueBox_36 { grid-column : 7 / 9;} .tableNameBox_4, .tableValueBox_4, .tableValueBox_9, .tableValueBox_27, .tableValueBox_32, .tableValueBox_37 { grid-column : 9 / 11;} .tableNameBox_5, .tableValueBox_5, .tableValueBox_10, .tableValueBox_13, .tableValueBox_16, .tableValueBox_19, .tableValueBox_22, .tableValueBox_28, .tableValueBox_33, .tableValueBox_38, .tableValueBox_41, .tableValueBox_44, .tableValueBox_47, .tableValueBox_50 { grid-column : 11 / 14;} .tableNameBox_6, .tableValueBox_6, .tableValueBox_11, .tableValueBox_14, .tableValueBox_17, .tableValueBox_20, .tableValueBox_23, .tableValueBox_29, .tableValueBox_34, .tableValueBox_39, .tableValueBox_42, .tableValueBox_45, .tableValueBox_48, .tableValueBox_51 { grid-column : 14 / 16; border-right : none;} /* A A A : A : A : A : */ /* 전체 실적 팝업*/ .noOverflow { overflow : unset; } .popupHeight { height : 100%; display : flex; flex-direction : column; justify-content : space-between; align-items : center; } .overflowWrap{ width : 100%; height : 85%; overflow : scroll; } .overflowWrap::-webkit-scrollbar { width : 10px; height : 10px; margin-top : 5px; } .overflowWrap::-webkit-scrollbar-thumb { background : #919191; border-radius : 5px; } .overflowWrap::-webkit-scrollbar-thumb:hover { background : #b5b5b5; } .overflowWrap::-webkit-scrollbar-track { border-radius : 100px; } .tableNameWrap { margin-top : clamp(15px,2vw,25px); } .tableNameWrap:first-child { margin-top : 0; border-top : 2px solid #666; } .tableNameWrap, .tableValueWrap { width : 1380px; display : flex; } .tableNameBox_B, .tableValueBox_B { width : calc(100% / 6); padding : 0; } .tableNameBox_B:last-child, .tableValueBox_B:last-child { border-right : none; } .tableName_B, .tableValue_B { padding : clamp(8px,2vw,10px) 0; } .tableNameBox_B { border-top : 1px solid #ddd; } .lastWrap { display : flex; flex-direction : column; position : relative; margin-top : clamp(15px,2vw,25px); } .lastWrap .tableNameWrap { border-top : none; } .lastWrap .tableNameBox_B { border-top : 2px solid #666; } .printBtnWrap { width : auto; background : #17469e; cursor : pointer; font-size : clamp(14px,2vw,16px); color : #fff; padding : 1em 1.5em; line-height : 1em; border : 1px solid #17469e; display : inline-block; margin-top : clamp(10px,2vw,15px); transition : .4s; } .printBtnWrap:hover { background : #fff; color : #17469e; transition : .4s; } .popupOffWrap { width : 100%; height : 100%; position : absolute; top : 0; left : 0; } @media (min-width:641px) and (max-width:1500px){ /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #transferList .sectionPaddingWrap { padding : 0 20px;} } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ /* 체크박스 Wrap */ .transferCheckListBox { flex-direction : column;} .transferCheckListTit { width : 100%; border-right : none; background : #fafafa; justify-content : flex-start; padding : clamp(16px,2vw,20px); margin-right : 0; } .transferCheckListContBox { width : 100%; padding : clamp(16px,2vw,20px) 0 clamp(16px,2vw,20px) clamp(18px,2vw,22px); } .transferCheckListContBox.width .labelWrap { width : auto; display : inline-flex; margin-right : clamp(30px,8vw,50px); } .transferCheckListContBox.width .labelWrap:last-child { margin-right : 0; } .labelFullWrap { text-align : left; } .labelFullWrap .transferChkLabel { display : inline-flex; } .labelBigWrap { width : 50%; flex-wrap : wrap; padding-top : 7px; } .BigWrapTit { width : 100%; } .searchInWrap { width : auto; flex-wrap : wrap; justify-content : center; display : inline-block; } .radioLabel { width : 100%; justify-content : flex-start; margin-bottom : clamp(8px,2vw,10px); } .searchLabel { margin-right : clamp(5px,2vw,8px); } .detailBox3 { width : 1200px; } .searchBtnLabel { width : 50%; margin : 0 auto; margin-top : 5px; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #transferList { margin-top : 0; } .recommendWrap { justify-content : center; } #transferList .sectionPaddingWrap /* { padding : 0 10px; } */ /* 체크박스 Wrap */ .transferCheckBoxWrap { border-top : none; } .transferCheckBoxWrap .transferCheckListBox { flex-direction : column; border-left : none; border-right : none; border-bottom : none; margin-bottom : 2px; } .transferCheckBoxWrap .transferCheckListBox .transferCheckListTit { width : 100%; border-right : none; background : #1ba33d; justify-content : space-between; padding : clamp(12px,2vw,18px); color : #fff; margin-right : 0; cursor : pointer; } .transferCheckBoxWrap .transferCheckListBox .transferCheckListTit::after { content : "▼"; font-size : clamp(14px,2vw,16px); color : #fff; transition : .4s; } .transferCheckBoxWrap .transferCheckListBox.active .transferCheckListTit::after { content : "▼"; font-size : clamp(14px,2vw,16px); color : #fff; transform : rotate(180deg); transition : .4s;} .transferCheckListContBox { width : 100%; height : auto; padding : 0; display : inline-block; overflow : hidden; transition : .7s; padding : 0 0 0 clamp(16px,2vw,20px); text-align : left; border-left : 1px solid #ddd; border-right : 1px solid #ddd; max-height : 0px; } .labelWrap { width : calc(98% / 2); display : inline-block; } .labelWrap .transferChkLabel { line-height : 2.5em; display : inline-flex; } .transferCheckBoxWrap .transferCheckListBox .transferCheckListContBox .labelWrap:first-child { padding-top : 10px; } .transferCheckBoxWrap .transferCheckListBox .transferCheckListContBox .labelWrap:last-child { padding-bottom : 10px; } .labelBigWrap { width : 100%; flex-wrap : wrap; padding-left : 25px; } .labelFullWrap { padding-top : 10px; text-align : left; } .labelBigWrap { padding-bottom : 7px; padding-top : 0;} .transferCheckBoxWrap .transferCheckListBox .transferCheckListContBox .labelBigWrap:last-child { padding-bottom : 10px; } .labelFullWrap .transferChkLabel { display : inline-flex; } .BigWrapTit { width : 100%; } .searchWrap { padding : clamp(18px,2vw,25px) 0; text-align : center; } .searchInWrap { width : auto; display : inline-block; } .radioLabel { width : auto; justify-content : flex-start; margin-bottom : clamp(4px,2vw,4px); } .searchLabel { margin-right : clamp(5px,2vw,8px);margin-bottom : clamp(12px,2vw,15px); margin-top : clamp(12px,2vw,15px); } .searchBtnLabel { margin : 0 auto; } /* 리스트 Wrap */ .transferListWrap .transferListBoxWrap { width : 1100px; } .transferListWrap .transferListBoxWrap .transferListContBoxWrap .transferListContBox .good { font-size : 10px; padding : 0.5em; } .bbs_naviWrap .bbs_naviWrap_inner { flex-direction : column; align-items : flex-start; } .bbs_naviWrap .bbs_naviWrap_inner .adm_menu_right { margin-top : 8px; } /* A A A : A : A : A : */ /* 리스트 상세내용 CSS */ .detailBox1 { border-top : none; } .detailBox_contentWrap { width : calc(100% / 2); } .detailBox_name { width : 45%; } .detailBox_value { width : 65%; } .detailBox_contentWrap.full { width : 100%; justify-content : flex-start; } .detailBox1_contentWrap.full { border-top : 1px solid #666; } .detailbox1Wrap .detailBox1 .detailBox1_contentWrap:nth-child(3n) .detailBox1_value { border-right : none; } .detailbox2Wrap .detailBox2 div:last-of-type { border-bottom : none; } .detailbox2Wrap .detailBox2 .detailBox2_contentWrap:nth-child(2n) .detailBox2_value { border-right : none; } .detailBox_contentWrap.full .detailBox_name { width : 20.465%; } .detailBox_contentWrap.full .detailBox_value { width : auto; border-right : none; flex-grow : 1; } .detailBox_contentWrap.bottomX { border-bottom : none; } .mobileVerContWrap { width : auto; border-bottom : 0px; } .mobileVerContWrap2 { width : auto; flex-grow : 1; justify-content : flex-end; } .mobileVerContWrap .detailBox_name { background : none; width : auto; border-right : none; padding : 5px 0; } .mobileVerContWrap .detailBox_value { border-right : none; width : auto; margin-left : 3px; padding : 0; line-height : 1em; } .detailBoxWrap .detailBox_contentWrap:nth-child(3) .detailBox_value { border-right : 1px solid #ccc; } .detailBox4 .detailBox4_contentWrap:nth-child(2n) .detailBox_value { border-right : none; } .detailBox_contentWrap.remarkWrap { border-top : 1px solid #ccc; flex-wrap : wrap; } .detailBox_contentWrap.remarkWrap .detailBox_name { width : 100%; border-right : none; border-bottom : 1px solid #ccc; } .remarkContWrap .detailBox_value { padding : 0 0 0 0; } .centerWrap { width : auto; display : inline-block; } .remarkContWrap { display : inline-block; padding-left : 7px; text-align : left; } .detailBox3 { width : 850px; } .popupBtn { padding : 0.5em;} /* 버튼 */ .btnsWrap { justify-content : center; margin-top : 5px; } /* popup */ .popupPositionWrap { width : 90%; } .popupTable, .calcInfo { width : 900px;} .popupTable { grid-auto-rows : minmax(30px, auto);} .mobileX { display : none;} .printSpan { display : none;} /* 전체실적 팝업 */ .tableNameWrap, .tableValueWrap { width : 620px; } .overflowWrap::-webkit-scrollbar { width : 5px; height : 5px;} } @media print { @page { margin: 0; } body { margin: 1.6cm; } .printSpan { display:none;"} .page-break { page-break-before:always; page-break-after:auto; }}