@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500&subset=korean');

*{margin:0;padding:0;font-family:'Noto Sans KR' ,Sans-serif;}
table{padding:0;border:0;border-spacing:0px;border-collapse:collapse;}
th, td{padding:0;}
caption, legend{visibility:hidden;width:0;height:0;line-height:0;font-size:0;overflow:hidden;}

html, body{width:100%;height:100%;background:url('/resources/cuk/images/sso_bg.jpg') no-repeat;background-size:cover;background-position:center;}

.txtL{text-align:left;}
.txtR{text-align:right;}
.txtC{text-align:center;}
.const_Tit{text-align:center;color:#fff;font-size:18px;}

.pcNone{display:none;}

#ssoHeader{width:100%;height:100px;line-height:100px;text-align:center;box-sizing:border-box;background:rgba(0,0,0,.15);}
#ssoHeader img{vertical-align:middle;}
#ssoHeader span{font-size:36px;font-weight:bold;position:relative;color:#fff;padding-left:30px;margin-left:30px;}
#ssoHeader span::before{content:"";display:block;width:2px;height:32px;background:rgba(255,255,255,.5);position:absolute;left:0;top:50%;margin-top:-10px;}

#content{max-width:1200px;margin:auto;}
#content .js-tabs{padding-top:70px;}


#content .js-tabs .tabs-content{margin:0 0 20px;position:relative;overflow:hidden;}
#content .js-tabs .tabs-content .tabs-content{margin:0;}

#content .js-tabs .tabs-nav{overflow:hidden;text-align:center;}
#content .js-tabs .tabs-nav__list{display:block;}
#content .js-tabs .tabs-nav__list li{float:left;list-style:none;width:33%;}
#content .js-tabs .tabs-nav__list li a{text-decoration:none;font-size:28px;color:rgba(255,255,255,.4);position:relative;display:block;padding:18px 0 10px;}
#content .js-tabs .tabs-nav__list li.active a{color:rgba(255,255,255,1);}
#content .js-tabs .tabs-nav__list li.active a::before{content:"";display:block;width:8px;height:8px;background:#fff;border-radius:8px;position:absolute;top:0;left:50%;margin-left:-4px;}
#content .js-tabs .tabs-nav__list li.active a::after{content:"";display:block;width:240px;height:3px;background:#fff;margin-top:10px;position:absolute;bottom:0;left:50%;margin-left:-120px;}
#content .js-tabs .tabs-nav__list.itemCol01 li{width:100%;}/* 추가 */

#content .js-tabs .tab{width:100%;position:absolute;top:0;left:0;display:none;}
#content .js-tabs .tab.active{position:relative;display:block;}

#content .js-tabs .js-tabs-wrap{background:#fff;margin-top:35px;box-shadow:0px 0px 25px rgba(0,0,0,.2)}

.loginBox{}
.loginBox.itemCol02 .loginItem{width:50%;float:left;box-sizing:border-box;border-right:1px solid #e0e0e0;padding:80px 120px;}/* 추가 */
.loginBox.itemCol03 .loginItem{width:33.3333333%;float:left;box-sizing:border-box;border-right:1px solid #e0e0e0;padding:40px;}
.loginBox.itemCol03 .loginItem h3, .loginBox.itemCol02 .loginItem h3, .loginBox.itemCol01 .loginItem h3{text-align:center;margin-bottom:25px;font-size:28px;}/* 변경 */
.loginBox.itemCol03 .loginItem h3 span, .loginBox.itemCol02 .loginItem h3 span, .loginBox.itemCol01 .loginItem h3 span{display:inline-block; padding-left:60px;line-height:45px;}/* 변경 */
.loginBox .loginItem.pin h3 span{background:url('/resources/cuk/images/ico/ico_pin.png') no-repeat;background-size:45px;} /* 추가 */
.loginBox .loginItem.otp h3 span{background:url('/resources/cuk/images/ico/ico_otp.png') no-repeat;background-size:45px;} /* 추가 */
.loginBox .loginItem.kakao h3 span{background:url('/resources/cuk/images/ico/ico_kakao.png') no-repeat;}/* 변경 */
.loginBox .loginItem.naver h3 span{background:url('/resources/cuk/images/ico/ico_naver.png') no-repeat;}/* 변경 */
.loginBox .loginItem.living h3 span{background:url('/resources/cuk/images/ico/ico_living.png') no-repeat;}/* 변경 */
.loginBox.itemCol02 .loginItem .loginBody{height:auto;box-sizing:border-box;}
.loginBox.itemCol03 .loginItem .loginBody{min-height:230px;box-sizing:border-box;}/* 변경 */


.loginBox.itemCol03 .loginItem .loginFoot{text-align:center;}





.loginBox.itemCol01{padding:40px;}
.loginBox.itemCol01 .loginItem{max-width:360px;margin:auto;text-align:center;overflow:hidden;}
.loginBox.otpBox .loginItem{padding:90px 0;}
.loginBox.certificate .loginItem{background:url('/resources/cuk/images/ico/ico_Certificate.png') no-repeat top center;padding-top:190px;}
.loginBox.normalLogin .loginItem{background:url('/resources/cuk/images/ico/ico_Login.png') no-repeat top center;padding-top:190px;}






.mT5{margin-top:5px;}
.mT10{margin-top:10px;}
.mT20{margin-top:20px;}
.mT30{margin-top:30px;}
.mT40{margin-top:40px;}
.mT50{margin-top:50px;}

.mB5{margin-bottom:5px;}
.mB10{margin-bottom:10px;}
.mB20{margin-bottom:20px;}
.mB30{margin-bottom:30px;}
.mB40{margin-bottom:40px;}
.mB50{margin-bottom:50px;}

.mR5{margin-right:5px;}
.mR10{margin-right:10px;}
.mR20{margin-right:20px;}
.mR30{margin-right:30px;}
.mR40{margin-right:40px;}
.mR50{margin-right:50px;}

.mL5{margin-left:5px;}
.mL10{margin-left:10px;}
.mL20{margin-left:20px;}
.mL30{margin-left:30px;}
.mL40{margin-left:40px;}
.mL50{margin-left:50px;}

.txtC{text-align:center;}
.txtR{text-align:right;}
.txtL{text-align:left;}


span.point{color:#a70638;}




input.formControl{width:100%;height:50px;line-height:50px;border:1px solid #e0e0e0;padding:0 12px;box-sizing:border-box;box-shadow:0;}
input.formControl2{width:48%;height:50px;line-height:50px;border:1px solid #e0e0e0;padding:0 12px;box-sizing:border-box;box-shadow:0;}/* 1205추가 */

.checkList{overflow:hidden;position:relative;float:left;padding-top:5px;}
.checkList label{position:relative;}
.checkList .txt{font-size:15px;color:#444;padding-left:5px;cursor:pointer;}
.checkList .ico{background:url('/resources/cuk/images/ico/ico_check_Off.jpg') no-repeat;width:16px;height:16px;display:inline-block;vertical-align:middle;margin: -2px 0 0 0px;cursor:pointer;position: relative;z-index: 5;}

.radioList{position:relative;padding-top:5px;}
.radioList > .radio{margin-left: 5px;}
.radioList > .radio:first-child{margin-left:0;}
.radioList .txt{font-size:15px;color:#444;padding-left: 1px;cursor:pointer;}
.radioList .ico{background:url('/resources/cuk/images/ico/ico_radio_Off.png') no-repeat;width:18px;height:18px;display:inline-block;vertical-align:middle;margin: 0px 0 0 0px;cursor:pointer;}


.helpList{float:right;padding-top:5px;}
.helpList a{color:#aaa;font-size:15px;text-decoration:none;border-bottom:1px solid #aaa;}
.helpList a span{width:15px;height:15px;background:#aaa;color:#fff;border-radius:15px;display:inline-block;font-size:12px;line-height:16px;text-align:center;}

input.check{width: 16px;min-width: 16px;font-size:0;height: 16px;position: absolute;top: 50%;left: 0;z-index: 6;margin-top: -6px;}
input.check:checked + .ico{background:url('/resources/cuk/images/ico/ico_check_On.jpg') no-repeat;z-index:7;}

input.radio{width:0;height:0;min-width:0px;font-size:0;height:0;line-height:0;clip:rect(0 0 0 0);opacity:0;}
input.radio:checked + .ico{background:url('/resources/cuk/images/ico/ico_radio_On.png') no-repeat;}


.accList{overflow:hidden;}
.accList dt{background:url('/resources/cuk/images/ico/ico_radio_Off.png') no-repeat;background-position: 0px  19px;cursor:pointer;font-size:18px;line-height: 24px;padding:15px 0 15px 24px;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;}
.accList dt.on{background:url('/resources/cuk/images/ico/ico_radio_On.png') no-repeat;background-position: 0px  19px;border:0;padding-bottom:0;}
.accList dd{display:none;}
.accList dd.on{display:block;}


.loginBtn{border:0;background:#000;color:#fff;font-size:15px;cursor:pointer;display:inline-block;text-decoration:none;}
.loginBtn.type01{width:150px;line-height:40px;}
.loginBtn.type01_1{width:150px;line-height:36px;background:#fff;color:#000;border:2px solid #000;}/* 변경 */
.loginBtn.type01_2{width:150px;line-height:40px;background:#ececec;color:#aaaaaa;}
.loginBtn.type02{width:100%;line-height:56px;}
.loginBtn.type02_1{width:100%;line-height:38px;background:#fff;color:#000;border:2px solid #000;}
.loginBtn.type02_2{width:100%;line-height:38px;background:#ececec;color:#000;border:2px solid #b0b0b0;}
.loginBtn.type01_50{width:calc(50% - 4.5px);line-height:40px;}/* 추가 */
.loginBtn.type02_50{width:calc(50% - 4.5px);line-height:36px;background:#fff;color:#000;border:2px solid #000;}/* 추가 */
.loginBtn.type03_50{width:calc(50% - 4.5px);line-height:40px;background:#ececec;color:#aaaaaa;}/* 추가 */
.loginBtn.typeSmall{padding: 0 10px;font-weight:300;color:#fff !important;background:#a70638;line-height:25px;}


.btnGroup .btnCol02{}
.btnGroup.btnPop{padding:0 0 30px;overflow: hidden;}
.btnGroup.btnPop .btnCol02{padding: 0 100px;overflow: hidden;}
.btnGroup .btnCol02 button{float:left;width:calc(50% - 5px);}
.btnGroup .btnCol02 button:first-child{margin-right:10px;}



.tabInner{overflow:hidden;border-top:1px solid #e0e0e0;padding:40px;clear:both;position:relative;}
.tabInner .exList{}
.tabInner .settingList{position:absolute;right:40px;top:50%;margin-top:-12px;list-style:none;}
.tabInner .settingList li{float:left;padding-left:20px;}
.tabInner .settingList li:first-child{padding-left:0;}
.tabInner .settingList li .checkList{padding-top:0;}
.tabInner .settingList li a{font-size:15px;color:#444;text-decoration:none;position:relative;}
.tabInner .settingList li a::before{content:"";display:block;width:1px;height:6px;background:#e0e0e0;position:absolute;left:-10px;top:50%;margin-top:-3px;}
.exList{list-style:none;}
.exList li{color:#333;font-size:14px;position:relative;padding-left:15px;line-height:28px;}
.exList li::before{content:"-";display:inline-block;position:absolute;left:0;}

.exListSm{list-style:none;}
.exListSm li{color:#666;font-size:14px;position:relative;padding-left:15px;line-height:24px;}
.exListSm li::before{content:"-";display:inline-block;position:absolute;left:0;}


.tabTable{}
.tabTable table{width:100%;}
.tabTable table thead th{background:#f7f7f7;text-align:center;font-size:14px;font-weight:bold;border:1px solid #e0e0e0;padding:13px 10px;}
.tabTable table tbody td{border:1px solid #e0e0e0;padding:13px 10px;text-align:center;font-size:14px;}


.ssoFooter{margin-top:30px;text-align:center;min-width:768px;}/*position:absolute;bottom:15px;*/
.ssoFooter .copy{color:#444;font-size:15px;}

#dim{position:fixed;top:0;left:0;right:0;bottom:0;z-index:50;background:rgba(0,0,0,.4);display:none;}
#dim.active{display:block;}
#alertDim{position:fixed;top:0;left:0;right:0;bottom:0;z-index:52;background:rgba(0,0,0,.4);display:none;}
#alertDim.active{display:block;}

.popLayer{display:none;box-sizing:border-box;background:#fff;z-index:51;position:fixed;top:50%;left:50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%); }
.popLayer.type01{width:750px;}
.popLayer.type02{width:520px;}
.popLayer.active{display:block;}
.popLayer .popHeader{padding:25px;border-bottom:1px solid #e0e0e0;}
.popLayer .popHeader h3{font-size:28px;}
.popLayer .popHeader span.close{position:relative;float:right;width:22px;height:22px;margin-top:10px;cursor:pointer;}
.popLayer .popHeader span.close::before{content:"";display:block;width:28px;height:2px;background:#000;transform:rotate(45deg);position:absolute;top: 10px;left: -3px;}
.popLayer .popHeader span.close::after{content:"";display:block;width:28px;height:2px;background:#000;transform:rotate(-45deg);position:absolute;top: 10px;left: -3px;}
.popLayer .popBody{padding:25px;overflow:hidden;}
.popLayer .popBody p{font-size:17px;color:#444;}
.popLayer .popFoot{text-align:center;padding:15px 0 25px;overflow:hidden;}
.popLayer .popFoot.type02{background:#f3f3f3;padding:25px 10px;font-size:15px;}
.popLayer .checkList{float:inherit;}

.popLayer .stepList{overflow:hidden;list-style:none;margin-top:20px;}
.popLayer .stepList li{float:left;width:25%;border:1px solid #e0e0e0;box-sizing:border-box;text-align:center;padding:20px 0;border-right:0;position:relative;min-height: 210px;}
.popLayer .stepList li h4{font-size:17px;color:#444;line-height:21px;font-weight:normal;margin-top:15px;}
.popLayer .stepList li p{font-size:15px;color:#737373}

.popLayer .stepList li span{color:#fff;display:inline-block;background:#343335;padding:3px 10px;border-radius:15px;font-size:13px;margin-top:10px;}
.popLayer .stepList.kakao li::before{background:url('/resources/cuk/images/ico/ico_kakaoMore.png') no-repeat;content:"";display:block;width:70px;height:70px;overflow:hidden;margin:auto;}
.popLayer .stepList.kakao li::after{background:url('/resources/cuk/images/ico/ico_step_playing.png') no-repeat;content:"";display:block;width:40px;height:40px;position:absolute;top:50%;right:-20px;margin-top:-20px;z-index:52;}

.popLayer .stepList.naver li::before{background:url('/resources/cuk/images/ico/ico_naverMore.png') no-repeat;content:"";display:block;width:70px;height:70px;overflow:hidden;margin:auto;}
.popLayer .stepList.naver li::after{background:url('/resources/cuk/images/ico/ico_step_playing.png') no-repeat;content:"";display:block;width:40px;height:40px;position:absolute;top:50%;right:-20px;margin-top:-20px;z-index:52;}

.popLayer .stepList li:first-child::before{background-position:0 0;}
.popLayer .stepList li:nth-child(2)::before{background-position:-70px 0;}
.popLayer .stepList li:nth-child(3)::before{background-position:-140px 0;}
.popLayer .stepList li:last-child::before{background-position:-210px 0;}
.popLayer .stepList li:last-child{border-right:1px solid #e0e0e0;}
.popLayer .stepList li:last-child::after{display:none;}

.popLayer .formGroup{margin-top:10px;}

.loApiBox{overflow:hidden;margin-top:30px;}
.loApiBox.col03 div{width:40%;float:left;padding-right:10px;box-sizing:border-box;}
.loApiBox.col03 div:last-child{width:20%;padding-right:0;overflow:hidden;}
.loApiBox.col03 div button{line-height:50px;width:100%;}

.loginBox .ex{width:100%;float:left;box-sizing:border-box;border:1px solid #e0e0e0;padding:20px 0;}/* 1205추가 */

.qr_Box{text-align:center;padding:20px 0 0;}
.qr_Box img{max-width:50%;}




/* 위녿우 팝업 */
#sso_WinPop{background:#fff;height:100%;}
#sso_WinPop .winPopHead{background:#f6f6f6;border-bottom:1px solid #c0c0c0;padding:30px;}
#sso_WinPop .winPopHead h3{font-size:22px;font-weight:bold;color:#333;margin-bottom:15px;}
#sso_WinPop .winPopHead p{}
#sso_WinPop .winPopBody{padding:10px;}
#sso_WinPop .winPopBody h4{font-size:18px;font-weight:bold;margin-bottom:10px;}
#sso_WinPop .winPopBody p{font-size:15px;}
#sso_WinPop .winPopBody p img{vertical-align:bottom;}
#sso_WinPop .winPopBody p.warning{font-size:15px;color:#ce1429;margin-top:5px;}
#sso_WinPop .winPopBody .formGroup{border-bottom:1px solid #ddd;margin-bottom:20px;padding-bottom:20px;}
#sso_WinPop .winPopBody .formGroup.b0{border-bottom:none;}


#sso_WinPop .winPopBody .qrGroup{overflow:hidden;}
#sso_WinPop .winPopBody .qrGroup .qrBox{width:calc(50% - 5px);float:left;border:1px solid #c1c1c1;box-sizing:border-box;}
#sso_WinPop .winPopBody .qrGroup .qrBox:first-child{margin-right:10px;}
#sso_WinPop .winPopBody .qrGroup .qrBox .qrHead{background:#f3f3f3;line-height:30px;padding:0 10px;color:#444;}
#sso_WinPop .winPopBody .qrGroup .qrBox .qrBody{padding:10px;text-align:center;min-height:120px;display:flex;align-items:center;justify-content:center;}
#sso_WinPop .winPopBody .qrGroup .qrBox .qrBody .qrKey{font-weight:bold;display:block;}




@media(max-width:1200px){
	#content{padding:0 20px;}
	.tabInner .settingList{padding-top:15px;border-top:1px solid #e0e0e0;margin-top:15px;overflow:hidden;position:inherit;right:0; top:0;list-style:none;}
}

@media(max-width:1024px){
	#ssoHeader{height:70px;line-height:70px;}
	#ssoHeader h1{margin-top:-5px;}
	#ssoHeader span{font-size:26px;}
	#ssoHeader span::before{height:26px;}
	#ssoHeader img{max-width:200px;}

	#content .js-tabs{padding-top:100px;}
	#content .js-tabs .tabs-nav__list li a{font-size:22px;}
	#content .js-tabs .tabs-nav__list li.active a::after{width:80%;left:50%;margin-left: -40%;}
	#content .js-tabs .js-tabs-wrap{margin-top:28px;}

	.loginBox.itemCol02 .loginItem{padding:40px;}

	.loginBox.itemCol03 .loginItem h3{font-size:18px;}
	.loginBox.itemCol03 .loginItem h3 span{line-height:38px;background-size:38px !important;padding-left:48px;}
	.loginBox.itemCol03 .loginItem{padding:40px 20px;}
	.loginBox.itemCol03 .loginItem .loginBody{min-height:170px;}

	.checkList .txt, .helpList a{font-size:13px;}

	.tabInner{padding:20px;}
	.exList li{font-size:14px;}


	.tabInner .settingList .checkList .txt, .tabInner .settingList li a{font-size:14px;}


	.popLayer .popHeader h3{font-size:28px;}
	.popLayer .popHeader span.close{margin-top:5px;}
	.popLayer .popBody p{font-size:15px;}

	.pcNone{display:block;}
}

@media(max-width:768px){
	html, body{background:#f8f8f8 url('/resources/cuk/images/sso_bg.jpg') no-repeat;background-size:cover;background-position:center -300px;}
	#content, #ssoHeader{width:768px;}
	.tabTable{width:100%;overflow:hidden;overflow-x:scroll;}
	.tabTable table{width:688px;}

	.exList li{font-size:12px !important;}

	.popLayer.type01{width:auto;width:calc(100% - 30px);}
	.popLayer.type02{width:auto;width:calc(100% - 30px);}

	.popLayer .stepList li{width:50%;border-top:0;}
	.popLayer .stepList li:first-child{border-top:1px solid #e0e0e0;}
	.popLayer .stepList li:nth-child(2){border-right:1px solid #e0e0e0;border-top:1px solid #e0e0e0;}
	.popLayer .stepList li:nth-child(2)::after{right:inherit;top:inherit;left:-20px;bottom:-20px;transform: rotate(140deg);}


	.loApiBox.col03 div{width:50%;float:left;padding-right:10px;box-sizing:border-box;}
	.loApiBox.col03 div:nth-child(2){float:right;padding-right:0;}
	.loApiBox.col03 div:last-child{width:100%;padding-right:0;float:inherit;padding-top:10px;}
	.loApiBox.col03 div button{line-height:50px;width:100%;}
}


@media(max-width:468px){
	html, body{background:#f8f8f8 url('/resources/cuk/images/sso_bg.jpg') no-repeat;background-size:cover;background-position:center 0;}
}