@charset "UTF-8";

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* 20220919 신규 css */
/* 통합 */
* {margin:0; padding:0; box-sizing: border-box;}
.d, .ie9, ie8, ie7 {overflow-y:scroll; word-break:keep-all;}

ul li {list-style: none;}
a {text-decoration:none;}
a:link {text-decoration:none;}
a:hover{text-decoration:none;}

.app-event { width: 100%; font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; margin: 0; padding: 0; }

.app-event .con { width: 100%; max-width: 1280px; margin: 0 auto; overflow: hidden; display: block;}

.app-event .pc { display: block;}
.app-event .mobile { display: none;}
.app-event .pc-x { display: block;}
.app-event .mobile-x { display: none;}


/* font */
.app-event .font15 {font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size: 15px; word-break:keep-all;}
.app-event .font16 {font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size: 16px; word-break:keep-all;}
.app-event .font18 {font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size: 18px; word-break:keep-all;}
.app-event .font20 { font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size:20px; word-break:keep-all;}
.app-event .font20 a {text-decoration: none ; color: #ffd967;}
.app-event .font20 a:link {text-decoration: none ; color: #ffd967;}
.app-event .font20 a:visited {text-decoration: none ; color: #ffd967;}
.app-event .font20 a:hover {text-decoration: none; color: #ffd967;}
.app-event .font20 a:active {text-decoration: none ; color: #ffd967;}
.app-event .font20 span { font-size: 15px; }
.app-event .font21 {font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size: 21px; word-break:keep-all;}
.app-event .font22 { font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size:22px; word-break:keep-all;}
.app-event .font24 { font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size:24px; word-break:keep-all;}
.app-event .font28 { font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size:28px; word-break:keep-all;}
.app-event .font40 { font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size:40px; }

/* bg */
.app-event .app-event_bg01 { width: 100%; background: url('../img/appevent_top_bg.png')top center no-repeat #f5f5f5;  border: 0; margin: 0; padding: 0;}
.app-event .app-event_bg02 { width: 100%; background: #5ba6de; border: 0; margin: 0; padding: 0;}
.app-event .app-event_bg03 { width: 100%; background: #f5f5f5; border: 0; margin: 0; padding: 0;}
.app-event .app-event_bg04 { width: 100%; background: #0162ab; border: 0; margin: 0; padding: 0;}
.app-event .app-event_bg05 { width: 100%; background: #7ac0f4; border: 0; margin: 0; padding: 0;}
.app-event .app-event_bg06 { width: 100%; background: #737373; border: 0; margin: 0; padding: 0;}

/* title */
.app-event .sub-title {  height: 80px; width: 100%;  position: relative; overflow: hidden; margin: 0 0 30px 0;}
.app-event .sub-title .img { position: absolute; margin: 0 auto; left: 50%; margin-left: -175px;display: inline-block; padding: 0 50px; max-width: 500px;}
.app-event .sub-title .img img {width: 100%;}

/*btn*/
.app-event .btn01 { color: #fff; vertical-align: middle; word-break:keep-all; padding: 6px 10px; background: #000; margin: 0; display: inline-block; text-align: center; margin: 10px 0 0 0;}
.app-event .btn01 a {text-decoration: none ; color: #fff; text-align: center;}
.app-event .btn01 a:link {text-decoration: none ; color: #fff;}
.app-event .btn01 a:visited {text-decoration: none ; color: #fff;}
.app-event .btn01 a:hover {text-decoration: none ; color: #fff;}
.app-event .btn01 a:active {text-decoration: none; color: #fff; }

.app-event .btn02 {font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size:24px; color: #fff; vertical-align: middle; word-break:keep-all; padding: 20px 10px; background: #000;  display: inline-block; text-align: center; margin: 50px 0 0 0; width: 100%; line-height: 24px; cursor: pointer;}
.app-event .btn02 a {text-decoration: none ; color: #fff; text-align: center;}
.app-event .btn02 a:link {text-decoration: none ; color: #fff;}
.app-event .btn02 a:visited {text-decoration: none ; color: #fff;}
.app-event .btn02 a:hover {text-decoration: none ; color: #fff;}
.app-event .btn02 a:active {text-decoration: none ; color: #fff;}


/* 여백 */
.app-event .blank-pd80 {padding:  0 0 80px 0;}
.app-event .blank-ptb80 {padding: 80px 0 80px 0;}
.app-event .blank-pt50 {padding: 50px 0 0 0; text-align: center; line-height: 34px;}
.app-event .blank-pd60 {padding:  0 0 60px 0;}
.app-event .blank-ptl36 {padding: 6px 0 0 36px;}
.app-event .blank-mt80 {margin: 80px 0 0 0;}
.app-event .blank-mt30 {margin: 30px 0 0 0;}
.app-event .blank-mb30 {margin:  0 0 30px 0;}
.app-event .blank-mr50 {margin:  0 50px 0 0;}

/* gnb */
.app-event > .gnb-wrap { width: 100%; height: 39px; border-bottom: 1px solid #7a7b81; position: relative; background: #f5f5f5;}
.app-event .gnb-logo { width: 98px; height: 25px;  display: inline-block; margin: 7px 0 0 20px;}
.app-event .gnb-logo a {width: 98px; height: 25px; display: inline-block;}
.app-event .gnb-logo img { width: 100%; display: inline-block;}
.app-event .gnb-txt { text-align: center;  position: absolute; left: 50%;  top: 46%; transform: translate(-50%,-50%); font-weight: 500;  line-height: 15px; color: #000;}

/* top */
.app-event .title { float: left; width: 50%; max-width: 600px; padding: 110px 0 0 30px; box-sizing: border-box;}
.app-event .title img { width: 100%;}
.app-event .title .txt {float: left; width: 100%; color: #404040; text-align: center; word-break:keep-all; letter-spacing: -.5px; line-height: 24px; margin: 40px 0 16px 0;}
.app-event .title .txt span {font-size: 20px; background: url('../img/appevent_top_txt_line.png') bottom left no-repeat; background-size: 100%; padding: 0 6px 0 6px;}
.app-event .title .txt p {display: inline-block;}

.app-event .top-gift { float: right; width: 50%; max-width: 599px; padding: 80px 30px 0 0 ; box-sizing: border-box;}
.app-event .top-gift img { width: 100%;}
.app-event .top-gift .txt {font-family:'돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size: 12px; color: #a6a6a6; text-align: right; margin: 10px 0 0 0; line-height: 12px; word-break:keep-all;}
.app-event .top-gift_staff { float: right; width: 50%; max-width: 599px; padding: 80px 30px 0 0 ; box-sizing: border-box;}
.app-event .top-gift_staff img { width: 100%;}
.app-event .top-gift_staff .txt {font-family:'돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size: 12px; color: #a6a6a6; text-align: right; margin: 10px 0 0 0; line-height: 12px; word-break:keep-all;}

.app-event .any-img01 { float: left; width: 50%;  padding: 0 50px 0 30px ; box-sizing: border-box; }
.app-event .any-img01 img { width: 100%; display: block;}

/* 일정 및 경품 */
.app-event .plan-wrap { margin: 80px 0 80px 0; /*border-bottom: 1px solid #fff;*/ padding: 0 30px 0 30px; color: #fff; overflow: hidden; }
.app-event .plan-wrap dl { float: left; margin: 10px 0; display: inline-block;}
.app-event .plan-wrap dd { float: left; font-weight: 400;}
.app-event .plan-wrap dt { float: left; font-weight: 400;  line-height: 32px; padding: 0 0 0 10px;}

/*20220926 수정*/
.app-event .plan-wrap .plan-box { text-align: center; width: 140px; display: inline-block;  padding: 6px 20px 8px 20px; background: #0162ab; border-radius: 50px; vertical-align: middle; word-break:keep-all; line-height: 20px; margin: 0 10px 0 0; }

/* 경품 */
.app-event .gift-wrap { width: 100%; position: relative; text-align: center;   /* Center slide text vertically */  display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;  -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  align-items: baseline;  vertical-align: top;}
.app-event .gift-box { width: 100%; max-width: 226px; margin: 0 30px 30px 30px;}
.app-event .gift-box img { width: 100%;}
.app-event .gift-box dl { width: 100%;}
.app-event .gift-box dd { color: #fff; margin: 30px 0 10px 0; }
.app-event .gift-box dt { width: 100%; color: #fff; height: 84px; vertical-align: top; }
.app-event .box { text-align: center; display: inline-block;  padding: 4px 20px 8px 20px; background: #0162ab; border-radius: 50px; vertical-align: middle; word-break:keep-all; line-height: 20px;}
/* 내부용 css 수정 220928 */
.app-event .txt_staff { text-align: left;  color: #ffd967;  width: 100%;  display: block; margin-top: -6px;}
.app-event .gift-box_staff { width: 100%; max-width: 250px; margin: 0 30px 30px 30px;}
.app-event .gift-box_staff img { width: 100%;}
.app-event .gift-box_staff dl { width: 100%;}
.app-event .gift-box_staff dd { color: #fff; margin: 30px 0 10px 0; }
.app-event .gift-box_staff dt { width: 100%; color: #fff; height: 58px; vertical-align: top; }
.app-event .box { text-align: center; display: inline-block;  padding: 4px 20px 8px 20px; background: #0162ab; border-radius: 50px; vertical-align: middle; word-break:keep-all; line-height: 20px;}

/*경품 모바일버전*/
.app-event .swiper-container { width: 100%; position: relative;  overflow: hidden; /* Fix of Webkit flickering */ z-index: 1;  display: block; margin: 20px 0 20px 0;}
.app-event .swiper-wrapper { float: left; position: relative;  z-index: 1; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex;  -webkit-transition-property: -webkit-transform;  -moz-transition-property: -moz-transform;  -o-transition-property: -o-transform; -ms-transition-property: -ms-transform;  transition-property: transform; -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;  -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); margin-left: -100px; margin-bottom: 20px;}
.app-event .swiper-slide {  text-align: center; font-size: 18px; width: 130px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox;  display: -webkit-flex;  display: flex; -webkit-box-pack: center;  -ms-flex-pack: center;  -webkit-justify-content: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  -webkit-align-items: center; align-items: center; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto;  flex-shrink: 0;  position: relative;}

/* Scrollbar */
.swiper-scrollbar {  border-radius: 10px;  position: relative;  -ms-touch-action: none;  background: rgba(0, 0, 0, 0.1);}
.swiper-container-horizontal > .swiper-scrollbar {  position: absolute;  left: 1%;  bottom: 3px;  z-index: 50;  height: 5px;  width: 98%;}
.swiper-container-vertical > .swiper-scrollbar {  position: absolute;  right: 3px;  top: 1%;  z-index: 50;  width: 5px;  height: 98%;}
.swiper-scrollbar-drag {  height: 100%;  width: 100%;  position: relative;  background: rgba(0, 0, 0, 0.5);  border-radius: 10px;  left: 0;  top: 0;}
.swiper-scrollbar-cursor-drag {  cursor: move;}

/*참여방법*/
.app-event .sub-txt { display: inline-block; width: 100%;  color: #000; vertical-align: middle; word-break:keep-all; text-align: center; padding: 0; position: relative; margin: 0 0 20px 0;}
/* 20220927수정함 */
.app-event .any-img02 { position: absolute; z-index: 30; /*right: 15%;*/ left: 50%; margin-left: 254px; top: -50px;}
.app-event .sub-txt_m { width: 100%; max-width: 687px; margin: 0 auto; }
.app-event .sub-txt_m img{ width: 100%; margin: 0 0 -15px 0; }

.app-event .step-wrap { width: 100%; position: relative; text-align: center;   /* Center slide text vertically */  display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;  -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  align-items: baseline;  vertical-align: top;}
.app-event .step-box { width: 100%; max-width: 300px; margin: 0 15px 30px 15px;}
.app-event .step-box img { width: 100%; max-width: 225px;}
.app-event .step-box dl { width: 100%;}
.app-event .step-box dd { color: #fff; margin: 30px 0 10px 0; }
.app-event .step-box dt { width: 100%; color: #404040; }
.app-event .step-box .box { text-align: center; display: inline-block;  padding: 4px 20px 8px 20px; background: #0162ab; border-radius: 50px; vertical-align: middle; word-break:keep-all; line-height: 20px;}

.app-event .step-box_m { float: left; width: 100%; background: #fff; display: flex; padding: 30px 20px 0 20px; margin: 10px 0; box-sizing: border-box;}
.app-event .step-box_m dd { float: left; color: #fff; display: block; margin: 0 0 10px 0;}
.app-event .step-box_m dt {float: left; display: block; margin: 0 0 30px 0;}

.app-event .col1 { float: right; width: 70%; text-align: left; margin: 30px 0 0 10px;  z-index: 10;}
.app-event .col2 { flex: 30%; float: left; width: 30%; max-width: 173px; height: auto;   background-image: url('../img/appevent_step_img01_m.png')  ; background-size: 100%; background-repeat: no-repeat;}
.app-event .col3 { flex: 30%; float: left; width: 30%; max-width: 173px; height: auto;   background-image: url('../img/appevent_step_img02_m.png') ; background-size: 100%; background-repeat: no-repeat;}
.app-event .col4 { flex: 30%; float: left; width: 30%;max-width: 173px; height: auto;   background-image: url('../img/appevent_step_img03_m.png') ; background-size: 100%; background-repeat: no-repeat;}
.app-event .col5 { flex: 30%; float: left; width: 30%;max-width: 173px; height: auto;   background-image: url('../img/appevent_step_img04_m.png'); background-size: 100%; background-repeat: no-repeat;  b}

/* 탭메뉴 */
.app-event #tabs{ overflow: hidden; width: 100%; margin: 0 auto;  list-style: none}

.app-event #tabs li{  float: left; width: 50%;  margin: -1px 0 0 0  }
.app-event #tabs li img { width: 100%; max-width: 274px;}

/*비활성화 탭(기본 탭모양) 설정*/
/* 20221019 수정했음 */
.app-event #tabs a{ position: relative; width:100%; padding: 20px 15%; background: #bfbfbf; float: left; text-decoration: none; text-align:center;}

.app-event #tabs a:hover, .app-event #tabs a:hover::after, .app-event #tabs a:focus, .app-event #tabs a:focus::after{ /*background: #fff;*/}

.app-event #tabs a:focus{  /*outline: 0;*/}

.app-event #tabs a::after{  z-index: 1;  background: #0162ab; }

/*활성화탭(탭 클릭했을때 모양) 설정*/
.app-event #tabs #current a, .app-event #tabs #current a::after{   background:#0162ab; /* 07.탭메뉴 색상 설정 */  z-index: 3;}

/* ------------------------------------------------- */

/*컨텐츠 부분*/
.app-event #content
{ color: #000;	padding:80px 20px 0 20px; /* 09.컨텐츠 안쪽 여백 설정 */	position: relative;	z-index: 2;	   -moz-border-radius: 0 5px 5px 5px;  -webkit-border-radius: 0 5px 5px 5px;}
.app-event #content h2 { text-align: center; color: #fff; font-weight: 400;}
.app-event .tab-box { width:100%; max-width: 500px; margin: 50px auto 80px auto; }
.app-event #tab2 .tab-box { width:100%; max-width: 500px; margin: -15px auto 80px auto; }

.app-event .tab-box input {font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; color: #000; width: 100%; height: 48px !important; background: #fff; border: 1px solid #d7d7d7; font-size: 20px; padding: 14px 12px 14px; height: 20px; vertical-align: middle; margin: 6px 0; font-size: 18px;}
.app-event .tab-box input:focus {outline: none;}
.app-event .tab-box .off { background: #e6e6e6; border: 1px solid #000;} 
.app-event .form-box {margin: 10px 0 10px 0;}
.app-event .tab-box p {text-align: left; color: #fff;} 

.app-event .tab-box span {text-decoration: none; color: #ffd967; display: block;}
.app-event .tab-box a {text-decoration: none; color: #ffd967;}
.app-event .tab-box a:link{text-decoration: none; color: #ffd967;}
.app-event .tab-box a:visited{text-decoration: none; color: #ffd967;}
.app-event .tab-box a:hover{text-decoration: none; color: #ffd967;}
.app-event .tab-box a:active{text-decoration: none; color: #ffd967; }



/*체크박스*/
.checks {position: relative;}

.checks input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0}
.checks input[type="checkbox"] + label { display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.checks input[type="checkbox"] + label:before {  /* 가짜 체크박스 */ content: ' '; display: inline-block;  width: 21px;  /* 체크박스의 너비를 지정 */ height: 21px;  /* 체크박스의 높이를 지정 */ line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */   text-align: center;   vertical-align: middle;  background: #fafafa; border: 2px solid #fff; border-radius : 3px;  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);}
.checks input[type="checkbox"] + label:active:before, 
.checks input[type="checkbox"]:checked + label:active:before {  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}

.checks input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */  content: '\2714';  /* 체크표시 유니코드 사용 */ color: #99a1a7; text-shadow: 1px 1px #fff; background: #e9ecee; border-color: #adb8c0; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);}

.checks.small input[type="checkbox"] + label:before {  width: 20px;  height: 20px;  line-height: 20px;}


.checks.etrans input[type="checkbox"] + label { padding-left: 36px; line-height: 24px;}
.checks.etrans input[type="checkbox"] + label:before {  position: absolute;  left: 0; top: 0; margin-top: 0;/* opacity: .6;*/  box-shadow: none;  border-color: #fff; /* -webkit-transition: all .12s, border-color .08s;  transition: all .12s, border-color .08s;*/}

.checks.etrans input[type="checkbox"]:checked + label:before { position: absolute; content: ""; width: 10px; top: -5px;  left: 5px;  border-radius: 0;  opacity:1;   background: transparent;  border-color:transparent #fff #fff transparent;  border-top-color:transparent;  border-left-color:transparent; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}

.no-csstransforms .checks.etrans input[type="checkbox"]:checked + label:before {  /*content:"\2713";*/  /*content: "\2714";*/  top: 0;  left: 0;  width: 21px;  line-height: 21px;  color: #fff;  text-align: center;  border: 1px solid #fff;}

.app-event .check-box01 { padding: 0 0 20px 0;  border-bottom: 1px solid #fff;}
.app-event .check-box02 { padding: 20px 0 0 0;}

.app-event .confirm { color: #fff; text-align: center;  margin: 50px 0 0 0;}
.app-event .confirm p {display: inline-block; font-size: 26px;}


/*앱다운로드*/
.app-event .app_wrap { width: 100%; max-width: 800px; margin: 80px auto;}
.app-event .app_wrap .app_img { width: 40%; float: left; padding: 0 20px 60px 0; box-sizing: border-box;}
.app-event .app_wrap .app_img img {float: right; width: 100%; max-width: 189px;}
.app-event .app_wrap .app_box {width: 60%; float: left;}
.app-event .app_wrap .app_box .app_title { margin: 30px 0 0 0;max-width: 393px;}
.app-event .app_wrap .app_box .app_title img { width: 100%;}
.app-event .app_wrap .app_box .txt { font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size:18px; color: #404040; vertical-align:top; word-break:keep-all; text-align: left; padding: 20px 0 0 0; line-height: 28px;}
.app-event .app_wrap .app_box .txt ul {}
.app-event .app_wrap .app_box .txt li { position: relative; padding: 0 0 6px 20px;}
.app-event .app_wrap .app_box .txt li::after { width: 20px;  height: 18px; content:"-";    text-align: center;  transition: all 0.35s;  position: absolute;  top: 0px; left: 0;}
.app-event .app_wrap .app_box .btn_wrap { max-width: 300px; padding: 16px 20px 12px 20px; background: #000; margin: 30px 0 0 16px; box-sizing: border-box; text-align: center;}
.app-event .app_wrap .app_box .btn_wrap img { width:100% ; max-width: 176px;}

/*자주묻는 질문*/
.app-event .question-row {display: flex; max-width: 840px; width: 100%; margin: 0 auto 80px auto; padding: 10px 0 0 0; box-sizing: border-box;}
.app-event .question-row .question-col {  flex: 1;}
.app-event .question-row .question-col:last-child {  }
/* Accordion styles */
.app-event .question-tabs {overflow: hidden; }
.app-event .question-tab {  width: 100%;  color: white;  overflow: hidden;}

.app-event .question-tab input {  position: absolute;  opacity: 0;  z-index: -1;}
.app-event .question-tab .tab-label {position: relative;  display: flex;  justify-content: space-between;   font-weight: bold;  cursor: pointer;  /* Icon */ border-bottom: 1px solid #fff;  padding: 20px 46px 20px 0; font-family: 'Arial'; color:#0262ac; font-size: 24px; font-weight: 400;}
.app-event .question-tab .tab-label span {font-family:'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size:24px; color: #000; line-height: 24px; flex: 1; font-weight: 400; padding: 0 0 0 10px; word-break:keep-all;}
.app-event .question-tab .tab-label:hover { background: #7ac0f4; }
.tab-label::after { width: 22px;  height: 12px; content:" ";    text-align: center;  transition: all 0.35s;  background: url("../img/appevent_step_arrow.png") 0 0 no-repeat; background-size: 100%; position: absolute; right: 16px; top: 34px;}
.tab-content {  max-height: 0; padding: 0 20px;   color: #000;   background: #bde0fa;  transition: all 0.35s; } 
.tab-close {  display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; background: #7ac0f4;   cursor: pointer; }
.tab-close:hover {background: #7ac0f4;  }
    
.question-tab input:checked + .tab-label {background: #7ac0f4; }
 .question-tab input:checked + .tab-label::after {width:22px ; -webkit-transform: rotate(180deg);  transform: rotate(180deg);  -webkit-transform-origin:50% 50%; transform-origin:50% 50%; }
 .question-tab input:checked ~ .tab-content { max-height: 100vh;     padding: 1em;   font-size: 16px;  }

/* 알림 */
.app-event .info-title { text-align: left; margin: 60px 0 20px 0; color: #fff; }

.app-event .info-txt { margin: 0 0 60px 0; text-align: left; color: #fff;}
.app-event .info-txt li { width: 100%; position: relative; padding: 0 0 8px 20px; }
.app-event .info-txt li::after { width: 20px;  height: 15px; content:"-";    text-align: center;  transition: all 0.35s;   position: absolute;  top: 0px; left: 0;}

/* footer */
.app-event .footer-wrap { width: 100%; height: 59px; border-top: 1px solid #d7d7d7; background: #fff; }
.app-event .footer-txt { text-align: center;  color: #707070; font-weight: 300; line-height: 18px; word-break:keep-all; padding: 20px 0;}


/*popup*/
.result_pop {  width: 100%;  height: 100%; position: fixed;  left: 0;   top: 0; z-index: 9999;}  
  .result_pop .dis_table { height: 100%; background: rgba(0, 0, 0, 0.8);}
  .dis_table {    display: table;   width: 100%;}
  .result_pop .dis_table_cell { vertical-align: middle; text-align: center;}
  .dis_table_cell { display: table-cell;}
  .result_pop .pop { display: inline-block;    width: 460px;    padding: 50px 40px 106px 40px;    border-radius: 2px;    background: #fff; box-sizing: border-box;    position: relative;}
  .result_pop .pop .close_pop { width: 24px;    height: 24px;   position: absolute;   right: -40px;   top: 0px;}
  .result_pop .pop .close_pop img { width: 100%;}
  .result_pop .pop .tt { font-family:'Noto Sans KR', "맑은 고딕","Malgun Gothic";   font-size: 26px;    line-height: 35px;    color: #222;    letter-spacing: -0.05;    font-weight: bold;}
  .result_pop .pop .txt {    margin-top: 20px;    font-size: 18px;    line-height: 28px;    color: #999;    letter-spacing: -0.05;    font-family:'Noto Sans KR',"맑은 고딕","Malgun Gothic";}
  .result_pop .pop .pop_btn {    display: block;    width: 100%;    height: 66px;    background: #0162ab;    color: #fff;    position: absolute;    left: 0;    bottom: 0;    border-radius: 0 0 2px 2px;}
  .result_pop .pop .pop_btn a {text-decoration: none ; color: #fff; text-align: center;}
  .result_pop .pop .pop_btn a:link {text-decoration: none ; color: #fff;}
  .result_pop .pop .pop_btn a:visited {text-decoration: none ; color: #fff;}
  .result_pop .pop .pop_btn a:hover {text-decoration: none ; color: #fff;}
  .result_pop .pop .pop_btn a:active {text-decoration: none; color: #fff; }
  .result_pop .pop .pop_btn span {    display: inline-block;    /* padding-right: 45px; */    font-size: 22px;    line-height: 45px;    color: #fff;    position: relative;    top: 12px;font-family:'Noto Sans KR',"맑은 고딕","Malgun Gothic";}

 /* 텍스트 깜빡임 */
 @keyframes blink-effect { 50% { opacity: 0; } } 
.blink { 
      animation: blink-effect 1s step-end infinite;  display: inline-block; font-weight: 300;
      /* 
          animation-name: blink-effect; 
          animation-duration: 1s; 
          animation-iteration-count:infinite; 
          animation-timing-function:step-end; 
      */ 
  }

  .app-event .top_wrap { width: 100%; padding: 0 0 0 50%;}
  .app-event .top_btn {width: 300px;  
    font-family: 'Noto Sans KR','맑은고딕','Malgun Gothic', '돋움','Dotum','굴림','Gulim','Apple SD Gothic Neo','sans-serif'; font-size: 24px;  color: #fff; vertical-align: middle;  word-break: keep-all; padding: 20px 10px;  background: #000; display: inline-block; text-align: center; margin: 0 0 80px -150px;  line-height: 24px; cursor: pointer;}
/***********************************************************************************************/
@media (max-width: 1280px) {
  .app-event .plan-wrap { margin: 80px 30px 80px 30px;}
  .app-event .info-title { margin: 60px 30px 20px 30px;}
  .app-event .info-txt { margin: 0 30px 60px 30px;}
}

/***********************************************************************************************/
@media (max-width: 960px) {
  .app-event .pc-x { display: none;}
  .app-event .mobile-x { display: block;}  
  .app-event .title { padding: 110px 20px 0 30px ;}

}

/***********************************************************************************************/
@media (max-width: 840px) {
  .app-event .question-row .question-col:last-child {margin: 0;}
  .app-event .question-con {padding: 0 15px; box-sizing: border-box;}  
}
/***********************************************************************************************/
@media (max-width: 768px) {

.app-event .con {padding: 0 15px; box-sizing: border-box;}  

.app-event .pc { display: none;}
.app-event .mobile { display: block;} 

/* bg */
.app-event .app-event_bg01 {background: #f5f5f5;}

/* 여백 */
.app-event .blank-P0 { padding: 0;}
.app-event .blank-pd80 {padding:  0 0 40px 0;}
.app-event .blank-ptb80 {padding: 40px 0 40px 0;}
.app-event .blank-mt80 {margin: 40px 0 0 0;}


/* gnb */
.app-event .gnb-txt {display: none;}  

/* top */

.app-event .title { width: 100%; max-width: 718px; padding: 40px  0  }
.app-event .title img {width: 100%;}
.app-event .top-gift {width: 100%; max-width: 718px; margin: 0 auto; padding: 0px 30px;}
.app-event .top-gift .txt {margin: 10px 0 10px 0;}

.app-event .top-gift_staff {width: 100%; max-width: 718px; margin: 0 auto; padding: 0;}
.app-event .top-gift_staff .txt {margin: 10px 0 10px 0;}

.app-event .title img { float: left;}
.app-event .any-img01 { float: none; width: 100%; padding: 0 25px;}


.app-event .title .txt {float: left; width: 100%; color: #404040; text-align: center; word-break:keep-all; letter-spacing: -.5px; line-height: 24px; font-size: 20px!important; margin: 20px 0 16px 0;}
.app-event .title .txt span {font-size: 18px; background: url('../img/appevent_top_txt_line.png') bottom left no-repeat; background-size: 100%; padding: 0 6px 0 6px;}



/* 일정 및 경품 */
.app-event .plan-wrap { padding: 0 0 25px 0; margin: 40px 20PX 40px 20PX;}
.app-event .plan-wrap dd { font-size: 16px;}

.app-event .plan-wrap dt {width: 100%; padding: 6px 0 0 10px; font-size: 16px !important; font-weight: 400; line-height: 26px;}

.app-event .gift-box { width: 100%; max-width: 160px; margin: 0;}
.app-event .gift-box  dd span { font-size: 14px; line-height: 18px; display: block;}
.app-event .gift-box  dt span { font-size: 14px; line-height: 18px; display: block;}
.app-event .swiper-container { margin: 0;}

.app-event .box { width: 120px;}

/* 참여방법 */
.app-event .sub-txt {text-align: left; height: 133px; padding: 50px 0 0 0 ; box-sizing: border-box; margin: 0; font-size: 26px ; position: relative;}
.app-event .any-img02 { top: 0; right: 20px; width: 20%; position: absolute; display: block;}
.app-event .any-img02 img {width: 100%;}

.app-event .step-box { width: 100%; box-sizing: border-box; overflow: hidden; background:  #fff; display: flex; padding: 30px 30px 0 30px; margin: 20px 0;}

.app-event .step-box dl { float: left; margin: 0 0 30px 0;}
.app-event .step-box dt {float: left; text-align: left;}

.app-event .info-title { margin: 40px 0 20px 0;}
.app-event .info-txt { margin: 0 0 40px 0;}

.app-event .tab-box input  {font-size: 16px;}
.app-event .step-box_m dt { }
.app-event .col1 { float: right; width: 70%; text-align: left; margin: 20px 0 0 10px;  z-index: 10;}

.app-event .question-tab .tab-label span {font-size: 18px !important;}
.app-event .question-row {margin: 0 auto 40px auto;}


.app-event .app_wrap .app_img { width: 30%;  padding: 0;}
.app-event .app_wrap .app_box {width: 70%;}
.app-event .app_wrap .app_box .app_title { margin: 0 0 0 0;}
.app-event .app_wrap .app_box .txt {font-size: 15px; line-height: 18px;}
.app-event .app_wrap .app_box .btn_wrap { max-width: 176px; padding: 16px 20px 12px 20px; background: #000; margin: 30px 0 50px 16px; box-sizing: border-box; text-align: center;}
.app-event .app_wrap .app_box .btn_wrap img { width:100% ; max-width: 176px; }

/*popup*/

.result_pop .dis_table {  padding: 0 20px;  box-sizing: border-box;}
.result_pop .pop {  display: inline-block;  width: 100%;  padding: 40px 29px 84px 29px;}
.result_pop .pop .close_pop {  width: 24px;  height: 24px;  position: absolute;  right: 0;  top: -40px;}
.result_pop .pop .tt {  font-size: 22px;  line-height: 30px;  color: #222;}
.result_pop .pop .txt {  margin-top: 12px;  font-size: 14px;  line-height: 21px;  color: #999;  letter-spacing: -0.05; }
.result_pop .pop .pop_btn {  display: block;  width: 100%;  height: 54px;  background: #0162ab; color: #fff;  position: absolute;  left: 0;  bottom: 0; }
.result_pop .pop .pop_btn span {  display: inline-block;  /* padding-right: 45px; */  font-size: 22px;  line-height: 30px;  color: #fff;  position: relative;  top: 12px;  }

}
/***********************************************************************************************/
@media (max-width: 580px) {
  .app-event .sub-txt {font-size: 20px ; }

}
 
/***********************************************************************************************/
@media (max-width: 480px) {

  .app-event .sub-txt {text-align: left; height: 70px; padding: 20px 0 0 0 ; box-sizing: border-box; margin: 0; }



}