@import url("/common/css/basic.css"); @import url("/common/css/board.css"); /*------------------------------------------------- Author : sehyun oh Create date : 2020. 10. 29. -------------------------------------------------*/ /* 레이아웃 */ #wrap {width: 100%; background-color: #fff; overflow: hidden;} .container {margin: 0 auto; width: 100%; max-width: 1400px;} .container:after {clear: both; display: block; width: 100%; content: "";} /* ############## HEADER ############## */ #header > .container { position:relative; margin-top:1.5rem; } #header h1 {float: left;} #header h1 a {display: block; width:111px; height:44px; color: transparent; background: url("/images/search/search/logo.png") no-repeat left top; background-size: 100% 100%; overflow: hidden;} /* 상단 검색 */ #header .search { position:absolute; top:0; left:14.45rem; width:auto; height:auto; } #header .search .search_wrap { position:relative; } #header .search .search_wrap:after { content:""; display:block; clear:both; } #header .search .search_left { float:left; position:relative; height:2.3rem; } #header .search .inp_txt { width:25rem; height:100%; padding-left:0.5rem; padding-right:2.5rem; border:3px solid #365a99; } #header .search .btn_search { float:left; width:4rem; height:2.3rem; margin-left:0.25rem; padding:0; border:0; background-color:#365a99; line-height:2.3rem; font-family:inherit; font-size:0.75rem; color:#fff; cursor:pointer; } #header .search .btn_deSearch { float:left; width:4rem; height:2.3rem; padding:0; background-color:#464646; line-height:2.3rem; font-family:inherit; font-size:0.75rem; color:#fff; } #header .search .btn_reSearch { float:left; margin-top:0.75rem; margin-left:1rem; font-size:0.7rem; color:#222; } #header .search .btn_reSearch input { margin-top:0; margin-right:0.25rem; cursor:pointer; } #header .search .btn_reSearch label { cursor:pointer; } #header .search #openKeyBoard { display:block; position:absolute; top:0.7rem; right:1rem; } #header .search .total_list_wrap { display:block; position:absolute; top:0; right:0; width:100%; height:100%; text-align:right; } #header .search .total_list_wrap .btn_totalSearch { position:relative; width:2.3rem; height:100%; padding:0; } #header .search .total_list_wrap .btn_totalSearch:before { content:""; display:block; position:absolute; top:0; bottom:0; left:0; right:0; width:20px; height:10px; margin:auto; background:url("/images/search/search/search_arr.png") no-repeat; transition:all 0.2s; } #header .search .total_list_wrap .btn_totalSearch.on:before { -ms-transform:rotate(180deg); transform:rotate(180deg); } #header .search .total_list_wrap ul { display:none; position:absolute; top:2.2rem; right:0; z-index:1; width:100%; height:auto; padding:0.2rem 0; border:2px solid #365a99; background-color:#fff; } #header .search .total_list_wrap ul li a { display:block; padding:0.4rem; text-align:left; } /* 키보드 플러그인 #header .search .ntsKB { width:100%; } #header .search .ntsKB>.keyBody { width:auto; margin:0 1rem 0.75rem; } */ /* 상단 검색 탭 */ #header .header_bottom { margin-top:1.35rem; } #header .header_bottom .top_list { background-color:#004a8f; height:50px; } #header .header_bottom .top_list > .container { max-width:820px; padding:0; } #header .header_bottom .top_list .inner { position:relative; padding-left:9.2rem; } #header .header_bottom .top_list h2 { display:block; position:absolute; top:0; left:0; width:9.2rem; height:2.65rem; background-color:#1b76ca; font-size:0.85rem; line-height:2.65rem; text-align:center; color:#fff; } #header .header_bottom .top_list ul { overflow:hidden; } #header .header_bottom .top_list ul li { float:left; } #header .header_bottom .top_list ul li a { display:block; height:2.65rem; padding:0 1.6rem; font-size:0.85rem; line-height:2.65rem; color:#fff; } #header .header_bottom .bottom_list { border-top:1px solid #c5c5c5; background-color:#ebf1f6; } #header .header_bottom .bottom_list > .container { position:relative; max-width:820px; padding-left:7rem; } #header .header_bottom .bottom_list h2 { display:block; position:absolute; top:0; left:0; width:7rem; height:2.65rem; font-weight:700; font-size:0.85rem; line-height:2.65rem; color:#00386d; } #header .header_bottom .bottom_list h2 span { display:block; position:relative; background:url("/images/search/search/detail_search_line.png") no-repeat 100% 50%; } #header .header_bottom .bottom_list h2 span:before { content:""; display:inline-block; width:22px; height:17px; margin-right:0.5rem; background:url("/images/search/search/detail_search_bu.png") no-repeat; } #header .header_bottom .bottom_list > .container > ul:after { content:""; display:block; clear:both; } #header .header_bottom .bottom_list > .container > ul > li { float:left; position:relative; width:8rem; } #header .header_bottom .bottom_list > .container > ul > li > button { display:block; position:relative; width:100%; height:2.65rem; padding:0 1rem; background:url("/images/search/search/detail_search_line.png") no-repeat 100% 50%; font-size:0.75rem; line-height:2.65rem; color:#000; text-align:left; } #header .header_bottom .bottom_list > .container > ul > li > button:focus, #header .header_bottom .bottom_list > .container > ul > li > button:active { outline:0; } #header .header_bottom .bottom_list > .container > ul > li > button:before { content:""; display:block; position:absolute; top:0; bottom:0; right:0.6rem; width:10px; height:6px; margin:auto 0; background:url("/images/search/search/detail_search_arr.png") no-repeat; transition:all 0.2s; } #header .header_bottom .bottom_list > .container > ul > li > button.on:before { -ms-transform:rotate(180deg); transform:rotate(180deg); } #header .header_bottom .bottom_list > .container > ul > li > button ~ ul { display:none; position:absolute; top:2.65rem; left:0; z-index:1; width:100%; height:auto; padding:0.6rem; border:1px solid #1b76ca; background-color:#fff; } #header .header_bottom .bottom_list > .container > ul > li > button ~ ul li a { display:block; padding:0.3rem; } #header .header_bottom .bottom_list > .container > ul > li > button ~ ul li a.date-picker-control { display:inline-block; margin-left:4%; margin-right:0; padding:0; } /* 201125, 개발자 PC에서 추가 */ #header .header_bottom .bottom_list > .container > ul > li > button ~ ul li a:hover { text-decoration:underline; } #header .header_bottom .bottom_list > .container > ul > li > button ~ ul li.on a { font-weight:700; color:#00386d; text-decoration:underline; } #header .header_bottom .bottom_list .select_date p { margin-top:0.5rem; margin-bottom:0.5em; padding-top:0.5rem; border-top:1px solid #ccc; } #header .header_bottom .bottom_list .select_date input[type="text"] { display:inline-block; width:80%; height:1.5rem; margin-bottom:0.3rem; padding:0 0.5rem; border-radius:0; border:1px solid #ccc; line-height:1.5rem; vertical-align:middle; } /* 201125, 개발자 PC에서 직접 수정 */ #header .header_bottom .bottom_list .select_date .btn_apply { display:block; width:100%; height:1.5rem; padding:0; background:#1b76ca; line-height:1.5rem; color:#fff; text-align:center; } #header .header_bottom .bottom_list .select_method label { display:block; font-size:0.7rem; cursor:pointer; } #header .header_bottom .bottom_list .select_method label input { cursor:pointer; } #header .header_bottom .bottom_list .select_method input[type="text"] { display:block; width:100%; height:1.5rem; margin-top:0.3rem; margin-bottom:0.3rem; padding:0 0.5rem; border-radius:0; border:1px solid #ccc; line-height:1.5rem; } #header .header_bottom .bottom_list .select_method button { display:block; width:100%; height:1.5rem; padding:0; line-height:1.5rem; color:#fff; text-align:center; } #header .header_bottom .bottom_list .select_method .btn_apply { background-color:#1b76ca;} #header .header_bottom .bottom_list .select_method .btn_reset { margin-top:0.3rem; background-color:#333; } #header .header_bottom .bottom_list .select_field label { display:block; margin-bottom:0.3rem; font-size:0.7rem; cursor:pointer; } #header .header_bottom .bottom_list .select_field .btn_apply { display:block; width:100%; height:1.5rem; padding:0; background:#1b76ca; line-height:1.5rem; color:#fff; text-align:center; } #header .header_bottom .result_desc { height:3.25rem; border-top:1px solid #c5c5c5; border-bottom:1px solid #c5c5c5; } #header .header_bottom .result_desc > .container { display:table; max-width:820px; height:100%; table-layout:fixed; text-align:center; } #header .header_bottom .result_desc p { display:table-cell; width:100%; font-size:0.95rem; letter-spacing:-0.05em; line-height:1.2; color:#333; word-break:keep-all; word-wrap:break-word; vertical-align:middle; } #header .header_bottom .result_desc p strong { font-weight:700; color:#ef212f; } #header .header_bottom .result_desc p em { color:#004a8f; } /* ############## BODY ############## */ /* #body { padding-top:1rem; } */ /* 검색메뉴 */ #body .left_area { float:left; width:12.5rem; margin-bottom:2rem;} #gnb > ul { overflow:hidden; } #gnb > ul > li > a { display:block; position:relative; padding:0.85rem 2rem 0.85rem 1rem; font-size:0.9rem; line-height:25px; letter-spacing:-0.05em; color:#222; border:1px solid #d2d2d2; background-color:#f2f3f4; transition:all 0.1s ease; } #gnb > ul > li:first-child a { border-top:0; } #gnb > ul > li:not(:first-child) > a { border-top:0; } /* 201117 추가 */ #gnb > ul > li:not(.child).on > a, #gnb > ul > li:not(.child).on > a:hover { border:1px solid #0d3963; border-top:0; background-color:#0d3963; font-weight:700; color:#fff; text-decoration:none; } /* #gnb > ul > li.child > a:before { content:""; display:block; position:absolute; top:0; bottom:0; right:1em; width:15px; height:9px; margin:auto 0; background:url("/images/search/search/search_menu_arr.png") no-repeat; transition:all 0.2s; } */ #gnb > ul > li.child > a:before, #gnb > ul > li.child > a:after { content:""; display:block; position:absolute; top:0; bottom:0; margin:auto 0; background-color:#828282; transition:all 0.2s; } #gnb > ul > li.child > a:before { right:1rem; width:16px; height:2px; } #gnb > ul > li.child > a:after { right:1.35rem; width:2px; height:16px; } #gnb > ul > li.child.on > a, #gnb > ul > li.child > a:hover, #gnb > ul > li.child > a:focus { background-color:#fff; text-decoration:none; } /* #gnb > ul > li.child.on > a:before { -ms-transform:rotate(180deg); transform:rotate(180deg); } */ #gnb > ul > li.child.on > a:after { display:none; } #gnb .search_dep02 { display:none; padding:0.75rem 1.25rem; border:1px solid #d2d2d2; border-top:0; background-color:#f3f9fe; } #gnb .search_dep02 > li { position:relative; padding-left:0.5rem; } #gnb .search_dep02 > li:before { content:""; display:block; position:absolute; top:0.3rem; left:0; width:4px; height:4px; background-color:#1b76ca; } #gnb .search_dep02 > li ~ li { margin-top:0.75rem; } #gnb .search_dep02 > li > a { display:block; font-size:0.75rem; color:#333; } #gnb .search_dep02 > li.on > a, #gnb .search_dep02 > li > a:hover { color:#043763; text-decoration:underline; } /* 검색 결과 영역 */ #body { min-height:20rem; } #body .middle_area { float:left; width:calc(100% - 25.25rem); padding-top:1rem; padding-left:2rem; padding-right:2rem; } #body .search_result { padding-right:2rem; border-right:1px solid #e6e6e6; } #body .search_result > .result_tit { display:block; font-size:1.1rem; font-weight:700; letter-spacing:-0.05em; color:#222; } #body .search_result > .result_tit em { font-size:0.95rem; } #body .search_result > .result_tit em span { color:#265c98; } /* 201117 수정 및 추가 */ #body .search_result .tab { margin-top:0.5rem; margin-bottom:2rem; padding:0.25rem; background:url("/images/search/search/search_result_tab_bg.png") repeat; } #body .search_result .tab .inner { padding:0.75rem 0.75rem calc(0.75rem - 0.7rem); background-color:#fff; } #body .search_result .tab .inner li { position:relative; } #body .search_result .tab .inner li:before { content:""; display:block; position:absolute; top:0.55rem; left:0; width:3px; height:3px; background-color:#6b6b6b; } #body .search_result .tab .inner li a { font-size:0.8rem; line-height:1.5; color:#000; word-break:keep-all; word-wrap:break-word; } #body .search_result .tab .inner > ul { font-size:0; line-height:0; } #body .search_result .tab .inner > ul > li { margin-bottom:0.5rem; padding-left:0.5rem; vertical-align:top; } #body .search_result .tab .inner > ul > li > a { display:block; margin-right:1rem; } #body .search_result .tab .inner > ul > li > a span { display:block; } #body .search_result .tab .inner > ul > li > a:hover { text-decoration:underline; } #body .search_result .tab .inner > ul > li > ul { font-size:0; line-height:0; margin-top:0.25rem; padding-top:0.25rem; border-top:1px dotted #ccc; } #body .search_result .tab .inner > ul > li > ul > li { display:inline-block; margin-right:0.5rem; margin-bottom:0.2rem; padding-left:0.5rem; vertical-align:top; } #body .search_result .tab .inner > ul > li > ul > li:before { top:0.45rem; } #body .search_result .tab .inner > ul > li > ul > li > a { font-size:0.75rem; line-height:1.5; } #body .search_result .tab .inner > ul > li > ul > li > a:hover { text-decoration:underline; } /* //201117 수정 및 추가 */ #body .search_result .list_wrap > li { position:relative; margin-bottom:2rem; letter-spacing:-0.05em; } #body .search_result .list_wrap > li .tit_box { padding-bottom:1rem; border-bottom:1px solid #a6a6a6; } #body .search_result .list_wrap > li .result_tit { display:block; font-size:0.96rem; letter-spacing:-0.05em; line-height:1.2; color:#333; } #body .search_result .list_wrap > li .result_tit > span { color:#004a8f; } #body .search_result .list_wrap > li .result_tit > em { font-size:0.95rem; vertical-align:bottom; } #body .search_result .list_wrap > li .result_tit > em span { color:#004a8f; } #body .search_result .list_wrap > li > ul { margin-top:1rem; } #body .search_result .list_wrap > li > ul > li { margin-bottom:1rem; padding-bottom:1.5rem; border-bottom:1px dashed #b7b7b7; } #body .search_result .list_wrap > li > ul > li .tit { display:inline-block; } #body .search_result .list_wrap > li > ul > li .tit a { display:block; font-weight:700; font-size:0.8rem; line-height:1.4; color:#222; word-break:keep-all; word-wrap:break-word; } #body .search_result .list_wrap > li > ul > li .tit a:hover { text-decoration:underline; } #body .search_result .list_wrap > li > ul > li .tit a strong { font-weight:inherit; color:#ef212f; } #body .search_result .list_wrap > li > ul > li .date { display:inline-block; margin-left:0.25rem; font-size:0.7rem; font-weight:400; color:#777; } #body .search_result .list_wrap > li > ul > li .category { margin:0.5rem 0; font-size:0.7rem; line-height:1.4; color:#19892e; } #body .search_result .list_wrap > li > ul > li .txt { overflow:hidden; max-height:2.1rem; margin-top:0.5rem; font-size:0.7rem; line-height:1.5; color:#444; word-break:keep-all; word-wrap:break-word; } #body .search_result .list_wrap > li > ul > li .txt strong { font-weight:400; color:#ef212f; } #body .search_result .list_wrap > li > ul > li .download { margin-top:0.5rem; font-size:0.7rem; color:#444; } #body .search_result .list_wrap > li > ul > li .download a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; position:relative; padding-left:1.25rem; line-height:1.6; } #body .search_result .list_wrap > li > ul > li .download a ~ a { margin-top:0.25rem; } #body .search_result .list_wrap > li > ul > li .download a:hover { text-decoration:underline; } #body .search_result .list_wrap > li > ul > li .download a img { display:block; position:absolute; top:0; left:0; } #body .search_result .list_wrap > li > ul.type2 { margin-top:0; font-size:0; line-height:0; } #body .search_result .list_wrap > li > ul.type2 > li { display:inline-table; width:50%; height:2.7rem; margin-bottom:0; padding-bottom:0; vertical-align:top; table-layout:fixed; } #body .search_result .list_wrap > li > ul.type2 > li:only-child { width:100%; } #body .search_result .list_wrap > li > ul.type2 > li a { display:table-cell; position:relative; width:100%; padding:0.8rem 0.5rem 0.8rem 1rem; line-height:1.3; vertical-align:middle; } #body .search_result .list_wrap > li > ul.type2 > li:nth-child(odd) a:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; height: calc(100% - 1.2rem); margin: auto 0; border-left: 1px dashed #a8a8a8; } #body .search_result .list_wrap > li > ul.type2 > li:only-child a:before { display:none; } #body .search_result .list_wrap > li > ul.type2 > li a strong { display:inline-block; position:relative; margin-right:0.5rem; padding-left:0.5rem; font-size:0.85rem; font-weight:700; color:#333; } #body .search_result .list_wrap > li > ul.type2 > li a[target="_blank"] strong { padding-right:1rem; background:url("/images/search/search/search_new_window.png") no-repeat right 0.3rem; } #body .search_result .list_wrap > li > ul.type2 > li a:hover strong { text-decoration:underline; } #body .search_result .list_wrap > li > ul.type2 > li a strong:before { content:""; display:block; position:absolute; top:0.5rem; left:0; width:4px; height:4px; background-color:#aaa; } #body .search_result .list_wrap > li > ul.type2 > li a span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:0.75rem; color:#3a67b5; text-decoration:underline; } #body .search_result .list_wrap > li > ul.type3 > li { margin-bottom:0.7rem; padding-bottom:0.75rem; } #body .search_result .list_wrap > li > ul.type3 > li a { font-size:0.8rem; line-height:1.4; color:#222; word-break:keep-all; word-wrap:break-word; } #body .search_result .list_wrap > li > ul.type3 > li a:hover { text-decoration:underline; } #body .search_result .list_wrap > li > ul.type4 > li { position:relative; padding-right:8.5rem; } #body .search_result .list_wrap > li > ul.type4 > li .tit a { font-weight:400; color:#004a8f; } #body .search_result .list_wrap > li > ul.type4 > li .date { display:block; position:absolute; top:1.5rem; right:0; margin-left:0; margin-top:0; line-height:1.4; color:#444; text-align:center; } #body .search_result .list_wrap > li > ul.type4 > li .date span { display:block; } #body .search_result .list_wrap > li > ul.video_type1 > li { position:relative; padding-left:170px; } #body .search_result .list_wrap > li > ul.video_type1 > li .imgbox { display:block; position:absolute; top:0; left:0; width:150px; height:94px; } #body .search_result .list_wrap > li > ul.video_type1 > li .imgbox img { width:100%; height:100%; } #body .search_result .list_wrap > li > ul.video_type2 { overflow:hidden; } #body .search_result .list_wrap > li > ul.video_type2 > li { float:left; position:relative; width:19rem; height:4.5rem; padding-left:150px; padding-bottom:0; border:1px solid #a0aab3; } #body .search_result .list_wrap > li > ul.video_type2 > li:nth-child(even) { float:right; } #body .search_result .list_wrap > li > ul.video_type2 > li a { display:table; width:100%; height:100%; table-layout:fixed; } #body .search_result .list_wrap > li > ul.video_type2 > li .imgbox { display:block; position:absolute; top:0; bottom:0; left:0.8rem; width:120px; height:65px; margin:auto 0; } #body .search_result .list_wrap > li > ul.video_type2 > li .imgbox:before { content:""; display:block; position:absolute; top:0; bottom:0; left:0; right:0; width:34px; height:34px; margin:auto; background:url("/images/search/search/search_video_ico.png") no-repeat; } #body .search_result .list_wrap > li > ul.video_type2 > li .imgbox img { width:100%; height:100%; } #body .search_result .list_wrap > li > ul.video_type2 > li .titbox { display:table-cell; width:100%; height:100%; padding-right:1rem; vertical-align:middle; } #body .search_result .list_wrap > li > ul.video_type2 > li .tit { display:block; overflow:hidden; max-height:2.2rem; font-size:0.85rem; color:#333; line-height:1.3; font-weight:700; } #body .search_result .list_wrap > li > ul.video_type2 > li a:hover .tit { text-decoration:underline; } #body .search_result .list_wrap > li > ul.video_type2 > li .tit span { line-height:1.4; } #body .search_result .list_wrap > li .btns { display:block; position:absolute; top:0; right:0; font-size:0; line-height:0; } #body .search_result .list_wrap > li .btns > a { vertical-align:middle; font-size:0.7rem; } #body .search_result .list_wrap > li .btns > a:not(.btn_more) { display:inline-block; overflow:hidden; position:relative; width:4.75rem; padding:0.75rem 0 0.75rem 0.5rem; border:1px solid #c3c3c3; background-color:#f2f3f4; color:#222; vertical-align:middle; } #body .search_result .list_wrap > li .btns > a ~ a { margin-left:0.25rem; } #body .search_result .list_wrap > li .btns > a:not(.btn_more).on { border-color:transparent; background-color:#004a8f; color:#fff; } #body .search_result .list_wrap > li .btns > a:not(.btn_more).on:hover { text-decoration:none; } #body .search_result .list_wrap > li .btns > a:not(.btn_more):before { content:""; display:block; position:absolute; top:0; bottom:0; right:0.5rem; width:10px; height:6px; margin:auto 0; background:url("/images/search/search/result_btn_recent_down.png") no-repeat; } #body .search_result .list_wrap > li .btns > a.on:before { background-image:url("/images/search/search/result_btn_matching_down.png"); } #body .search_result .list_wrap > li .btns .btn_more { display:inline-block; position:relative; margin-right:0.25rem; padding-right:1rem; line-height:1; } #body .search_result .list_wrap > li .btns .btn_more:before { content:""; display:block; position:absolute; top:0.05rem; bottom:0; right:0; width:12px; height:12px; margin:auto 0; background:url("/images/search/search/result_btn_more.png") no-repeat; } /* 대표 서브콘텐츠 버튼 유형 */ .btnBox {line-height: 1; overflow: hidden;} .btnBox .btn {float: left; display: inline-block; margin-left: 20px; padding: 14px 20px; width: 22rem; border: 1px solid #a0aab3;} .btnBox .btn:nth-of-type(2n+1) {margin-left: 0;} .btnBox .btn:nth-of-type(n+3) {margin-top: 20px;} .btnBox .btn a {float: left; display: block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .btnBox .btn strong {display: block; width: 100%; height: 30px; line-height: 30px; font-size: 0.85rem; font-weight: 700; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .btnBox .btn .view {width: 100%;} .btnBox .btn .view strong {position: relative; padding-right: 30px; background: url("/images/search/sub/btn_glass.png") no-repeat right center;} .btnBox .btn .down, .btnBox .btn .link {display: inline-block; padding-right: 25px; max-width: 100%; height: 30px; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; background: no-repeat right center; overflow: hidden;} .btnBox .btn .down {position: relative; padding-right: 80px; background-image: url("/images/search/sub/btn_down.png");} .btnBox .btn .link {background-image: url("/images/search/sub/r_i_btn_link.png");} .btnBox .btn .down em {position: absolute; top: 0; right: 20px; width: 55px;} .btnBox .btn img {margin-right: 0.5rem;} .btnBox .btn.video a {display: block; width: 100%; height: 100%; overflow: hidden;} .btnBox .btn.video span, .btnBox .btn.video strong {float: left; display: block; height: 60px;} .btnBox .btn.video span {position: relative; width: 120px; text-align: center; background: #eee;} .btnBox .btn.video span:after {position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -15px; width: 32px; height: 32px; background: url("/images/search/sub/after_video.png") no-repeat center center; content: "";} .btnBox .btn.video strong {padding-left: 1rem; width: calc(100% - 120px); height: 60px; line-height: 30px; white-space: normal;} .btnBox .btn.video img {margin-right: 0;} .btnBox .btn.video strong img {margin-left: 5px;} #body .search_result .list_wrap > li > .btnBox_wrap { overflow:hidden; margin-top:1rem; } #body .search_result .list_wrap > li > .btnBox_wrap .btn { float:left; width:19rem; height:4.5rem; margin-left:0; } #body .search_result .list_wrap > li > .btnBox_wrap .btn:nth-child(even) { float:right; } /* 검색어 탭 */ #body .right_area { float:right; width:12.75rem; margin-top:1rem; } #body .search_word h2 { font-size:0.8rem; font-weight:700; letter-spacing:-0.05em; color:#222; } #body .search_word .search_word_item ~ .search_word_item { margin-top:2rem; padding-top:0.5rem; border-top:1px solid #cecece; } #body .search_word .search_word_item ~ .search_word_item h2 { margin-bottom:1rem; } #body .search_word .tab { display:table; width:100%; margin:0.75rem 0; border-collapse:collapse; table-layout:fixed; } #body .search_word .tab > li { display:table-cell; border:1px solid #d2d2d2; vertical-align:top; } #body .search_word .tab > li a { display:block; height:1.9rem; background-color:#f5f8fa; font-size:0.7rem; line-height:1.9rem; color:#222; text-align:center; } #body .search_word .tab > li.on a { background-color:#fff; } #body .search_word .tab > li.on a:hover { text-decoration:none; } #body .search_word .list:not(.my_word) { display:none; } #body .search_word .list.on { display:block; } #body .search_word .list ol li { line-height:1.6; } #body .search_word .list ol li a { display:block; overflow:hidden; padding-right:1.5rem; background-repeat:no-repeat; background-position:98% 50%; white-space:nowrap; text-overflow:ellipsis; font-size:0.7rem; color:#222; } #body .search_word .list ol li a:after { position: absolute; margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; border: 0; clip: rect(0, 0, 0, 0); } #body .search_word .list ol li a:hover { text-decoration:underline; } #body .search_word .list ol li a .num { display:inline-block; width:0.75rem; height:0.75rem; margin-right:0.75rem; border:1px solid #bebebe; font-family:"돋움"; font-size:12px; line-height:0.75rem; letter-spacing:0.05em; color:#555; text-align:center; vertical-align:middle; } #body .search_word .list ol li.N a { background-image:url("/images/search/search/search_word_normal.png"); } #body .search_word .list ol li.C a { background-image:url("/images/search/search/icon_new.png"); } #body .search_word .list ol li.C a:after { content:"NEW"; } #body .search_word .list ol li.U a { background-image:url("/images/search/search/search_word_up.png"); } #body .search_word .list ol li.U a:after { content:"순위 상승"; } #body .search_word .list ol li.D a { background-image:url("/images/search/search/search_word_down.png"); } #body .search_word .list ol li.D a:after { content:"순위 하락"; } #body .search_word .list ol li a span { vertical-align:middle; line-height:1; } #body .search_word .list ol li a .top5 {background:#004787; border-color:#004787; color:#fff;} /* ############## FOOTER ############## */ #footer {padding: 1.75rem 0; font-size: 0.75rem; color: #b1b1b1; background: #4c515c;} #footer .container {position: relative; padding-left: 7rem;} #footer h2 {position: absolute; top: 0; left: 0;} #footer .protectionLink { overflow:hidden; margin-right:17rem; color:#fff; } #footer .protectionLink a {position: relative; float: left; display: inline-block; margin-right: 1.5rem; margin-bottom: 0.5rem;} #footer .protectionLink a:after {position: absolute; top: 0.1rem; right: -0.7rem; width: 1px; height: 0.65rem; background: #6b6d73; content: "";} #footer .protectionLink a:last-of-type {margin-left: 0;} #footer .protectionLink a:last-of-type:after {display: none;} #footer .protectionLink a strong {font-weight: 600; color: #76acf5;} #footer .footInfo {position: relative; margin-top: 1rem;} #footer .copyright {margin-top: 0.75rem; font-size: 0.7rem; letter-spacing: 0;} #footer .copyright em {font-weight: 600; color: #ffecbf;} #footer address {line-height: 1.5;} #footer address br {display: none;} #footer .lstSnsBox {position: absolute; top: -0.75rem; right: 0;} #footer .lstSnsBox .lst {overflow: hidden;} #footer .lstSnsBox .lst > li {float: left;} #footer .lstSnsBox .lst > li + li {margin-left: 0.5rem;} #footer .lstSnsBox .lst a {position: relative; display: inline-block; width: 1.9rem; height: 1.9rem; color: transparent; border-radius: 50%; overflow: hidden;} #footer .icons {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(166,166,166,0.5) url("/images/search/layout/icons_sns.png") no-repeat; background-size: auto 1.9rem; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;} #footer .icon1 {background-position: 0 0;} #footer .icon2 {background-position: -1.9rem 0;} #footer .icon3 {background-position: -3.8rem 0;} #footer .icon4 {background-position: -5.7rem 0;} #footer .icon5 {background-position: -7.6rem 0;} #footer .icon6 {background-position: -9.5rem 0;} #footer .icon7 {background-position: -11.4rem 0;} #footer a:hover .icons {background-color: #9c9c9c;} #footer .wa {display:none; margin-top: 0.5rem; text-align: right;} /* 2021.01.20. 탑버튼 추가 sehyun oh */ #footer .top { display:none; position:fixed; bottom:11rem; left:calc(50% - -32rem); } #footer .top a {display:inline-block; padding:1.6rem 0 0; width:3rem; height:3rem; text-align:center; font-size:0.6rem; color:#666; background: #fff url("/images/web/nts/layout/ico_top.png") no-repeat center 0.5rem; border:1px solid #c4c4c4; border-radius:50%;} /* 결과없음 */ .sear_no_data {margin:20px 0; } .sear_no_data ul{padding:20px; background:#f5f8fa; overflow:hidden;} .sear_no_data li {position:relative; padding:5px 0 5px 15px; font-size:15px; color:#111} .sear_no_data li:before {content:""; display:block; clear:both; position:absolute; left:0; top:14px; width:4px; height:4px; background:#999;} .chck_box {position:relative; width:776px; padding:5px; margin:50px auto; line-height:1.3; font-family:"NotoR"; background:#dfe6ee url("/images/common/pt_diagonalW.png") repeat;} .chck_box .inner {padding:50px 20px; text-align:center; background:#fff; word-break:keep-all;} .chck_box .inner h1 {position:relative; font-size:34px; /*padding:200px 0 30px;*/ color:#222; font-family:"NotoR"; /*background:url("/images/common/error.png") no-repeat center top;*/} .chck_box .inner h1:before {content:''; position:absolute; bottom:0; left:50%; width:40px; height:3px; margin-left:-20px; background:#222;} .chck_box .inner h1 span { font-family:"NotoB"; color:#053863;} .chck_box .inner p {position:relative; margin-top:15px; font-size:18px; font-family:"NotoR"; } .Point_bg {display:inline-block; padding:5px 20px; font-family:"NotoB"; color:#fff; background:#155eb6; border-radius:50px;} .chck_box .inner p.atte {margin-top:10px; font-size:16px;} .date-picker-control:link, .date-picker-control:visited {background-image: url('')} @media screen and (max-width: 1440px){ /* 검색 결과 영역 */ #body .search_result .list_wrap > li > ul.video_type2 > li { width:49%; } /* 대표 서브콘텐츠 버튼 유형 */ #body .search_result .list_wrap > li > .btnBox_wrap .btn { width:49%; } /* 2021.01.20. 탑버튼 추가 sehyun oh */ #footer .top { left:auto; right:2%; } } @media screen and (max-width: 1400px){ /* 레이아웃 */ .container {padding: 0 1rem;} #footer .container {padding-left: 9rem;} #footer h2 {left: 2rem;} #footer .lstSnsBox {right: 2rem;} /* 검색 메뉴 */ #body .left_area { display:none; } /* 검색 결과 영역 */ #body { min-height:0; } #body .middle_area { float:none; width:auto; padding-left:0; padding-right:0; } #body .search_result { padding-right:0; border-right:0; } /* 대표 서브콘텐츠 버튼 유형 */ #body .search_result .list_wrap > li > .btnBox_wrap .btn { width:49.5%; } #body .search_result .list_wrap > li > .btnBox_wrap .btn:nth-of-type(n+3) { margin-top:10px; } /* 검색어 탭 */ #body .right_area { float:none; width:auto; margin-top:0; margin-bottom:1.5rem; } #body .search_word { overflow:hidden; } #body .search_word .search_word_item { float:left; width:50%; } #body .search_word .search_word_item:first-child { padding-right:1rem; } #body .search_word .search_word_item ~ .search_word_item { margin-top:0; padding-top:0; padding-left:1rem; border-top:0; } } @media screen and (max-width: 1280px){ /* 키보드 플러그인 */ #header .search #openKeyBoard, #header .search .ntsKB { display:none; } /* 레이아웃 */ #footer {padding: 1.75rem 0; line-height: 1.5;} #footer .container {padding-left: 1rem; padding-right: 20rem;} #footer h2 {display: none;} #footer .lstSnsBox {top: 0; right: 1rem;} #footer .protectionLink { margin-right:0; } #footer .protectionLink a:after {top: 0.3rem;} #footer .footInfo {margin-top: 0.75rem;} #footer .copyright {margin-top: 0.5rem;} #footer .address br {display: block;} /* 대표 서브콘텐츠 버튼 유형 */ .btnBox .btn {margin-left: 2%; width: 49%;} } @media screen and (max-width: 1200px){ /* 상단 검색 */ #header .search { left:auto; right:1rem; } #header .search .btn_reSearch { display:none; } /* 상단 검색 탭 */ #header .header_bottom .top_list > .container { max-width:none; padding-left:1rem; } #header .header_bottom .bottom_list > .container { max-width:none; margin-left:1rem; } /* 검색 결과 영역 201117 수정 */ /* #body .search_result .tab li { width:33.33%; } #body .search_result .tab li:nth-child(n+4) { margin-top:0.75rem; } */ } @media screen and (max-width: 1024px){ /* 레이아웃 */ .container {padding: 0 0.85rem;} #footer {padding: 0.85rem 0;} #footer .container {padding-left: 0.85rem;} #footer .protectionLink a {margin-right: 1rem; margin-bottom: 0.25rem;} #footer .protectionLink a:after {right: -0.5rem;} #footer .copyright {margin-top: 0.25rem;} #footer .lstSnsBox {right: 0.85rem;} #footer .lstSnsBox .lst > li + li {margin-left: 0.25rem;} } @media screen and (max-width:1019px) { .chck_box {width:95%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } } @media screen and (max-width: 840px){ /* 상단 검색 */ #header .search .inp_txt { width:15rem; } } @media screen and (max-width: 768px){ /* 레이아웃 */ .container {padding: 0 0.5rem;} /* 상단 검색 탭 */ #header .header_bottom { margin-bottom:1.2rem; } #header .header_bottom .top_list > .container { padding-left:0; } #header .header_bottom .top_list .inner { padding-left:0; } #header .header_bottom .top_list h2 { position:relative; top:auto; left:auto; width:auto; } #header .header_bottom .top_list ul li { width:25%; } #header .header_bottom .top_list ul li a { padding:0 0.5rem; text-align:center; } #header .header_bottom .bottom_list > .container { margin-left:0; padding:0 0.5rem; } #header .header_bottom .bottom_list h2 { position:relative; top:auto; left:auto; width:auto; border-bottom:1px dashed #999c9e; text-align:center; } #header .header_bottom .bottom_list h2 span { background:none; } #header .header_bottom .bottom_list > .container > ul > li { width:25%; } #header .header_bottom .bottom_list > .container > ul > li:last-child > button { background:none; } /* 검색 결과 영역 */ #body .search_result .list_wrap > li .tit_box { padding-bottom:0.7rem; } #body .search_result .list_wrap > li .btns { position:relative; top:auto; right:auto; margin-top:0.7rem; } #body .search_result .list_wrap > li > ul.video_type2 > li:nth-child(even), #body .search_result .list_wrap > li > ul.video_type2 > li { float:none; width:auto; margin-bottom:0.7rem; } .chck_box .inner h1 {font-size:28px;} } @media screen and (max-width: 640px){ /* 상단 검색 */ #header .search .inp_txt { width:10rem; } /* 검색 결과 영역 */ #body .search_result .list_wrap > li > ul > li .date { display:block; margin-left:0; margin-top:0.3rem; } } @media screen and (max-width: 600px){ /* 201125, 개발자 PC에서 추가 */ #header .header_bottom .bottom_list .select_date input[type="text"] { width:75%; } /* 레이아웃 */ #footer .container {padding-left: 0.5rem; padding-right: 0.5rem;} #footer .lstSnsBox {position: relative; top: auto; right: auto; margin-top: 1rem; padding-right: 2.5rem;} #footer .wa {position: absolute; top: -0.3rem; right: 0; margin-top: 0;} /* 대표 서브콘텐츠 버튼 유형 */ #body .search_result .list_wrap > li > .btnBox_wrap .btn {float: none; margin-left: 0; padding: 10px; width: 100%; height:auto;} #body .search_result .list_wrap > li > .btnBox_wrap .btn ~ .btn { margin-top:10px; } #body .search_result .list_wrap > li > .btnBox_wrap .btn a { float:none; display:block; } } @media screen and (max-width:560px) { .chck_box {margin:20px auto;} .chck_box .inner {padding:25px 20px;} .chck_box .inner h1 {font-size:20px; padding:160px 0 20px; color:#222; font-family:"NotoR"; background-size:335px;} .chck_box .inner p {margin-top:20px; font-size:15px;} .chck_box .inner p.atte {font-size:14px;} } @media screen and (max-width: 540px){ /* 레이아웃 */ #header > .container { margin-top:1rem; } #header h1 { float:none; margin-bottom:0.6rem; } #header .search { position:relative; top:auto; right:auto; } #header .search .search_left { width:82%; } #header .search .inp_txt { width:100%; } #header .search .btn_search { width:16%; margin:0 1%; } #header .search .btn_deSearch { width:16%; } /* 상단 검색 탭 */ #header .header_bottom .top_list ul li { width:50%; } #header .header_bottom .top_list ul li a { border:1px dotted rgba(255,255,255,0.8); border-left:0; } #header .header_bottom .top_list ul li:nth-child(n+3) a { border-top:0; } #header .header_bottom .top_list ul li:nth-child(even) a { border-right:0; } #header .header_bottom .bottom_list > .container > ul > li { width:50%; } #header .header_bottom .bottom_list > .container > ul > li:nth-child(2) > button { background:none; } /* 201125, 개발자 PC에서 추가 */ #header .header_bottom .bottom_list .select_date input[type="text"] { width:87%; } } @media screen and (max-width: 480px){ /* 레이아웃 */ /* #header .search .search_left { width:58%; } #header .search .btn_search, #header .search .btn_deSearch { width:20%; } */ /* 검색 결과 영역 201117 수정 */ /* #body .search_result .tab li { width:50%; } #body .search_result .tab li:nth-child(n+3) { margin-top:0.75rem; } #body .search_result .tab li a span { display:inline; } */ /* 검색어 탭 */ #body .search_word .search_word_item { float:none; width:auto; } #body .search_word .search_word_item:first-child { padding-right:0; } #body .search_word .search_word_item ~ .search_word_item { margin-top:0.5rem; padding-top:0.5rem; padding-left:0; border-top:1px solid #cecece; } /* 201125, 개발자 PC에서 추가 */ #header .header_bottom .bottom_list .select_date input[type="text"] { width:calc(100% - 1.6rem); } #body .search_result .list_wrap > li > ul.type2 > li { display:block; width:100%; height:auto; } #body .search_result .list_wrap > li > ul.type2 > li:nth-child(odd) a:before { display:none; } #body .search_result .list_wrap > li > ul.type2 > li a { display:block; } } @media screen and (max-width: 380px){ /* 검색 결과 영역 */ #body .search_result .tab .inner > ul > li > ul > li { display:block; width:auto; margin-right:0; } /* 201117 추가 */ #body .search_result .list_wrap > li .result_tit { font-size:1rem; } #body .search_result .list_wrap > li > ul.type4 > li { padding-right:0; } #body .search_result .list_wrap > li > ul.type4 > li .date { position:relative; top:auto; right:auto; margin-top:0.3rem; } #body .search_result .list_wrap > li > ul.video_type1 > li { padding-left:0; } #body .search_result .list_wrap > li > ul.video_type1 > li .imgbox { position:relative; top:auto; left:auto; width:auto; height:auto; margin-bottom:0.5rem; } } @media screen and (max-width: 320px){ /* 레이아웃 */ #header .search .search_left { width:70%; margin-bottom:1%; } /* #header .search .btn_search { margin-left:0; } */ #header .search .btn_search, #header .search .btn_deSearch { width:28%; } #footer {font-size: 0.7rem;} #footer .lstSnsBox {padding-right: 0; text-align: center;} #footer .lstSnsBox .lst {display: inline-block;} #footer .lstSnsBox .lst a {width: 1.7rem; height: 1.7rem;} #footer .icons {background-size: auto 1.7rem;} #footer .icon2 {background-position: -1.7rem 0;} #footer .icon3 {background-position: -3.4rem 0;} #footer .icon4 {background-position: -5.1rem 0;} #footer .icon5 {background-position: -6.8rem 0;} #footer .icon6 {background-position: -8.5rem 0;} #footer .icon7 {background-position: -10.2rem 0;} #footer .wa {position: static; top: auto; right: auto;} /* 검색 결과 영역 201117 수정 */ /* #body .search_result .tab li { display:block; width:auto; } #body .search_result .tab li ~ li { margin-top:0.75rem; } */ #body .search_result .list_wrap > li > ul.video_type2 > li { height:auto; padding-left:0; } #body .search_result .list_wrap > li > ul.video_type2 > li a { display:block; padding:0.5rem; } #body .search_result .list_wrap > li > ul.video_type2 > li .imgbox { position:relative; top:auto; left:auto; width:auto; height:auto; margin-bottom:0.5rem; } }