.total_login {position:relative; width:100%; min-height:100vh; overflow:hidden; background:#3850bb; font-family:'NotoKr';}
.total_login:after {position:absolute; left:117px; bottom:94px; width:52px; height:165px; display:block; content:""; background:url('/common/images/program/login_bl_1.png') no-repeat left top;}
.total_login:before {position:absolute; right:-342px; top:-570px; width:1016px; height:1620px; display:block; content:""; background:url('/common/images/program/login_bl_3.png') no-repeat left top;}
.total_login_wrap {position:Relative; width:1300px; margin:0 auto}
.total_login_wrap h1 {font-size:0px}

.total_login_header {position:relative; margin:80px auto 45px; text-align:center;}
.total_login_header:before {position:absolute; left:52px; top:30px; width:219px; height:288px;  display:block; content:""; background:url('/common/images/program/login_bl_2.png') no-repeat left top;}
.total_login_header .login_title {color:#43deff; font-size:30px; font-weight:400}
.total_login_header .login_title .site_logo {text-indent:-9999px; display:inline-block; margin-right:15px; width:159px; height:49px; background:url('/downloadContentsFile.do?key=1040&fileNo=10005') no-repeat center top}
.total_login_header .text {margin:30px 0; color:#fff; font-size:18px; font-weight:200}
.total_login_header .text2 {font-size:16px; color:#fff; line-height:1.5em; font-weight:200}

.total_login_cont {position:relative; width:100%; height:auto; padding:60px 0; border-radius:5px; background:#fff; display:inline-block; vertical-align:top; font-size:0px}
.total_login_cont:after, 
.total_login_cont:before {position:absolute; top:60px; width:1px; height:247px; background:url('/common/images/program/login_line_bg.gif') repeat-y left top; content:""; display:block}
.total_login_cont:after {left:66.66%}
.total_login_cont:before {left:33.33%}

.total_login_cont > section {width:33.33%; display:inline-block; text-align:center; vertical-align:top;}
.total_login_cont > section h2 {font-size:22px; color:#000000; font-weight:200}
.total_login_cont > section p {font-size:16px; color:#000; line-height:1.45em}
.total_login_cont > section p em {color:#2637b8}
.total_login_cont > section.phone .icon, 
.total_login_cont > section.ipin .icon {width:100%; height:62px; display:inline-block; margin:22px 0 28px; vertical-align:top;}
.total_login_cont > section.phone .icon {background:url('/common/images/program/login_icon1.png') no-repeat center top; }
.total_login_cont > section.ipin .icon {background:url('/common/images/program/login_icon2.png') no-repeat center top;}
.total_login_cont > section.phone button, 
.total_login_cont > section.ipin button {height:44px; line-height:44px; color:#fff; background:#5073d9; font-size:16px; font-weight:200; padding:0 21px; display:inline-block;  vertical-align:top;}

.total_login_cont > section.ipin p,
.total_login_cont > section.phone p{margin:25px 0 0 0}

.total_login_cont > section.onepass button {position:relative; background:#192474; display:inline-block; height:44px; line-height:44px; font-size:18px; color:#fff; padding:0 40px 0 80px}
.total_login_cont > section.onepass button:before {position:absolute; left:17px; top:8px; width:31px; height:28px; display:block; content:""; background:url('/common/images/program/onepass_icon.png') no-repeat center top;}
.total_login_cont > section.onepass .text1 {height:62px; margin:22px 0 28px}
.total_login_cont > section.onepass .text2 {margin-top:25px}



@media screen and (max-width:1320px){
	.total_login_wrap {width:100%; padding:0 20px 40px; box-sizing:border-box;}
}


@media screen and (max-width:1000px){ 
.total_login_cont:before {top:360px; left:40px; width:calc(100% - 80px); height:1px; background:url('/common/images/program/login_line_bg2.gif') repeat-x left top}

.total_login_cont:after {left:50%}
.total_login_cont > section.phone, 
.total_login_cont > section.ipin {width:50%;} 
.total_login_cont > section.onepass {width:100%; margin:80px 0 0 0}
.total_login_cont > section.onepass .text1 {height:auto}
.total_login_cont > section.onepass .text1 br {display:none}
}
@media screen and (max-width:640px){ 
.total_login:after, .total_login_header:before {display:none}
.total_login:before {right: -180%; top: -200px; transform: scale(0.5);  transform-origin: left top;}
.total_login_header {margin:35px auto 30px}
.total_login_header .text {margin:20px 0; font-size:16px}
.total_login_header .text2 {font-size:15px;}
.total_login_header .text,  
.total_login_header .text2 {word-break:keep-all}
.total_login_header .text2 br {display:none}
.total_login_cont {padding:0 25px}
.total_login_cont > section.phone, 
.total_login_cont > section.ipin,
.total_login_cont > section.onepass {width:100%; padding:30px 0; margin:0px} 

.total_login_cont > section.phone, 
.total_login_cont > section.ipin {background:url('/common/images/program/login_line_bg2.gif') repeat-x left bottom}
.total_login_cont:before, 
.total_login_cont:after {display:none;}
.total_login_cont > section.onepass .text1 br {display:block}

.total_login_cont > section h2 {font-size:20px}
.total_login_cont > section.phone button, .total_login_cont > section.ipin button {height:35px;  font-size:15px; line-height:35px}
.total_login_cont > section.ipin p, .total_login_cont > section.phone p {margin-top:20px}
.total_login_cont > section p {font-size:15px}
.total_login_cont > section.onepass button {height:35px; line-height:35px; font-size:16px; padding: 0 20px 0 60px;}
.total_login_cont > section.onepass button:before {transform: scale(0.8); transform-origin: left top;}
.total_login_cont > section.onepass .text1, 
.total_login_cont > section.phone .icon, .total_login_cont > section.ipin .icon {margin:15px 0 22px}
}