@charset "UTF-8";

colgroup.pc{display:block;}
colgroup.mb{display:none;}
body.mainBg{background:#444e5e url(/img/main_bg.jpg) no-repeat center}
.skipNav {position:absolute; left:-9999px; top:-9999px; overflow:hidden; width:1px; height:1px; margin:0; padding:0; font-size:1px; line-height:0.1;}

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){  width   : 28px;  margin  : 0;  padding : 0;  opacity : 0;}

input[type=checkbox]:not(old) + label,input[type=radio   ]:not(old) + label{  display: inline-block;  margin-left : -28px;  padding-left:21px;  background:url('/img/radio_btn.png') no-repeat 0 0;
  line-height  : 18px;}

input[type=checkbox]:not(old):checked + label{  background-position : 0 -24px;}

input[type=radio]:not(old):checked + label{  background-position : 0 -48px;}


.centerWrap{ position:relative; /* max-width:1000px;*/ width:1160px; margin:0 auto; }
.centerWrap:after{ content:""; display:block; clear:both; }
#wrapper {position:relative; width:100%; height:100%; height:auto !important; min-height:100%; min-width:960px; }
#wrapper :after{ content:""; display:block; clear:both; }

.mobie{display:none;}

#header {position:relative; top:0; height:48px; min-width:960px; background-color:#444e5e;}
#header .logo {position:absolute; left:0px; top:5px; margin:0; padding:0; width:210px; height:48px; overflow:hidden}
#header .logo a {display:block; width:240px; height:42px;}
#nav {margin:0 auto; padding:0; width:750px; height:48px;}
#nav ul {margin:0 0 0 80px ;}
#nav ul > li {float:left; display:block; width:130px; height:48px; text-align:center }
#nav ul > li a {display:block; line-height:48px; font-size:16px; font-weight:bold; color:#fff }
#nav ul > li a:hover, #nav ul > li a:focus {background-color:#5c5f67; text-decoration:none}
#nav ul > li.on a.Info {background-color:#3ab8f2 }
#nav ul > li.on a.Education {background-color:#a5cb22 }
#nav ul > li.on a.Pay {background-color:#f4b212 }
#nav ul > li.on a.Community {background-color:#34cfb3 }
#nav ul > li.on a.Support {background-color:#a470da }

#topNav {position:absolute; right:0; top:0; margin:0; padding:0; height:48px; width:220px;}
#topNav li{display:inline-block; margin:0; padding:0; }
#topNav li a.login{float:right; width:40px; height:45px; background:url(/img/login_con.png) no-repeat left center ; background-size:38px; text-indent:-99999px;}
#topNav li a.logout{float:right; width:40px; height:45px; background:url(/img/logout_con.png) no-repeat left center ; background-size:38px; text-indent:-99999px;}
#topNav li a.mypage{float:right; width:40px; height:45px; background:url(/img/mypage_con.png) no-repeat left center ; background-size:38px; text-indent:-99999px;}
#topNav li a.study{float:right; width:40px; height:45px; background:url(/img/study_con.png) no-repeat left center ; background-size:38px; text-indent:-99999px;}


#slideSection {position:relative; visibility:hidden; padding-bottom:230px; width:100%; min-width:980px; overflow:hidden; font-size:15px}
#slideSection .sectionWrap {position:relative;height:580px;}
#slideSection section {float:left; display:block; position:relative; }	
#slideSection h1 {width:980px; height:85px; margin:80px auto 0; background:url(/img/sprite_italk.png) no-repeat 5px 5px; text-indent:-99999px;}	
/*#slideSection section h1 a {display:block; margin-left:130px; width:40px; background:url(.png) center 0 no-repeat;}*/
#slideSection .container {position:relative; z-index:1; width:980px; height:450px; margin:0 auto;}	
#slideSection .box {position:relative; float:left;  }	
#slideSection .boxRight {position:absolute; top:0;right:0;  }	
#slideSection .infoImg{width:420px; overflow:visible; margin:0 auto ; padding-top:5px; }
#slideSection .infoImg img{margin-top:5px; }
	
.aboutUs {position:relative;  margin:10px auto 0; width:1140px; height:190px;   color:#fff; }
.aboutUs a.open {position:absolute; z-index:10; left:1px; top:5px; min-width:50px; height:22px; font-size:14px;  color:#eee; line-height:22px; padding:2px 5px;
border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px;  border:solid 1px #a0a0a0; }
.aboutUs .open:hover { color:#fff;  border:solid 1px #ddd; text-decoration:none; }
.aboutUs p{display:none;position:absolute; z-index:10; left:1px; top:58px; width:100%; line-height:24px; }
.aboutUs p b {display:block; font-size:21px; padding-bottom:10px }


.footgnb {position:absolute; right:0px; top:4px}
.footgnb li {float:left; margin:0 3px}
.footgnb li a img {width:30px}

#Main {z-index:4;}
#Main h1 {margin:112px auto 0; width:980px; height:90px; background:none; }
#Main .container {margin-top:56px; height:320px}	
#Main .box {position:relative; float:left; width:360px; height:335px; }
#Main .box li a.m11 {background-color:#9ccc35; background-position:center 0;}
#Main .box li a.m12 {background-color:#f2e394; background-position:center -110px;color:#666;}
#Main .box li a.m13 {background-color:#f48513; background-position:center -1110px; }
#Main .box li a.m13_2 {background-color:#57aeff; background-position:center -670px;}
#Main .box li a.m14 { width:230px; background-color:#fffffc; background-position:center -230px; color:#777;}
#Main .box li a.m15 {background-color:#9ccc35; background-position:center -330px;}
#Main .box li a.m16 {background-color:#886bf0; background-position:center -890px; width:230px;}
#Main .box li a.m17 {background-color:#9ccc35; background-position:center -890px;  padding-top:65px; height:40px}
#Main .box li a{float:left; position:relative; width:110px; height:35px; padding-top:70px; margin:5px;  background-image:url(/img/icon_main.png);background-repeat:no-repeat; 
text-align:center;color:#fff; letter-spacing:-0.02em; font-weight:bold; line-height:1.2 }
#Main .box li a:hover{background-color:#ccc; }
#Main .boxMovie2 {width:410px; margin:5px auto; }		
#Main .boxMovie2 video{margin-top:5px; height:220px; }

#Main .boxMovie2 iframe, 
#Main .boxMovie2 object, 
#Main .boxMovie2 embed {width:410px; height:335px;margin-top:5px;  }

/*#Main .boxMovie {width:447px; height:335px; overflow:visible; margin:5px auto; }	
#Main .boxMovie.boxTypeM > .boxContent {overflow:visible; margin:0; padding:0; }
#Main .box31 {background-image:url(/img/intro1_s.jpg); z-index:15; overflow:hidden;}*/

#Main .boxRigth{position:absolute; top:0;right:0; width:360px; height:335px; }
#Main .boxRigth li a.m21 {background-color:#34cfb3; background-position:center 0;}
#Main .boxRigth li a.m22 {background-color:#fff; background-image:none; width:190px;  height:180px;  padding:30px 20px 10px;  font-size:12px; text-align:left; font-weight:normal}

#Main .boxRigth li a.m22 strong {font-size:16px; color:#666}
#Main .boxRigth li a.m22 b {font-size:24px; line-height:32px; color:#1d9fd8; letter-spacing:-0.05em}
#Main .boxRigth li a.m22 p {color:#888; line-height:19px; padding-top:5px}




#Main .boxRigth li a.m23 {background-color:#ff9330; background-position:center -550px; position:absolute; left:0; top:115px; height:70px; padding-top:35px; font-size:15px}
#Main .boxRigth li a.m24 {background-color:#319cff; background-position:center -550px;  height:60px; padding-top:45px; font-size:15px}
#Main .boxRigth li a.m25 {background-color:#34cfb3; background-position:center -550px;  height:60px; padding-top:45px; font-size:15px}
#Main .boxRigth li a.m26 {background-color:#9ccc35; background-position:center -550px;  width:230px; height:60px; padding-top:45px; font-size:15px}
#Main .boxRigth li a:hover{background-color:#aaa; }
#Main .boxRigth li a{float:left; position:relative; width:110px; height:35px; padding-top:70px; margin:5px;  background-image:url(/img/icon_main2.png);background-repeat:no-repeat; 
text-align:center;color:#fff; letter-spacing:-0.02em; font-weight:bold; line-height:1.2 }

#promotion {position:relative; z-index:15; height:335px;}
#promotion > ul {margin:0;padding:0; list-style:none;}
#promotion li {overflow:hidden; position:relative;}
#promotion li > a {display:block;position:relative;text-indent:0;}
#promotion li > a > img {position:absolute; width:100%;}
#promotion li > a > img.thumbSize {display:block; height:100%; width:auto; }
#promotion li > a > img.fullSize {display:none;}
#promotion.expand li > a > img.thumbSize {display:none;}
#promotion.expand li > a > img.fullSize {display:block;}
#promotion + .btnExpand {position:absolute;z-index:99;right:0;bottom:0;width:38px;height:38px;background:url(/img/btn_morePromotion.png) no-repeat; cursor:pointer; text-indent:-9999em;}
#promotion.expand + .btnExpand {background-position:0 -39px}
	






	[class*="boxType"] {position:absolute;}
	
	.boxTypeM { /* promotion boxType */
		width:447px; height:335px; overflow:hidden;
		left:375px;
		/*
		-moz-transition:all ease 0.4s;
		-webkit-transition:all ease 0.4s;
		-o-transition:all ease 0.4s;
		transition:all ease 0.4s;
		*/
	} 

	.box a {display:block;}
	.boxTypeM a {} 

#Info {z-index:4;}
#Info h1 {background-position:5px 43px !important;}
#Info .box {position:relative; float:left; width:220px; height:335px; }
#Info .boxRight {width:220px}
#Info .box li a.m11 {background-color:#57aeff; background-position:center 10px;}
#Info .box li a.m12 {background-color:#9ccc35; background-position:center -420px;}
#Info .boxRight li a.m21 {background-color:#fff; background-position:center -215px; color:#777}
#Info .boxRight li a.m22 {background-color:#ff9330; background-position:center -650px;}
#Info .box li a,#Info .boxRight li a{float:left; position:relative; width:170px; height:60px; padding:105px 20px 20px; margin:5px;  background-image:url(/img/icon_info.png);background-repeat:no-repeat; 
text-align:left; color:#fff; letter-spacing:-0.02em; line-height:1.2; font-size:12px; font-weight:normal; letter-spacing:-0.09em}
#Info .box li a strong,#Info .boxRight li a strong{display:block; font-size:17px; font-weight:bold; line-height:26px }
#Info li a strong.center{display:block; padding-top:15px; font-size:17px; font-weight:bold;text-align:center; }
#Info .boxRight li a.m21 strong {color:#df2c27;}
#Info .box li a:hover,#Info .boxRight li a:hover{background-color:#ccc; }

#Info .infoImg{width:520px;  }
#Info video{width:520px; height:auto}


#Education {z-index:5;}
#Education .container {width:990px}		
#Education h1 {background-position:5px -53px !important;}		
#Education h1 a {margin-left:200px !important;}

#Education .box {position:relative; float:left; min-width:120px; width:130px;  height:335px; }
#Education .box li a{float:left; display:block; position:relative; width:120px; height:43px; padding-top:75px; margin:5px;  background-image:url(/img/icon_education.png);background-repeat:no-repeat; 
text-align:center;color:#fff; letter-spacing:-0.02em; font-weight:bold; line-height:1.2;  }
#Education .box li a:hover{background-color:#ccc; }

#Education .box li a.e11 {background-color:#9ccc35; background-position:center 5px;}
#Education .box li a.e12 {background-color:#f5cd10; background-position:center -105px;}
#Education .box li a.e13 {background-color:#ff9330; background-position:center -215px;}

#Education .boxRight {position:relative; float:left; min-width:190px; width:190px; height:335px; }
#Education .boxRight li a{float:left; position:relative; width:180px; height:45px; padding-top:73px; margin:5px;  background-image:url(/img/icon_education.png);background-repeat:no-repeat; 
text-align:center;color:#fff; letter-spacing:-0.02em; font-weight:bold; line-height:1.2;  }
#Education .boxRight li a:hover{background-color:#ccc; }

#Education .boxRight li a.e21 {background-color:#3ab8f2; background-position:center -990px; }
#Education .boxRight li a.e22 {background-color:#e94730; background-position:center -555px;}
#Education .boxRight li a.e23 {background-color:#9ccc35; background-position:center -1100px;}

#Education .boxRight_s {position:relative; float:left; min-width:190px; width:190px; height:335px; }
#Education .boxRight_s li a{float:left; position:relative; width:180px; height:45px; padding-top:73px; margin:5px;  background-image:url(/img/icon_education.png);background-repeat:no-repeat; 
text-align:center;color:#fff; letter-spacing:-0.02em; font-weight:bold; line-height:1.2;  }
#Education .boxRight_s li a:hover{background-color:#ccc; }

#Education .boxRight_s li a.e23 {background-color:#9ccc35; background-position:center -755px;}
#Education .boxRight_s li a.e24 {background-color:#fff; background-position:center -842px; color:#333}
#Education .boxRight_s li a.e25 {background-color:#3ab8f2; background-position:center -345px; color:#fff}


#Education .boxImg{float:left; width:460px}
#Education .boxImg .infoImg{width:440px; overflow:visible; margin:0 auto ; padding:0 }
#Education .boxImg ul{display:block; width:440px; margin:0 auto;}
#Education .boxImg li a{float:left; position:relative; width:140px; height:32px; padding-top:65px; margin:10px 10px 0 0;  background-image:url(/img/icon_education.png);background-repeat:no-repeat; 
text-align:center;color:#fff; letter-spacing:-0.02em; font-weight:bold; line-height:1.2; font-size:14px }

#Education .boxImg li a.e31 {background-color:#3ab8f2; background-position:center -1220px;}
#Education .boxImg li a.e32 {background-color:#e94730; background-position:center -1330px;}
#Education .boxImg li a.e33 {background-color:#9ccc35; background-position:center -1445px; margin:10px 0 0 0; }

#Education .box li a:hover,#Education .boxRight li a:hover,#Education .boxImg li a:hover{background-color:#ccc; }



#Pay {z-index:4;}
#Pay h1 {background-position:5px -143px !important;}
#Pay .box {position:relative; float:left; width:205px; height:335px; }
#Pay .boxRight {width:410px}
#Pay .box li a.m11 {background-color:#ff9330; background-position:center 25px;}
#Pay .box li a.m12 {background-color:#9ccc35; background-position:center -170px; }
#Pay .boxRight li a.m21 {background-color:#149dd8; background-position:center -385px;}
#Pay .boxRight li a.m22 {background:none;}
#Pay .boxRight li a.m22:hover {background:none;}
#Pay .boxRight li a.m23 {background-color:#f4b212; background-position:center -605px; }
#Pay .boxRight li a.m24 {background-color:#fff; background-position:center -830px; color:#333}
#Pay .box li a,#Pay .boxRight li a{float:left; position:relative; width:190px; height:75px; padding-top:115px; margin:5px;  background-image:url(/img/icon_pay.png);background-repeat:no-repeat; 
text-align:center;color:#fff; letter-spacing:-0.02em; font-weight:bold; line-height:1.2;}

#Pay .infoImg{width:360px; float:left; overflow:hidden; padding:0 }
#Pay .box li a:hover,#Pay .boxRight li a:hover{background-color:#ccc; }


#Community {z-index:2;}
#Community .container {}
#Community h1 {background-position:5px -235px !important;}


#Community .box {position:relative; float:left; width:210px; height:335px; }
#Community .boxRight {width:200px; height:210px; left:205px; bottom:0; margin-top:200px}
#Community .boxR {width:400px; height:210px; left:205px; bottom:0; margin-top:200px}
#Community .box li a.m11 {background-color:#26ccb6; background-position:center 20px;}
#Community .box li a.m12 {background-color:#ff9330; background-position:center -320px; }
#Community .boxRight li a.m21 {background-color:#f5cd10; background-position:center -527px;}
#Community .boxRight li a.m22 {background-color:#976fe8; background-position:center -145px;}
#Community .box li a,#Community .boxRight li a{float:left; position:relative; width:190px; height:85px; padding-top:105px; margin:5px;  background-image:url(/img/icon_community.png);background-repeat:no-repeat; 
text-align:center;color:#fff; letter-spacing:-0.02em; font-weight:bold; line-height:1.2; font-size:14px}
#Community .box li a,#Community .boxR li a{width:182px;}
#Community .noticeBox{width:380px; padding:5px 0; float:right; overflow:hidden}
#Community .noticeBox dl{width:315px; height:130px; padding:30px;  background-color:#149dd8; color:#fff;   }
#Community .noticeBox dl dt{display:block; font-size:21px; font-weight:bold; line-height:21px; padding-bottom:10px;}
#Community .noticeBox dl dt a{float:right; font-size:11px; color:#f4f4f4}
#Community .noticeBox dl dd a{display:block; font-size:13px; color:#f9f9f9; padding:9px 0; line-height:18px; border-top:1px dotted #ddd;}
#Community .noticeBox dl dd a span{display:inline-block; float:right; font-size:11px; line-height:11px; color:#f9f9f9}

#Community .noticeBox.faq {float:left;  }
#Community .noticeBox.faq dl{background-color:#9ccc35;  }
#Community .noticeBox.Call dl{background-color:#fff; color:#525252 }
#Community .noticeBox.Call dl strong{display:block; color:#149dd8 ;  line-height:30px; font-size:20px ; padding-bottom:8px}
#Community .noticeBox.Call dl span{display:block; color:#888;  line-height:19px; font-size:13px}
#Community .box li a:hover,#Community .boxRight li a:hover{background-color:#ccc; }



#Support {z-index:3;}
#Support .container {}
#Support h1 {background-position:5px -315px !important;}
#Support .box {position:relative; float:left; width:100%; height:335px; }
#Support .box li a{float:left; position:relative; width:205px; height:90px; padding:130px 30px 10px; margin:5px 30px 0 5px;  background-image:url(/img/icon_support.png);background-repeat:no-repeat; 
text-align:left;color:#fff; letter-spacing:-0.15em;  line-height:1.2; font-size:14px}
#Support .box li a strong{display:block; font-size:18px; line-height:36px;color:#fff; font-weight:bold; letter-spacing:-0.08em;}
#Support .box li a.m11 {background-color:#38b0f1; background-position:center 20px;}
#Support .box li a.m12 {background-color:#38b0f1; background-position:center -190px; display:none }
#Support .box li a.m13 {background-color:#a470da; background-position:center -420px; }
#Support .box li a.m14 {background-color:#fff; background-image:none; margin:5px 0px 0 5px; color:#333; height:190px; padding:30px 35px 10px;
text-align:left; font-weight:normal; font-size:12px; letter-spacing:0.5px;}
#Support .box li a:hover{background-color:#ccc; }

#Support .box li a.m14 strong {font-size:16px; color:#666}
#Support .box li a.m14 b {font-size:24px; line-height:32px; color:#1d9fd8; letter-spacing:-0.05em}
#Support .box li a.m14 p {color:#888; line-height:19px; padding-top:15px;letter-spacing:-0.02em}



#indicatorBox {position:relative; z-index:0; margin:35px auto 0; width:160px;}
#indicatorBox .indicator {margin:0; padding:0; list-style:none}
#indicatorBox .indicator li {float:left; display:block; width:12px; height:12px; margin:9px 5px 9px 9px; background:#FFF;}
#indicatorBox .indicator li.on {background:#a0a0a0;}
#indicatorBox .indicator li > a {position:relative; display:block; width:12px; height:12px;  text-indent:-99999px;line-height:0;}
#indicatorBox ul > li.on a.info {background-color:#3ab8f2;}
#indicatorBox ul > li.on a.education {background-color:#a5cb22;}
#indicatorBox ul > li.on a.pay {background-color:#f4b212;}
#indicatorBox ul > li.on a.community {background-color:#34cfb3;}
#indicatorBox ul > li.on a.support {background-color:#a470da;}

#indicatorBox .indicator-box {position:absolute; z-index:1; top:0; left:0; width:30px; height:29px; background:url(/img/move_btn.png) no-repeat;}
	
#infoBox {position:absolute; left:20px; bottom:0; width:960px; height:88px; overflow:hidden;}
#infoBox .info-text {position:absolute; margin:0 0 0 60px;padding:0;list-style:none;}
#infoBox .info-text >li {position:absolute; display:none; left:0; width:850px; height:88px; background:url(/img/sprite_italk.png) 0 -800px no-repeat; text-indent:-99999px;}
#infoBox .info-text >li.intro {background-position:-1000px 0;}
#infoBox .info-text >li.info {background-position:0 -800px;}
#infoBox .info-text >li.education {background-position:0 -900px;}
#infoBox .info-text >li.pay {background-position:0 -1000px;}
#infoBox .info-text >li.community {background-position:0 -1100px;}
#infoBox .info-text >li.support {background-position:0 -1200px;}



#footer {width:100%; position:relative; min-height:42px; padding:5px 0 ; background:#444e5e; font-size:.95em; overflow:hidden; color:#bbb }
#footer #fnb {display:block; width:100% ;height:21px}
#footer #fnb li {float:left; margin:0; padding:7px 14px 0 14px; line-height:1.1; background:url(/img/line_bar60.png) no-repeat left 7px;}
#footer #fnb li a {display:block; color:#bbb;}
#footer #fnb li.noPadding {padding-left:0; background-image:none;}
#footer #fnb li a.point {color:#c90000; font-weight:bold}
	
#footer .footAdress {width:100%; height:38px; display:block; padding-top:10px; color:#aaa; }
#footer .footAdress address {float:left; margin:0; padding:0 10px 0 0; font-style:normal}
#footer .footAdress span {float:left; margin:0; padding:0 10px 0 0;}
#footer p {display:block;}
#footer .copy {width:100%; display:block; padding:3px 0; color:#999; float:none!important }



#footer .kb{position:absolute; right:0px; top:4px}

/* ==========================================================================
   Extra common
   ========================================================================== */
.jcarousel {
    position: relative;
    overflow: hidden;
    height: 100px;
}

.jcarousel ul {
    width: 20000em;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
	z-index:99;
    top: 46%;
    width: 35px !important;
    height: 37px !important;
	text-indent:-9999em;
}

.carousel-control-prev {left:0; background:url(/img/btn_Promotion.png) no-repeat 0 -40px}

.carousel-control-next {right:0; background:url(/img/btn_Promotion.png) no-repeat}

.carousel-control-prev:hover {background-position:0px -120px}
.carousel-control-next:hover { background-position:0px -80px;}