@charset "utf-8";

/* -------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
	Weathernews Official Website for smartphone
	
	new released : April 19, 2012
	update : 

	Copyright(c)WEATHER NEWS INC. ALL RIGHT RESERVED.
----------------------------------------------------------------------------------------
------------------------------------------------------------------------------------- */
body {background-color:#1278cc;}
	
.txt-sl { color:#fff; padding:15px 0; line-height:140%;text-shadow: 0px 0px 1px #fff;}
.col-wh {color:#fff;}
.ft-xl{font-size:18px;}
.ft-l{font-size:16px;}
.fl-L{float:left; margin:0px 10px 10px 0;}
.fl-R{float:right; margin: 0 0 10px 10px;}
.clear{clear:both;}

/* -------------------------------------------------------------------------------------
  CONTAINER
------------------------------------------------------------------------------------- */
.wrap{background: #fff;}
.bgsl { background:url(../image/bg-sl.jpg) top center repeat-x; min-height:392px; 
background-size:320px 392px;-webkit-background-size:320px 392px;-moz-background-size:320px 392px;-ms-background-size:320px 392px;-o-background-size:320px 392px;}
.inner-contener{width:95%; margin:0 auto; padding-bottom:20px;}
.cnt-bg-wht-sl {width: 85%;margin-left: auto;margin-right: auto;background: rgba(255, 255, 255, 0.8);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border: solid 1px #757d8a;-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);text-align: left;}
.cnt-bg-wht-sl>div { padding: 10px; line-height: 140%; }

/* -------------------------------------------------------------------------------------
  BUTTON
------------------------------------------------------------------------------------- */
#btn-send{ width:202px; line-height:45px;margin:0 auto 20px;}
#btn-send a{ text-indent: -9999em;display:block; width:100%; height:100%; background:url(../image/btn5_off.png) no-repeat;background-size:202px 45px;-webkit-background-size:202px 45px;-moz-background-size:202px 45px;-ms-background-size:202px 45px;-o-background-size:202px 45px;}
#btn-send a:active{ text-indent: -9999em;display:block; width:100%; height:100%; background:url(../image/btn5_on.png) no-repeat;background-size:202px 45px;-webkit-background-size:202px 45px;-moz-background-size:202px 45px;-ms-background-size:202px 45px;-o-background-size:202px 45px;}

/* -------------------------------------------------------------------------------------
  HEADER
------------------------------------------------------------------------------------- */
.main-head{background:url(../image/main-head-bg.png) top no-repeat;background-size:370px 125px;-webkit-background-size:370px 125px;-moz-background-size:370px 125px;-ms-background-size:370px 125px;-o-background-size:370px 125px; text-align:center; height:125px; margin:0 auto;
}
.main-head p{ padding-top:40px;}
/* -------------------------------------------------------------------------------------
  result.html
------------------------------------------------------------------------------------- */
.sora-time {color:#009; font-size:120%; line-height:160%;}
.arrow-l{ position: absolute; top:120px; left:5px; z-index:3}
.arrow-r{ position: absolute; top:120px; right:5px; z-index:3;}
.arrow-l a,.arrow-r a{display:block; width:19px; height:26px;}

/* -------------------------------------------------------------------------------------
  CLOUD
------------------------------------------------------------------------------------- */
.cloud{margin:15px auto; text-align:center;}
.cloud-b{ margin:15px auto; width:293px; height:205px; background:url(../image/cloud_b.png) 0 0 no-repeat;background-size:293px 205px;-webkit-background-size:293px 205px;-moz-background-size:293px 205px;-ms-background-size:293px 205px;-o-background-size:293px 205px; text-align:center; line-height:140%;}
.cloud-b-box{padding:40px 35px; color:#009;text-shadow: 0px 0px 1px #009;}
.cloud-s{ margin:15px auto; width:293px; height:187px; background:url(../image/cloud_s.png) 0 0 no-repeat;background-size:293px 187px;-webkit-background-size:293px 187px;-moz-background-size:293px 187px;-ms-background-size:293px 187px;-o-background-size:293px 187px; text-align:center; line-height:140%;}
.cloud-s-box{padding:52px 35px; color:#009;text-shadow: 0px 0px 1px #009;}


#graf-bg{width: 240px;margin: 5px auto;padding:10px 0;background:rgba(255,255,255,.6);border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;}
#graf-bg>div.q-item{margin-bottom:5px;}#graf-bg>div.q-item:last-child{margin-bottom:0;}
.q-item{padding:0 10px 0;/zoom:1;}.q-item:after{content:"";display:block;height:0;clear:both;}
.q-item p{float:left;}.q-item p:last-child{float:right;}

/* -------------------------------------------------------------------------------------
  QUESTION
------------------------------------------------------------------------------------- */
.q-txt{color:#FFF; font-size:24px; line-height:20px; text-shadow:0px 0px 1px #fff; text-align:center; margin: 10px auto;}
#q-balloon {width:280px; margin:0 auto 10px; list-style:none; line-height:43px; text-indent:40px; font-size:20px;}
#q-balloon li{ width:280px; line-height:43px; margin-bottom:5px;background-size:280px 43px;-webkit-background-size:280px 43px;-moz-background-size:280px 43px;-ms-background-size:280px 43px;-o-background-size:280px 43px; }
#q-balloon li a{display:block;width:100%; height:100%;}

#q-balloon li:first-child{
	background:url(../image/btn1_off.png) 0 0 no-repeat;
	background-size:280px 43px;
	}
#q-balloon li:nth-child(2){
	background:url(../image/btn2_off.png) 0 0 no-repeat;
	background-size:280px 43px;
	}
#q-balloon li:nth-child(3){
	background:url(../image/btn3_off.png) 0 0 no-repeat;
	background-size:280px 43px;
	}
#q-balloon li:last-child{
	background:url(../image/btn4_off.png) 0 0 no-repeat;
	background-size:280px 43px;
	}

#q-balloon li.selected:first-child{
	background:url(../image/btn1_on.png) 0 0 no-repeat;
	background-size:280px 43px;
	}
#q-balloon li.selected:nth-child(2){
	background:url(../image/btn2_on.png) 0 0 no-repeat;
	background-size:280px 43px;
	}
#q-balloon li.selected:nth-child(3){
	background:url(../image/btn3_on.png) 0 0 no-repeat;
	background-size:280px 43px;
	}
#q-balloon li.selected:last-child{
	background:url(../image/btn4_on.png) 0 0 no-repeat;
	background-size:280px 43px;
	}

/* -------------------------------------------------------------------------------------
  CHOICE
------------------------------------------------------------------------------------- */
#choice1{font-size:20px;text-shadow:0 0 1px #000;padding-left:20px;position:relative;}
#choice1:after{width:14px;height:14px;content:"";background-color:#00f;position:absolute;top:3px;left:0;border-radius:25px;}
#choicePer1{font-size:20px;text-shadow:0 0 1px #000;}

#choice2{font-size:20px;text-shadow:0 0 1px #000;padding-left:20px;position:relative;}
#choice2:after{width:14px;height:14px;content:"";background-color:#f00;position:absolute;top:3px;left:0;border-radius:25px;}
#choicePer2{font-size:20px;text-shadow:0 0 1px #000;}

#choice3{font-size:20px;text-shadow:0 0 1px #000;padding-left:20px;position:relative;}
#choice3:after{width:14px;height:14px;content:"";background-color:#0f0;position:absolute;top:3px;left:0;border-radius:25px;}
#choicePer3{font-size:20px;text-shadow:0 0 1px #000;}

#choice4{font-size:20px;text-shadow:0 0 1px #000;padding-left:20px;position:relative;}
#choice4:after{width:14px;height:14px;content:"";background-color:#ff0;position:absolute;top:3px;left:0;border-radius:25px;}
#choicePer4{font-size:20px;text-shadow:0 0 1px #000;}