/* reg.css */

#wrap {overflow-x:hidden;min-width:340px;position:relative;}
body.reg_bg {background:url(../img/main_bg.jpg) center top #153657 no-repeat;}

header {margin:0 auto;padding:15px 0;width:100%;max-width:800px;text-align:center;}
header .logo {margin:0 auto;padding:5px 0;width:20%;max-width:237px;text-align:center;}
header .logo img {width:100%;}



#container {margin:10px auto 15px;width:100%;max-width:780px;background-color:#fff;padding:15px 10px;}
#container .page_title {padding:5px 0 15px 0;font-size:22px;letter-spacing:-1px;color:#1f2850;text-align:center;font-weight:bold;}
#container .page_title span {padding:5px 0;display:block;}
#container .page_txt {padding:15px 0;text-align:center;font-size:13px;word-break:keep-all;}

.rrn_box {width:100%;padding:3%;}
.rrn_box .ibo_form {width:100%;max-width:400px;margin:0 auto;}
.rrn_box .ibo_form:after {display:block;clear:both;content:'';height:0;visibility:hidden;}
.rrn_box .ibo_form>li {padding:5px;0;}
.rrn_box .ibo_form>li:after {display:block;clear:both;content:'';height:0;visibility:hidden;}
.rrn_box .ibo_form>li span {float:left;display:block;}
.rrn_box .ibo_form>li span.cell01 {display:inline-block;width:25%;max-width:45px;height:45px;padding:10px;background-color:#1f2850;text-align:center;border-radius:5px 0 0 5px;}
.rrn_box .ibo_form>li span.cell01 img {width:100%;}
.rrn_box .ibo_form>li span.cell02 {width:83%;height:45px;border:2px solid #1f2850;border-left:0;background-color:#fff;border-radius:0 5px 5px 0;}
.rrn_box .ibo_form>li span.cell02 .ibo {width:100%;height:100%;border:none;}

.guide_wrapper {margin:20px 0 10px;}
.guide_wrapper .rrn_guide_box {padding:15px 10px;background-color:#ebebeb;}
.guide_wrapper .rrn_guide_box h4 {padding:5px 0 5px 0;font-size:16px;font-weight:500;}
.guide_wrapper .rrn_guide_box .guide_txt {font-size:12px;padding:5px 0 15px 0;}
.guide_wrapper .rrn_guide_box .guide_list {font-size:12px;padding:5px 0 15px 0;}
.guide_wrapper .rrn_guide_box .guide_list>li {padding:4px 0 4px 12px;background:url(../img/bullet.png) 0 12px no-repeat;}
.guide_wrapper .rrn_agree {text-align:center;padding:15px 0 10px 0;}

.rrn_in_wrapper {margin-bottom:15px;}
.rrn_in_wrapper .rrn_form {display:table;max-width:400px;width:100%;margin:0 auto;box-sizing:border-box;}
.rrn_in_wrapper .rrn_form:after {display:block;clear:both;content:'';height:0;visibility:hidden;}
.rrn_in_wrapper .rrn_form>li {display:table-cell;vertical-align:middle;}
.rrn_in_wrapper .rrn_form>li:after {display:block;clear:both;content:'';height:0;visibility:hidden;}
.rrn_in_wrapper .rrn_form>li span {float:left;display:block;}
.rrn_in_wrapper .rrn_form>li span.cell01 {display:inline-block;width:25%;max-width:45px;height:45px;padding:8px 10px;background-color:#1f2850;text-align:center;border-radius:5px 0 0 5px;}
.rrn_in_wrapper .rrn_form>li span.cell01 img {width:100%;}
.rrn_in_wrapper .rrn_form>li span.cell02 {width:73%;height:45px;border:2px solid #1f2850;background-color:#fff;border-radius:0 5px 5px 0;border-left:0;}
.rrn_in_wrapper .rrn_form>li span.cell03 {width:99%;height:45px;border:2px solid #1f2850;background-color:#fff;border-radius:0 5px 5px 0;}
.rrn_in_wrapper .rrn_form>li span .ibo {width:100%;height:100%;border:none;}
.rrn_in_wrapper .rrn_form>li:first-child {width:42%;}
.rrn_in_wrapper .rrn_form>li:nth-child(2) {width:auto;text-align:center;line-height:45px;}
.rrn_in_wrapper .rrn_form>li:nth-child(3) {width:35%;}
.rrn_in_wrapper .rrn_form>li:last-child {width:auto;}
.rrn_in_wrapper .rrn_form>li:last-child .btn_submit {display:block;width:90%;height:45px;line-height:25px;background-color:#1f2850;color:#fff;text-align:center;border-radius:5px;}

/*footer {width:90%;position:relative;bottom:10%;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);}*/
footer {position:relative;padding:10px 10px 20px 10px;}
footer .copyright {text-align:center;color:#fff;font-size:12px;font-weight:300;}
footer .address{text-align:center;color:#fff;font-size:12px;font-weight:300;}





/*****************************************************************************************/
/************************************* Å«ÇØ»óµµ ****************************************/
/*****************************************************************************************/


@media only screen and (min-width: 800px) {

header .logo {padding:15px 0 5px 0;}
#container {padding:25px 10px;}
#container .page_title {padding:5px 0 15px 0;font-size:30px;letter-spacing:0;}
#container .page_title span {padding:7px 0;}
#container .page_txt {font-size:15px;}

.guide_wrapper {margin:20px 5px 10px;}
.guide_wrapper .rrn_guide_box {padding:25px 20px;}

/*footer {margin-top:100px;}*/
footer {margin:30px 0;}
footer .copyright {color:#fff;font-size:13px;font-weight:normal;}
}



/********* tooltip css **********/

.tooltip{
	display:inline-block;
	position: absolute;
	left:0;
	top:100%;
	/* width:100%; */
	z-index:10;
	/* margin-left:-75px; */
	padding:5px 10px;
	background: #ff6013;
	color: #FFFFFF;
	border-radius: 6px;
	text-align: center;
	opacity:0.7;
	font-size:11px;
}

.tooltip:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #ff6013 transparent;
}

.agree_tooltip{
	display:inline-block;
	position: relative;
	right:0;
	top:100%;
	/* width:100%; */
	z-index:10;
	/* margin-left:-75px; */
	margin-top:10px;
	padding:5px 10px;
	background: #ff6013;
	color: #FFFFFF;
	border-radius: 6px;
	text-align: center;
	opacity:0.7;
	font-size:11px;
}