@charset "utf-8"; @import url(/pcms/common/fonts/ko/Paperlogy/fontStyle.css); @import url(/pcms/common/fonts/ko/pretendard/fontStyle.css); /* 커스텀 컬러값 */ .custom_cl {background-color:#FFF;} /* common */ html * {font-family: 'gothic'; box-sizing: border-box;} label {position: absolute; opacity: 0; visibility: hidden; width: 1px; height: 1px; margin: -1px;} .al_box {position: relative; display: block; max-width: 1520px; width: 100%; height: auto; margin: 0 auto; padding: 0 50px;} .floating_top {position:fixed; left:auto !important; right:20px !important; bottom:20px; width:40px; border:1px solid #ccc; overflow:hidden; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px; border-radius:3px; z-index:999; display:none;} .floating_top a {display:block; width:40px; height:40px; background:#fff url(../images/common/floating_top_btn.gif) no-repeat center 50%;} .floating_top a span {width:0; height:0; line-height:0; font-size:0px; float:left; position:absolute; visibility:hidden; overflow:hidden;} /* header */ #header {width: 100%; height: auto;} #header.fixed {position:fixed; left:0; z-index:101;} .search_box {position: relative; display: block; width: 100%;} .search_box .global {position: relative; display: block; width: 100%; height: 140px;} .search_box .global::before {position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 1px; background-color: #DDD; content: '';} .search_box .global form {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: 1520px; padding: 0 50px; margin: 0 auto;} .search_box .logo {position: absolute; left: 50px; top: 50%; transform: translateY(-50%); display: block; width: 185px; height: 35px;} .search_box .logo > a {position: relative; display: block; width: 100%; height: 100%;} .search_box .logo img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: auto; height: 100%; max-width: none; max-height: none;} .search_box .input_box {position: relative; display: flex; align-items: center; width: 700px; height: 84px; border-radius: 100px; border: 4px solid #3180EF; background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #E1F0FF; padding: 0 11px 0 35px;} .search_box .input_box > .select {flex-shrink: 0; margin: 0 30px 0 0;} .search_box .input_box > .select select {display: block; min-width: 93px; height: 34px; border: none; padding: 0 10px; margin: 0; font-size: 20px; font-weight: 600; line-height: 170%; letter-spacing: -0.2px; color: #3180EF; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-position: right center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='9' height='6' viewBox='0 0 9 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5.5L0 0.5H9L4.5 5.5Z' fill='%233180EF'/%3E%3C/svg%3E%0A");} .search_box .input_box > .select select::-ms-expand {display: none;} .search_box .text_input {position: relative; margin: 0 0 0 30px; display: block; width: 100%; height: 34px; padding: 0 30px 0 0;} .search_box .text_input::before {position: absolute; left: -30px; top: 7.5px; display: block; width: 1px; height: 19px; background-color: rgba(0, 0, 0, 0.2); content: '';} .search_box .text_input input[type=text] {display: block; width: 100%; height: 34px; padding: 0; margin: 0; border: none; color: #666; font-size: 20px; font-weight: 400; line-height: 170%; letter-spacing: -0.2px;} .search_box .text_input input[type=text]::placeholder {color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit;} .search_box .input_box .search_btn {flex-shrink: 0; width: 62px; height: 62px; border-radius: 100%; background-position: center; background-repeat: no-repeat; background-color: #3180EF; border: none; font-size: 0; background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0043 16.6645L22.6613 22.3214M10.4807 18.6215C15.1644 18.6215 18.9614 14.8246 18.9614 10.1408C18.9614 5.45711 15.1644 1.66016 10.4807 1.66016C5.79695 1.66016 2 5.45711 2 10.1408C2 14.8246 5.79695 18.6215 10.4807 18.6215Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} .search_box .detail_btn {position: absolute; right: 172px; top: 50%; transform: translateY(-50%); display: block; width: 110px; height: 40px; border-radius: 4px; background-color: #FFF; padding: 8px 40px 8px 15px; color: #36404A; font-size: 16px; font-weight: 600; line-height: 150%; letter-spacing: -0.32px;} .search_box .detail_btn::before {position: absolute; right: 10px; top: 10px; display: block; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.8335 5.83398L14.1668 14.1673' stroke='%23697785' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M5.8335 14.1673L14.1668 5.83398' stroke='%23697785' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); content: '';} .search_box .result_check {position: absolute; right: 50px; top: 50%; transform: translateY(-50%); padding: 7px 75px 9px 0;} .search_box .result_check input[type=checkbox] {width: 20px; height: 20px; border: 1px solid #D7D7D7;} .search_box .result_check input[type=checkbox]::before {position: relative; display: block; color: #36404A; font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: -0.64px; content: '결과내 검색'; white-space: nowrap; padding: 0 0 0 25px;} #detail_search {position: absolute; left: 0; top: 100%; z-index: 100; background-color: #F3F6FC; width: 100%; padding: 30px 50px; display: flex; justify-content: center; overflow: hidden; flex-direction: column;} #detail_search .bg {position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 100vw; height: 100%; background-color: #F3F6FC; z-index: -1;} #detail_search > ul {display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; max-width: 1100px;} #detail_search > ul > li {width: calc(100% / 2); padding: 5px 15px;} #detail_search > ul > li > div {display: flex;} #detail_search > ul > li .title {flex-shrink: 0; width: 160px; font-size: 18px; font-weight: 700; color: #36404A; line-height: 38px;} #detail_search > ul > li .input {width: 100%;} #detail_search > ul > li input[type=text] {display: block; margin: 0; width: 100%; height: 38px; padding: 8px 10px; border: 1px solid #d9dae1; background-color: #fff; border-radius: 4px; font-size: 15px; line-height: 1.428571429; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; color: #36404a; vertical-align: middle;} #detail_search .btn {display: flex; align-items: center; justify-content: center; max-width: 100%; width: auto; height: auto; cursor: pointer; background-image: none; overflow-wrap: break-word; transition: all .3s; line-height: 120%; letter-spacing: .16px; margin: 30px auto 0; padding: 18px 25px 18px 25px; font-size: 19px; min-width: 150px; border-radius: 6px; background-color: #fff; border: 1px solid #3180ef; color: #3180ef;} #detail_search .cal_sc {display: flex; align-items: center; width: 100%; font-size: 15px;} #detail_search #sDate {margin: 0 5px 0 0;} #detail_search #eDate {margin: 0 0 0 5px;} #detail_search .cal_btn {margin: 0 0 0 5px;} #cal_layer {position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 801; display: none;} #cal_layer .wrap {max-width: 880px; height: auto; padding: 50px 0; background-color: #FFF; margin: 0 auto; position: relative; z-index: 10; text-align: center; -webkit-box-shadow: 0 0 10px #222; -moz-box-shadow: 0 0 10px #222; -ms-box-shadow:0 0 10px #222; -o-box-shadow: 0 0 10px #222; box-shadow: 0 0 10px #222; display: flex; flex-wrap: wrap;} #cal_layer .wrap:after {content:""; display:block; clear:both;} #cal_layer .wrap .cal_box {width:50%; float:left; padding:0 4% 0 2%;} #cal_layer .wrap .cal_box:first-child {padding: 0 2% 0 4%;} #cal_layer .wrap .cal_box p {font-size:1.571em; font-weight:600; text-align:center; margin:0 0 20px 0;} #cal_layer .wrap .cal_box .control {border:1px solid #cacaca; position:relative; padding:0 48px; min-height:48px;} #cal_layer .wrap .cal_box .control a {display:block; width:48px; height:46px; position:absolute; top:0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;} #cal_layer .wrap .cal_box .control a span {width:0; height:0; line-height:0; font-size:0px; float:left; position:absolute; visibility:hidden; overflow:hidden;} #cal_layer .wrap .cal_box .control a.prev_m {left:0; border-right:1px solid #cacaca; background:#f9f9f9 url(../images/common/cal_prev_ico.png) no-repeat center 50%;} #cal_layer .wrap .cal_box .control a.prev_m:hover {background-position:35% 50%;} #cal_layer .wrap .cal_box .control a.next_m {right:0; border-left:1px solid #cacaca; background:#f9f9f9 url(../images/common/cal_next_ico.png) no-repeat center 50%;} #cal_layer .wrap .cal_box .control a.next_m:hover {background-position:65% 50%;} #cal_layer .wrap .cal_box .control span.select {height:48px; background:url(../images/common/cal_select_ico.gif) no-repeat 86% 50%; position:relative; float:left; box-sizing:border-box;} #cal_layer .wrap .cal_box .control span.select label {position:absolute; top:10px; left:10%; font-size:1.214em; font-weight:600; font-size: 15px; opacity: 1; visibility: visible; width: auto; height: auto; margin: auto;} #cal_layer .wrap .cal_box .control span.select select {width:100%; min-height:48px; line-height:42px; -webkit-opacity:0; -moz-opacity:0; -o-opacity:0; -ms-opacity:0; opacity:0; filter:alpha(opacity=0);} #cal_layer .wrap .cal_box .control span.select.year {width:55%; border-right:1px solid #cacaca;} #cal_layer .wrap .cal_box .control span.select.month {width:45%;} #cal_layer .wrap .cal_box table {font-size:1.071em; width:100%; text-align:center; border-collapse:collapse;} #cal_layer .wrap .cal_box table .sun {color:#ff5151;} #cal_layer .wrap .cal_box table .sat {color:#005ab7;} #cal_layer .wrap .cal_box table .sun a {color:#ff5151;} #cal_layer .wrap .cal_box table .sat a {color:#005ab7;} #cal_layer .wrap .cal_box table th {padding:10px 0; color:#5e5e5e;} #cal_layer .wrap .cal_box table td {border:1px solid #cacaca; height:34px; color:#5e5e5e;} #cal_layer .wrap .cal_box table td a {display:block; height:100%; line-height:34px;} #cal_layer .wrap .cal_box table td a:hover, #cal_layer .wrap .cal_box table td a:active, #cal_layer .wrap .cal_box table td a:focus {background:#cacaca; color:#fff;} #cal_layer .wrap .cal_box table td a.active {background:#3180ef; color:#fff;} #cal_layer .wrap input[type="button"] {display: flex; align-items: center; justify-content: center; max-width: 100%; width: auto; height: auto; cursor: pointer; background-image: none; overflow-wrap: break-word; transition: all .3s; line-height: 120%; letter-spacing: .16px; margin: 30px auto 0; padding: 18px 25px 18px 25px; font-size: 19px; min-width: 150px; border-radius: 6px; background-color: #fff; border: 1px solid #3180ef; color: #3180ef;} #cal_layer .wrap input[type="button"]:hover, #cal_layer .wrap input[type="button"]:active, #cal_layer .wrap input[type="button"]:focus {background:#444444; text-decoration:underline;} #cal_layer .wrap .close_btn {position:absolute; right:15px; top:15px; width:46px; height:46px; display:block; background:url(../images/common/cal_closebtn.png) no-repeat center 50%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} #cal_layer .wrap .close_btn span {width:0; height:0; line-height:0; font-size:0px; float:left; position:absolute; visibility:hidden; overflow:hidden;} #cal_layer .wrap .close_btn:hover, #cal_layer .wrap .close_btn:active, #cal_layer .wrap .close_btn:focus {-ms-transform:rotate(270deg); -o-transform:rotate(270deg); -moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg);} #cal_layer span.shadow_bg {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:#000; z-index:1; -webkit-opacity:0.5; -moz-opacity:0.5; -o-opacity:0.5; -ms-opacity:0.5; opacity:0.5; filter:alpha(opacity=50);} .nav_box {width:100%; height:63px; background:#fff; border-bottom:1px solid #dddddd; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;} .nav_box .al_box {height: 100%;} .live_keyword {position:absolute; right:50px; top:0; width:250px; height:62px; border-right:1px solid #cfcfcf;} .live_keyword::before {position: absolute; left: 0; top: 22px; display: block; width: 1px; height: 19px; background-color: #DDD; content: '';} .live_keyword .roll {width:100%; position:absolute; left:0; top:14px; height:34px; overflow:hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;} .live_keyword .roll span {color:#fff; background:#1E2D75; display:inline-block; vertical-align:top; font-size:0.875em; padding:1px 5px; overflow:hidden; position:absolute; left:29px; top:6px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px; border-radius:2px;} .live_keyword .layer_btn {display:block; position:absolute; right:0; top:0; z-index:70; width:55px; height:62px; text-indent:-9999px; background:url(../images/common/live_keyword_downbtn.gif) no-repeat center 50%;} .live_keyword .layer_btn.on {background:url(../images/common/live_keyword_upbtn.gif) no-repeat center 50%;} .live_keyword dl {background:#fff; position:absolute; right:-1px; top:0; width:248px; z-index:69; border:1px solid #cfcfcf; border-top:0; display:none;} .live_keyword dl dt {font-weight:600; font-size:1.071em; padding:11px 29px;color: #36404A;} .live_keyword dl dd {padding:0 29px 20px 29px;} .live_keyword ul {padding:0;} .live_keyword ul li {margin-top:5px; position:relative; padding:0 0 0 26px;} .live_keyword ul li span {display:block; text-align:center; width:18px; height:18px; line-height:18px; font-size:0.875em; color:#fff; background:#999; position:absolute; left:0; top:2px; overflow:hidden; letter-spacing:-1px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px; border-radius:2px;} .live_keyword ul li:first-child span {background:#1E2D75;} .live_keyword ul li + li span {background:#1E2D75;} .live_keyword ul li + li + li span {background:#1E2D75;} .live_keyword ul li + li + li + li span {background:#7e7e7e;} .live_keyword ul li a {display:inline-block; vertical-align:top; width:auto; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;color: #36404A;} .live_keyword .roll ul {display:block; position:absolute; margin:0 55px 0 82px; width:120px;} .live_keyword .roll ul li {margin-top:0; width:auto; padding:0;} .live_keyword .roll ul li a {height:27px; line-height:27px; padding:4px 0; font-size:1.071em; width:auto; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;color: #36404A;} .tab_link {width:auto; height: 100%; position:relative;} .tab_link ul {width:auto; height: 100%; overflow:hidden;} .tab_link ul:after {content:""; display:block; clear:both;} .tab_link ul li {float:left; width:auto; height: 100%;} .tab_link ul li a {position: relative;display:flex; align-items: center; justify-content: center; padding:10px 30px; font-weight:600; font-size:1.143em; text-decoration:none; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; height: 100%; color: #36404A; text-align: center; font-size: 20px; font-weight: 600; line-height: 110%; letter-spacing: -0.4px;} .tab_link ul li a::before {position: absolute; left: 0; bottom: -1px; display: block; width: auto; height: 3px; background-color: #1E2D75; content: ''; transition: width 0.3s ease;} .tab_link ul li a.active, .tab_link ul li a:hover, .tab_link ul li a:active {color:#1E2D75;} .tab_link ul li a.active::before, .tab_link ul li a:hover::before, .tab_link ul li a:active::before {width: 100%;} .bt_line {display:none !important; height:3px; background:#1E2D75; position:absolute; bottom:-1px;} #header.fixed .nav_box {background:#3180ef;} #header.fixed .tab_link ul li a {color:#fff;} #header.fixed .tab_link ul li a.active, #header.fixed .tab_link ul li a:hover, #header.fixed .tab_link ul li a:active {color:#fff;} #header.fixed .tab_link ul li a::before {background-color:#fff;} #header.fixed .live_keyword {border-left:1px solid #fff; border-right:1px solid #fff; background:#fff;} #header.fixed .live_keyword .roll {} #header.fixed .live_keyword .roll ul li a {} .search_box .detail_btn.active::before {background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.74984 15.8327C12.6618 15.8327 15.8332 12.6613 15.8332 8.74935C15.8332 4.83735 12.6618 1.66602 8.74984 1.66602C4.83784 1.66602 1.6665 4.83735 1.6665 8.74935C1.6665 12.6613 4.83784 15.8327 8.74984 15.8327Z' stroke='%23697785' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M13.8428 13.8438L17.3783 17.3793' stroke='%23697785' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} #detail_search .btn:hover, #cal_layer .wrap input[type="button"]:hover {background-color: #3180ef; border: 1px solid #3180ef; color: #fff; text-decoration: none;} /* container */ #container {max-width:1520px;height: 100%;margin:45px auto 0 auto;position:relative;overflow: hidden;padding: 0 50px;} #contents {width:auto; margin:0 280px 0 0; min-height:840px; position:relative;} #contents::before {position: absolute; right: -30px; top: 0; display: block; width: 1px; height: 100%; content: ''; background-color: rgba(221, 221, 221, 0.87);} .data_no {border-top:1px solid #bfbfbf; background:url(../images/common/data_no_ico.png) no-repeat center 100px; padding:220px 0 170px 0; margin:0; text-align:center; font-size:2.000em; line-height:1.214em; font-weight:600;} .data_no span {display:block; font-weight:normal; color:#6b6b6b; font-size:0.571em; margin-top:10px;} .error {border-top:1px solid #bfbfbf; background:url(../images/common/data_no_ico.png) no-repeat center 100px; padding:220px 0 170px 0; margin:0; text-align:center; font-size:1.857em; line-height:1.214em; font-weight:600;} .error span {display:block; margin-top:25px;} .error span a {display:inline-block; vertical-align:top; font-weight:normal; color:#fff; font-size:0.538em; padding:8px 40px;} .error span a.return {background:#495f79; margin-right:10px;} .error span a.refresh {background:#4f4f4f;} .search_range {width:auto; text-align:right;} .search_range dt {display:inline-block; vertical-align:top; padding:0 5px 0 0; margin-left:15px; color: #36404A; font-size: 16px; font-weight: 400; line-height: 35px; letter-spacing: -0.32px;} .search_range dd {display:inline-block; vertical-align:top;} .search_range dd a {display: inline-flex; align-items: center; justify-content: center; max-width: 100%; width: auto; cursor: pointer; background-image: none; overflow-wrap: break-word; transition: all .3s; line-height: 120%; letter-spacing: .16px; margin: 0; padding: 8px 12px; border-radius: 4px; font-size: 14px; background-color: #fff; border: 1px solid #3180ef; color: #3180ef;text-decoration: none;} .search_range dd a:hover, .search_range dd a:active, .search_range dd a:focus {color:#FFF; background-color: #3180ef;} .search_range dd a.active {background-color:#3180ef; color:#fff;} .result_counter {color: #1D1D1D; font-family: 'title_font'; font-size: 20px; font-weight: 400; line-height: 150%; margin: 30px 0 50px; display: flex; align-items: center; padding: 15px 30px; border-radius: 8px; background-color: #F3F6FC;} .result_counter strong, .result_counter span {font-weight:700;} .result_counter span {color: #3180EF; margin: 0 0 0 6px;} .search_sec {width:100%; height:auto; padding:0 0 100px 0;} h2.category {display: flex; align-items: center; color: #1D1D1D; font-family: 'title_font'; font-size: 30px; font-weight: 700; line-height: 32px; margin: 0 0 30px; padding: 0 0 20px; border-bottom: 1px solid #697785;} h2.category span {color:#fff; display:inline-block; vertical-align:middle; min-width: 32px; width: auto; height: 32px; background:#3180EF; font-size: 20px; line-height: 32px; font-weight: 400; margin: 0 0 0 10px; overflow:hidden; border-radius: 100px; text-align: center; padding: 0 10px;} .search_sec .relation_summery {width:auto; position:relative; padding:0 0 0 390px; min-height:280px;} .search_sec .relation_summery .photo {position:absolute; left:0; top:0; width:360px; height:280px; overflow:hidden;} .search_sec .relation_summery .photo img {display:block; width:100%;} .search_sec .relation_summery h2 {font-size:1.714em; margin:0 0 20px 0;} .search_sec .relation_summery .infor {width:auto; margin:20px 0 0 0;} .search_sec .relation_summery .infor li {margin-top:15px; position:relative; padding:0 0 0 32px;} .search_sec .relation_summery .infor li:first-child {margin-top:0;} .search_sec .relation_summery .infor li span {display:block; width:26px; height:26px; text-indent:-9999px; position:absolute; left:0; top:-1px;} .search_sec .relation_summery .infor li span.homepage {background:url(../images/common/hp_ico.png) no-repeat;} .search_sec .relation_summery .infor li span.call {background:url(../images/common/call_ico.png) no-repeat;} .search_sec .relation_summery .infor li a {display:inline-block; vertical-align:top; margin-right:20px; margin-top:-3px; padding:3px 0;} .search_sec .relation_summery .infor li a[target="_blank"] {background:url(../images/common/blank_ico.gif) no-repeat right 8px; padding-right:18px;} .search_sec .relation_list {width:100%; height:auto; position:relative; margin-top:20px;} .search_sec .relation_list ul {position:relative; z-index:10; padding:30px;} .search_sec .relation_list ul:after {content:""; display:block; clear:both;} .search_sec .relation_list ul li {float:left; width:25%;} .search_sec .relation_list ul li a {display:block; padding:30px 25px 0 105px; min-height:60px; position:relative; font-size:1.143em; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} .search_sec .relation_list ul li a span.sumnail {display:block; width:90px; height:90px; overflow:hidden; position:absolute; left:0; top:0; text-align:center; -webkit-border-radius:45px; -moz-border-radius:45px; -o-border-radius:45px; -ms-border-radius:45px; border-radius:45px;} /* .search_sec .relation_list ul li a span.sumnail {display:block; width:90px; height:90px; overflow:hidden; position:absolute; left:0; top:0; -webkit-border-radius:45px; -moz-border-radius:45px; -o-border-radius:45px; -ms-border-radius:45px; border-radius:45px;} .search_sec .relation_list ul li a span.sumnail img {display:block; width:100%; -webkit-border-radius:45px; -moz-border-radius:45px; -o-border-radius:45px; -ms-border-radius:45px; border-radius:45px;} */ .search_sec .relation_list ul li a span.sumnail img {display:block; height:100%;} .search_sec .relation_list ul li a span.sumnail span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:#000 url(../images/common/relation_list_ovbg.png) no-repeat center 50%; -webkit-opacity:0; -moz-opacity:0; -o-opacity:0; -ms-opacity:0; opacity:0; filter:alpha(opacity=0); -webkit-border-radius:45px; -moz-border-radius:45px; -o-border-radius:45px; -ms-border-radius:45px; border-radius:45px; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -ms-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in;} .search_sec .relation_list ul li a:hover span.sumnail span, .search_sec .relation_list ul li a:active span.sumnail span, .search_sec .relation_list ul li a:focus span.sumnail span {-webkit-opacity:0.5; -moz-opacity:0.5; -o-opacity:0.5; -ms-opacity:0.5; opacity:0.5; filter:alpha(opacity=50); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg);} .search_sec .relation_list span.bg {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; z-index:1; -webkit-opacity:0.5; -moz-opacity:0.5; -o-opacity:0.5; -ms-opacity:0.5; opacity:0.5; filter:alpha(opacity=50);} .search_sec .type01 {width: calc(100% + 20px); margin: -10px; display: flex; flex-wrap: wrap;} .search_sec .type01 li {padding: 10px; width: calc(100% / 2);} .search_sec .type01 li a {display: flex; align-items: center; padding: 15px 30px; border-radius: 8px; background-color: #F6F7F9; color: #36404A; font-size: 16px; font-weight: 400; line-height: 22px; letter-spacing: 0.16px; text-decoration: none; border: 1px solid #F6F7F9; transition: all 0.3s ease; height: 100%;} .search_sec .type01 li a:hover {border-color: #3180EF;} .search_sec .type01 li a strong {color:#1E2D75; font-weight:normal;} .search_sec .type02 {width:auto;} .search_sec .type02 li {padding: 10px 0 30px; border-bottom:1px dashed #D9DAE1;} .search_sec .type02 li + li {padding-top: 30px;} .search_sec .type02 li a {display:block; text-decoration:none;} .search_sec .type02 li p {margin:0 0 5px 0; width:auto;} .search_sec .type02 li p.title {overflow: hidden; color: #1D1D1D; font-size: 18px; font-weight: 700; line-height: 160%; letter-spacing: 0.18px;} .search_sec .type02 li p.text {overflow: hidden; color: #1D1D1D; font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: 0.16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 48px; height: auto; margin: 0;} .search_sec .type02 li a:hover p.title, .search_sec .type02 li a:active p.title, .search_sec .type02 li a:focus p.title, .search_sec .type02 li a:hover p.text, .search_sec .type02 li a:active p.text, .search_sec .type02 li a:focus p.text {text-decoration:underline; text-underline-position: under;} .search_sec .type02 li p.loc {position: relative; margin:30px 0 0; display: flex; align-items: center; color: #666; font-size: 14px; font-weight: 400; line-height: 22px; letter-spacing: 0.14px;} .search_sec .type02 li p.loc::before {position: absolute; left: 19px; top: 0; display: block; width: 8px; content: '>'; color: #666; font-size: 14px; font-weight: 400; line-height: 22px; letter-spacing: 0.14px;} .search_sec .type02 li p.loc img {flex-shrink: 0; width: 12px; height: 12px; margin: 0 20px 0 0;} .search_sec .type02 li p.loc span.date {position: relative; color: #666; font-size: 14px; font-weight: 400; line-height: 22px; letter-spacing: 0.14px; margin: 0 0 0 20px; padding: 0 0 0 20px;} .search_sec .type02 li p.loc span.date::before {content: ''; position: absolute; left: 0; top: 6px; display: block; width: 1px; height: 10px; background-color: #C1CBDA;} .search_sec .type03 {width:calc(100% + 20px); margin: -10px; height:auto; overflow:hidden; display: flex; flex-wrap: wrap;} .search_sec .type03:after {content:""; display:block; clear:both;} .search_sec .type03 li {padding: 10px; width: calc(100% / 4);} .search_sec .type03 li a {display:block; height:258px; padding:30px; border: 1px solid #F6F7F9; overflow:hidden; background:#F6F7F9; position:relative; text-decoration:none; border-radius: 16px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;} .search_sec .type03 li a:hover, .search_sec .type03 li a:active, .search_sec .type03 li a:focus {border:1px solid #3180EF;} .search_sec .type03 li a p {margin:0; padding:0;} .search_sec .type03 li a p span {display:block;} .search_sec .type03 li a p span.text {color: #1D1D1D; text-overflow: ellipsis; font-size: 16px; font-weight: 400; line-height: 150%; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; height: 144px;} .search_sec .type03 li a p span.text strong {color:#1E2D75; font-weight:normal;} .search_sec .type03 li a:hover p span.text, .search_sec .type03 li a:active p span.text, .search_sec .type03 li a:focus p span.text {text-decoration:underline; text-underline-position: under;} .search_sec .type03 li a p span.loc {color: #666; font-size: 14px; font-weight: 400; line-height: 22px; letter-spacing: 0.14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 30px 0 0;} .search_sec .type03 li a p span.loc img {display:inline-block; vertical-align:top; margin-top:6px;} .search_sec .type04 {width:100%; height:auto; overflow:hidden;} .search_sec .type04:after {content:""; display:block; clear:both;} .search_sec .type04 li {float:left; width:15.8333%; height:175px; margin-left:1%; background:#000; overflow:hidden;} .search_sec .type04 li:first-child {margin-left:0;} .search_sec .type04 li + li + li + li + li + li + li {margin-left:0; margin-top:10px;} .search_sec .type04 li + li + li + li + li + li + li + li {margin-left:1%;} .search_sec .type04 li + li + li + li + li + li + li + li + li + li + li + li + li {margin-left:0;} .search_sec .type04 li + li + li + li + li + li + li + li + li + li + li + li + li + li {margin-left:1%;} .search_sec .type04 li a {display:block; height:100%; position:relative;} .search_sec .type04 li a span.movie_ico {display:block; width:34px; height:34px; background:url(../images/common/movie_ico.png) no-repeat; position:absolute; right:15px; bottom:15px; z-index:10;} .search_sec .type04 li a img {display:block; height:100%; margin:0 auto; -webkit-opacity:0.6; -moz-opacity:0.6; -o-opacity:0.6; -ms-opacity:0.6; opacity:0.6; filter:alpha(opacity=60); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} .search_sec .type04 li a:hover img, .search_sec .type04 li a:active img, .search_sec .type04 li a:focus img { -webkit-opacity:1; -moz-opacity:1; -o-opacity:1; -ms-opacity:1; opacity:1; filter:alpha(opacity=100); -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); } .search_sec .type04 li a figcaption {position:absolute; left:0; top:0; width:100%; z-index:10; background:#61a843; color:#fff; -webkit-opacity:0; -moz-opacity:0; -o-opacity:0; -ms-opacity:0; opacity:0; filter:alpha(opacity=0); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} .search_sec .type04 li a figcaption p {margin:0;} .search_sec .type04 li a figcaption p.title {padding:20px 12% 0 12%; max-height:68px; overflow:hidden;} .search_sec .type04 li a figcaption p.date {position:absolute; left:12%; bottom:20px; font-size:0.929em; width:76%;} .search_sec .type04 li a:hover figcaption, .search_sec .type04 li a:active figcaption, .search_sec .type04 li a:focus figcaption { -webkit-opacity:0.9; -moz-opacity:0.9; -o-opacity:0.9; -ms-opacity:0.9; opacity:0.9; filter:alpha(opacity=90); } .search_sec .type05 {width:calc(100% + 20px); margin: -10px; height:auto; overflow:hidden; display: flex; flex-wrap: wrap;} .search_sec .type05:after {content:""; display:block; clear:both;} .search_sec .type05 li {width:calc(100% / 2); padding: 10px;} .search_sec .type05 li .box {border: none !important; position:relative; display: block; width: 100%;} .search_sec .type05 li .box > a {display: flex; flex-direction: column; width: 100%; height: 216px; transition: border 0.3s ease; border-radius: 16px; background-color: #F6F7F9; border: 1px solid #F6F7F9; padding: 30px;} .search_sec .type05 li .box > a:hover, .search_sec .type05 li .box > a:focus {border: 1px solid #3180EF;} .search_sec .type05 li .box > a:hover p.title, .search_sec .type05 li .box > a:hover p.text {text-decoration: underline; text-underline-position: under;} .search_sec .type05 li p.title {white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color: #1D1D1D; font-size: 18px; font-weight: 700; line-height: 160%; letter-spacing: 0.18px; padding: 0; margin: 0;} .search_sec .type05 li p.text {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #1d1d1d; text-overflow: ellipsis; font-size: 16px; font-weight: 400; line-height: 160%; letter-spacing: 0.16px; padding: 0; margin: 5px 0 0; height: 52px;} .search_sec .type05 li p.text strong {color:#1E2D75; font-weight:normal;} .search_sec .type05 li p.date {color: #666; font-size: 14px; font-weight: 400; line-height: 38px; letter-spacing: 0.14px; margin: auto 0 0; padding: 0; text-decoration: none;} .search_sec .type05 li .btn {position:absolute; right: 30px; bottom: 30px;} .search_sec .type05 li .btn span {display: block; width: 100%; height: 100%;} .search_sec .type05 li .btn span.view {background:none; padding-left:0;} .search_sec .type05 li .btn span.down {padding-right:0;} .search_sec .type05 li .btn a {position: relative; display: inline-flex; align-items: center; min-width: 100px; width: auto; height: 38px; border: 1px solid #697785; border-radius: 4px; padding: 8px 32px 8px 12px; color: #697785; font-size: 16px; font-weight: 400; line-height: 110%; letter-spacing: -0.32px; transition: all 0.3s ease;} .search_sec .type05 li .btn a::after {position: absolute; right: 11px; top: 50%; transform: translateY(-50%); display: block; width: 16px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: 100%; content: ''; transition: all 0.3s ease;} .search_sec .type05 li .btn span.view a::after {background-image: url(/images/common/link_ico.png);} .search_sec .type05 li .btn span.down a::after {background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 8.00277V14H14.5V8' stroke='%23697785' stroke-linejoin='round'/%3E%3Cpath d='M11.5 7.66602L8.5 10.666L5.5 7.66602' stroke='%23697785' stroke-linejoin='round'/%3E%3Cpath d='M8.49756 2V10.6667' stroke='%23697785' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} .search_sec .type05 li .btn a:hover, .search_sec .type05 li .btn a:focus {background-color: #FFF;} .search_sec .type05 li .btn span.view a:hover, .search_sec .type05 li .btn span.view a:active, .search_sec .type05 li .btn span.view a:focus {background-position:left -21px; color:#495f79;} .search_sec .type05 li .btn span.down a:hover, .search_sec .type05 li .btn span.down a:active, .search_sec .type05 li .btn span.down a:focus {background-position:left -21px; color:#495f79;} .search_sec .type06 {width:100%; height:auto; border-top:1px solid #cfcfcf; margin-top:34px;} .search_sec .type06:after {content:""; display:block; clear:both;} .search_sec .type06 li {float:left; width:24.25%; margin-left:1%; padding:40px 0 0 0; position:relative;} .search_sec .type06 li:first-child {margin-left:0;} .search_sec .type06 li a {display:block; text-decoration:none;} .search_sec .type06 li a p {border:1px solid #dcdcdc; background:#fff; padding:20px 7%; height:120px; margin:0; position:relative; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;} .search_sec .type06 li a p span {display:block;} .search_sec .type06 li a p span strong {color:#1E2D75; font-weight:normal;} .search_sec .type06 li a p span.text {max-height:88px; overflow:hidden; margin-bottom:10px;} .search_sec .type06 li a p span.date {color:#828282; font-size:0.929em;} .search_sec .type06 li a span.sns_type {display:block; width:34px; height:34px; position:absolute; left:50%; top:0; margin:-17px 0 0 -17px; overflow:hidden; -webkit-border-radius:17px; -moz-border-radius:17px; -o-border-radius:17px; -ms-border-radius:17px; border-radius:17px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} .search_sec .type06 li a span.sns_type img {display:block; margin:9px auto 0 auto;} .search_sec .type06 li a span.sns_type.fb {background:#2b5b8b;} .search_sec .type06 li a span.sns_type.tw {background:#4594e3;} .search_sec .type06 li a span.edge {background:url(../images/common/sns_box_bg.png) no-repeat; display:block; width:17px; height:10px; position:absolute; left:50%; top:0; margin:-10px 0 0 -8px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;} .search_sec .type06 li a:hover p, .search_sec .type06 li a:active p, .search_sec .type06 li a:focus p {border:1px solid #8e8e8e;} .search_sec .type06 li a:hover span.edge, .search_sec .type06 li a:active span.edge, .search_sec .type06 li a:focus span.edge {background:url(../images/common/sns_box_bgov.png) no-repeat;} .search_sec .type06 li a:hover span.sns_type, .search_sec .type06 li a:active span.sns_type, .search_sec .type06 li a:focus span.sns_type {padding:10px; border-radius:27px; margin:-27px 0 0 -27px;} .search_sec .type06.sub {margin-top:0; border:0; background:url(../images/common/sns_box_linebg.gif) repeat-y 22px top;} .search_sec .type06.sub li {float:none; width:auto; margin-left:0; padding:10px 0 0 0;} .search_sec .type06.sub li:first-child {padding:0;} .search_sec .type06.sub li a span.sns_type {left:5px; top:50%; margin:-12px 0 0 0 !important; padding:0 !important;} .search_sec .type06.sub li:first-child a span.sns_type {margin:-17px 0 0 0 !important;} .search_sec .type06.sub li a p {margin-left:55px; height:74px; padding:20px 3%;} .search_sec .type06.sub li a p span.text {max-height:44px;} .search_sec .type06.sub li a span.edge {width:10px; height:17px; left:0; top:50%; margin:-8px 0 0 -10px; background:url(../images/common/sns_box_bg_mob.png) no-repeat;} .search_sec .type06.sub li a:hover span.edge, .search_sec .type06.sub li a:active span.edge, .search_sec .type06.sub li a:focus span.edge {background:url(../images/common/sns_box_bgov_mob.png) no-repeat;} .search_sec .type07 {width:auto; border-top:1px solid #bfbfbf;} .search_sec .type07 li {padding:21px 0 20px 0; border-top:1px dashed #dadada;} .search_sec .type07 li:first-child {border-top:0;} .search_sec .type07 li:last-child {padding-bottom:0;} .search_sec .type07 li a {display:block; text-decoration:none;} .search_sec .type07 li p {margin:0 0 5px 0; width:auto;} .search_sec .type07 li p.text {color:#7d7d7d; max-height:44px; overflow:hidden; margin:0;} .search_sec .type07 li p.text strong {color:#1E2D75; font-weight:normal;} .search_sec .type07 li a:hover p.text, .search_sec .type07 li a:active p.text, .search_sec .type07 li a:focus p.text {text-decoration:underline; color:#444;} .search_sec .type07 li p.loc img {display:inline-block; vertical-align:top; margin-top:6px;} .more_btn {text-align:center; margin:30px 0 0 0;} .more_btn a {position: relative; display: inline-block; max-width: 100%; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; transition: all 0.3s ease; text-align: left;border: 1px solid #3180EF; border-radius: 4px; background: #fff; color: #3180EF;padding: 12px 60px 12px 20px;min-width: 200px; text-decoration: none;} .more_btn a:after {content: ""; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: block; width: 16px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: 100%; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8H2' stroke='%233180EF' stroke-linejoin='round'/%3E%3Cpath d='M10 4L14 8L10 12' stroke='%233180EF' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); transition: background-image 0.3s ease;} .more_btn a:hover, .more_btn a:active, .more_btn a:focus {color:#fff; background-color: #3180EF;} .more_btn a:hover:after, .more_btn a:active:after, .more_btn a:focus:after {background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8H2' stroke='white' stroke-linejoin='round'/%3E%3Cpath d='M10 4L14 8L10 12' stroke='white' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} .paginate {width:100%; text-align:center; margin-top:50px; position:relative; overflow:hidden;} .paginate * {display:inline-block; vertical-align:middle; margin:0;} .paginate a {padding:0 10px; color:#383838;} .paginate a.first {display:inline-block; margin-right:15px;} .paginate a.last{display:inline-block; margin-left:15px;} .paginate a:hover, .paginate a:active, .paginate a:focus {color:#495f79;} .paginate strong {color:#fff; background:#495f79; width:30px; height:30px; line-height:30px;} .paginate .dir {border:1px solid #b7b7b7; background:#fbfbfb; width:28px; height:28px; padding:0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;} .paginate .dir:hover, .paginate .dir:active, .paginate .dir:focus {border:1px solid #495f79;} .paginate .dir img {display:block;} /* aside */ #aside {position:absolute;right:50px;top:0;width:220px;height:auto;} #aside .mob_tab {display:none;} #aside .tab_box {display:block; margin:0 0 30px 0;} #aside .tab_box h3 {margin:0 0 10px 0;color: #36404A;} #aside .tab_box .del_btn {display:none;} #keyword_popular {width:100%; height:auto; position:relative;} #keyword_popular dt {position:absolute; width:50%; top:0; background:#fff;} #keyword_popular dt.tab1 {left:0;} #keyword_popular dt.tab2 {left:50%;} #keyword_popular dt a {display:block; text-align:center; background:#fff; font-weight:600; padding:5px 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; border-radius: 4px;color:#36404A;} #keyword_popular dt a.active {background:#1E2D75; color:#fff;} #keyword_popular dd {width:100%; height:auto; padding:50px 0 0 0; display:none;} #keyword_popular dd ul {width:100%; height:auto;} #keyword_popular dd ul li {width:auto; padding:0 0 0 26px; margin-top:3px; position:relative;} #keyword_popular dd ul li:first-child {margin-top:0;} #keyword_popular dd ul li span {display:block; text-align:center; width:18px; height:18px; line-height:18px; font-size:0.875em; color:#fff; background:#999; position:absolute; left:0; top:2px; overflow:hidden; letter-spacing:-1px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px; border-radius:2px;} #keyword_popular dd ul li:first-child span {background:#1E2D75;} #keyword_popular dd ul li + li span {background:#1E2D75;} #keyword_popular dd ul li + li + li span {background:#1E2D75;} #keyword_popular dd ul li + li + li + li span {background:#999;} #keyword_popular dd ul li a {display:inline-block; vertical-align:top; width:auto; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;color:#36404A;} #my_keyword {width:100%; height:auto;} #my_keyword span {display:inline-block; vertical-align:top; margin:0 3px 6px 0; overflow:hidden; position:relative; } #my_keyword span a {display:inline-block; vertical-align:top; padding:3px 25px 3px 15px; background:#fff; text-decoration:none;color:#36404A; -webkit-border-radius:14px; -moz-border-radius:14px; -o-border-radius:14px; -ms-border-radius:14px; border-radius:14px; overflow:hidden; border: 1px solid #DDD; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;} #my_keyword span a:hover, #my_keyword span a:active, #my_keyword span a:focus {background:#DDD;} #my_keyword span a.close_btn {display:block; padding:0; width:28px; height:28px; position:absolute; right:0; top:50%; margin-top:-14px; background:url(../images/common/keyword_closebtn.gif) no-repeat center 50%; text-indent:-9999px;border: none;} #relate_keyword {width:100%; height:auto;} #relate_keyword span {display:inline-block; vertical-align:top; margin:0 3px 6px 0; overflow:hidden; position:relative; -webkit-border-radius:14px; -moz-border-radius:14px; -o-border-radius:14px; -ms-border-radius:14px; border-radius:14px;} #relate_keyword span a {display:inline-block; vertical-align:top; padding:2px 24px 2px 14px; border:1px solid #c2c2c2; text-decoration:none; -webkit-border-radius:14px; -moz-border-radius:14px; -o-border-radius:14px; -ms-border-radius:14px; border-radius:14px; overflow:hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;} #relate_keyword span a:hover, #relate_keyword span a:active, #relate_keyword span a:focus {background:#1E2D75; color:#fff; border:1px solid #1E2D75;} #relate_keyword span a.close_btn {display:block; padding:0; border:0; width:28px; height:28px; position:absolute; right:0; top:50%; margin-top:-14px; background:url(../images/common/keyword_closebtn.gif) no-repeat center 50%; text-indent:-9999px;} /* footer */ #footer {width:100%; height:auto; background:#e1e1e1; padding:15px 0; position:relative;} #footer .copy {margin:0; text-align:center; color:#36404A; font-size:0.929em;} /* pagnation */ #wrap .paginate {clear: both; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding-left: 0; margin-top: 34px; justify-content: center; width: 100%; flex-wrap: wrap;} #wrap .paginate a, #wrap .paginate strong, #wrap .paginate .dir {flex-shrink: 0; min-width: 30px; width: auto; height: 30px; border: 1px solid transparent; background-color: transparent; background-position: center; background-repeat: no-repeat; border-radius: 100%; margin: 0 2px; font-size: 16px; font-weight: 400; line-height: 30px; color: #36404A; transition: background-color 0.3s ease, color 0.3s ease, background-image 0.3s ease; text-decoration: none;} #wrap .paginate .dir img {display: none;} #wrap .paginate .dir:first-of-type {background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='15' transform='matrix(-1 0 0 1 30 0)' fill='white'/%3E%3Cpath d='M15 21L9 15L15 9M21 21L15 15L21 9' stroke='%2336404A' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} #wrap .paginate .dir:first-of-type:hover {background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='15' transform='matrix(-1 0 0 1 30 0)' fill='%231E2D75'/%3E%3Cpath d='M15 21L9 15L15 9M21 21L15 15L21 9' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} #wrap .paginate .dir:last-of-type {background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='15' fill='white'/%3E%3Cpath d='M15 21L21 15L15 9M9 21L15 15L9 9' stroke='%2336404A' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} #wrap .paginate .dir:last-of-type:hover {background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='15' fill='%231E2D75'/%3E%3Cpath d='M15 21L21 15L15 9M9 21L15 15L9 9' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} #wrap .paginate .dir.first {background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='15' transform='matrix(-1 0 0 1 30 0)' fill='white'/%3E%3Cpath d='M18 21L12 15L18 9' stroke='%2336404A' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} #wrap .paginate .dir.first:hover {background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='15' transform='matrix(-1 0 0 1 30 0)' fill='%231E2D75'/%3E%3Cpath d='M18 21L12 15L18 9' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} #wrap .paginate .dir.last {background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='15' fill='white'/%3E%3Cpath d='M12 21L18 15L12 9' stroke='%2336404A' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} #wrap .paginate .dir.last:hover {background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='15' fill='%231E2D75'/%3E%3Cpath d='M12 21L18 15L12 9' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");} #wrap .paginate strong {background-color: transparent; border-radius: 100%; } #wrap .paginate a:hover {background-color: #1E2D75; color: #FFF;} #wrap .paginate .dir:hover {background-color: #1E2D75;} #wrap .paginate strong:only-of-type {background-color: #1E2D75; color: #FFF;} /* 커스터마이징 */ @supports (appearance: base-select) { /* 버튼(닫힌 상태의 셀렉트)과 픽커(열린 드롭다운) 둘 다 옵트인 */ .search_box .input_box > .select select, ::picker(.search_box .input_box > .select select) { appearance: base-select; } /* 버튼 아이콘(기본 화살표) 스타일/애니메이션 */ .search_box .input_box > .select select::picker-icon { transition: 0.3s rotate; } .search_box .input_box > .select select:open::picker-icon { /* 드롭다운 열렸을 때 */ rotate: 180deg; } /* 드롭다운 전체 박스 스타일 */ ::picker(.search_box .input_box > .select select) { display: block; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.12); overflow: clip; padding: 10px; } /* 각 option 스타일 – 이제 flex, 아이콘/텍스트 배치 가능 */ .search_box .input_box > .select select option { display: flex; align-items: center; font-size: 16px; color: #36404A; } .search_box .input_box > .select select option:first-of-type { border-top-left-radius: 10px; border-top-right-radius: 10px; } .search_box .input_box > .select select option:last-of-type { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom: 0; } /* 선택된 항목 표시 체크마크/상태도 제어 가능 */ .search_box .input_box > .select select option:checked::checkmark { margin-left: auto; /* 오른쪽 끝으로 */ } /* 선택된 내용이 닫힌 버튼에 복제되어 들어가는 영역 */ .search_box .input_box > .select select > button > selectedcontent { display: inline-flex; align-items: center; gap: 8px; } } /* 반응형 */ @media (max-width: 1519px) { #wrap .tab_link ul li a {padding: 10px 20px; font-size: 18px;} #wrap .search_box .input_box {width: 600px;} } @media (max-width: 1279px) { #wrap .live_keyword {display: none;} #wrap .tab_link ul {display: flex; flex-wrap: wrap;} #wrap .tab_link ul li {flex-grow: 1;} #wrap .search_box .input_box > .select select, #wrap .search_box .text_input input[type=text] {font-size: 18px;} #wrap .search_box .input_box {width: 450px; height: 70px; padding: 0 10px 0 15px;} #wrap .search_box .input_box .search_btn {width: 50px; height: 50px; background-size: 40%;} #wrap .search_box .detail_btn {right: 165px;} #wrap .search_sec .type03 li {width: calc(100% / 2);} } @media (max-width: 1023px) { #wrap .search_box .detail_btn, #detail_search, #wrap .search_box .result_check {display: none !important;} #wrap .search_box .input_box {width: calc(100% - 235px); margin: 0 0 0 auto;} #wrap .search_range dt {font-size: 15px; line-height: 31px;} #wrap .search_range dd a {padding: 6px 8px;} } @media (max-width: 1000px) { #wrap #container {max-width: 100%; padding: 0 50px;} #wrap #contents {margin: 0;} #wrap #contents::before {display: none;} #wrap #aside {width: 100%; right: auto; left: 0; padding: 0 50px; display: flex;} #wrap #aside .mob_tab {position: relative; left: auto; width: calc(100% / 2); font-size: 15px; color: #3180ef; border: 1px solid #3180ef; border-radius: 4px; padding: 5px 10px; height: auto;} #wrap #aside .mob_tab.btn1 {margin: 0 5px 0 0;} #wrap #aside .mob_tab.btn2 {margin: 0 0 0 5px;} #wrap #aside .mob_tab.active {background-color: #3180ef; color: #FFF;} #wrap .result_counter {margin: 0 0 50px 0;} #wrap #aside .tab_box {position: absolute; left: 50px; top: 0; width: calc(100% - 100px); margin: 46px 0 0; border: 1px solid #DDD; background-color: #FFF; border-radius: 4px; padding: 30px; box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.05);} #wrap #aside .tab_box .del_btn {right: 30px; top: 30px;} #wrap .nav_box .al_box {max-width: 100%; padding: 0 50px;} #wrap .search_box .global .detail_btn {margin: 0;} #wrap .tab_link ul li {flex-grow: unset; width: calc(100% / 5);} #wrap .tab_link ul li a {padding: 15px 20px;} #wrap .search_sec .type01, #wrap .search_sec .type03, #wrap .search_sec .type05 {width: calc(100% + 10px); margin: -5px;} #wrap .search_sec .type01 li, #wrap .search_sec .type03 li, #wrap .search_sec .type05 li {padding: 5px;} } @media (max-width: 840px) { #wrap .search_box {padding: 0;} #wrap .search_box .input_box {padding: 0 10px 0 15px; width: calc(100% - 215px);} #wrap .tab_link ul li {margin: 0;} #wrap .tab_link ul li a.active, #wrap .tab_link ul li a:hover, #wrap .tab_link ul li a:active {border: none; padding: 15px 20px;} } @media (max-width: 767px) { #wrap .search_box .global form, #wrap .nav_box .al_box, #wrap #aside, #wrap #container {padding: 0 30px;} #wrap h2.category {font-size: 26px; margin: 0 0 20px;} #wrap h2.category span {height: 30px; line-height: 30px;} #wrap #aside .tab_box {left: 30px; width: calc(100% - 60px);} #wrap .tab_link ul li a {font-size: 16px;} #wrap .tab_link ul li a, #wrap .tab_link ul li a.active, #wrap .tab_link ul li a:hover, #wrap .tab_link ul li a:active {padding: 10px 15px;} #wrap .search_box .global form {flex-direction: column;} #wrap .search_box .logo {position: relative; left: auto; top: auto; transform: none;} #wrap .search_box .global {height: auto; padding: 30px 0;} #wrap .search_box .input_box {width: 100%; margin: 30px 0 0;} #wrap #aside .tab_box {padding: 20px;} #wrap #aside .tab_box .del_btn {right: 20px; top: 20px;} } @media (max-width: 660px) { #wrap .search_range {text-align: left; margin: 0;} #wrap .search_range dt {display: block; margin: 0;} #wrap .search_range dd + dt {margin: 10px 0 0;} #wrap .result_counter {margin: 30px 0;} } @media (max-width: 640px) { #wrap .tab_link ul li {width: calc(100% / 4);} #wrap .search_sec .type01 {padding: 0;} #wrap .search_sec .type01, #wrap .search_sec .type03, #wrap .search_sec .type05 {width: 100%; margin: 0; flex-direction: column;} #wrap .search_sec .type01 li, #wrap .search_sec .type03 li, #wrap .search_sec .type05 li {width: 100%; margin: 0; padding: 0;} #wrap .search_sec .type01 li + li, #wrap .search_sec .type03 li + li, #wrap .search_sec .type05 li + li {padding: 10px 0 0;} #wrap .search_sec .type01 li a {padding: 10px 15px; font-size: 15px;} #wrap .search_sec .type03 li a {padding: 30px;} #wrap .search_sec .type03 li a p {padding: 0;} #wrap .search_sec .type03 li a p span.text {max-height: 144px; height: auto;} #wrap .search_sec .type05 li .box {padding: 30px; border-radius: 16px; background-color: #F6F7F9;} #wrap .search_sec .type05 li .box > a {padding: 0; height: auto;} #wrap .search_sec .type05 li .btn {margin: 10px 0 0; text-align: right;} #wrap .search_sec .type05 li .btn .down {padding: 0;} #wrap .search_sec .type05 li .box > a:hover, #wrap .search_sec .type05 li .box > a:focus {border: 1px solid #F6F7F9;} #wrap .search_sec .type02 li p.title, #wrap .search_sec .type05 li p.title {font-size: 16px;} #wrap .search_sec .type02 li p.text, #wrap .search_sec .type03 li a p span.text, #wrap .search_sec .type05 li p.text {font-size: 15px;} #wrap .search_sec .type03 li a p span.text {max-height: 135px;} #wrap .search_sec .type05 li p.text {height: auto; max-height: 48px;} #wrap .search_sec .type05 li .btn a {font-size: 15px;} #wrap .search_box .input_box {height: 60px; border-width: 3px; padding: 0 10px;} #wrap .search_box .input_box > .select {margin: 0 15px 0 0;} #wrap .search_box .input_box > .select select, #wrap .search_box .text_input input[type=text] {font-size: 16px;} #wrap .search_box .text_input {margin: 0 0 0 15px; padding: 0 15px 0 0;} #wrap .search_box .text_input::before {left: -15px;} #wrap .search_box .input_box .search_btn {width: 40px; height: 40px;} #wrap h2.category span {font-size: 18px; padding: 0 10px; margin: 0 0 0 10px;} #wrap .search_sec .type02 li p.loc {flex-direction: column; align-items: flex-start;} #wrap .search_sec .type02 li p.loc::before, #wrap .search_sec .type02 li p.loc img {display: none;} #wrap .search_sec .type02 li p.loc span.date {margin: 5px 0 0; padding: 0;} #wrap .search_sec .type02 li p.loc span.date::before {display: none;} } @media (max-width: 490px) { #wrap .search_box .global form, #wrap .nav_box .al_box, #wrap #aside, #wrap #container {padding: 0 20px;} #wrap #aside .tab_box {left: 20px; width: calc(100% - 40px);} #wrap .search_sec .type02 li p.loc {margin: 20px 0 0;} #wrap .search_sec .type03 li a, #wrap .search_sec .type05 li .box {padding: 20px;} #wrap .search_sec .type02 li {padding: 10px 0 20px;} #wrap .search_sec .type02 li + li {padding-top: 20px;} #wrap .search_box .input_box > .select, #wrap .search_box .text_input::before {display: none;} #wrap .tab_link ul li {width: calc(100% / 3);} #wrap .result_counter {padding: 10px 20px; font-size: 16px; margin: 20px 0;} #wrap h2.category {font-size: 22px; line-height: 26px;} #wrap h2.category span {height: 26px; line-height: 26px;} } @media (max-width: 480px) { #wrap .search_range dd a {font-size: 14px;} #wrap .search_sec .type05 li {margin: 0 !important;} } @media (max-width: 380px) { #wrap .paginate strong {width: 30px; height: 30px; line-height: 30px;} } @media (max-width: 360px) { #wrap .search_box .global form, #wrap .nav_box .al_box, #wrap #aside, #wrap #container {padding: 0 15px;} #wrap #aside .tab_box {left: 15px; width: calc(100% - 30px);} #wrap .search_sec .type02 li p.loc {margin: 15px 0 0;} #wrap .search_sec .type03 li a, #wrap .search_sec .type05 li .box {padding: 15px;} #wrap .tab_link ul li {width: calc(100% / 2);} }