@charset "utf-8";

/* --------------------------------------------
 * header
/* ------------------------------------------ */
#header{width: 100%; padding: 30px 0; background: var(--color-background);}
#header .inner{justify-content: space-between;}
/* #header .menu{gap: 50px;} */
#header .menu{margin-left: 50px;}
#header .menu li{margin: 0 25px;}
#header .menu li:first-child{margin-left: 0;}
#header .menu li:last-child{margin-right: 0;}
#header .menu li a{color: var(--color-foreground); font-size: 19px; font-weight: 600;}
#header .login-join{justify-content: flex-end;}
#header .login-join li{margin-left: 15px;}
#header .login-join li:first-child{margin-left: 0;}
#header .login-join li a{color: var(--color-muted-foreground); font-size: 16px; font-weight: 500;}
#header .login-join li:first-child a{color: var(--color-primary); font-weight: 700;}

/* .ham {position: relative; width: 80px;	height: 80px; cursor: pointer; background-color: #3f3f3f;}
.ham_line {position: absolute;	left:27px;	width: 27px; height: 2px; background-color: #fff;}
.ham_line1 {top: 27px; transition: all 0.3s;}
.ham_line2 {top: 37px;}
.ham_line3 {top: 47px; transition: all 0.3s;} */

.clicked .ham_line1 {transform: rotate(45deg); top: 37px;}
.clicked .ham_line2 {width: 0;}
.clicked .ham_line3 {transform: rotate(-45deg); top: 37px;}
/* .clicked .menulist{display:block; height: 300px;top:-20px;} */

/* .menu_wrapper {position:relative;} */
.menulist {position:absolute; top:80px; left:50%; transform: translateX(-50%); width:100%; height:200px; /* height: 0px; */ padding:20px 0; /* transition: all 0.3s; */ background:url('../images/menu_bg.png') no-repeat top rgba(255,255,255,0.9); border-top: 1px solid #e5e5e5; box-shadow:5px 5px 5px rgba(155,155,155,0.1); z-index:999;}
.menulist ul.depth-1 {display:flex; justify-content:flex-end; width: 505px; margin: 0 auto;}
.menulist ul.depth-1 > li a {display:block; font-size:15px; font-weight:400; color:#222; line-height:34px;}
.menulist ul.depth-1 > li:last-child a {border-right:none;}
.menulist ul.depth-1 > li a:hover {color:#135197; font-weight:bold;}
.menulist ul.depth-2 {padding: 40px 0 0 15px;}
.menulist ul.depth-2 > li a {display:block; font-size:14px; font-weight:400; padding:7px 10px; color:#000; letter-spacing: -0.5px;}
.menulist ul.depth-2 > li a:hover {color:#ff6600; font-weight:600;}
.menulist ul.depth-1 > li.menu3 a  {padding: 0 34px 0 0;}
.menulist ul.depth-1 > li.menu4 a  {padding: 0 24px;}
.menulist ul.depth-1 > li.menu5 a  {margin-right: -4px;}



/* --------------------------------------------
 * wrap3
/* ------------------------------------------ */
#wrap3{padding: 80px 0; background-image: url(../images/bg.png); background-position: center; background-repeat: no-repeat; background-size: cover;}
#wrap3 .bottom-con .con-box{width: 386px; height: 360px; padding: 30px; background: #fff; border-radius: 30px;}
#wrap3 .bottom-con h4{color: #282828; font-size: 20px; font-weight: 600;}
#wrap3 .bottom-con h4.con-tit{width: 100%; border-radius: 10px; background: #2f2f2f; color: #fff; line-height: 50px;}
#wrap3 .bottom-con .cs-num{margin-top: 10px; font-size: 40px; font-weight: 700; letter-spacing: -2px;}
#wrap3 .bottom-con .con-info{width: 100%; margin-top: 10px; padding: 20px; border-radius: 10px; background: #f5f5f5;}
#wrap3 .bottom-con .con-info li{font-size: 18px; margin-bottom: 10px;}
#wrap3 .bottom-con .con-info li:last-child{margin-bottom: 0;}
#wrap3 .bottom-con .bank .con-info{padding: 40px 20px;}
#wrap3 .bottom-con .bank .con-info li{margin-bottom: 15px;}
#wrap3 .bottom-con .bank .con-info li:last-child{margin-bottom: 0;}
#wrap3 .bottom-con .con-info-q{color: #282828; text-align: left; font-weight: 600;}
#wrap3 .bottom-con .con-info-a{color: #505050; text-align: right; font-weight: 500;}
#wrap3 .bottom-con .con-info p{margin-top: 15px; color: #646464; font-size: 16px; font-weight: 400;}
#wrap3 .bottom-con .con-btn{margin-top: 10px; gap: 10px;}
#wrap3 .bottom-con .con-btn a{width: 100%; border-radius: 10px; font-size: 18px; font-weight: 600; line-height: 50px;}
#wrap3 .bottom-con .cs-btn1{background: #ff7734; color: #fff; transition: all 0.5s ease-in-out;}
#wrap3 .bottom-con .cs-btn1:hover{background: #db6023;}
#wrap3 .bottom-con .cs-btn2{border: 1px solid #282828; color: #282828; transition: all 0.5s ease-in-out;}
#wrap3 .bottom-con .cs-btn2:hover{border: 1px solid #fff; background: #282828; color: #fff;}
#wrap3 .bottom-con .video .playcon{position: relative; width: 100%; height: 210px; margin-bottom: 40px; border-radius: 10px; overflow: hidden;}
#wrap3 .bottom-con .video .playcon a{display: block; width: 100%;}
#wrap3 .bottom-con .video .lottoPlay{max-width: 100%; height: 210px; background: url('../images/video.png') no-repeat 50% 50%; background-size: cover; cursor: pointer;}
#wrap3 .lotto-date{color: #969696; font-size: 14px; font-weight: 400;}
#wrap3 .bottom-con .video-btn{width: 100px; border-radius: 10px; background: #f5f5f5; padding: 10px; color: #282828; font-size: 14px; font-weight: 600; line-height: 1.6; transition: all 0.5s ease-in-out;}
#wrap3 .bottom-con .video-btn:hover{background: #ccc;}
#wrap3 .bottom-con .con-txt{padding: 20px; gap: 20px;}
#wrap3 .bottom-con .con-txt p{color: #646464; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: -1.25px;}



/* --------------------------------------------
 * footer
/* ------------------------------------------ */
#footer{padding-bottom:50px; width: 100%; background: var(--color-foreground);}

.brand{background: var(--color-card); border-top: 1px solid var(--color-border);}
.brand ul{overflow: hidden;}
.brand ul li{float: left; padding: 2.5em 0em; width: 16.5%; text-align: center;}
.brand img{max-width: 80%; max-height: 40px; vertical-align: middle;}

#footer .footer-area{padding: 55px 0 20px 0;}
#footer .footer-info p{color: var(--color-muted); font-size: 14px; font-weight: 400; line-height: 28px;}
#footer .footer-info p span{color: var(--color-card-foreground); font-weight: 600;}
#footer .capyright{color: var(--color-muted-foreground); font-size: 12px;}
#footer .footer-btn span{display: block; width: 150px; padding: 10px 0; background: var(--color-muted); border-radius: var(--radius-sm); transition: all 0.5s ease-in-out; cursor: pointer;}
#footer .footer-btn span:hover{background: var(--color-accent);}
#footer .footer-btn span:first-child{margin-bottom: 5px;}
#footer .footer-btn a{color: var(--color-card-foreground); font-size: 14px; font-weight: 500;}

#footer .sms-Info { padding:20px; border:1px solid #494949;}
#footer .sms-Info li {margin-bottom:7px; display:flex; align-items:baseline; gap:7px; font-size:14px; line-height:1.5; color:#949494;}
#footer .sms-Info li:last-child {margin-bottom:0;}


.totop{position: fixed; right: 30px; bottom: 30px; width: 50px; height: 50px; line-height: 65px; background: url(../images/toparrow.png) center center; background-size: 100%; color: #fff; font-size: 11px; font-weight: bold; text-align: center; cursor: pointer;}



/*#container, #footer, #header, #wrap, .inner:after, ul:after, dl:after{display:block;clear:both;content:""}*/
#wrap{position:relative;width:100%;min-width:1060px;margin:0 auto;}
#wrap.bgblack:before{content:'';position:fixed;left:0;top:0;width:100%;height:100%;min-width:100%;min-height:100%;background:#000;background:rgba(0,0,0,0.6);opacity:0.6;filter: alpha(opacity=60);z-index:998}
.blind{text-indent:-9999px; font-size:0px; width:0px; height:0px;}
/*#wrap:after, #container:after, #footer:after, #header:after, .inner:after, ul:after, dl:after,.todayBox > div > ul li > div:after{display:block;clear:both;content:'';}*/
#wrap{width:100%;position: relative; min-width: 1580px;}
#wrap.auth {padding-bottom: 50px;}



.sideWrap .sideTop{position:absolute; left:285px; background:url(../images/) no-repeat; left: 50%; margin-left: -680px;}
.wrap .visualWrap{width:100%; height:847px;}
.quickMenu{border-top: 2px solid #ddac67; border-bottom: 2px solid #ddac67; width: 135px; height: 694px; background: #f8f8f8; position: absolute; right: 50%; margin-right: -660px;}
.quickMenu h2{font-weight:800; font-size:20px; color:#31719d; margin-top:20px; text-align:center;}
.quickMenu ul li{margin:15px 0;text-align: center;}
.quickMenu ul li:hover.q_menu01 i{background:url(../images/quick01_on.png) no-repeat center #ddac67;}
.quickMenu ul li:hover.q_menu02 i{background:url(../images/quick02_on.png) no-repeat center #ddac67;}
.quickMenu ul li:hover.q_menu03 i{background:url(../images/quick03_on.png) no-repeat center #ddac67;}
.quickMenu ul li:hover.q_menu04 i{background:url(../images/quick04_on.png) no-repeat center #ddac67;}
.quickMenu ul li i{width:110px; height:110px; border-radius:55px;}
.quickMenu ul li.q_menu01 i{background:url(../images/quick01_off.png) no-repeat center #c2c2c2;}
.quickMenu ul li.q_menu02 i{background:url(../images/quick02_off.png) no-repeat center #c2c2c2;}
.quickMenu ul li.q_menu03 i{background:url(../images/quick03_off.png) no-repeat center #c2c2c2;}
.quickMenu ul li.q_menu04 i{background:url(../images/quick04_off.png) no-repeat center #c2c2c2;}
.quickMenu ul li p{font-size:17px; color:#252525; text-align:center;line-height: 24px;}
.quickMenu > p a{display:block;text-align: center; padding: 10px 0; clear: both; background:  linear-gradient( 45deg, #ddac67,#fff4ce ); color: #333;font-size: 17px;font-weight: 800;}

.footTop {display: inline-block; width: 100%; padding: 0 0 12px 0; position:relative;}



/* input box color */
input:-webkit-autofill{-webkit-box-shadow: 0 0 0 30px transparent inset; -webkit-text-fill-color: #777;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{transition: background-color 5000s ease-in-out 0s;}
input::-webkit-input-placeholder{color:#c7c7c7;}
input:-moz-placeholder{color:#c7c7c7; opacity: 1;}
input::-moz-placeholder{color:#c7c7c7; opacity: 1;}
input:-ms-input-placeholder{color:#c7c7c7;}
input:placeholder-shown{color:#c7c7c7;}
textarea:placeholder-shown{color:#c7c7c7;}

.consultBox span.button{position:absolute; top:25px; padding:0; right: 0;}
.consultBox .input{width: 38%; float: left;}
.consultBox .input{position: relative; height: 80px; box-sizing: border-box; padding: 0 14px 0 0; /* margin: 0 0 10px; padding-top:10px; border-left:1px #eee solid;*/}
.consultBox .input:first-child{border-left: 0;}
.consultBox div.car_i:before{background: url(../images/car_icon.png) no-repeat center;}
.consultBox div.phone_i:before{background: url(../images/phone_icon.png) no-repeat center;}
.consultBox .input:before{content:''; width: 70px; height: 70px; display: inline-block; position: absolute; /* top: 10px; left: 12px;*/ z-index: 10;}
.consultBox .input label{position: absolute; top: 20px; left: 72px; font-size: 12px; white-space: nowrap; color: #b2b2b2; letter-spacing: 0.25px; font-weight: 600; z-index: 10;}
.consultBox .input input[type="text"],
.consultBox .input input[type="tel"]{box-sizing: border-box; width: 100%; height: 70px; padding: 32px 30px 12px 69px; font-size: 14px; color: #454545; line-height: 24px; border: 1px solid #e1e1e1; font-weight: 600;}
.consultBox .input button{width: 75px; height: 30px; position: absolute; top: 38px; right: 32px; font-size: 15px; line-height: 30px; color:white; background-color:#DDD; border:0; border-radius: 0;}
.consultBox .input input::-webkit-input-placeholder{color:#ddd;}
.consultBox .input input::-moz-placeholder {color:#ddd;}
.consultBox .input input:-ms-input-placeholder {color:#ddd;}
.consultBox .input input:-moz-placeholder {color:#ddd;}
.consultBox .button label {font-size: 12px; /*margin:5px 0;*/ letter-spacing: -0.1em;}
.consultBox .button button[type="submit"]{margin: 51px 0 0 115px; width: 235px; height: 130px;  background-color:#33ccff; border: 0; border-radius: 10px; color: white; font-size: 24px; padding: 0; text-align: center;}
.consultBox .button .imgMap{float: right;}


/* checksWrap_st1 */
.checksWrap{border-top: 1px solid #fff; position:relative;}
.checksWrap_st1{position: relative; padding: 10px 0;}
.checksWrap_st1 .checks{position: relative;}
.checksWrap_st1 input[type="checkbox"]{position: absolute; top: 0; left: 0; margin: 0; padding: 0; z-index: -1; width: 16px; height: 16px; -webkit-appearance: none;}
.checksWrap_st1 a{display: inline-block; /*width: 66px;*/ height: 28px; position: absolute; top: 5px; right: 0; font-size: 11px; color: #888; line-height: 28px; text-align: center; background: #ededed; border-radius: 3px; padding: 0 10px;}

/*.checks{position:relative}*/
.checks input[type="checkbox"]{position: absolute; top: 0; left: 0; margin: 0; padding: 0; z-index: -1; width: 16px; height: 16px; -webkit-appearance: none;}
.checks label{background:url("../images/check2_off.png") 0 0 no-repeat transparent; display: inline-block; position: relative; top: 0; left: 0; height: 24px; line-height: 24px; font-size: 14px; color: #797979; padding: 0 0 0 30px;}
.checks label.on{background:url("../images/check2_on.png") 0 0 no-repeat transparent;}



.navi ul {float:right; margin-right:10px;}
.navi ul li {float: left;font-size: 15px; margin: 17px 0 0 26px; position:relative; color:#999;}
.navi ul li a{display:block; width:100%; height:100%;}
.navi ul li:after{content: '>'; top: -1px; position: absolute; /* right: 68px; */ /* right: 64px; */ right: -18px; font-size: 18px; color: #ccc;}
.navi ul li:last-child:after{display:none;}
.navi ul li.home{background:url(../images/home.png)no-repeat center; background-size:100%; width:17px; height:23px;}
span.ico{font-size: 13px; padding: 2px 7px; display: inline-block; margin-left: 7px;}
span.recom {background:#eee; color:#888;border:1px solid #ccc}
span.discount{border:1px solid red; color:red;}