@font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 400; src: url(fonts/NanumGothic-Regular.eot); src: url(fonts/NanumGothic-Regular.eot?#iefix) format("embedded-opentype"), url(fonts/NanumGothic-Regular.woff2) format("woff2"), url(fonts/NanumGothic-Regular.woff) format("woff"), url(fonts/NanumGothic-Regular.ttf) format("truetype"); } @font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 700; src: url(fonts/NanumGothic-Bold.eot); src: url(fonts/NanumGothic-Bold.eot?#iefix) format("embedded-opentype"), url(fonts/NanumGothic-Bold.woff2) format("woff2"), url(fonts/NanumGothic-Bold.woff) format("woff"), url(fonts/NanumGothic-Bold.ttf) format("truetype"); } @font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 800; src: url(fonts/NanumGothic-ExtraBold.eot); src: url(fonts/NanumGothic-ExtraBold.eot?#iefix) format("embedded-opentype"), url(fonts/NanumGothic-ExtraBold.woff2) format("woff2"), url(fonts/NanumGothic-ExtraBold.woff) format("woff"), url(fonts/NanumGothic-ExtraBold.ttf) format("truetype"); } .wrapper { width: auto; max-width: 980px; margin: 0 auto; } body { font-family: 'Malgun Gothic'; font-size: 13px; line-height: 18px; color: #1b1b1b; } button { cursor: pointer; } #header { position: relative; z-index: 999; } #header .wrapper { position: relative; } #header .header-top { display: inline-block; width: 100%; background: #928067; position: relative; z-index: 2; } #header .header-top .menu > li > a { display: inline-block; padding: 7px 14px 8px 13px; text-decoration: none; color: #fff; font-size: 12px; font-weight: 700; } #header .header-top .menu > li.home > a { width: 40px; } #header .header-top.indexpage .right-top-menu .menu li a { padding-bottom: 8px; } #header .left-top-menu { float: left; } #header .left-top-menu .menu { overflow: hidden; } #header .left-top-menu .menu > li { float: left; width: 73px; background: #85745e; border-right: 1px solid #7a6c56; border-bottom: 1px solid #7a6c56; } #header .left-top-menu .menu > li:first-child { background: #8f012b; border-right: 1px solid #7f0126; border-bottom: 1px solid #7f0126; } #header .left-top-menu .menu > li:first-child > a { color: #fff; } #header .left-top-menu .menu > li > a { display: block; padding-top: 7px; padding-bottom: 7px; padding-left: 0; padding-right: 0; text-align: center; color: #e5dccf; } #header .right-top-menu { float: right; } #header .right-top-menu .menu { display: inline-block; width: 100%; height: 33px; } #header .right-top-menu .menu > li { float: left; border-left: 1px solid #7a6c56; } #header .right-top-menu .menu > li > a { padding: 7px 15px 0 15px; } #header .right-top-menu .menu > li:last-child { border-right: 1px solid #7a6c56; } #header .right-top-menu .menu > li.home { width: 57px; box-sizing: border-box; text-align: center; } #header .right-top-menu .menu > li.home a { padding-left: 0; padding-right: 0; padding-bottom: 8px; } #header .right-top-menu .menu > li.user-info { position: relative; min-width: 126px; border-right: 0; text-align: center; padding-left: 14px; padding-right: 14px; box-sizing: border-box; border-right: 1px solid #7a6c56; } #header .right-top-menu .menu > li.user-info > a { box-sizing: border-box; padding-left: 0; padding-right: 0; padding-bottom: 8px; } #header .right-top-menu .menu > li.user-info > a span { display: inline-block; /*width:60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;*/ } #header .right-top-menu .menu > li.user-info > a span.default { width: auto; color: #e5d9c8; } #header .right-top-menu .menu > li.user-info > a:after { content: url(../../../images/stm/front/btn/btn_arrow_open.png); display: inline-block; margin: 1px 0 2px 8px; vertical-align: middle; } #header .right-top-menu .menu > li.user-info.on { border-color: #000; border-bottom: 1px solid #584b39; padding-bottom: 0; background: #625645; z-index: 1; } #header .right-top-menu .menu > li.user-info.on > a { background: #625645; /*padding-bottom:8px;*/ } #header .right-top-menu .menu > li.user-info.on > a:after { content: url(../../../images/stm/front/btn/btn_arrow_close.png); } #header .right-top-menu .menu > li.user-info.on > .user-info-panel { display: block; } #header .user-info-panel { display: none; position: absolute; top: 34px; right: 0; margin-top: -1px; /*width:318px;*/ min-width: 238px; padding: 14px 14px 15px 14px; box-sizing: border-box; background: #6a5f4e; border: 1px solid #000; } #header .user-info-panel .info-holder { display: table; width: 100%; min-width: 180px; max-width: 286px; margin-bottom: 14px; } #header .user-info-panel .info-holder span { display: table-cell; vertical-align: top; } #header .user-info-panel .info-holder span.image-holder { /*width:auto;*/ width: 47px; } #header .user-info-panel .info-holder span.image-holder .image { float: left; min-width: 47px; min-height: 56px; text-align: center; } #header .user-info-panel .info-holder span.image-holder .image:before { display: inline-block; width: 0; height: 100%; content: ''; vertical-align: middle; } #header .user-info-panel .info-holder span.image-holder .image img { display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; } #header .user-info-panel .info-holder span.image-holder .image.customer { width: 72px; height: 54px; border: 1px solid #584b39; } #header .user-info-panel .info-holder span.info-text { text-align: left; padding-left: 14px; } #header .user-info-panel .info-holder span.info-text .meta .status { overflow: hidden; height: 15px; } #header .user-info-panel .info-holder span.info-text .meta .status:before { content: ''; display: block; height: 15px; } #header .user-info-panel .info-holder span.info-text .meta .status.researcher:before { content: url(../../../images/stm/front/tit/tit_researcher.jpg); } #header .user-info-panel .info-holder span.info-text .meta .status.personnel:before { content: url(../../../images/stm/front/tit/tit_personnel.jpg); } #header .user-info-panel .info-holder span.info-text .meta .status.administrator:before { content: url(../../../images/stm/front/tit/tit_administrator.jpg); } #header .user-info-panel .info-holder span.info-text .meta .status.kuce:before { content: url(../../../images/stm/front/tit/tit_kuce.png); } #header .user-info-panel .info-holder span.info-text .meta .status.staff:before { content: url(../../../images/stm/front/tit/tit_staff.png); } #header .user-info-panel .info-holder span.info-text .meta .status.student:before { content: url(../../../images/stm/front/tit/tit_student.png); } #header .user-info-panel .info-holder span.info-text .meta .name { margin: 5px 0 4px 0; font-weight: 700; color: #fff; } #header .user-info-panel .info-holder span.info-text .meta .field { font-size: 11px; line-height: 16px; color: #eae1d4; overflow: hidden; } #header .user-info-panel .info-holder span.info-text .meta .field .vbar { color: #97846b; } #header .user-info-panel .info-holder span.info-text .meta .field.customer { margin-left: 89px; } #header .user-info-panel .btns { display: table; width: 100%; margin-top: 10px; padding-top: 15px; border-top: 1px solid #84745e; } #header .user-info-panel .btns .btn-holder { display: table-cell; vertical-align: top; table-layout: fixed; height: 28px; } #header .user-info-panel .btns .btn-holder + .btn-holder { width: 28px; } #header .user-info-panel .btns a { text-decoration: none; } #header .user-info-panel .btns a.btn-logout { width: 100%; display: block; padding: 6px 0 7px; height: 15px; font-weight: 700; line-height: 15px; color: #fff; border: 1px solid #645746; border-bottom: 1px solid #53483a; background: #f69b00; text-align: center; } #header .user-info-panel .btns a.btn-close { width: 28px; height: 28px; display: block; margin-left: 7px; border: 1px solid #3e3225; background: #4e4233; overflow: hidden; } #header .user-info-panel .btns a.btn-close:before { content: url(../../../images/stm/front/btn/btn_user_info_close.jpg); display: block; margin: 9px; } #header .user-info-panel.on { display: block; } #header .header-mid { padding: 24px 0; display: table; width: 100%; } #header .header-mid.indexpage { overflow: hidden; padding: 12px 0 12px 0; } #header .header-mid .logo { float: left; margin-top: 2px; display: table-cell; } #header .header-mid #btn-index, #header .header-mid #btn-index-nt { float: right; display: none; width: 42px; height: 40px; margin-right: 15px; text-decoration: none; background: url(../../../images/stm/front/btn/btn_index.jpg) no-repeat 0 0; } #header .header-mid .contact_btn_kurn { float: right; } #header .header-mid .contact_btn_kurn > .btn { display: inline-block; border: 1px solid #c8c8c8; border-bottom: 1px solid #9f9f9f; padding: 12px 10px 12px 40px; color: #1b1b1b; font-family: 'Malgun Gothic'; font-size: 13px; line-height: 13px; font-weight: bold; text-decoration: none; background: url(../../../images/stm/front/icon/icon_btnkurn.png) no-repeat 8px 8px; } #header .header-mid .search-bar { display: table-cell; float: right; } #header .header-mid .search-bar .search-cat { position: relative; float: left; width: 194px; height: 40px; margin-right: 6px; padding: 2px; background: #a91539; border: 1px solid #a91539; box-sizing: border-box; } #header .header-mid .search-bar .search-cat > a { display: block; font-family: 'Malgun Gothic'; font-size: 17px; line-height: 17px; text-decoration: none; color: #535353; padding: 7px 0 10px 7px; background: #fff url(../../../images/stm/front/icon/search-cat.png) no-repeat 100% 0; } #header .header-mid .search-bar .search-cat.on > a { background: #fff url(../../../images/stm/front/icon/search-cat-clicked.png) no-repeat 100% 0; } #header .header-mid .search-bar .search-cat.on ul.search-subcat { display: block; position: absolute; z-index: 9999; margin-top: 2px; left: -1px; width: 100%; border: 1px solid #a91539; border-top: 0; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li { background: #fff; border-bottom: 1px solid #d8d8d8; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li:last-child { border-bottom: 0; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li > a { display: block; text-decoration: none; color: #535353; padding: 12px 10px 12px 10px; font-size: 15px; line-height: 15px; font-family: 'Malgun Gothic'; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li > a:hover { background: #efefef; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li.has-subs > a { background: #fff url(../../../images/stm/front/icon/icon_cat_subs.png) no-repeat 100% 50%; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li.has-subs > a:hover { background: #efefef url(../../../images/stm/front/icon/icon_cat_subs.png) no-repeat 100% 50%; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li.has-subs ul { display: none; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li.has-subs.open > a { color: #1b1b1b; background: #efefef url(../../../images/stm/front/icon/icon_cat_subs_clicked.png) no-repeat 100% 50%; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li.has-subs.open ul { display: block; border-top: 1px solid #d8d8d8; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li.has-subs.open ul > li { border-bottom: 1px solid #d8d8d8; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li.has-subs.open ul > li:last-child { border-bottom: 0; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li.has-subs.open ul > li > a { display: block; text-decoration: none; padding: 12px 0 12px 19px; font-size: 13px; line-height: 13px; color: #707070; font-family: 'Malgun Gothic'; background: #fff url(../../../images/stm/front/icon/icon_cat_arrow.png) no-repeat 0% 50%; } #header .header-mid .search-bar .search-cat.on ul.search-subcat > li.has-subs.open ul > li:hover > a { color: #000000; background: #f7f7f7 url(../../../images/stm/front/icon/icon_cat_arrow.png) no-repeat 0% 50%; } #header .header-mid .search-bar .search-cat ul.search-subcat { display: none; } #header .header-mid .search-bar .search { float: right; position: relative; } #header .header-mid .search-bar .search form { float: left; background: #a91539; } #header .header-mid .search-bar .search form div { float: left; } #header .header-mid .search-bar .search form div.btn { width: 78px; } #header .header-mid .search-bar .search input { float: left; } #header .header-mid .search-bar .search input[type=text] { width: 387px; height: 32px; padding-left: 11px; margin: 3px; border: 0; font-family: 'Malgun Gothic'; font-size: 17px; line-height: 30px; color: #535353; } #header .header-mid .search-bar .search .mode-btns { display: inline-block; } #header .header-mid .search-bar .search .mode-btns > a { float: left; padding: 9px 15px; margin: 0 0 0 6px; color: #fff; font-size: 13px; font-weight: bold; text-decoration: none; } #header .header-mid .search-bar .search .mode-btns > a:before { display: inline-block; vertical-align: middle; margin: 0 5px 3px 0; } #header .header-mid .search-bar .search .mode-btns > a.btn-mypage { background: #f38f4a; border: 1px solid #ef7d3a; border-bottom: 1px solid #d95f2b; } #header .header-mid .search-bar .search .mode-btns > a.btn-mypage:before { content: url(../../../images/stm/front/icon/icon_mypage.png); } #header .header-mid .search-bar .search .mode-btns > a.btn-prof-management { background: #fa6861; border: 1px solid #ed544d; border-bottom: 1px solid #c13833; } #header .header-mid .search-bar .search .mode-btns > a.btn-prof-management:before { content: url(../../../images/stm/front/icon/icon_prof_management.png); } #header .header-mid .search-bar .search .mode-btns > a.btn-sys-management { background: #fa6861; border: 1px solid #ed544d; border-bottom: 1px solid #c13833; } #header .header-mid .search-bar .search .mode-btns > a.btn-sys-management:before { content: url(../../../images/stm/front/icon/icon_gear.png); } #header .header-mid .search-bar .search .mode-btns:hover { background: #fff; } #header .header-mid .search-bar .search button[type=submit] { width: 100%; height: 38px; padding: 0; font-size: 15px; font-weight: 700; background: #a91539; cursor: pointer; color: #fff; border: 0; } #header .header-mid .search-bar .search button[type=submit]:after { content: url(../../../images/stm/front/icon/icon_search_m.png); display: inline-block; vertical-align: middle; margin: 0 0 2px 10px; } #header .header-mid .search-bar .search .write-after { clear: both; display: none; width: 99.6%; position: absolute; top: 40px; border: 1px solid #a91539; border-top: 0; z-index: 999; } #header .header-mid .search-bar .search .write-after.display { display: block; } #header .header-mid .search-bar .search .write-after .wf-top { display: table; width: 100%; height: 38px; background: #f0f0f0; box-sizing: border-box; } #header .header-mid .search-bar .search .write-after .wf-top .wf-text { display: table-cell; color: #1b1b1b; padding: 0 0 0 10px; font: normal 13px/13px 'Malgun Gothic'; } #header .header-mid .search-bar .search .write-after .wf-top .wf-text span { display: inline-block; padding-top: 5px; padding-right: 24px; background: url(../../../images/stm/front/icon/icon_writeafterarrow.png) no-repeat 100% 9px; } #header .header-mid .search-bar .search .write-after .wf-top .wf-btn { display: table-cell; width: 114px; padding: 8px 10px 0 0; text-align: right; } #header .header-mid .search-bar .search .write-after .wf-top .wf-btn button { padding: 0; color: #fff; font: normal 11px/11px 'Malgun Gothic'; cursor: pointer; } #header .header-mid .search-bar .search .write-after .wf-top .wf-btn button.btn-delete { width: 58px; height: 21px; background: #797979; border: 1px solid #646464; } #header .header-mid .search-bar .search .write-after .wf-top .wf-btn button.btn-close { width: 36px; height: 21px; background: #4d4d4d; border: 1px solid #242424; } #header .header-mid .search-bar .search .write-after ul { background: #fff; } #header .header-mid .search-bar .search .write-after ul li { border-top: 1px solid #dedede; padding: 8px 11px 8px 11px; } #header .header-mid .search-bar .search .write-after ul li div { display: table; width: 100%; } #header .header-mid .search-bar .search .write-after ul li div span { color: #626262; vertical-align: middle; } #header .header-mid .search-bar .search .write-after ul li div span.keyword-text { display: table-cell; font: normal 15px/15px 'Malgun Gothic'; } #header .header-mid .search-bar .search .write-after ul li div span.keyword-text a { display: inline-block; width: 100%; color: #626262; /*padding:8px 0 8px 11px;*/ box-sizing: border-box; text-decoration: none; } #header .header-mid .search-bar .search .write-after ul li div span.keyword-text a:hover { color: #000; } #header .header-mid .search-bar .search .write-after ul li div span.keyword-date { width: 103px; display: table-cell; vertical-align: top; text-align: right; } #header .header-mid .search-bar .search .write-after ul li div span.keyword-date .date { display: inline-block; /*padding-top:5px;*/ vertical-align: top; } #header .header-mid .search-bar .search .write-after ul li div span.keyword-date a { display: inline-block; width: 22px; height: 22px; vertical-align: middle; /*margin-top:4px;*/ margin-left: 5px; } #header .header-mid .search-bar .search .write-after ul li:hover { background: #fbfbfb; } #header .main-menu { border-top: 1px solid #e7e7e7; } #header .main-menu .menu { display: table; width: 100%; } #header .main-menu .menu > li { position: relative; display: table-cell; width: 139px; border-right: 1px solid #e7e7e7; } #header .main-menu .menu > li:first-child { border-left: 1px solid #e7e7e7; } #header .main-menu .menu > li > a { display: block; height: 12px; padding: 10px 0 19px; text-align: center; text-decoration: none; color: #715227; } #header .main-menu .menu > li > ul { display: none; position: absolute; width: 100%; left: -1px; border: 1px solid #000; background: #f7f7f9; font-size: 12px; } #header .main-menu .menu > li > ul > li > a { display: block; height: 31px; padding: 9px 0 0 14px; color: #626262; text-decoration: none; } #header .main-menu .menu > li > ul > li > a:hover { background: #ebebeb; color: #000; } #header .main-menu .menu > li > ul > li + li { border-top: 1px solid #e8e8e9; } #header .main-menu .menu > li > ul.show { display: block; } #header .main-menu .menu > li:hover > a { color: #a91539; } #header .main-menu .menu > li:hover > ul { display: block; } #header .main-menu .menu > li.on { background: #2b2b2b; border-top: 1px solid #a91539; border-right: 1px solid #000; border-left: 1px solid #000; margin-top: -1px; } #header .main-menu .menu > li.on > a { font-weight: 700; color: #fff; } #header .main-menu .menu > li + .on { margin-left: -1px; position: relative; z-index: 1; } #header .main-menu2 { border-top: 1px solid #e7e7e7; } #header .main-menu2 .wrapper > .top { display: none; } #header .main-menu2 .mask { display: none; } #header .main-menu2.company .menu > li.show ul { width: 99%; } #header .main-menu2.company .menu > li:nth-child(2).show ul { width: 99.2%; } #header .main-menu2 .menu { display: table; width: 100%; font-size: 15px; } #header .main-menu2 .menu > li { position: relative; display: table-cell; width: 122px; } #header .main-menu2 .menu > li a { text-decoration: none; } #header .main-menu2 .menu > li > a { display: block; height: 15px; padding: 12px 0 17px; text-align: center; color: #1b1b1b; border-right: 1px solid #e7e7e7; font-weight: 700; } #header .main-menu2 .menu > li.mobile-menu { display: none; } #header .main-menu2 .menu > li:first-child > a { border-left: 1px solid #e7e7e7; } #header .main-menu2 .menu > li + li.show { position: relative; z-index: 1; } #header .main-menu2 .menu > li + li.show > a, #header .main-menu2 .menu > li + li.show > ul { /*margin-left: -1px;*/ } #header .main-menu2 .menu > li.show { background: #a91539; position: relative; } #header .main-menu2 .menu > li.show > a { color: #fff; border: 1px solid #8d112f; border-bottom: 0; margin-top: -1px; } #header .main-menu2 .menu > li.show > ul { display: block; } #header .main-menu2 .menu > li:nth-child(2).show ul { width: 98.9%; } #header .main-menu2 .menu > li:nth-child(3).show ul { width: 99%; } #header .main-menu2 .menu > li:nth-child(5).show ul { width: 98.9%; } #header .main-menu2 .menu > li:last-child > ul { right: 0; } #header .main-menu2 .menu > li > ul { display: none; position: absolute; top: 100%; width: 98.8%; border: 1px solid #8d112f; background: #fff; } #header .main-menu2 .menu > li > ul > li + li { border-top: 1px solid #e6e6e6; } #header .main-menu2 .menu > li > ul > li > a { display: block; padding: 10px 0 10px 12px; color: #535353; font-size: 13px; } #header .main-menu2 .menu > li > ul > li > a:hover { background: #f2f2f2; color: #1b1b1b; } #header .main-menu2 .menu > li > ul > li > ul { display: none; } #header .main-menu2 .menu > li.btns { overflow: hidden; vertical-align: top; } #header .main-menu2 .menu > li.btns > a { float: left; padding: 6px 15px 9px; margin: 6px 0 6px 6px; color: #fff; font-size: 13px; } #header .main-menu2 .menu > li.btns > a:before { display: inline-block; vertical-align: middle; margin: 0 5px 3px 0; } #header .main-menu2 .menu > li.btns > a.btn-mypage { background: #f38f4a; border: 1px solid #ef7d3a; border-bottom: 1px solid #d95f2b; } #header .main-menu2 .menu > li.btns > a.btn-mypage:before { content: url(../../../images/stm/front/icon/icon_mypage.png); } #header .main-menu2 .menu > li.btns > a.btn-prof-management { background: #fa6861; border: 1px solid #ed544d; border-bottom: 1px solid #c13833; } #header .main-menu2 .menu > li.btns > a.btn-prof-management:before { content: url(../../../images/stm/front/icon/icon_prof_management.png); } #header .main-menu2 .menu > li.btns > a.btn-sys-management { background: #fa6861; border: 1px solid #ed544d; border-bottom: 1px solid #c13833; } #header .main-menu2 .menu > li.btns > a.btn-sys-management:before { content: url(../../../images/stm/front/icon/icon_gear.png); } #header .main-menu2 .menu > li.btns:hover { background: #fff; } #header .main-menu2 .menu > li.btns:hover > a { margin: 6px 0 6px 6px; } #header .main-menu2.menu-admin .menu > li { width: 122px; } #header .main-menu2.menu-admin .menu > li.btns { width: 261px; } #header .main-menu2.menu-admin .menu > li.btns > a { width: 91px; } #header .main-menu2.menu-user .menu > li { width: 145px; } #header .main-menu2.menu-user .menu > li.btns { width: 108px; } #header .main-menu2.menu-user .menu > li.btns .btn-mypage { width: 94px; } .ntsub-content .component-list { padding-top: 0; } .result-panel { height: 42px; padding-top: 10px; background: #3a3a3a; border-top: 1px solid #000; border-bottom: 1px solid #000; } .result-panel .wrapper { display: table; vertical-align: top; table-layout: fixed; } .result-panel .category-box { display: table-cell; width: 64px; vertical-align: top; } .result-panel .category-box.three-letter { width: 78px; } .result-panel .category-box.four-letter { width: 90px; } .result-panel .category-box.five-letter { width: 104px; } .result-panel .category-box.eight-letter { width: 142px; } .result-panel .category-box .category { display: inline-block; height: 100%; padding: 0 13px; font: bold 13px/30px 'Malgun Gothic'; color: #fff; border: 1px solid #7f7f7f; background: url(../../../images/stm/front/bg/bg_03.jpg) repeat 0 0; } .result-panel .search-box { display: table-cell; overflow: hidden; height: 28px; padding: 0; border: 1px solid #696969; } .result-panel .search-box .search-box-inner { display: table; width: 100%; vertical-align: top; } .result-panel .search-box label { display: table-cell; height: 28px; width: 69px; padding-left: 8px; color: #cecece; font: bold 13px/28px 'Malgun Gothic'; border-right: 1px solid #4f4f4f; vertical-align: top; } .result-panel .search-box label:after { display: inline-block; width: 16px; height: 16px; margin: 7px 0 0 6px; content: ''; vertical-align: top; background: url(../../../images/stm/front/icon/icon_search.png) no-repeat 0 0; } .result-panel .search-box input[type=text] { float: left; width: 100%; height: 28px; padding: 0 0 0 8px; background: #252525; color: #e5e5e5; font-size: 15px; border: none; font-weight: bold; box-sizing: border-box; } .result-panel .search-box span.input-text { display: table-cell; height: 28px; background: #252525; border: 1px solid #000; } .result-panel .search-box span.input-text a { display: inline-block; color: #fff; text-decoration: none; } .result-panel .search-box span.input-text a:after { display: inline-block; content: ","; } .result-panel .search-box span.input-text a:last-child:after { display: inline-block; content: ""; } .result-panel .search-btn { float: right; width: 132px; height: 30px; border: 1px solid #696969; text-decoration: none; color: #fff; text-indent: 40px; font: bold 13px/30px 'Malgun Gothic'; background: #4f4f4f url(../../../images/stm/front/btn/btn_arrow_up.jpg) no-repeat 0 0; } .result-panel .search-btn.close { background: #4f4f4f url(../../../images/stm/front/btn/btn_arrow_down.jpg) no-repeat 0 0; } .container { position: relative; z-index: 1; } .container .btn-top { position: absolute; top: 79px; right: 0; width: 48px; height: 46px; margin-top: 0; padding-top: 10px; border: 1px solid #000; box-sizing: border-box; color: #fff; font: bold 13px/20px 'Malgun Gothic'; text-align: center; cursor: pointer; background: #0f0f0f; z-index: 9999; text-decoration: none; } .container .btn-top span.top_arrow { display: block; height: 9px; box-sizing: border-box; background: url(../../../images/stm/front/icon/icon_backtotop.png) no-repeat 50%; } .container .btn-top:hover span.top_arrow { background: url(../../../images/stm/front/icon/icon_backtotop_hover.png) no-repeat 50%; } #container { position: relative; z-index: 1; } #container.mask { width: 100%; height: 100%; opacity: 0.45; filter: alpha(opacity=45); } #container .btn-top { position: absolute; top: 79px; right: 0; width: 48px; height: 46px; margin-top: 0; padding-top: 10px; border: 1px solid #000; box-sizing: border-box; color: #fff; font: bold 13px/20px 'Malgun Gothic'; text-align: center; cursor: pointer; background: #0f0f0f; z-index: 9999; text-decoration: none; } #container .btn-top span.top_arrow { display: block; height: 9px; box-sizing: border-box; background: url(../../../images/stm/front/icon/icon_backtotop.png) no-repeat 50%; } #container .btn-top:hover span.top_arrow { background: url(../../../images/stm/front/icon/icon_backtotop_hover.png) no-repeat 50%; } #container .btn-top-nt { position: fixed; top: 244px; right: 0; margin-top: 0; cursor: pointer; z-index: 100; text-decoration: none; } #container .btn-top-nt div.quicklinks { border-top: 1px solid #594f3f; border-left: 1px solid #594f3f; } #container .btn-top-nt div.quicklinks a { text-decoration: none; border-bottom: 1px solid #7a6c56; } #container .btn-top-nt div.quicklinks a .qtxt { display: none; } #container .btn-top-nt div.quicklinks a:last-child { border-bottom: 0; } #container .btn-top-nt div.quicklinks a.quick01 { display: block; width: 47px; height: 46px; box-sizing: border-box; background: #928067 url(../../../images/stm/front/icon/icon_quick01.png) no-repeat 50%; } #container .btn-top-nt div.quicklinks a.quick02 { display: block; width: 47px; height: 46px; box-sizing: border-box; background: #928067 url(../../../images/stm/front/icon/icon_quick02.png) no-repeat 50%; } #container .btn-top-nt div.quicklinks a.quick03 { display: block; width: 47px; height: 46px; box-sizing: border-box; background: #928067 url(../../../images/stm/front/icon/icon_quick03.png) no-repeat 50%; } #container .btn-top-nt div.quicklinks a.quick04 { display: block; width: 47px; height: 46px; box-sizing: border-box; background: #928067 url(../../../images/stm/front/icon/icon_quick04.png) no-repeat 50%; } #container .btn-top-nt div.quicklinks a.quick05 { display: block; width: 47px; height: 46px; box-sizing: border-box; background: #928067 url(../../../images/stm/front/icon/icon_quick05.png) no-repeat 50%; } #container .btn-top-nt .top_arrow { display: block; width: 48px; height: 48px; text-decoration: none; box-sizing: border-box; background: #0f0f0f url(../../../images/stm/front/icon/icon_backtotop.png) no-repeat 50%; } #container .btn-top-nt .top_arrow .qtxt { display: none; } #container .btn-top-nt:hover span.top_arrow { background: #0f0f0f url(../../../images/stm/front/icon/icon_backtotop.png) no-repeat 50%; } #container .btn-top-nt:hover div.quicklinks a { width: 169px; background-position: 10px 50%; } #container .btn-top-nt:hover div.quicklinks a .qtxt { display: inline-block; color: #ffffff; padding-top: 17px; padding-left: 46px; font: bold 13px/13px 'Malgun Gothic'; } #container .btn-top-nt:hover div.quicklinks a.quick01:hover { height: 46px; box-sizing: border-box; background: #7a6c56 url(../../../images/stm/front/icon/icon_quick01.png) no-repeat 10px 50%; } #container .btn-top-nt:hover div.quicklinks a.quick02:hover { height: 46px; box-sizing: border-box; background: #7a6c56 url(../../../images/stm/front/icon/icon_quick02.png) no-repeat 10px 50%; } #container .btn-top-nt:hover div.quicklinks a.quick03:hover { height: 46px; box-sizing: border-box; background: #7a6c56 url(../../../images/stm/front/icon/icon_quick03.png) no-repeat 10px 50%; } #container .btn-top-nt:hover div.quicklinks a.quick04:hover { height: 46px; box-sizing: border-box; background: #7a6c56 url(../../../images/stm/front/icon/icon_quick04.png) no-repeat 10px 50%; } #container .btn-top-nt:hover div.quicklinks a.quick05:hover { height: 46px; box-sizing: border-box; background: #7a6c56 url(../../../images/stm/front/icon/icon_quick05.png) no-repeat 10px 50%; } #container .btn-top-nt:hover .top_arrow { width: 170px; background-position: 14px 50%; } #container .btn-top-nt:hover .top_arrow:hover { background: #0f0f0f url(../../../images/stm/front/icon/icon_backtotop_hover.png) no-repeat 14px 50%; } #container .btn-top-nt:hover .top_arrow .qtxt { display: inline-block; color: #ffffff; padding-top: 17px; padding-left: 46px; font: bold 13px/13px 'Malgun Gothic'; } #footer.mask { width: 100%; height: 100%; opacity: 0.45; filter: alpha(opacity=45); } #footer > .wrapper { position: relative; } #footer .footer-top { display: inline-block; width: 100%; border-top: 1px solid #7d0f2a; /*border-top: 1px solid #a91539;*/ border-bottom: 1px solid #dfdfdf; } #footer .footer-top a { text-decoration: none; } #footer .footer-top .footer-menu ul.menu { float: left; } #footer .footer-top .footer-menu ul.menu li { float: left; } #footer .footer-top .footer-menu ul.menu li a { display: block; height: 20px; padding: 11px 14px 12px 15px; color: #313131; font-size: 12px; border-right: 1px solid #dfdfdf; } #footer .footer-top .footer-menu ul.menu li:first-child a { border-left: 1px solid #dfdfdf; } #footer .footer-top .footer-menu ul.menu li.privacy a { color: #a26a38; } #footer .footer-top .go-top { float: right; height: 21px; margin-bottom: -1px; padding: 11px 10px; border-bottom: 1px solid #7d0f2a; background: #a91539; color: #fff; font-weight: 700; } #footer .footer-top .go-top:after { content: url(../../../images/stm/front/icon/icon_go_top.png); display: inline-block; margin: -2px 0 0 11px; vertical-align: middle; } #footer .quicklink { overflow: hidden; height: 80px; background: #f8f9fa; border-bottom: 1px solid #dfdfdf; } #footer .quicklink .wrapper { position: relative; text-align: center; } #footer .quicklink #ql-slider { margin: 10px 45px 0 55px; padding: 0; border: 0; background: #f8f9fa; white-space: nowrap; text-align: center; } #footer .quicklink #ql-slider .flex-viewport { height: 65px; text-align: center !important; } #footer .quicklink #ql-slider .slides { text-align: center; } #footer .quicklink #ql-slider .slides > li { width: 210px; height: 60px; text-align: center; } #footer .quicklink #ql-slider .slides > li img { display: inline; width: 210px; height: 60px; } #footer .quicklink .custom-nav { position: absolute; top: 14px; margin: 0; } #footer .quicklink .custom-nav.btnprev { left: 5px; } #footer .quicklink .custom-nav.btnnext { right: 5px; } #footer .quicklink .custom-nav a { display: block; width: 32px; height: 32px; background: url(../../../images/stm/front/btn/btn_quicklink_nav.png) no-repeat 0 0; text-decoration: none; } #footer .quicklink .custom-nav a.flex-next { background-position: -32px 0; } #footer .quicklink .custom-nav a.flex-disabled { cursor: default; } #footer .quicklink .custom-nav.flex-disabled a { cursor: default; } #footer .footer-mid { display: inline-block; width: 100%; padding: 20px 0 35px; } #footer .footer-mid .footer-mid-left { float: left; width: 800px; } #footer .footer-mid .footer-mid-left .logo { float: left; margin-right: 30px; } #footer .footer-mid .footer-mid-left .copyright { margin-top: -3px; color: #7d7d7d; font-size: 12px; } #footer .footer-btn { position: absolute; top: 20px; right: 190px; } #footer .right-fam { float: right; position: relative; } #footer .right-fam .family-site { position: absolute; top: -1px; right: 0; overflow: hidden; background: #a91539; } #footer .right-fam .family-site a { display: block; width: 168px; color: #535353; text-decoration: none; } #footer .right-fam .family-site > a { height: 43px; color: #fff; border: 1px solid #7d0f2a; } #footer .right-fam .family-site > a span { display: inline-block; padding: 12px 14px 15px 12px; } #footer .right-fam .family-site > a span.arrow { float: right; display: inline-block; height: 41px; width: 41px; padding: 0; border-left: 1px solid #991333; background: url(../../../images/stm/front/icon/fmsite_open.png) no-repeat 50%; } #footer .right-fam .family-site.on { overflow: visible; } #footer .right-fam .family-site.on span.arrow { background: url(../../../images/stm/front/icon/fmsite_close.png) no-repeat 50%; } #footer .right-fam .family-site > ul { position: absolute; bottom: 100%; right: 0; left: 0; width: 170px; background: #9a0e36; border-bottom: 0; z-index: 11; } #footer .right-fam .family-site > ul > li + li { border-top: 1px solid #810f2b; } #footer .right-fam .family-site > ul > li > a { color: #fff; padding: 14px; box-sizing: border-box; width: 100%; } #footer .right-fam .family-site > ul > li > a:hover { color: #fff; background: #810f2b; } #footer .right-fam .family-site > ul > li.on { color: #fff; background: #810f2b; } .backtotop2 { display: none; } /*WIDTH 768px*/ @media screen and (max-width: 1023px) { .wrapper { max-width: 100%; } #header .right-top-menu .menu > li.user-info.on { position: relative; border-bottom: 0; } #header .right-top-menu .menu > li.user-info.on:after { width: 100%; display: inline-block; position: absolute; left: 0; bottom: -1px; content: ''; border-bottom: 1px solid #584b39; } #header .right-top-menu .menu > li.user-info.on a { padding-bottom: 8px; } #header .user-info-panel { position: relative; top: 0; left: 0; width: 100%; padding: 0; overflow: hidden; } #header .user-info-panel .uip-wrap { display: table; float: left; width: 100%; margin: 15px 0; overflow: hidden; } #header .user-info-panel .info-holder { float: none; display: table-cell; width: 100%; max-width: 100%; margin-bottom: 0; vertical-align: top; } #header .user-info-panel .info-holder span.image-holder { min-width: 47px; max-width: 88px; padding-left: 14px; } #header .user-info-panel .info-holder span.image-holder .image { margin-right: 0; } #header .user-info-panel .btns { float: none; display: table-cell; width: auto; margin-top: 0; margin-right: 15px; padding-top: 0; padding-right: 10px; padding-left: 10px; border-top: 0; border-left: 1px solid #84745e; vertical-align: middle; } #header .user-info-panel .btns .btn-holder a { font-weight: bold; } #header .user-info-panel .btns .btn-holder a.btn-logout { width: 69px; height: 54px; padding: 9px 0 0 0; line-height: 17px; vertical-align: middle; border: 1px solid #645746; border-bottom: 1px solid #53483a; border-right: 0; text-align: center; box-sizing: border-box; } #header .user-info-panel .btns .btn-holder a.btn-logout:before { content: ''; display: block; width: 11px; height: 12px; margin: 0 auto 6px auto; background: url(../../../images/stm/front/icon/icon_lock.png) no-repeat 0 0; } #header .user-info-panel .btns .btn-holder a.btn-close { width: 54px; height: 54px; padding: 8px 0 0 0; line-height: 19px; color: #d3c8ae; text-align: center; margin-left: 9px; box-sizing: border-box; } #header .user-info-panel .btns .btn-holder a.btn-close:before { content: url(../../../images/stm/front/btn/btn_user_info_close.jpg); margin: 3px 0 6px 0; } #header .user-info-panel .btns .btn-holder a.btn-close br { display: none; } #header .header-mid { position: relative; padding: 12px 0 0 0; margin-bottom: 0; } #header .header-mid .logo { margin-left: 15px; } #header .header-mid .contact_btn_kurn { margin-right: 15px; } #header .header-mid #btn-index-nt { display: inline-block; margin-bottom: 13px; } #header .header-mid .search-bar { display: table; table-layout: fixed; width: 100%; float: none; margin-right: 15px; padding: 12px 15px 12px 15px; box-sizing: border-box; border-top: 1px solid #ebebeb; } #header .header-mid .search-bar .search-cat { vertical-align: top; display: table-cell; float: none; } #header .header-mid .search-bar .search { display: table-cell; float: none; width: 100%; } #header .header-mid .search-bar .search .search-form { margin: 0 0 0 5px; } #header .header-mid .search-bar .search .search-form form { float: none; display: table; padding: 0; table-layout: fixed; width: 100%; } #header .header-mid .search-bar .search .search-form form input[type="text"] { float: none; width: 100%; } #header .header-mid .search-bar .search .search-form form > div { float: none; display: table-cell; vertical-align: top; } #header .header-mid .search-bar .search .write-after { width: 99.4%; margin-left: 5px; box-sizing: border-box; } #header .main-menu2 { display: none; position: absolute; top: 33px; width: 100%; z-index: 10000; border-top: 0; } #header .main-menu2.show { display: block; } #header .main-menu2.show .mask { display: block; } #header .main-menu2.on { position: fixed; top: 0; } #header .main-menu2 .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; z-index: 100; } #header .main-menu2 .wrapper { position: relative; float: right; right: 0; top: 0; width: 480px; height: 100%; background: #fff url(../../../images/stm/front/bg/bg_menu_base.jpg) repeat-y 0 0; z-index: 10000; } #header .main-menu2 .wrapper .menu-base { float: left; width: 119px; height: 100%; border-right: 1px solid #ebebeb; background: #f5f5f5; } #header .main-menu2 .wrapper > .top { display: block; overflow: hidden; border-bottom: 1px solid #950024; background: #fff; } #header .main-menu2 .wrapper > .top .title { float: left; margin: 22px 0 0 15px; font: bold 17px/17px 'Malgun Gothic'; color: #1b1b1b; } #header .main-menu2 .wrapper > .top .title span { float: left; padding-right: 8px; margin-right: 8px; font-size: 19px; line-height: 18px; color: #8f012b; border-right: 1px solid #d3d3d3; } #header .main-menu2 .wrapper > .top .btns { float: right; } #header .main-menu2 .wrapper > .top .btns a { float: left; width: 66px; height: 64px; border-left: 1px solid #e6e6e6; text-decoration: none; text-align: center; } #header .main-menu2 .wrapper > .top .btns > a.home { display: none; width: 69px; font: bold 13px/62px 'Malgun Gothic'; color: #dd8025; } #header .main-menu2 .wrapper > .top .btns > a.close { background: url(../../../images/stm/front/btn/btn_close.png) no-repeat 50% 50%; } #header .main-menu2 .wrapper .bottom { overflow-y: scroll; overflow-x: hidden; box-sizing: border-box; } #header .main-menu2.menu-admin .menu > li { width: 100%; box-sizing: border-box; } #header .main-menu2 .menu { float: left; width: 119px; position: relative; border-left: 0; box-sizing: border-box; } #header .main-menu2 .menu > li { position: static; display: block; border: 0; } #header .main-menu2 .menu > li.on > a { background: #cd0244; color: #fff; } #header .main-menu2 .menu > li.on > ul { display: block; } #header .main-menu2 .menu > li > a { display: block; width: 103px; height: 63px; border-left: 0; border-right: 0; margin-left: 0; padding: 0 0 0 16px; border-bottom: 1px solid #ebebeb; text-align: left; font: normal 15px/60px 'Malgun Gothic'; color: #7d7d7d; } #header .main-menu2 .menu > li:first-child > a { border-left: 0; border-right: 0; } #header .main-menu2 .menu > li.mobile-menu { display: block; } #header .main-menu2 .menu > li > ul { position: absolute; top: 0; width: 360px; left: 120px; border: 0; box-sizing: border-box; } #header .main-menu2 .menu > li > ul > li { border-top: 0; border-bottom: 1px solid #dcdcdc; } #header .main-menu2 .menu > li > ul > li + li { border-top: 0; border-bottom: 1px solid #dcdcdc; } #header .main-menu2 .menu > li > ul > li > a { padding-top: 15px; padding-bottom: 16px; font: normal 15px/16px 'Malgun Gothic'; color: #313131; } #header .main-menu2 .menu > li > ul > li > a:hover { background: none; color: #313131; } #header .main-menu2 .menu > li > ul > li.on > a { color: #a91539; } #header .main-menu2 .menu > li > ul > li.sub > a { display: block; } #header .main-menu2 .menu > li > ul > li.sub > a:after { float: right; content: ''; width: 14px; height: 7px; background: url(../../../images/stm/front/btn/btn_arrow_down7.png) no-repeat; margin: 4px 18px 0 0; } #header .main-menu2 .menu > li > ul > li.sub > a.open:after { background: url(../../../images/stm/front/btn/btn_arrow_up7.png) no-repeat; } #header .main-menu2 .menu > li > ul > li.sub > ul.show { display: block; } #header .main-menu2 .menu > li > ul > li.sub > ul > li { border-top: 1px solid #efefef; } #header .main-menu2 .menu > li > ul > li.sub > ul > li > a { display: block; padding: 14px 0 16px 15px; line-height: 13px; color: #707070; font-size: 13px; } #header .main-menu2 .menu > li > ul > li.sub > ul > li > a.on { color: #313131; background: #fafafa; } #header .main-menu2 .menu > li > ul > li.sub > ul > li > a:hover { color: #313131; } .result-panel .wrapper { padding: 0 15px; box-sizing: border-box; } #container .btn-top-nt { display: none; } #footer { display: block; } #footer .wrapper { max-width: 980px; } #footer .footer-top { display: block; border-top: 2px solid #7d0f2a; border-bottom: 0; /*.footer-menu{ display:block; .menu-holder{ display:block; ul.menu { float:none; display:table; width:100%; li{ display:table-cell; width:49%; border-top:0; border-left:1px solid #dfdfdf; text-align:left; &:first-child{ border-left:0; } &:nth-child(3){ border-left:0; } a{ border-left:0; border-right:0; padding: 11px 14px 12px 8px; } } } } }*/ } #footer .footer-top .wrapper { max-width: 100%; } #footer .footer-top .footer-menu { /*display:table;*/ table-layout: fixed; } #footer .footer-top .footer-menu .menu-holder { /*display:table-cell;*/ display: block; } #footer .footer-top .footer-menu ul.menu { float: none; width: 100%; display: table; vertical-align: top; table-layout: fixed; } #footer .footer-top .footer-menu ul.menu li { display: table-cell; float: none; width: 25%; } #footer .footer-top .footer-menu ul.menu li > a { height: 21px; } #footer .footer-top .footer-menu ul.menu li:first-child > a { border-left: 0; } #footer .footer-top .footer-menu ul.menu li:last-child > a { border-right: 0; } #footer .footer-top .footer-menu .go-top { display: table-cell; width: 58px; float: none; } #footer .footer-top .footer-menu .menu-holder ul.menu li a { padding: 11px 14px 12px 15px; } #footer .right-fam { display: block; float: none; width: 100%; } #footer .right-fam .family-site { display: block; position: relative; width: 100%; background: #fff; } #footer .right-fam .family-site.on > a { border-bottom: 0; } #footer .right-fam .family-site.on > a span.arrow { border-left: 0; background: url(../../../images/stm/front/icon/icon_mbfmsite_open.png) no-repeat 50%; } #footer .right-fam .family-site.on > ul { display: block; } #footer .right-fam .family-site > a { width: 100%; color: #1b1b1b; border: 0; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; } #footer .right-fam .family-site > a:after { display: none; } #footer .right-fam .family-site > a span { display: inline-block; float: left; padding: 13px 0 0 15px; text-align: left; } #footer .right-fam .family-site > a span.arrow { border-left: 0; background: url(../../../images/stm/front/icon/icon_mbfmsite_close.png) no-repeat 50%; } #footer .right-fam .family-site > ul { display: none; width: 100%; bottom: 0; position: relative; border: 0; background: #7b7b7b; left: 0; } #footer .right-fam .family-site > ul > li > a { padding: 15px 15px 17px 16px; display: block; width: 100%; box-sizing: border-box; background: #7b7b7b; } #footer .right-fam .family-site > ul > li > a:hover { background: #696969; } #footer .right-fam .family-site > ul > li:first-child { border-top: 1px solid #5d5d5d; } #footer .right-fam .family-site > ul > li:last-child { border-bottom: 1px solid #5d5d5d; } #footer .right-fam .family-site > ul > li + li { border-top: 1px solid #666666; } #footer .footer-mid { display: block; overflow: hidden; padding-bottom: 20px; } #footer .footer-mid .footer-mid-left { float: left; width: 75%; } .btn-top { display: none; } .backtotop2 { display: block; float: right; position: fixed; bottom: 20px; right: 20px; z-index: 99; } .backtotop2 a.btn-top2 { display: block; width: 52px; height: 52px; color: #fff; margin-right: 10px; text-decoration: none; font: bold 10px/10px 'Malgun Gothic'; background: url(../../../images/stm/front/icon/icon_mbbacktop.png) no-repeat; } .backtotop2 a.btn-top2 span.text { display: block; padding-top: 20px; padding-left: 17px; } .backtotop2 a.btn-top2:hover { background: url(../../../images/stm/front/icon/icon_mbbacktop_hover.png) no-repeat; } } @media screen and (max-width: 1020px) { #footer .footer-top .footer-menu .menu-holder ul.menu li:first-child { display: none; } #footer .footer-top .footer-menu .menu-holder ul.menu li:first-child + li { border-top: 0; } #footer .footer-top .footer-menu .menu-holder ul.menu.findexlogin li:first-child { display: table-cell; } } /*WIDTH 800 px*/ @media screen and (max-width: 1000px) { #header .right-top-menu .menu > li.user-info.on a { padding-bottom: 8px; } #footer .footer-mid { padding-left: 18px; padding-right: 10px; padding-bottom: 31px; width: auto; } } @media screen and (max-width: 979px) { #header .header-mid .search-bar .search .write-after { width: 99.3%; } #header .right-top-menu .menu > li.user-info.on a { padding-bottom: 8px; } } @media screen and (max-width: 866px) { #header .header-mid .search-bar .search .write-after { width: 99.2%; } } @media screen and (max-width: 786px) { #header .header-mid .search-bar .search .write-after { width: 99.1%; } } @media screen and (max-width: 768px) { body { min-width: 320px; } .wrapper { min-width: 320px; position: relative; } #header .right-top-menu .menu > li.user-info { position: static; } #header .header-mid { position: relative; padding: 12px 0 0 0; margin-bottom: 0; } #header .header-mid .logo { margin-left: 15px; } #header .header-mid #btn-index, #header .header-mid #btn-index-nt { display: inline-block; margin-bottom: 13px; } #header .main-menu .menu > li { display: block; width: 100%; border-right: 0; display: none; } #header .main-menu .menu > li > a { padding-left: 15px; text-align: left; background: #4f4f4f; color: #dcdcdc; font-size: 13px; border-top: 1px solid #696969; } #header .main-menu .menu > li > ul { position: relative; border: 0; } #header .main-menu .menu > li > ul > li + li { border-top: 1px solid #e0e0e0; } #header .main-menu .menu > li > ul > li > a { background: #f0f0f2; color: #626262; border-bottom: 0; } #header .main-menu .menu > li > ul > li > a:hover { color: #626262; background: #f0f0f2; } #header .main-menu .menu > li > ul > li.on > a { color: #a91539; background: #fff; } #header .main-menu .menu > li + .on { margin-left: 0; } #header .main-menu .menu > li#menu-control { display: block; border-left: 0; } #header .main-menu .menu > li#menu-control > a { border-top: 0; background: #2b2b2b; color: #fff; font-weight: bold; } #header .main-menu .menu > li#menu-control > a:after { content: ''; float: right; width: 14px; height: 8px; margin: 6px 15px 0 0; background: url(../../../images/stm/front/btn/btn_menu_close.png) no-repeat 0 0; } #header .main-menu .menu > li#menu-control + li > a { border-top: 0; } #header .main-menu .menu > li#menu-control.on ~ li { display: block; } #header .main-menu .menu > li#menu-control.on > a { background: #2b2b2b; color: #fff; font-weight: bold; border-bottom: 1px solid #000; } #header .main-menu .menu > li#menu-control.on > a:after { background: url(../../../images/stm/front/btn/btn_menu_open.png) no-repeat 0 0; } #header .main-menu .menu > li#menu-control:hover > a { color: #fff; } #header .main-menu .menu > li:hover > a { color: #dcdcdc; } #header .main-menu .menu > li:hover > ul { display: none; } #header .main-menu .menu > li.on { background: #4f4f4f; border-right: none; border-top: 0; border-left: 0; margin-top: 0; } #header .main-menu .menu > li.on > a { font-weight: normal; color: #ffffff; background: #696969; } #header .main-menu .menu > li.on > ul { display: block; } #header .main-menu .menu > li.on.sub { background: #696969; border-right: 0; } #header .main-menu .menu > li.on.sub > a { color: #ffffff; } #header .main-menu .menu > li.on.sub > a:after { height: 2px; margin: 8px 16px 0 0; background: url(../../../images/stm/front/btn/btn_menu_sub_open.png) no-repeat; } #header .main-menu .menu > li.sub > a:after { content: ''; float: right; width: 12px; height: 12px; margin: 4px 16px 0 0; background: url(../../../images/stm/front/btn/btn_menu_sub.png) no-repeat 0 0; } #container .btn-top-nt { display: none; } #index { display: none; position: absolute; top: 33px; width: 100%; z-index: 10000; } #index.on { position: fixed; top: 0; } #index .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; z-index: 100; } #index .index-menu { position: relative; float: right; right: 0; top: 0; width: 480px; height: 100%; background: #fff; z-index: 10000; } #index .index-menu .top { overflow: hidden; height: 65px; border-bottom: 1px solid #950024; } #index .index-menu .top .title { float: left; margin: 22px 0 0 15px; font: bold 17px/17px 'Malgun Gothic'; color: #1b1b1b; } #index .index-menu .top .title span { float: left; padding-right: 8px; margin-right: 8px; font-size: 19px; line-height: 18px; color: #8f012b; border-right: 1px solid #d3d3d3; } #index .index-menu .top .btns { float: right; } #index .index-menu .top .btns > a { float: left; width: 66px; height: 64px; border-left: 1px solid #e6e6e6; text-decoration: none; text-align: center; } #index .index-menu .top .btns > a.home { width: 69px; font: bold 13px/62px 'Malgun Gothic'; color: #dd8025; } #index .index-menu .top .btns > a.close { background: url(../../../images/stm/front/btn/btn_close.png) no-repeat 50% 50%; } #index .index-menu .bottom { backgroun: #fff; overflow-y: scroll; } #index .index-menu .bottom a { text-decoration: none; } #index .index-menu .bottom > ul > li { border-bottom: 1px solid #ebebeb; } #index .index-menu .bottom > ul > li.sub > a { background: url(../../../images/stm/front/btn/btn_arrow_down5.png) no-repeat 95.47% 50%; } #index .index-menu .bottom > ul > li.sub.on > a { background: #cd0244 url(../../../images/stm/front/btn/btn_arrow_up5.png) no-repeat 95.47% 50%; } #index .index-menu .bottom > ul > li > a { display: block; padding: 12px 0 12px 15px; font: normal 15px/18px 'Malgun Gothic'; color: #313131; } #index .index-menu .bottom > ul > li > ul { display: none; } #index .index-menu .bottom > ul > li > ul > li { border-top: 1px solid #efefef; } #index .index-menu .bottom > ul > li > ul > li > a { display: block; padding: 13px 0 13px 15px; color: #707070; font-size: 13px; } #index .index-menu .bottom > ul > li > ul > li.on a { background: #fafafa; color: #313131; } #index .index-menu .bottom > ul > li.on > ul { display: block; } #index .index-menu .bottom > ul > li.on > a { background: #cd0244; color: #fff; } #footer .footer-top .footer-menu { /*display:table;*/ table-layout: fixed; } #footer .footer-top .footer-menu .menu-holder { /*display:table-cell;*/ display: block; } #footer .footer-top .footer-menu ul.menu { float: none; width: 100%; display: table; vertical-align: top; table-layout: fixed; } #footer .footer-top .footer-menu ul.menu li { display: table-cell; float: none; width: 50%; } #footer .footer-top .footer-menu ul.menu li > a { height: 21px; } #footer .footer-top .footer-menu .go-top { display: table-cell; width: 58px; float: none; } #footer .footer-top .footer-menu .menu-holder ul.menu li a { padding: 11px 14px 12px 15px; } #footer .quicklink .custom-nav { margin-top: 8px; } #footer .quicklink .custom-nav.btnprev { left: 20px; } #footer .quicklink .custom-nav.btnnext { right: 20px; } #footer .quicklink .custom-nav a { width: 9px; height: 16px; background: url(../../../images/stm/front/btn/btn_quicklink_nav_mob.png) no-repeat 0 0; } #footer .quicklink .custom-nav a.flex-next { background-position: -9px 0; } #footer .footer-mid { padding-left: 18px; padding-right: 10px; /*padding-bottom:31px;*/ width: auto; } #footer .footer-mid .footer-mid-left { display: table; } #footer .footer-mid .footer-mid-left .logo { display: table-cell; float: none; } #footer .footer-mid .footer-mid-left .copyright { display: table-cell; float: none; vertical-align: top; } #footer .footer-mid .footer-mid-left .copyright p:first-child + p { font-size: 11px; } #footer .footer-btn { display: none; } #footer .family-site { position: relative; top: 0; left: 0; width: 100%; } #footer .family-site a { width: 100%; color: #fff; } #footer .family-site > a { padding-left: 0; padding-right: 0; color: #1b1b1b; border: 0; border-bottom: 1px solid #dfdfdf; } #footer .family-site > ul { position: relative; display: none; border-bottom: 1px solid #5d5d5d; } #footer .family-site > ul > li { border-top: 1px solid #ababab; background: #7b7b7b; } #footer .family-site > ul > li:first-child { border-top: 1px solid #5d5d5d; } #footer .family-site > ul > li + li { border-top: 1px solid #ababab; } #footer .family-site.on > ul { display: block; } #footer .family-site.on > ul > li a:hover { color: #fff; background: #696969; } #footer .family-site.on > ul > li.on { background: #696969; } #footer .family-site.on > ul > li.on a { background: #696969; } #footer .family-site.on > a:after { content: url(../../../images/stm/front/icon/icon_arrow_open.png); } .backtotop2 { bottom: 20px; } } @media screen and (min-width: 540px) and (max-width: 759px) { #footer .quicklink #ql-slider { width: 432px !important; margin-left: auto; margin-right: auto; } } @media screen and (max-width: 725px) { #header .header-mid .search-bar .search .write-after { width: 99%; } } @media screen and (max-width: 674px) { #header .header-mid .search-bar .search .write-after { width: 98.9%; } } /*WIDTH 540 px*/ @media screen and (max-width: 645px) { #footer .footer-top .footer-menu .menu-holder ul.menu li a { padding: 11px 14px 12px 8px; } } @media screen and (max-width: 640px) { #footer .footer-top .footer-menu .menu-holder ul.menu li:first-child { display: none; } #footer .footer-top .footer-menu .menu-holder ul.menu li:first-child + li { border-top: 0; } #footer .footer-top .footer-menu .menu-holder ul.menu.findexlogin li:first-child { display: table-cell; } } @media screen and (max-width: 639px) { #header .header-mid .contact_btn_kurn { display: inline-block; width: 40px; height: 38px; padding-right: 0; } #header .header-mid .contact_btn_kurn > .btn { width: 40px; height: 38px; box-sizing: border-box; padding: 12px 10px 12px 12px; text-indent: -10000px; } #header .header-top .right-top-menu .menu > li.user-info.on a { padding-bottom: 8px; } #header .main-menu2 .menu { width: 80%; } #header .user-info-panel { box-sizing: border-box; } #header .user-info-panel.on { padding-right: 15px; padding-left: 15px; } #header .user-info-panel .uip-wrap { box-sizing: border-box; } #header .user-info-panel .info-holder { display: block; width: 100%; max-width: 100%; padding-bottom: 14px; } #header .user-info-panel .info-holder span.image-holder { padding-left: 0; } #header .user-info-panel .btns { display: table; width: 100%; border-top: 1px solid #84745e; border-left: 0; padding-right: 0; padding-left: 0; margin-right: 0; } #header .user-info-panel .btns .btn-holder a { margin-top: 14px; } #header .user-info-panel .btns .btn-holder a.btn-logout { width: 100%; display: block; padding: 6px 0 7px; height: 28px; font-weight: 700; line-height: 15px; color: #fff; border: 1px solid #645746; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #645746; border-bottom: 1px solid #53483a; background: #f69b00; text-align: center; box-sizing: border-box; } #header .user-info-panel .btns .btn-holder a.btn-logout:before { display: none; } #header .user-info-panel .btns .btn-holder a.btn-close { width: 28px; height: 28px; display: block; margin-left: 7px; padding: 5px 0 0 0; border: 1px solid #3e3225; background: #4e4233; overflow: hidden; } #header .user-info-panel .btns .btn-holder + .btn-holder { width: 28px; height: 28px; } .result-panel { height: auto; padding-bottom: 10px; } .result-panel .wrapper .category-box { display: table; width: 100%; } .result-panel .wrapper .category-box .category { width: 100%; padding: 0; text-align: center; } .result-panel .wrapper .category-box .category.three-letter, .result-panel .wrapper .category-box .category.four-letter, .result-panel .wrapper .category-box .category.five-letter, .result-panel .wrapper .category-box .category.eight-letter { width: 100%; } .result-panel .wrapper .search-box { display: table; width: 100%; margin-top: 8px; } #footer .footer-mid .footer-mid-left .logo { display: none; } #footer .footer-top .footer-menu .menu-holder ul.menu > li { display: block; width: 100%; border-left: 0; border-right: 0; border-top: 1px solid #dfdfdf; } #footer .footer-top .footer-menu .menu-holder ul.menu > li:first-child { border-top: 0; } #footer .footer-top .footer-menu .menu-holder ul.menu > li a { border-left: 0; border-right: 0; padding: 11px 14px 12px 15px; } #footer .footer-top .footer-menu .menu-holder ul.menu.findexlogin li:first-child { display: block; } #footer .footer-top .footer-menu .menu-holder ul.menu.findexlogin li:first-child + li { border-top: 1px solid #dfdfdf; } } @media screen and (max-width: 634px) { #header .header-mid .search-bar .search .write-after { width: 98.8%; } } @media screen and (max-width: 600px) { #header .header-mid .search-bar .search .write-after { width: 98.7%; } } @media screen and (max-width: 558px) { #header .header-mid .search-bar .search .write-after { width: 98.6%; } } /* WIDTH 480px */ @media screen and (max-width: 539px) { #header .header-mid .search-bar .search-cat, #header .header-mid .search-bar .search { display: block; width: 100%; margin-right: 0; margin-left: 0; } #header .header-mid .search-bar .search { margin-top: 6px; } #header .header-mid .search-bar .search .search-form { margin: 0; } #header .header-mid .search-bar .search .write-after { margin-left: 0; width: 100%; } #header .header-top.indexpage .right-top-menu .menu > li { /*width:48%!important;*/ } #header .right-top-menu { float: right !important; } #header .right-top-menu .menu > li { border-left: 1px solid #7a6c56 !important; } #header .right-top-menu .menu > li.user-info { border-left: 1px solid #7a6c56 !important; border-right: 0; } #header .right-top-menu .menu > li.user-info > a:after { margin: 1px 5px 2px 10px; } #header .right-top-menu .menu > li.user-info.on { border-right: 0; border-bottom: 0; border-left: 1px solid #000 !important; } } @media screen and (max-width: 480px) { #header .main-menu2 .wrapper { width: 100%; } #header .right-top-menu { display: table-cell; } #header .right-top-menu .menu { width: auto; float: right; } #header .right-top-menu .menu > li.user-info.on a { padding-bottom: 8px; } #footer .footer-top .footer-menu { position: relative; } #footer .footer-top .footer-menu .menu-holder { float: none; width: 100%; } #footer .footer-top .footer-menu ul.menu { width: 100%; } #footer .footer-top .footer-menu ul.menu li { display: block; width: 100%; height: 43px; } #footer .footer-top .footer-menu ul.menu li a { border-right: 0; border-left: 0; } #footer .footer-top .footer-menu ul.menu li:first-child { border-top: 0; } #footer .footer-top .footer-menu ul.menu li:first-child a { border-left: 0; padding: 11px 14px 12px 15px; } #footer .footer-top .footer-menu .go-top { position: absolute; top: 0; right: 0; } } @media screen and (max-width: 479px) { #index .mask { display: none; } #index .index-menu { width: 100%; } #header .header-top.indexpage .right-top-menu .menu li { width: 50% !important; } #header .header-top .left-top-menu { width: 50%; } #header .header-top .left-top-menu .menu { width: 100%; } #header .header-top .left-top-menu .menu > li { width: 50%; box-sizing: border-box; } #header .header-top .right-top-menu { width: 50%; float: none !important; } #header .header-top .right-top-menu .menu { width: 100%; } #header .header-top .right-top-menu .menu > li { width: 80px; text-align: center; box-sizing: border-box; } #header .header-top .right-top-menu .menu > li a { text-align: center; padding-left: 0; padding-right: 0; } #header .header-top .right-top-menu .menu > li:first-child { border-left: 0 !important; } #header .header-top .right-top-menu .menu > li:last-child { border-right: 0; } #header .header-top .right-top-menu .menu > li.home { width: 50%; } #header .header-top .right-top-menu .menu > li.home a { width: auto; } #header .header-top .right-top-menu .menu > li.user-info { width: 50%; padding-left: 0; padding-right: 0; min-width: 1px; height: 33px; } #header .header-top .right-top-menu .menu > li.user-info a { width: auto; display: block; padding-bottom: 0; } #header .header-top .right-top-menu .menu > li.user-info a span { display: inline-block; width: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #header .header-top .right-top-menu .menu > li.user-info a:after { float: right; margin: 7px 12px 2px -9px; } #header .header-top .right-top-menu .menu > li.user-info.on { position: relative; padding-bottom: 0; height: 32px; border-left: 1px solid #000 !important; } #header .header-top .right-top-menu .menu > li.user-info.on a { padding-bottom: 0; } #header .header-top .right-top-menu .menu > li.user-info.on:after { bottom: -1px; } #header .main-menu2 .wrapper { min-width: 320px; background: #fff url(../../../images/stm/front/bg/bg_menu_base_320.jpg) repeat-y; } #header .main-menu2 .menu { /*width:90px;*/ width: 80%; } #header .main-menu2 .menu > li > a { width: 74px; } #header .main-menu2 .menu > li > ul { left: 90px; width: 100%; } #footer .footer-mid .footer-mid-left { width: 73%; } } @media screen and (max-width: 380px) { #header .main-menu2 .menu > li > ul { width: 95%; } } @media screen and (max-width: 320px) { #header .main-menu2 .menu > li > ul { width: 90%; } } /*# sourceMappingURL=style.css.map */