@charset "UTF-8";
/*basic-layout*/
.view-content{width:100%;}
.view-content.center{justify-content:center;}
.view-inner{max-width:100%;padding:0 15px;box-sizing:border-box;}

/* 콘텐츠 layout */
.pgc-normal-title{font-size:36px;font-weight:700;text-align:center;margin-bottom:50px;}
.pgc-normal-box{border-radius:20px;border:1px solid #E9E9E9;background:#fff;padding:30px 35px;}
.pgc-ic-title{font-size:18px;color:#393939;}
.pgc-ic-title i{margin-right:10px;margin-top:-3px;}
.pgc-step-title{font-size:30px;line-height:50px;font-weight:700;text-align:center;margin-bottom:30px;}
.pgc-step-title span{font-weight:400;}
.pgc-center-box{text-align:center;}
.command-box{padding:12px 30px;font-size:15px;font-weight:700;color:#fff;background-color:#C9C9C9;display:inline-block;border-radius:30px;}
.command-box.sm{padding:10px 20px;font-size:12px;font-weight:500;}
.pgc-txt{font-size:14px;line-height:24px;color:#565656;margin-top:20px;}
.pgc-txt b{color:#333;}

/*로그인*/
.pgc-normal-wrap .logo{display:flex;flex-direction:column;padding:50px 0 30px;}
.pgc-normal-wrap .logo a{margin:auto;}
.pgc-normal-wrap .logo a img{width:144px;}
.pgc-normal-wrap .logo span{margin:20px auto 0;font-size:10px;color:#fff;background-color:#00A4FF;padding:5px 10px;border-radius:13px;line-height:1;}
.pgc-member-box{background-color:#fff;padding:30px 20px;border-radius:15px;border:1px solid #E9E9E9;box-sizing:border-box;position:relative;}
.pgc-label{font-size:20px;font-weight:400;line-height:30px;}
.pgc-sub-label{font-size:11px;color:#999;margin-top:10px;font-weight:300;}
.pgc-member-box .input-block + .input-block{margin-top:10px;}
.pgc-member-box .input-block input{padding-left:56px;}
.pgc-member-box .input-block .id input{background:url(/dpc/assets/images/ic-id.svg) 10px center no-repeat;}
.pgc-member-box .input-block .password input{background:url(/dpc/assets/images/ic-password.svg) 10px center no-repeat;}

/*유의사항*/
.pgc-noti-box{background-color:rgba(0,164,255,0.7);border-radius:15px;padding:20px;}
.pgc-noti-box dl{color:#fff;}
.pgc-noti-box dl dt{font-size:14px;font-weight:700;margin-bottom:15px;}
.pgc-noti-box dl dt i{margin-right:10px;}
.pgc-noti-box dl dd{font-size:12px;line-height:22px;}
.pgc-noti-box dl dd span{display:inline-block;width:30px;}

.pgc-txt-box{position:relative;padding:20px;font-size:12px;border:1px solid #dfdfdf;border-radius:10px;box-sizing:border-box;margin-top:20px;}
.top-label-group{padding:30px 15px;}

.eye-trace-box{height:240px;background-color:#000;margin:0 -15px;}
.pgc-test-area{display:flex;flex-direction:column;}
.pgc-test-area .right{margin-top:20px;}

/*header*/
header{height:56px;}
header .inner{position:relative;height:56px;display:flex;align-items:center;background:#fff;}
header .inner h1{margin:auto;}
header .inner .logo{display:block;width:96px;}
header .inner .logo img{width:100%;}
header.v-2 .inner{justify-content:space-between;padding:0 15px;}
header.v-2 .inner h1{margin:0 auto 0 0;}
header.v-2 .btn-view{position:relative;display:inline-block;width:30px;height:30px;border-radius:100%;margin-left:5px;background-repeat:no-repeat;background-position:center center;}
header.v-2 .btn-view.red{background-color:#FF5F5F;}
header.v-2 .btn-view.green{background-color:#16BF00;}
header.v-2 .btn-view.upload{background-image:url(/dpc/assets/images/ic-upload.svg);}
header.v-2 .btn-view.state{background-image:url(/dpc/assets/images/ic-state.svg);}
header.v-2 .btn-view .txt{position:absolute;background-color:#7C7C7C;font-size:12px;padding:4px 15px;border-radius:20px;bottom:-35px;left:50%;transform:translateX(-50%);}
header.v-2 .btn-view .txt:before{content:'';width:8px;height:8px;transform:rotate(-45deg);background-color:#7C7C7C;position:absolute;top:-4px;left:50%;margin-left:-4px;}

/*footer*/
footer{display:block;width:100%;height:70px;flex-shrink: 0;margin-top:auto;}
footer .footer-in{height:100%;margin:0 auto;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center; -webkit-box-pack: center;-webkit-justify-content: center; justify-content: center;position:relative;width:100%;box-sizing:border-box}
footer .footer-in .des{font-size:12px;display:inline-block;color:#999;padding:0 15px;position:relative;}
footer .footer-in .des + .des:before{content:'';position:absolute;width:1px;height:10px;left:0;top:5px;background-color:#bdc6d0;;}

.cs-bot{position:fixed;bottom:100px;left:50%;margin-left:600px;width:50px;height:50px;border-radius:100%;background:#339DD5 url(/dpc/assets/images/ic-cs.svg)center center no-repeat;}

@media screen and (min-width:650px){
    .view-inner{height:100%;}
    .top-label-group{padding-bottom:15px;}
    .pgc-test-area{flex-direction:row;height:100%;padding:20px 0;box-sizing:border-box;}
    .pgc-test-area .eye-trace-box{width:50%;height:100%;max-height:340px;margin:0;flex-shrink:0;}
    .pgc-test-area .right{width:50%;padding-left:20px;margin-top:0;}
    .pgc-test-area .right .pgc-txt-box{margin-top:15px;}
}