@import url('https://fonts.googleapis.com/css?family=Chakra+Petch:400,500,600|Roboto:400,500&display=swap');

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button,figure,figcaption{ margin:0;padding:0;box-sizing:border-box; }
a, img, fieldset { border:0; }
dl,ul,ol,menu,li{ list-style:none; }
body,th,td,input,select,textarea,button{ line-height:1.2;  color:#000; font-family: 'Chakra Petch', 'Roboto' ,HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif;  }
a{ color:#222;text-decoration:none; transition:all ease-in-out 0.2s;}
a:hover{ text-decoration:none; }
/* a:active{ background-color:transparent; } */
address,cite,code,dfn,em,var{ font-style:normal;font-weight:100; }
h1,h2,h3,h4,h5,h6 { font-weight:100;font-size:100%; }
textarea { resize:none; }
img { line-height:0; vertical-align:top;    max-width: 100%; }
form, fieldset { width:100%; display:block; }
table { border-collapse:collapse; border-spacing:0; }
b,strong { font-weight:400; }

/**/
select { -webkit-appearance: none;-moz-appearance: none;appearance: none; }
select::-ms-expand { display: none; }
input { -webkit-appearance: none;-moz-appearance: none;appearance: none; border:none;}
input::-ms-clear { display: none; }
input:focus { outline: none; }
button:focus { outline: none; }
/* a:focus, input:focus, button:focus, textarea:focus {outline:1px dotted #ddd;} */
img { -ms-interpolation-mode:bicubic !important; }
html {-webkit-text-size-adjust: none;-ms-text-size-adjust: none; letter-spacing:-0.03em; font-size:62.5%;}.



/* common class */
.none { display: none; }
.sdonly { position:absolute; top:0 !important; left:0 !important; line-height:0 !important; font-size:0 !important; width:0 !important; height:0 !important; color:transparent !important; overflow:hidden !important; } /*�뜝�럡�뀬�뜝�럩�뮧�뜝�럥援∽옙逾놂옙�맧�맠 only */
.sdonly:before, .sdonly:after { display:none !important; }
::selection { background: #eb6b00; color:#fff; }
.ov-bg { background: #000; opacity: 0.8; filter: alpha(opacity=80);top:0;left:0; right:0; height:100%; z-index: 61; position: fixed; display: none; }

/**/
.clr:after { content:''; display:block; clear:both; }
.clr > li { float:left; }
.por {position:relative;}
.poa {position:absolute;}
.fl { float:left; }
.fr { float:right; }
.dsb {display:block;}
.dsi {display:inline-block;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}
.inner {max-width:1200px; width:100%; margin:0 auto;}

/***************************************************************************************************/
#container {position:relative; overflow: hidden;  background:#000; padding-bottom:4rem;}
#all_wrap {position:relative;}
#all_wrap .logo {text-align:center; margin-top:9rem; position:absolute; left:0; right:0; top:0; z-index: 3;}
#all_wrap .logo img {max-width:240px;}

.section { position:relative;}
.section > .inner {position:relative;  padding-top:24rem; padding-bottom:24rem; z-index:1;}
.section.s1:after, .section .wave {position:absolute; left:0; right:0; top:0; bottom:0;  background-size:cover !important; content:''; display:block; z-index:0;}
.section.s1 {background:url('/images/common/namecard/back01_1.jpg') center center no-repeat; background-size:cover; border-top:none; position:relative; overflow:hidden;}
.section.s1:before {background:url('/images/common/namecard/back_man_1.png') center top no-repeat; z-index:1; position:absolute; left:0; right:0; top:0; bottom:0; content:''; display:block;}
.section.s1 > .inner {padding-top:48rem; padding-bottom:18rem;}
.section.s2 { background:url('/images/common/namecard/back02.jpg') center center no-repeat; background-size:cover; }
.section.s3 {background:url('/images/common/namecard/back03.jpg') center center no-repeat; background-size:cover; }
.section.s4 {background:url('/images/common/namecard/back04_1.jpg') center center no-repeat; background-size:cover; }
.section.s5 {background:url('/images/common/namecard/back05.jpg') center center no-repeat; background-size:cover; }
.section.s2 .wave, .section.s3 .wave, .section.s4 .wave, .section.s5 .wave { display:none; }

.name_ph {background:rgba(0,0,0,0.45); -webkit-backdrop-filter: var(blur(10px));  backdrop-filter: blur(10px); position:relative; z-index:3; padding:6rem 0; text-align:center;  }
.name_ph .name_info {display:inline-block; width:100%; }
.name_ph .name_info .name_info_pic {position:relative; width:19.2rem; height:12.2rem; display:flex; margin:0 auto 70px; align-items:center; justify-content:center; background:url('/images/common/namecard/bg_chage_name.png') top center no-repeat;}
.name_ph .name_info .name_info_pic .name_info_label {position:absolute; width: max-content;  bottom:-50px; text-align: center; font-size: 1.3rem;  color: #ffe92c; font-family: 'Roboto'; letter-spacing:0.01rem;  }
.name_ph .name_info .name_info_pic .name_info_label:after {position:absolute; right:15px; bottom:-9px; content:''; display:block; width:18px; height:10px; background:url('/images/common/namecard/namecard_arr.png') 0 0 no-repeat;}
.name_ph .name_info .name_info_txt { margin-top:20px; font-size:2.2rem; font-weight:500; color:#ffffff; text-transform: uppercase; text-shadow:0 -1px #66ceff, 0 1px #ff0000, 0 1px #3c44d0; letter-spacing: 0.01rem; }

.section .step00 {background:url('/images/common/namecard/step_back_2.png') center 0 no-repeat; width:192px; height:62px; display:flex; align-items:center; justify-content:center; margin:0 auto; font-size:1.6rem; font-weight:600; letter-spacing:0.1em; z-index: 1; position:relative; text-align:center; color:#fff;}

.typing_wrap {text-align:center; color:#fff; font-size:9.5rem; font-weight:600; padding-bottom:3rem; position:relative; z-index:3;}
.typing_wrap:before { content:''; display:block; position:absolute; width:34px; height:82px; background:url('/images/common/namecard/bg_title_left.png') 0 0 no-repeat; left:15px; top:10px; }
.typing_wrap:after { content:''; display:block; position:absolute; width:56px; height:93px; background:url('/images/common/namecard/bg_title_right.png') 0 0 no-repeat; right:15px; top:10px; }
.typing_wrap .typing-txt {display: none;}
.typing_wrap .typing {display: inline;  animation-name: cursor; animation-duration: 0.3s;  animation-iteration-count: infinite; line-height:normal; background: rgba(0, 0, 0, 0.5) url('/images/common/namecard/bg_title_line.png') bottom repeat-x; border-top:2px #66ceff solid; padding: 0 3rem; text-shadow:0 -2px #66ceff, 0 3px #fff002, 0 5px #3c44d0; } 

.con_box {text-align:center;}
.colb_box {position:relative; z-index:4;}
.con_box .con_tit {text-align:center; color:#fff; font-size:4.5rem; font-weight:600; margin:4rem auto; word-break:keep-all; }
.con_box .con_tit .yel {color:#ffe92c;}
.nick_input {position:relative; max-width:616px; margin:0 auto;}
.nick_input:before, .nick_input:after {content:''; display:block; position:absolute; width:1.4rem; top:-0.8rem; bottom:-0.8rem; background-position:0 0; background-repeat:no-repeat;}
.nick_input:before { background-image:url('/images/common/namecard/bg_input_left.png'); left:-0.8rem;}
.nick_input:after {background-image:url('/images/common/namecard/bg_input_right.png'); right:-0.8rem; }
.nick_input input[type=text] {width:100%; background:#000; border:1px solid #52f1ff; text-align:center; font-size:2.4rem; font-weight:600; color:#ffe92c; height:8rem; padding:0 2.4rem;}
.nick_input input[type=text]::placeholder {color:#ffe92c;}

.color_btn { margin:0 auto; width:9.6rem; height:9.6rem; display:flex; align-items:center; justify-content:center; text-align: center; color:#fff; background:url('/images/common/namecard/bg_select_color.png') center center no-repeat; position:relative; font-size: 2rem; font-weight: 600; }
.color_btn02 {text-shadow: -2px -2px 0 #ff0000, 0 -2px 0 #ff0000, 2px -2px 0 #ff0000, 2px 0 0 #ff0000,  2px 2px 0 #ff0000, 0 2px 0 #ff0000, -2px 2px 0 #ff0000, -2px 0 0 #ff0000; }

#color_palette {width:78rem; padding:2rem 5rem 5rem; margin:0 auto; background:#0f0f0f; text-align:center;  display:none;  position:absolute; left:50%; margin-left:-39rem; z-index: 5; }
#color_palette .cp_tit {text-transform:uppercase; text-align:center; font-size: 2.2rem; color:#fff; font-weight: 500; margin:1.5rem 0 2.5rem;}
.color_list {margin-left:-10px;}
.color_list li {width:calc(100% / 23); padding-left:10px; margin-bottom:10px;}
.color_list li a {display:block; width:100%; height:20px; border-radius: 50%; color:transparent; position:relative; font-size:0;}
.color_list li:nth-child(n+17) a, .color_list li:nth-child(2) a {border:1px solid #181818;}
.color_list li a.chk:before {content:''; display:block; position:absolute; width:23px; height:16px; background:url('/images/common/namecard/check.png') 0 0 no-repeat; left:0; top:-3px; background-size:cover;}
.color_border {display:inline-block; width:300px; height:80px; border:5px solid #000; margin-right:5px;}

.name_all {margin:0 auto;  width:100%; height: 100%; padding: 8px; background: url(/images/common/namecard/bg_name_wrap_lt.png) left top no-repeat, url(/images/common/namecard/bg_name_wrap_rt.png) right top no-repeat, url(/images/common/namecard/bg_name_wrap_lb.png) left bottom no-repeat, url(/images/common/namecard/bg_name_wrap_rb.png) right bottom no-repeat; }
.name_all .name_wrap { overflow-y: scroll; padding:4.5rem; max-height:400px; background:rgba(0,0,0,0.3); border:1px solid #52f1ff;}
.name_list {margin-left:-4rem; font-size:0; }
.name_list > li {width:calc(100% / 3); display:inline-block; vertical-align:top; padding-left:4rem; margin-bottom:3rem;}
.name_list > li a {display:block;}
.name_list > li .name_tit_wrap {text-align:left; font-family:'Roboto'; color:#fff; font-size:1.4rem; margin-bottom:6px; letter-spacing: 0.05em; }
.name_list > li .name_tit_wrap span {word-break:break-all; display:block;}
.name_list > li .name_tit_wrap .name_tit {padding-top:0px; color:#ff0000;}
.name_list > li .name_tit_wrap.in_sales .name_tit {padding-top:0;}

.name_list > li .name_box {text-align:left; height:4rem;}
.name_list > li .name_box img {width:100%; max-height:100%;}
.name_list > li.on span {color:#ffe92c; font-weight:bold;}
.name_list > li.on .name_box {display:block; position: relative;}
.name_list > li.on .name_box:before {content: ''; display:block; left:0; right:0; bottom:0; top:0; border:3px solid #ffe92c; position:absolute;}

.preview {position:fixed; left:0; right:0; bottom:0; z-index: 4;  }
.preview .preview_area { position: relative; }
.preview .pre_btn, .preview .hide_btn { font-size:1.6rem; letter-spacing:0.05em; display:block; margin:0 auto; width:30rem; height:4.8rem; display:flex; align-items:center; justify-content:center; font-weight:600; text-align: center; color:#fff; border-radius: 10px 10px 0 0;  } 
.preview .pre_btn { background:url('/images/common/namecard/btn_prev_open.png') top center no-repeat; }
.preview .pre_btn:hover {  background:url('/images/common/namecard/btn_prev_open_ov.png') top center no-repeat; }
.preview .hide_btn { background:url('/images/common/namecard/btn_prev_closed.png') center center no-repeat; }
.preview .hide_btn:hover { background:url('/images/common/namecard/btn_prev_closed_ov.png') center center no-repeat; }
.preview .preview_box { position: relative; background: url(/images/common/namecard/bg_namecard_prev.png) repeat; background-size:cover; max-width:45rem; height:6.3rem; display:flex; margin:0 auto; align-items:center; justify-content:flex-start; padding:0 2rem; font-size:1.8rem; color:#ffe92c; overflow: hidden;}
.preview .preview_box:before, .preview .preview_box:after {content:''; display:block; position:absolute; top:0; bottom:0; width:1.3rem; background-repeat:no-repeat; background-position:0 0;}
.preview .preview_box:before {background-image:url('/images/common/namecard/bg_namecard_prev_left.png'); left:0; }
.preview .preview_box:after {background-image:url('/images/common/namecard/bg_namecard_prev_right.png'); right:0;}
.preview .pre_sub {text-align:center; font-size:1.3rem; color:#fff;  margin-top:1rem; font-family:'Roboto'; }
.preview .preview_in {background:linear-gradient(to top, #6c30a2, #99007f); padding:2.5rem 0; background-size:cover; position:relative;}
.preview .bottom_btns {position:absolute; right:2rem; top:50%; transform:translate(0 , -50%); font-size:0;}
.preview .bottom_btns ul {font-size:0;}
.preview .bottom_btns li {display:inline-block; margin-right:10px;}
.preview .bottom_btns li:last-child {margin-right:0;}
.preview .bottom_btns li a {display:block; background-repeat:no-repeat;  background-position: center center; background-size:cover; color:transparent; height:54px; border-radius: 5px; }
.preview .bottom_btns li.facebook a {background-image:url('/images/common/namecard/face_off.png'); width:140px;}
.preview .bottom_btns li.top a {background-image:url('/images/common/namecard/top_off.jpg'); width:45px;}
.preview .bottom_btns li.facebook:hover a {background-image:url('/images/common/namecard/face_on.png');}
.preview .bottom_btns li.top:hover a {background-image:url('/images/common/namecard/top_on.jpg');}
footer {padding:4rem 0; background:#000; text-align: center;}
footer .f_txt01 {font-size:1.4rem; color:#ee2222; font-family: 'Roboto', sans-serif; margin:2rem 0 0.6rem;}
footer .f_txt02 {font-size:1.1rem; color:#666666; font-family: 'Roboto', sans-serif;}
footer a {color:#ee2222;}
footer a:hover {text-decoration:underline;}



/**** animation ****/
@keyframes cursor{ 
  0%{border-right: 1px solid #fff;} 
  50%{border-right: 1px solid #000;} 
  100%{border-right: 1px solid #fff;} 
}

.obj, .particle0_1 span, .particle2_1 span, .particle2_1 span, .twinkle span {position: absolute; display: block; z-index: 2;}
.particle0_1 span {opacity: 0;z-index:2;}
.particle0_1 .hexa1 {top:10%; left:0; width: 117px; height: 71px; background:url('/images/common/namecard/obj01_1.png') 0 0 no-repeat; }
.particle0_1 .hexa2 {top:0; left:5%; width: 436px; height: 201px; background:url('/images/common/namecard/obj02_1.png') 0 0 no-repeat; }
.particle0_1 .hexa3 {top:20%; left:36%; width: 52px; height: 50px; background:url('/images/common/namecard/obj03_1.png') 0 0 no-repeat;}
.particle0_1 .hexa4 {top:25%; left:60%; width: 100px; height: 75px; background:url('/images/common/namecard/obj04_1.png') 0 0 no-repeat; }
.particle0_1 .hexa5 {top:70%; left:25%; width: 90px; height: 90px; background:url('/images/common/namecard/obj05_1.png') 0 0 no-repeat;}
.particle0_1 .hexa6 {bottom:0; left:35%; width: 97px; height: 67px; background:url('/images/common/namecard/obj06_1.png') 0 0 no-repeat;}
.particle0_1 .hexa7 {bottom:5%; left:5%; width: 129px; height: 77px; background:url('/images/common/namecard/obj07_1.png') 0 0 no-repeat;}
.particle0_1 .hexa8 {bottom:30%;  left:18%; width: 56px; height: 56px; background:url('/images/common/namecard/obj08_1.png') 0 0 no-repeat;}
.particle0_1 .hexa9 {top:30%; right:40%; left:auto; width: 50px; height: 56px; background:url('/images/common/namecard/obj09_1.png') 0 0 no-repeat; background-size:cover; }
.particle0_1 .hexa10 {top:55%; right:35%; left:auto; width: 19px; height: 19px; background:url('/images/common/namecard/obj10_1.png') 0 0 no-repeat;}
.particle0_1 .hexa11 {bottom:45%; left:40%; top:auto; width: 53px; height: 46px; background:url('/images/common/namecard/obj11_1.png') 0 0 no-repeat;}
.particle0_1 .hexa12 {bottom:45%; left:3%; top:auto; width: 49px; height: 47px; background:url('/images/common/namecard/obj12_1.png') 0 0 no-repeat;}
.particle0_1 .hexa13 {top:5%; right:20%; left:auto; width: 97px; height: 89px; background:url('/images/common/namecard/obj13_1.png') 0 0 no-repeat;}
.particle0_1 .hexa14 {top:0; right:5%; left:auto; bottom:auto;  width: 79px; height: 77px; background:url('/images/common/namecard/obj14_1.png') 0 0 no-repeat;}
.particle0_1 .hexa15 {top:20%; right:8%; left:auto; width: 88px; height: 83px; background:url('/images/common/namecard/obj15_1.png') 0 0 no-repeat;}
.particle0_1 .hexa16 {top:45%; right:0; left:auto; bottom:auto; width: 85px; height: 65px; background:url('/images/common/namecard/obj16_1.png') 0 0 no-repeat;}
.particle0_1 .hexa17 {bottom:5%; right:3%; left:auto; top:auto; width: 150px; height: 264px; background:url('/images/common/namecard/obj17_1.png') 0 0 no-repeat;}
.particle0_1 .hexa18 {top:50%; left:30%; width: 55px; height: 45px; background:url('/images/common/namecard/obj18_1.png') 0 0 no-repeat; }

@media screen and (max-width: 1280px) {
.pb_content #container .preview .bottom_btns01 { right:2rem; top:auto; }
}

@media screen and (max-width: 1220px) {
.inner {padding: 0 4rem;}
.section.s1 > .inner { padding:20rem 0 10rem 0; } 
.section.s1:before { background-size:90%; background-position:top center; } 

.name_list {margin-left:-2.5rem;}
.name_all .name_wrap {padding:4.5rem 4.5rem 2rem;}
.name_list > li {padding-left:2.5rem; margin-bottom:2.5rem;}
}

@media screen and (max-width: 1023px) {
.typing_wrap:before, .typing_wrap:after { display:none;  }
.con_box .con_tit .yel {display:block;}
.preview .preview_area {padding-right:0;}
.preview .bottom_btns {bottom:auto; top:1.5rem;}
.preview .bottom_btns02 {right:auto; left:20px;}
.preview .bottom_btns li a {height:60px; width:60px !important;}
.preview .bottom_btns li.top a {background-image: url(/images/common/namecard/top_m.png) !important;}
.preview .bottom_btns li.facebook a {background-image: url(/images/common/namecard/face_m.png) !important;}
.particle0_1 .hexa1, .particle0_1 .hexa4, .particle0_1 .hexa7, .particle0_1 .hexa12, .particle0_1 .hexa13, .particle0_1 .hexa16 {display:none;}
}

@media screen and (max-width: 768px) {
.section.s1:before { background-size:90%; } 
.pb_content #container .preview .preview_in { padding:3rem 12rem; }
.pb_content #container .preview .bottom_btns li a { height: 50px; width: 50px !important; }
.particle0_1 .hexa2 { left:-10%; }
}

@media screen and (max-width: 640px) {
html {font-size:32%;}
#all_wrap .logo {margin-top:5rem;}
#all_wrap .logo img {width:121px;}
.section.s1:before {display:none;}
.section.s1 > .inner {padding-top:30rem; padding-bottom:20rem;}
footer img {width:84px;}

.con_box .con_tit { font-size:6rem; }

.section .step00 { font-size:3.4rem;}
.nick_input input[type=text] { font-size:3.3rem; }
.color_btn {  font-size:2.9rem; background-size:100% auto;}
#color_palette .cp_tit { font-size:2.8rem; }

.color_btn02 {text-shadow: -1px 0 #ff0000, 0 1px #ff0000, 1px 0 #ff0000, 0 -1px #ff0000;}
.color_btn:before {width:15px; height:14px;}
.color_border {width:150px; height:40px; border:3px solid #000;}
.particle0_1 span {background-size:cover !important;}
.particle0_1 .hexa2 {top:0; left:-11%; width:212px; height:97px;  }
.particle0_1 .hexa3 {left:35%; top:15%; width:26px; height:25px;}
.particle0_1 .hexa4 { left:2%; top:30%; width:60px; height:45px; }
.particle0_1 .hexa5 {top:auto; bottom:25%; left:auto; right:10%; width:46px; height:46px; }
.particle0_1 .hexa6 {left:30%; bottom:22%; width:50px; height:34px; }
.particle0_1 .hexa8 {left:5%; bottom:33%; width:60px; height:60px; }
.particle0_1 .hexa9 {display:block; right:5%; top:40%; width:29px; height:29px;  }
.particle0_1 .hexa10 { bottom:50%; right:20%; top:auto; left:auto; width:10px; height:10px; }
.particle0_1 .hexa14 {right:0; left:auto; width:38px; height:41px; }
.particle0_1 .hexa17 {display:block; bottom:30%; right:-6%; width:100px; height:175px; }
.particle0_1 .hexa18 { left:auto; top:20%; right:15%; width:7px; height:8px; }
.preview .pre_btn { width:180px; font-size:2.5rem; }
.preview .pre_sub { font-size:2.2rem;}
#color_palette {width:100%; margin-left:-50%;}
.color_list {margin-left:-6px;}
.color_list li {padding-left:6px;}
.color_list li a {width:8px; height:8px;}
.color_list li a.chk:before {width:10px; height:7px; top:-1px;}

.name_ph .name_info .name_info_pic {background-size:100% auto; width: 28.2rem; height: 17.9rem;}
.name_ph .name_info .name_info_pic .name_info_label {  font-size:2.4rem; }
.name_ph .name_info .name_info_txt { font-size:3rem; word-break: break-word;}
.name_ph .name_info .name_info_txt br {display:none;}
.nick_input:before, .nick_input:after {background-size:100% auto;}


.name_list {margin-left:-2.5rem;}
.name_all .name_wrap {padding:4rem;}
.name_list > li { margin-bottom:2.5rem; width:50%; display:block;}
.name_list > li .name_tit_wrap { font-size:2.3rem; }

.preview .preview_box {font-size:2.7rem;}
.preview .preview_box:before, .preview .preview_box:after {background-size:100% auto;}
}


@media screen and (max-width: 560px) {
.pb_content #container .preview .bottom_btns li a { height:30px; width:30px !important; }
.preview .bottom_btns li a {height:30px; width:30px !important;}
}