@charset "utf-8";
/* CSS Document */

/* header */
#header { height:100%;position: relative;} 
#main_top {position: relative;min-height:587px;background: url('../images/main_visual.webp') no-repeat;background-position: center; background-size:cover}
#main_top::after { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); z-index:1}
.main_search {padding-top:50px;margin:0 auto;}
.search_wrap {position: relative;z-index:5} 
.search_wrap .tit-box { margin-bottom:50px}
.search_wrap .title {font-size:44px; color:#fff; font-weight:500; margin-top:5px; word-break:keep-all; letter-spacing:-1px; text-align:center;text-shadow:0px 1px 5px rgba(0,0,0,0.4)}
.search_wrap .desc {font-size: 22px; color:#252525;font-weight:500; text-align:center; letter-spacing:-1px;}
.search_wrap > fieldset {max-width: 100%;height:70px;background:#fff;border-radius: 100px;position:relative;border:4px solid #2f81f5;}
.search_wrap > fieldset input[type='search'] {border:none;font-size:20px;letter-spacing:-1px;width: calc(100% - 85px);height: 64px;background:transparent;text-align:center;outline:0;z-index:20;color:#555;position: absolute;padding: 0 18px 0 158px;}
.search_wrap > fieldset input[type='search']::placeholder {letter-spacing:-1px;color:#555;}  
.search_wrap > fieldset > span {position:absolute;right:-5px;height:100%;background:#2f81f5;border-top-right-radius: 100px;border-bottom-right-radius: 100px;width: 90px;margin:auto;}
.search_wrap > fieldset > span > input {margin: 10px 23px;width: 40px;}
.search_wrap .btn_help { color:#000; font-size:0.825em; display:block; position:absolute; right:30px; text-indent:17px; margin-top:10px;}
.search_wrap .btn_help:before { content:''; width:14px; height:14px; position:absolute; left:0; background:url('../images/icon/bl_help.png') no-repeat;}
.search_wrap .select_box  { position:absolute; z-index:25}
.search_wrap .select_box select {outline:0;border:0;border-radius:50px;line-height:1;font-size:2.0rem;width:140px;padding:22px 40px;background-image: url('../images/icon/ico-CaretDown_blue.svg');background-position-x: 100%;}

/* 유사키워드 추가 */
.main_search.spread > fieldset > span {border-top-right-radius: 40px;border-bottom-right-radius: 0;}
.search-list-wrap{position: absolute; padding: 100px 0 20px; width: 404px; display: block; z-index: 100; height: auto; background: #fff; top: -7%; left: -1%; border: 1px solid #ddd; border-radius: 13px;}
.search-list-wrap > input {position: absolute;top: 7%;right: 5%;display: none;}
.line{display: none;position:absolute;top: 70px;left:0;width:100%;height: 0;}
.line span{display:block; width:100%; height:1px; background-color: #ddd;}
.search-list-wrap li{padding: 5px;font-size:16px;color:#777;cursor:pointer;}
.search-list-wrap li:hover{background-color:#f4f4f4;}
.search-list-wrap li em{color:#019ca1;}
 
.search-list-wrap{display: flex;width: calc(100% - 217px);position: absolute;padding: 18px 25px;z-index: 100;height: auto;background: #fff;border-radius: 0;box-sizing: border-box;margin: 4px 0;top: 62px;left: 130px;} 
.search-list-wrap .related_searches { width: 100%;}
.search-list-wrap .related_searches .tit {font-size: 1.8rem;font-weight: 600;}
.search-list-wrap .related_searches ul {text-align: center;}
.search-list-wrap .related_searches li{font-size: 1.8rem;color:#777;cursor:pointer;}
.search-list-wrap .related_searches li:hover{border-radius: 7px;background-color:#f4f4f4;} 
 
/* 인기검색어 */
.keyword {width: 100%;color:#fff;padding: 30px 0 45px;display: flex;margin: 0 auto;align-items: center;justify-content: center; position: relative;z-index:2}
.keyword > p { font-size:1.25rem;}
.keyword .tit { min-width:126px; display:flex;align-items: center; margin-right: 10px;font-size:18px;font-weight: 600;color: #fff;}
.keyword .tit::before { content:''; display:inline-block; width:20px; height:20px;margin-right:5px; background:url('../images/icon/ico_chk_bl.svg') no-repeat center / cover;}
.keyword .tit::after  { content:''; display:inline-block; width:2px; height:16px; background-color:#fff; margin-left:10px}
.keyword ul{display:flex;align-items: center; flex-wrap:wrap; gap:3px}
.keyword ul li { overflow:hidden; }
.keyword ul li a { color:#fff; font-size:15px; } 
.keyword ul li .txt { display: inline-flex; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius:50px; border:1px solid rgba(255,255,255,0.7); background:rgba(7,53,131,0.5); padding:3px 15px}
.keyword ul li .txt::before { content:''; vertical-align:middle; }
.keyword ul li:nth-child(1) .txt::before  {content:'1.';}
.keyword ul li:nth-child(2) .txt::before  {content:'2.';}
.keyword ul li:nth-child(3) .txt::before  {content:'3.';}
.keyword ul li:nth-child(4) .txt::before  {content:'4.';}
.keyword ul li:nth-child(5) .txt::before  {content:'5.';} 
.inner { max-width: 1200px; width: 100%; margin: 0 auto; position: relative; }
#main_top .logo_wrap { padding-top: 55px; width: 100%; margin: 0 auto; position: relative; z-index: 20 }
#main_top .logo_wrap .logo { width: 187px; }
/* footer */
#footer { background-color: #363E54; color: #fff; position: relative; height: 150px; font-weight: 200; font-size: 1.6rem; }
.addr .left { width: 70%; margin-top: 3rem; }
.addr .right { width: 30%; margin-top: 3rem; text-align: right; }
/* color */ 
:root {  --color-blue: #2267dd;  /* 공통 파란색 */
 --line: #d9d9d9; /* 선색 */
 --fmNeo:'NanumSquareNeo';
 --fmNt:'Noto Sans KR';
}
@media all and (max-width:1280px) {
.inner { padding: 0 20px }
}
@media all and (max-width:991px){ 
.keyword {flex-flow:column; gap:10px 0}
.keyword .tit::after{content:none}
.keyword ul { flex-wrap:wrap;justify-content:center}
.keyword ul li .txt { letter-spacing:-0.5px}  
}

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (min-width:480px) and (max-width:767px) { 
#footer { font-size: 1rem; }
#footer .right img { width: 80%; }
}
/* 모바일 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:479px) {
#footer { font-size: 1rem; }
#footer .left { width: 100%; }
#footer .right { display: none; }
}
@media all and (max-width:750px) {   
#header #main_top{ min-height:auto}
.main_search { padding-top:30px;}
#main_top .logo_wrap { padding-top:45px}
 #main_top .logo_wrap .logo { width: 150px; height: 100%; margin: 0 auto; }
.keyword .tit { font-size:1.6rem; margin-right:0} 
.keyword ul li .txt { font-size:1.34rem}
.search_wrap > fieldset { height:62px}
.search_wrap > fieldset input[type='search'] {height:54px}
.search_wrap .tit-box { margin-bottom:25px}
.search_wrap .title { font-size:2.4rem}
.search_wrap .desc { font-size:1.9rem}
.search_wrap > fieldset input[type='search'] { text-align:left;border:none;font-size:1.5rem;width:calc(100% - 52px);padding-left: 74px;padding-right: 5px;}
.search_wrap > fieldset input[type='search']::placeholder { font-size:1.4rem}  
.search_wrap > fieldset > span { width:58px}
.search_wrap > fieldset > span > input {margin:10px; width:34px} 
.search_wrap .select_box select {font-size: 1.36rem;width: 68px;padding: 21px 0 20px 12px;background-size:16px;}  
.search-list-wrap {width:calc(100% - 50px); padding:10px; top:54px; left:25px}
.search-list-wrap li { font-size:1.3rem; padding:5px}
.search-list-wrap .related_searches li { font-size:1.3rem; text-align:left}
.search-list-wrap .related_searches .tit { font-size:1.4rem}

}
@media all and (max-width:368px) {
.search_wrap .title { font-size:2.2rem}  
.search_wrap > fieldset input[type='search']::placeholder { font-size:1.3rem} 
}
 
.right { float: right; }
.left { float: left; }
.gr01 { color: #00D2AF }
.red {color:#f62d2d!important;}
.bg-none, .bg-none:after { background: none !important; }
/* height */
.mh200 { min-height: 200px; }
/* 더보기 */
a.more { position: absolute; color: #717171; }
a.more > span { display: inline-block; width: 15px; height: 15px; position: relative; }
a.more > span:before { content: ''; width: 10px; height: 2px; position: absolute; left: 50%; top: 60%; background-color: #019ca1; transform: translate(-50%, -50%); }
a.more > span:after { content: ''; width: 2px; height: 10px; position: absolute; left: 50%; top: 60%; background-color: #019ca1; transform: translate(-50%, -50%) }
.more01 { display: inline-block; width: 15px; height: 15px; position: relative; }
.more01:before { content: ''; width: 10px; height: 2px; position: absolute; left: 50%; top: 60%; background-color: #019ca1; transform: translate(-50%, -50%); }
.more01:after { content: ''; width: 2px; height: 10px; position: absolute; left: 50%; top: 60%; background-color: #019ca1; transform: translate(-50%, -50%) }

/* Margin Set */
.ml0 { margin-left: 0px; }
.ml2 { margin-left: 2px; }
.ml3 { margin-left: 3px; }
.ml5 { margin-left: 5px; }
.ml6 { margin-left: 6px; }
.ml8 { margin-left: 8px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml23 { margin-left: 23px; }
.ml25 { margin-left: 25px; }
.ml30 { margin-left: 30px; }
.ml33 { margin-left: 33px; }
.ml35 { margin-left: 35px; }
.ml40 { margin-left: 40px; }
.ml45 { margin-left: 45px; }
.ml50 { margin-left: 50px; }
.ml53 { margin-left: 53px; }
.ml55 { margin-left: 55px; }
.ml60 { margin-left: 60px; }
.ml65 { margin-left: 65px; }
.ml70 { margin-left: 70px; }
.ml75 { margin-left: 75px; }
.ml80 { margin-left: 80px; }
.ml87 { margin-left: 87px; }
.ml90 { margin-left: 90px; }
.ml100 { margin-left: 100px; }
.ml150 { margin-left: 150px; }
.mr2 { margin-right: 2px; }
.mr3 { margin-right: 3px; }
.mr3i { margin-right: 3px !important; }
.mr5 { margin-right: 5px; }
.mr5i { margin-right: 5px !important; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr25 { margin-right: 25px; }
.mr30 { margin-right: 30px; }
.mr35 { margin-right: 35px; }
.mr40 { margin-right: 40px; }
.mr45 { margin-right: 45px; }
.mr50 { margin-right: 50px; }
.mr60 { margin-right: 60px; }
.mr70 { margin-right: 70px; }
.mr80 { margin-right: 80px; }
.mb2 { margin-bottom: 2px; }
.mb3 { margin-bottom: 3px; }
.mb4 { margin-bottom: 4px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }
.mb55 { margin-bottom: 55px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb200 { margin-bottom: 200px; }
.mt0 { margin-top: 0px !important; }
.mt1 { margin-top: 1px; }
.mt2 { margin-top: 2px; }
.mt3 { margin-top: 3px; }
.mt5 { margin-top: 5px !important; }
.mt7 { margin-top: 7px; }
.mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt27 { margin-top: 27px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt45 { margin-top: 45px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }
.mt70 { margin-top: 70px; }
.mt80 { margin-top: 80px; }
/* Padding Set */
.pl1 { padding-left: 1px; }
.pl3 { padding-left: 3px; }
.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl25 { padding-left: 25px; }
.pl30 { padding-left: 30px; }
.pl35 { padding-left: 35px; }
.pl40 { padding-left: 40px; }
.pl45 { padding-left: 45px; }
.pl50 { padding-left: 50px; }
.pl55 { padding-left: 55px; }
.pl60 { padding-left: 60px; }
.pl70 { padding-left: 70px; }
.pl80 { padding-left: 80px; }
.pl90 { padding-left: 90px; }
.pl120 { padding-left: 120px; }
.pl150 { padding-left: 150px; }
.pr2 { padding-right: 2px; }
.pr3 { padding-right: 3px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pr25 { padding-right: 25px; }
.pr30 { padding-right: 30px; }
.pr35 { padding-right: 35px; }
.pr40 { padding-right: 40px; }
.pr45 { padding-right: 45px; }
.pr50 { padding-right: 50px; }
.pr60 { padding-right: 60px; }
.pr70 { padding-right: 70px; }
.pr80 { padding-right: 80px; }
.pb3 { padding-bottom: 3px; }
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb20i { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px; }
.pb25i { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px; }
.pb30i { padding-bottom: 30px !important; }
.pb35 { padding-bottom: 35px; }
.pb40 { padding-bottom: 40px; }
.pb45 { padding-bottom: 45px; }
.pb50 { padding-bottom: 50px; }
.pb60 { padding-bottom: 60px; }
.pb70 { padding-bottom: 70px; }
.pb80 { padding-bottom: 80px; }
.pt1 { padding-top: 1px; }
.pt2 { padding-top: 2px; }
.pt3 { padding-top: 3px; }
.pt4 { padding-top: 4px; }
.pt5 { padding-top: 5px; }
.pt7 { padding-top: 7px; }
.pt8 { padding-top: 8px; }
.pt10 { padding-top: 10px; }
.pt12 { padding-top: 12px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt22 { padding-top: 22px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }
.pt35 { padding-top: 35px; }
.pt40 { padding-top: 40px; }
.pt45 { padding-top: 45px; }
.pt50 { padding-top: 50px; }
.pt60 { padding-top: 60px; }
.pt70 { padding-top: 70px; }
.pt80 { padding-top: 80px; }