@charset "utf-8";

 /* 탭 */
#info{overflow:hidden; width:1376px; margin:39px auto 0;}
#info > ul{float:left; position:relative; width:100%; height:635px;}
#info li h3 a{display:block; height:104px; line-height:104px; padding:0 0 0 60px; font-size:25px; color:#e7f1f9; background:#6aaee1 url(/parkingsms/img/main/ico_tab1.png) no-repeat 90% -83px;}
#info li.tab2 h3 a{color:#acbbcb; background:#2d628d url(/parkingsms/img/main/ico_tab2.png) no-repeat 90% -83px;}
#info li.tab3 h3 a{color:#f0d3a8; background:#e1a118 url(/parkingsms/img/main/ico_tab3.png) no-repeat 90% -83px;}
#info li.tab1 h3 a:hover,
#info li.tab1 h3 a:active, 
#info li.tab1 h3 a:focus,
#info li.tab1.on h3 a{color:#fff; background-position:90% 25px;}
#info li.tab2 h3 a:hover,
#info li.tab2 h3 a:active,
#info li.tab2 h3 a:focus,
#info li.tab2.on h3 a{color:#fff; background-position:90% 24px;}
#info li.tab3 h3 a:hover,
#info li.tab3 h3 a:active,
#info li.tab3 h3 a:focus,
#info li.tab3.on h3 a{color:#fff; background-position:90% 24px;}

#info > ul > li{float:left; width:33.333333%;}
#info > ul > li > div{display:none; position:absolute; top:104px; left:0; width:100%; overflow:hidden;}
#info > ul > li.on > div{display:block !important;}
#info > ul > li > div{height:496px; width:1308px; padding:0 0 0 68px; color:#fff; background:#7590a4 url(/parkingsms/img/main/bg_tab1.jpg) no-repeat;}
#info > ul > li.tab2 > div{background:#47aea7 url(/parkingsms/img/main/bg_tab2.jpg) no-repeat;}
#info > ul > li.tab3 > div{background:#365b8d url(/parkingsms/img/main/bg_tab3.jpg) no-repeat;}

#info li h4{padding:55px 0 13px 0; font-size:46px; line-height:110%; letter-spacing:-1px; font-weight:normal; margin-top:0;}
#info li h4:after{display:none;}
#info li.tab3 h4{padding-bottom:20px;}
#info li h4 span{color:#feeea3;}
#info li.tab1 h4 span{color:#0a507d;}
#info li p {width:52%; margin:0 0 20px 0; font-size:16px; font-weight:bold;}
#info li p span{color:#fbff98;}
#info li ul {width:50%; text-shadow:1px 1px 1px #537e9a;}
#info li.tab2 ul{width:100%;}
#info li.tab1 ul li {width:100%; line-height:170%;}
#info li.tab2 ul li,
#info li.tab3 ul li{padding:0 0 0.7em 0;}
#info li.tab3 ul li{font-size:16px;}
#info li ul li *{display:inline-block; vertical-align:top;}
#info li.tab1 ul li em{width:100px; font-weight:bold; letter-spacing:4px; border-right:1px solid #628ba6;}
#info li.tab2 ul li em{width:65px; border-right:1px solid #498e91;}
#info li.tab2 ul li.list2 em{letter-spacing:1px;}
#info li ul li.list3 em{letter-spacing:-0.5px;}
#info li ul li span{width:78%; padding:0 0 0 0.8em;}

#info li.tab3 ul li span{width:95%; padding:0 0 0 3px;}
#info li.tab3 ul li.txt_blue{color:#59f7f5;}
  
 /* 배너 */
#banner{overflow:hidden; width:100%; border-top:1px solid #ddd;}
#banner .inner{overflow:hidden; width:1376px; height:38px; margin:0 auto; padding:15px 0 0 0;}
#banner h3{float:left; padding:2px 20px 0 0; font-size:125%;}
#banner .list_area {position:relative; float:left; width:82%; margin:5px 0 0 3%; overflow:hidden;}
#banner .list_area ul {position:relative; width:3000px;}
#banner .list_area li {float:left; padding:0 25px 0 10px; font-size:105%; background:url(/portal/img/main/ico_bullet.png) no-repeat 0 -494px;}
#banner .btns{float:left; margin:8px 5px 0 0; width:10px; height:19px; background:url(/portal/img/main/ico_bullet.png) no-repeat 0 -301px;}
#banner .btns.stop{background-position:0 -360px;}
#banner .btns.play{background-position:0 -392px;}
#banner .btns.next{margin:8px 12px 0 0; background-position:0 -331px;}
#banner .btns.more{background:#777983; color:#fff; width:35px; margin:3px 0 0 0; font-size:95%; text-align:center;}

@media all and (max-width:1024px){
	img{max-width:100%;}
	
	#info{width:98%; margin:20px auto 0;}
	#info > ul{height:580px;}
	#info li h3 a{height:60px; line-height:60px; padding:0 0 0 1.5em; font-size:21px; background-position:95% -73px; background-size:40px auto;}
	#info li.tab2 h3 a{background-position:95% -69px; background-size:30px auto;}
	#info li.tab3 h3 a{background-position:95% -74px; background-size:25px auto;}
	#info li.tab1 h3 a:hover,
	#info li.tab1 h3 a:active, 
	#info li.tab1 h3 a:focus,
	#info li.tab1.on h3 a{color:#fff; background-position:95% 11px;}
	#info li.tab2 h3 a:hover,
	#info li.tab2 h3 a:active,
	#info li.tab2 h3 a:focus,
	#info li.tab2.on h3 a{color:#fff; background-position:95% 11px;}
	#info li.tab3 h3 a:hover,
	#info li.tab3 h3 a:active,
	#info li.tab3 h3 a:focus,
	#info li.tab3.on h3 a{color:#fff; background-position:95% 10px;}
	#info > ul > li > div{top:60px;}
	#info > ul > li > div{width:93%; padding:0 0 0 7%;}
	#info li p{width:85%;}
	#info li ul{width:100%;}
	#info li h4{font-size:37px;}
	
	#banner .inner{width:98%;}
	#banner .list_area{width:74%;}
}

@media all and (max-width:900px){
	#info > ul > li > div{width:95%; padding:0 0 0 5%;}
	#info li h4{padding:40px 0 20px;}
}
@media all and (max-width:767px){
	
	#info li h3 a{padding:0 0 0 0.8em; font-size:17px;}
	#info li h4{padding:1em 0 0.7em 0; font-size:25px;}
	#info li p,
	#info li.tab3 ul li{width:98%; font-size:15px;}
	#info > ul > li > div{width:98%; padding:0 0 0 2%;}
	#info li ul{width:100%;}
	#info li ul li span{width:70%;}
	
	#banner .list_area{width:96%; margin-top:13px;}
	#banner .inner{height:75px;}
}
@media all and (max-width:510px){
	#info > ul{height:700px;}
	#info > ul > li > div{height:625px;}
	#info li.tab3 ul li span{width:90%;}
}
@media all and (max-width:440px){
	#info li h3 a,
	#info li.tab2 h3 a,
	#info li.tab3 h3 a{padding:0; text-align:center; background-image:none;}
}
@media all and (max-width:410px){
	#info li.tab1 ul li span{width:60%;}
}