@charset "utf-8";

@import url("common.css");

#wrap {position:relative; width:1179px; min-width:960px; margin:0 auto; overflow:hidden;}
.orderState #wrap {height:100vh;}
.bg {position:absolute; top:0; left:0; width:100%; height:100%; background:url(/assets/images/bgImg.jpg); background-size:cover;}
.subBg {position:absolute; top:0; left:0; width:100%; height:100%; background:url(/assets/images/sub_bgImg.jpg);}
.orderState .subBg {background-size:cover;}

#back {position: absolute; z-index: 100; background-color: #000000; display:none; left:0; top:0;}
#loadingBar{position:fixed; left:0; top: 40%; display:none; z-index:9999999;}

.container {position:relative; width:100%; display:inline-block;}
.main .container {height:100%;}

.main_logo {position:absolute; top:42%; left:50%; transform: translate(-50%, -50%);}
.mainTxt {position:absolute; bottom:8%; left:50%; transform: translateX(-50%);}
.maindesc {position:absolute; bottom:25%; left:0; width:100%; text-align:center; font-size:54px; font-family: 'PretendardSB'; color:#fff;}


#header {position:fixed; /*padding-top:177px;*/ display:block; width:1179px; top:0; visibility:visible; z-index:99999;}
#header .header_inner {position:relative; max-width:100%; padding:0 100px;}
#header .header_top {position:relative; width:100%; display:flex; justify-content: space-between; padding:63px 0 45px; line-height:0;}
#header .header_top .h_logo{}
#header .header_top .nav_bar {padding-top:8px;}
#header .header_top .nav_bar > span {display:inline-block; width:35px; height:6px; background:rgba(255, 255, 255, 0.3); margin-right:20px;}
#header .header_top .nav_bar > span.active {width:100px; background:rgba(255, 255, 255, 1);}
#header .header_top .nav_bar > span:last-child {margin-right:0;}
#header .PageNum {padding-bottom:45px;}
#header .sel_wrap {display: flex; align-items: center; padding-bottom:20px;}
#header .sel_wrap .sel_tit {display:inline-block; font-size:48px; font-family: 'PretendardSB'; color:#fff; padding:20px 45px; border:2px solid #fff; border-radius:50px; line-height:1; letter-spacing:-0.025em;}
#header .sel_wrap .sel_kind {margin-left:35px; font-size:38px; font-family: 'PretendardM'; color:#fff;}

.sub_container {position:relative; width:100%; display:inline-block; padding-top:554px;}

.base_wrap {position:relative; }
.base_wrap .base_cont {position: absolute;  left: 0; top: 0; width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 0 0 30px;}
.base_wrap .base_cont::-webkit-scrollbar {display: none;}
.base_wrap .base_list {display: flex; flex-direction: row; align-items: flex-end; gap: 50px; padding: 0; margin: 0; list-style: none; width: max-content;}
.base_wrap .base_list > li {flex: 0 0 auto; width:605px;}
.base_wrap .base_list > li:first-child {padding-left:100px;}
.base_wrap .base_list > li:last-child {padding-right:100px;}
.base_wrap .base_list > li > img {display: block; width: auto; height: auto; transition: transform 0.5s ease;}
.base_wrap .base_list > li.on > img {transform: scale(1.04); z-index: 10;}

.step_wrap {position:absolute; bottom:0; left:0; width:100%; background:#fff; border-top-left-radius:25px; border-top-right-radius:25px; /*padding:0 65px 120px 65px;*/ padding:0 65px;}
.cart_toggle {display:flex; justify-content: space-between; align-items: center; padding:50px 045px;}
.cart_toggle > .tit {font-size:38px; font-family: 'PretendardM'; color:#4d4d4d; letter-spacing:-0.025em;}
.cart_toggle > .toggle_btn > img { transition: transform 0.3s; }
.cart_toggle > .toggle_btn > img.rotated { transform: rotate(180deg); }

.step_wrap > .nextBtn {width:100%; background:#ccccca; font-size:43px; font-family: 'PretendardSB'; color:#808080; text-align:center; line-height:1; padding:44px 0; border-radius:20px; letter-spacing:-0.025em; margin-bottom:45px;}
.step_wrap > .nextBtn.on {color:#fff; background:#0125ff;}

/*.cart_list {border-bottom:2px solid #808080; padding:30px 0;}*/
/*.cart_list > li {display: flex; justify-content: space-between; align-items: center; padding:20px 0;}*/
/*.cart_list > li > .select_tit {font-size:38px; font-family: 'PretendardM'; color:#4d4d4d;}*/
/*.cart_list > li > .select_val {font-size:38px; font-family: 'PretendardM'; color:#121212;}*/

.cart_list {}
.cart_list > span {color:#111; font-family: 'PretendardM'; letter-spacing:-0.025em;}

.syrup_wrap {position:relative; }
.syrup_wrap .syrup_cont {position: absolute;  left:50%; top: 0; transform: translateX(-50%); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding:30px;}
.syrup_wrap .syrup_cont::-webkit-scrollbar {display: none;}
.syrup_wrap .syrup_list {display: flex; flex-direction: column; gap: 50px; padding: 0; margin: 0; list-style: none; width: max-content;}
.syrup_wrap .syrup_list > li {flex: 0 0 auto;}
.syrup_wrap .syrup_list > li > img {display: block; width: auto; height: auto; transition: transform 0.5s ease;}
.syrup_wrap .syrup_list > li.on > img {transform: scale(1.04); z-index: 10;}

.topping_wrap {position:relative; }
.topping_wrap .topping_cont {position: absolute;  left:50%; top: 0; transform: translateX(-50%); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding:30px;}
.topping_wrap .topping_cont::-webkit-scrollbar {display: none;}
.topping_wrap .topping_list {display: flex; flex-direction: column; gap: 50px; padding: 0; margin: 0; list-style: none; width: max-content;}
.topping_wrap .topping_list > li {flex: 0 0 auto;}
.topping_wrap .topping_list > li > img {display: block; width: auto; height: auto; transition: transform 0.5s ease;}
.topping_wrap .topping_list > li.on > img {transform: scale(1.04); z-index: 10;}

.order_container {position:relative; z-index:99999;}

.os_logo {padding:50px 0 80px; text-align:center;}

.order_top {position:relative; display:flex; flex-direction: column; align-items: center; padding:0 0 90px;}
.order_top .order_tit {display:inline-block; font-size:48px; font-family: 'PretendardSB'; color:#fff; padding:20px 45px; border:2px solid #fff; border-radius:50px; line-height:1; letter-spacing:-0.025em;}
.order_top .order_number {font-size:235px; color:#fff; font-family: 'Druk Text Wide TrialB'; line-height:1; letter-spacing:-0.025em; padding:20px 0 65px;}
.order_top .order_desc {font-size:38px; color:#fff; font-family: 'PretendardM'; line-height:1.5; letter-spacing:-0.025em;}

.order_step_wrap {position:relative; margin:0 100px; width: calc(100% - 200px);}
.order_step_txt_cont {position:relative; width:100%; display:flex; flex-direction:row;}
.order_step_txt {position:relative; display:inline-block; font-size:38px; color:#fff; font-family: 'PretendardM'; flex:1; text-align:center; letter-spacing:-0.025em; padding:175px 0 75px;}
.order_step_txt.on::before {content:''; position:absolute; top:0; left:50%; transform: translateX(-50%); width:71px; height:69px; background:url(/assets/images/order_step_icon.png);}

.order_step_bar_cont {position:absolute; width:100%; height: 20px; top:117px; left:0; display: inline-block;}
.order_step_bar {position:absolute; top:0; left:0; height:20px; border-radius:10px;}
.order_step_bar.order_step_bar1 {width:calc(100% / 3); background:#00aaff; z-index:22;}
.order_step_bar.order_step_bar1.on {background:#00aaff;}
.order_step_bar.order_step_bar2 {width:calc(100% / 3 * 2); background:#0078f4; z-index:21;}
.order_step_bar.order_step_bar2.on {background:#00aaff;}
.order_step_bar.order_step_bar3 {width:100%; background:#0156eb; z-index:20;}
.order_step_bar.order_step_bar3.on {background:#00aaff;}

.order_list_wrap {position:relative; display:inline-block; margin:0 100px; width: calc(100% - 200px); background:#fff; border-radius:20px; padding:47px 50px 70px;}
.order_list_tit {font-size:60px; color:#121212; font-family: 'PretendardB'; line-height:1; letter-spacing:-0.025em; padding:0 0 40px; border-bottom:2px solid #b3b3b3;}

.order_list {padding:30px 0;}
.order_list > li {display: flex; justify-content: space-between; align-items: center; padding:20px 0;}
.order_list > li > .order_item_tit {font-size:38px; font-family: 'PretendardM'; color:#4d4d4d;}
.order_list > li > .order_item_val {font-size:38px; font-family: 'PretendardM'; color:#121212;}

.order_banner {position:relative; display:inline-block; padding:40px 0 0; margin:0 100px; width: calc(100% - 200px); text-align:center;}
.order_banner > img {width:100%;}

.o_logo {padding:150px 0; text-align:center;}
.order_form_wrap {position:relative; display:inline-block; margin:40px 100px 0; width: calc(100% - 200px); background:#fff; border-radius:20px; padding:47px 50px 70px;}
.order_form_tit {font-size:60px; color:#121212; font-family: 'PretendardB'; line-height:1; letter-spacing:-0.025em; padding:0 0 40px; border-bottom:2px solid #b3b3b3;}
.order_form > .input {margin:10px 0 ;}
.order_form > .orderBtn {width:100%; background:#0125ff; font-size:43px; font-family: 'PretendardSB'; color:#fff; text-align:center; line-height:1; padding:44px 0; border-radius:20px; letter-spacing:-0.025em; margin:45px 0 0;}

.orderList_wrap {padding:20px;}

.order_alarm_wrap {padding:55px 35px 55px 50px; height:100vh;}
.order_alarm_cont {width:100%; height:100%; display: flex; flex-direction: row;}
.order_alarm_box {position:relative;}
.order_alarm_box.order_alarm_box01 {width:40%;}
.order_alarm_box.order_alarm_box02 {width:60%;}
.order_alarm_box.order_alarm_box01::after {content:''; position:absolute; bottom:0; right:-25px;; width:1px; height:83%; background:#bdbdbd;}
.order_alarm_box > p {font-size:80px; font-family: 'PretendardEB'; color:#0d20c4; text-align:center; line-height:1; padding-bottom:60px; letter-spacing:-0.025em;}
.order_alarm_box.order_alarm_box01 {margin-right:25px;}
.order_alarm_box.order_alarm_box02 {margin-left:50px;}
.orderNumList {display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap:25px;}
.orderNumList > li {width: calc(100% / 2 - 25px); height:142px; border-radius:20px; background:#00aaff; font-size:80px; font-family: 'Druk Text Wide TrialB'; color:#fff; display: flex; align-items: center; justify-content: center;}
.order_alarm_box02 .orderNumList > li {width: calc(100% / 3 - 25px); background:#0d20c4;}