@charset "utf-8"; /* CSS Document */ /* 통합검색 */ #AllSearch * { box-sizing:border-box; } #AllSearch h3 { font-size: 2.19em; line-height: 1.2; color: var(--color-base); font-weight: 500; word-break: keep-all; text-align:center } #AllSearch .topSearchBox { display:flex; justify-content:center; align-items:center; border-radius:10px; background:#f2f2f2; padding:1.5em; margin-top:1.5em; } #AllSearch .topSearchBox .SearchBox_wrap { position:relative; width:fit-content; display:flex; justify-content:center; align-items:center; --sizeHig:50px; } #AllSearch .topSearchBox .SearchBox_wrap fieldset { display:flex; align-items:center; border-radius:8px; height:var(--sizeHig); } #AllSearch .topSearchBox .btn_cate_select { position:relative; width:150px; height:var(--sizeHig); border-radius:8px 0 0 8px; background:var(--color-board-white); text-align:left; padding:0 15px; font-size:1.03rem; font-weight:500; border:1px solid var(--color-board-line); border-right:none; } #AllSearch .topSearchBox .btn_cate_select::before { position:absolute; width:7px; height:7px; border-style:solid; border-width:0 1px 1px 0; border-color:var(--color-base); content:''; right:15px; top:50%; transform:translateY(-70%) rotate(45deg); transition: ease 0.3s} #AllSearch .topSearchBox .btn_cate_select.active::before { transform:translateY(-20%) rotate(225deg); } #AllSearch .topSearchBox .layer_search { position:absolute; display:none; top:calc(var(--sizeHig) + 5px); width:150px; border-radius:10px; background:var(--color-board-white); padding:10px; border:1px solid var(--color-board-line); z-index:2 } #AllSearch .topSearchBox .layer_search>ul { display:flex; flex-flow:column; gap:5px; } #AllSearch .topSearchBox .layer_search>ul>li>button { display:flex; width:100%; align-items:center; padding:8px 10px; border-radius:5px; background:var(--color-gray); font-size:.95rem; font-weight:500; justify-content:center;} #AllSearch .topSearchBox .layer_search>ul>li.active>button { background:var(--color-point); color:var(--color-board-white); } #AllSearch .topSearchBox .scBox { display:flex; align-items:center; margin-right:5px; } #AllSearch .topSearchBox .scBox input[type="text"] { width:100%; height:var(--sizeHig); min-width:25em; border:1px solid var(--color-board-line); border-left:none; border-radius:0 8px 8px 0 } #AllSearch .topSearchBox .btn { padding:10px 25px; background:var(--color-point); border-radius:8px; color:#fff; height:var(--sizeHig); font-size:.98rem; font-weight:500 } #AllSearch .topSearchBox .btn:focus { outline-offset:-4px; outline:2px dotted #fff !important; } #AllSearch .popular_wrap { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:10px 2em } #AllSearch .popular_wrap .mob_searchLeft_open { display:none; border:1px solid var(--color-line); padding:0 15px; border-radius:8px; height:35px; font-size:.9rem; font-weight:500; position:relative; align-items:center;} #AllSearch .popular_wrap .mob_searchLeft_open span { display:flex; align-items:center; gap:5px 10px;} #AllSearch .popular_wrap .mob_searchLeft_open .icon { position:relative; display:block; width:15px; height:15px; } #AllSearch .popular_wrap .mob_searchLeft_open .icon::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:url(/resource/common/images/bbs/icon_search_option.svg) no-repeat 50% 50% / contain; } #AllSearch .popular_wrap .popular { display:flex; flex-wrap:wrap; align-items:center; gap:10px 25px; justify-content:center; } #AllSearch .popular_wrap .popular .btn_popular { display:flex; align-items:center; font-size:1.03rem; font-weight:bold; color:var(--color-point); position:relative; padding-left:20px; } #AllSearch .popular_wrap .popular .btn_popular::before { position:absolute; left:0; top:0; width:20px; height:20px; content:''; background:url(/resource/common/images/bbs/icon_search2.svg) no-repeat 0 50% / 13px; filter: invert(19%) sepia(96%) saturate(2183%) hue-rotate(193deg) brightness(97%) contrast(102%); } #AllSearch .popular_wrap .popular .popular_list>ul { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; } #AllSearch .popular_wrap .popular .popular_list>ul>li>button { display:flex; align-items:center; justify-content:center; height:30px; padding:0 15px; background:#f2f2f2; border-radius:5px; font-size:.9rem; color:var(--color-base2) } #AllSearch .popular_wrap .refresh { display:flex; width:35px; height:35px; border-radius:100%; background:var(--color-base3); position:relative; } #AllSearch .popular_wrap .refresh::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:url(/resource/common/images/bbs/icon_reset.svg) no-repeat 50% 50% / 15px; filter:invert(1)} #AllSearch .allSearchCon { display:flex; flex-wrap:wrap; margin-top:2rem; gap:2em 5em; flex-wrap:wrap; } #AllSearch .allSearchCon .searchLeft { width:20%; } #AllSearch .allSearchCon .searchLeft h4 { font-size:1.167rem; font-weight:bold; padding-bottom:.5em; border-bottom:1px solid var(--color-board-line) } #AllSearch .allSearchCon .searchLeft .tit_btn { display:flex; width:100%; margin-top:2em; font-size:1.03rem; font-weight:bold; } #AllSearch .allSearchCon .searchLeft .searchLeft_close { width:50px; height:50px; position:relative; display:none; } #AllSearch .allSearchCon .searchLeft .searchLeft_close::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:url(/resource/common/images/bbs/icon_close.svg) no-repeat 50% 50% / 10px; } #AllSearch .allSearchCon .searchLeft .period_wrap .period, #AllSearch .allSearchCon .searchLeft .period_wrap .output { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; } #AllSearch .allSearchCon .searchLeft .period_wrap .period>li, #AllSearch .allSearchCon .searchLeft .period_wrap .output>li { flex:auto; } #AllSearch .allSearchCon .searchLeft .period_wrap .period>li>button, #AllSearch .allSearchCon .searchLeft .period_wrap .output>li>button { width:100%; padding:8px; display:flex; align-items:center; justify-content:center; border:1px solid var(--color-board-line); border-radius:5px; font-size:.9rem; font-weight:500 } #AllSearch .allSearchCon .searchLeft .period_wrap .period>li.active>button, #AllSearch .allSearchCon .searchLeft .period_wrap .output>li.active>button { border-color:var(--color-point); color:var(--color-point); } #AllSearch .allSearchCon .searchLeft .period_wrap .output_field { display:none; margin-top:10px; } #AllSearch .allSearchCon .searchLeft .period_wrap .output_field.active { display:block; } #AllSearch .allSearchCon .searchLeft .period_wrap .output_field input { width:100%; border-radius:3px; } #AllSearch .allSearchCon .searchLeft .period_wrap .field { position:relative; display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:10px; } #AllSearch .allSearchCon .searchLeft .period_wrap .field::before { position:absolute; width:20px; height:40px; left:50%; bottom:0; content:'~'; transform:translateX(-50%); display:flex; align-items:center; justify-content:center } #AllSearch .allSearchCon .searchLeft .period_wrap .field>li { position:relative; width:calc((100% - 20px) / 2); display:flex; flex-flow:column; } #AllSearch .allSearchCon .searchLeft .period_wrap .field>li label { font-size:.9rem; font-weight:bold; color:var(--color-base3)} #AllSearch .allSearchCon .searchLeft .period_wrap .field>li input { border-radius:3px; } #AllSearch .allSearchCon .searchLeft .period_wrap .field>li .icon-calendar { position:absolute; z-index:1; width:40px; height:40px; right:0; bottom:0; } #AllSearch .allSearchCon .searchLeft .period_wrap .btn2 { display:flex; width:100%; align-items:center; justify-content:center; height:55px; border-radius:8px; background:var(--color-point); color:var(--color-white); font-size:1.03rem; font-weight:bold; margin-top:1.5em} #AllSearch .allSearchCon .searchCon { width:calc(100% - 20% - 5em); min-height:35em; } #AllSearch .allSearchCon .searchCon .menu { display:flex; flex-wrap:wrap; width:100%; align-items:center; border-radius:15px; overflow:hidden; border:1px solid var(--color-board-line); border-width:1px 1px 0 0;} #AllSearch .allSearchCon .searchCon .menu>li { width:calc(100% / 8); display:flex; height:65px; border:1px solid var(--color-board-line); border-width:0 0 1px 1px; } #AllSearch .allSearchCon .searchCon .menu>li:first-child { border-radius:15px 0 0 15px; } #AllSearch .allSearchCon .searchCon .menu>li:last-child { border-radius:0 15px 15px 0; } #AllSearch .allSearchCon .searchCon .menu>li>button { width:100% } #AllSearch .allSearchCon .searchCon .menu>li>button>span { display:flex; width:100%; flex-flow:column; align-items:center; justify-content:center; font-size:.9rem; line-height:1.3; font-weight:500} #AllSearch .allSearchCon .searchCon .menu>li>button>span>i { font-weight:500; font-size:1rem; } #AllSearch .allSearchCon .searchCon .menu>li.active>button { background:var(--color-point); color:var(--color-board-white); } #AllSearch .allSearchCon .searchCon .menu>li.active>button:focus { outline-offset:-4px; outline:2px dotted #fff !important; } #AllSearch .allSearchCon .searchCon .menu>li>button:focus { outline-offset:-4px; } #AllSearch .allSearchCon .searchCon .sc_result { display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:2.5em; margin-bottom:1em; } #AllSearch .allSearchCon .searchCon .sc_result .total, #AllSearch .allSearchCon .searchCon .sc_result .sorting { position:relative; display:flex; flex-wrap:wrap; gap:10px 1em; } #AllSearch .allSearchCon .searchCon .sc_result .sorting { gap:5px; } #AllSearch .allSearchCon .searchCon .sc_result .total>li { font-size:1.167rem; } #AllSearch .allSearchCon .searchCon .sc_result .total>li strong { font-weight:bold; color:var(--color-point); } #AllSearch .allSearchCon .searchCon .sc_result .total::before { position:absolute; content:''; width:1px; height:15px; transform:translate(-50%,-50%); background:var(--color-base); left:calc(50% + 7px); top:50%; opacity:.3 } #AllSearch .allSearchCon .searchCon .sc_result .sorting>li>button { display:flex; align-items:center; justify-content:center; font-size:.85rem; padding:5px 10px; border-radius:5px; border:1px solid var(--color-board-line); font-weight:bold } #AllSearch .allSearchCon .searchCon .sc_result .sorting>li.active>button { border-color:var(--color-point); color:var(--color-point); } #AllSearch .allSearchCon .searchCon .resultList .scWord { position:relative; color:var(--color-point); font-weight:800; } #AllSearch .allSearchCon .searchCon .resultList .scWord::before { position:absolute; width:100%; height:8px; left:0; bottom:-1px; background:var(--color-light-blue); content:''; z-index:-1 } #AllSearch .allSearchCon .searchCon .resultList { position:relative; padding-bottom:1.5em; margin-bottom:2.5em; border-bottom:1px dashed #e0e0e0;} #AllSearch .allSearchCon .searchCon .resultList.none_data { border:1px dashed #e0e0e0; padding:5em; display:flex; flex-flow:column; align-items:center; } #AllSearch .allSearchCon .searchCon .resultList.none_data strong { font-size:1.3rem; font-weight:bold; line-height:1.3 } #AllSearch .allSearchCon .searchCon .resultList.none_data strong>em { font-weight:900; color:var(--color-point); } #AllSearch .allSearchCon .searchCon .resultList.none_data>.dt_list { display:flex; flex-flow:column; gap:10px; align-items:flex-start; margin-top:20px; } #AllSearch .allSearchCon .searchCon .resultList.none_data>.dt_list>li { margin:0; padding-left:10px; position:relative; font-size:.95rem; font-weight:500; color:var(--color-base3); text-align:left; line-height:1.3 } #AllSearch .allSearchCon .searchCon .resultList.none_data>.dt_list>li::before { position:absolute; left:0; top:.37rem; width:4px; height:4px; border-radius:100%; background:var(--color-base); opacity:.4; content:''; } #AllSearch .allSearchCon .searchCon .resultList:last-child { border-bottom:0;} #AllSearch .allSearchCon .searchCon .resultList h4 { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px .75em; font-size:1.067rem; font-weight:bold; padding:.75rem 1rem; border-radius:8px; background:#f2f2f2; } #AllSearch .allSearchCon .searchCon .resultList h4 span { font-size:.9rem; font-weight:400 } #AllSearch .allSearchCon .searchCon .resultList h4 span>em { color:var(--color-point); font-weight:bold; } #AllSearch .allSearchCon .searchCon .resultList ul { display:flex; flex-flow:column; gap:5px; margin-top:10px; } #AllSearch .allSearchCon .searchCon .resultList ul li { margin:5px 0;} #AllSearch .allSearchCon .searchCon .resultList ul li a { color:var(--color-base); text-decoration:underline;} #AllSearch .allSearchCon .searchCon .resultList ul li dl { margin-bottom:15px; display:flex; flex-flow:column; gap:5px;} #AllSearch .allSearchCon .searchCon .resultList ul li dl { margin-bottom:3px;} #AllSearch .allSearchCon .searchCon .resultList ul li dl dd { color:var(--color-base2);} #AllSearch .allSearchCon .searchCon .resultList ul li i { font-size:.88rem; color:#2878d3; margin-right:8px;} #AllSearch .allSearchCon .searchCon .resultList ul li i.icon-file { display:inline-block; width:12px; height:12px; background-image:url(/resource/common/images/bbs/icon_file.png); background-repeat:no-repeat; background-position:50% 50%; background-size:cover; margin-top:-2px} #AllSearch .allSearchCon .searchCon .resultList .list_info, #AllSearch .allSearchCon .searchCon .resultList .list_info a { font-size:14px; color:#949494; text-decoration:none; display:block;} #AllSearch .allSearchCon .searchCon .resultList .list_info a:hover { text-decoration:underline;} #AllSearch .allSearchCon .searchCon .resultList .list_info span { letter-spacing:0; display:block;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList { width:100%; display:flex; flex-wrap:wrap; gap:20px; margin-top:10px; flex-flow:row wrap } #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li { width:calc((100% - 60px) / 4); border:1px solid #e0e0e0; text-align:center; border-radius:8px; margin:0;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li a, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li a { display:block; text-decoration:none;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li dl, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li dl { width:90%; margin:10px auto;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li dl dt, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li dl dt { white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li dl dd, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li dl dd { font-size:14px; color:#949494; letter-spacing:0;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList .sc_img, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList .sc_img { position:relative; width:100%; height:0; padding-top:68%; overflow:hidden; border-bottom:1px solid #e0e0e0; border-radius:8px 8px 0 0} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList .sc_img img, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList .sc_img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; object-fit:cover; -o-object-fit:cover; transform:translate(-50%,-50%) scale(1,1) rotate(0.001deg); transition:0.5s ease 0s; transition-property:transform;} #AllSearch .allSearchCon .searchCon .resultList .bulst { background:url(/resource/common/images/bbs/dott.png) left 9px no-repeat; padding-left:10px; margin:5px 0;} #AllSearch .allSearchCon .searchCon .resultList .result_more { display:flex; justify-content:end; margin-top:1em } #AllSearch .allSearchCon .searchCon .resultList .result_more a { display:flex; justify-content:center; position:relative; align-items:center; font-size:.95rem; line-height:1; padding:10px 15px 7px 15px; border-radius:3px; border:1px solid var(--color-board-line); height:35px;} #AllSearch .allSearchCon .searchCon .resultList .result_more a::after { display:inline-block; margin-left:5px; width:7px; height:7px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-base); content:''; transition:all ease 0.3s; transform:rotate(45deg); margin-top:-1.5px } @media all and (max-width:1568px){ #AllSearch .allSearchCon { gap:2em 4em; } #AllSearch .allSearchCon .searchCon { width:calc(100% - 20% - 4em); } } @media all and (max-width:1468px){ #AllSearch .allSearchCon { gap:2em 3em; } #AllSearch .allSearchCon .searchLeft { width:22%; } #AllSearch .allSearchCon .searchCon { width:calc(100% - 22% - 3em); } } @media all and (max-width:1368px){ #AllSearch .allSearchCon .searchLeft { width:19%; } #AllSearch .allSearchCon .searchCon { width:calc(100% - 19% - 3em); } #AllSearch .allSearchCon .searchLeft .period_wrap .field>li { width:100%; } #AllSearch .allSearchCon .searchLeft .period_wrap .field::before { display:none; } } @media all and (max-width:1268px){ #AllSearch { position:relative; } #AllSearch .allSearchCon .searchLeft { width:100%; position:fixed; left:0; bottom:0; background:var(--color-white); border-radius:20px 20px 0 0; transition: ease 0.2s; padding:2em; z-index:2; box-shadow:0 -10px 10px rgba(0,0,0,.08); display:none} #AllSearch .allSearchCon .searchLeft.active { display:block;} #AllSearch .allSearchCon .searchCon { width:100%; } #AllSearch .allSearchCon .searchLeft .period_wrap .field>li { width:calc((100% - 20px) / 2); } #AllSearch .allSearchCon .searchLeft .period_wrap .field::before { display:flex; } #AllSearch .popular_wrap .mob_searchLeft_open { display:flex; } #AllSearch .popular_wrap .popular { width:100%; } #AllSearch .popular_wrap { justify-content:space-between; } #AllSearch .topSearchBox { margin-top:.5em; } #AllSearch .allSearchCon .searchLeft .tit_btn { font-size:1.067rem; } #AllSearch .allSearchCon .searchLeft .searchLeft_close { display:flex; position:absolute; right:1.25em; top:1.25em; } #AllSearch .allSearchCon .searchLeft .period_wrap { display:flex; flex-flow:column; } #AllSearch .allSearchCon .searchLeft .period_wrap .period>li { flex:inherit; } #AllSearch .allSearchCon .searchLeft .tit_btn { margin-top:1em; } #AllSearch .allSearchCon .searchLeft .period_wrap .field { order:1; margin-top:5px; } #AllSearch .allSearchCon .searchLeft .period_wrap .field>li { gap:5px; } #AllSearch .allSearchCon .searchLeft .period_wrap .period { order:2; } #AllSearch .allSearchCon .searchLeft .period_wrap .tit_btn { order:3; } #AllSearch .allSearchCon .searchLeft .period_wrap .output { order:4; } #AllSearch .allSearchCon .searchLeft .period_wrap .output_field { order:5; } #AllSearch .allSearchCon .searchLeft .period_wrap .btn2 { order:6; } #AllSearch .allSearchCon .searchLeft .period_wrap .period>li>button { padding:5px 8px; } #AllSearch .topSearchBox { padding:1em; } #AllSearch .topSearchBox .SearchBox_wrap { --sizeHig:45px; } } @media all and (max-width:1024px){ #AllSearch .allSearchCon .searchCon .resultList .result_more a { font-size:.9rem; padding:6.5px 15px 7px 15px } #AllSearch .allSearchCon .searchCon .resultList .sc_imgList, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList { gap:10px; } #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li { width:calc((100% - 30px) / 4); } #AllSearch .allSearchCon .searchCon .resultList.none_data { padding:3em; } #AllSearch .allSearchCon .searchCon .resultList { margin-bottom:2em; padding-bottom:1em; } #AllSearch .allSearchCon .searchCon .resultList ul li, #AllSearch .allSearchCon .searchCon .resultList .list_info, #AllSearch .allSearchCon .searchCon .resultList .list_info a, #AllSearch .allSearchCon .searchCon .resultList ul li dl, #AllSearch .allSearchCon .searchCon .resultList ul li dt { font-size:.95rem; line-height:1.3 } #AllSearch .allSearchCon .searchCon .resultList .list_info span, #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li dl dd, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li dl dd { font-size:.85rem; } } @media all and (max-width:968px){ #AllSearch .allSearchCon .searchCon .menu>li { width:calc(100% / 4); } #AllSearch .allSearchCon .searchCon .menu>li { height:60px; } #AllSearch .allSearchCon .searchCon .menu>li:last-child { border-radius:0 0 15px 0; } #AllSearch .allSearchCon .searchCon .menu>li:nth-child(5) { border-radius:0 0 0 15px; } } @media all and (max-width:668px){ #AllSearch .topSearchBox .SearchBox_wrap { height:40px; } #AllSearch .topSearchBox .SearchBox_wrap, #AllSearch .topSearchBox .SearchBox_wrap form, #AllSearch .topSearchBox .SearchBox_wrap fieldset { width:100%; } #AllSearch .topSearchBox .btn_cate_select, #AllSearch .topSearchBox .layer_search { min-width:80px; width:90px; } #AllSearch .topSearchBox .scBox { flex:auto; } #AllSearch .topSearchBox .scBox input[type="text"] { min-width:inherit; } #AllSearch .topSearchBox .btn_cate_select, #AllSearch .topSearchBox .btn { font-size:.9rem; } #AllSearch .topSearchBox .layer_search>ul>li>button { font-size:.88rem; } #AllSearch .topSearchBox .btn { padding:0 15px; } #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li { width:calc((100% - 10px) / 2); } #AllSearch .allSearchCon .searchCon .resultList.none_data { padding:2em; } #AllSearch .allSearchCon .searchCon .resultList.none_data strong { font-size:1.2rem; } #AllSearch .allSearchCon .searchCon .resultList.none_data>.dt_list { margin-top:10px; gap:5px; } #AllSearch .allSearchCon .searchCon .sc_result { align-items: end; gap:10px; } #AllSearch .allSearchCon .searchCon .sc_result .total { flex-flow:column; gap:5px; line-height:1.1 } #AllSearch .allSearchCon .searchCon .sc_result .total::before { display:none; } } @media all and (max-width:468px){ #AllSearch .allSearchCon .searchCon .menu>li { width:calc(100% / 2); } #AllSearch .allSearchCon .searchCon .menu>li { height:55px; } #AllSearch .allSearchCon .searchCon .menu>li:nth-child(5) { border-radius:0; } #AllSearch .allSearchCon .searchCon .menu>li:nth-child(7) { border-radius:0 0 0 15px; } #AllSearch .allSearchCon .searchCon .menu>li>button>span>i { font-size:.95rem; } #AllSearch .allSearchCon .searchLeft { padding:1.5em 1em 1em 1em; } #AllSearch .allSearchCon .searchLeft .tit_btn { margin-top:.75em; } #AllSearch .allSearchCon .searchLeft .period_wrap .field { margin-top:0; } #AllSearch .allSearchCon .searchLeft .period_wrap .period>li>button { padding:5px 6px; font-size:.85rem; } #AllSearch .allSearchCon .searchLeft .searchLeft_close { right:0; top:.75em; } #AllSearch .allSearchCon .searchLeft .period_wrap .output, #AllSearch .allSearchCon .searchLeft .period_wrap .output_field, #AllSearch .allSearchCon .searchLeft .period_wrap .period { margin-top:5px; } #AllSearch .allSearchCon .searchLeft .period_wrap .btn2 { margin-top:.75em; height:45px; } } @media all and (max-width:320px){ #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li { width:100%; } }