/* �몃��ㅽ��� 遺덈윭�ㅺ린 */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
/********** font **********/
@font-face {
font-family:"NanumGothic";
src:url('/font/NanumGothic.eot');
src:url('/font/NanumGothic.eot?#iefix') format('embedded-opentype'),
url('/font/NanumGothic.woff') format('woff'),
url('/font/NanumGothic.ttf') format('truetype');
url('/font/NanumGothic.svg#NanumGothic') format('svg')
src:local(��), url('/font/NanumGothic.woff') format('woff');
}
@font-face {
font-family:"NanumBold";
src:url('/font/NanumGothicBold.eot');
src:url('/font/NanumGothicBold.eot?#iefix') format('embedded-opentype'),
url('/font/NanumGothicBold.woff') format('woff'),
url('/font/NanumGothicBold.ttf') format('truetype');
url('/font/NanumGothicBold.svg#NanumGothicBold') format('svg')
src:local(��), url('/font/NanumGothicBold.woff') format('woff');
}
/*湲곕낯�명똿*/
html,body {font-family: 'NanumSquare','Noto Sans KR','NanumSquareRoundR','square',"Noto Sans"; letter-spacing: -0.05em; height: 100%; line-height: 1.6;}
ul,li {list-style: none;}
ol, ul {padding-left: 0;}
dl, ol, ul{margin-bottom: 0;}
a,a:hover {text-decoration: none; color: #000; cursor: pointer;}
.h1, h1,.h2, h2,.h3, h3,.h4, h4,.h5, h5 {font-family: 'NanumSquare','square',"Noto Sans"; font-size: 1.4rem;}
p {margin-bottom: 0;}
b,strong {font-weight: 500!important}
body {background: #f5f5f5;}
table .fdawn_img img {width: 100%;}
.defaultSkin table.mceLayout {border: 1px solid #ddd !important;}
/***************************************************Header**************************************************/
.topbar {background: #fff;font-size: 14px;transition: all 0.5s;color: #666666; padding:6px 0; border-bottom: 1px solid #eee;}
.topbar .contact-info i { font-style: normal; color: #666666; line-height: 0;}
.topbar .contact-info i a, .topbar .contact-info i span {padding-left: 5px; color: #666666;}
.nav-link a:link, a:visited {color: #000;}
/***************************************************�명꽣**************************************************/
.footer a:link {color:#000 ; margin-top: 50px;}
.footer a:visited {color:#000 ; margin-top: 50px;}
/***************************************************寃뚯떆��**************************************************/
.card-table {border-radius: 1rem; overflow: hidden;}
.table-img {height: 160px; overflow: hidden;}
.table-img img {width: 100%; height: auto; }
.table-img h5 {font-size: 1rem; font-weight: 700; font-weight: 700;}
.card-title {font-size: 1.2rem; text-align: left;}
.card-table .date {width: 100%; display: block; text-align: right; color: #85858;}
.normal-table .fdawn_img img {width: 100%;}
.normal-table th{ text-align: center;}
.normal-table .subject {text-align: left;}
.normal-table .file,.writer,.date,.count {text-align: center;}
.normal-table-view th,.normal-table-view td {}
.sub-content p.right {text-align: right !important;}
.sub-content p.center {text-align: center !important;}
.sub-content p.left {text-align: left !important;}
/***********************************************************************
寃뚯떆��
***********************************************************************/
/* �ㅽ궓1-由ъ뒪�� */
#bbs_skin1_list {position:relative; text-align:left; margin-bottom:20px;}
#bbs_skin1_list .top {position:relative; height:18px; .height:28px; padding:5px 0;}
#bbs_skin1_list .top li {display:inline; height:18px; padding-right:3px;}
#bbs_skin1_list .top p {position:absolute; top:9px; .top:8px; right:0; font:normal 11px/14px dotum; color:#888;}
#bbs_skin1_list .top p span {letter-spacing:-1px;}
#bbs_skin1_list .list table {width:100%; padding:0; border-top:2px solid #a0a0a0; border-collapse:collapse;}
#bbs_skin1_list .list th {background:#f3f3f3; font:bold 14px/16px gulim; letter-spacing:-1px; color:#333; border-right:1px solid #e0e0e0; border-bottom:1px solid #ccc; vertical-align:top; padding:8px 0 4px; .padding:7px 0 5px;}
#bbs_skin1_list .list th.count {border-right:0;}
#bbs_skin1_list .list td {border-bottom:1px solid #e0e0e0;}
#bbs_skin1_list .no {width:40px; font:normal 12px/14px tahoma,gulim; color:#999; text-align:center; border-right:1px solid #e0e0e0;}
#bbs_skin1_list .file {width:30px; text-align:center; border-right:1px solid #e0e0e0;}
#bbs_skin1_list .subject {text-align:left; font:normal 12px/16px dotum; border-right:1px solid #e0e0e0; padding:8px 3px 3px; .padding:7px 3px 4px;}
#bbs_skin1_list .subject2:hover {text-decoration:underline; cursor:pointer}
#bbs_skin1_list .subject a {font:normal 12px/16px dotum; text-decoration:none; color:#000;}
#bbs_skin1_list .subject a:hover {text-decoration:underline;}
#bbs_skin1_list .name {width:90px; font:normal 12px/14px dotum; color:#666; text-align:center; border-right:1px solid #e0e0e0; padding:8px 0 3px; .padding:7px 0 4px;}
#bbs_skin1_list .name a {font:normal 12px/14px dotum; text-decoration:none; color:#666;}
#bbs_skin1_list .name a:hover {text-decoration:underline;}
#bbs_skin1_list .date {width:60px; font:normal 12px/14px tahoma,gulim; color:#999; text-align:center; border-right:1px solid #e0e0e0;}
#bbs_skin1_list .count {width:40px; font:normal 12px/14px tahoma,gulim; color:#999; text-align:center;}
#bbs_skin1_list .etc_num {font:normal 12px/14px tahoma,gulim; color:#0060d8;}
#bbs_skin1_list .page_limit {position:relative; padding:6px 0; text-align:center; background:#f3f3f3; border-bottom:1px solid #ccc;}
#bbs_skin1_list .bbs_btn_area {position:relative; padding:10px 0; overflow:hidden;}
#bbs_skin1_list .bbs_btn_area .bbs_btn {float:right;}
#bbs_skin1_list .search_box {position:relative; width:260px; margin:3px auto;}
#bbs_skin1_list .search_box li {float:left; margin-right:5px;}
#bbs_skin1_list .search_box li:last-child {margin-right:0}
#bbs_skin1_list .search_box select {width:80px; height:30px; border:1px solid #ccc; border-radius:2px; font:normal 13px/28px '留묒� 怨좊뵓','malgun gothic',dotum; color:#555;}
#bbs_skin1_list .search_box input[type="text"] {width:120px; height:30px; border:1px solid #ccc; border-radius:2px; font:normal 13px/28px '留묒� 怨좊뵓','malgun gothic',dotum; color:#555;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#bbs_skin1_list .top p {top:8px;}
#bbs_skin1_list .list th {padding:6px 0;}
#bbs_skin1_list .subject {padding:6px 3px 5px;}
#bbs_skin1_list .name {padding:6px 0 5px;}
}
/* �ㅽ궓-由ъ뒪��-�ы넗媛ㅻ윭由� */
#bbs_photo_skin1 {position:relative;}
#bbs_photo_skin1 .top {position:relative; height:18px; .height:28px; padding:5px 0;}
#bbs_photo_skin1 .top li {display:inline; height:18px; padding-right:3px;}
#bbs_photo_skin1 .top p {position:absolute; top:9px; .top:8px; right:0; font:normal 11px/14px dotum; color:#888;}
#bbs_photo_skin1 .top p span {letter-spacing:-1px;}
#bbs_photo_skin1 .list_area {position:relative; width:100%; border-top:1px solid #ccc; padding-top:20px; background:#f6f6f6; overflow:hidden;}
#bbs_photo_skin1 .list_area li {float:left; width:25%; .width:24.9%; overflow:hidden; text-align:center;}
#bbs_photo_skin1 .list_area dl {position:relative; width:80%; border:1px solid #ccc; background:#fff; margin-bottom:20px;}
#bbs_photo_skin1 .list_area dt {position:relative; width:100%; height:100px; overflow:hidden;}
#bbs_photo_skin1 .list_area dt img {width:100%; min-height:100px; .height:100px}
#bbs_photo_skin1 .list_area .etc_num {position:absolute; bottom:0; left:0; height:18px; padding:0 5px; background:#555; filter:alpha(opacity=70); opacity:0.7; font:normal 12px/18px tahoma,'malgun gothic',dotum; color:#fff; z-index:10;}
#bbs_photo_skin1 .list_area dd {height:40px; margin:5px; overflow:hidden;}
#bbs_photo_skin1 .list_area dd,#bbs_photo_skin1 .list_area dd a,#bbs_photo_skin1 .list_area dd a:visited {font:normal 13px/19px '留묒� 怨좊뵓','malgun gothic',dotum; letter-spacing:-0.05em; color:#000;}
#bbs_photo_skin1 .btn_area {clear:both; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:7px 0; verflow:hidden; text-align:right;}
#bbs_photo_skin1 .page_limit {padding:7px 0; border-bottom:1px solid #ccc; text-align:center;}
#bbs_photo_skin1 .search_area {padding:15px 0;overflow:hidden;}
#bbs_photo_skin1 .search_area ul {width:290px; overflow:hidden;}
#bbs_photo_skin1 .search_area li {float:left; overflow:hidden;}
#bbs_photo_skin1 .search_area .li_select_area {.padding-top:1px;}
#bbs_photo_skin1 .search_area .li_select_area select {width:70px; height:20px; border:1px solid #ccc; font:normal 12px/20px '留묒� 怨좊뵓','malgun gothic',dotum; color:#666;}
#bbs_photo_skin1 .search_area .li_input_area {padding:0 3px;}
#bbs_photo_skin1 .search_area .li_input_area input {width:150px; height:20px; border:1px solid #ccc; font:normal 12px/20px '留묒� 怨좊뵓','malgun gothic',dotum; color:#666;}
#bbs_photo_skin1 .search_area .li_btn_area {padding-top:1px;}
/* �ㅽ궓1-�쎄린 */
#bbs_skin1_view {position:relative; text-align:left;}
#bbs_skin1_view .title {position:relative; padding:9px 10px 5px; .padding:7px 10px 7px; font:bold 12px/16px dotum; color:#000; text-align:center; background:#f3f3f3; border-top:2px solid #a0a0a0; border-bottom:1px solid #ccc;}
#bbs_skin1_view .etc {position:relative; height:20px; .height:29px; padding-top:8px; .padding-top:7px; font:normal 11px/14px dotum; letter-spacing:-1px; color:#c0c0c0; border-bottom:1px solid #e0e0e0;}
#bbs_skin1_view .etc span {font:normal 11px/14px dotum; letter-spacing:0; color:#555;}
#bbs_skin1_view .etc span a {font:normal 11px/14px dotum; letter-spacing:0; color:#555; text-decoration:none;}
#bbs_skin1_view .etc p {position:absolute; top:7px; right:0; font:normal 11px/14px dotum; letter-spacing:-1px; color:#c0c0c0;}
#bbs_skin1_view .etc p span {font:normal 11px/14px tahoma,dotum; letter-spacing:0; color:#555;}
#bbs_skin1_view .contents {position:relative; margin:15px 0; font:normal 12px/16px dotum; color:#666;}
#bbs_skin1_view .contents p.ip {font:normal 11px/14px tahoma,dotum; color:#999;}
#bbs_skin1_view .contents .fdawn_img {text-align:center; padding-bottom:20px;}
#bbs_skin1_view .contents .fdawn_file {margin-bottom:10px;}
#bbs_skin1_view .contents .fdawn_file_box {border:2px solid #ccc; padding:5px 6px 0 5px; text-align:left; font:normal 11px/14px dotum; letter-spacing:-1px; color:#999;}
#bbs_skin1_view .comment {position:relative;}
#bbs_skin1_view .bt {position:relative; padding:7px 0 20px;}
#bbs_skin1_view .bt p {position:absolute; top:7px; right:0;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#bbs_skin1_view .title {padding:7px 10px 7px;}
}
/* 寃뚯떆湲� �㏐� */
#comment_box {position:relative; background:#f3f3f3; border:1px solid #d4d4d4; padding:12px;}
#comment_list {position:relative;}
#comment_list li {background:url(/bbs/icon/dot_line.gif) repeat-x left bottom; margin-bottom:5px;}
#comment_list .name_area {position:relative; background:url(/bbs/icon/bbs_add_icon.gif) no-repeat left 2px; .background-position:left 3px; font:bold 12px/16px dotum; color:#333; padding:3px 0 0 16px;}
#comment_list .name_area p.date {position:absolute; top:1px; right:50px; .right:62px; font:normal 11px/14px tahoma,gulim; color:#999;}
#comment_list .name_area p.bt {position:absolute; top:-4px; right:0; .right:13px;}
#comment_list .memo_area {position:relative; font:normal 12px/16px dotum; color:#666; padding:5px 0 10px;}
#comment_write {position:relative; padding-top:4px;}
#comment_write .memo_area {margin-bottom:5px;}
#comment_write .memo_area textarea {width:100%; height:50px; border:1px solid #ccc; font:normal 12px/16px dotum; color:#000;}
#comment_write .input_area {position:relative; height:19px;}
#comment_write .input_area li {float:left; height:19px; padding-right:3px;}
#comment_write .input_area .id {width:80px; height:19px; border:1px solid #ccc; background:url(/bbs/icon/name.gif) no-repeat; font:normal 12px/16px dotum; color:#000;}
#comment_write .input_area .id2 {width:80px; height:19px; border:1px solid #ccc; font:normal 12px/16px dotum; color:#000;}
#comment_write .input_area .pw {width:80px; height:19px; border:1px solid #ccc; background:url(/bbs/icon/pw.gif) no-repeat; font:normal 12px/16px dotum; color:#000;}
#comment_write .input_area .pw2 {width:80px; height:19px; border:1px solid #ccc; font:normal 12px/16px dotum; color:#000;}
#comment_write .input_area .nospam {width:62px; height:19px; border:1px solid #ccc; background:url(/bbs/icon/spam.gif) no-repeat; font:normal 12px/16px dotum; color:#000;}
#comment_write .input_area .nospam2 {width:62px; height:19px; border:1px solid #ccc; font:normal 12px/16px dotum; color:#000;}
#comment_write .input_area li.text {padding:4px 5px 0; font:normal 11px/14px dotum; letter-spacing:-1px; color:#0688ce;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#comment_list .name_area {padding:1px 0 0 16px;}
#comment_list .name_area p.bt {top:-5px;}
}
/* 湲��곌린 & �듦� & �섏젙 */
#bbs_write {position:relative; text-align:left;}
#bbs_write table {width:100%; padding:0; border-top:1px solid #a0a0a0; border-collapse:collapse;}
#bbs_write th {width:100px; background:#f3f3f3; font:bold 12px/16px gulim; letter-spacing:-1px; color:#333; border-bottom:1px solid #e0e0e0; border-right:1px solid #e0e0e0; padding:3px 0 0 7px; text-align:left;}
#bbs_write td {border-bottom:1px solid #e0e0e0; padding:5px; font:normal 11px/14px dotum; letter-spacing:-1px; color:#666;}
#bbs_write td input {font:normal 12px/16px dotum; color:#000;}
#bbs_write td .input {border:1px solid #d0d0d0; font:normal 12px/16px dotum; color:#000;}
#bbs_write td span.red {color:#ff0000;}
#bbs_write td span.name {font:bold 12px/16px dotum; color:#000;}
#bbs_write .bt_box {width:100%; text-align:center; padding:15px 0;}
.bbs_write th {padding-bottom:6px; font:bold 13px/20px "Malgun Gothic","留묒� 怨좊뵓",dotum; letter-spacing:-0.05em; text-align: left;}
.bbs_write td {padding:7px; font:normal 12px/20px "Malgun Gothic","留묒� 怨좊뵓",dotum; text-align: left;}
.bbs_write td span.name {font:bold 13px/20px "Malgun Gothic","留묒� 怨좊뵓",dotum; letter-spacing:-0.05em; text-align: left;}
.bbs_write td .input {height:26px !important}
.defaultSkin .mceIframeContainer {border:1px solid #ccc;}
.bbs_write {position:relative; text-align:left;}
.bbs_write table {width:100%; padding:0; border-top:1px solid #a0a0a0; border-collapse:collapse;}
.bbs_write th {width:100px; background:#f3f3f3; font:bold 12px/16px gulim; letter-spacing:-1px; color:#333; border-bottom:1px solid #e0e0e0; border-right:1px solid #e0e0e0; padding:3px 0 0 7px; text-align:left;}
.bbs_write td {border-bottom:1px solid #e0e0e0; padding:5px; font:normal 11px/14px dotum; letter-spacing:-1px; color:#666;}
.bbs_write td input {font:normal 12px/16px dotum; color:#000;}
.bbs_write td input[type="text"] {height:26px;}
.bbs_write td input[type="file"] {height:26px;}
.bbs_write td input[type="checkbox"] {position:relative; top:2px;}
.bbs_write td .input {height:26px; border:1px solid #d0d0d0; font:normal 12px/16px dotum; color:#000;}
.bbs_write td span.red {color:#ff0000;}
.bbs_write td span.name {font:bold 12px/16px dotum; color:#000;}
.bbs_write .bt_box {width:100%; text-align:center; padding:15px 0;}
#mce_editor_0_tbl {width: 100% !important;}
/* ��젣 & 鍮꾨�湲� 鍮꾨�踰덊샇 �낅젰�붾㈃ */
#bbs_delete {position:relative; height:175px; margin:100px 0;}
#bbs_delete form {position:absolute; width:300px; top:0; left:50%;}
#bbs_pass_box {position:absolute; top:0; left:-150px; width:100%; border-left:1px solid #e0e0e0; border-right:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0}
#bbs_pass_box .bpb_bar {padding:7px 0; font:bold 15px/1.2 '留묒� 怨좊뵓','malgun gothic',gulim; letter-spacing:-0.05em; color:#000; text-align:center; background:#f3f3f3; border-top:2px solid #a0a0a0; border-bottom:1px solid #ccc;}
#bbs_pass_box .bpb_ct {font:normal 13px/1.2 '留묒� 怨좊뵓','malgun gothic',dotum; letter-spacing:-0.05em; color:#666; text-align:center; margin:10px 0;}
#bbs_pass_box .bpb_ct p {margin-bottom:10px;}
#bbs_pass_box .bpb_ct p input {height:26px; border:1px solid #d0d0d0; font:normal 12px/16px dotum; color:#000; text-align:center;}
#bbs_pass_box .bt {margin:10px 0 20px; text-align:center;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#bbs_pass_box .bpb_bar {height:23px; padding-top:7px;}
}
#bbs_view_pass {position:relative; height:175px; margin:50px 0;}
#bbs_view_pass form {position:absolute; width:300px; top:0; left:50%;}
/* 寃뚯떆�� 踰꾪듉 */
a.bbs_btn1 {display:inline-block; height:36px; padding:0 12px; border:1px solid #ccc; border-radius:3px; background:#fff; box-sizing:border-box; font:bold 14px/32px '留묒� 怨좊뵓','malgun gothic',dotum; letter-spacing:-0.03em; color:#333}
a.bbs_btn1:hover {text-decoration:none; border:1px solid #999; color:#000}
.bbs_btn2 {display:inline-block; height:30px; padding:0 10px; border:0; border-radius:2px; background:#666; box-sizing:border-box; font:bold 13px/28px '留묒� 怨좊뵓','malgun gothic',dotum; letter-spacing:-0.03em; color:#fff; cursor:pointer;}
.bbs_btn2:hover {text-decoration:none; background:#444;}
.bbs_btn3 {display:inline-block; height:24px; padding:0 10px; border:0; border-radius:2px; background:#666; box-sizing:border-box; font:bold 13px/22px '留묒� 怨좊뵓','malgun gothic',dotum; letter-spacing:-0.03em; color:#fff; cursor:pointer;}
.bbs_btn3:hover {text-decoration:none; background:#444;}
.bbs_btn_submit {display:inline-block; position:relative; top:1px; height:40px; padding:0 22px; border:0; border-radius:3px; background:#0D51A5; box-sizing:border-box; font:bold 15px/38px '留묒� 怨좊뵓','malgun gothic',dotum; letter-spacing:-0.03em; color:#fff; cursor:pointer;}
.bbs_btn_submit:hover {text-decoration:none; background:#033A7D}
a.bbs_btn_cancel {display:inline-block; height:40px; padding:0 22px; border:0; border-radius:3px; background:#666; box-sizing:border-box; font:bold 15px/38px '留묒� 怨좊뵓','malgun gothic',dotum; letter-spacing:-0.03em; color:#fff; cursor:pointer;}
a.bbs_btn_cancel:hover {text-decoration:none; background:#444;}
/* sns 怨듭쑀 �� */
.fb_c {color: #335f9c; font: normal 11px/16px dotum,'�뗭�'; text-decoration: none; letter-spacing: -1px; padding: 0px 5px 0px 0px;}
.tw_c {color: #26b0f6; font: normal 11px/16px dotum,'�뗭�'; text-decoration: none; letter-spacing: -1px; padding: 0px 5px 0px 0px;}
.sep {color: #cecece; font: normal 11px/16px dotum,'�뗭�'; text-decoration: none; letter-spacing: -1px; padding: 0px 5px 0px 5px;}
#fb_count, .fb_count {color: #999999; font: normal 11px/16px dotum,'�뗭�'; text-decoration: none; letter-spacing: -1px;}
#tw_count, .tw_count {color: #999999; font: normal 11px/16px dotum,'�뗭�'; text-decoration: none; letter-spacing: -1px;}
@media (max-width: 575px) {
.header {height: 60px !important;}
#topbar { display: none; }
.topbar .contact-info i a,
.topbar .contact-info i span { font-size: 13px; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {line-height: 7px; padding-top: 16px; border-radius: 8px; font-size: 18px;}
.nav-tabs .nav-link {line-height: 7px; padding-top: 16px; font-size: 18px !important;}
.normal-table .date,.normal-table .writer,.normal-table .count {display: none;}
.normal-table th:nth-child(2) {display: none;}
.normal-table td:nth-child(2) {display: none;}
.normal-table.second th:nth-child(1) {width: 16%;}
.normal-table.second th:nth-child(2) {display: block;}
.normal-table.second td:nth-child(2) {display: block;}
.mceToolbarRow2 {display: none;}
.mceToolbarRow1 td {display: none;}
.mceToolbarRow1 td:first-child {display: inline-block !important;}
.mceToolbarRow1 td:nth-child(2) {display: inline-block !important;}
.mceToolbarRow1 td:nth-child(3) {display: inline-block !important;}
}
.topbar .contact-info i a {line-height: 0; transition: 0.3s;}
.topbar .contact-info i a:hover {color: #666666; text-decoration: underline;}
.topbar .social-links .kakao {width: 28px; height: 28px; background: url("../img/common/kakaotalk.png"); font-size: 0; display: inline-block; vertical-align: text-top;}
.topbar .social-links .band {width: 28px; height: 28px; background: url("../img/common/band.png"); font-size: 0; display: inline-block; vertical-align: text-top;}
.topbar .social-links .facebook {width: 28px; height: 28px; background: url("../img/common/facebook.png"); font-size: 0; display: inline-block; vertical-align: text-top;}
.topbar .social-links .youtube {width: 28px; height: 28px; background: url("../img/common/youtube.png"); font-size: 0; display: inline-block; vertical-align: text-top; margin-right: 10px;}
.topbar .social-links .plus {width: 28px; height: 28px; background: url("../img/common/top-plus.png") 8px 7px no-repeat; background-size: 14px; font-size: 0; display: inline-block; vertical-align: text-top; border-radius: 6px; background-color: #eee;}
.topbar .social-links .minus {width: 28px; height: 28px; background: url("../img/common/top-minus.png") 8px 7px no-repeat; background-size: 14px; font-size: 0; display: inline-block; vertical-align: text-top; border-radius: 6px; background-color: #eee;}
.topbar .social-links a { color: #666666; line-height: 0; transition: 0.3s; margin-left: 6px;}
.topbar .social-links a:hover { color: #666666;}
.header { transition: all 0.5s; z-index: 997; height: 90px; background-color: #fff;}
.header.sticked { position: fixed; top: 0; right: 0; left: 0; height: 70px; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);}
.header .logo img { max-height: 40px; margin-right: 6px;}
.header .logo h1 { font-size: 30px; margin: 0; font-weight: 600; letter-spacing: 0.8px; color: #fff; font-family: 'NanumSquare','Noto Sans KR','square',"Noto Sans";}
.header .logo h1 span { color: #f96f59;}
.sticked-header-offset { margin-top: 70px;}
section { scroll-margin-top: 70px;}
/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/
@media (min-width: 1280px) {
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar>ul>li {
white-space: nowrap;
padding: 10px 0 10px 28px;
}
.navbar a,
.navbar a:focus,.navbar a:visited {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3px;
font-family: 'Noto Sans KR','NanumSquare','square';
font-size: 18px;
font-weight: 600;
color: #000 ;
white-space: nowrap;
transition: 0.3s;
position: relative;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar>ul>li>a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -6px;
left: 0;
background-color: var(--color-secondary);
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before,
.navbar li:hover>a:before,
.navbar .active:before {
visibility: visible;
width: 100%;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #222222;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 28px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 4px;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a,.navbar .dropdown ul a:link,.navbar .dropdown ul a:visited {
font-family: 'Noto Sans KR','NanumSquare','square';
padding: 10px 20px;
font-size: 15px;
text-transform: none;
font-weight: 500;
color: #006a5d;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
color: var(--color-secondary);
}
.navbar .dropdown:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover>ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
.dropdown-item:focus, .dropdown-item:hover {background-color: #e0f2f1 !important;}
}
@media (min-width: 1280px) and (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover>ul {
left: -100%;
}
}
@media (min-width: 1280px) {
.mobile-nav-show,
.mobile-nav-hide {
display: none;
}
}
/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
@media (max-width: 1279px) {
.navbar {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 400px;
bottom: 0;
transition: 0.3s;
z-index: 9997;
}
.navbar ul {
position: absolute;
inset: 0;
padding: 50px 0 10px 0;
margin: 0;
background: rgba(0, 131, 116, 0.9);
overflow-y: auto;
transition: 0.3s;
z-index: 9998;
}
.navbar a,
.navbar a:focus,.navbar a:visited {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
color: #fff;
white-space: nowrap;
transition: 0.3s;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #fff;
}
.navbar .getstarted,
.navbar .getstarted:focus {
background: var(--color-primary);
padding: 8px 20px;
border-radius: 4px;
margin: 15px;
color: #fff;
}
.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
color: #fff;
background: rgba(0, 131, 116, 0.8);
}
.navbar .dropdown ul,
.navbar .dropdown .dropdown ul {
position: static;
display: none;
padding: 10px 0;
margin: 10px 20px;
transition: all 0.5s ease-in-out;
background-color: #007466;
border: 1px solid #006459;
}
.navbar .dropdown>.dropdown-active,
.navbar .dropdown .dropdown>.dropdown-active {
display: block;
}
.mobile-nav-show {
width: 30px;
height: 21px;
background: url(../img/common/mobile-nav-show.png);
font-size: 28px;
cursor: pointer;
line-height: 0;
transition: 0.5s;
z-index: 9999;
position: absolute;
right: 20px;
}
.mobile-nav-hide {
width: 30px;
height: 30px;
background: url(../img/common/mobile-nav-hide.png);
font-size: 32px;
cursor: pointer;
line-height: 0;
transition: 0.5s;
position: fixed;
right: 20px;
top: 20px;
z-index: 9999;
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .navbar {
right: 0;
}
.mobile-nav-active .navbar:before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 106, 93, 0.8);
z-index: 9996;
}
}
@media (min-width: 1400px){
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1200px;
}
}