@charset "utf-8";

.c-all {margin:30px 0 0 0; padding:0 0 28px 0; border-bottom:1px solid #e4e4e4; }
.l-join .form .c-all .checkbox {display:block; width:100%; height:auto;}
.l-join .form .c-all .checkbox label {border:1px solid #cccccc; padding:15px 15px 18px 15px; width:calc(100% - 32px);}
.l-join .form .c-all .checkbox label {font-size:18px; line-height:20px; font-family: var(--family-medium);font-weight: var(--weight-medium); color:#333333; text-align:center; }
.l-join .form .c-all .checkbox label svg {width:25px; height:25px; position:absolute; left:15px; top:14px;}
.l-join .form .c-all .checkbox label svg polygon {fill:var(--color2);}
.l-join .form .c-all .checkbox label.focus {background:#000000; color:#ffffff;}
.l-join .form .c-all .checkbox label.focus svg polygon {fill:#ffffff;}

.l-join .form .c-list {border-bottom:1px solid #e4e4e4; margin-bottom:30px; padding:25px 0 25px;}
.l-join .form .c-list ul li {display:flex; flex-direction:row; height:46px; align-items:center;}
.l-join .form .c-list ul li .checkbox {width:100%; height:46px;}
.l-join .form .c-list ul li .checkbox.type2 {width:calc(100% - 40px);}
.l-join .form .c-list ul li .checkbox.type2 label {width:calc(100% - 47px);}
.l-join .form .c-list ul li .checkbox label {padding:0 0 0 47px; position:relative; display:flex; flex-direction:row; align-items:center;}
.l-join .form .c-list ul li .checkbox label {line-height:44px; height:46px;}
.l-join .form .c-list ul li .checkbox label:before {content:''; display:block; width:18px; height:18px; background:#ffffff; border:1px solid #cccccc; border-radius:2px; opacity:1; top:calc(50% - 10px); left:15px;}
.l-join .form .c-list ul li .checkbox label span:nth-child(2) {font-size:16px; line-height:44px; font-family: var(--family-light);font-weight: var(--weight-light); color:#333333;}
.l-join .form .c-list ul li .checkbox label .icon {width:20px; height:20px; position:absolute; left:15px; z-index:2;}
.l-join .form .c-list ul li .checkbox label .icon svg {width:20px; height:20px; position:absolute; opacity:0;}
.l-join .form .c-list ul li .checkbox label .icon svg polygon {fill:#ffffff;}

.l-join .form .c-list ul li .btn {padding:0 15px; width:10px; height:46px; position:relative; cursor:pointer;}
.l-join .form .c-list ul li .btn span {display:block; width:10px; height:16px; position:absolute; top:15px; right:15px;}
.l-join .form .c-list ul li .btn span svg {opacity:.2;}
.l-join .form .c-list ul li .btn span svg .st0{fill:none;stroke:#000000;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

.l-join .form .c-list ul li .checkbox label.focus:before {background:var(--color2); border-color:var(--color2);}
.l-join .form .c-list ul li .checkbox label.focus .icon svg {opacity:1;}
.l-join .form .c-list ul li .btn:hover svg {opacity:1;}

.l-join .form .div-account {padding:20px 0; position:relative; display:block; text-align:center; width:100%;}
.l-join .form .div-account ul li {cursor:pointer;}
.l-join .form .div-account ul li {display:flex; flex-direction:row; align-items:center; justify-content:center; width: calc(100% - 2px); height:47px; border: 1px solid #ccc;}
.l-join .form .div-account ul li:nth-child(1){margin: 0 0 10px 0;}
.l-join .form .div-account ul li .account-icon {width:28px; height:28px;}
.l-join .form .div-account ul li .account-icon svg {height:28px; width:28px;}
.l-join .form .div-account ul li .account-name {font-size:15px; line-height:47px; font-family: var(--family-regular);font-weight: var(--weight-regular); color:#555555;}
.l-join .form .div-account ul li:hover {border-color:#666666;}
.l-join .form .div-account ul li:hover .account-name {color:#000000;}

.l-join .form .div-account.type2 ul {display:flex; flex-direction:row; align-items:center; justify-content:center;}
.l-join .form .div-account.type2 ul li{width:80px; height:92px; border:0; flex-direction:column;}
.l-join .form .div-account.type2 ul li .account-icon {width:48px; height:48px; border:1px solid #cccccc; border-radius:100%; margin:10px auto 9px; position:relative;}
.l-join .form .div-account.type2 ul li .account-icon svg {width:28px; height:28px; position:absolute; top:10px; left:calc(50% - 14px);}
.l-join .form .div-account.type2 ul li .account-name {font-size:13px; line-height:1; font-family: var(--family-light);font-weight: var(--weight-light); color:#999999;}
.l-join .form .div-account.type2 ul li .account-name {padding:0 0 10px 0;}
.l-join .form .div-account.type2 ul li:hover .account-icon{border:1px solid #999999;}
.l-join .form .div-account.type2 ul li:hover .account-name {color:#333333;}

.l-join .form .login-naver svg {fill:#21c603;}
.l-join .form .login-kakao svg {fill:#3a2020;}
.l-join .form .login-facebook svg {fill:#3c5a9a;}
.l-join .form .login-google svg {fill:#da4835;}

.c-btn span {font-size:18px; line-height:58px; font-family: var(--family-medium);font-weight: var(--weight-medium); color:#a4a4a4; text-align:center;}
.c-btn span {display:block; width:100%; height:60px; background:#eeeeee; cursor:pointer;}

.c-btn span.on {background:var(--color2); color:#ffffff;}

.info {font-size:12px; line-height:1.4; font-family: var(--family-light);font-weight: var(--weight-light); color:#666666; text-align:center;}
.info {display:block; margin:15px;}
.info.off {display:none;}