@charset "utf-8";

/*common*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
body{font-size: 14px; color:#555555; font-family: 'Noto Sans KR'; background-color:#ffffff; text-align: center; word-break: break-all; }
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, form, fieldset, p, button, input { margin: 0;padding: 0}
ul, ol, dl {list-style: none}
ul {list-style: none; padding: 0; margin: 0}
img, fieldset, iframe {border: 0}
img {vertical-align:top}
input, select, button {vertical-align: middle}
input {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0;}
button * {position: relative}
em, address {font-style: normal}
a {text-decoration: none;color: inherit; display: block;}
.clear {clear: both;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0; }
*{-webkit-tap-highlight-color:transparent}
img.map, map area{outline: none;}
textarea{-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
input,textarea{font-family: 'Noto Sans KR', sans-serif; font-size:14px;}
textarea:focus, input:focus{outline: none;}

.obj{position: absolute; z-index: 2;}
.btn{position: absolute; z-index: 2;}
.btn a{position: absolute; width:100%; height:100%; top:0px; left:0px; font-size:0px; background-image: url('https://dbins2.speedgabia.com/kd5050/images/transparent.png'); }
.hidden{font-size:0px; display: none;}



/* 아워데이 캠페인 */
@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Ownglyph_meetme-Rg';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_1@1.0/Ownglyph_meetme-Rg.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
.pc{display: block;}
.mobile{display: none;}
.section{font-size:24px; font-family: 'Pretendard-Regular'; font-weight: 400; color:#2c1911; overflow: hidden; word-break: keep-all;}
#make{padding:80px 0px; background-image: url(../images/make_bg.jpg); background-size: cover; background-position: center 100%;}
#make .wrap{width:1400px; margin:0px auto;}
#make p.title img{width:80%; max-width:750px;}
#make .wrap2{padding-left:130px;}
#make p.txt1{margin:50px 0px; font-size:26px;}
#make p.txt1 b{font-weight: 600;}
#make .inputContainer{width:1018px; padding:40px 100px 70px 200px; background-image: url(../images/make_input_bg.png); color:#2c1911; margin:0px auto; text-align: left; background-size: contain; background-repeat: no-repeat; background-position-x: center; box-sizing: border-box; position: relative;}
#make .inputContainer::after{width:323px; height:284px; bottom:-100px; right:-240px; background-image: url(../images/make_bg_img.png); background-size: cover; background-position: center; position: absolute; content: ""; display: block;}
#make .inputContainer dl.bottom{padding-top:40px; margin-top:50px; border-top:2px dashed #cebeb0;}
#make .inputContainer li{padding-left:200px; height:50px; margin:12px 0px; position: relative; box-sizing: border-box;}
#make .inputContainer li span{width:170px; line-height: 50px; top:0px; left:0px; position: absolute;}
#make .inputContainer li span::after{width:3px; height:19px; top:15px; right:0px; position: absolute; background-color: #473a34; content: ""; display: block;}
.input em{margin-right:15px;}
.selectWrap {padding: 7px 4px; border-radius: 12px; border:2px solid #473a34; display: inline-block; background-color: #ffffff; position: relative;}
.selectWrap select {font-size:24px; padding-left:10px; padding-right:40px; background-size: 19px 11px; background-position: right 10px center; overflow-y: auto; height: 100%; color:#2c1911; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-color: transparent; background-image: url('../images/make_ico_arrow.png'); background-repeat: no-repeat; border: none; border-radius: 0; outline: none;}
.selectWrap select::-ms-expand {display: none;}
.input input[type="text"]{font-size:24px; padding: 5px 15px; border-radius: 12px; border:2px solid #473a34; display: inline-block; background-color: #ffffff; position: relative;}
#make .inputContainer li.name .input input[type="text"]{width:24%;}
#make .inputContainer li .input b{font-size:16px; margin-left:5px; font-weight: 400; opacity: .5; vertical-align: bottom;}
#make .inputContainer li.anniversaryType{height:auto;}
#make .inputContainer li.anniversaryType .input{padding-top:3px; padding-bottom:5px;}
.input label{font-size:22px; margin:10px 0px; cursor:pointer; display: block;}
.input input[type="radio"]{display:none; }
.input input[type="radio"] + em {width:27px; height:27px; margin-right:5px; vertical-align: bottom; display:inline-block;background-image: url('../images/make_ico_check.png'); background-size: cover;}
.input input[type="radio"]:checked + em {background-image: url('../images/make_ico_checkH.png'); }
.input input[type="checkbox"]{display:none; }
.input input[type="checkbox"] + em {width:27px; height:27px; margin-right:5px; vertical-align: bottom; display:inline-block;background-image: url('../images/make_ico_check.png'); background-size: cover;}
.input input[type="checkbox"]:checked + em {background-image: url('../images/make_ico_checkH.png'); }
#make .inputContainer dl.bottom p{padding-left:40px; margin:15px 0px; font-size:22px;}
#make .inputContainer li.anniversaryPublic{padding-left:20px;}
#make .inputContainer li.anniversaryPublic .input label{margin:0px 20px; display: inline-block;}
#make .inputContainer .preview{width:380px; height:660px; bottom:-30px; left:-260px; box-sizing: border-box; position: absolute;}
#make .inputContainer .preview .bg{position: absolute; width:100%; height:100%; top:0px; left:0px;}
#make .inputContainer .preview .bg img{width:100%; height:auto;}
#make .inputContainer .preview .box{font-size:30px; width:91%; height:30%; top:6%; left:5%; font-weight: 600; color:#9b4d00; position: absolute; z-index: 2;}
#make .inputContainer .preview .box p{margin:7px 15px;}
#make .inputContainer .preview .box p.anniversaryDay{font-size:29px;}
#make .inputContainer .preview .box p.name em{font-size:29px;}
#make .inputContainer .preview .box p.name span{color:#2c1911;}
#make .inputContainer .preview .box p.anniversary em{font-size:29px;}
#make .inputContainer .preview .box p.anniversary span{color:#2c1911;}
#make .inputContainer .preview .box p.anniversaryMSG{margin-top:10px; font-size:34px; font-weight: 400; font-family: 'Ownglyph_meetme-Rg'; color:#2c1911; text-align: center;}
#make .inputContainer .preview .box p.anniversaryMSG span{margin:0px 5px;}

#make .inputContainer .preview.real{width:551px; height:954px; top:0px; left:0px; bottom:auto; display: none; z-index: -1;}
#make .inputContainer .preview.real .box{height:30%;}
#make .inputContainer .preview.real .box{font-size:40px;}
#make .inputContainer .preview.real .box p.anniversaryDay{font-size:48px;}
#make .inputContainer .preview.real .box p.name em{font-size:48px;}
#make .inputContainer .preview.real .box p.anniversary em{font-size:48px;}
#make .inputContainer .preview.real .box p.anniversaryMSG{font-size:45px;}


#make .inputContainer .preview .bg .type{display: none;}
#make .inputContainer .preview.type1 .bg .type1{display: block;}
#make .inputContainer .preview.type2 .bg .type2{display: block;}
#make .inputContainer .preview.type3 .bg .type3{display: block;}
#make .inputContainer .preview.type4 .bg .type4{display: block;}
#make .inputContainer .preview #capture{width:100%; left:0%; height:100%; top:0%; position: absolute;}
.agree{margin-top:40px;}
.agree .input label{display: inline-block;}
.agree .input span{font-size:16px; margin-left:10px; vertical-align: middle;}
.agree .input span a{padding:3px 10px; border-radius: 8px; color:#ffffff; background-color: #aa9985; display: inline-block;}
.btnContainer{margin-top:20px;}
.btnContainer a{display: inline; position: relative;}
.btnContainer a em{position: absolute; top:0px; left:0px; display: none;}
.btnContainer a:hover em{display: block;}

#result{display: none;}
#result{padding:170px 0px; background-image: url(../images/result_bg.jpg); background-size: cover; background-position: center 100%;}
#result .wrap{width:1200px; margin:0px auto;}
#result .container{display: flex; justify-content: center; }
#result #resultImg{width:370px; min-height:300px; left:-400px; top:0px; position: absolute;}
#result #resultImg img{width:100%; height:auto;}
#result .box{padding-top:40px; margin-left:90px; font-size:30px; text-align: left; position: relative;}
#result .box p.txt1{margin:40px 0px;}
#result .box p.txt2{margin-bottom:70px;}
#result .box .snsBtn{text-align: center; display: flex;}
#result .box .snsBtn dl{margin:20px 7px;}
#result .box .snsBtn dt{font-size:18px; color:#635854;}
#result .box .snsBtn dd{margin:8px 0px;}
#result .box .snsBtn dd img{width:220px; height:auto;}
#result .box .snsBtn dd.tag{font-size:14px; font-weight: 600; color:#2c1911;}
#result .box .snsBtn #tagTxt{position: absolute; top:0; left:0; width:1px; height:1px; margin:0; padding:0; border:0;}
#result .box .link{margin-top:40px;}
#result .box .link img{width:458px; height:auto;}

.popup {position: fixed;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;overflow: auto;z-index: 900;box-sizing: border-box;background-color: hsla(0, 0%, 0%, 0.8);text-align: center;display: none;}
.popup:before{content: ""; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.05em;}
#popup_policy .wrap {width:80%; max-width:1200px; border-radius: 28px;; background-color: #fffbf2; margin:0 auto;vertical-align: middle;position: relative;z-index: 2;box-sizing: border-box;display: inline-block; overflow: hidden;}
#popup_policy .wrap .container{padding:30px; height:70vh; max-height:600px; }
#popup_policy .wrap .btnContainer{margin-bottom:30px;}
#popup_policy .wrap .btnContainer img{width:297px;}


/* @media screen and (max-width:1300px){ */
  .section{font-size:20px; }
  #make{padding:50px 0px;}
  #make .wrap{width:800px;}
  #make p.title img{width:100%;}
  #make .wrap2{padding-left:250px;}
  #make p.txt1{margin:50px 0px; font-size:26px;}
  #make .inputContainer{width:850px; padding:40px 65px 60px 160px;}
  #make .inputContainer::after{width:323px; height:284px; bottom:-100px; right:-240px;}
  #make .inputContainer dl.bottom{padding-top:40px; margin-top:50px;}
  #make .inputContainer li{padding-left:170px; height:40px; margin:9px 0px;}
  #make .inputContainer li span{width:140px; line-height: 40px;}
  #make .inputContainer li span::after{width:2px; height:18px; top:10px;}
  .input em{margin-right:10px;}
  .selectWrap {padding: 4px 4px; border-radius: 10px; }
  .selectWrap select {font-size:20px;}
  .input input[type="text"]{font-size:20px; padding: 3px 15px; border-radius: 10px;}
  #make .inputContainer li .input b{font-size:14px;}
  #make .inputContainer li.anniversaryType .input{padding-top:3px; padding-bottom:5px;}
  .input label{font-size:20px; margin:4px 0px;}
  .input input[type="radio"] + em {width:24px; height:24px; margin-right:5px;}
  .input input[type="checkbox"] + em {width:24px; height:24px; margin-right:5px;}
  #make .inputContainer dl.bottom p{padding-left:30px; margin:10px 0px; font-size:20px;}
/* } */

@media screen and (max-width:1000px){
  img{width:100%; height:auto;}
  .pc{display: none;}
  .mobile{display: block;}
  .section{font-size:18px; letter-spacing: -1px;}
  #make{padding:50px 0px;}
  #make .wrap{padding:0px 40px; width:100%; box-sizing: border-box;}
  #make .wrap2{padding:0px;}
  #make p.txt1{margin:30px 0px; font-size:19px; line-height:28px;}
  #make p.txt1 br{display: none;}
  #make .inputContainer{width:auto; padding:20vw 10vw; background-image: url(../images/mo_make_input_bg.jpg); background-size: cover;}
  #make .inputContainer::after{width:32%; height:7%; bottom:-2%; right:-3%; background-size: contain; background-repeat: no-repeat;}
  #make .inputContainer dl.bottom{padding-top:40px; margin-top:50px; border-top: 1px dashed #cebeb0;}
  #make .inputContainer li{padding-left:0px; height:auto; margin:20px 0px; }
  #make .inputContainer li span{font-weight: 600;; width:140px; line-height: 40px; position: relative;}
  #make .inputContainer li span::after{display: none;}
  #make .inputContainer li.name .input input[type="text"]{width:100%;}
  #make .inputContainer li.anniversary .input input[type="text"]{width:100%;}
  #make .inputContainer li.anniversaryDay .input{display: flex; align-items: center;}

  #make .inputContainer .preview.real{}
  
  .input em{width:12%; padding-left:1%; margin:0px;}
  .selectWrap {width:18%; padding: 5px 6px; border-radius: 5px; }
  .selectWrap1{width:24%;}
  .selectWrap select {font-size:18px; padding:0px; background-size: 10px 5px; width:100%; background-position: right center; }
  .input input[type="text"]{font-size:18px; padding: 3px 15px; border-radius: 5px; width:100%;}
  #make .inputContainer li .input{position: relative;}
  #make .inputContainer li .input b{font-size:12px; top:-20px; right:0px; position: absolute;}
  #make .inputContainer li.anniversaryType .input{padding:0px;}
  .input label{font-size:18px; margin:4px 0px;}
  .input input[type="radio"] + em {width:20px; height:20px; margin-right:5px; background-size: contain; background-repeat: no-repeat;}
  .input input[type="checkbox"] + em {width:20px; height:20px; margin-right:5px; background-size: contain; background-repeat: no-repeat; }
  #make .inputContainer dl.bottom p{padding-left:30px; margin:10px 0px; font-size:18px;}
  #make .inputContainer li.anniversaryPublic .input label{margin:15px 0px; display: block;}
  #make .inputContainer .preview{margin-top:40px; width:auto; height:auto; position: relative; left:0px; bottom:0px;}
  #make .inputContainer .preview #capture{position: relative;}
  #make .inputContainer .preview .bg{position: relative; width:auto; height:auto;}
  #make .inputContainer .preview .bg img{width:100%; height:auto;}
  #make .inputContainer .preview .box{font-size:20px; width:91%; height:32%; top:4%; left:5%;}
  #make .inputContainer .preview .box p{margin:5px 20px;}
  #make .inputContainer .preview .box p.anniversaryDay{font-size:25px;}
  #make .inputContainer .preview .box p.name em{font-size:25px;}
  #make .inputContainer .preview .box p.anniversary em{font-size:25px;}
  #make .inputContainer .preview .box p.anniversaryMSG{margin-top:10px; font-size:25px;}
  .agree{margin-top:40px;}
  .agree .input {display: flex; justify-content: center;}
  .agree .input label{font-size:16px; width:60%;}
  .agree .input span{font-size:13px; width:20%; margin-top:3px; }
  .agree .input span a{padding:2px 6px;}
  .btnContainer{width:80%; margin:0px auto; margin-top:20px;}

  #result{padding:50px 0px; background-image: url(../images/mo_result_bg.jpg); background-position: center 0%;}
  #result .wrap{width:100%; padding:10px 40px; box-sizing: border-box;}
  #result .container{display: block;}
  #result #resultImg{width:100%; min-height:auto; left:0px; top:0px; position: relative; margin:0px auto;}
  #result .box{padding-top:40px;margin:0px; font-size:20px; text-align: center; }
  #result .box p.txt1{margin:20px 0px;}
  #result .box p.txt2{margin-bottom:40px;}
  #result .box .snsBtn{text-align: center; display: flex;}
  #result .box .snsBtn dl{margin:20px 4px;}
  #result .box .snsBtn dt{font-size:14px; color:#635854;}
  #result .box .snsBtn dd{margin:8px 0px;}
  #result .box .snsBtn dd.tag{font-size:11px; word-break: break-all;}
  #result .btnContainer{width:100%;}
  #result .box .snsBtn dd img{width:100%;}
  #result .box .link{margin-top:30px;}
  #result .box .link img{width:100%;}
  #result .box p.txt3{width:90%; margin:0px auto; margin-top:20px; }

  #popup_policy .wrap {width:94%; border-radius: 15px;}
  #popup_policy .wrap .container{padding:15px; height:70vh; }
  #popup_policy .wrap .btnContainer img{width:60%;}
  #popup_policy .wrap .btnContainer em img{width:100%;}
}