@charset "utf-8";

[class^="scene-"].active .main_txt{visibility:visible !important;}
[class^="scene-"].active .sub_txt{visibility:visible !important;}
[class^="scene-"].active .mobile_wrap{visibility:visible !important;}
[class^="scene-"].active .vi_wrap{visibility:visible !important;}
[class^="scene-"].active .cont_wrap .info_wrap{visibility:visible !important;}


.fixed_point { position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0.8); z-index:100003;  display:none; }
.fixed_point > div { position:absolute; top:50%; left:50%; width:460px; height:460px; background-color:#fff; border-radius:5px; transform:translate(-50%,-50%); overflow:hidden; }
.fixed_point .stepArea { height:130px; background-color:#f9f6f0; }
.fixed_point .stepArea h2 { height:50px; line-height:50px; text-align:center;  font-size:18px; color:#d4bc84; }
.fixed_point .stepArea ul { display:flex; position:relative; }
.fixed_point .stepArea ul:before { visibility:visible; content:""; display:block; width:calc(33.3333% - 10px); height:1px; background-color:#ddd; position:absolute; top:20px; left:calc(16.6666% + 5px); z-index:10; }
.fixed_point .stepArea ul:after { visibility:visible; content:""; display:block; width:calc(33.3333% - 10px); height:1px; background-color:#ddd; position:absolute; top:20px; right:calc(16.6666% + 5px); z-index:10; }
.fixed_point .stepArea ul li { width:33.3333%; padding:15px 0; text-align:center; }
.fixed_point .stepArea ul li:before { visibility:visible; content:""; display:block; width:10px; height:10px; border-radius:100%; margin:0 auto 10px; background-color:#ddd; z-index:20; }
.fixed_point .stepArea ul .active:after, .fixed_point .stepArea ul .active:before { background-color:#000; }
.fixed_point .stepArea > .active:before { background-color:#000; }
.fixed_point .stepArea > .active2:before, .fixed_point .stepArea > .active2:after { background-color:#000; }
.fixed_point .stepArea > span { position:absolute; z-index:100; top:10px; right:10px; width:20px; height:20px; background:url(../../img/close_btns.png) no-repeat center / 50% auto; border:0px; background-color:#000; border-radius:100%; cursor:pointer; }
.fixed_point .stepContent { position:relative; height:330px; overflow:hidden;  }
.fixed_point .stepContent > div { display:flex; position:absolute; top:0px; left:0%; width:400%; height:100%; }
.fixed_point .stepContent > div > div { width:25%; padding:20px; box-sizing:border-box; overflow-y:scroll; }
.fixed_point .stepContent > div > div::-webkit-scrollbar { width:8px; /*스크롤바의 너비*/ }
.fixed_point .stepContent > div > div::-webkit-scrollbar-thumb { background-color:#000; /*스크롤바의 색상*/ }
.fixed_point .stepContent > div > div::-webkit-scrollbar-track { background-color:#ddd; /*스크롤바 트랙 색상*/ }
.fixed_point .stepContent > div > div:first-child { padding:40px; }
.fixed_point .stepContent > div > div #step01 { width:100%; border:0px; height:50px; position:relative; color:#fff; border-radius:5px;  font-size:15px;
background:linear-gradient(135deg, #B8956A 0%, #D4BC84 30%, #E8D5A3 50%, #D4BC84 70%, #C9A86C 100%); background-size: 200% 200%; }
.fixed_point .stepContent > div > div #step01:hover { animation: goldShimmer 3s ease infinite; }
.fixed_point .stepContent > div > div #step02 { display:inline-block; vertical-align:middle; width:calc(50% - 4px); border:0px; height:50px; position:relative; color:#fff; border-radius:5px;  font-size:15px;
background:linear-gradient(135deg, #B8956A 0%, #D4BC84 30%, #E8D5A3 50%, #D4BC84 70%, #C9A86C 100%); background-size: 200% 200%; }
.fixed_point .stepContent > div > div #step02:hover { animation: goldShimmer 3s ease infinite; }
.fixed_point .stepContent > div > div #step02back { display:inline-block; vertical-align:middle; width:calc(50% - 4px); height:50px; line-height:50px; text-align:center; background-color:#f6f6f6; position:relative; color:#666; border-radius:5px;  font-size:15px; cursor:pointer; }
.fixed_point .stepContent > div > div .thumb { position:relative; min-height:120px; margin:0 0 30px; }
.fixed_point .stepContent > div > div .thumb span { display:block; width:100px; height:100px; border-radius:100%; overflow:hidden; position:absolute; top:0px; left:0px; }
.fixed_point .stepContent > div > div .thumb img { width:100%; }
.fixed_point .stepContent > div > div .thumb p { margin:0 0 0 120px; font-size:14px; padding:5px 0; color:#666; }
.fixed_point .stepContent > div > div .thumb p font { float:right; color:#000; }
.fixed_point .stepContent > div > div .thumb textarea { width:100%; font-size:13px; background-color:#eee; border:0px; height:50px; padding:5px;  }
.fixed_point .stepContent > div > div h6 { text-align:right;  font-size:18px; padding:0 0 20px; }
.fixed_point .stepContent > div > div h6 font { display:inline-block; vertical-align:middle; margin:0 0 0 15px; color:#f00; }
.gift_list { margin:0 0 25px; }
.gift_list li { position:relative; display:table; width:100%; margin:10px 0; background-color:#fff; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.1); padding:10px; }
.gift_list li > div { display:table-cell; }
.gift_list li > div:first-child { width:20px; text-align:center; vertical-align:middle; }
.gift_list li > div:nth-child(2) { width:80px; text-align:center; vertical-align:middle; }
.gift_list li > div:nth-child(3) { width:calc(100% - 200px); vertical-align:middle; }
.gift_list li > div:last-child { width:100px; text-align:right; vertical-align:middle; }
.gift_list li > div:last-child font { display:none; }
.gift_list li > div:last-child button { width:70px; height:60px; border:0px; background-color:#000; color:#fff; border-radius:10px; }
.gift_list li > div:last-child font { display:inline-block; width:70px; height:60px; line-height:60px; text-align:center; border:0px; background-color:#eee; color:#999; border-radius:10px; }
.gift_list li span { display:block; width:60px; height:60px; border-radius:100%; overflow:hidden; }
.gift_list li img { width:100%; }
.gift_list li p { font-size:14px; padding:5px 0; color:#666; }
.gift_list li p font { float:right; color:#000; }
.gift_result_list { padding:10px; border-radius:10px; background-color:#eee; display:grid; grid-template-columns:repeat(3, 1fr); column-gap:4px; row-gap:4px; margin:0 0 10px; }
.gift_result_list li { position:relative; background-color:#fff; border-radius:5px; padding:10px; text-align:center; }
.gift_result_list li span { display:block; width:50px; height:50px; border-radius:100%; overflow:hidden; margin:0 auto 5px; }
.gift_result_list li img { width:100%; }
.gift_result_list li p { font-size:12px; padding:1px 0; color:#666; }
.gift_result_list li p font { color:#000; }
.btnarea { text-align:center; font-size:14px; }
.btnarea button { display:inline-block; vertical-align:middle; height:40px; border:0px; color:#fff; background:linear-gradient(135deg, #B8956A 0%, #D4BC84 30%, #E8D5A3 50%, #D4BC84 70%, #C9A86C 100%); width:150px; border-radius:5px; }
.btnarea a { display:inline-block; vertical-align:middle; height:40px; line-height:40px; text-align:center; width:150px; border-radius:5px; border:1px solid #666; color:#333; }
.gift_end { text-align:center; position:relative; height:100%; }
.gift_end > div { position:absolute; display:inline-block; top:50%; left:50%; transform:translate(-50%,-50%); }
.gift_end > div img { width:60px; margin:0 0 10px; }
.gift_end > div h5 {  font-size:18px; color:#B8956A; font-weight:500; }


/* 내용관리 */
@media screen and (min-width:1201px) {
[class^="scene-"]{position: relative; width: 100%;}
[class^="scene-"] .inner{position:relative; z-index: 1;}
[class^="scene-"] .cont_wrap{ }
[class^="scene-"] .main_txt{position: relative; visibility:hidden;}
[class^="scene-"] .sub_txt{position: relative; visibility:hidden;}
[class^="scene-"] .mobile_wrap{position: relative; visibility:hidden;}
[class^="scene-"] .vi_wrap{position: relative; visibility:hidden;}
[class^="scene-"] .info_wrap{visibility:hidden;}
[class^="scene-"] [class^="status_wrap-"]{display: inline-block;}	

.scene-1 { padding:200px 0; background:url(../../img/sub/process05/back.png) no-repeat center / cover; }
.scene-1 .cont_wrap { max-width:1200px; margin:auto; position:relative; }
.scene-1 .main_txt { text-align:center; }
.scene-1 .main_txt h6 {  color:#000; font-size:18px; margin:0 0 25px; letter-spacing:1.2px; }
.scene-1 .main_txt h2 { font-size:52px;  color:#fff; margin:0; }
.scene-1 .main_txt p { color:#fff; padding:10px 0; font-size:16px; line-height:21px;  }

.scene-2 { padding:100px 0; position:relative; }
.scene-2 .cont_wrap { max-width:1200px; margin:auto; position:relative; }
.scene-2 .main_txt { text-align:center;  padding:0 20px 50px; position:relative; }
.scene-2 .main_txt h2 { font-size:36px;  color:#1a1a1a; margin:0; }
.scene-2 .sub_txt { text-align:left; }
.scene-2 .sub_txt ul { display:grid; grid-template-columns:repeat(4, 1fr); column-gap:24px; row-gap:24px; }
.scene-2 .sub_txt ul li { position:relative; background-color:#fff; border-radius:10px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.1); }
.scene-2 .sub_txt ul li div:first-child { margin:0 0 20px; }
.scene-2 .sub_txt ul li div:last-child { padding:20px; }
.scene-2 .sub_txt ul li h6 { font-size:21px;  font-weight:500; }
.scene-2 .sub_txt ul li h2 { font-size:21px;  color:#000; margin:0; padding:15px 0; font-weight:500; }
.scene-2 .sub_txt ul li span {  font-size:16px; height:40px; line-height:40px; color:#fff; background-color:#111; border-radius:3px; display:block; text-align:center; cursor:pointer; }
.scene-2 .sub_txt ul li img { width:100%; }
}


@media screen and (max-width:1200px) and (min-width:901px) {
[class^="scene-"]{position: relative; width: 100%;}
[class^="scene-"] .inner{position:relative; z-index: 1;}
[class^="scene-"] .cont_wrap{overflow:hidden;}
[class^="scene-"] .main_txt{position: relative; visibility:hidden;}
[class^="scene-"] .sub_txt{position: relative; visibility:hidden;}
[class^="scene-"] .mobile_wrap{position: relative; visibility:hidden;}
[class^="scene-"] .vi_wrap{position: relative; visibility:hidden;}
[class^="scene-"] .info_wrap{visibility:hidden;}
[class^="scene-"] [class^="status_wrap-"]{display: inline-block;}	

.scene-1 { padding:200px 0; background:url(../../img/sub/process05/back.png) no-repeat center / cover; }
.scene-1 .cont_wrap { max-width:1200px; margin:auto; position:relative; }
.scene-1 .main_txt { text-align:center; }
.scene-1 .main_txt h6 {  color:#000; font-size:18px; margin:0 0 25px; letter-spacing:1.2px; }
.scene-1 .main_txt h2 { font-size:52px;  color:#fff; margin:0; }
.scene-1 .main_txt p { color:#fff; padding:10px 0; font-size:16px; line-height:21px;  }

.scene-2 { padding:100px 20px; position:relative; }
.scene-2 .cont_wrap { margin:auto; position:relative; }
.scene-2 .main_txt { text-align:center;  padding:0 20px 50px; position:relative; }
.scene-2 .main_txt h2 { font-size:36px;  color:#1a1a1a; margin:0; }
.scene-2 .sub_txt { text-align:left; }
.scene-2 .sub_txt ul { display:grid; grid-template-columns:repeat(4, 1fr); column-gap:24px; row-gap:24px; }
.scene-2 .sub_txt ul li { position:relative; background-color:#fff; border-radius:10px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.1); }
.scene-2 .sub_txt ul li div:first-child { margin:0 0 20px; }
.scene-2 .sub_txt ul li div:last-child { padding:20px; }
.scene-2 .sub_txt ul li h6 { font-size:21px;  font-weight:500; }
.scene-2 .sub_txt ul li h2 { font-size:21px;  color:#000; margin:0; padding:15px 0; font-weight:500; }
.scene-2 .sub_txt ul li span {  font-size:16px; height:40px; line-height:40px; color:#fff; background-color:#111; border-radius:3px; display:block; text-align:center; cursor:pointer; }
.scene-2 .sub_txt ul li img { width:100%; }
}


@media screen and (max-width:900px) {
[class^="scene-"]{position: relative; width: 100%;}
[class^="scene-"] .inner{position:relative; z-index: 1;}
[class^="scene-"] .cont_wrap{overflow:hidden;}
[class^="scene-"] .main_txt{position: relative; visibility:hidden;}
[class^="scene-"] .sub_txt{position: relative; visibility:hidden;}
[class^="scene-"] .mobile_wrap{position: relative; visibility:hidden;}
[class^="scene-"] .vi_wrap{position: relative; visibility:hidden;}
[class^="scene-"] .info_wrap{visibility:hidden;}
[class^="scene-"] [class^="status_wrap-"]{display: inline-block;}	

.scene-1 { padding:100px 0; background:url(../../img/sub/process05/back.png) no-repeat center / cover; }
.scene-1 .cont_wrap { max-width:1200px; margin:auto; position:relative; }
.scene-1 .main_txt { text-align:center; }
.scene-1 .main_txt h6 {  color:#000; font-size:18px; margin:0 0 25px; letter-spacing:1.2px; }
.scene-1 .main_txt h2 { font-size:21px;  color:#fff; margin:0; }
.scene-1 .main_txt p { color:#fff; padding:10px 0; font-size:12px; line-height:18px;  }

.scene-2 { padding:50px 20px; position:relative; }
.scene-2 .cont_wrap { margin:auto; position:relative; }
.scene-2 .main_txt { text-align:center;  padding:0 20px 50px; position:relative; }
.scene-2 .main_txt h2 { font-size:24px;  color:#1a1a1a; margin:0; }
.scene-2 .sub_txt { text-align:left; }
.scene-2 .sub_txt ul { display:grid; grid-template-columns:repeat(2, 1fr); column-gap:14px; row-gap:14px; }
.scene-2 .sub_txt ul li { position:relative; background-color:#fff; border-radius:10px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.1); }
.scene-2 .sub_txt ul li div:first-child { margin:0 0 20px; }
.scene-2 .sub_txt ul li div:last-child { padding:20px; }
.scene-2 .sub_txt ul li h6 { font-size:14px;  font-weight:500; }
.scene-2 .sub_txt ul li h2 { font-size:15px;  color:#000; margin:0; padding:15px 0; font-weight:500; }
.scene-2 .sub_txt ul li span {  font-size:16px; height:40px; line-height:40px; color:#fff; background-color:#111; border-radius:3px; display:block; text-align:center; cursor:pointer; }
.scene-2 .sub_txt ul li img { width:100%; }

.fixed_point > div { position:absolute; top:50%; left:50%; width:90%; height:auto; background-color:#fff; border-radius:5px; transform:translate(-50%,-50%); overflow:hidden; }
.fixed_point .stepContent > div > div:first-child { padding:20px; }
.gift_list li p { font-size:12px; width:100%; clear:both; display:block; }
.gift_list li p font { clear:both; display:block; width:100%; }
.btnarea button { width:calc(50% - 4px); font-size:12px; }
.btnarea a { width:calc(50% - 4px); font-size:12px; }
}