@charset "utf-8";

.brand {background-color:#F4F5F6; border-radius:1rem; display:flex; flex-wrap:wrap; padding:3rem; gap:3rem; position: relative;}
.brand .info {width:26rem;/* display: flex; */}
.brand .info .title {height:10rem}
.brand .info .title .open-info {position: relative; width: 100%; background-color:#003469; border-radius:1rem; color:#fff; font-size:2rem; padding-bottom: 2rem; font-weight:700; display:flex; align-items:center; justify-content:center; height:10rem; text-align:center}
.brand .info .title .open-info::after{content: '';font-family: xeicon;font-size: 2rem;display: block;width: 100%;position: absolute;bottom: 1.5rem;}
.brand .info .title .open-info:hover{background-color:#005DBC;}
.brand .info .title .open-info:hover:after{transform:rotate(-360deg); transition:0.3s;}

.brand .info .open-info-group{opacity:0;visibility: hidden;display: none;transition:all 0.2s;position: absolute;left: 0;top: 0;z-index: 2;width: 100%;height: 100%;border-radius: 0.8rem;padding: 5rem;}
.brand .info .open-info-group::after{content: ''; background: rgba(0,0,0,0.5); width: 100%; height: 100%; display: inline-block; position: absolute; left:0; top:0; z-index: 0;}
.brand .info .open-info-con{height: 100%;  padding: 10rem 4rem;overflow-y:auto;border-radius: 0.8rem; position: relative;background: #fff;border:1px solid #003469; z-index: 1;}

.brand .info .open-info-con::-webkit-scrollbar {position:relative; width:5px;}
.brand .info .open-info-con::-webkit-scrollbar-thumb {background-color:#D9D9D9; border:5px solid #D9D9D9; border-radius:6px;}
.brand .info .open-info-con::-webkit-scrollbar-track {background-color:#F8F8F8}

.brand .info .open-info-group.active{opacity:1; visibility:visible; display: block; transition:all 0.2s;}
.brand .info .open-info-con strong {font-size:3rem;display:block;font-weight:800;margin-bottom: 5rem;word-break: keep-all;}

.brand .info .open-info-con > .close{background-color:#000; border-radius:50px; padding:1rem 2rem; color:#fff; position:absolute; right:4rem; top:4rem;}
.brand .info .open-info-con > .close i {font-size:1.5rem;}
.brand .info .open-info-con > .close:hover i{transform:rotate(-360deg); transition:0.3s;}
.brand .info .open-info-con > .list{display:flex; flex-wrap:wrap;}
.brand .info .open-info-con > .list > li {width:100%;margin-top: 4rem;}
.brand .info .open-info-con > .list > li:first-child{margin-top:0;}
.brand .info .open-info-con .img{display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem;}
.brand .info .open-info-con p{display:flex; justify-content:flex-start; align-items:center; gap:1rem;}
.brand .info .open-info-con p em{display:flex; justify-content:center; align-items:center; font-size:2rem;  font-weight:800;color:#fff;  width:4rem; height:4rem; background:#00A9ED; border-radius:50%;}
.brand .info .open-info-con p span{font-size:2rem; font-weight: 500; width:calc(100% - 5rem);}
.brand .info .open-info-con .img,.brand .info .open-info-con .color,.brand .info .open-info-con .btn{margin-left:5rem;}



.brand .info .open-info-con .color {width:calc(100% - 1rem);padding: 3rem 0;}
.brand .info .open-info-con .color .list {display:flex; flex-wrap:wrap; gap:1.5rem; width:calc(100% - 7rem); }
.brand .info .open-info-con .color .list > li {width:auto;}

.brand .info .open-info-con .list > li .img > i{background-color:#003469; border-radius:100px; color:#fff; width:3rem; height:3rem; margin-top:5rem; font-size:2.5rem; padding:2px} 

.brand .info .open-info-con .color li span {display:inline-block;width:3rem;height:3rem;border-radius:100%;position:relative;overflow:hidden;line-height: 3rem;padding-top: 3rem;}
.brand .info .open-info-con .color li span:before {content:''; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'xeicon'; position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(0); transition:all .3s}
.brand .info .open-info-con .color li.c01 span {background-color:#003469}
.brand .info .open-info-con .color li.c02 span {background-color:#00A9ED}
.brand .info .open-info-con .color li.c03 span {background-color:#C4D015}
.brand .info .open-info-con .color li.c04 span {background-color:#FC9000}
.brand .info .open-info-con .color li.c05 span {background-color:#CE0124}
.brand .info .open-info-con .color li.c06 span {background-color:#43B02A}
.brand .info .open-info-con .color li.c07 span {background-color:#83329B}
.brand .info .open-info-con .color li.c08 span {background-color:#9A6A4F}
.brand .info .open-info-con .color li.c09 span {background-color:#005A70}
.brand .info .open-info-con .color li.c10 span {background-color:#AB8A1F}
.brand .info .open-info-con .color li.c11 span {background-color:#939799}
.brand .info .open-info-con .color li.c12 span {background-color:#fff; border:1px solid #d9d9d9}
.brand .info .open-info-con .color li.c13 span {background-color:#231F20}
.brand .info .open-info-con .btn{display: block; margin-top: 2rem;}
.brand .info .open-info-con .btn span {background-color:#003469; color:#fff; font-size:1.6rem; font-weight:500; width:17rem; height:5rem; display:flex; align-items:center; justify-content:center; text-align:center; margin:50px auto}
.brand .info .open-info-con .btn span i {margin-left:1rem;}
.brand .info .open-info-con .complete-brand img{margin-top: 1rem;}


.brand .info .tabs{position: relative;display: flex;width: 100%;margin-top: 2rem;height: calc(100% - 12rem);}
.brand .info .tabs .tab_nav{color: #333;display: flex;justify-content: center;align-items: center;height: 6rem;width: 13rem;z-index: 1;position: absolute; top:0;background: #eee;}
.brand .info .tabs .tab_cont{display: none;/* position: absolute; */left: 0;top: 0;width: 26rem;min-height: 70rem;}
.brand .info .tabs > li{width: 100%;height: 100%;}
.brand .info .tabs > li:nth-child(1) .tab_nav { border-radius:1rem 0 0 0 ;}
.brand .info .tabs > li:nth-child(2) .tab_nav {left:50%; border-radius:0 1rem 0 0;}
.brand .info .tabs > li.active .tab_cont {display: block;/* height: 100%; */}
.brand .info .tabs > li.active .tab_nav{background: #003469; color: #fff;}

.brand .info .select {background-color:#fff;border:1px solid #EAEAEB;border-radius:1rem;/* margin-top:2rem; */padding: 8rem 1rem 3rem 2rem;/* height: 100vh; */}
.brand .info .select > div {border-bottom:1px solid #eee; padding-bottom:3rem}
.brand .info .select > div:last-child {border-bottom:0; padding-bottom:0}
.brand .info .select > div + div {padding-top:3rem}
.brand .info .select .label {color:#151515; display:block; font-size:2rem; font-weight:700; margin-bottom:2rem}
.brand .info .select .list {display:flex; flex-wrap:wrap; gap:1.5rem}
.brand .info .select .sel_img .file #select_img_a{display:none}
.brand .info .select .sel_img .file .file-upload{color: #151515; vertical-align: middle; background-color: #fff; border: 1px solid #999; cursor: pointer; height: 4rem; margin-right: 1rem; font-size: 1.7rem; line-height:2.2; text-align: center; transition: all .3s}
.brand .info .select .sel_img .file .file-upload:hover{background-color:#003469; color:#fff}

.brand .info .select .color {width:calc(100% - 1rem)}
.brand .info .select .color .list {gap:1rem 1.5rem}
.brand .info .select .color li a {display:block; width:3rem; height:3rem; border-radius:100%; position:relative; overflow:hidden}
.brand .info .select .color li a:before {content:''; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'xeicon'; position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(0); transition:all .3s}
.brand .info .select .color li.active a:before {transform:scale(1)}
.brand .info .select .color li.c01 a {background-color:#003469}
.brand .info .select .color li.c02 a {background-color:#00A9ED}
.brand .info .select .color li.c03 a {background-color:#C4D015}
.brand .info .select .color li.c04 a {background-color:#FC9000}
.brand .info .select .color li.c05 a {background-color:#CE0124}
.brand .info .select .color li.c06 a {background-color:#43B02A}
.brand .info .select .color li.c07 a {background-color:#83329B}
.brand .info .select .color li.c08 a {background-color:#9A6A4F}
.brand .info .select .color li.c09 a {background-color:#005A70}
.brand .info .select .color li.c10 a {background-color:#AB8A1F}
.brand .info .select .color li.c11 a {background-color:#939799}
.brand .info .select .color li.c12 a {background-color:#fff; border:1px solid #d9d9d9}
.brand .info .select .color li.c13 a {background-color:#231F20}

.brand .info .select .picto .list {overflow-y:scroll;padding-right:2rem;height: 20rem;}
.brand .info .select .picto .list::-webkit-scrollbar {position:relative; width:5px}
.brand .info .select .picto .list::-webkit-scrollbar-thumb {background-color:#D9D9D9; border:5px solid #D9D9D9; border-radius:6px}
.brand .info .select .picto .list::-webkit-scrollbar-track {background-color:#F8F8F8}
.brand .info .select .picto li {width:5.6rem; height:5.6rem; line-height:5.6rem}
.brand .info .select .picto li a {width:100%; height:100%; line-height:inherit; border:1px solid #eee; display:flex; align-items:center; justify-content:center}
.brand .info .select .picto li a img {transform:scale(0.6); transition:all .3s}
.brand .info .select .picto li:hover a img {transform:scale(0.8)}
.brand .info .select .picto li.active a {border-color:#00A9ED}

.brand .info .select .character .list {overflow-y:scroll;padding-right:2rem;height: 20rem;}
.brand .info .select .character .list::-webkit-scrollbar {position:relative; width:5px}
.brand .info .select .character .list::-webkit-scrollbar-thumb {background-color:#D9D9D9; border:5px solid #D9D9D9; border-radius:6px}
.brand .info .select .character .list::-webkit-scrollbar-track {background-color:#F8F8F8}
.brand .info .select .character li {width:5.6rem; height:5.6rem; line-height:5.6rem}
.brand .info .select .character li a {width:100%; height:100%; line-height:inherit; border:1px solid #eee; display:flex; align-items:center; justify-content:center}
.brand .info .select .character li a img {transform:scale(1.0); transition:all .3s}
.brand .info .select .character li:hover a img {transform:scale(1.1)}
.brand .info .select .character li.active a {border-color:#00A9ED}

.brand .view {width:calc(100% - 29rem)}
.brand .view > div {background-color:#fff; border:1px solid #EAEAEB; border-radius:1rem}
.brand .view .word {height:8rem; padding:2rem 4rem; display:flex; align-items:center}
.brand .view .word .label {color:#151515; font-size:2rem; font-weight:700; margin-right:1.5rem}
.brand .view .word .form_textbox {display:block; height:4rem; width:calc(100% - 27rem)}
.brand .view .word .form_textbox input {border:1px solid #fff; display:block; width:100%; height:100%; padding:0;}
.brand .view .word .btn {width:8rem; height:4rem; margin-left:1rem}
.brand .view .word .btn a {background-color:#151515; color:#fff; font-size:1.6rem; font-weight:500; width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center}
.brand .view .word .refresh a{background-color:#fff; border:1px solid #151515; color:#151515}
.brand .view .canvas .canvas-type1, .brand .view .canvas .canvas-type2{display: none;}
.brand .view .canvas .canvas-type1.active, .brand .view .canvas .canvas-type2.active{display: block;}
.brand .view .canvas {padding:6rem 4rem; margin-top:2rem; height:calc(100% - 10rem)}
.brand .view .canvas img { vertical-align:baseline}
.brand .view .canvas .img > img{display:inline-block; margin-right:10px; width:100%} 

.brand .view .canvas .box .group{position: relative;}
.brand .view .canvas .box {border:1px solid #EAEAEB; border-radius:1rem; height:70rem; margin-bottom:2rem; display:flex; align-items:center; justify-content:center}
.brand .view .canvas .box .img {display:inline-block; margin-right:3rem; height: 9rem;}
.brand .view .canvas .box .char {vertical-align:-8px; margin-right:-1.5rem}
.brand .view .canvas .box .char img{margin:0 1rem 9rem 0;; vertical-align: middle; width:12rem; height:auto}
.brand .view .canvas .box .txt {font-size:4rem;font-family:'Jalnan';padding: 0 15px 30px 105px;vertical-align: 28px;margin-left:-4px;/* border-bottom:3.9px solid #3fa7eb; */position: relative;overflow:hidden;width:50px;}
.brand .view .canvas .box .txt::before {content: '';width: 100%;height:43px;background: url(/brand/img/sub/sub02/logo_long.svg) no-repeat 0 0;position: absolute;top: 2.1rem;left: 0;padding-left: 50px;}
.brand .view .canvas .box .txt.c01 {color:#003469}
.brand .view .canvas .box .txt.c02 {color:#00A9ED}
.brand .view .canvas .box .txt.c03 {color:#C4D015}
.brand .view .canvas .box .txt.c04 {color:#FC9000}
.brand .view .canvas .box .txt.c05 {color:#CE0124}
.brand .view .canvas .box .txt.c06 {color:#43B02A}
.brand .view .canvas .box .txt.c07 {color:#83329B}
.brand .view .canvas .box .txt.c08 {color:#9A6A4F}
.brand .view .canvas .box .txt.c09 {color:#005A70}
.brand .view .canvas .box .txt.c10 {color:#AB8A1F}
.brand .view .canvas .box .txt.c11 {color:#939799}
.brand .view .canvas .box .txt.c12 {color:#fff}
.brand .view .canvas .box .txt.c13 {color:#231F20}
.brand .view .canvas .box .logo02 {vertical-align:-8px; margin-left:-9px;}
.brand .view .canvas .desc {color:#151515; font-size:1.7rem; padding-right:21.5rem; position:relative; margin-top:2rem}
.brand .view .canvas .desc small {color:#0092CD; display:block; font-size:1.4rem; font-weight:700; margin-top:0.8rem}
.brand .view .canvas .desc .form_check {display:block; margin-top:0.8rem}
.brand .view .canvas .desc .btn {position:absolute; right:0; top:50%; transform:translateY(-50%)}
.brand .view .canvas .desc .btn a {background-color:#003469; color:#fff; font-size:1.6rem; font-weight:500; width:25rem; height:5rem; display:flex; align-items:center; justify-content:center; text-align:center}
.brand .view .canvas .desc .btn span i {margin-left:1rem;}
.brand .view .canvas .canvas-type2 .box .group{position: relative; max-width: 530px; height: 250px; margin: 0 auto; display: flex; justify-content: center;}
/* .brand .view .canvas .canvas-type2 .box .group::before{content: ''; display: inline-block; background: url(/brand/img/sub/sub02/img_svg.svg) no-repeat center center/contain; width: 530px; height: 250px;} */
.brand .view .canvas .canvas-type2 .box .group .logo-img{content: ''; display: inline-block; width: 530px; height: 250px;}
.brand .view .canvas .canvas-type2 .box .group .pic {position: absolute; top:1.6rem; left:calc(50% - 3.3rem); right: 0; width: 203px; height: 193px; }
/*.brand .view .canvas .canvas-type2 .box .group .mask-image{ max-width: 100%;width: 203px; height: 193px;  -webkit-mask: url(#photo-mask); mask : url(#photo-mask);}*/
.brand .view .canvas .canvas-type2 svg{width: 100%; position: absolute;}
.brand .view .canvas .canvas-type2 .box .group .mask-image{max-width: 100%;width: 203px; height: 193px;  -webkit-mask: url(/brand/img/sub/sub02/hart.png); mask : url(/brand/img/sub/sub02/hart.png);}

.brand .user_img .file1 { cursor: pointer; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; z-index: 0; width: 100%; max-height: 100%; }
.brand .user_img .file1 .upload-name{border: 1px solid #999;display: inline-block;height: 4rem;padding: 0 10px;vertical-align: middle;width: 100%;color: #999;}

.brand .user_img .file1 input[type="file"]{position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}
.brand .user_img .file1 label{display: inline-block;padding: 1rem;color: #151515;vertical-align: middle;background-color: #fff; border:1px solid #999; cursor: pointer;height: 4rem;margin-right: 1rem;font-size: 1.6rem;width: 100%;text-align: center; transition:all .3s}
.brand .user_img .file1 label:hover{background-color:#003469; color:#fff}

.brand .user_img .before{border:1px solid #ddd;margin-top: 1rem;max-width: 22rem;height: 100%;min-height: 22rem;}
.brand .sel_img label{display:block; margin-bottom:10px}

.brand .view .canvas .img > img.user_img2 {width:12rem; height:auto; margin-right:0; vertical-align:bottom}

@media all and (max-width:1280px){
	.brand {padding:2rem}
	.brand .info {width:100%}
	.brand .view {width:100%}
	.brand .view .word {flex-wrap:wrap; height:auto; padding:2rem}
	.brand .view .word .label {display:block; width:100%; margin-bottom:1rem}
	.brand .view .word .form_textbox {width:calc(100% - 18rem)}
	.brand .view .canvas {height:auto; padding:2rem}
	.brand .view .canvas .box {height:36rem}
	.brand .info .open-info-con{left:2rem; top:2rem; max-width:calc(100% - 4rem); height:calc(100% - 4rem);}
	.brand .info .tabs{flex-wrap: wrap;}
	.brand .info .tabs > li{height: auto;}
	.brand .info .tabs .tab_nav{width: 50%;}
	.brand .info .tabs .tab_cont{width: 100%; min-height:50rem ;}
	.brand .user_img .before{max-width: calc(100% - 1rem);height: 100%;}
	
	.brand .info .open-info-con .list > li .img{flex-direction:column; align-items:center}
	.brand .info .open-info-con .list > li .img > i{transform:rotate(90deg)}
	.brand .info .open-info-con .list > li .img > i, .brand .info .open-info-con .list > li .img > img{margin-top:5rem}
}
@media all and (max-width:1024px){
	.brand .view .canvas .canvas-type2 .box .group .pic{top:1.75rem; left:calc(50% - 3.6rem);}
}
@media all and (max-width:999px){
	.brand .view .canvas .box {padding:0 2rem; overflow-x:scroll; position:relative; /*justify-content:flex-start*/}
	.brand .view .canvas .box:before {content:' 좌우로 움직여주세요 '; background-color:rgba(0,0,0,0.5); color:#fff; font-family:'xeicon'; width:120%; height:5rem; text-align:center; line-height:5rem; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:1; animation:move 3s alternate ease-in-out forwards}
	.brand .view .canvas .box::-webkit-scrollbar {position:relative; height:3px;}
	.brand .view .canvas .box::-webkit-scrollbar-thumb {background-color:#D9D9D9; border:3px solid #D9D9D9; border-radius:6px}
	.brand .view .canvas .box::-webkit-scrollbar-track {background-color:#f8f8f8}
	.brand .view .canvas .group {transform:scale(0.7); white-space:nowrap}
	.brand .view .canvas .desc {padding-right:0}
	.brand .view .canvas .desc .btn {position:relative; left:auto; top:auto; transform:inherit;}
	.brand .view .canvas .desc .btn a {margin:2rem auto 0}
}
 @media all and (max-width:720px){
	.brand .view .canvas .box .logo02{padding-right:8rem;}
	
} 
@media all and (max-width:500px){
	.brand .info .open-info-group{padding: 1rem;}
	.brand .info .open-info-con strong{margin-top: 5rem; text-align: center;}
	.brand .info .open-info-con p{flex-direction:column; text-align: center; margin-bottom: 1rem; word-break: keep-all;}
	.brand .info .open-info-con .img,.brand .info .open-info-con .color,.brand .info .open-info-con .btn{margin-left:0;}
	.brand .info .open-info-con .btn{display: inline-block;}
	.brand .info .open-info-con .img{margin-bottom: 1rem;}
	.brand .info .open-info-con .img img {margin-bottom: 1rem; display: inline-block;}
	.brand .info .open-info-con .color .list{justify-content: center; width: 100%;}
	.brand .info .open-info-con > .list >li{text-align: center;margin-top: 4rem;}
	.brand .info .open-info-con > .list >li:first-child{margin-top:0;}
	.brand .info .open-info-con .close{width: 70%;}
	.brand .view .word .form_textbox {width:100%}
	.brand .view .word .btn{margin-top:1rem; margin-left:0}
	.brand .view .word .refresh{margin-left:1rem}
	
	/* .brand .view .canvas .box{justify-content: center}
	.brand .view .canvas .box .txt{margin-left:-90px;} */

}
@media all and (max-width:420px){
/* 	.brand .view .canvas .group{ transform: scale(0.5);} */
	/* .brand .view .canvas .box .txt{ margin-left: -120px; } */
}
@keyframes move {
    0% {opacity:0.9; left:50%}
    25% {opacity:0.9; left:45%}
    50% {opacity:0.9; left:55%}
    75% {opacity:0.9; left:45%}
    99% {opacity:0; left:55%; height:5rem}
    100% {opacity:0; height:0; overflow:hidden}
}

ol.Type-cnum > li:before{line-height:10px; top:-3px}

.brand .open-info-con .list .complete-brand{position:relative}
.brand .open-info-con .list .complete-brand > .close{background-color:#003469; color:#fff; position:absolute; top:25rem; left:40rem; width:30rem; height:5rem}
.brand .open-info-con .list .complete-brand > .close i{font-size:1.5rem; margin-left:5px}

@media all and (max-width:1200px){	
	.brand .open-info-con .list .complete-brand > .close{left:0rem; top:55rem; width:25rem}
}