@charset "utf-8"; 

@font-face {
    font-family:'SF_IceMango'; 
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_IceMango.woff') format('woff'); 
    font-weight:normal; 
    font-style:normal; 
}
.po_font4 a {font-family:'SF_IceMango',sans-serif; font-size:44px; color:#393E6F; font-weight:normal; font-style:normal; letter-spacing:2px; }
.po_font4 a {text-shadow:1px 1px 1px #fff}
.po_font4 a:hover {background:#fff}

body {background:#ddd}
#header {background-color:#fff; }
.index {background-color:#fff; }
.index_sub {background-color:#fff; }
.container {background-color:#fff; }

/* 헤더 { */
label {word-break:keep-all !important; }
#header {position:fixed; top:0; left:0; width:100%; height:80px; border-bottom:0; padding-top:0; padding-bottom:0; z-index:98; 
		border-bottom:1px solid #cfcfcf; 
		box-shadow:0 1px 5px 0 rgba(0,0,0,0.08); 
		-moz-box-shadow:0 1px 5px 0 rgba(0,0,0,0.08);  /* Firefox */
		-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,0.07);  /* Safiri, Chrome */
}
.gnb_wrap {width:950px; height:80px; top:0; margin:0 auto; z-index:100;}

/* 로고 Area */
.logo_area {float:left; margin: 15px 0 0 50px; background-color:#fff;}
.logo_area .logo_small {margin: 0px 5px 0 0px; font-size:20px;}
.logo_area .logo_big {margin:0; font-size:44px;}

main {width:100%; height:100%; }
.index {width:810px; overflow:hidden}
.index_sub {width:808px;}
.index_top_height {width:808px;}
.container {width:810px; overflow:hidden}

.index {margin:0 auto; padding:0 0 0 0; 
			border-left:1px solid #9e9e9e; 
			border-right:1px solid #9e9e9e; 
}
.index_sub {position:fixed; top:80px; margin:0 auto; height:50px; padding:10px 0 0 10px; z-index:10; border-bottom:1px solid #d9d9d9; } /* 헤더 높이와 같게 */
.index_top_height {margin:0 auto; height:129px !important; background:#ffffff}

.container {margin:0 auto; padding:0 0 30px 0;
			border:1px solid #9e9e9e; 
			border-top:0 solid #9e9e9e; 
			border-radius:0 0 11px 11px; 
	-moz-border-radius:0 0 11px 11px; 
	-webkit-border-radius:0 0 11px 11px; 
}
.container_padding {padding:0 20px 0 20px;}

/* 검색 { */
#search_area {position:relative; }
.search_cookie_del,
.tooltip .tooltiptext,
#select_icon,
#search_submit,
#search_tog_box {position:absolute; }

#search_area {z-index:0; }
.search_cookie_del {z-index:0; }
#select_icon {z-index:0; }
#po_search {z-index:-1; }
#search_tog_box {z-index:0; }

#search_area {top:16px; margin:0 auto; width:641px; height:46px; padding:0 0 0 0; }

/* 검색 쿠키저장/지우기 */
.search_cookie_del {margin:9px 0 0 10px; height:40px; color:#4C5F7A; text-align:center;  /* font-family:'Noto Sans KR', 'Malgun Gothic', 'font-R'; */
		border-radius:6px 0 0 6px; 
   -moz-border-radius:6px 0 0 6px; 
-webkit-border-radius:6px 0 0 6px; 
}
#keycook {margin:0 11px 0 3px}
#keycook, #keydel {font-size:19px; cursor:pointer}
#keycook:hover, #keydel:hover {color:#29B6F6; cursor:pointer}

/* 검색 쿠키저장/지우기 - 툴팁 */
.src_btn_tooltips {
    position: absolute;
    bottom: 100%;
    left: 50%;
    cursor: default;
    color: #fff;
    background-color: #212121;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight:normal; 
    font-stretch:normal; 
    font-style:normal; 
    white-space: nowrap;
    z-index: 10;
    transform: translateX(-50%) translateY(10px); /* 처음엔 아래로 10px 내려옴 */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease; /* opacity + 위치 부드럽게 */
}
.src_btn_tooltips::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #212121;
    transform: translateX(-50%);
}
.tooltip-left {left: 27%;} /* 왼쪽 스타일 */
.tooltip-right {left: 87%;} /* 오른쪽 스타일 */
.search_cookie_del .fl_btns:hover .src_btn_tooltips {opacity: 1; transform: translateX(-50%) translateY(-30%);}  /* hover시 Y축 올라가서 제자리로 */

/* 검색엔진 */
#select_icon {width:26px; height:26px; margin:11px 0 0 80px; cursor:pointer}
.search_icon_google {top:0; left:0; background:url(../../../../po/_img/src_google.png) no-repeat left top; background-size:26px 26px}
.search_icon_naver {top:0; left:0; background:url(../../../../po/_img/src_naver.png) no-repeat left top; background-size:26px 26px}
.search_icon_daum {top:0; left:0; background:url(../../../../po/_img/src_daum.png) no-repeat left top; background-size:26px 26px}
.search_icon_bing {top:0; left:0; background:url(../../../../po/_img/src_bing.png) no-repeat left top; background-size:26px 26px}
.search_icon_zum {top:0; left:0; background:url(../../../../po/_img/src_zum.png) no-repeat left top; background-size:26px 26px}
.search_icon_duckduckgo {top:0; left:0; background:url(../../../../po/_img/src_duckduckgo.png) no-repeat left top; background-size:26px 26px}
.search_icon_nate {top:0; left:0; background:url(../../../../po/_img/src_nate.png) no-repeat left top; background-size:26px 26px}

/* 검색 input { */
#po_search {width:100%; padding-left:0px; margin-top:0; display:flex; z-index:0;}
#po_search input[type="text"],
#po_search input[type="text"]:focus {flex:1; height:44px; padding:0 50px 0 120px; font-size:1.5em; 
	border:none !important;
	border-radius:23px;
	box-sizing:border-box;
	outline:none !important;
	box-shadow:none !important;
	background-color:#fff;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
#po_search input::placeholder {color:#e0e0e0; font-size:1.0em;}
#search_submit {position:absolute; right:10px; top:4px; width:40px; height:40px; background:transparent; border:none; color:#4C5F7A; font-size:26px; border-radius:50%; cursor:pointer; 
	display:flex; 
	align-items:center; 
	justify-content:center;
}
#search_submit:hover {color:#29B6F6;}

.radius_on {border:2px solid #4C5F7A; 
		border-radius:20px; 
   -moz-border-radius:20px; 
-webkit-border-radius:20px; 
}
.radius_off {border:2px solid #4C5F7A; 
		border-radius:20px 20px 0 0; 
   -moz-border-radius:20px 20px 0 0; 
-webkit-border-radius:20px 20px 0 0; 
}

/* 검색엔진 리스트/최근검색어  display:none;  */
#search_tog_box {display:none; width:100%; top:48px; left:0; margin:0; padding:0 0 0 0; 
		background:#fff; 
		border:2px solid #4C5F7A; 
		border-top:0; 
		z-index:100; 
		border-radius:0 0 20px 20px; 
   -moz-border-radius:0 0 20px 20px; 
-webkit-border-radius:0 0 20px 20px; 
}

.search_engine_list {position:absolute; float:left; width:140px; margin:15px 0 0 0; padding:0 20px 0 20px;  z-index:100; }
.search_engine_list li {margin:0 0 10px 0; padding:0 5px 0 5px; line-height:28px; cursor:pointer; font-size:12px; color:#000; 
		border:1px solid #dddddd; 
		border-radius:3px; 
   -moz-border-radius:3px; 
-webkit-border-radius:3px; 
}
.search_engine_list li span {float:right; margin-top:-1px; }
.search_engine_list li.close {padding:6px 0 0 0; color:#ffffff; font-weight:bold; text-align:center; cursor:pointer}
.search_engine_list li:hover {
		border:1px solid #29B6F6; 
		border-radius:3px; 
   -moz-border-radius:3px; 
-webkit-border-radius:3px; 
}
.search_engine_list li img{width:18px; height:18px; -webkit-filter: grayscale(100%); filter: gray;}
.search_engine_list li:hover img{-webkit-filter: grayscale(0%); filter: none;}

.search_engine_list .search_engine_select { font-weight:bold; 
		border:1px solid #29B6F6; 
		border-radius:3px; 
   -moz-border-radius:3px; 
-webkit-border-radius:3px; 
}
.search_engine_list .search_engine_select img{-webkit-filter: grayscale(0%); filter: none;}

#recent {height:200px; margin:10px 15px 0 10px; padding:0 0 0 130px; text-align:center}
#recent .ppo-recent {float:left; width:100%; top:0; margin::0 10px 0 0; padding:0 0 0 0;}
#recent .ppo-recent li {margin:5px 5px 0 0; padding:5px 5px 3px 15px; line-height:28px; text-align:left; 
		border:1px solid #dddddd;
		border-radius:5px; 
   -moz-border-radius:5px; 
-webkit-border-radius:5px; 
}
#recent .ppo-recent li a {cursor:pointer; font-size:14px; color:#000; }
#recent .ppo-recent li i {cursor:pointer; float:right; margin:5px 6px 0 0; font-size:16px; color:#aaaaaa; }
#recent .ppo-recent li i:hover {color:#000000; }
#recent .ppo-recent li:hover {background:#eeeeee}
#recent .ppo-box-msg {padding-top:80px; color:#aaa;}

.search_tog_box_ft:before {display:block; visibility:hidden; clear:both; content:""}
.search_tog_box_ft {width:100%; margin:0 10px 20px 0; padding:20px 10px 0 10px;color:#000; font-size:12px; text-align:center; border:0 solid #dddddd; background:#ffffff}
/* } 검색  */

/* index_sub  */
.loc {float:left; padding:8px 0 0 10px}
.loc {color:#afafaf; font-size:16px; font-weight:bold; color:#3a66a2}

.loc_oper {display:none; float:left; margin:5px 0 0 20px; padding:0 0 0 0; font-size:13px; color:#4C5F7A; letter-spacing:0; }
.locen, .locon, .locsn {font-weight:bold}
.locen_wrap {display:inline-block; width:65px; padding:3px 5px 4px 5px;
		border:#dddddd solid 1px; 
		border-radius:7px; 
   -moz-border-radius:7px; 
-webkit-border-radius:7px; 
}
.locen_wrap i {display:inline-block; padding:3px 5px 0 0; font-size:12px; }
.locen {display:inline-block;}
.locon {margin:0 5px 0 5px;}
.locsn {}

/* index_sub - 커뮤니티 */
.user_community {float:right; padding:8px 10px 0 0}
.user_community {color:#afafaf; font-size:18px; color:#3a66a2}
.user_community a {margin:0 0 0 6px;}
.user_community a:hover {color:#29B6F6}

/* 고정버튼 - 상하/환경설정 */
.cont_btn_wrap {
	position: fixed;
	bottom: 176px;
	left: 50%;
	transform: translateX(-50%);
	width: 808px;
	z-index: 0;
	height: 0;
}
.cont_btn_wrap .cont_btn_sub {margin-top:0; padding:0; height:0; min-height:0; background-color:#eee;}
.cont_btn_wrap .cont_btn {float:right; margin-right:-45px;}
.cont_btn_wrap .cont_btn .fl_btns {position:relative; display:block; width:36px; height:38px; margin-bottom:5px; padding-top:0;
	border:1px solid #ddd; 
	border-radius:6px; 
	background-color:#fff; 
	text-align:center; 
}
.cont_btn_wrap .cont_btn .fl_btns {font-size:19px; color:#2a2a2a;}
.cont_btn_wrap .cont_btn .fl_btns:hover {border-color:#00a3ff;}
.cont_btn_wrap .cont_btn .fl_btns.main_color_bg {color:#f4f4f4; background-color:#00a3ff; border-color:#00a3ff;}

/*고정버튼 - 툴팁 */
.cont_btn_tooltips {
    position:absolute; 
    top:50%; 
    left:50px; 
    line-height:100%; 
    width:max-content; 
    opacity:0; 
    transition:all 350ms cubic-bezier(0.645, 0.045, 0.355, 1); 
    cursor:default; 
    color:#fff; 
    background-color:#212121; 
    border-radius:4px; 
    padding:4px 6px; 
    font-size:11px; 
    font-weight:normal; 
    font-stretch:normal; 
    font-style:normal; 
    transform:translateY(-50%); 
}
.cont_btn_tooltips:after {
    position:absolute; 
    left:-7px; 
    top:50%; 
	content:""; 
    border-top:4px solid rgba(0, 0, 0, 0); 
    border-left:4px solid #212121; 
    border-right:4px solid rgba(0, 0, 0, 0); 
    border-bottom:4px solid rgba(0, 0, 0, 0); 
    transform:translateY(-50%) rotate(180deg); 
}
.cont_btn_wrap .fl_btns:hover .cont_btn_tooltips {left:55px; opacity:1;}


/* 풋터 */
footer {width:100%; padding:10px 0 10px 0; }
.footer_gnb {width:810px; height:70px; margin:0 auto; padding:27px 10px 0 10px; 
			border:1px solid #9e9e9e; 
			border-radius:11px; 
	-moz-border-radius:11px; 
	-webkit-border-radius:11px; 
	background-color:#575B66; /* #454955 -> #464855 ->#4e515b -> #575B66 -> #5b6171 -> #757987 */
}
.footer_gnb .inner {margin:0 auto; width:100%; text-align:center;}
.footer_gnb .inner a {margin:0 5px 0 5px; padding:5px 6px 5px 5px; font-size:14px; color:#fff; border:1px solid #575B66; }
.footer_gnb .inner a,
.footer_gnb .inner a:hover {
			border-radius:6px; 
	-moz-border-radius:6px; 
	-webkit-border-radius:6px; 
}
.footer_gnb .inner a:hover {color:#000000; border:1px solid #575B66; background:#fff;}
.footer_gnb .inner i {margin:0 3px 0 0; padding:0; font-size:14px; vertical-align:middle; }