@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;}

.section {border-top:1px solid rgba(255, 255, 255, 0.4); position:relative;}
.section > .inner {position:relative;  padding-top:23.3rem; padding-bottom:23.3rem; 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/ph/namecard/back01.jpg') center center no-repeat; background-size:cover; border-top:none; position:relative; overflow:hidden;}
.section.s1:before {background:url('/images/ph/namecard/back_man.png') center center no-repeat; z-index:1; position:absolute; left:0; right:0; top:0; bottom:0;  background-size:cover; content:''; display:block;}
.section.s1:after {background:url('/images/ph/namecard/back01_wave.png') center center no-repeat;}
.section.s1 > .inner {padding-top:30rem; padding-bottom:20rem;}
.section.s2 {background:#62009c;}
.section.s3 {background:#3638d9}
.section.s4 {background:#cb0cae;}
.section.s5 {background:#3b0ab6}

.section.s2 .wave {background:url('/images/ph/namecard/back02.png') center bottom no-repeat;}
.section.s3 .wave {background:url('/images/ph/namecard/back03.png') center bottom no-repeat;}
.section.s4 .wave {background:url('/images/ph/namecard/back04.jpg') center top no-repeat;}
.section.s5 .wave {background:url('/images/ph/namecard/back05.png') center top no-repeat;}


.name_ph {background:rgba(57, 14, 110, 0.4); position:relative; z-index:3; padding:3.5rem 0; text-align:center;}
.name_ph .name_info {display:inline-block; }
.name_ph .name_info .name_info_pic {position:relative; display:inline-block;}
.name_ph .name_info .name_info_pic .name_info_label {padding:10px; width:296px; position:absolute; left:-290px; top:-60px; font-size:14px; color:#ffffff; border-radius:3px; background:#8392ff;}
.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/ph/namecard/namecard_arr.png') 0 0 no-repeat;}
.name_ph .name_info .name_info_txt {margin-top:10px; font-size:18px; color:#d7dcff;}
.section.s5 .inner {padding-bottom:10rem;}

.section .step00 {background:url('/images/ph/namecard/step_back.png') 0 0 no-repeat; background-size:cover; position:absolute; top:0; left:50%; margin-left:-10.75rem;  width:21.5rem; font-size:2rem; font-weight:600; height:10.8rem; padding-top:2.9rem; z-index: 1; 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 .typing-txt{display: none;} 
.typing_wrap .typing {display: inline;  animation-name: cursor;  animation-duration: 0.3s;  animation-iteration-count: infinite; border-bottom:1px solid #fff; line-height:normal;} 


.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-bottom:4rem; word-break:keep-all;}
.con_box .con_tit .yel {color:#ffe92c;}
.nick_input {width:60rem; margin:0 auto; max-width:100%;}
.nick_input input[type=text] {height:80px; line-height: 80px; width:100%; background:#fff; text-align:center; font-size:2.4rem; font-weight:600; color:#000; padding:0 2rem;}
.nick_input input[type=text]::placeholder {color:#000;}

.color_btn {z-index:4; display:inline-block; margin:0 auto; width:80px; height:80px; line-height:80px; text-align: center; color:#fff; background:#000; 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;
    /* text-shadow: -2px 0 #ff0000, 0 2px #ff0000, 2px 0 #ff0000, 0 -2px #ff0000; */}
.color_btn:after, .color_btn:before {display:block; content:''; position:absolute;}
.color_btn:after {left:3px; top:3px; right:3px; bottom:3px; background: none; border:1px solid #fff;}
.color_btn:before {right:3px; bottom:3px; width:29px; height:29px; background:url('/images/ph/namecard/color_arr.png') 0 0 no-repeat; background-size:cover;}

#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/ph/namecard/check.png') 0 0 no-repeat; left:0; top:-3px; background-size:cover;}
.section.s4 .color_btn {display:inline-block;}
.section.s4 .con_box {font-size:0; }
.color_border {display:inline-block; width:300px; height:80px; border:5px solid #000; margin-right:5px;}
.name_all {margin:0 auto; padding:2rem; background:#ece4ff; max-width: 1000px; width:100%;}
.name_all .name_wrap {background:#fff; overflow-y: scroll; padding:4.5rem 4.5rem 0; max-height:59rem;}
.name_list {margin-left:-4rem;}
.name_list > li {width:33.33%; padding-left:4rem; margin-bottom:3rem;}
.name_list > li a {display:block;}
.name_list > li:nth-child(3n) {width:33.34%;}
.name_list > li .name_tit_wrap {text-align:left; font-weight:500; color:#222; font-size:1.5rem; margin-bottom:6px; height:36px;}
.name_list > li .name_tit_wrap span {word-break:break-all; display:block; height:18px; overflow:hidden;}
.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 {height:3.9rem; overflow:hidden;}
.name_list > li .name_box img {width:100%; height:100%;}
.name_list > li.on span {color:#ff0000; 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 #ff0000; position:absolute;}
.preview {position:fixed; left:0; right:0; bottom:0; z-index: 4;}
.preview .preview_area {padding-right:5px; padding-top:10px; background:url('/images/ph/namecard/back_gra02.jpg') center center repeat-x; background-size:cover;  position: relative; background-size:cover;}
.preview .pre_btn {font-size:1.2rem; display:block; margin:0 auto -1px; width:140px; height:33px; line-height:33px; text-align: center; color:#d1d1d1; border-radius: 10px 10px 0 0 ; background:url('/images/ph/namecard/back_gra.jpg') center center no-repeat; background-size:cover;}
.preview .preview_box {background-size:cover; background-repeat: no-repeat;  background-position:center center; background-image:url('/images/ph/namecard/base.jpg'); width:380px; height:60px; line-height: 60px; margin:0 auto;  padding:0 2rem; font-size:2rem; color:#fff; overflow: hidden;}
.preview .pre_sub {text-align:center; font-size:1.3rem; color:#549dff; font-weight:500; margin-top:5px;}
.preview .preview_in {background:url('/images/ph/namecard/back_gra06.jpg') center center repeat-x; padding:1.5rem 0; background-size:cover; position:relative;}
.preview .bottom_btns {position:absolute; bottom:30px; font-size:0;}
.preview .bottom_btns01 {right:75px;}
.preview .bottom_btns02 {right:20px;}
.preview .bottom_btns ul {fotn-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:45px; border-radius: 5px; box-shadow: 4px 0 0 rgba(0, 0, 0, 0.25);}
.preview .bottom_btns li.facebook a {background-image:url('/images/ph/namecard/face_off.jpg'); width:105px;}
.preview .bottom_btns li.top a {background-image:url('/images/ph/namecard/top_off.jpg'); width:45px;}
.preview .bottom_btns li.facebook:hover a {background-image:url('/images/ph/namecard/face_on.jpg');}
.preview .bottom_btns li.top:hover a {background-image:url('/images/ph/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:90px; left:0;  width: 117px;height: 71px; background:url('/images/ph/namecard/obj01.png') 0 0 no-repeat;}
.particle0_1 .hexa2 {top:0; left:270px;  width: 436px;height: 201px; background:url('/images/ph/namecard/obj02.png') 0 0 no-repeat;}
.particle0_1 .hexa3 {top:170px; left:610px; width: 52px;height: 50px; background:url('/images/ph/namecard/obj03.png') 0 0 no-repeat;}
.particle0_1 .hexa4 {top:90px; left:705px; width: 100px;height: 75px; background:url('/images/ph/namecard/obj04.png') 0 0 no-repeat;}
.particle0_1 .hexa5 {top:300px; left:195px; width: 90px;height: 90px; background:url('/images/ph/namecard/obj05.png') 0 0 no-repeat;}
.particle0_1 .hexa6 {bottom:250px; left:5px; width: 97px;height: 67px; background:url('/images/ph/namecard/obj06.png') 0 0 no-repeat;}
.particle0_1 .hexa7 {bottom:160px; left:20px;  width: 129px;height: 77px; background:url('/images/ph/namecard/obj07.png') 0 0 no-repeat;}
.particle0_1 .hexa8 {bottom:245px;  left:360px; width: 106px;height: 107px; background:url('/images/ph/namecard/obj08.png') 0 0 no-repeat;}
.particle0_1 .hexa9 {top:225px; right:705px; left:auto;width: 56px;height: 56px; background:url('/images/ph/namecard/obj09.png') 0 0 no-repeat;}
.particle0_1 .hexa10 {top:353px; right:600px;  left:auto; width: 19px;height: 19px; background:url('/images/ph/namecard/obj10.png') 0 0 no-repeat;}
.particle0_1 .hexa11 {bottom:290px; right:730px;  left:auto;  top:auto;  width: 53px;height: 46px; background:url('/images/ph/namecard/obj11.png') 0 0 no-repeat;}
.particle0_1 .hexa12 {bottom:240px; right:830px;  left:auto;  top:auto;  width: 49px;height: 47px; background:url('/images/ph/namecard/obj12.png') 0 0 no-repeat;}
.particle0_1 .hexa13 {top:20px; right:150px;  left:auto; width: 97px;height: 89px; background:url('/images/ph/namecard/obj13.png') 0 0 no-repeat;}
.particle0_1 .hexa14 {top:0; right:20px;  left:auto;  bottom:auto;  width: 79px;height: 77px; background:url('/images/ph/namecard/obj14.png') 0 0 no-repeat;}
.particle0_1 .hexa15 {top:125px; right:70px;  left:auto;   width: 88px;height: 83px; background:url('/images/ph/namecard/obj15.png') 0 0 no-repeat;}
.particle0_1 .hexa16 {top:200px; right:0;  left:auto;  bottom:auto;   width: 85px;height: 65px; background:url('/images/ph/namecard/obj16.png') 0 0 no-repeat;}
.particle0_1 .hexa17 {bottom:196px; right:0;  left:auto;  top:auto;  width: 150px;height: 264px; background:url('/images/ph/namecard/obj17.png') 0 0 no-repeat;}
.particle0_1 .hexa18 {top:485px; margin-left:581px; width: 14px;height: 15px; background:url('/images/ph/namecard/obj18.png') 0 0 no-repeat;}


@media screen and (max-width: 1220px) {
.inner {padding-left:4rem; padding-right:4rem;}
.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) {
.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_btns01 {right:20px;}
.preview .bottom_btns li a {height:60px; width:60px !important;}
.preview .bottom_btns li.top a {background-image: url(/images/ph/namecard/top_m.png) !important;}
.preview .bottom_btns li.facebook a {background-image: url(/images/ph/namecard/face_m.png) !important;}
.name_ph .name_info .name_info_pic .name_info_label {left:50%; margin-left:-148px; top:-78px;}
.name_ph .name_info .name_info_pic .name_info_label:after {right:50%; margin-right:-7px; width:15px; height:10px; background:url('/images/ph/namecard/namecard_arr_m.png') 0 0 no-repeat;}
.name_list > li {width:50% !important;}
}

@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:27rem; padding-bottom:18rem;}
footer img {width:84px;}
.nick_input input[type=text] {height:40px; line-height:40px;}
.nick_input input[type=text]::placeholder {color:#000;}
.color_btn {width:40px; height:40px; line-height:40px;}
.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 .hexa1, .particle0_1 .hexa7, .particle0_1 .hexa12, .particle0_1 .hexa13, .particle0_1 .hexa16 {display:none;}
.particle0_1 .hexa2 {width:212px; height:97px; top:-52px; left:-75px;}
.particle0_1 .hexa3 {left:70px; top:85px; width:26px; height:25px;}
.particle0_1 .hexa4 {width:60px; height:45px; left:20px; top:45px;}
.particle0_1 .hexa5 {top:auto; bottom:-13px; width:46px; height:46px; left:auto; right:60px;}
.particle0_1 .hexa6 {bottom:-5px; width:50px; height:34px; left:90px;}
.particle0_1 .hexa8 {left:-20px; width:60px; height:60px; bottom:10px;}
.particle0_1 .hexa9 {display:block; right:15px; width:29px; height:29px; top:112px;}
.particle0_1 .hexa10 {width:10px; height:10px; bottom:50%; margin-bottom:-11px; right:95px; top:auto; left:auto;}
.particle0_1 .hexa14 {width:38px; height:41px; right:0; left:auto;}
.particle0_1 .hexa17 {display:block; width:100px; height:175px; bottom:-10px; right:-50px;}
.particle0_1 .hexa18 {margin-left:0; left:auto; right:31px; width:7px; height:8px; top:55px;}
.preview .pre_btn {width:100px; height:20px; line-height:20px; border-radius: 5px 5px 0 0;}
.preview .preview_area {padding:1rem 0 0;}
.preview .preview_in {padding:2.5rem 0 2rem;}
.preview .preview_box { width:190px; height:30px; line-height:30px; text-align:left; vertical-align:top;}
.preview .bottom_btns {top:2.5rem;}
.preview .bottom_btns li a {height:30px; width:30px !important;}
.preview .bottom_btns02 {left:10px;}
.preview .bottom_btns01 {right:10px;}
#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 img {width:50px;}
.name_ph .name_info .name_info_pic .name_info_label {padding:5px; font-size:10px; width:220px; left:50%; margin-left:-110px; top:-50px;}
.name_ph .name_info .name_info_txt {font-size:11px;}
.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;}
.name_list > li .name_tit_wrap {height:24px;}
.name_list > li .name_tit_wrap span {height:10px; margin:1px 0; letter-spacing: -0.05em;}
.name_list > li .name_tit_wrap .name_tit {padding-top:12px;}

}