@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face {
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 100;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format("opentype")
}

@font-face {
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 300;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format("opentype")
}

@font-face {
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format("opentype")
}

@font-face {
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format("opentype")
}

@font-face {
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format("opentype")
}

@font-face {
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 900;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format("opentype")
}
@keyframes hidePreloader {
    0% {
        width: 100%;
        height: 100%;
    }

    100% {
        width: 0;
        height: 0;
    }
}

body>div.preloader {
    position: fixed;
    background: white;
    width: 100%;
    height: 100%;
    z-index: 2000;
    opacity: 0;
    transition: opacity .5s ease;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

body:not(.loaded)>div.preloader {
    opacity: 1;
}

body:not(.loaded) {
    overflow: hidden;
}
body.loaded>div.preloader {
    // animation: hidePreloader .5s linear .5s forwards;
}
/*
html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
}
*/
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-brand img{
        height: 1.5rem;
    }   
    .navbar-expand-lg{
        padding: 0;
    }  
}
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-brand img{
        height: 1.3rem;
    }  
    .scene02{
        background-size: cover !important;
    }
    .navbar-expand-lg .navbar-collapse-overlay{
        top: 60px;
        right: 0rem;
        left: 0rem;
    }
}
.summary{
    text-overflow:ellipsis;
    white-space:nowrap;
    word-wrap:normal;
    width:100%;
    overflow:hidden;
}

.popWrap{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
    z-index: 1600;
    transition: .3s;
    background: #fff;
    display: flex;    
    align-items: center;
    justify-content: center;
}
.popWrap.coupon{
	z-index: 2001;
}
.popWrap.on{
    visibility: visible;
    opacity: 1;
}
.adminFont{
	font-family: Droid Sans,Noto Sans KR,'Nanum Gothic', sans-serif !important;
}
.payTitle{
	font-family: Droid Sans,Noto Sans KR,'Nanum Gothic', sans-serif;
    font-size: 21px;
    color: #303846;
}

.payline{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-family: Noto Sans KR,'Nanum Gothic', sans-serif;
}
.payline h5{
    width: 90px;
    font-size: 19px;
    color: #2b2b2b;
    font-weight:400;
    line-height:1.2;
    font-family:Noto Sans KR,'Nanum Gothic', sans-serif;
    margin-bottom: -4px !important;
    word-break : keep-all !important;
    overflow: hidden;
}
.payline .charge{
    position: relative;
    width: calc(100% - 90px);
    height: 50px;
}
.payline .charge span{
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    z-index: 10;
    color: #303846;
    font-size: 20px
}
.payline .charge.day input{
    padding-left: 2.8em !important;
}
.payline .charge.day span{
    position: absolute;
    top: 50%;
    left: .6em;
    transform: translateY(-50%);
    z-index: 10
}
.payline .check{
    display: flex;
    flex-direction: column;
    width: calc(100% - 90px);
}
.payline .check .custom-control-label{
    width: 100%;
}
.agree li{
    margin-bottom: .6em;
}
.payline .check .custom-checkbox{
    margin-bottom: .7em;
}
.payline .inputs{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 90px);
    height: 50px;
}
.payline .inputs .three{
    width: calc(33.3% - 7px);
    height: 100%;
    margin-right: 14px;
}
.payline .inputs .three:last-child{
    margin-right: 0;
}
.payline .inputs .four{
    width: calc(25% - 7px);
    height: 100%;
    margin-right: 14px;
}
.payline .inputs .four input{
    padding: 0;
}
.payline .inputs .four:last-child{
    margin-right: 0;
}
.payline .inputs .half{
    width: calc(50% - 7px);
    height: 100%;
    margin-right: 14px;
}
.payline .inputs .half:last-child{
    margin-right: 0;
}
.payline .inputs input,.payline .check input[type=text],.payline .charge input[type=text],.payline .inputs select{
	font-family:Noto Sans KR,'Nanum Gothic', sans-serif;
    position: relative;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    padding: .3em .3em !important;
    outline: none;
    font-size: 19px;
    color: #2b2b2b;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none; 
    appearance: none;
    vertical-align: middle;
}
.payline .inputs input::placeholder{
	color:#939ba2
}
.payline .inputs select option{
    line-height: 50px;
}
.payline .inputs select[disabled]{
    color: #2b22b !important;
    opacity : 1;
}

.payline .inputs input.red{
    color: #D60000;
    font-size: 21px;
    font-weight: 600;
    font-family:Noto Sans KR,'Nanum Gothic', sans-serif;
}
.payline .inputs input.center{
    text-align: center;
}

.payTitle.zoom{
	font-size:24px
}
.payBottom.zoom button{
	font-size:24px;
	font-weight: 500;
}
.payWrap.zoom h5{
	font-size:21px;
	margin-bottom:0 !important;
}
.payWrap.zoom input,.payWrap.zoom select{
	font-size:21px
}
.payWrap.zoom input.red{
	font-size:24px
}
.payWrap.zoom .payInfo{
    font-size: 16px;
}
/* ========================== small device css =========================== */

@media (max-width: 321px) {
	.numbers .numberKeys .numberKey.func.onlyfunc{
		font-size:12px;
	}
	.money{
		height:24%;
	}
	.numbers{
		height:76%;
	}
	.payline .inputs{
	    width: calc(100% - 60px);
	}
	.payline h5, .payWrap.zoom h5{
	    width: 60px;
	    letter-spacing: -1px;
	    font-size: 15px;
	}
	.payline .inputs input, .payline .check input[type=text], .payline .charge input[type=text], .payline .inputs select{
		font-size: 16px;
	}
	.payline .inputs .four input{
		font-size: 16px;
	}
}
@media (max-width: 361px) {
	.numbers .numberKeys .numberKey{
	    font-size: 22px;
	}
	.numbers .numberKeys .numberKey.func.onlyfunc{
		font-size:14px;
	}
	.numbers .numberKeys .numberKey.redBtn{
		color: #fff;
	    background: #e25039;
	}
	.numbers .numberKeys .numberKey.func.red{
	    font-size:23px;
	}
	.numbers .confirm{
	    height: 70px;  
	    font-size: 21px;
	}
	.payline h5{
	    width: 70px;
	}
	.payline h5, .payWrap.zoom h5{
		font-size: 16px;
	    margin-bottom: 0px !important;
	}
	.payline .inputs{
	    width: calc(100% - 70px);
	}
	.payInfo{
	    font-size: 13px;
	}
	.payline .inputs input, .payline .check input[type=text], .payline .charge input[type=text], .payline .inputs select{
		font-size: 17px;
	}
	.payline .inputs .four input{
		font-size: 17px;
	}
}
.joinBottom{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    z-index: 2
}
.joinBottom button{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #303846;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;    
    font-size: 21px;
}

.iconCard{
    display: inline-block;
    width: 24px;
    height: 21px;
    background: url(/opt/Upload/IMG/1@3x.png) 50% no-repeat;
    background-size: contain;
}
.payWrap{
    padding: 1rem 0 100px 0;
    box-sizing: border-box;
}
.payWrap.cash{
	padding: 1rem 0;
}
.payWrap.m60{
    margin-top: -60px;
}
.winLogo{
    width: 121px;
    height: auto;
}
.payBottom{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    z-index: 2
}
.centerPop.coupon .payBottom{
	position: absolute;
}
.payInfo{
    margin-top: 2em;
    position: relative;
    font-size: 14px;
    color: #303846;
    font-family:Droid Sans,Noto Sans KR,'Nanum Gothic', sans-serif;
}
.payBottom button{
	font-family:Droid Sans,Noto Sans KR,'Nanum Gothic', sans-serif;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #22252c;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;    
    font-size: 21px;
}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin: 0;
}
.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar.bg-white .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, .7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light{
    height: 94px;
    box-sizing: border-box;
}
.scene02{
    background: url(/opt/Upload/IMG/sec01_back.jpg) top center no-repeat;
}
.scene04 p,.scene05 p{
    line-height: 1.6;
    color: #666;
}
.about02Bottom .dash{
    position: relative;
    padding: 0;
    margin-top: 1em;
}
.about02Bottom .dash li{
    position: relative;
    display: block;
    list-style: none;
    padding-left: 18px;
    box-sizing: border-box;
    font-size: 1.5em;
    color: #333;
}
.about02Bottom .dash li::after{
    position: absolute;
    content: '-';
    left: 0;
    top: 0;
    font-size: 1em;
    color: #333;
}
.scene07 .card{
    box-shadow: none;
    border: none;
}
.scene07 .card-header .q{
    background: #f9f9f9;
    color: #646c7e;
    position: absolute;
    width: 60px;
    height: 60px;
    font-weight: 600;
    border-radius: 50%;
    top: 50%;
    text-align: center;
    line-height: 60px;
    transform: translateY(-50%);
    left: 0px;
    font-size: 1.4em;
}
.scene07 .card-header.show .q{
    background: #e14d3b;
    color: #fff;
    position: absolute;
    width: 60px;
    height: 60px;
    font-weight: 600;
    border-radius: 50%;
    top: 50%;
    text-align: center;
    line-height: 60px;
    transform: translateY(-50%);
    left: 0px;
    font-size: 1.4em;
}
.scene07 .card-header.show h6{
    color: #e14d3b;
}
.scene08{
    background: url(/opt/Upload/IMG/sec06_img.jpg) top center no-repeat;
}
.btn + .btn{margin: 0;}
.modal-content{
overflow-y: initial !important;
    z-index:2000;
}
.modal-body{
    max-height: 60vh;
    overflow-y: auto;
}

#editPop .modal-dialog{
	margin: 10px auto;
}
#editPop .modal-body{
    max-height: calc(100vh - 190px);
    min-height: calc(100vh - 190px);
}
#editPop .btn + .btn{
	margin-left: 0.7rem;
}
#editPop .modal-footer > * {
	margin: 0;
}
.modal.webapp .modal-body{
	padding: 30px 15px;
}
.modal.webapp .custom-radio{
	padding-left: 0;
	padding-right: 0;
	padding-top: .6em;
	padding-bottom: .6em;
	margin-bottom: 0;
}
.modal.webapp .custom-radio:first-child{
	padding-top: 0;
}
.modal.webapp .custom-radio:last-child{
	padding-bottom: 0;
}
.modal.webapp .custom-radio .custom-control-label{
	font-family:Noto Sans KR,'Nanum Gothic', sans-serif;
	width: 100%;
}
.modal.webapp .custom-radio .custom-control-label:before{
	left: auto;
	right: 0;
	background-color: #fff;
	border: 1px solid #999;
	box-shadow: none;
}
.modal.webapp .custom-radio .custom-control-input:checked ~ .custom-control-label:before{
	color: #007bff;
	border: 2px solid #007bff;
}
.modal.webapp .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    top: 4px;
    left: auto;
    right: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23007bff'/%3E%3C/svg%3E");
}
.moda.webapp .custom-radio .custom-control-label:after{
	left: auto;
	right: 0;
}

.icons{
	display: flex; justify-content: center; align-items: center;
	width: 100%;
    height: 32px;
    margin-bottom:26px;  
}
.icons.mail{
	background: url(/opt/Upload/IMG/mail-open-line.png) 50% no-repeat;
    background-size: 32px auto;
}
.icons.reser{
	background: url(/opt/Upload/IMG/calendar-line.png) 50% no-repeat;
    background-size: 32px auto;
}
.icons.mobile{
	background: url(/opt/Upload/IMG/icon-mobile@3x.png) 50% no-repeat;
    background-size: 32px auto;
}
.icons.untact{
	background: url(/opt/Upload/IMG/icon-untact@3x.png) 50% no-repeat;
    background-size: 32px auto;
}
.icons.link{
	background: url(/opt/Upload/IMG/icon-link@3x.png) 50% no-repeat;
    background-size: 28px auto;
}
.icons.sms{
	background: url(/opt/Upload/IMG/icon-sms@3x.png) 50% no-repeat;
    background-size: 28px auto;
}
.icons.pg{
	background: url(/opt/Upload/IMG/icon-store@3x.png) 50% no-repeat;
    background-size: 28px auto;
}
.icons.user{
	background: url(/opt/Upload/IMG/icon-user@3x.png) 50% no-repeat;
    background-size: auto 30px;
}
.icons.coupon{
	background: url(/opt/Upload/IMG/icon-coupon@3x.png) 50% no-repeat;
    background-size: 28px auto;
}
.icons.van{
	background: url(/opt/Upload/IMG/icon-van@3x.png) 50% no-repeat;
    background-size: 28px auto;
}
.icon_point{
    display: block;
    width: 32px;
    height: 32px;
    background: url(/opt/Upload/IMG/icon_point.png) 50% no-repeat;
    background-size: cover;
    margin: .4em auto;
}

.icon-zero{
    display: block;
    width: 38px;
    height: 38px;
    background: url(/opt/Upload/IMG/icon_zero.png) 50% no-repeat;
    background-size: cover;
    margin: .4em auto;
}
.blog-icon{
    display: block;
    width: 19px;
    height: 19px;
    background: url(/opt/Upload/IMG/blog-icon.png) 50% no-repeat;
    background-size: cover;
    margin-bottom: .2em !important;
    margin-top: .25em !important;
}
.gotop{
    position: fixed;
    right: 1em;
    bottom: 2em;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #eee;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 2000;
    cursor: pointer;
}
.gotop i{ 
    position: relative;
    height: 16px;
}
.gotop i:before{ 
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}
/*언더팝업*/
.underPop{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
    z-index: 2000;
    transition: .3s;
}
.underPop.on{
    visibility: visible;
    opacity: 1;
}
.underPop.on .dark{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    transition: .3s;
}
.underPop .content{
    position: fixed;
    transform: translate(-50%,0);
    bottom: -100%;
    left: 50%;
    width: 100%;
    background: #fff;
    z-index: 1550;
    transition: .3s;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 1em;
}
.underPop.on .content{
    bottom: 0;
    transition: .3s;
}
.underPop.on .content a{
    display: block;
    color: #555;
    padding: .3em 0;
}
.underPop .content content{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 1em 1em 1em;
    box-sizing: border-box;
}
/*센터팝업*/
.centerPop{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
    z-index: 1600;
}
.centerPop.on{
    visibility: visible;
    opacity: 1;
}
.centerPop.on .dark{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.7);
}
.centerPop .content{
    position: fixed;
    transform: translate(-50%,-50%);
    top: -100%;
    left: 50%;
    width: 90%;
    max-width: 520px;
    background: #fff;
    z-index: 1550;
    transition: .3s;
    margin: 0 auto;
    max-height: 90vh;
    border-radius: 1em;
}
.centerPop.coupon{
	z-index: 2001;
}
.centerPop.coupon .content{
	width: 100%;
	height: 90%;
	max-height: 90vh;
    border-radius: 0;
}
.centerPop.on .content{
    top: 50%;
}

.centerPop .content header{
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    z-index: 2000;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    border-radius: 1em 1em 0 0;
    background: #fff;
    margin-top: -3px;
}
.centerPop .content header h2{
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 0.6em;
    text-align: center;
    width: 100%
}
.centerPop .content header .popClose{
    border: none;
    z-index: 2000;
}
.centerPop .content taps ul{
    position: relative;
    display: flex;
    justify-content: space-around;
    padding: 50px 0 0 0;
    margin: 0;
    border-bottom: 1px solid #eee;
    z-index: 1;
}
.centerPop .content taps ul li{
    list-style: none;
    display: table-cell;
    white-space: nowrap;
    color: #444;
    width: 100%;
   height: 42px;
   padding: 0.5em;
   text-align: center;
    box-sizing: border-box;
}
.centerPop .content taps li.active{
   border-bottom: 1px solid #507ee7;
    color: #507ee7;
}
.centerPop .content taps + content{
    padding: 0 1em;
}
.centerPop .content content{
    display: block;
    position: relative;
    width: 100%;
    padding: 50px 1.6em;
    box-sizing: border-box;
    max-height: 450px;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
}
.centerPop#filter .content content{
    max-height: inherit;
}
.centerPop#filter .content content .popTags{
    line-height: 2.2;
}
.centerPop .content content h5{
    font-weight: 400;
}
/*nav pc*/
.nav.pc{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.2em 0 .6em 0;
    margin-bottom: 6em;
    box-sizing: border-box;
    z-index: 1500;
}
.nav.pc.white .logo{
    width: 140px;
    height: 50px;
    background: url(/opt/Upload/IMG/winpay_logo_w.png) 50% no-repeat;
    background-size: contain;
    cursor: pointer;
    margin-bottom: 1em;
}
.nav.pc.white .menu li,.nav.pc.white .menu li i{
    color: #fff;
}
.nav.pc .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav.pc .search{
    position: relative;
    height: 44px;
    width: calc(100% - 0px);
}
.nav.pc .search input{
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 100%;
    height: 100%;
    outline: none;
    padding: .7em 1em;
    box-sizing: border-box;
}
.nav.pc .search.white input{
	color:#fff;
	background:transparent;
	border: 1px solid #fff;
}
.nav.pc .search .btn{
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
}
.nav.pc .search .btn i{
    color: #444;
    font-size:1.6em;
}
.nav.pc .logo{
    width: 140px;
    height: 50px;
    background: url(/opt/Upload/IMG/winpay_title.png) 50% no-repeat;
    background-size: contain;
    cursor: pointer;
    margin-bottom: 1em;
}
.nav.pc .btn_srch{
    display: none
}
.nav.pc.active{
    background: #ff2266;
}
.nav.pc.active .logo{
    width: 140px;
    height: 50px;
    background: url(/opt/Upload/IMG/winpay_logo_w.png) 50% no-repeat;
    background-size: contain;
    cursor: pointer;
    margin-bottom: 1em;
}
.nav.pc.active .srch{
    display: flex;
    align-items: center;
    width: 80%;
    margin-bottom: 1em;
}
.nav.pc.active input{
    border: none;
    background: rgba(0,0,0,0);
    color: #fff;
    outline: none;
    width: 100%;
    font-size: 1.4em;
    padding: 0 1em;
    box-sizing: border-box;
}
.nav.pc.active input::placeholder{
    color: #fff;
}
.nav.pc.active .btn_srch,.nav.active .btn_close{
    display: block;
    border: none;
    background: rgba(0,0,0,0);
    color: #fff;
}
.nav.pc.active .menu{
    display: none;
}
.nav.pc .menu{
    position: relative;
    display: flex;
    align-items: center;
}
.nav.pc .menu li{
    color: #333;
    margin-left: 2em;
    font-size: 1.2em;
    list-style: none;
    cursor: pointer;
}
.nav.pc .menu li ul{
    position: absolute;
    top: 36px;
    right: 0;
    display: none;
    border-radius:5px;
    padding:10px;
    background:#fafafa;
    text-align:left;
}
.nav.pc .menu li ul li{
    list-style: none;
    margin: .1em 0
}
.nav.pc .menu li ul li a{
    display: block;
    font-size: 15px;
    color: #333
}
.nav.pc .recommend_srch{
    display: none;
    position: fixed;
    top: 95px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    transition: .4s;
}
.nav.pc.active .recommend_srch{
    display: block;
    opacity: 1;
    transition: .4s;
}
.nav.pc.active .recommend_srch .srch_mask{
    position: fixed;
    top: 95px;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    transition: 0.4s;
}
.nav.pc.active .scroll_srch{
    position: relative;
    left: 50%;
    width: 890px;
    height: 410px;
    margin-left: -335px;
    padding: 24px 30px;
    background: #fff;
    border-radius: 0 0 4px 4px;
    text-align: left;
    z-index: 100;
}
.nav.pc.active .scroll_srch a{
    color: #ff2266;
    display: block;
    font-size: 1.3em;
    margin-bottom: .6em;
}
#map {
    width: 100%;
    height: 200px;
}
/*nav mobile*/
.nav.mobile{
    display: none;
}
.m_srch{
    display: none;
}
.myarea{
    background: url(/opt/Upload/IMG/area_top.png) top center no-repeat;
    background-size: cover;
}
.partner_top{
    background: url(/opt/Upload/IMG/partner_top.png) top center no-repeat;
    background-size: cover;
}
.news_top{
    background: url(/opt/Upload/IMG/customer_top.png) top center no-repeat;
    background-size: cover;
}
.mywinpay{
    background: url(/opt/Upload/IMG/my_top.png) top center no-repeat;
    background-size: cover;
}
.festival_top{
    background: url(/opt/Upload/IMG/festival_top.png) top center no-repeat;
    background-size: cover;
}
.mymoney{
    background: #ff2266;
    padding: 1.4em;
    border-radius: 1em;
}
.outmoney{
    background: #4692ff;
    padding: 1.4em;
    border-radius: 1em;
}
.mywinpay_taps button{
    border-radius: 0;
    border-bottom: 1px solid #eee;
}
.mywinpay_taps button.active{
    border-radius: 0;
    border-bottom: 1px solid #ff2266;
    color: #ff2266;
}
.accumulate{
    display: block
}
.withdraw{
    display: none
}
.draw{
    display: none
}
.mainTitle h2{
    letter-spacing: .1em;
}
.mainTitle .h1{
    font-size: 1.8em;
    letter-spacing: .2em;
    margin: 0;
}
.newsTaps{
    width: 50%;
}
.newsTaps button{
    background: #fff;
    border: 1px solid #444;
    color: #444;
    box-sizing: border-box;
}
.newsTaps button:first-child{
    border-radius: .375rem 0 0 .375rem;
}
.newsTaps button:last-child{
    border-radius: 0 .375rem .375rem 0 ;
}
.newsTaps button.active{
    background: #444;
    color: #fff;
}
.draw .notice{
    display: flex;
    align-items: center;
    border: 1px solid #eee;
}
.draw .notice p{
    margin: 0 0 .6em 0;
}
.draw .notice .col-md-6{
    margin-top: .6em;
}
.draw .notice_title{
    border-right: 1px solid #eee;
}
.draw .notice_title .notice_caution{
    display: flex;
    flex-direction: column;
    margin: .5em 0;
}
.icon_chicken{
    width: 18px;
    height: 12px;
    background: url(/opt/Upload/IMG/icon_chicken.png) 50% no-repeat;
    background-size: contain;
}
.icon_bath{
    width: 18px;
    height: 12px;
    background: url(/opt/Upload/IMG/icon_bath.png) 50% no-repeat;
    background-size: contain;
}

.list{
    position: relative;
    display: block;
    height: 90px;
    overflow: hidden;
    padding: 1em 0;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
}
.list::after{
    content: '';
    position: absolute;
    right: 1em;
    top: 2em;
    width: 18px;
    height: 12px;
    background: url(/opt/Upload/IMG/iconSelect.png) 50% no-repeat;
    background-size: contain;
}
.list .question h5{
    width: calc(100% - 30px);
}
.list .answer{
    background: #fafafa;
    padding: 2em 1.5em;
    margin-bottom: -1em;
    box-sizing: border-box;
}
.list.active{
    height: auto;
    transition: .3s;
}
.list.active::after{
    content: '';
    position: absolute;
    right: 1em;
    top: 2em;
    width: 18px;
    height: 12px;
    background: url(/opt/Upload/IMG/news_active.png) 50% no-repeat;
    background-size: contain;
}
.list.active .question h5{
    color: #ff2266;
}
.btn-setting i{
    color: #6a414e;
}
.btn-setting{
    background: #fff;
    border-radius: 50%;
    padding: 0em;
    margin-left: 1em; 
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.areaNav .btn{
    padding: .75rem 1rem;
    position: relative;
}
.areaNav .btn.active{
    color: #ff2266;
}
.areaNav .btn::after{
    position: absolute;
    top: 50%;
    right: 0;
    content: '';
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background: #999;
    box-sizing: border-box;
}
.areaNav .btn:last-child::after{
    display: none;
}
.mainSlider .slick-dots,.scene04Slider .slick-dots{
	bottom: 20px;
}
.mainSlider .slick-dots button,.scene04Slider .slick-dots button{
	width: 9px;
	height: 9px;
}
.mainSlider .slick-dots li.slick-active button,.scene04Slider .slick-dots li.slick-active button{
	background-color: #fff !important;
	border: 1px solid #fff;
}
.mainSlider .mainImg .mainSliderTxt{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.mainSlider .mainImg .mainSliderTxt h1{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-weight: 700;
}
.mainSlider .mainImg{
    width: 100%;
    height: 85vh;
}
.mainSlider .mainImg .backImg{
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 0px;
}
.mainSlider .mainImg .backImg img{
	flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.recommendSlider.pc{
    width: 770px;
}
.recommendSlider.mobile{
    display: none
}
.recommendSlider .slick-prev{
    top: -30px;
    left: auto;
    right: 30px;
    background: url(/opt/Upload/IMG/icon_prev.png) 50% no-repeat;
    background-size: 14px auto;
}
.recommendSlider .slick-next{
    top: -30px;
    left: auto;
    right: 0px;
    background: url(/opt/Upload/IMG/icon_next.png) 50% no-repeat;
    background-size: 14px auto;
}
.recommendSlider.pc .recom{
    margin-right: 1.2em;
}
.recommendSlider.pc .recomImg{
    width: 240px;
    height: 140px;
    overflow: hidden;
    border-radius: 1em;
    margin-bottom: .8em;
    border: 1px solid #eee;
}
.recommendSlider .recomImg img{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.recommendSlider .icon{
    width: 32px;
    height: 40px;
    background: url(/opt/Upload/IMG/placeIcon.png) 50% no-repeat;
    background-size: 32px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1em;
}
.recommendSlider .icon i{
    font-size: 1em;
    margin-bottom: .2em;
}
.recommendSlider.pc .placeTxt{
    width: 180px;
}
.recommendSlider.pc .placeTxt h5{
    text-overflow:ellipsis;
    white-space:nowrap;
    word-wrap:normal;
    width:100%;
    overflow:hidden;
}
.recommendSlider.pc .placeTxt p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap:break-word; 
    height: 2.4em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
}
.areaItem .recom{
    margin-bottom: 1.6em;
}
.areaItem .recomImg{
    width: 100%;
    height: 140px;
    overflow: hidden;
    border-radius: 1em;
    border: 1px solid #eee;
    margin-bottom: .8em;
}
.areaItem .recomImg img{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.areaItem .icon{
    width: 32px;
    height: 40px;
    background: url(/opt/Upload/IMG/placeIcon.png) 50% no-repeat;
    background-size: 32px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.areaItem .icon i{
    font-size: 1em;
    margin-bottom: .33em;
}
.areaItem .placeTxt{
    width: calc(100% - 50px);
    margin-left: 1em;
}

.storeTxt .icon{
    width: 32px;
    height: 40px;
    background: url(/opt/Upload/IMG/placeIcon.png) 50% no-repeat;
    background-size: 32px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1em;
}
.storeTxt .icon i{
    font-size: 1em;
    margin-bottom: .2em;
}

.hot{
    background: #fafafa;
    border-radius: 1em;
    width: 100%;
    height: 450px;
    overflow: hidden;
    padding: 1.5em;
    box-sizing: border-box;
}
.hot ul{
    margin: 0;
    padding: 0;
}
.hot li{
    list-style: none;
    margin-bottom: 1em;
    color: #333;
    text-overflow:ellipsis;
    white-space:nowrap;
    word-wrap:normal;
    width:100%;
    overflow:hidden;
}
.hot span{
    background: #ff2266;
    border-radius: 0 .3em .3em .3em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    margin-right: .7em;
    width: 22px;
    height: 22px;
}
.eventSlider.mobile{
    display: none
}
.eventImg{
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
    border: 0 !important;
}
.eventImg img{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.eventImg .eventTxt{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.4em;
    font-weight: 700;
    width: 100%;
    text-align: center;
    color: #fff;
}
.eventSlider.pc .eventImg{
    width: 100%;
    height: 80px;
    background: #ff2266;
    border: 0 !important;
}
.detailSlider .detail{
    height: 520px;
    overflow: hidden;
}
.detailSlider .detail img,.detailSlider .detail video{
    flex: 0 0 auto;
    width: 99.9%;
    height: 100%;
    margin: auto;
    object-fit: cover;
    border: 1px solid #eee;
    box-sizing: border-box;
}
.detailSlider-nav{
    margin-top: 1em;
}
.detailSlider-nav .slick-track{
    display: flex;
    justify-content: space-between;
}
.detailSlider-nav .slick-current{
    border: 2px solid #ff2266;
    box-sizing: border-box;
}
.detailSlider-nav .detail{
/*    margin: 0 .3em;*/
    height: 60px;
    overflow: hidden;
    box-sizing: border-box;
}
.detailSlider-nav .detail img{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
    border: 1px solid #eee;
    box-sizing: border-box;
}
.storeContext{
    height: 258px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
}
.festivalSlider.slick-initialized .slick-slide{
    display: flex !important;
}
.festivalSlider .slick-dots li button{
    width: 26px;
    border-radius: 10px !important;
}
.festivalSlider .slick-dots li.slick-active button{
    background: #ff2266;
}
.festivalSlider .slick-prev{
    top: -30px;
    left: auto;
    right: 45px;
    background: url(/opt/Upload/IMG/icon_prev.png) 50% no-repeat;
    background-size: 14px auto;
}
.festivalSlider .slick-next{
    top: -30px;
    left: auto;
    right: 15px;
    background: url(/opt/Upload/IMG/icon_next.png) 50% no-repeat;
    background-size: 14px auto;
}

.festivalSlider .slick-dots{
    top: 0;
    right: auto;
    left: 814px;
    bottom: auto;
    width: 20%;
    text-align: left
}
.festivalSlider .festival{
    display: flex;
    cursor: pointer
}
.festivalSlider .festivalImg{
    width: 790px;
    height: 240px;
    overflow: hidden;
    border-radius: 1em;
    margin-bottom: .8em;
    margin-right: 1.6em;
}
.festivalSlider .festivalImg img{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.festivalSlider .festivalTxt{
    width: 300px;
}
.festivalSlider .festivalTxt p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap:break-word; 
    line-height: 1.2em;
    max-height: 6em; /
}
.festivalSlider .festivalTxt .small{
    padding: .4em 1em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2em;
    box-sizing: border-box;
}

.festivalItem .festival{
    display: flex;
    cursor: pointer
}
.festivalItem .festivalImg{
    width: 640px;
    height: 180px;
    overflow: hidden;
    border-radius: 1em;
    margin-bottom: .8em;
    margin-right: 1.6em;
}
.festivalItem .festivalImg img{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.festivalItem .festivalTxt .small{
	display: inline-flex;
    padding: .4em 1em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2em;
    box-sizing: border-box;
    width: 180px;
}
.festivalItem .festivalTxt{
    width: 360px;
    height: 180px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.festivalItem .festivalTxt p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap:break-word; 
    line-height: 1.4;
    max-height: 6em; /
}

.newsSlider .newsTxt{
    background: #fafafa;
    border-radius: 1em;
    width: 350px;
    margin-right: 1.6em;
    padding: 1.5em;
    box-sizing: border-box;
}
.newsSlider .slick-prev{
    top: -30px;
    left: auto;
    right: 30px;
    background: url(/opt/Upload/IMG/icon_prev.png) 50% no-repeat;
    background-size: 14px auto;
}
.newsSlider .slick-next{
    top: -30px;
    left: auto;
    right: 0px;
    background: url(/opt/Upload/IMG/icon_next.png) 50% no-repeat;
    background-size: 14px auto;
}


.banner01{
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 1em;
    padding: 2.2em;
    box-sizing: border-box;
    background: url(/opt/Upload/IMG/banner01_back.png) 100% 50% no-repeat #ff2266;
    background-size: cover;
    position: relative;
    color: #fff;
}
.banner01 p{
    width: 75%;
}
.banner01 .icon{
    position: absolute;
    right: 1.6em;
    bottom: 1.2em;
}
.banner02{
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 1em;
    padding: 2.2em;
    box-sizing: border-box;
    background: url(/opt/Upload/IMG/banner02_back.png) 100% 50% no-repeat #4692ff;
    background-size: cover;
    position: relative;
    color: #fff;
    cursor: pointer;
}
.banner03{
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 1em;
    padding: 2.2em;
    box-sizing: border-box;
    background: url(/opt/Upload/IMG/banner03_back.png) 100% 50% no-repeat #4692ff;
    background-size: cover;
    position: relative;
    color: #fff;
    cursor: pointer;
}
.banner02 p,.banner03 p{
    width: 75%;
}
.banner02 .icon,.banner03 .icon{
    position: absolute;
    right: 1.2em;
    bottom: .6em;
}
.banner02 .icon i,.banner03 .icon i{
    font-size: 2.5em;
}
.footer.hide{
	background-color:#242a33;
}
.footer.hide .nav-link{
	color: rgba(255,255,255,.7);
	font-size: 16px;
}
.footer.hide .nav-link::before{
	right:-3px;
}
.footer p{
    line-height: 1.5;
}
.footer.hide p{
    line-height: 1.5;
    color: rgba(255,255,255,.7);
    font-weight:200;
}
.footer .heading{
    font-size: 1.3em;
    color: #777;
    margin: 0;
    margin-bottom: 0.4em;
}
.footer .copyright{
    font-size: .85em;
}

.about{
    height: 100%;
    padding-left : 200px;
    box-sizing: border-box;
}
.about .left-menu{
    position: fixed;
    left: 0;
    top: 0;
    width: 199px;
    height: 100%;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
    background-color: #fff;
    border-right: 1px solid #ddd;
}
.about .left-menu .left-nav{
    display: none
}
.about .left-menu .left-logo{
    width: 100%;
    height: 100px;
    background: url(/opt/Upload/IMG/winpay_title.png) 50% no-repeat;
    background-size: 150px auto;
    cursor: pointer;
    box-sizing: border-box;
    margin-bottom: .6em;
}
.about .left-menu ul{
    display: flex;
    flex-direction: column;
    height: calc(100% - 100px);
    padding: 0;
    box-sizing: border-box;
}
.about .left-menu ul li{
    margin: .6em 0;
    padding-bottom: .6em;
    text-align: center;
    list-style: none;
    color: #333;
    cursor: pointer;
}
.about .left-menu ul li:last-child{
    border-bottom: none;
}
.about .left-menu ul li:hover{
    color: #ff2266;
}
.about .left-menu ul li.active{
    color: #ff2266;
}
.about .about01{
    position: relative;
    background: url(/opt/Upload/IMG/about01.png) 50% no-repeat;
    background-size: cover;
}
.about .about01 .white{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.85);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about .white .about01center{
    z-index: 10;
}
.about .white .about01center h2{
    font-size: 5em;
}
.about .white .about01center h1{
    font-size: 6em;
}
.about .about02{
    background: url(/opt/Upload/IMG/about02.png) 50% no-repeat;
    background-size: cover;
}
.about .about02 .white{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.85);
    z-index: 1;
    box-sizing: border-box;
    padding: 3em 5em 6em 5em;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.about .about02 .white .about02Top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about .about02 .white .about02Bottom h1{
    font-size: 3.5em;
    margin-bottom: 0em;
}
.about .about02 .white .about02Bottom p{
    font-size: 1.5em;
    line-height: 1.7 !important;
    color: #333;
    margin-top: 1em !important;
}
.about .about03{
    background: url(/opt/Upload/IMG/about02.png) 50% no-repeat;
    background-size: cover;
}
.about .about03 .white{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,34,102,.85);
    z-index: 1;
    box-sizing: border-box;
    padding: 5em 5em 6em 5em;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.about .about03 .white .about03Top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about .about03 .white .about03Bottom{
    display: flex;
    flex-direction: column;
}
.about .about03 .white .about03Bottom .system{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about .about03 .white .about03Bottom .system .itemTxt{
    width: 50%;
}
.about .about03 .white .about03Bottom .system .itemTxt h1{
    font-size: 3em;
}
.about .about03 .white .about03Bottom .system .itemTxt p{
    font-size: 1.3em;
}
.about .about03 .white .about03Bottom .system .items{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50%;
}
.about .about03 .white .about03Bottom .system .items ul{
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
}
.about .about03 .white .about03Bottom .system .items ul li{
    text-align: center;
    color: #fff;
    list-style: none;
    width: 25%;
}
.about .about03 .white .about03Bottom .system .items ul li i{
    font-size: 2em;
    color: #fff;
}
.about .about03 .white .about03Bottom .system .items ul li p{
    font-size: 1.5em;
    color: #fff;
}
.about .about04{
    background: url(/opt/Upload/IMG/about03.png) 50% no-repeat;
    background-size: cover;
}
.about .about04 .white{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.85);
    z-index: 1;
    box-sizing: border-box;
    padding: 5em;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.about .about04 .white .about04Top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about .about04 .white .about04Middle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4em;
}
.about .about04 .white .about04Middle .aboutMiddle{
    width: 50%;
}
.about .about04 .white .about04Middle .aboutMiddle h2{
    font-size: 2.5em;
}
.about .about04 .white .about04Middle .aboutMiddle p{
    font-size: 1.4em;
    line-height: 1.5;
    color: #333;
}
.about .about04 .white .about04Bottom p{
    font-size: 1em;
    line-height: 1.3 !important;
    color: #333;
}
.about .serviceTerm,.about .privacy,.about .locationTerm,.about .business{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 5em 3em 3em 3em;
    border-bottom: 1px solid #eee;
}
.url-font{
    font-size: 18px !important;
}
.btn-copy{
    background: #17a2b8;
    color: #fff;
}
.btn-del{
    background: #e25039;
    color: #fff;
}
.btn-url{
    background: #6c757d;
    color: #fff;
}
.card-body .table.borderless th,.card-body .table.borderless td{
    border: none;
    text-align: center;
    font-size: 18px !important;
    vertical-align: middle;
}
.card-body .table.borderless td{
    padding-top: .4rem;
    padding-bottom: .4rem;
}
.useWrap{
    display: flex;
    height: 100vh;
}
.useWrap .back{
    display: flex;
    justify-content: center;
    width: 80px;
    background:#22252c;
}
.useWrap .back a{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2em;
}
.useWrap .useMenu{
    width: calc(50% - 40px);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.useWrap .useMenu h3{
    width: 250px;
}
.useWrap .useMenu h3 img{
    width: 100%;
}
.useWrap .useMenu ul{
    margin: 0;
    padding: 0;
    display: table;
    width: calc(100% - 80px);
}
.useWrap .useMenu ul li{
    float: left;
    width: 25%;
    list-style: none;
    border: 1px solid #ddd;
    box-sizing: border-box;
    height: 80px;
    margin:0 0 -1px -1px;
}
.useWrap .useMenu ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #333;
}
.useWrap .useMenu ul li.active a{
    color: #fff;
    background: #22252c;
}
.useWrap .useSlide{
    position: relative;
    width: calc(50% - 40px);
    height: 100%;
    background: url(../img/winpay/useBack@2x.png) no-repeat #444;
    background-size: cover;
}
.useWrap .useSlide .device{
    position: absolute;
    top: 50%;
    left: 105px;
    transform: translateY(-50%);
    width: 231px;
    height: 497px;
    background: url(../img/winpay/bg_step.png) no-repeat;
    background-size: contain;
    z-index: 1;
}
.useWrap .useSlide .useSlider .slide .box{
    width: 216px;
    height: 415px;
    overflow: hidden;
    margin-top: -10px;
}
.useWrap .useSlide .useSlider .slide .box img{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.useWrap .useSlide .useSlider{
    position: absolute;
    top: 0;
    left: 112px;
}
@-webkit-keyframes pulse {
  0% {
    transform:scale(1, 1);
  }
  50% {
    transform:scale(.5, .5);
  }
  100% {
    transform:scale(1, 1);
  }
}
.useWrap .useSlide .useSlider .slide{
    position: relative;
    opacity: .4;
}
.useWrap .useSlide .useSlider .slide.section{
    margin-bottom: -300px;
}
.useWrap .useSlide .useSlider .slide.section.active{
    opacity: 1;
    z-index: 10;
}
.useWrap .useSlide .useSlider .slide::before{
    font-family: 'neo';
    content: '01.';
    position: absolute;
    left: 260px;
    top: calc(50% - 160px);
    font-size: 80px;
    color: #FF2266;
    font-weight: 300;
}
.useWrap .useSlide .useSlider .slide::after{
    font-family: 'neo';
    position: absolute;
    left: 260px;
    top: calc(50% - 40px);
    font-size: 20px;
    color: #fff;
    font-weight: 300;
    line-height: 1.4;
    width: 200px;
}
.useWrap .useSlide .useSlider .slide .point{
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FF2266;
    opacity: .4;
    animation: pulse 1s ease-in infinite;
    z-index: 1;
}
.useWrap .useSlide .useSlider .slide.slide1-1 .point{
    left: 5px;
    top: calc(50% - 101px);
}
.useWrap .useSlide .useSlider .slide.slide1-2 .point{
    left: 185px;
    top: calc(50% - 207px);
}
.useWrap .useSlide .useSlider .slide.slide1-3 .point{
    left: 80px;
    top: calc(50% - 52px);
}
.useWrap .useSlide .useSlider .slide.slide1-4 .point{
    left: 190px;
    top: calc(50% - 212px);
}
.useWrap .useSlide .useSlider .slide.slide1-5 .point{
    left: 80px;
    top: calc(50% + 91px);
}
.useWrap .useSlide .useSlider .slide.slide1-6 .point{
    left: 92px;
    top: calc(50% + 1px);
}
.useWrap .useSlide .useSlider .slide.slide2-1 .point{
    left: -1px;
    top: calc(50% - 214px);
}
.useWrap .useSlide .useSlider .slide.slide2-2 .point{
    left: 21px;
    top: calc(50% - 187px);
}
.useWrap .useSlide .useSlider .slide.slide2-3 .point{
    left: 172px;
    top: calc(50% + 86px);
    background: rgba(0,0,0,.6) !important;
}
.useWrap .useSlide .useSlider .slide.slide2-4 .point{
    left: 90px;
    top: calc(50% + 140px);
}
.useWrap .useSlide .useSlider .slide.slide2-5 .point{
    left: 167px;
    top: calc(50% - 12px);
}
.useWrap .useSlide .useSlider .slide.slide3-1 .point{
    left: -1px;
    top: calc(50% - 214px);
}
.useWrap .useSlide .useSlider .slide.slide3-2 .point{
    left: 21px;
    top: calc(50% - 187px);
}
.useWrap .useSlide .useSlider .slide.slide3-3 .point{
    left: 174px;
    top: calc(50% + 40px);
    background: rgba(0,0,0,.6) !important;
}
.useWrap .useSlide .useSlider .slide.slide3-4 .point{
    left: 117px;
    top: calc(50% + 4px);
}
.useWrap .useSlide .useSlider .slide.slide3-5 .point{
    left: 94px;
    top: calc(50% + 110px);
}
.useWrap .useSlide .useSlider .slide.slide3-6 .point{
    left: 90px;
    top: calc(50% + 140px);
}
.useWrap .useSlide .useSlider .slide.slide3-7 .point{
    left: 94px;
    top: calc(50% + 115px);
}
.useWrap .useSlide .useSlider .slide.slide4-1 .point{
    left: 188px;
    top: calc(50% - 214px);
}
.useWrap .useSlide .useSlider .slide.slide4-2 .point{
    left: 169px;
    top: calc(50% - 108px);
}
.useWrap .useSlide .useSlider .slide.slide4-3 .point{
    left: 158px;
    top: calc(50% - 27px);
}
.useWrap .useSlide .useSlider .slide.slide4-4 .point{
    left: 90px;
    top: calc(50% + 140px);
}
.useWrap .useSlide .useSlider .slide.slide4-5 .point{
    left: 94px;
    top: calc(50% + 115px);
}
.useWrap .useSlide .useSlider .slide.slide5-1 .point{
    left: -1px;
    top: calc(50% - 214px);
}
.useWrap .useSlide .useSlider .slide.slide5-2 .point{
    left: 21px;
    top: calc(50% - 187px);
}
.useWrap .useSlide .useSlider .slide.slide5-3 .point{
    left: 170px;
    top: calc(50% - 44px);
}
.useWrap .useSlide .useSlider .slide.slide5-4 .point{
    left: 69px;
    top: calc(50% - 4px);
}
.useWrap .useSlide .useSlider .slide.slide5-5 .point{
    left: 61px;
    top: calc(50% + 136px);
    background: rgba(0,0,0,.6) !important;
}
.useWrap .useSlide .useSlider .slide.slide5-6 .point{
    left: 170px;
    top: calc(50% - 10px);
}

.useWrap .useSlide .useSlider .slide.slide6-1 .point{
    left: 92px;
    top: calc(50% - 91px);
}
.useWrap .useSlide .useSlider .slide.slide6-2 .point{
    left: 90px;
    top: calc(50% - 25px);
}
.useWrap .useSlide .useSlider .slide.slide6-3 .point{
    left: 90px;
    top: calc(50% - 100px);
}
.useWrap .useSlide .useSlider .slide.slide6-4 .point{
    left: 92px;
    top: calc(50% + 146px);
}
.useWrap .useSlide .useSlider .slide.slide6-5 .point{
    left: 92px;
    top: calc(50% + 135px);
}
.useWrap .useSlide .useSlider .slide.slide6-6 .point{
    left: 92px;
    top: calc(50% + 33px);
}
.useWrap .useSlide .useSlider .slide.slide6-7 .point{
    left: 92px;
    top: calc(50% + 170px);
}

.useWrap .useSlide .useSlider .slide.slide7-1 .point{
    left: 92px;
    top: calc(50% + 170px);
}
.useWrap .useSlide .useSlider .slide.slide7-2 .point{
    left: 30px;
    top: calc(50% - 107px);
}
.useWrap .useSlide .useSlider .slide.slide7-3 .point{
    left: 81px;
    top: calc(50% + 3px);
}
.useWrap .useSlide .useSlider .slide.slide7-4 .point{
    left: 94px;
    top: calc(50% + 86px);
}

.useWrap .useSlide .useSlider .slide.slide8-1 .point{
    left: 172px;
    top: calc(50% - 32px);
}
.useWrap .useSlide .useSlider .slide.slide8-2 .point{
    left: 75px;
    top: calc(50% + 30px);
}
.useWrap .useSlide .useSlider .slide.slide8-3 .point{
    left: 81px;
    top: calc(50% + 3px);
}
.useWrap .useSlide .useSlider .slide.slide8-4 .point{
    left: 94px;
    top: calc(50% + 86px);
}

.useWrap .useSlide .useSlider .slide small{
    position: absolute;
    color: #aaa;
    width: 200px;
    line-height: 1.2;
}
.useWrap .useSlide .useSlider .slide.slide1-5 small{
    left: 260px;
    top: calc(50% + 28px);
}
.useWrap .useSlide .useSlider .slide.slide2-4 small{
    left: 260px;
    top: calc(50% + 110px);
}
.useWrap .useSlide .useSlider .slide.slide5-6 small{
    left: 260px;
    top: calc(50% + 28px);
}
.useWrap .useSlide .useSlider .slide.slide6-5 small{
    left: 260px;
    top: calc(50% + 80px);
}
.useWrap .useSlide .useSlider .slide.slide1-1::before{
    content: '01.';
}
.useWrap .useSlide .useSlider .slide.slide1-1::after{
    content: '크롬에서 윈페이를 검색하여 윈페이 홈페이지에 접속합니다.';
}
.useWrap .useSlide .useSlider .slide.slide1-2::before{
    content: '02.';
}
.useWrap .useSlide .useSlider .slide.slide1-2::after{
    content: '홈페이지에서 메뉴 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide1-3::before{
    content: '03.';
}
.useWrap .useSlide .useSlider .slide.slide1-3::after{
    content: '메뉴에서 사장님 로그인을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide1-4::before{
    content: '04.';
}
.useWrap .useSlide .useSlider .slide.slide1-4::after{
    content: '로그인 페이지에서 메뉴 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide1-5::before{
    content: '05.';
}
.useWrap .useSlide .useSlider .slide.slide1-5::after{
    content: '바탕화면에 홈 화면에 추가를 생성합니다.';
}
.useWrap .useSlide .useSlider .slide.slide1-6::before{
    content: '06.';
}
.useWrap .useSlide .useSlider .slide.slide1-6::after{
    content: '자동로그인 박스에 체크 후 부여 받은 아이디와 비밀번호를 입력하고 로그인 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide2-1::before{
    content: '01.';
}
.useWrap .useSlide .useSlider .slide.slide2-1::after{
    content: '왼쪽 상단에 메뉴버튼을 클릭합니다. ';
}
.useWrap .useSlide .useSlider .slide.slide2-2::before{
    content: '02.';
}
.useWrap .useSlide .useSlider .slide.slide2-2::after{
    content: '결제화면 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide2-3::before{
    content: '03.';
}
.useWrap .useSlide .useSlider .slide.slide2-3::after{
    content: '수기결제 버튼 활성화하고 결제금액을 입력 후 결제하기를 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide2-4::before{
    content: '04.';
}
.useWrap .useSlide .useSlider .slide.slide2-4::after{
    content: '할부개월과 카드정보, 생년월일, 비밀번호 앞 두 자리를 입력 후 결제하기 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide2-5::before{
    content: '05.';
}
.useWrap .useSlide .useSlider .slide.slide2-5::after{
    content: '결제완료 팝업을 확인 후 닫기를 누릅니다.';
}

.useWrap .useSlide .useSlider .slide.slide3-1::before{
    content: '01.';
}
.useWrap .useSlide .useSlider .slide.slide3-1::after{
    content: '왼쪽 상단에 메뉴버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide3-2::before{
    content: '02.';
}
.useWrap .useSlide .useSlider .slide.slide3-2::after{
    content: '결제화면 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide3-3::before{
    content: '03.';
}
.useWrap .useSlide .useSlider .slide.slide3-3::after{
    content: 'SMS결제 버튼을 활성화하고 결제금액을 입력 후 결제하기를 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide3-4::before{
    content: '04.';
}
.useWrap .useSlide .useSlider .slide.slide3-4::after{
    content: '상품 설명과 휴대전화 번호를 입력 후 전송합니다.';
}
.useWrap .useSlide .useSlider .slide.slide3-5::before{
    content: '05.';
}
.useWrap .useSlide .useSlider .slide.slide3-5::after{
    content: '고객 휴대전화 번호로 SMS결제 링크가 전송됩니다.';
}
.useWrap .useSlide .useSlider .slide.slide3-6::before{
    content: '06.';
}
.useWrap .useSlide .useSlider .slide.slide3-6::after{
    content: '고객이 URL을 클릭하여 카드정보를 입력 후 결제하기 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide3-7::before{
    content: '07.';
}
.useWrap .useSlide .useSlider .slide.slide3-7::after{
    content: '결제가 완료되면 가맹점 휴대번호로 결제완료 문자가 전송됩니다.';
}


.useWrap .useSlide .useSlider .slide.slide4-1::before{
    content: '01.';
}
.useWrap .useSlide .useSlider .slide.slide4-1::after{
    content: '화면 우측 상단에 내정보 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide4-2::before{
    content: '02.';
}
.useWrap .useSlide .useSlider .slide.slide4-2::after{
    content: '내 정보 URL생성에서 결제 정보를 입력 후 생성 창을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide4-3::before{
    content: '03.';
}
.useWrap .useSlide .useSlider .slide.slide4-3::after{
    content: '생성된 URL을 복사하여 카카오톡, 문자, SNS(블로그, 밴드 등)에 게시합니다.';
}
.useWrap .useSlide .useSlider .slide.slide4-4::before{
    content: '04.';
}
.useWrap .useSlide .useSlider .slide.slide4-4::after{
    content: '고객이 URL을 클릭하여 결제자명과 휴대번호, 전달내용, 카드정보를 입력 후 결제하기 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide4-5::before{
    content: '05.';
}
.useWrap .useSlide .useSlider .slide.slide4-5::after{
    content: '결제가 완료되면 가맹점 휴대번호로 결제완료 문자가 전송됩니다.';
}

.useWrap .useSlide .useSlider .slide.slide5-1::before{
    content: '01.';
}
.useWrap .useSlide .useSlider .slide.slide5-1::after{
    content: '왼쪽 상단에 메뉴버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide5-2::before{
    content: '02.';
}
.useWrap .useSlide .useSlider .slide.slide5-2::after{
    content: '결제화면 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide5-3::before{
    content: '03.';
}
.useWrap .useSlide .useSlider .slide.slide5-3::after{
    content: '거래내역을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide5-4::before{
    content: '04.';
}
.useWrap .useSlide .useSlider .slide.slide5-4::after{
    content: '취소내역을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide5-5::before{
    content: '05.';
}
.useWrap .useSlide .useSlider .slide.slide5-5::after{
    content: '팝업 창에서 결제취소 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide5-6::before{
    content: '06.';
}
.useWrap .useSlide .useSlider .slide.slide5-6::after{
    content: '취소완료 팝업을 확인 후 닫기를 누릅니다.';
}

.useWrap .useSlide .useSlider .slide.slide6-1::before{
    content: '01.';
}
.useWrap .useSlide .useSlider .slide.slide6-1::after{
    content: 'Play 스토어에서 윈페이를 검색하여 설치합니다.';
}
.useWrap .useSlide .useSlider .slide.slide6-2::before{
    content: '02.';
}
.useWrap .useSlide .useSlider .slide.slide6-2::after{
    content: '자동로그인 박스에 체크 후 부여 받은 아이디와 비밀번호를 입력하고 로그인 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide6-3::before{
    content: '03.';
}
.useWrap .useSlide .useSlider .slide.slide6-3::after{
    content: '결제 연동 앱을 설치합니다.';
}
.useWrap .useSlide .useSlider .slide.slide6-4::before{
    content: '04.';
}
.useWrap .useSlide .useSlider .slide.slide6-4::after{
    content: '설치된 앱의 권한을 모두 허용합니다.';
}
.useWrap .useSlide .useSlider .slide.slide6-5::before{
    content: '05.';
}
.useWrap .useSlide .useSlider .slide.slide6-5::after{
    content: '리더기의 전원을 켠 후 결제 연동 앱의 카드리더기 등록 버튼을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide6-6::before{
    content: '06.';
}
.useWrap .useSlide .useSlider .slide.slide6-6::after{
    content: 'KSR-05 기기를 클릭하고 비밀번호 123456을 입력 후 확인버튼을 클릭 후 연동앱을 나가기합니다.';
}
.useWrap .useSlide .useSlider .slide.slide6-7::before{
    content: '07.';
}
.useWrap .useSlide .useSlider .slide.slide6-7::after{
    content: '윈페이 앱으로 결제가 가능합니다.';
}

.useWrap .useSlide .useSlider .slide.slide7-1::before{
    content: '01.';
}
.useWrap .useSlide .useSlider .slide.slide7-1::after{
    content: '리더기의 전원을 켠 후 파란색 램프가 깜박이는 것을 확인하고 결제금액을 입력 후 결제하기를 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide7-2::before{
    content: '02.';
}
.useWrap .useSlide .useSlider .slide.slide7-2::after{
    content: '50,000원 이상 결제 시 할부개월을 선택합니다.';
}
.useWrap .useSlide .useSlider .slide.slide7-3::before{
    content: '03.';
}
.useWrap .useSlide .useSlider .slide.slide7-3::after{
    content: '팝업 문구를 확인 후 카드를 IC슬롯에 넣어주세요.';
}
.useWrap .useSlide .useSlider .slide.slide7-4::before{
    content: '04.';
}
.useWrap .useSlide .useSlider .slide.slide7-4::after{
    content: '50,000원 이상 결제 시 전자서명 후 다음을 클릭하면 결제가 완료됩니다.';
}

.useWrap .useSlide .useSlider .slide.slide8-1::before{
    content: '01.';
}
.useWrap .useSlide .useSlider .slide.slide8-1::after{
    content: '리더기의 전원을 켠 후 파란색 램프가 깜박이는 것을 확인하고 거래내역을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide8-2::before{
    content: '02.';
}
.useWrap .useSlide .useSlider .slide.slide8-2::after{
    content: '취소할 내역을 클릭합니다.';
}
.useWrap .useSlide .useSlider .slide.slide8-3::before{
    content: '03.';
}
.useWrap .useSlide .useSlider .slide.slide8-3::after{
    content: '팝업 창에서 결제취소 버튼을 클릭하고 카드를 IC슬롯에 넣어주세요.';
}
.useWrap .useSlide .useSlider .slide.slide8-4::before{
    content: '04.';
}
.useWrap .useSlide .useSlider .slide.slide8-4::after{
    content: '전자서명 후 다음을 클릭하면 취소가 완료됩니다.';
}
.useWrap .useMenu .btn{
    display: none;
}
.useWrap .useMenu .dark{
    display: none;
}

/* scene04Slider */
.scene04Slider .scene04Img .scene04Txt{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 100%;
    z-index: 1000;
}
.scene04Slider .scene04Img .scene04Txt .txt,.scene04Slider .scene04Img .scene04Txt .txt-m{
    position: absolute;
    left: 0;
    top: calc(50% - 240px);
}
.scene04Slider .scene04Img .scene04Txt .txt h1,.scene04Slider .scene04Img .scene04Txt .txt-m h1{
    color: #000;
    font-weight: 700;
}
.scene04Slider .scene04Img .scene04Txt .txt p,.scene04Slider .scene04Img .scene04Txt .txt-m p{
    font-size: 1.3em;
    color: #555;
    font-weight: 400;
}
.scene04Slider .scene04Img.scene04-04 .scene04Txt .txt h1,.scene04Slider .scene04Img.scene04-05 .scene04Txt .txt h1,.scene04Slider .scene04Img.scene04-04 .scene04Txt .txt-m h1,.scene04Slider .scene04Img.scene04-05 .scene04Txt .txt-m h1{
    color: #fff;
    text-shadow: 5px 5px 5px rgba(0,0,0,.1);
}
.scene04Slider .scene04Img.scene04-04 .scene04Txt .txt p,.scene04Slider .scene04Img.scene04-05 .scene04Txt .txt p,.scene04Slider .scene04Img.scene04-04 .scene04Txt .txt-m p,.scene04Slider .scene04Img.scene04-05 .scene04Txt .txt-m p{
    color: #fff;
    text-shadow: 5px 5px 5px rgba(0,0,0,.1);
}
.scene04Slider .scene04Img{
    width: 100%;
    height: 85vh;
}
.scene04Slider .scene04Img .backImg{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.scene04Slider .scene04Img .backImg img{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.scene04Slider .scene04Img .scene04Txt .txt-m{
    display: none;
}

/* quick */
.quick{
    position: fixed;
    top: 70%;
    transform: translateY(-50%);
    right: 10px;
    display: flex;
    flex-direction: column;
    z-index: 1000
}
.quick > a{
    width: 74px;
    height: 74px;
    padding-top: 1.6em;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.quick > a.kakao{
    position: relative;
    padding-top: 2em;
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(0,0,0,.1);
    border-bottom: none;
    color:#000;
    background: #FAE104;
}
.quick > a.kakao::after{
    content: '';
    position: absolute;
    left: 50%;
    top: calc(50% - 14px);
    width: 34px;
    height: 34px;
    transform: translate(-50%,-50%);
    background: url(../../images/ico-kakao.svg) 50% no-repeat;
    background-size: 34px auto;
}
.quick > a.top{
    position: relative;
    border-radius: 0 0 10px 10px;
    border: 1px solid rgba(0,0,0,.1);
    border-top: none;
    background: #fff;
    cursor: pointer;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.06);
}
.quick > a.top::after{
    content: '';
    position: absolute;
    left: 50%;
    top: calc(50% - 14px);
    width: 34px;
    height: 34px;
    transform: translate(-50%,-50%);
    background: url(../../images/ico-top.svg) 50% no-repeat;
    background-size: 14px auto;
}

@media (max-width: 1190px) {
    .useWrap{
        flex-direction: column;
    }
    .useWrap .back {
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }
    .useWrap .back a{
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: 20px;
    }
    .useWrap .useMenu {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .useWrap .useMenu h3 {
        display: none
    }
    .useWrap .useMenu ul{
        width: 100%;
    }
    .useWrap .useMenu ul li {
        width: calc(100% / 8);
        height: 40px;
    }
    .useWrap .useMenu ul li a{
        font-size: .9em;
        line-height: 1.2
    }
    .useWrap .useSlide{
        width: 100%;
        overflow: hidden;
        padding: 0;
        height: calc(100vh - 119px);
    }
    .useWrap .useSlide .device{
        top: calc(50% + 10px);
    }
    .useWrap .useSlide .useSlider .slide .box{
    	margin-top: -110px;
    }
    .useWrap .useSlide .useSlider .slide.section{
        margin-bottom: -300px;
    }
    .con01 .col-lg-9{
        width: 100%;
    }
    .recommendSlider.pc{
        width: 100%;
    }
    .detailSlider-nav .detail{
        margin: 0 .3em;
        height: 70px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .useWrap .useSlide .useSlider .slide.slide1-1 .point{
        left: 6px;
        top: calc(50% - 150px);
    }
    .useWrap .useSlide .useSlider .slide.slide1-2 .point{
        left: 183px;
        top: calc(50% - 258px);
    }
    .useWrap .useSlide .useSlider .slide.slide1-3 .point{
        left: 70px;
        top: calc(50% - 100px);
    }
    .useWrap .useSlide .useSlider .slide.slide1-4 .point{
        left: 190px;
        top: calc(50% - 260px);
    }
    .useWrap .useSlide .useSlider .slide.slide1-5 .point{
        left: 78px;
        top: calc(50% + 42px);
    }
    .useWrap .useSlide .useSlider .slide.slide1-6 .point{
        left: 92px;
        top: calc(50% - 49px);
    }
    .useWrap .useSlide .useSlider .slide.slide2-1 .point{
        left: -1px;
        top: calc(50% - 264px);
    }
    .useWrap .useSlide .useSlider .slide.slide2-2 .point{
        left: 21px;
        top: calc(50% - 227px);
    }
    .useWrap .useSlide .useSlider .slide.slide2-3 .point{
        left: 172px;
        top: calc(50% + 36px);
    }
    .useWrap .useSlide .useSlider .slide.slide2-4 .point{
        left: 90px;
        top: calc(50% + 90px);
    }
    .useWrap .useSlide .useSlider .slide.slide2-5 .point{
        left: 167px;
        top: calc(50% - 62px);
    }
    .useWrap .useSlide .useSlider .slide.slide3-1 .point{
        left: -1px;
        top: calc(50% - 264px);
    }
    .useWrap .useSlide .useSlider .slide.slide3-2 .point{
        left: 21px;
        top: calc(50% - 237px);
    }
    .useWrap .useSlide .useSlider .slide.slide3-3 .point{
        top: calc(50% - 8px);
    }
    .useWrap .useSlide .useSlider .slide.slide3-4 .point{
        left: 117px;
        top: calc(50% - 46px);
    }
    .useWrap .useSlide .useSlider .slide.slide3-5 .point{
        left: 94px;
        top: calc(50% + 60px);
    }
    .useWrap .useSlide .useSlider .slide.slide3-6 .point{
        left: 90px;
        top: calc(50% + 90px);
    }
    .useWrap .useSlide .useSlider .slide.slide3-7 .point{
        left: 94px;
        top: calc(50% + 65px);
    }
    .useWrap .useSlide .useSlider .slide.slide4-1 .point{
        left: 188px;
        top: calc(50% - 264px);
    }
    .useWrap .useSlide .useSlider .slide.slide4-2 .point{
        left: 169px;
        top: calc(50% - 158px);
    }
    .useWrap .useSlide .useSlider .slide.slide4-3 .point{
        left: 158px;
        top: calc(50% - 77px);
    }
    .useWrap .useSlide .useSlider .slide.slide4-4 .point{
        left: 90px;
        top: calc(50% + 90px);
    }
    .useWrap .useSlide .useSlider .slide.slide4-5 .point{
        left: 94px;
        top: calc(50% + 65px);
    }
    .useWrap .useSlide .useSlider .slide.slide5-1 .point{
        left: -1px;
        top: calc(50% - 264px);
    }
    .useWrap .useSlide .useSlider .slide.slide5-2 .point{
        left: 21px;
        top: calc(50% - 237px);
    }
    .useWrap .useSlide .useSlider .slide.slide5-3 .point{
        left: 170px;
        top: calc(50% - 94px);
    }
    .useWrap .useSlide .useSlider .slide.slide5-4 .point{
        left: 69px;
        top: calc(50% - 54px);
    }
    .useWrap .useSlide .useSlider .slide.slide5-5 .point{
        left: 61px;
        top: calc(50% + 86px);
        background: rgba(0,0,0,.6) !important;
    }
    .useWrap .useSlide .useSlider .slide.slide5-6 .point{
        left: 170px;
        top: calc(50% - 60px);
    }

    .useWrap .useSlide .useSlider .slide.slide6-1 .point{
        left: 92px;
        top: calc(50% - 143px);
    }
    .useWrap .useSlide .useSlider .slide.slide6-2 .point{
        left: 90px;
        top: calc(50% - 75px);
    }
    .useWrap .useSlide .useSlider .slide.slide6-3 .point{
        left: 90px;
        top: calc(50% - 150px);
    }
    .useWrap .useSlide .useSlider .slide.slide6-4 .point{
        left: 92px;
        top: calc(50% + 96px);
    }
    .useWrap .useSlide .useSlider .slide.slide6-5 .point{
        left: 92px;
        top: calc(50% + 85px);
    }
    .useWrap .useSlide .useSlider .slide.slide6-6 .point{
        left: 92px;
        top: calc(50% - 16px);
    }
    .useWrap .useSlide .useSlider .slide.slide6-7 .point{
        left: 92px;
        top: calc(50% + 120px);
    }

    .useWrap .useSlide .useSlider .slide.slide7-1 .point{
        left: 92px;
        top: calc(50% + 120px);
    }
    .useWrap .useSlide .useSlider .slide.slide7-2 .point{
        left: 30px;
        top: calc(50% - 157px);
    }
    .useWrap .useSlide .useSlider .slide.slide7-3 .point{
        left: 81px;
        top: calc(50% - 47px);
    }
    .useWrap .useSlide .useSlider .slide.slide7-4 .point{
        left: 94px;
        top: calc(50% + 36px);
    }

    .useWrap .useSlide .useSlider .slide.slide8-1 .point{
        left: 172px;
        top: calc(50% - 82px);
    }
    .useWrap .useSlide .useSlider .slide.slide8-2 .point{
        left: 75px;
        top: calc(50% - 20px);
    }
    .useWrap .useSlide .useSlider .slide.slide8-3 .point{
        left: 81px;
        top: calc(50% - 47px);
    }
    .useWrap .useSlide .useSlider .slide.slide8-4 .point{
        left: 94px;
        top: calc(50% + 36px);
    }
    .scene04Slider .scene04Img .scene04Txt{
        width: 100%;
    }
    .scene04Slider .scene04Img .scene04Txt .txt{
        left: 50px;
        top: calc(50% - 200px);
    }
    .scene04Slider .scene04Img{
        height: 560px;
    }
}
@media (max-width: 1000px) {
    .about{
        height: 100%;
        padding-left : 0px;
        box-sizing: border-box;
    }
    .about .left-menu{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 60px;
        border-right: none;
        -webkit-transition: 0.3s all;
        transition: 0.3s all;
        background-color: #fff;
        z-index: 100;
        overflow: hidden;
    }
    .about .left-menu.active{
        height: auto;
        -webkit-transition: 0.3s all;
        transition: 0.3s all;
    }
    .about .left-menu .left-nav{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0em;
        top: 0px;
        width: 60px;
        height: 60px;
    }
    .about .left-menu .left-logo{
        width: 100%;
        height: 60px;
        background: url(/opt/Upload/IMG/winpay_title.png) 50% no-repeat;
        background-size: 150px auto;
        cursor: pointer;
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
        margin-bottom: 0;
    }
    .about .left-menu ul{
        margin: 0;
    }
    .about .white .about01center h2{
        font-size: 3em;
    }
    .about .white .about01center h1{
        font-size: 4em;
    }
    .about .about02 .white,.about .about03 .white,.about .about04 .white{
        padding: 6em 3em 3em 3em;
    }
    .about .about02 .white .about02Bottom h1{
        font-size: 2em;
        margin-bottom: 0em;
    }
    .about .about02 .white .about02Bottom p{
        font-size: 1em;
        line-height: 1.3 !important;
        color: #333;
        margin-top: .5em !important;
    }
    .about .about03 .white .about03Bottom .system{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .about .about03 .white .about03Bottom .system .itemTxt{
        width: 100%;
    }
    .about .about03 .white .about03Bottom .system .itemTxt h1{
        font-size: 2em;
    }
    .about .about03 .white .about03Bottom .system .itemTxt p{
        font-size: .9em;
    }
    .about .about03 .white .about03Bottom .system .items{
        width: 100%;
        margin-top: 1em;
    }
    .about .about03 .white .about03Bottom .system .items ul li p{
        font-size: 1em;
        color: #fff;
    }
    .about .about04 .white .about04Middle{
        flex-direction: column;
    }
    .about .about04 .white .about04Middle .aboutMiddle{
        width: 100%;
        margin-bottom: 1em;
    }
    .about .about04 .white .about04Middle .aboutMiddle h2{
        font-size: 1.6em;
    }
    .about .about04 .white .about04Middle .aboutMiddle p{
        font-size: 1em;
        line-height: 1.3;
        color: #333;
    }
    .about .about04 .white .about04Bottom p{
        font-size: 1em;
        line-height: 1.3 !important;
        color: #333;
    }
    .recommendSlider.pc{
        width: 100%;
        margin-bottom: 2em;
    }
    .nav.pc.active .scroll_srch{
        position: relative;
        left: 50%;
        width: 100%;
        height: 352px;
        margin-left: auto;
        transform: translateX(-50%);
        padding: 24px 30px;
        background: #fff;
        border-radius: 0 0 4px 4px;
        text-align: left;
        z-index: 100;
    }
    .mainSlider .mainImg{
        width: 100%;
        height: 460px;
    }
    .mainSlider .mainImg .mainSliderTxt{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 460px;
        z-index: 1000;
    }
    .mainSlider .mainImg .mainSliderTxt h1{
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-weight: 700;
        width: 100%;
        text-align: center;
    }
    .hot{
        height: 260px;
    }
    .festivalItem .festivalTxt{
        width: 50%;
    }

    .festivalSlider .festivalImg{
        width: 500px;
        height: 240px;
        overflow: hidden;
        border-radius: 1em;
        margin-bottom: .8em;
        margin-right: 1.6em;
    }
    .festivalSlider .slick-dots{
        right: auto;
        left: 520px;
    }
    .detailSlider-nav .detail{
        margin: 0 .3em;
        height: 80px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .draw .notice .col-md-6{
        margin-top: 0em;
    }
    .draw .notice_title .notice_caution{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: .6em 0;
        border-bottom: 1px solid #eee;
    }
    .draw .notice_title .notice_caution i{
        margin-right: .5em;
    }
    .newsTaps{
        width: 75%;
    }
    .festivalItem .festivalImg{
        width: 50% ;
        overflow: hidden;
        border-radius: 1em;
        margin-bottom: .8em;
        margin-right: 1.6em;
    }
	.scene04Slider .scene04Img{
        height: 460px;
    }
    .scene04Slider .scene04Img .scene04Txt .txt,.scene04Slider .scene04Img .scene04Txt .txt-m{
        left: 50px;
        top: calc(50% - 100px);
    }
    .scene04Slider .scene04Img .scene04Txt .txt p,.scene04Slider .scene04Img .scene04Txt .txt-m p{
        font-size: 1.1em;
    }
}
@media (max-width: 780px) {
	/* quick */
    .quick{
        bottom: 40px;
        right: 0;
        top: auto;
        transform: none;
    }
    .quick > a{
        width: 54px;
        height: 54px;
        text-indent: -99999px;
    }
    .quick > a.kakao{
        border-radius: 10px 0px 0 0;
    }
    .quick > a.kakao::after{
        top: 50%;
    }
    .quick > a.top{
        border-radius: 0 0 0px 10px;
    }
    .quick > a.top::after{
        top: 50%;
    }
    
    .newsList{
    	padding-top: 0 !important;
    	padding-bottom: 2rem !important;
    }
    
	.footer p{
	    font-size: .8em;
	}
	.footer.hide p{
	    font-size: 14px;
	    text-align:center;
	}	
	.footer .heading{
	    margin-top: .4em;
	}
    .scene04Slider .scene04Img{
        height: 360px;
    }
    .scene04Slider .scene04Img .scene04Txt .txt-m{
        display: block;
        left: 20px;
        top: calc(50% - 20px);
        transform: translateY(-50%);
    }
    .scene04Slider .scene04Img .scene04Txt .txt{
        display: none
    }
	.centerPop.coupon .content{
		width: 100%;
		height: 100%;
		max-height: 100vh;
	    border-radius: 0;
	}
	.mainSlider .mainImg .backImg img{
	    flex: 0 0 auto;
	    width: 100%;
	    height: 100%;
	    margin: auto;
	    object-fit: cover;
	}
    .useWrap{
        height: 100% !important;
    }
    .useWrap .back{
        order: 2;
    }
    .useWrap .useMenu{
        height: 100% !important;
        position: fixed;
        left: -100%;
        top: 0;
        z-index: 1;
    }
    .useWrap .useMenu.active{
        left: 0;
    }
    .useWrap .useMenu.active .btn.btnClose{
        left: 57% !important;
        transition: .3s;
    }
    .useWrap .useMenu .btn.btnClose{
        position: absolute;
        top: 5px;
        left: 0% !important;
        z-index: 100;
        transition: .3s;
    }
    .useWrap .useMenu .btn{
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        padding: .2em .7em;
    }
    .useWrap .useMenu .btn.out{
        display: block;
        position: fixed;
        right: 0;
        left: auto;
        top: 0;
        padding: .2em .7em;
    }
    .useWrap .useMenu ul{
        position: absolute;
        top: 0;
        left: -70%;
        width: 70% !important;
        height: 100vh !important;
        padding: 0;
        background: #fff;
        z-index: 10;
        visibility: hidden;
        opacity: 0;
        transition: .3s;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    .useWrap .useMenu .dark{
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100%;
        background: rgba(0,0,0,.7);
        z-index: 9;
        visibility: hidden;
        opacity: 0;
        transition: .3s;
    }
    .useWrap .useMenu.active ul{
        visibility: visible;
        opacity: 1;
        left: 0%;
        transition: .3s;
    }
    .useWrap .useMenu.active ul::after{
    	content:'고객센터 : 1666-5360';
    	position:absolute;
    	left:1.4rem;
    	bottom:1.4rem;
    	font-size:1rem;
    	color:#333;
    	box-sizing: border-box;
    }
    .useWrap .useMenu.active .dark{
        display: block;
        visibility: visible;
        opacity: 1;
        transition: .3s;
    }
    .useWrap .useSlide{
        order: 3;
    }
    .useWrap .back a{
        width: 30px;
        height: 30px;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        margin-left: 10px !important;
        visibility: hidden;
    }
    .useWrap .useMenu ul li {
        width: 100% !important;
        height: 60px !important;
        border: none;
        border-bottom: 1px solid #ddd
    }
    .useWrap .useMenu ul li:last-child{
        border-bottom: none;
    }
    .useWrap .useMenu ul li a{
        font-size: 1em !important;
        line-height: 1.2 !important;
    }
    .useWrap .useSlide .useSlider{
        left: 0 !important;
    }
    .useWrap .useSlide{
        height: 100% !important;
    }
    .useWrap .useSlide .fp-tableCell .box::after{
        content: '';
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        top: -21px;
        width: 370px;
        height: 423px;
        background: url(../img/winpay/bg_step.png) 50% 0 no-repeat;
        background-size: contain;
        z-index: 1;
    }
    .useWrap .useSlide .useSlider .slide .box{
        position: absolute;
        margin-top: 0px !important;
        width: 184px;
        height: 363px;
        overflow: inherit;
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        top: calc(50% - 80px);
        transform: translate(-50%, -50%);
        padding-top: 9px;
    }
    .useWrap .useSlide .fp-tableCell .pointWrap{
        position: absolute;
        left: 50%;
        top: calc(50% - 69px) !important;
        width: 49.5% !important;
        height: 57.5% !important;
        transform: translate(-50%, -50%);
        z-index: 10;
    }
    .useWrap .useSlide .useSlider .slide.section{
        margin-bottom: 0 !important;
    }
    .useWrap .useSlide .device{
        display: none
    }
    .useWrap .useSlide .useSlider .slide::before{
        left: 20px;
        bottom: 130px;
        top: auto;
        font-size: 40px;
    }
    .useWrap .useSlide .useSlider .slide.slide6-4::before,.useWrap .useSlide .useSlider .slide.slide7-4::before{
        bottom: 134px;
    }
    .useWrap .useSlide .useSlider .slide::after{
        left: 50%;
        bottom: 80px;
        top: auto;
        width: 90%;
        min-height: 60px;
        letter-spacing: -1px;
        transform: translateX(-50%);
        box-sizing: border-box;
        z-index: 1000;
    }
    .useWrap .useSlide .useSlider .slide .fp-tableCell::after{
        position: absolute;
        top: 5px;
        left: 50%;
        width: 100%;
        text-align: center;
        transform: translateX(-50%);
        color: #fff;
        font-size: 1.2em;
        font-weight: bold;
        z-index: 3;
    }
    .useWrap .useSlide .useSlider .slide.slide1-1 .fp-tableCell::after{content: '윈페이 시작하기';}
    .useWrap .useSlide .useSlider .slide.slide1-2 .fp-tableCell::after{content: '윈페이 시작하기';}
    .useWrap .useSlide .useSlider .slide.slide1-3 .fp-tableCell::after{content: '윈페이 시작하기';}
    .useWrap .useSlide .useSlider .slide.slide1-4 .fp-tableCell::after{content: '윈페이 시작하기';}
    .useWrap .useSlide .useSlider .slide.slide1-5 .fp-tableCell::after{content: '윈페이 시작하기';}
    .useWrap .useSlide .useSlider .slide.slide1-6 .fp-tableCell::after{content: '윈페이 시작하기';}
    
    .useWrap .useSlide .useSlider .slide.slide2-1 .fp-tableCell::after{content: '수기결제';}
    .useWrap .useSlide .useSlider .slide.slide2-2 .fp-tableCell::after{content: '수기결제';}
    .useWrap .useSlide .useSlider .slide.slide2-3 .fp-tableCell::after{content: '수기결제';}
    .useWrap .useSlide .useSlider .slide.slide2-4 .fp-tableCell::after{content: '수기결제';}
    .useWrap .useSlide .useSlider .slide.slide2-5 .fp-tableCell::after{content: '수기결제';}
    
    .useWrap .useSlide .useSlider .slide.slide3-1 .fp-tableCell::after{content: 'SMS결제';}
    .useWrap .useSlide .useSlider .slide.slide3-2 .fp-tableCell::after{content: 'SMS결제';}
    .useWrap .useSlide .useSlider .slide.slide3-3 .fp-tableCell::after{content: 'SMS결제';}
    .useWrap .useSlide .useSlider .slide.slide3-4 .fp-tableCell::after{content: 'SMS결제';}
    .useWrap .useSlide .useSlider .slide.slide3-5 .fp-tableCell::after{content: 'SMS결제';}
    .useWrap .useSlide .useSlider .slide.slide3-6 .fp-tableCell::after{content: 'SMS결제';}
    .useWrap .useSlide .useSlider .slide.slide3-7 .fp-tableCell::after{content: 'SMS결제';}

    .useWrap .useSlide .useSlider .slide.slide4-1 .fp-tableCell::after{content: 'URL결제';}
    .useWrap .useSlide .useSlider .slide.slide4-2 .fp-tableCell::after{content: 'URL결제';}
    .useWrap .useSlide .useSlider .slide.slide4-3 .fp-tableCell::after{content: 'URL결제';}
    .useWrap .useSlide .useSlider .slide.slide4-4 .fp-tableCell::after{content: 'URL결제';}
    .useWrap .useSlide .useSlider .slide.slide4-5 .fp-tableCell::after{content: 'URL결제';}
    
    .useWrap .useSlide .useSlider .slide.slide5-1 .fp-tableCell::after{content: '결제취소';}
    .useWrap .useSlide .useSlider .slide.slide5-2 .fp-tableCell::after{content: '결제취소';}
    .useWrap .useSlide .useSlider .slide.slide5-3 .fp-tableCell::after{content: '결제취소';}
    .useWrap .useSlide .useSlider .slide.slide5-4 .fp-tableCell::after{content: '결제취소';}
    .useWrap .useSlide .useSlider .slide.slide5-5 .fp-tableCell::after{content: '결제취소';}
    .useWrap .useSlide .useSlider .slide.slide5-6 .fp-tableCell::after{content: '결제취소';}
    
    .useWrap .useSlide .useSlider .slide.slide6-1 .fp-tableCell::after{content: '앱 설치하기';}
    .useWrap .useSlide .useSlider .slide.slide6-2 .fp-tableCell::after{content: '앱 설치하기';}
    .useWrap .useSlide .useSlider .slide.slide6-3 .fp-tableCell::after{content: '앱 설치하기';}
    .useWrap .useSlide .useSlider .slide.slide6-4 .fp-tableCell::after{content: '앱 설치하기';}
    .useWrap .useSlide .useSlider .slide.slide6-5 .fp-tableCell::after{content: '앱 설치하기';}
    .useWrap .useSlide .useSlider .slide.slide6-6 .fp-tableCell::after{content: '앱 설치하기';}
    .useWrap .useSlide .useSlider .slide.slide6-7 .fp-tableCell::after{content: '앱 설치하기';}
    
    .useWrap .useSlide .useSlider .slide.slide7-1 .fp-tableCell::after{content: '결제하기(리더기)';}
    .useWrap .useSlide .useSlider .slide.slide7-2 .fp-tableCell::after{content: '결제하기(리더기)';}
    .useWrap .useSlide .useSlider .slide.slide7-3 .fp-tableCell::after{content: '결제하기(리더기)';}
    .useWrap .useSlide .useSlider .slide.slide7-4 .fp-tableCell::after{content: '결제하기(리더기)';}
    
    .useWrap .useSlide .useSlider .slide.slide8-1 .fp-tableCell::after{content: '결제취소(리더기)';}
    .useWrap .useSlide .useSlider .slide.slide8-2 .fp-tableCell::after{content: '결제취소(리더기)';}
    .useWrap .useSlide .useSlider .slide.slide8-3 .fp-tableCell::after{content: '결제취소(리더기)';}
    .useWrap .useSlide .useSlider .slide.slide8-4 .fp-tableCell::after{content: '결제취소(리더기)';}
    .useWrap .useSlide .useSlider .slide.slide2-4::before{
        bottom: 170px;
    }
    .useWrap .useSlide .useSlider .slide.slide2-4::after{
        bottom: 100px;
    }
    .useWrap .useSlide .useSlider .slide.slide1-1 .point{
        left: calc(50% - 89px) !important;
        top: 103px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide1-2 .point{
        left: calc(50% + 62px) !important;
        top: 10px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide1-3 .point{
        left: calc(50% - 32px) !important;
        top: 143px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide1-4 .point{
        left: calc(50% + 67px) !important;
        top: 8px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide1-5 .point{
        left: calc(50% - 30px) !important;
        top: 265px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide1-6 .point{
        left: calc(50% - 14px) !important;
        top: 191px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide2-1 .point{
        left: calc(50% - 95px) !important;
        top: 6px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide2-2 .point{
        left: calc(50% - 75px) !important;
        top: 30px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide2-3 .point{
        left: calc(50% + 51px) !important;
        top: 264px !important;   
    }
    .useWrap .useSlide .useSlider .slide.slide2-4 .point{
        left: calc(50% - 15px) !important;
        top: 309px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide2-5 .point{
        left: calc(50% + 50px) !important;
        top: 178px;
    }

    .useWrap .useSlide .useSlider .slide.slide3-1 .point{
        left: calc(50% - 95px) !important;
        top: 6px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide3-2 .point{
        left: calc(50% - 75px) !important;
        top: 30px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide3-3 .point{
        left: calc(50% + 53px) !important;
        top: 225px !important;   
    }
    .useWrap .useSlide .useSlider .slide.slide3-4 .point{
        left: calc(50% + 5px) !important;
        top: 192px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide3-5 .point{
        left: calc(50% + 5px) !important;
        top: 282px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide3-6 .point{
        left: calc(50% - 15px) !important;
        top: 309px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide3-7 .point{
        left: calc(50% - 15px) !important;
        top: 292px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide4-1 .point{
        left: calc(50% + 68px) !important;
        top: 5px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide4-2 .point{
        left: calc(50% + 50px) !important;
        top: 95px !important;;
    }
    .useWrap .useSlide .useSlider .slide.slide4-3 .point{
        left: calc(50% + 43px) !important;
        top: 166px !important;;
    }
    .useWrap .useSlide .useSlider .slide.slide4-4 .point{
        left: calc(50% - 15px) !important;
        top: 309px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide4-5 .point{
        left: calc(50% + 9px) !important;
        top: 291px !important;;
    }
    .useWrap .useSlide .useSlider .slide.slide5-1 .point{
        left: calc(50% - 95px) !important;
        top: 6px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide5-2 .point{
        left: calc(50% - 75px) !important;
        top: 30px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide5-3 .point{
        left: calc(50% + 48px) !important;
        top: 151px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide5-4 .point{
        left: calc(50% - 30px) !important;
        top: 186px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide5-5 .point{
        left: calc(50% - 40px) !important;
        top: 307px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide5-6 .point{
        left: calc(50% + 48px) !important;
        top: 180px !important;
    }
    .useWrap .useSlide .useSlider .slide.slide6-1 .point{
        left: calc(50% - 15px) !important;
        top: 109px !important;;
    }
    .useWrap .useSlide .useSlider .slide.slide6-2 .point{
        left: calc(50% - 14px) !important;
        top: 166px !important;;
    }
    .useWrap .useSlide .useSlider .slide.slide6-3 .point{
        left: calc(50% - 15px) !important;
        top: 102px !important;;
    }
    .useWrap .useSlide .useSlider .slide.slide6-4 .point{
        left: calc(50% - 15px) !important;
        top: 316px !important; 
    }
    .useWrap .useSlide .useSlider .slide.slide6-5 .point{
        left: calc(50% - 15px) !important;
        top: 309px;
    }
    .useWrap .useSlide .useSlider .slide.slide6-6 .point{
        left: calc(50% - 15px) !important;
        top: 218px;
    }
    .useWrap .useSlide .useSlider .slide.slide6-7 .point{
        left: calc(50% - 15px) !important;
        top: 334px;
    }
    .useWrap .useSlide .useSlider .slide.slide7-1 .point{
        left: calc(50% - 15px) !important;
        top: 334px;
    }
    .useWrap .useSlide .useSlider .slide.slide7-2 .point{
        left: calc(50% - 61px) !important;
        top: 96px !important;;
    }
    .useWrap .useSlide .useSlider .slide.slide7-3 .point{
        left: calc(50% - 30px) !important;
        top: 193px !important;;
    }
    .useWrap .useSlide .useSlider .slide.slide7-4 .point{
        left: calc(50% - 15px) !important;
        top: 262px !important; 
    }
    
    .useWrap .useSlide .useSlider .slide.slide8-1 .point{
        left: calc(50% + 53px) !important;
        top: 164px;
    }
    .useWrap .useSlide .useSlider .slide.slide8-2 .point{
        left: calc(50% - 30px) !important;
        top: 215px !important;;
    }
    .useWrap .useSlide .useSlider .slide.slide8-3 .point{
        left: calc(50% - 30px) !important;
        top: 193px !important;;
    }
    .useWrap .useSlide .useSlider .slide.slide8-4 .point{
        left: calc(50% - 15px) !important;
        top: 262px !important; 
    }
    .useWrap .useSlide .useSlider .slide.slide1-5 small{
        left: 20px !important;
        top: auto !important;
        bottom: 70px;
        line-height: 1.2;
        width: 93% !important;
    }
    .useWrap .useSlide .useSlider .slide.slide2-4 small{
        left: 20px !important;
        top: auto !important;
        bottom: 60px;
        width: 93% !important;
    }
    .useWrap .useSlide .useSlider .slide.slide5-6 small{
        left: 20px !important;
        top: auto !important;
        bottom: 60px;
        width: 93% !important;
    }
    .useWrap .useSlide .useSlider .slide.slide6-5 small{
        left: 20px !important;
        top: auto !important;
        bottom: 60px;
        width: 93% !important;
    }
    .storeContext{
        height: auto;
        max-height: max-content;
        overflow-x: hidden;
        overflow-y: inherit;
    }
    .about02Bottom .dash li{
        position: relative;
        display: block;
        list-style: none;
        padding-left: 18px;
        box-sizing: border-box;
        font-size: 1em;
        line-height: 1.5;
        color: #333;
        margin-bottom: .3em;
    }
    .about02Bottom .dash li::after{
        position: absolute;
        content: '-';
        left: 0;
        top: 0;
        font-size: 1em;
        color: #333;
    }
    .icon-zero{
        display: block;
        width: 30px;
        height: 30px;
        background: url(/opt/Upload/IMG/icon_zero.png) 50% no-repeat;
        background-size: cover;
        margin: .4em auto;
    }

    .gotop{
        bottom: 5em;
    }
    .container{
        padding-left: 20px;
        padding-right: 20px;
    }
    .mainTitle{
        display: none;
    }
    .m_srch{
        display: block;
    }
    .m_srch .srch_bar{
        display: none;
    }
    .m_srch.active .srch_bar{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1300;
        width: 100%;
        height: 80px;
        background: #ff2266;
        touch-action: none;
    }
    .m_srch.active .srch_bar .wrap_inp{
        overflow:hidden;
        position:relative;
        margin:10px 56px 0 16px;
        padding:0 0 0 35px;
        height:60px;
        border-radius:4px;
        background:#fff;
    }
    .m_srch.active .srch_bar .wrap_inp input{
        border:none;
        background:none;
        width:100%;
        height:100%;
        font-size:15px;
        color:rgba(0,0,0,0.87);
        padding: 1em 0 1em 2em;
        box-sizing: border-box;
        outline: none
    }
    .m_srch.active .srch_bar .wrap_inp input::-webkit-input-placeholder{
        color:rgba(0,0,0,0.38);
        font-size:15px;
    }
    .m_srch.active .srch_bar .wrap_inp input:-moz-placeholder{
        color:rgba(0,0,0,0.38);
        font-size:15px;
    }
    .m_srch.active .srch_bar .wrap_inp input::-moz-placeholder{
        color:rgba(0,0,0,0.38);
        font-size:15px;
    }
    .m_srch.active .srch_bar .wrap_inp input:-ms-input-placeholder{
        color:rgba(0,0,0,0.38);
        font-size:15px;
    }
    .m_srch.active .srch_bar .wrap_inp .btn_srch{
        display:inline-block;
        position:absolute;
        top:6px;
        left:0;
        border:none;
        background: transparent;
    }
    .m_srch.active .srch_bar .btn_cancel{
        display:inline-block;
        position:absolute;
        top:0;
        right:0;
        width:56px;
        height:100%;
        border:none;
        background:none;
        font-size:14px;
        line-height:44px;
        color:#fff
    }
    .m_srch .recommend_srch{
        display: none;
        position: fixed;
        top: 80px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2000;
        transition: .4s;
    }
    .m_srch.active .recommend_srch{
        display: block;
        opacity: 1;
        transition: .4s;
    }
    .m_srch.active .recommend_srch .srch_mask{
        position: fixed;
        top: 80px;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.7);
        transition: 0.4s;
    }
    .m_srch.active .scroll_srch{
        position: relative;
        left: 50%;
        width: 100%;
        height: calc(100vh - 80px);
        margin-left: auto;
        transform: translateX(-50%);
        padding: 24px 30px;
        background: #fff;
        border-radius: 0;
        text-align: left;
        z-index: 100;
    }
    .m_srch.active .scroll_srch a{
        color: #ff2266;
        display: block;
        font-size: 1.3em;
        margin-bottom: .6em;
    }
    .detailSlider .detail{
        width: 100%;
        height: 400px;
        overflow: hidden;
    }
    .detailSlider .detail img{
        flex: 0 0 auto;
        width: 100%;
        height: 400px;
        margin: auto;
        object-fit: cover;
    }
    
    .nav.pc{
        display: none
    }
    .nav.mobile.bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        border-top: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 0;
        z-index: 1500;
        padding: .4em 0;
        box-sizing: border-box;
    }
    .nav.mobile.bottom .btn.active h5{
        color: #ff2266;
    }
    .nav.mobile.bottom .btn.active i{
        color: #ff2266;
    }
    .nav.mobile.bottom .btn{
        width: 20%;
        padding: 0;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
    .nav.mobile.bottom .btn i{
        margin: 0;
        font-size: 1.2em;
    }
    .nav.mobile.bottom .btn h5{
        margin: 0;
        font-size: 1em;
    }
    .nav.mobile.top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 1em;
    }
    .nav.mobile.top .logo{
        width: 100px;
        height: 50px;
        background: url(/opt/Upload/IMG/winpay_title.png) 50% no-repeat;
        background-size: contain;
        cursor: pointer;
    }
    .nav.mobile.top .search{
        position: relative;
        height: 50px;
        width: calc(100% - 120px);
    }
    .nav.mobile.top .search input{
        background: #fafafa;
        border: 1px solid #ddd;
        border-radius: 6px;
        width: 100%;
        height: 100%;
        outline: none;
        padding: .7em 1em;
        box-sizing: border-box;
    }
    .nav.mobile.top .search .btn{
        position: absolute;
        right: 1em;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
    }
    .nav.mobile.top .search .btn i{
        color: #444;
    }
    .mainSlider .mainImg{
        width: 100%;
        height: 320px !important;
    }
    .mainSlider .mainImg .mainSliderTxt{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 320px !important;
        z-index: 1000;
    }
    .mainSlider .mainImg .mainSliderTxt h1{
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-weight: 700;
        width: 100%;
        text-align: center;
    }
    .festivalItem .festival{
        display: block;
    }
    .festivalItem .festivalImg{
        width: 100% !important;
        height: 160px;
        overflow: hidden;
        border-radius: 1em;
        margin-bottom: .8em;
        margin-right: 1.6em;
    }
    .festivalItem .festivalImg img{
        flex: 0 0 auto;
        width: 100%;
        height: 100%;
        margin: auto;
        object-fit: cover;
    }
    .festivalItem .festivalTxt .small{
        padding: .4em 1em;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 2em;
        box-sizing: border-box;
    }
    .draw .notice .col-md-6{
        margin-top: 0em;
    }
    .draw .notice_title{
        border-right: none;
    }
    .draw .notice_title .notice_caution{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: .6em 0;
        border-bottom: 1px solid #eee;
    }
    .draw .notice_title .notice_caution i{
        margin-right: .5em;
    }
    .newsTaps{
        width: 100% !important;
    }

    .detailSlider-nav{
        height: 80px;
        max-height: 80px;
    }
    .detailSlider-nav .detail{
        margin: 0 .3em;
        height: 90px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .recommendSlider.pc{
        display: none
    }
    .recommendSlider.mobile{
        display: block;
        margin-bottom: 2em;
    }
    .recommendSlider.mobile .re{
        display: block;
        width: 10%;
    }
    .recommendSlider.mobile .recom{
        display: flex;
    }
    .recommendSlider.mobile .recom .d-flex{
        position: relative;
        margin-left: 1em;
    }
    .recommendSlider.mobile .recom .d-flex .icon{
        position: absolute;
        left: 0;
        bottom: 1em;
    }
    .recommendSlider.mobile .recom .d-flex .icon i{
        margin-bottom: .2em;
    }
    .recommendSlider.mobile .recomImg{
        width: 160px;
        height: 100px;
        overflow: hidden;
        border-radius: 1em;
        margin-bottom: .8em;
    }
    .recommendSlider.mobile .placeTxt{
        width: 160px;
    }
    .recommendSlider.mobile .placeTxt h5,.recommendSlider.mobile .placeTxt p{
        text-overflow:ellipsis;
        white-space:nowrap;
        word-wrap:normal;
        width:100%;
        overflow:hidden;
    }
    .recommendSlider .icon{
        width: 26px;
        height: 34px;
        background: url(/opt/Upload/IMG/placeIcon.png) 50% no-repeat;
        background-size: 25px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: auto;
    }

    .eventSlider.pc{
        display: none
    }
    .eventSlider.mobile{
        display: block;
    }
    .eventSlider.mobile .eventImg{
        width: 100%;
        height: 80px;
        background: #ff2266;
        border: 0 !important;
    }
    .festivalSlider{
    	margin-left: -15px;
    	margin-right: -15px;
    }
    .festivalSlider.slick-initialized .slick-slide{
        display: block !important;
        margin-left: 15px;
    	margin-right: 15px;
    }
    .festivalSlider .festivalImg{
        width: 100% !important;
        height: 160px !important;
        overflow: hidden;
        border-radius: 1em;
        margin-bottom: .8em;
        margin-right: 1.6em;
    }
    .festivalSlider .slick-dots{
        top: -50px !important;
        left: auto !important;
        right: 0 !important;
        bottom: auto;
        width: 50%;
        text-align: right !important;
    }
    .festivalSlider .festivalTxt{
        width: 100%;
        height: 184px;
    }
    .festivalItem .festivalTxt{
        width: 100% !important;
    }
    .festivalSlider .festivalTxt p{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4; /* 라인수 */
        -webkit-box-orient: vertical;
        word-wrap:break-word; 
        line-height: 1.4;
        max-height: 6em; 
    }
    .newsSlider .newsTxt{
        margin: 0;
    }
    .banner01 p{
        width: 100%;
    }
    .banner01{
        height: 220px;
    }
    .banner02{
        height: 220px;
    }
    .banner02 p{
        width: 100%;
    }
    .footer{
        padding-bottom: 2em;
    }
    .footer .copyright{
        font-size: .7em;
        letter-spacing: -0.5px;
    }
    .footer .d-flex{
        flex-wrap: wrap;
        justify-content: center !important;
    }
    .footer .nav-link{
        padding: .25rem .5rem
    }
    .footer .nav-link:nth-child(1){
        padding-left: 0;
    }
    .footer .nav-link:nth-child(4)::before{
        display: none
    }
}
@media (max-width: 560px) {
	.useWrap .useSlide .useSlider .slide.slide1-1::before, .useWrap .useSlide .useSlider .slide.slide1-4::before, .useWrap .useSlide .useSlider .slide.slide1-6::before, .useWrap .useSlide .useSlider .slide.slide3-3::before, .useWrap .useSlide .useSlider .slide.slide6-2::before, .useWrap .useSlide .useSlider .slide.slide6-6::before, .useWrap .useSlide .useSlider .slide.slide8-1::before{
    	bottom: 135px;
    }
    .useWrap .useSlide .useSlider .slide.slide2-4::before, .useWrap .useSlide .useSlider .slide.slide4-4::before, .useWrap .useSlide .useSlider .slide.slide5-6::before, .useWrap .useSlide .useSlider .slide.slide7-1::before{
    	bottom: 150px;
    }
    .useWrap .useSlide .useSlider .slide.slide5-6::after{
    	bottom: 100px;
    }
}
@media (max-width: 350px) {
	.useWrap .useSlide .useSlider .slide.slide6-4::before,.useWrap .useSlide .useSlider .slide.slide7-4::before{
        bottom: 184px;
    }
}



@media (max-width: 780px) and (max-height: 620px) {
    .useWrap .useSlide .useSlider .slide::after{
        left: 50%;
        bottom: 0px;
        top: auto;
        width: 100%;
        min-height: 60px;
        transform: translateX(-50%);
        background: rgba(0,0,0,.5);
        padding: 10px 5% 60px 5%;
        box-sizing: border-box;
        font-size: 16px;
        z-index: 1000;
    }
    .useWrap .useSlide .useSlider .slide::before{
        bottom: 80px;
    }
    .useWrap .useSlide .useSlider .slide.slide7-1::before{
        bottom: 80px;
    }
    .useWrap .useSlide .useSlider .slide.slide1-1::before,.useWrap .useSlide .useSlider .slide.slide1-2::before,.useWrap .useSlide .useSlider .slide.slide3-4::before,.useWrap .useSlide .useSlider .slide.slide4-4::before,.useWrap .useSlide .useSlider .slide.slide5-1::before,.useWrap .useSlide .useSlider .slide.slide6-1::before,.useWrap .useSlide .useSlider .slide.slide7-2::before,.useWrap .useSlide .useSlider .slide.slide7-3::before{
        bottom: 100px;
    }
    .useWrap .useSlide .useSlider .slide.slide6-4::before,.useWrap .useSlide .useSlider .slide.slide7-4::before{
        bottom: 120px;
    }
    .useWrap .useSlide .useSlider .slide.slide5-2::before{
        bottom: 80px;
    }
    
}
@media (max-height: 580px) {
	.useWrap .useSlide .useSlider .slide.slide2-1::before,.useWrap .useSlide .useSlider .slide.slide2-3::before,.useWrap .useSlide .useSlider .slide.slide3-2::before,.useWrap .useSlide .useSlider .slide.slide3-3::before,.useWrap .useSlide .useSlider .slide.slide4-3::before,.useWrap .useSlide .useSlider .slide.slide5-2::before,.useWrap .useSlide .useSlider .slide.slide6-3::before,.useWrap .useSlide .useSlider .slide.slide7-1::before{
		bottom: 100px;
	}
}
@media (max-height: 780px) {
	.useWrap .useSlide .useSlider .slide{
	    opacity: 0;
	}
}
/* 쿠폰 */
.coupon-wrap{
    padding: 20px;
    background: #dadada;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.coupon-wrap .coupon-width{
    width: 100%;
    max-width: 360px;
    height: 100%;
    max-height: 850px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.coupon-wrap .coupon-image{
    width: 100%;
    height: 30vh;
    overflow: hidden;
    box-sizing: border-box;
}
.coupon-wrap .coupon-image img{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.coupon-wrap .coupon-content{
    width: 100%;
    height: calc(100% - 32vh);
    box-sizing: border-box;
    background: url(/opt/Upload/IMG/winpay_title.png) 50% 95% no-repeat #fff;
    background-size: 100px auto;
}

.coupon-wrap .coupon-content .coupon-barcode{
    width: 100%;
    height: 170px;
    padding: 20px;
    box-sizing: border-box;
}
.coupon-wrap .coupon-content .coupon-barcode img{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.coupon-wrap .coupon-content .coupon-txt{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 20px 20px 40px 20px;
    box-sizing: border-box;
}
.coupon-wrap .coupon-content .coupon-txt li{
    list-style: none;
    width: 49%;
    font-size: 1.2rem;
    color: #333;
    margin-bottom: .7em;
    box-sizing: border-box;
}
.coupon-wrap .coupon-content .coupon-txt li:nth-child(2n){
    text-align: right;
}


.dark-text {
	color: #2b2b2b !important;
}
.winpay-logo{
	background: url(/opt/Upload/IMG/winpay_logo.png) 0% 50% no-repeat #fff;
    background-size: contain;
    width: 140px;
    height:50px;
    margin-top:-.2em;
}
#editPop .btn-primary:hover {
    color: #fff;
    background-color: #0075d9;
    border-color: #006ecc
}
#editPop .btn-danger:hover {
    color: #fff;
    background-color: #ef3347;
    border-color: #ee283c
}

.s_icon{
	background:#333743;
}