@charset "UTF-8";

@import url('reset.css');

@import url('font.css');

@import url('common.css');

.wrapper {width:3840px; height:2160px; position:relative; overflow:hidden; background:url('../../images/kiosk/01.img/page_bg.png') no-repeat; background-size:100%; background-position:center;}

.btn {text-align: center; border-radius: 20px;}
.btn.brown {background-color: #BD5B00; color:#fff;}
.btn.brown2 {background-color: #BD5B00; color:#fff;}
.btn.gray {background-color: #464646; color:#fff;}


.main {background:url('../../images/kiosk/01.img/main_bg.png') no-repeat; background-size:100%; background-position:center;}
.main h1 {position:absolute; top:120px; left:200px;}
.main .text_box {padding-top:414px; padding-left:200px;}
.main .text_box p {font-size:128px; color:#000; line-height:188px; font-weight:400;}
.main .text_box p strong {font-size:128px; color:#000; line-height:188px; font-weight:700;}
.main .text_box img {margin-top:60px; margin-left:-70px;}
.main a {width:1480px; height:214px; display:flex; justify-content:space-between; align-items:center; position:absolute; top:974px; right:200px; background-image: linear-gradient(135deg, #BD5B00 0%, #C87100 100%);
box-shadow: 0 20px 20px -6px rgba(218,138,0,0.20);border-radius: 20px;font-size: 64px;color: #F9F9F9;text-shadow: 0 5px 8px rgba(0,0,0,0.30);font-weight: 700; padding:0 120px;}
.main a i {width:120px; height:120px; background:url('../../images/kiosk/00.icon/60/start_arrow_60.svg') no-repeat; display:inline-block; background-size:100%;}
.main .text_box2 {margin-top:40px; padding-left:200px;}
.main .text_box2 p {font-size:44px; color:#000; font-weight:400; line-height:80px;}
.main .bottom_area {margin-top:230px; padding-left:200px; display:flex; align-items:center;}
.main .bottom_area img {margin-right:100px;}

.head {padding:120px 120px 0 120px; display:flex; justify-content:space-between; align-items:center;}

.title {font-size:90px; color:#000; line-height:132px; font-weight:700; display:flex; align-items:center;}
.title a {width:128px; height:128px; display:inline-block; text-indent:-9999px; overflow:hidden; background:url("../../images/kiosk/00.icon/60/home.svg") no-repeat; background-size:128px 128px; background-position:center center; margin-right:72px;}

.step {}
.step ul {display:flex; align-items:center;}
.step ul li {font-size:44px; color:#9a9a9a; font-weight:400; display:flex; align-items:center; position:relative; margin-left:120px;}
.step ul li::after {content:""; display:block; width:100px; height:4px; background-color:#c2c2c2; position:absolute; top:38px; left:100%; transform:translateX(10px);}
.step ul li:nth-last-of-type(1)::after {display:none;}
.step ul li i {width:80px; height:80px; display:inline-block; margin-right:20px; background-position:center; background-size:100%;}
.step ul li i.one {background-image:url('../../images/kiosk/00.icon/40/step_ing01_40.svg');}
.step ul li i.two {background-image:url('../../images/kiosk/00.icon/40/step_before02_40.svg');}
.step ul li i.three {background-image:url('../../images/kiosk/00.icon/40/step_before03_40.svg');}
.step ul li.on {color:#222; font-weight:700;}
.step ul li.on i.two {background-image:url('../../images/kiosk/00.icon/40/step_ing02_40.svg');}
.step ul li.on i.three {background-image:url('../../images/kiosk/00.icon/40/step_ing03_40.svg');}
.step ul li.chk i {background-image:url('../../images/kiosk/00.icon/40/step_end_40.svg') !important;}

.page_btn {position:absolute; bottom:120px; right:120px; display:flex;}
.page_btn a {width:440px; height:210px; display:flex; align-items:center; justify-content:center; font-size:60px; font-weight:700;}
.page_btn a.btn.brown2 {position:absolute; bottom:0px; left:-1400px; display:flex;}

.source {position: absolute; bottom: 33px; right: 144px;}
.source p {font-size: 40px;}

.content02 {height:1908px; padding:80px 120px 0; position:relative; display:flex; justify-content:space-between;}
.content02 .left {width:1080px; height:100%; overflow-y:auto; margin-right:150px;}
.content02 .left ul {}
.content02 .left ul li {width:1010px; margin-bottom:30px; background-color: #FFFFFF; border: 2px solid #DDDDDD; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.08); border-radius: 20px; background-image:url('../../images/kiosk/00.icon/40/link_arrow_40.svg'); background-repeat:no-repeat; background-size:80px; background-position:right 60px center; padding-right:164px; display:flex; justify-content:space-between; align-items:center; position:relative;}
.content02 .left ul li:nth-last-of-type(1) {margin-bottom:0;}
.content02 .left ul li a {width:100%; height:100%; padding:50px 20px 50px 60px; display:block; font-size:56px; color:#222; font-weight:700;}
.content02 .left ul li.on {background-color:#BD5B00; background-image:url('../../images/kiosk/00.icon/40/link_arrow_40_white.svg');}
.content02 .left ul li.on a {color:#fff;}
.content02 .left ul li.off {opacity:0.5;}

.content02 .right {width:2340px; height:1390px; position:relative; border-radius:20px;}
.content02 .right .qr_wrap {width:100%; height:100%; display:none; position:relative; top:0; left:0;}
.content02 .right .qr_area {width:100%; height:100%; background-color:#fff; border:2px solid #ddd; box-shadow:0 9px 26px -8px rgba(0,0,0,0.10); border-radius:20px; display:flex; justify-content:flex-start; align-items:center; padding:0 120px 0 240px;}
.content02 .right .qr_area .qr_box {width:720px; height:720px; background-color: #ffffff; flex-shrink:0; display: flex; justify-content: center; align-items: center;}
.content02 .right .qr_area .qr_text {height:720px; display:flex; align-items:center; flex-direction:column; justify-content:center; margin-left:190px;}
.content02 .right .qr_area .qr_text img {width:160px; height:160px;}
.content02 .right .qr_area .qr_text p {font-size:52px; color:#444; font-weight:700; text-align:center;}
.content02 .right .qr_area .qr_text p:nth-of-type(1) {color:#c26400; margin:105px 0 50px;}

.content02 .right .slider_area {padding-top:80px;}
.content02 .right .slider_area .swiper {overflow:hidden;}
.content02 .right .slider_area .swiper .swiper-wrapper {}
.content02 .right .slider_area .swiper .swiper-wrapper .swiper-slide {width:700px; height:1390px;}
.content02 .right .slider_area .swiper .swiper-wrapper .swiper-slide > div {width:100%; height:1208px; border: 2px solid #DDDDDD; box-shadow: 0 9px 26px -8px rgba(0,0,0,0.10); border-radius: 20px; margin-bottom:30px; overflow:hidden; background-color:#fff;}
.content02 .right .slider_area .swiper .swiper-wrapper .swiper-slide > div img {width:100%; height:100%; max-height:1208px;}
.content02 .right .slider_area .swiper .swiper-wrapper .swiper-slide p {width:100%; height:152px; font-size:52px; font-weight:700; color:#222; display:block; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
.content02 .right .slider_area .swiper .swiper-button-next, 
.content02 .right .slider_area .swiper .swiper-button-prev {width:200px; height:200px; background-color:#BD5B00; box-shadow: 0 20px 40px -6px rgba(145,92,0,0.50); border-radius: 50%; background-repeat:no-repeat; background-size:120px; background-position:center;
 background-repeat:no-repeat; background-size:120px; background-position:center; margin-top:-100px;}
.content02 .right .slider_area .swiper .swiper-button-next {background-image:url('../../images/kiosk/00.icon/60/swiper_arrowRight_60.svg'); right:10px;}
.content02 .right .slider_area .swiper .swiper-button-prev {background-image:url('../../images/kiosk/00.icon/60/swiper_arrowLeft_60.svg'); left:10px;}

.content02 .right .slider_area .bg {width:700px; height:100%; position:absolute; top:0; z-index:1;}
.content02 .right .slider_area .bg.prev {left:0; background-image: linear-gradient(90deg, #FFFFFF -20%, rgba(255,255,255,0.00) 100%);}
.content02 .right .slider_area .bg.next {right:0; background-image: linear-gradient(270deg, #FFFFFF -20%, rgba(255,255,255,0.00) 100%);}


.content03 {height:1908px; padding:80px 0 120px 120px; position:relative; display:flex; justify-content:space-between;}

.content03 .left {width:884px; height:1708px;}
.content03 .left .img_area {width:100%; height:1526px; border: 2px solid #DDDDDD; box-shadow: 0 9px 26px -8px rgba(0,0,0,0.10); border-radius: 20px; margin-bottom:30px; overflow:hidden; position:relative;display: flex;justify-content: center;align-items: center;}
.content03 .left .img_area img {width:100%; height:100%; max-height:1526px;}
.content03 .left .img_area .red_box {width:88px; height:88px; display:inline-block; border-radius:10px; background: rgba(189,0,0,0.10); border: 2px solid #BD0000; box-shadow: 0 6px 8px -2px rgba(206,0,0,0.30); position:absolute; cursor:pointer;}
.content03 .left .img_area .blue_box {width:88px; height:88px; display:inline-block; border-radius:10px; background: rgba(0,15,189,0.10); border: 2px solid #000FBD; box-shadow: 0 6px 8px -2px rgba(0,15,189,0.30); position:absolute; cursor:pointer;}
.content03 .left .img_area > p {width:844px; display:flex; align-items:center; background-color: #000000; box-shadow: 0 10px 20px -10px rgba(190,0,0,0.20); border-radius: 20px; color:#fff; font-size:48px; font-weight:500; padding:44px 0 44px 130px; background-image:url('../../images/kiosk/00.icon/40/tooltip_40.svg'); background-repeat:no-repeat; background-size:80px; background-position:left 30px center; position:absolute; bottom:20px; left:50%; margin-left:-422px; justify-content:flex-start;}
.content03 .left .btn_area {width:100%; height:152px; display:flex; align-items:center; justify-content:center; position:relative; padding:0 100px; overflow:hidden;}
.content03 .left .btn_area p {font-size:52px; font-weight:700; color:#222;}
.content03 .left .btn_area div {width:80px; height:80px; display:inline-block; text-indent:-9999px; overflow:hidden; background-position:center; background-repeat:no-repeat; background-size:80px; position:absolute; cursor:pointer;}
.content03 .left .btn_area div.prev_btn {left:0; background-image:url('../../images/kiosk/00.icon/40/link_arrow_left.svg');}
.content03 .left .btn_area div.next_btn {right:0; background-image:url('../../images/kiosk/00.icon/40/link_arrow_right.svg');}

.content03 .center {display:flex; flex-direction:row; position:relative;}
.content03 .center .btn_left{width:100px; height:100px; position:absolute; left:-120px; top:50%; translateY:-50%; background-image:url('../../images/kiosk/00.icon/40/link_arrow_left.svg'); background-repeat: no-repeat; background-size:cover; cursor:pointer;}
.content03 .center .btn_right{width:100px; height:100px; position:absolute; right:-120px; top:50%; translateY:-50%; background-image:url('../../images/kiosk/00.icon/40/link_arrow_right.svg'); background-repeat: no-repeat; background-size:cover; cursor:pointer;}
.content03 .center .col {width:428px; margin-right:70px; border-radius:20px; overflow:hidden; flex-shrink:0; /* border:2px solid #ff0000; */ background-color:#fff;}
.content03 .center .col:nth-last-of-type(1) {margin-right:0;}
.content03 .center .col table {text-align:center;}
.content03 .center .col table thead {background-color:#f2f2f2;}
.content03 .center .col table thead th {font-size:48px; font-weight:500; padding:40px 0; border-bottom:1px solid #ddd;}
.content03 .center .col table tbody {background-color:#fff;}
.content03 .center .col table tbody td {display:flex; justify-content:space-between; align-items:center; padding:15px 40px;}
.content03 .center .col table tbody tr:nth-of-type(1) td {padding-top:30px;}
.content03 .center .col table tbody tr:nth-last-of-type(1) td {padding-bottom:40px;}
.content03 .center .col table tbody td span {width:96px; height:96px; display:flex; align-items:center; justify-content:center; background-color:#fff; border:1px solid #c8c8c8; border-radius:10px; font-size:52px; font-weight:500; overflow:hidden;}
.content03 .center .col table tbody td span:nth-of-type(2) {cursor:pointer;}
.content03 .center .col table tbody td span img {width:100%; height:100%;}

.content03 .right {width:1024px; height:684px; border: 2px solid #DDDDDD; box-shadow: 0 11px 33px -10px rgba(0,0,0,0.10); border-radius: 20px 0 0 20px; padding:60px; overflow:hidden; background-color:#fff;}
.content03 .right p {margin-bottom:40px; width:100%; font-size:56px; font-weight:700; color:#444;}
.content03 .right .gif_area {width:100%; height:100%; max-height:437px; overflow:hidden;}


.content04 {height:1908px; padding:80px 0 120px 120px; position:relative; display:flex; justify-content:space-between;}

.content04 .left {width:1268px; height:1708px;background: #FFFFFF; border: 2px solid #DDDDDD; box-shadow: 0 20px 30px -5px rgba(0,0,0,0.08); border-radius: 20px; position:relative; overflow:hidden;}
.content04 .left > .tit {width:100%; height:160px; display:flex; align-items:center; padding:0 60px; border-bottom:2px solid #ddd; font-size:56px; color:#444; font-weight:500;}
.content04 .left .text_area {padding:60px; font-size:60px; font-weight:500; height:100%; overflow-y:auto; max-height:1544px; position:relative;}
.content04 .left .text_area2 {font-size:60px; font-weight:500; height:100%; overflow-y:hidden; max-height:1544px; position:relative;}
.content04 .left .text_area .f_brown {color:black; font-size:60px; font-weight:500;}
/* 2022-11-21 번역되기전 선택된 색으로 추가*/
.content04 .left .text_area .f_wheat {color:#BD5B00; font-size:60px; font-weight:500;}
.content04 .left .text_area .mini_pop {width:880px; border-radius:20px; overflow:hidden; background-color:#f1f1f1; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.content04 .left .text_area .mini_pop .tit {padding:44px 60px 0 60px; margin-bottom:10px; font-size:48px; color:#222; font-weight:700;}
.content04 .left .text_area .mini_pop p {padding:10px 60px 30px 60px; font-size:40px; color:#333; font-weight:400; max-height:290px; overflow-y:auto;}
.content04 .left .text_area .mini_pop a {width:100%; height:120px; border-radius:0 0 20px 20px; font-size:40px; color:#f9f9f9; font-weight:700; display:flex; align-items:center; justify-content:center;}
.content04 .left > .btn.brown {width:440px; height:210px; display:flex; align-items:center; justify-content:center; font-size:60px; font-weight:700; position:absolute; bottom:0; right:0; border-radius:20px 0 20px 0;}
.content04 .left > .btn.brown2 {width:440px; height:210px; display:flex; align-items:center; justify-content:center; font-size:60px; font-weight:700; position:absolute; bottom:0; left:0; border-radius:20px 0 20px 0;}
.content04 .left .tooltip {width:1228px; display:flex; align-items:center; background-color: rgba(0, 0, 0, 0.8); box-shadow: 0 10px 20px -10px rgba(190,0,0,0.20); border-radius: 20px; color:#fff; font-size:48px; font-weight:500; padding:44px 0 44px 130px; background-image:url('../../images/kiosk/00.icon/40/tooltip_40.svg'); background-repeat:no-repeat; background-size:80px; background-position:left 30px center; position:absolute; bottom:20px; left:50%; margin-left:-614px; justify-content:flex-start; z-index:1;}

.content04 .center {width:1268px; height:1708px;background: #FFFFFF; border: 2px solid #DDDDDD; box-shadow: 0 20px 30px -5px rgba(0,0,0,0.08); border-radius: 20px; position:relative; overflow:hidden;}
.content04 .center .tit {width:100%; height:160px; display:flex; align-items:center; padding:0 60px; border-bottom:2px solid #ddd; font-size:56px; color:#444; font-weight:500;}
.content04 .center .text_area {padding:60px; font-size:60px; font-weight:500; height:100%; overflow-y:auto; max-height:1544px;}

.content04 .right {}
.content04 .right .box {width:1024px; height:684px; border: 2px solid #DDDDDD; box-shadow: 0 11px 33px -10px rgba(0,0,0,0.10); border-radius: 20px 0 0 20px; padding:60px; overflow:hidden; margin-bottom:20px; background-color:#fff;}
.content04 .right .box p {margin-bottom:40px; width:100%; font-size:56px; font-weight:700; color:#444;}
.content04 .right .box .gif_area {width:100%; height:100%; max-height:437px; overflow:hidden;}




.popup_wrap {width:100%; height:100%; position:fixed; top:0; left:0; transform:translate(0, 0); background-color:rgba(0, 0, 0, 0.5); z-index:99;}
.popup {position:relative; top:50%; left:50%; transform:translate(-50%, -50%); background: #FFFFFF; box-shadow: 0 11px 33px -10px rgba(0,0,0,0.10); border-radius: 20px;overflow:hidden;}
.pop_btn {width:100%; display:flex; align-items:center;}
.pop_btn button {width:100%; height:120px; border-radius:0; font-size:40px; color:#f9f9f9; font-weight:700;}

.text_pop {width:554px; min-height:672px;}
.text_pop .text_list {padding:40px 40px 10px 40px;}
.text_pop .text_list ul {width:100%; height:100%; display:flex; flex-wrap:wrap;}
.text_pop .text_list ul li {width:96px; height:96px; margin-right:30px; border-radius:10px; border:1px solid #ddd; overflow:hidden; flex-shrink:0; margin-bottom:30px;}
.text_pop .text_list ul li:nth-of-type(4n) {margin-right:0;}
.text_pop .text_list ul li a {width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:52px; font-weight:500; color:#444;}


.loadingBox {width:1612px; height:920px;}
.loadingBox p {font-size:90px; color:#000; font-weight:700; line-height:140px; text-align:center; width:100%; position:absolute; bottom:140px; left:0;}
.loadingBox .circle {position:absolute; left:50%; top:280px; z-index: 20; transform:translate(-50%, 0%); width:280px; height:280px; border:40px solid transparent; border-top:40px solid transparent; border-radius:50%; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #ff0000e3 -50%, orange 100%); background-origin: border-box; background-clip: content-box, border-box; transition:all .2s;
    animation-name:spinCircle;
    animation-duration:.8s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
@keyframes spinCircle {
    from {
        transform:translate(-50%, 0%) rotate(0);
    }
    to {
        transform:translate(-50%, 0%) rotate(360deg);
    }
}

.loading {background:url('../../images/kiosk/01.img/subpage_bg.png') no-repeat; background-size:100%; background-position:center;}
.loadingBox02 {}
.loadingBox02 p {font-size:90px; color:#000; font-weight:700; line-height:140px; text-align:center; width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); margin-top:200px;}
.loadingBox02 .circle {margin-top:-200px;position:absolute; left:50%; top:50%; z-index: 20; transform:translate(-50%, -50%); width:280px; height:280px; border:40px solid transparent; border-top:40px solid transparent; border-radius:50%; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #ff0000e3 -50%, orange 100%); background-origin: border-box; background-clip: content-box, border-box; transition:all .2s;
    animation-name:spinCircle;
    animation-duration:.8s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
@keyframes spinCircle {
    from {
        transform:translate(-50%, -50%) rotate(0);
    }
    to {
        transform:translate(-50%, -50%) rotate(360deg);
    }
}


.error {padding:140px 245px; width:1612px; text-align:center;}
.error i {width:280px; height:280px; display:inline-block; background:url('../../images/kiosk/00.icon/140/error_popup_140.svg') no-repeat; background-size:100%; background-position:center;}
.error p:nth-of-type(1) {margin-top:80px; font-size:90px; color:#000; font-weight:700;}
.error p:nth-of-type(2) {margin-top:20px; font-size:64px; color:#222; font-weight:500; margin-bottom:160px;}
.error a {background-image: linear-gradient(135deg, #BD5B00 0%, #C87100 100%); box-shadow: 0 20px 20px -6px rgba(218,138,0,0.20); border-radius:20px; width:1120px; height:215px; display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:700;}