@charset "utf-8"; 
/* CSS Document */
@import url("common.css");

.wrap{width:1200px; margin:0 auto ; }
.wrap:after{clear:both; display:block; content:"";}
.login{background-color:#ecf5f4; padding:50px 0 0 0;}
.login:after{clear:both; display:block; content:"";}
.login_wrap{display:inline-block; width:900px; margin:30px 150px;}
.login_wrapafter{clear:both; display:block; content:"";}
.login .loginbox .login_input{ width:465px; height:485px; background-color:#fff; border-bottom:3px solid #dfe6ef; margin-top:30px; box-sizing:border-box; float:left; border-bottom:3px solid #e1e6ea;}
.login .loginbox .login_input:after{clear:both; display:block; content:"";}
.login .loginbox .login_input h2{margin:50px 0 0 50px;}
.login .loginbox .login_input h2 img{display:inline-block; float:left; margin-right:20px; }
.login .loginbox .login_input h2 span{display:inline-block;  font-size:15px; color:#222; font-weight:200;}
.login .loginbox .login_input h2 span em{font-size:18px; color:#094b9f; font-weight:500;}

.login_tab{padding:0 50px; height:200px;}
.login_tab .tab_title{margin:30px 0 20px 0;}
.login_tab .tab_title:after{clear:both; display:block; content:"";}
.login_tab .tab_title li{float:left;}
.login_tab .tab_title li.tabtitle a{display:inline-block; height:45px; line-height:39px; border:3px solid #d5ebf8;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; box-sizing:border-box; font-size:17px; color:#838383; padding:0 40px;}
.login_tab .tab_title li.tab_on a{background-color:#2ea2db; border:none; line-height:45px; font-weight:600; color:#fff;}

.login .loginbox .login_01:after{clear:both; display:block; content:"";}
.login .loginbox .login_01 fieldset:after{clear:both; display:block; content:"";}
.login .loginbox .login_01 fieldset ul{float:left; display:inline-block; width:255px; padding:0;}
.login .loginbox .login_01 input{border:none; border-bottom:1px solid #e6e6e6; display:inline-bock; width:100%; height:39px; line-height:39px; padding-left:28px; box-sizing:border-box;  font-size:14px; color:#989898;}
.login .loginbox .login_01 input::placeholder {font-size:14px; color:#989898;line-height:39px;}
.login .loginbox .login_01 input::-webkit-input-placeholder {font-size:14px; color:#989898;line-height:39px;}
.login .loginbox .login_01 input:-ms-input-placeholder {font-size:14px; color:#989898;line-height:39px;}
.login .loginbox .login_01 input#id{ background:url(../images/login/id_icon.png) no-repeat 5px center; }
.login .loginbox .login_01 input#pw{ background:url(../images/login/pw_icon.png) no-repeat 5px center;}
.login .loginbox .login_01 a.loginbtn{display:inline-block; float:right; width:92px; height:92px; margin-left:10px; border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; background-color:#2ea2db; font-size:18px; font-weight:400; color:#fff; line-height:92px; text-align:center; margin-top:15px;}
.login .loginbox .login_01 ul{margin-top:10px;}
.login .loginbox .login_01 > ul > li{float:left; display:inline-block; height:16px; line-height:16px; background:url("../images/login/bullet.gif") no-repeat left center; padding-left:10px; margin-right:15px;}
.login .loginbox .login_01 > ul > li a{font-size:14px; color:#898989;}

.login .loginbox .login_02 input#certi_id{ border-top:none; border-right:none; border-left:none; border-bottom:1px solid #e6e6e6; width:100%;  height:39px; line-height:39px; padding-left:28px; box-sizing:border-box;  font-size:14px; color:#989898; background:url(../images/login/id_icon.png) no-repeat 5px center;}
.login .loginbox .login_02 a.certifi_btn{ display:inline-block; width:100%; height:50px; line-height: 50px; border-radius:80px; color:#fff;font-size:17px; font-family:NS; padding:0 30px; box-sizing:border-box; margin-top:12px; background:url(../images/login/login_btn_arr.gif) no-repeat right 20px center #2ea2db;}
.login .loginbox .login_02 a.certifi_btn span{ display:inline-block; font-weight:400; color:#acd4ed; font-size:16px; margin-left:10px;}
.login .loginbox .login_02 p{margin-top:15px; height:20px; line-height:20px; background:url("../images/login/bullet.gif") no-repeat left center; padding-left:10px;}
.login .loginbox .login_02 p a{ background:url("../images/login/download.gif") no-repeat right center; padding-right:20px; display:inline-block; height:20px; line-height:20px; font-size:14px; color:#898989;}

.login .loginbox .notice{ width:100%; margin-top:34px; padding:20px 50px; border-top:1px dashed #e6e6e6; background-color:#ffffff; box-sizing:border-box;}
.login .loginbox .notice li{ width:100%; height:30px; line-height:30px;  background:url("../images/login/bullet.gif") no-repeat left center; padding-left:12px; font-size:14px; color:#444444; font-weight:400;}
.login .loginbox .notice li em{font-weight:600; color:#2ea2db;}

.login .servicezone{display:inline-block; width:435px; height:550px; background-color:#48478d; padding:50px; box-sizing:border-box; float:left;}
.login .servicezone h4{/* margin-bottom:10px; */ font-weight:normal; font-weight:400; color:#fff; font-size:36px; font-weight:100;}
.login .servicezone h4 p{ font-size:16px; color:#fff; font-weight:400; }
.login .servicezone h4 span{font-size:36px; color:#fff; font-weight:600; margin-top:5px;}
.login .servicezone a{margin:4px 0; display:inline-block; height:65px; padding-left:85px; color:#fff;}
.login .servicezone a dd{font-size:17px;  font-weight:400; height:22px; line-height:22px; /*margin:10px 0 6px 0;*/margin:10px 0 6px 0; color:#c2cbdf;}
.login .servicezone a dt{font-size:14px;  font-weight:300; height:18px; line-height:16px; color:#c2cbdf;}
.login .servicezone a:hover dd,
.login .servicezone a:hover dt{color:#fff;}
.login .servicezone .icon_01{background:url(../images/login/icon_01.png) no-repeat left center;}
.login .servicezone .icon_02{background:url(../images/login/icon_02.png) no-repeat left center;}
.login .servicezone .icon_03{background:url(../images/login/icon_03.png) no-repeat left center;}
.login .servicezone .icon_04{background:url(../images/login/icon_04.png) no-repeat left center;}
.login .servicezone .icon_01:hover{background:url(../images/login/icon_01_over.png) no-repeat left center;}
.login .servicezone .icon_02:hover{background:url(../images/login/icon_02_over.png) no-repeat left center;}
.login .servicezone .icon_03:hover{background:url(../images/login/icon_03_over.png) no-repeat left center;}
.login .servicezone .icon_04:hover{background:url(../images/login/icon_04_over.png) no-repeat left center;}
.none{display:none;}
.login #footer{margin-top:40px;}




@media all and (min-width:720px) and (max-width:1259px) { 
.login{padding-top:15px;}
.wrap{width:720px; margin:0 auto ; }
	.login .loginbox .login_input h2{display:inline-block; width:375px; margin:50px 0 0 190px;}
	h1{text-align:center;}
	.login_wrap{width:100%; margin:0;}
	.login_tab .tab_title li{width:50%; text-align:center; padding:0 2px; box-sizing:border-box; margin:0 !important;}
	.login_tab .tab_title li a{padding:0 !important; display:inine-block; width:100%;}
	.login .loginbox .login_input{width:100%;}
	.login .loginbox .login_01 fieldset{position:relative; padding-right:102px;}
	.login .loginbox .login_01 fieldset ul{width:100%; float:inherit;}
	.login .loginbox .login_01 a.loginbtn{position:absolute; top:0;right:0; margin-top:0;}
	.login .servicezone{width:100%; height:auto;}
	.login .servicezone a{float:left; width:50%; box-sizing:border-box;}
	.login .servicezone a dd{color:#fff; margin-top:0;}
	.login .servicezone a dt{color:#fff;}
	
	
}

@media all and (max-width:720px){ 
	.login{padding-top:15px;}
	body{min-width:320px;}
	h1{text-align:center;}
.wrap{width:100%; box-sizing:border-box;}
	.login_wrap{width:100%; margin:0;}
	.login .loginbox .login_input{width:100%; height:auto; margin-top:20px; box-sizing:border-box;}
	.login .loginbox .login_input h2{margin:20px; text-align:center;}
	.login .loginbox .login_input h2 img{float:inherit; margin:0; height:34px;}
	.login .loginbox .login_input h2 span{display:block; margin-top:10px;}
	.login_tab{padding:0 20px; height:auto;}
	.login_tab .tab_title li{width:50%; text-align:center; padding:0 2px; box-sizing:border-box; margin:0 !important;}
	.login_tab .tab_title li a{padding:0 !important; display:inine-block; width:100%;}
	.login .loginbox .login_01 fieldset ul{float:inherit; width:100%;}
	.login .loginbox .login_01 a.loginbtn{ display:inline-block; width:100%; height:50px; line-height: 50px; border-radius:80px; color:#fff;font-size:17px; font-family:NS; padding:0 30px; box-sizing:border-box; margin-top:12px; background:#2ea2db;}
	.login .loginbox .login_01 a.loginbtn span{ display:inline-block; font-weight:400; color:#acd4ed; font-size:16px; margin-left:10px;}
	.login .loginbox .notice{padding:15px 20px;}
	.login .loginbox .notice li{height:auto; line-height:20px; margin-bottom:10px;}
	.login .servicezone{width:100%; height:auto; padding:20px;}
	.login .servicezone a{float:inherit; width:100%; display:block; box-sizing:border-box;}
	.login .loginbox .login_02 a.certifi_btn span{display:none;}
	.login .servicezone a dd{font-size:17px; color:#fff; margin-top:0;}
	.login .servicezone a dt{color:#fff;}
	
	
}