@charset "UTF-8";

html, body { height:100%; margin:0; padding:0; background-color:#97d477; }
body { touch-action: pan-y; transition:background-color 0.5s; }
form { margin:0; padding:0; }
body{
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-use-select: none;
 user-select: none;
}
img {
 -webkit-user-drag: none;
 -khtml-user-drag: none;
 -moz-user-drag: none;
 -o-user-drag: none;
 user-drag: none;
}
body.preload::after{
	/* 소스만 다운받고 화면은 나태내지 않는다. (숨김 처리) */
    position:absolute; 
    width:0; 
    height:0; 
    overflow:hidden; 
    z-index:-1;
    
    /* load images */
    content:url("../images/section02_bg.png") url("../images/section03_bg.png") url("../images/section04_bg.png") url("../images/section05_bg.png") url("../images/section06_bg.png") url("../images/section07_bg.png") url("../images/section08_bg.png") url("../images/section09_bg.png") url("../images/section10_bg.png"); /* 필요한 이미지 소스들 다운 */
}
@keyframes fadeIn {
	0% { opacity:0; }
	100% { opacity:1; }
}
div { box-sizing:border-box; }
#wrap { position:relative; width:100%; max-width:750px; min-width: 750px; margin:0 auto; }
#wrap:after{ content:""; display:block; padding-bottom:1270px; }
#wrap_box { position:absolute; width:100%; height:100%; }

@media (orientation: landscape) {
	#wrap:after{ padding-bottom:1270px; }
}

.action_button { position:absolute;  top:1040px; left:50%; transform:translateX(-50%); width:524px; height:106px; cursor:pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); }
.action_button div { position:relative; width:100%; height:100%; background-color:#1ea27b; border: 2px solid #000000; border-radius:53px; font-family: "BRRA_R"; color: #ffffff; font-size: 36px; line-height:106px; text-align: center; z-index:2;  }
.action_button:after { position:absolute; top:5px; left:50%; transform:translateX(-50%); width:calc(100% - 4px); height:100%; margin:0 auto 0 auto; background-color: #006044; border: 2px solid #000000; border-radius:53px; font-family: "BRRA_R"; color: #ffffff; font-size: 36px; line-height:106px; text-align: center; z-index:1; }
.action_button.press div { visibility:hidden; } 
.action_button.action_button_red div { background-color:#e63a30; }
.action_button.action_button_red:after { background-color:#b1170e; }

.bg_main { position: absolute;  background-image: url(../images/section01_bg.png?v=1); top: 1269px;  left: 0;  width: 100%;  height: calc(100vh - 1270px); background-repeat:no-repeat; background-position:0px calc(0px - 195px - 1270px); background-size:100% auto; }
.bg_gress { position: absolute;  background-image: url(../images/bg_gress.png?v=1);  top: 1269px;  left: 0;  width: 100%;  height: calc(100vh - 1270px); }
.bg_house { position: absolute;  background-image: url(../images/bg_house.png?v=1);  top: 1269px;  left: 0;  width: 100%;  height: calc(100vh - 1270px); }

.sound { display:none; top: 30px; left: 50%; transform: translateX(calc(-50% + 320px)); position: absolute; cursor:pointer;  }
.skip { display:none; top: 32px; left: 50%; transform: translateX(calc(-50% - 270px)); position: absolute; cursor:pointer; }
.touch_desc { position:absolute; top:1090px; left:50%; transform: translateX(-50%); font-family: "GmarketSansMedium"; color: #ffffff; font-size:25px;  animation: fadeIn 2.0s ease infinite alternate-reverse; }

.section01 { display:block; position:relative; width:100%; height:100%; background-image:url("../images/section01_bg.png?v=1"); background-repeat:no-repeat; background-position:0px -195px; background-size:100% auto; box-sizing:border-box; }
.section01 .section01_request_title { position: absolute; top:860px; left: 50%; transform: translateX(-50%); width:205px; height:33px; margin: 0 auto 0 auto; background-color: #ffffff; border-radius:17px; font-family: "BRBA_B"; color: #4b8939; font-size:20px; line-height:33px; text-align: center; }
.section01 .section01_request_title:after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-bottom: 6px solid transparent; border-top: 6px solid #ffffff; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.section01 .section01_request_count { position:absolute; top:905px; left:0; width:100%; font-family: "BRRA_R"; color: #ffffff; font-size:61px; text-align: center; }
.section01 .section01_request_count span { font-size:45px; }
.section01 .section01_request_desc { position: absolute; top:990px; left: 50%; transform: translateX(-50%); margin: 0 auto 0 auto;  font-family: "GmarketSansMedium"; color: #ffffff; font-size:23px; text-align: center; white-space: nowrap; }
.section01 .section01_button:after { content:'시작하기'; }

.section02 { display:none; position:absolute; top:0; left:0; width:100%; height:100%;  background-image:url("../images/section02_bg.png"); background-repeat:no-repeat; background-position:0 0; background-size:100%; box-sizing:border-box; }
.section02 .section02_button:after { content:'들어가보자'; }

.section03 { display:none; position:absolute; top:0; left:0; width:100%; height:100%;  background-image:url("../images/section03_bg.png"); background-repeat:no-repeat; background-position:0 0; background-size:100%; box-sizing:border-box; }
.section03 .section03_button:after { content:'안녕?'; }

.section04 { display:none; position:absolute; top:0; left:0; width:100%; height:100%;  background-image:url("../images/section04_bg.png"); background-repeat:no-repeat; background-position:0 0; background-size:100%; box-sizing:border-box; }

.section05 { display:none; position:absolute; top:0; left:0; width:100%; height:100%;  background-image:url("../images/section05_bg.png"); background-repeat:no-repeat; background-position:0 0; background-size:100%; box-sizing:border-box; }

.section06 { display:none; position:absolute; top:0; left:0; width:100%; height:100%;  background-image:url("../images/section06_bg.png"); background-repeat:no-repeat; background-position:0 0; background-size:100%; box-sizing:border-box; }
.section06 .section06_button:after { content:'엇, 나를 알아?'; }

.section07 { display:none; position:absolute; top:0; left:0; width:100%; height:100%;  background-image:url("../images/section07_bg.png"); background-repeat:no-repeat; background-position:0 0; background-size:100%; box-sizing:border-box; }
.section07 .section07_button:after { content:'빨간염소? 염소를 왜 보내?'; }

.section08 { display:none; position:absolute; top:0; left:0; width:100%; height:100%;  background-image:url("../images/section08_bg.png"); background-repeat:no-repeat; background-position:0 0; background-size:100%; box-sizing:border-box; }

.section09 { display:none; position:absolute; top:0; left:0; width:100%; height:100%;  background-image:url("../images/section09_bg.png"); background-repeat:no-repeat; background-position:0 0; background-size:100%; box-sizing:border-box; }
.section09 .section09_button:after { content:'어떻게 해야 해?'; }

.section10 { display:none; position:absolute; top:0; left:0; width:100%; height:100%;  background-image:url("../images/section10_bg.png"); background-repeat:no-repeat; background-position:0 0; background-size:100%; box-sizing:border-box; }
.section10 .section10_button:after { content:'좋아! 한번 해보자!'; }

.gotymake { display:none; position:absolute; top:0; left:0; width:100%; height:100%;  background-image:url("../images/bg.png"); background-repeat:no-repeat; box-sizing:border-box; }
.goty_title { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); width: 620px; background-color: #ffffff; border: 2px solid #000000; border-radius: 10px; font-family: "BRRA_R"; color: #252525; font-size: 34px; line-height: 130px; text-align: center; letter-spacing: -1px; z-index:3; }
.goty_title span { color:#e73834; }
.goty_title.goty_title_font { font-size:37px; } 
.goty_name { position: absolute; top: 727px; left: 50%; transform: translateX(-50%); width: 230px; height: 50px; margin: 0 auto 0 auto; background-color: #e73834; border-radius: 25px; font-family: "BRRA_R"; color: #ffffff; font-size: 25px; line-height: 53px; text-align: center; }
.goty_name:after { content: ''; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-bottom: 9px solid #e73834; border-top: 9px solid transparent; border-left: 8px solid transparent; border-right: 8px solid transparent }
.goty_desc { position: absolute; top: 840px; left: 50%; transform: translateX(-50%); width: 620px; background-color: #ffffff; border: 2px solid #000000; border-radius: 10px; font-family: "GmarketSansMedium"; color: #252525; font-size: 25px; line-height: 41px; padding: 20px 0; text-align: center; letter-spacing: -1px; }


/* goty body */
.goty_body { position:absolute; top:290px; left:50%; transform:translateX(-50%); width:328px; z-index:2; }
.goty_body .goty_orgin { position:relative; }
.goty_body .goty_basic { position:absolute; top:0%; left:0%; width:100%;  }
.goty_body .goty_basic img { width:100%; }
.goty_body .goty_head { position:absolute; left:50%; transform:translateX(-50%); }
.goty_body .goty_head.ghead00 { width:100%; width:102px; top:-1px; }
.goty_body .goty_emotion { position:absolute; left:50%; transform:translateX(calc(-50% - -3px)); }
.goty_body .goty_emotion.gemotion00 { width:100%; width:127px; top:143px;}
.goty_body .goty_hand { position:absolute; top: 236px; left: 50%; transform: translateX(calc(-50% + 0px)); width:236px; }

.gody_ability { position:absolute; top:0; left:0; width:100%; height:100%; }
.gody_ability img { width:100%; }
.gody_ability .gability01 { position:absolute; margin-top: 114px; left: 50%; transform: translateX(calc(-50% - 19px)); width: 283px; }
.gody_ability .gability02 { position:absolute; margin-top: 114px; left: 50%; transform: translateX(calc(-50% - 0px)); width: 340px; }
.gody_ability .gability03 { position:absolute; margin-top: 81px; left: 50%; transform: translateX(calc(-50% - 10px)); width: 493px; }
.gody_ability .gability03_vehicle { position:absolute; margin-top:89px; left: 50%; transform: translateX(calc(-50% - 4px)); width:384px; }
.gody_ability .gability04 { position:absolute; margin-top:-31px; left: 50%; transform: translateX(calc(-50% - 10px)); width: 344px; }

.goty_body .goty_heads { position:absolute; top:0%; left:0%; width:100%; height:100%; z-index:1; }
.goty_body .goty_heads .ghead00 { position:absolute; margin-top:-1px; left: 50%; transform: translateX(calc(-50% - 0px)); width: 102px; }
.goty_body .goty_heads .ghead01 { position:absolute; margin-top:-62px; left: 50%; transform: translateX(calc(-50% - 0px)); width: 234px; }
.goty_body .goty_heads .ghead02 { position:absolute; margin-top:-26px; left: 50%; transform: translateX(calc(-50% - 0px)); width: 260px; }
.goty_body .goty_heads .ghead03 { position:absolute; margin-top:-18px; left: 50%; transform: translateX(calc(-50% - 0px)); width: 229px; }
.goty_body .goty_heads .ghead04 { position:absolute; margin-top:-10px; left: 50%; transform: translateX(calc(-50% - 0px)); width: 211px; }
.goty_body .goty_heads .ghead05 { position:absolute; margin-top:-1px; left: 50%; transform: translateX(calc(-50% - 0px)); width: 210px; }
.goty_body .goty_heads .ghead06 { position:absolute; margin-top:-73px; left: 50%; transform: translateX(calc(-50% - 0px)); width: 216px; }
.goty_body .goty_heads .ghead07 { position:absolute; margin-top:39px; left: 50%; transform: translateX(calc(-50% - 0px)); width: 219px; }
.goty_body .goty_heads .ghead08 { position:absolute; margin-top:-31px; left: 50%; transform: translateX(calc(-50% + 3px)); width: 240px; }
.goty_body .goty_heads .ghead09 { position:absolute; margin-top: -10px; left: 50%; transform: translateX(calc(-50% + 14px)); width: 225px; }

.goty_body .goty_emotions { position:absolute; top:0%; left:0%; width:100%; height:100%; z-index:1; }
.goty_body .goty_emotions .gemotion00 { position:absolute; margin-top:142px; left: 50%; transform: translateX(calc(-50% - -3px)); width:127px; }
.goty_body .goty_emotions .gemotion01 { position:absolute; margin-top:142px; left: 50%; transform: translateX(calc(-50% + 7px)); width:135px; }
.goty_body .goty_emotions .gemotion02 { position:absolute; margin-top:141px; left: 50%; transform: translateX(calc(-50% - 0px)); width: 121px; }
.goty_body .goty_emotions .gemotion03 { position:absolute; margin-top:146px; left: 50%; transform: translateX(calc(-50% - -2px)); width:151px; }
.goty_body .goty_emotions .gemotion04 { position:absolute; margin-top:142px; left: 50%; transform: translateX(calc(-50% - -2px)); width:127px; }

.goty_body .goty_clothes { position:absolute; top:0%; left:0%; width:100%; height:100%; z-index:1; }
.goty_body .goty_clothes .gclothes00 { position:absolute;  }
.goty_body .goty_clothes .gclothes01 { position:absolute; margin-top:200px; left: 50%; transform: translateX(calc(-50% + 0px)); width:186px; }
.goty_body .goty_clothes .gclothes02 { position:absolute; margin-top:199px; left: 50%; transform: translateX(calc(-50% + 0px)); width:213px; }
.goty_body .goty_clothes .gclothes03 { position:absolute; margin-top:205px; left: 50%; transform: translateX(calc(-50% - 0px)); width:213px; }
.goty_body .goty_clothes .gclothes04 { position:absolute; margin-top:199px; left: 50%; transform: translateX(calc(-50% - 0px)); width:218px; }
.goty_body .goty_clothes .gclothes05 { position:absolute; margin-top:199px; left: 50%; transform: translateX(calc(-50% + 22px)); width:230px; }
.goty_body .goty_clothes .gclothes06 { position:absolute; margin-top:200px; left: 50%; transform: translateX(calc(-50% - 0px)); width:223px; }
.goty_body .goty_clothes .gclothes07 { position:absolute; margin-top:201px; left: 50%; transform: translateX(calc(-50% - 0px)); width:214px; }
.goty_body .goty_clothes .gclothes08 { position:absolute; margin-top:200px; left: 50%; transform: translateX(calc(-50% - 0px)); width:220px; }

.goty_body .goty_vehicle_back { position:absolute; top:0%; left:0%; width:100%; height:100%; }
.goty_body .goty_vehicle_back .gvehicle01 { position:absolute; margin-top:278px; left: 50%; transform: translateX(calc(-50% + 0%)); width:270px; } 
.goty_body .goty_vehicle_back .gvehicle04 { position:absolute; margin-top:195px; left: 50%; transform: translateX(calc(-50% + 0%)); width:74px; } 
.goty_body .goty_vehicle_back .gvehicle05 { position:absolute; margin-top:182px; left: 50%; transform: translateX(calc(-50% + 0%)); width:261px; } 
.goty_body .goty_vehicle { position:absolute; top:0%; left:0%; width:100%; height:100%; z-index:1; }
.goty_body .goty_vehicle .gvehicle01 { position:absolute; margin-top:236px; left: 50%; transform: translateX(calc(-50% + 0%)); width:309px; } 
.goty_body .goty_vehicle .gvehicle02 { position:absolute; margin-top:226px; left: 50%; transform: translateX(calc(-50% + 0%)); width:223px; } 
.goty_body .goty_vehicle .gvehicle03 { position:absolute; margin-top:236px; left: 50%; transform: translateX(calc(-50% + 0%)); width:223px; } 
.goty_body .goty_vehicle .gvehicle04 { position:absolute; margin-top:236px; left: 50%; transform: translateX(calc(-50% + 0%)); width:223px; } 
.goty_body .goty_vehicle .gvehicle05 { position:absolute; margin-top:236px; left: 50%; transform: translateX(calc(-50% + 0%)); width:270px; } 

.goty_item { position:absolute; top:244px; left:0; width:100%; height:100%; }
.goty_item .gitem01 { position:absolute; width:158px; margin-left:66px; margin-top: 70px; } 
/* .goty_item .gitem02 { position:absolute; width:21%; margin-left:0; margin-top: 0; }  */
.goty_item .gitem03 { position:absolute; width:128px; margin-left:94px; margin-top: 21px; } 
.goty_item .gitem04 { position:absolute; width: 196px; margin-left: 60px; margin-top: 35px; } 
.goty_item .gitem05 { position:absolute; width: 201px; margin-left: 52px; margin-top: 57px; } 
.goty_item .gitem06 { position:absolute; width: 165px; margin-left: 70px; margin-top: 5px; } 
.goty_item .gitem07 { position:absolute; width: 203px; margin-left: 56px; margin-top: 24px; } 
.goty_item .gitem08 { position:absolute; width: 218px; margin-left: 38px; margin-top: 73px; } 
.goty_item .gitem09 { position:absolute; width: 144px; margin-left: 65px; margin-top: 50px; } 
.goty_item .gitem10 { position:absolute; width: 178px; margin-left: 68px; margin-top: 77px; } 
.goty_item .gitem11 { position:absolute; width: 166px; margin-left: 53px; margin-top: 85px; } 
.goty_item .gitem12 { position:absolute; width: 156px; margin-left: 70px; margin-top: 30px; }
.goty_item .gitem13 { position:absolute; width: 155px; margin-left: 72px; margin-top: 65px; }

/* goty make */
.goty_make_button {position: absolute; top: 460px; left: 50%; width: 620px; height: 47px; transform: translateX(-50%); z-index: 10; }
.goty_make_button .goty_make_button_left { position:absolute; top:0px; left:0; width:28px; height:100%; background-image:url("../images/arrow_left.png"); background-repeat:no-repeat; background-position:top center; cursor:pointer; background-size: 100%;-webkit-tap-highlight-color: rgba(0,0,0,0); }
.goty_make_button .goty_make_button_right { position:absolute; top:0px; right:0; width:28px; height:100%; background-image:url("../images/arrow_right.png"); background-repeat:no-repeat; background-position:top center; cursor:pointer; background-size: 100%;-webkit-tap-highlight-color: rgba(0,0,0,0); }

.goty_reset { position:absolute; top:743px; left:50%; transform:translateX(-50%); width:151px; cursor:pointer; z-index: 10; }
.goty_reset img { width:100%; }

.reset_popup { display:none; position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(0, 0, 0, 0.7); z-index:999; } 
.reset_popup .reset_inner { position: absolute; padding: 0 0 50px 0; width: 600px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ffffff; border-radius: 10px; }
.reset_popup .reset_inner .reset_icon { width:121px; margin: 0 auto 0 auto; padding-top:40px; }
.reset_popup .reset_inner .reset_icon img { width:100%; }
.reset_popup .reset_inner .reset_title { width: 100%; margin: 0 auto 0 auto; padding: 0 0; font-family: "BRRA_R"; color: #000000; font-size: 30px; text-align: center; margin-top: 30px; }
.reset_popup .reset_inner .reset_buttons { display:flex; margin-top:40px; justify-content: center; align-items: center;}
.reset_popup .reset_inner .reset_button_y { position:relative; width:40%; cursor:pointer; }
.reset_popup .reset_inner .reset_button_y div { position:relative; width:100%; height:100%; background-color: #1ea27b; border:2px solid #000000; border-radius:25px; font-family: "BRRA_R"; color: #ffffff; font-size:25px; line-height:50px; text-align: center; z-index:2; box-sizing:border-box; }
.reset_popup .reset_inner .reset_button_y:after { content:'네'; position:absolute; top:10.0%; left:50%; transform:translateX(-50%); width:100%; height:100%; margin:0 auto 0 auto; background-color: #006044; border: 2px solid #000000; border-radius:25px; font-family: "BRRA_R"; color: #ffffff; font-size:25px; line-height:50px; text-align: center; z-index:1; box-sizing:border-box; }
.reset_popup .reset_inner .reset_button_y.press div { visibility: hidden; }
.reset_popup .reset_inner .reset_button_x { position:relative; width:40%; margin:0 0 0 5%; cursor:pointer; }
.reset_popup .reset_inner .reset_button_x div { position:relative; width:100%; height:100%; background-color: #1ea27b; border: 2px solid #000000; border-radius:25px; font-family: "BRRA_R"; color: #ffffff; font-size:25px; line-height:50px; text-align: center; z-index:2; box-sizing:border-box; }
.reset_popup .reset_inner .reset_button_x:after { content:'아니오'; position:absolute; top:10.0%; left:50%; transform:translateX(-50%); width:100%; height:100%; margin:0 auto 0 auto; background-color: #006044; border: 2px solid #000000; border-radius: 50px; font-family: "BRRA_R"; color: #ffffff; font-size:25px; line-height:50px; text-align: center; z-index:1; box-sizing:border-box; }
.reset_popup .reset_inner .reset_button_x.press div { visibility: hidden; }

.goty_button_inner { position:absolute; top:1048px; left:50%; transform:translateX(-50%); width:675px; height:106px; display:flex; justify-content: center; align-items: center; }
.goty_button_inner .goty_button_back { position:relative; width:106px; height:100%; cursor:pointer; }
.goty_button_inner .goty_button_back div { position:relative; width:100%; height:100%; background-color:#1ea27b; border: 2px solid #000000; border-radius:53px; font-family: "BRRA_R"; color: #ffffff; font-size: 36px; line-height:106px; text-align: center; z-index:2; }
.goty_button_inner .goty_button_back div img { width: 39px; }
.goty_button_inner .goty_button_back:after { content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:calc(100% - 4px); height:100%; margin:0 auto 0 auto; background-color: #006044; border: 2px solid #000000; border-radius:53px; font-family: "BRRA_R"; color: #ffffff; font-size: 36px; line-height:106px; text-align: center; z-index:1; background-image: url("../images/button_back.png"); background-repeat: no-repeat; background-size:39px auto; background-position: center center; }
.goty_button_inner .goty_button_back.press div { visibility:hidden; }
.goty_button_inner .goty_button_next { position:relative; width:490px; height:100%; margin-left:20px; cursor:pointer; }
.goty_button_inner .goty_button_next div { position:relative; width:100%; height:100%; background-color:#1ea27b; border: 2px solid #000000; border-radius:53px; font-family: "BRRA_R"; color: #ffffff; font-size: 36px; line-height:106px; text-align: center; z-index:2; }
.goty_button_inner .goty_button_next:after { content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:calc(100% - 4px); height:100%; margin:0 auto 0 auto; background-color: #006044; border: 2px solid #000000; border-radius:53px; font-family: "BRRA_R"; color: #ffffff; font-size: 36px; line-height:106px; text-align: center; z-index:1; }
.goty_button_inner .goty_button_next.press div { visibility:hidden; }
.goty_button_inner .goty_button_next.goty_button_next_red div { background-color:#e63a30; }
.goty_button_inner .goty_button_next.goty_button_next_red:after { background-color:#b1170e; }

/* goty make div */
.gotymake01 { display:none; }
.gotymake01 .gotymake01_button:after { content:'꾸미기 시작'; }
.gotymake01 .gody_ability_buttons { top: 460px;  }
.gotymake01 .gody_ability_buttons .gody_ability_buttons_left { position: absolute; top: -140px; left: 0; width: 200px; height: 340px; background-image: url(../images/arrow_left.png); background-repeat: no-repeat; background-position: center left; cursor: pointer; background-size: auto; outline:none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.gotymake01 .gody_ability_buttons .gody_ability_buttons_right { position: absolute; top: -140px; right: 0; width: 200px; height: 340px; background-image: url(../images/arrow_right.png); background-repeat: no-repeat; background-position: center right; cursor: pointer; background-size: auto; outline:none;-webkit-tap-highlight-color: rgba(0,0,0,0);}

.guide { display:none; position: fixed; width:100%; height:100%; top:0; left:0; background:rgba(0, 0, 0, 0.6); z-index:10; }
.guide .guide_inner { position:relative; }
.guide .guide_circle { position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 2px dotted #ffffff; top: 450px; left: 50%; transform: translateX(calc(-50% + 290px)); }
.guide .guide_circle img { position:absolute; top:15px; left:29px; }
.guide .guide_desc {  position: absolute; text-align: right; font-family: "BRRA_R"; color: #ffffff; font-size: 25px; line-height: 40px; top: 540px; right: 50%; transform: translateX(calc(-50% + 410px)); white-space: nowrap; }


.gotymake02 { display:none; }
.gotymake02 .gody_head_buttons { top: 306px; }
.gotymake02 .gody_emotion_buttons { top: 427px; }
.gotymake02 .gody_clothes_buttons { top: 545px; }
.gotymake02 .gotymake02_button:after { content:'다음 단계로'; }


.gotymake03 { display:none; }
.gotymake03 .gody_head_buttons { top: 306px; }
.gotymake03 .gody_clothes_buttons { top: 545px; }
.gotymake03 .gotymake03_button:after { content:'다음 단계로'; }

.gotymake04 { display:none; }
.gotymake04 .goty_vehicle_list { position:absolute; top:810px; left:5%; width:90%; }
.gotymake04 .goty_vehicle_list .goty_vehicle_item { width:100%; opacity:0.35; }
.gotymake04 .goty_vehicle_list .goty_vehicle_item img { width:100%; }
.gotymake04 .gotymake04_button:after { content:'다음 단계로'; }

.gotymake05 { display:none; }
.gotymake05 .goty_item_list { position:absolute; top:810px; left:5%; width:90%; }
.gotymake05 .goty_item_list .goty_item_item { width:100%; opacity:0.35; border:2px solid #000000;  background-color: #ffffff; border-radius:10px; box-sizing: border-box; text-align: center; }
.gotymake05 .goty_item_list .goty_item_item.gitem01 img { width:60%; margin: 12% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem02 img { width:49%; margin: 12% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem03 img { width:35%; margin: 12% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem04 img { width:70%; margin: 26% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem05 img { width:60%; margin: 19.4% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem06 img { width:47%; margin: 12% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem07 img { width:59%; margin: 12% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem08 img { width:60%; margin: 21.4% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem09 img { width:60%; margin: 9% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem10 img { width:80%; margin: 12% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem11 img { width:80%; margin: 10.5% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem12 img { width:44.5%; margin: 7% auto; }
.gotymake05 .goty_item_list .goty_item_item.gitem13 img { width:74.1%; margin: 7% auto; }
.gotymake05 .gotymake05_button:after { content:'다 꾸몄어요!'; }

.info { display:none; position:absolute; top:0; left:0; width:100%; height:100%; }
.info .info_title { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); width: 620px; background-color: #ffffff; border: 2px solid #000000; border-radius: 10px; font-family: "BRRA_R"; color: #252525; font-size: 34px; line-height: 46px; text-align: center; padding: 30px 0; }
.info .info_container { position:absolute; top: 330px; left: 50%; transform: translateX(-50%); width: 626px; height: 642px;  background-image:url("../images/info_bg.png"); background-repeat:no-repeat; background-position:center center; background-size:contain; box-sizing:border-box; }
.info .info_container .nickname { position: absolute; top: 282px; left: 50%; transform: translateX(-50%); width: 358px; height: 70px; background-color: #38937b; border-radius: 10px; box-sizing: border-box; font-family: "BRRA_R"; color: #ffffff; font-size: 25px; line-height: 70px; text-align: center; border: none; }
.info .info_container .nickname::placeholder { color:#ffffff; opacity:0.5; }
.info .info_container .nickname:-ms-input-placeholder { color:#ffffff; opacity:0.5; }
.info .info_container .nickname::-ms-input-placeholder { color:#ffffff; opacity:0.5; }
.info .info_container .email { position: absolute;  top: 377px;  left: 50%;  transform: translateX(-50%);  display: flex;  justify-content: center;  align-items: center; }
.info .info_container .email .email_title { width: 110px; font-family: "BRRA_R"; color: #ffffff; font-size: 33px; }
.info .info_container .email input { width: 360px; height: 50px; background-color: #ffffff; border-radius: 10px; box-sizing: border-box; font-family: "BRRA_R"; color: #000000; font-size: 30px; text-align: center; border: none; padding: 0; padding: 5px 0 0 0; }
.info .info_container .email input::placeholder { color:#000000; opacity:0.35; }
.info .info_container .email input:-ms-input-placeholder { color:#000000; opacity:0.35; }
.info .info_container .email input::-ms-input-placeholder { color:#000000; opacity:0.35; }
.info .info_container .phone { position: absolute;  top: 443px;  left: 50%;  transform: translateX(-50%);  display: flex;  justify-content: center;  align-items: center; }
.info .info_container .phone .phone_title { width: 110px; font-family: "BRRA_R"; color: #ffffff; font-size: 28px; }
.info .info_container .phone input { width: 360px; height: 50px; background-color: #ffffff; border-radius: 10px; box-sizing: border-box; font-family: "BRRA_R"; color: #000000; font-size: 30px; text-align: center; border: none; padding: 0; padding: 5px 0 0 0; }
.info .info_container .phone input::placeholder { color:#000000; opacity:0.35; }
.info .info_container .phone input:-ms-input-placeholder { color:#000000; opacity:0.35; }
.info .info_container .phone input::-ms-input-placeholder { color:#000000; opacity:0.35; }

.info .info_container .agree_all  { position: absolute; top:520px; left:188px; font-family: "GmarketSansLight"; color: #ffffff; font-size:16px;}
.info .info_container .agree_all_txt1 {margin-left:0px;}
.info .info_container .agree_all_txt2 { display:flex; }
.info .info_container .agree_all_txt2 div:last-child {  margin-top:1px; margin-left: 5px; }
.info .info_container .agree_all_input { display:flex; align-items: center; position: absolute; top: 20px; right: 0; }
.info .info_container .agree_all_input .agree_all_title { font-family: "GmarketSansMedium"; color: #ffffff; font-size:12px; opacity:0.5; }
.info .info_container .agree_all_input input { width:20px; height:20px; }
.info .info_container .agree_expend { opacity:0; position: absolute; top: 570px; right: 2px; width: 438px; background-color: #28816a; border: 3px solid #242424; border-radius: 10px; box-sizing: border-box; display: flex; flex-direction: column; padding: 10px; }
.info .info_container .agree { position: relative; display:flex; align-items: center; justify-content: flex-start; }
.info .info_container .agree.marketing { top:0px; }
.info .info_container .agree input { width:20px; height:20px; }
.info .info_container .agree_title { margin-left:5px; font-family: "GmarketSansLight"; color: #ffffff; font-size:14px; }
.info .info_container .agree_detail { margin-left:5px; font-family: "GmarketSansMedium"; color: #ffffff; font-size:12px; opacity:0.35; cursor:pointer; }
.info .info_button:after { content:'아프리카에 내 빨간염소 보내기!'; }

.info .info_popup { display:none; position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(0, 0, 0, 0.7); }
.info .info_popup .info_agree { display:none; position:absolute; padding:20px 0 40px 0; width:80%; top:50%; left:50%; transform:translate(-50%, -50%); background-color:#ffffff; border-radius:10px; }
.info .info_popup .info_agree .info_desc { width: 90%; margin: 0 auto 0 auto; padding: 20px; background-color: #eeeeee; font-family: "GmarketSansLight"; color: #000000; font-size: 20px; line-height: 30px; border-radius: 10px; }
.info .info_popup .info_agree .info_input { display:flex; margin-top:25px; text-align:center; justify-content: center; align-items: center;}
.info .info_popup .info_agree .info_input input { width: 20px; height: 20px; }
.info .info_popup .info_agree .info_input .info_input_caption { margin-left:10px; font-family: "GmarketSansLight"; color: #5e5e5e; font-size:20px; }
.info .info_popup .info_agree_button { position:relative; width:260px; height: 50px; margin:30px auto 0 auto; cursor:pointer; }
.info .info_popup .info_agree_button div { position: relative; width: 100%; height: 100%; background-color: #1ea27b; border: 2px solid #000000; border-radius:25px; font-family: "BRRA_R"; color: #ffffff; font-size: 25px; line-height: 50px; text-align: center; z-index: 2; box-sizing: border-box; }
.info .info_popup .info_agree_button:after { content:'확인'; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:100%; height:100%; margin:0 auto 0 auto; background-color: #006044; border: 0.2rem solid #000000; border-radius:25px; font-family: "BRRA_R"; color: #ffffff; font-size:25px; line-height:50px; text-align: center; z-index:1; box-sizing:border-box; }
.info .info_popup .info_agree_button.press div { visibility: hidden; }
.info .info_popup .info_alert { display:none; display:none; position:absolute; padding:20px 0 40px 0; width:80%; top:50%; left:50%; transform:translate(-50%, -50%); background-color:#ffffff; border-radius:10px; }
.info .info_popup .info_alert .info_alert_title { padding:50px 0; font-family: "BRRA_R"; color: #000000; font-size: 30px; text-align:center; }

.loading { display:none; position:absolute; top:0; left:0; width:100%; height:100%; }
.loading .loading_inner { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:60%; }
.loading .loading_inner .loading_icon { width:333px; margin:0 auto; animation: lodingRotate 1s linear 0s infinite alternate-reverse; }
.loading .loading_inner .loading_icon img { width:100%; }
.loading .loading_inner .loading_title { margin-top:50px;  text-align: center;  font-family: "BRBA_B";  color: #568d33;  font-size: 42px;  white-space: nowrap; }
@keyframes lodingRotate {
	0% { transform: rotate(-20deg); }
	100% { transform: rotate(30deg); }
}


#result_wrap { position:relative; padding:110px 0 110px 0; width:100%; max-width:750px; min-width: 750px; margin:0 auto; background-image:url("../images/bg.png"); background-repeat:repeat-y; background-position:top center; box-sizing:border-box; }
#result_wrap_inner { position:relative; width:640px; margin:0 auto; }
.result_title { position: relative; background-color: #ffffff; border: 2px solid #000000; border-radius: 10px; font-family: "BRBA_B"; color: #1ea27b; font-size: 32px; line-height: 50px; text-align: center; box-sizing: border-box; letter-spacing: -1px; padding: 20px 0; }
.result_title span { color:#e93732; }
.result_feed { width: 460px; margin: 40px auto 0 auto; border: 2px solid #ffffff; border-radius: 5px; box-shadow: 0 0 20px grey; cursor: pointer;}
.result_feed img { width:100%; }
.result_down_desc { margin-top: 30px; position: relative; font-family: "BRBA_B"; color: #ffffff; font-size: 28px; text-align: center; box-sizing: border-box; letter-spacing: 0px; text-shadow: 0px 0px 2px #64a045; display:flex; flex-wrap: nowrap; justify-content: center; }
.result_down_desc div { margin-left:10px; }
.result_down_desc div:first-child { margin-left:0px; }
.result_hashtag { position: relative; margin-top: 30px; font-family: "NanumGothic"; font-weight: 700; color: #ffffff; font-size: 24px; line-height: 40px; text-align: center; box-sizing: border-box; text-shadow: 0px 0px 5px #64a045; }
.result_feed_btn { width: 620px; margin-top: 30px; display: flex; justify-content: center; align-items: center; }
.result_feed_btn .result_copy { position:relative; width:47%; height:60px; cursor:pointer; }
.result_feed_btn .result_copy div { position: relative; width: 100%; height: 100%; background-color: #ffffff; border: 2px solid #000000; border-radius: 30px; font-family: "BRBA_B"; color: #1ea27b; font-size: 25px; line-height: 60px; text-align: center; box-sizing: border-box; z-index: 2; }
.result_feed_btn .result_copy:after { content:'해시태그 복사하기'; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:100%; height:100%; margin:0 auto 0 auto; background-color: #0c7556; border:2px solid #000000; border-radius:30px; font-family: "BRBA_B"; color: #ffffff; font-size:25px; line-height: 60px; text-align: center; z-index:1; box-sizing:border-box; }
.result_feed_btn .result_copy.press div { visibility:hidden; }
.result_feed_btn .result_insta { position:relative; width:47%; height:60px; margin-left:6%; cursor:pointer; }
.result_feed_btn .result_insta div { position: relative; width: 100%; height: 100%; background-color: #ffffff; border: 2px solid #000000; border-radius: 30px;  text-align: center; box-sizing: border-box; z-index: 2; }
.result_feed_btn .result_insta div a { text-decoration:none; font-family: "BRBA_B"; color: #1ea27b; font-size: 25px; line-height: 60px; }
.result_feed_btn .result_insta:after { content:'게시물 올리기'; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:100%; height:100%; margin:0 auto 0 auto; background-color: #0c7556; border:2px solid #000000; border-radius:30px; font-family: "BRBA_B"; color: #ffffff; font-size:25px; line-height: 60px; text-align: center; z-index:1; box-sizing:border-box; }
.result_feed_btn .result_insta.press div { visibility:hidden; }
.result_share { margin-top: 40px; display: flex; justify-content: center; align-items: center; }
.result_share .result_link { width:12.24%; cursor:pointer; }
.result_share .result_link img { width:100%; }
.result_share .result_kakaotalk { width:12.24%; margin-left:2.0rem; cursor:pointer; }
.result_share .result_kakaotalk img { width:100%; }
.result_box { position: relative; margin-top: 50px; background-color: #ffffff; border: 2px solid #000000; border-radius: 10px; padding: 40px 0; }
.result_box .result_count_title { font-family: "BRBA_B"; color: #1ea27b; font-size:30px; text-align: center; }
.result_box .result_count { font-family: "BRBA_B"; color: #e93732; font-size:75px; text-align: center; }
.result_box .result_count span { font-size:45px; }
.result_box .result_insta_list { width:520px; margin:10px auto 0 auto; }
.result_box .result_insta_list img { width:100%; }
.result_box .result_support_title { margin-top:30px; font-family: "BRBA_B"; color: #1ea27b; font-size:35px; text-align: center; }
.result_box .result_support_desc { margin-top:5px; font-family: "NanumGothic"; color: #515151; font-size:19px; text-align: center; }
.result_box .result_support_list { margin-top:30px; display: flex; justify-content: center; align-items: flex-end; }
.result_box .result_support_list div { margin-left:30px; }
.result_box .result_support_list div:first-child { margin-left:0px;margin-bottom: 4px; }
.result_box .result_button { margin: 30px auto 0 auto; width: 250px; height: 60px; background-color: #e93732; border-radius: 30px; text-align: center; box-sizing: border-box; }
.result_box .result_button a { text-decoration:none; font-family: "BRRA_R"; color: #ffffff; font-size: 25px; line-height:60px; }
.result_box .result_keyring_title { position: relative; margin: 30px auto 0 auto; padding:20px 0; width: 550px; background-color: #e93732; border-radius: 30px; font-family: "BRBA_B"; color: #ffffff; font-size: 30px; text-align: center; }
.result_box .result_keyring_title span { font-size:37px; }
.result_box .result_keyring_title:after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-bottom: 10px solid transparent; border-top:10px solid #e93732; border-left:10px solid transparent; border-right:10px solid transparent; }
.result_box .result_keyring_img { width:407px; margin:15px auto 0 auto; }
.result_box .result_keyring_img img { width:100%; }
.result_box .result_keyring_desc { position: relative; margin-top: 40px; font-family: "NanumGothic"; color: #515151; font-size: 20px; letter-spacing: -1px; text-align: center; }
.result_box .result_keyring_box { margin:70px auto 0 auto; width:558px; }
.result_box .result_keyring_box img { width:100%; }
.result_box .result_keyring_sub { position: relative; margin-top: 40px; font-family: "NanumGothic"; color: #515151; font-size: 21px; letter-spacing: -1px; text-align: center; line-height: 32px;}
.result_box .result_campaign_title { position: relative; margin-top: 100px; font-family: "BRBA_B"; color: #e93732; font-size: 40px; letter-spacing: -1px; text-align: center; line-height: 32px; } 
.result_box .result_campaign_pic { width:558px; margin:20px auto 0 auto; }
.result_box .result_campaign_pic img { width:100%; }
.result_box .result_campaign_subtitle { margin: 40px auto 0 auto; font-family: "BRBA_B"; color: #e93732; font-size: 36px; text-align: center; }
.result_box .result_campaign_desc { position: relative; margin-top: 40px; font-family: "NanumGothic"; color: #515151; font-size: 23px; letter-spacing: -2px; text-align: center; line-height: 35px; }
.result_box .result_support_buttons { margin-top:80px; margin-bottom:30px; display: flex; justify-content: center; align-items: center; }
.result_box .result_support_buttons .result_support_go { width: 250px; height: 60px; background-color: #e93732; border-radius: 30px; text-align: center; background-color: #e93732; font-family: "BRRA_R"; color: #ffffff; font-size:25px; line-height:60px; text-align: center; box-sizing:border-box;  cursor:pointer; }
.result_box .result_support_buttons .result_support_more { margin-left:20px; width: 250px; height: 60px; background-color: #e93732; border-radius: 30px; text-align: center; background-color: #e93732; text-align: center; box-sizing:border-box;  cursor:pointer; text-decoration:none; font-family: "BRRA_R"; color: #ffffff; font-size:25px; line-height:60px;}
.result_onemore { position:relative; width:295px; height:80px; cursor:pointer; margin:50px auto 0 auto; }
.result_onemore div { position:relative; width:100%; height:100%;  background-color: #ffffff; border: 2px solid #000000; border-radius:40px; text-align: center; box-sizing:border-box; z-index:2; }
.result_onemore div a { text-decoration:none; font-family: "BRBA_B"; color: #1ea27b; font-size:25px; line-height:80px; display: block; width: 100%; height: 100%; }
.result_onemore:after { content:'한번 더 보내기'; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:100%; height:100%; margin:0 auto 0 auto; background-color: #ffffff; border: 2px solid #000000; border-radius:40px; font-family: "BRBA_B"; color: #1ea27b; font-size:25px; text-align: center; z-index:1; box-sizing:border-box; line-height:80px; }
.result_onemore.press div { visibility:hidden; }