@charset "utf-8";
@import url(common.css);
@import url(swiper-bundle.min.css);
:root {
	--primary-color: #4a7c59;  /* Define primary color variable */
	--secondary-color: #1A932E21;  /*color aplied mostly on button*/
	--tertiary-color: #d6e1e5;
	--quaternary-color: black;
	--error-color: orange;
	--white-color: #fff;
	--red-color: red; /* Define secondary color variable */
}
#wrap{ position: relative; width:100%; height:auto;margin:0 auto; background:#fff; }
#wrap #header{width:100%;margin:0 auto;  background:#fff}
.header_top {width:98%; clear:both; overflow:hidden; padding:1px 0;margin:0 auto;}
.header_top p img{float:left;}

.header_top >.logo a{display:inline-block;float:left;font-size:28px;font-weight:700;color:#259d1f; padding:13px 10px 8px 0;}
.header_top .logo a:hover{color:#40B1DD;}
.header_top span{float:left;font-size:13px;color:#99b297;padding-top:13px;}

.util {float:right; margin-top:20px}
.util ul{float:left;}
.util ul li{float:left}
.util ul li a{display:inline-block;padding:5px;line-height:12px;color:#777}
.util a img{margin-top:-5px}
.util ul li a:hover{color:#F60; text-decoration:none }
.util ul li :after{content: '|';color:#c6c6c6; padding-left:5px}
.util ul li .last:after{content: '';}
.util p {float:right; padding:0 0 0 5px;}

/* Main menu wrapper */
.wrap_menu{width:100%;background:#4a7c59;}
.cbp-hsmenu {width:97%;}
.cbp-hsmenu > li {display: inline-block;width:175px; float:left;height:45px;}
.cbp-hsmenu > li > a {color: #fff; display:inline-block;width:175px; font-size:15px;line-height:45px;text-align:center;transition: all 0.5s;}
.cbp-hsmenu > li:first-child{width:175px;}
.cbp-hsmenu > li:first-child > a {width:175px;}
/* .cbp-hsmenu > li:last-child{float:right;} */
.cbp-hsmenu > li > a:hover {color:#fff;background-color:#556B2F;}
.cbp-hsmenu > li .on{background-color:#556B2F;color:#fff;}

.Location{ text-align:right; width:100%;color:#878787; background:#eee}
.Location p{width:97%;margin:0 auto; text-align:right; padding:10px 0 10px 0; }
/* header end */


/* contents start */
#wrap #contents{width:97%;margin:0 auto; clear:both;padding-bottom:120px;}
#contents{min-height:100%; height:100%;}
#contents_R{width:79.5%; float:left;padding-top:10px; background:#fff}
#contents_L{ width:18%; float:left; margin-right:2.5%; height:100%; } 
/* #contents h3{display:inline-block; width:100%;  font-size:19px; letter-spacing:-0.3px; color:#2a4a6b;  padding:15px 0 20px 0;  font-weight:700;background:url(../images/h3_bg.png) no-repeat 0 bottom; margin-bottom:20px} */
#contents h3{display:inline-block; width:100%;  font-size:20px; letter-spacing:-0.3px; color: #4A7C59;  padding:15px 0 20px 0;  font-weight:bold; margin-bottom:20px}
#contents h4{display:inline-block;  font-size:15px; letter-spacing:-0.3px;color:#4A7C59;  font-weight:700;  margin-bottom:5px}
#contents .block{float: left;width: 23.5%;margin-right: 2%; height:300px}

#userinfo{background-color: var(--secondary-color); padding:10px 10px 17px 20px;color: var(--color-primary); margin-top: 20px; border-top-right-radius: 10px; border-top-left-radius: 10px; display: flex; align-items: center;}
#userinfo >a{ color:red;}
#userinfo > img{content: url(../images/user.png); height:30px; width:30px;margin-right: 10px; color: val(--primary-color);}
#contents_L h2{height:35px; padding:18px 1px 18px 15px; }
#contents_L h2 >span{ display:table-cell; white-space:pre-wrap; vertical-align:middle;font-size:18px;color: var(--primary-color); font-weight: bold; height:35px; line-height:110%}

.modalPortal { background-color: var(--tertiary-color); display: flex; align-items: center;justify-content: space-between; padding-right: 20px;}
.modalPortal > h2 > span {color: var(--primary-color); }
.modalPortal > img{content: url(../images/left_mypage.png); height:30px; width:40px;}

.infoArea{ width:100%; float:left }
.infoArea p img{ width:80%; padding:10px 0; margin:0 auto }
.infoArea .caption{display:block; margin:10px 0; width:80%; margin:0 auto;}
.imgresize{width:100%; height:100%}

.L_data{float:left;}
.R_data{float:right;} 
.L_table{float:left; display:table}
.R_table{float:right;}
.tablecell{display:table-cell; vertical-align:middle; padding:5px 10px; background:#eee} 
.tablecell label{ padding-right:5px}

.tabtitle{display:block;float:left;clear:both;font-size:16px; margin-bottom:10px }
.infoborder{ width:100%;float:left;;border:1px solid #eee; border-radius:10px; padding:15px 0; margin-bottom:30px}
.infonone{width:100%;float:left; border:1px solid #fff;}
.infoArea h3{ display:block; width:100%; float:left; clear:both; color:#036; font-weight:700; margin-bottom:7px;}
.infoArea .tabmenu{margin:0 10px 15px 20px;border-left:1px solid #cdcfd1;height:33px }
.infoArea .tabmenu li{ display:inline-block; float:left}
.infoArea .tabmenu li a{display:inline-block; float:left; color:#666;padding:7px;border-right:1px solid #cdcfd1;border-top:1px solid #cdcfd1;border-bottom:1px solid #cdcfd1;border-left:0px solid #cdcfd1;text-align:center;background-color:#fff;width:130px; 
transition: all 0.5s; font-size:13px}
.infoArea .tabmenu li a.on {background-color:#eff0f1}
.infoArea .tabmenu li a.on:hover{cursor: default}
.infoArea .tabmenu li a:hover{background-color:#eff0f1}

/* contents end */
/* h3{display:inline-block; width:100%;  font-size:19px; letter-spacing:-0.3px; letter-spacing:-0.3px; color:#2a4a6b;  padding:15px 0 20px 0;  font-weight:700;background:url(../images/h3_bg.png) no-repeat 0 bottom; margin-bottom:20px} */
h3{display:inline-block; width:100%;  font-size:20px; letter-spacing:-0.3px; letter-spacing:-0.3px; color:#4A7C59;  padding:15px 0 20px 0;  font-weight:bold; margin-bottom:20px}
h4{display:inline-block;  font-size:15px; letter-spacing:-0.3px; color:#4A7C59;  font-weight:700; margin-bottom:7px}

/* footer */
#wrap #footer{position:absolute; bottom:0; height:50px; display:inline-block;width:100%;background-color:#f9f9f9;border-top:1px solid #dedede; }
.footerin{width:500px; margin-left:auto;margin-right:auto;}
.footerin span{float:left;padding:12px 30px 0 0; display:inline-block;}
.btmMenu{margin-bottom:15px; padding-top:20px;}
.btmMenu dd{float: left;}
.btmMenu dd:after{content: '|';color: #999;}
.btmMenu dd.last:after{content: '';}
.btmMenu dd a{padding: 0 15px;color: #393939;text-decoration: none;line-height: 30px;}
.contact{ padding-top:20px; float:right; font-size:1.1em;}



/* menu */
ul#menu, ul#menu ul {list-style-type:none;margin: 0;padding:0; width:100%;}
ul#menu a {display: block;  text-decoration: none;background:#f5f5f5 url(../images/contents_bg2.gif) repeat-y 	}
ul#menu li {margin-top: -1px; }
ul#menu li >a {border-left:1px solid #d3d2d2; border-right:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; border-top:1px solid #dfdfdf;color: #333; padding: 9px 30px 9px 12px ;transition: all 0.3s;font-size:14px;
background:#f5f5f5  url(../images/arrow_up.png) 94% 50% no-repeat; font-weight:700; color:#777 }
ul#menu li >a.on, ul#menu li >a:hover.on, ul#menu li ul .current a { color:var(--primary-color); font-weight: bold; border-color:#02bf2a; background: var(--secondary-color) url(../images/arrow_down.png) 95% 50% no-repeat; padding-top:12px; padding-bottom:12px  }
ul#menu li a:hover {background:#ccc; color:#333;border-color:#dfdfdf;background:#f5f5f5 url(../images/arrow_up.png) 94% 50% no-repeat;}
ul#menu li ul{ border-bottom:1px solid #dfdfdf;border-top:1px solid #dfdfdf;margin-top: -1px;}
ul#menu li ul li a {background: #fff; color:#666; font-weight:normal;font-size:12px; padding: 4px 30px 4px 15px ; border-bottom:0px; border-top:0px; word-wrap:break-word; }
ul#menu li ul li:first-child{ padding-top:8px;}
ul#menu li ul li:last-child{ margin-bottom:8px;}
ul#menu li ul li a:hover{background: #fff url(../images/arrow_down.png) no-repeat 94% 50%;color:#03ae57; }
.code {border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code {display: block; padding: 3px; margin-bottom: 0; }
.code li {background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 {padding-left: 1em; }
.indent2 {padding-left: 2em; }


/* pop-up */
#mask{display:none;background:#333;position:fixed;left :0;top:0; z-index:10;width:100%; height:100%;opacity:0.5;z-index:999;}
.login-popup{display:none;background:#fff;padding:0;margin:0;float:left;font-size:1.2em;position:fixed;top: 48%;left: 50%;z-index: 99999;overflow:auto; border-radius:10px; overflow-x:hidden; }
.login-popup .close {position:absolute;top:15px;right:15px;}
.login-popup .popup_main {position:relative;width:100%;overflow-x:hidden; }
.login-popup .popup_main h1{display:block;width:100%; padding:20px 30px; color:#fff; font-size:15px;background:#4a7c59;font-weight:700}
.login-popup .popup_main h1 span{}
.popup_contents {clear:both;border:0px solid;padding:20px 30px 30px 30px;}
.popup_contents h2{font-size:1.2em;color:#547aa9;line-height:1.8;}


/* newpop-up */
#mask {background: #333;position:fixed;left: 0;top:0; z-index:10;width:100%; height:100%;opacity:0.5;z-index:999;}
.new-popup{background: #fff;padding:0; margin:0;font-size:1.2em;top: 48%;left: 50%;z-index: 99999;overflow:auto; border-radius:10px;overflow-x:hidden; width:98%}
.new-popup .close {position:absolute;top:15px;right:15px;}
.new-popup .new_main {position:relative;width:100%;overflow-x:hidden; }
.new-popup .new_main h1{display:block;width:100%; padding:20px 30px; color:#fff; font-size:15px;background:#4a7c59; font-weight:700}
.new-popup .new_main h1 span{}
.new_contents {clear:both;border:0px solid;padding:20px 30px 30px 30px;}
.new_contents h2{font-size:1.2em;color:#547aa9;line-height:1.8;}

/* login layout */
#login_wrap { width:100%; }
#logmain {position:absolute;	top:50%;left:50%; height:530px;width:720px; margin:0 auto;	margin-left: -360px;	margin-top: -250px; }
.loginbox { width:650px; height:435px; background:url("../images/login_bg.gif") 0 0 no-repeat; margin-top:20px; padding:10px 30px 0 50px; }
.loginbox > h2{ font-weight:700; font-size:36px; font-style:italic; color:#fff}
.log_caption{ font-weight:700; font-size:12.5px; font-style:italic; color:#8eb7e1; clear:both; padding:8px}

.idpw {float:left; display:inline-block;padding:40px 0 0 250px}
.logment{padding:20px 0 10px 0}
.idpw p{width:320px; display:block; height:44px; float:left;padding:20px 0 10px 0}
.idpw p span {width:80px; float:left; text-align:left; padding-top:10px; color:#999; vertical-align:middle;font-size:14px;}
.idpw p span label{font-size:14px;}
.idpw span .checklog{font-size:14px; border:1px solid #999;}
.idpw p a{width:190px; margin-right:0; float:right}
.idpw .inputbox{ float:right; width:200px;height:25px;border:1px solid #999;padding:2px 10px; background:#fff; margin-bottom:5px}
.idpw .inputbox:hover{border:1px solid #666; background:#fff}

.loginbtn {  margin-top:20px; font-size:16px; font-weight:700; text-align:center; }
.loginbtn a, .loginbtn a:hover{ color:#fff}
.mainlink{float:left;height:20px;line-height:20px;padding:10px 10px 0 250px;color:#464;margin-top:8px;  }
.logincopy{color:#898989; margin-top:25px; margin-bottom:50px;}




/* visual */
.visual{height:225px;background:#eaf4f4 url(../images/mainbg_guinee.png) no-repeat 50% 50%;}
.visualbox{position:relative;width:97%;clear:both;margin-left:auto;margin-right:auto; height:225px}
.edu{background:#b1d6e9 url(../images/edu.jpg) no-repeat 50% 50%;}
.visual .indicator{	position:absolute;bottom: 18px;left:500px}
.visual .indicator li{display:inline-block;width:10px;height:10px;margin:0 2px;border:0px solid #0768df;border-radius:50%;text-indent:-9999em;background:#9fdcf8;}
.visual .indicator li.on{background-color:#6ebfe5;}
.visual .slider{position:relative;width:97%;clear:both;margin-left:auto;margin-right:auto; height:280px}
.visual .slider > li{display:none;width:97%;margin:0 auto;}
.visual .slider > li.on{display: block;}
.visual .slider > li .sliderText{float:left;}
.visual .slider > li .sliderText > h5{margin:40px 0 0 30px;color:#023559; font-size:19px; letter-spacing:-0.3px; font-weight:700}
.visual .slider > li .sliderText p{color:#036;font-size:1.1em;margin-right:50px}
.visual .slider > li .thumb{float:right;width:45%;margin-top: 45px;}
.visual .slider > li .thumb img{width:100%;}
.visual .sliderBtn li{position:absolute;top:50%;}
.visual .sliderBtn li a{display:block;width:40px;height:40px;background:no-repeat 50% 50%;text-indent:-9999em;}
.visual .sliderBtn .btnPrev{left:-80px;}
.visual .sliderBtn .btnPrev a{background-image:url(../images/ico-prev.png);}
.visual .sliderBtn .btnNext{right:-90px;}
.visual .sliderBtn .btnNext a{background-image:url(../images/ico-next.png);}
.V_icon {padding:18px 0 0 30px}
.V_icon li{float:left; display:inline-block;}
/* visual end */


#main{width:97%;clear:both;margin-left:auto;margin-right:auto;}
#main_L{width:37%;margin-right:5%;float:left;}
#main_R{width:58%; float:left}
#main h3{display:inline-block;width:100%;font-size:20px;color:#4A7C59; padding:12px 0 12px 0;font-weight:bold}
.assistant{clear:both; margin-bottom:10px}
.assistant li a{display:block;line-height:160%; color:#999; font-weight:700; font-size:14px; }
.assistant li img{display:inline-block;padding:0 10px 0 0; float:left; height: 150px; margin-bottom: 20px;}
.news p{line-height:120%}
.news img{display:inline-block;padding:0 15px 30px 0;float:left}
.news >h4{font-size:16px;color:#4A7C59;display:block;margin-bottom:10px}

.notice li{ width:100%; padding:5px; border-bottom:1px  dotted #ddd}
.notice .class{color:red;width:15%;float:left;}
.notice .Date{ float:right;width:15%;}
.banner li{display:inline-block; padding-left:0.5px;padding-top:10px;}
.banner li:first-child{ padding-left:0}

/* alert */
.boxTy6 { position:relative; width:300px; border:solid 2px #8a8a8a; background:#f4f0e9; word-wrap:break-word;}
.boxTy7 { position:relative; border:solid 2px #8a8a8a; background:#f4f0e9;word-wrap:break-word;}
.interval2 { text-align:center; padding:20px; background:url("../images/sub/alert_bg.gif") 20px 20px no-repeat; word-wrap:break-word;}
.interval3 { text-align:center; padding:20px; background:url("../images/sub/alert_bg2.gif") 20px 20px no-repeat; word-wrap:break-word;}
.interval4 { text-align:center; padding:20px; background:url("../images/sub/alert_bg3.gif") 20px 20px no-repeat; word-wrap:break-word;}

.greet { color: #626262; font-size:12px; line-height:20px;  }


/* calendar  */
.popup{width:300px; background-color:#ffffff; border:#ccc 1px solid; color: #3d506e; border-radius:8px; padding:5px 5px 10px 5px}
.popup table{padding:10px;  border-collapse:collapse;} 
.popup.popup{margin-left:-40px;margin-top:-100px;}
.popup thead {background-color:#fff;border:0;}
.popup td,div.calendar th{ padding: 3px; text-align: center;}
.popup td.title{font-weight:700;color:#c0c0c0;text-align:center;padding:5px}
.popup th{background:#02c5e2;font-weight:700; color: #fff;border:0px solid #fff}
.popup td.button {cursor: pointer;}
.popup td.button:hover{background-color:#fff; cursor:pointer;}
.popup tr.days td {width:1.5em;color:#666; text-align:center;cursor:pointer; border:0px solid #fff}
.popup tr.days td:hover{background-color:#0066ff;color:#fff;cursor:pointer;}
.popup tr.days td:active,.calendar td.button:active{ background-color: #cde;}
.popup tr.days td.selected{font-weight:700;  background-color: #28c9ff;  color:#fff;}
.popup tr.days td.otherDay{color: #bbb;}
.boxTy1 .year{text-align: center; font-weight:700; font-size:15px;padding:5px}
.month .paging{text-align:center; padding:5px}
.month .paging .skip{text-align:center; font-weight:700; cursor:pointer; margin-right:4px; margin-left:4px; font-size:13px}
.popup tr.days .day_sat{color:#28c9ff;font-weight:700;}
.popup tr.days .day_sun{color:#28c9ff;font-weight:700;}

/* login layout */
#login_wrap { width:100%; }
#logmain {position:absolute;top:50%;left:50%; height:530px;width:720px; margin:0 auto;	margin-left: -360px;	margin-top: -250px; }
.loginbox { width:650px; height:390px; background:url("../images/login_bg.png") 0 0 no-repeat; margin-top:20px; padding:10px 30px 0 50px; }
.loginbox > h2{ font-weight:700; font-size:32px;  color:#fff; padding-left:250px}
.log_caption{ font-weight:700; font-size:12.5px; color:#8eb7e1; clear:both; padding:8px 8px 8px 250px; }


.progress-bar {  background-color: #fff;  height: 25px;   padding: 5px;  width: 350px;  margin: 50px 0;  border-radius: 5px;  box-shadow: 0 1px 5px #ccc inset, 0 1px 0 #ccc; } 
.progress-bar span {display: inline-block;  height: 100%;  border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;  transition: width .4s ease-in-out; } 
.blue span {  background-color: #34c2e3; } 

.loadingwrap{}
.loading{ position:relative; width:260px; height:52px; background:url(../images/loadingbg.png) no-repeat;margin:20px 0; margin-left:auto; margin-right:auto}
.loading ul{position:absolute;top:17px;left:45px}
.loading li{ float:left;}

/* sitemap  */
.sitemap_tit{display:inline-block;padding:1px 1px 10px 13px;background:url(../images/icon_rely2.gif) no-repeat;color:#666;font-weight:normal}
.site_su{display:inline-block;padding:1px 1px 10px 13px; background:url(../images/icon_login.gif) no-repeat 0 6px;color:#c79b2b;font-weight:700;display:inline-block}

.modalpopup {position:absolute; left:40%; top:50%; width:350px; height:100px; margin:-120px 0 0 -120px; padding:20px; border:5px solid #ddd; background:#f4f0e9; z-index:20;word-wrap:break-word;}
.layer .closeBtn {margin-top:20px; text-align:center;}
button { padding:6px 10px 4px; background:none; border:1px solid #999; border-radius:2px; font-size:12px; cursor:pointer; color:#0066aa;}
.dimmed {position:absolute; top:0; left:0; width:100%; height:100%; background:#ffffff; z-index:10; opacity:0.3;}

.tooltip{display:block; text-overflow:ellipsis; overflow:hidden}

input::-ms-clear { display: none; }

/*----------------Footer styles----------------*/

footer { width: 95%; display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; background-color: var(--secondary-color); margin-right: 100px; font-size: 48px; font-weight: bold;}	
footer > div { display: flex; align-items: center; gap: 5px; }
footer > div > img {height: 35px;}
footer > :last-child { gap: 10px; }
footer > :last-child > *:hover { cursor: pointer; color: #4A7C59;}