@charset 'euc-kr';

@import url('https://webfontworld.github.io/pretendard/Pretendard.css');
@font-face {font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal;}

body, p, th, td, input, select, button, textarea, cite{font-family: 'pretendard';}

#wrapper{overflow: hidden; width: auto; min-width: 1200px; margin: 0;}

.app_guide_visual{overflow: hidden; background: url(images/app_guide_bg.png) no-repeat center 0 / cover;}
.app_guide_visual .inner{display: flex; align-items: stretch; justify-content: space-between; position: relative; width: 1200px; margin: 0 auto;}
.app_guide_visual p{padding: 95px 0; color: #fff; font-size: 56px; font-weight: 700;}
.app_guide_visual .app_box{display: flex; align-items: flex-end; position: relative;}
.app_guide_visual .app_box img{position: absolute;}
.app_guide_visual .app_box .box{position: relative; z-index: 4;}
.app_guide_visual .app_box .android{left: -250px; bottom: 100px;}
.app_guide_visual .app_box .ios{left: -400px; bottom: 15px;}
.app_guide_visual .app_box .galaxy{left: -630px; bottom: 30px;}
.app_guide_visual .app_box .app1{top: -20px; left: 70px; z-index: 2;}
.app_guide_visual .app_box .app2{bottom: 5px; left: -30px; z-index: 3;}
.app_guide_visual .app_box .app3{bottom: 0px; left: 70px; z-index: 1;}
.app_guide_visual .app_box .app4{bottom: 80px; right: 0px;}
.app_guide_visual .app_box .star1{top: 20px; left: -20px;}
.app_guide_visual .app_box .star2{left: -80px; top: 130px; width: 19px;}
.app_guide_visual .app_box .star3{right: -100px; top: 150px; width: 26px;}


.app_guide_cont{}
.app_guide_cont .inner{width: 1200px; margin: 0 auto;}

.app_guide_cont .tab{display: flex; gap: 0 10px; margin-top: 20px;}
.app_guide_cont .tab .tab_btn{display: flex; align-items: center; justify-content: center; flex: 1; padding: 12px 0; background: none; border: 1px solid #bababa; border-radius: 2em; cursor: pointer; color: #1d1d1f; font-size: 18px; font-weight: 600; transition: background 0.35s;}
.app_guide_cont .tab .tab_btn span{display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 8px; background: #1d1d1f; color: #fff; font-size: 12px; border-radius: 50% 50% 0 50%; line-height: 1em;}
.app_guide_cont .tab .tab_btn.active{background: #1d1d1f; border: 1px solid #1d1d1f; color:#fff;}
.app_guide_cont .tab .tab_btn.active span{background: #ff1414;}
.app_guide_cont .tab_panel{padding-top: 70px;}
.app_guide_cont .tab_panel > div{display: none;}
.app_guide_cont .tab_panel > div.active{display: block;}

.app_cont{}
.app_cont + .app_cont{margin-top: 100px;}
.app_cont .tit_wrap{display: flex; align-items: center; margin-bottom: 30px;}
.app_cont .tit_wrap .logo{margin-right: 14px;}
.app_cont .tit_wrap .tit{margin-right: 20px; color: #1d1d1f; font-size: 32px; font-weight: 700; line-height: 2.1em;}
.app_cont .tit_wrap .qrcode{width: 65px; height: 65px; margin-right: 6px;}
.app_cont .tit_wrap .qrcode img{object-fit: cover;}
.app_cont .tit_wrap a{background: none;}
.app_cont .notice_txt{position: relative; padding-left: 32px; margin: 0 0 20px 20px; color: #999; font-size: 18px;}
.app_cont .notice_txt::before{content: '!'; display: flex; align-items: center; justify-content: center; position: absolute; top: calc(50% - 11px); left: 0; width: 22px; height: 22px; background: #dfdfdf; color: #999; font-size: 18px; font-weight: 900; border-radius: 50%;}
.app_cont .step_wrap{counter-reset:step-counter; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 20px;}
.app_cont .step_wrap .item{counter-increment:step-counter; display: flex; flex-wrap: wrap; justify-content: center; position: relative; padding-top: 50px; background: #f6f5f8; border-radius: 40px;}
.app_cont .step_wrap .item::before{content:counter(step-counter); display:flex;align-items:center;justify-content:center; position:absolute;left:20px;top:15px; width:38px;height:38px;background:#767676;color:#fff;border-radius:50%;font-size:18px;font-weight:900;}
.app_cont .step_wrap .img_box{display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; margin-bottom: 0px; text-align: center;}
.app_cont .step_wrap .txt_box{width: 100%; padding: 0 38px 38px 38px;}
.app_cont .step_wrap .txt_box p{margin-bottom: 6px; color: #1d1d1f; font-size: 22px; font-weight: 700;}
.app_cont .step_wrap .txt_box span{color: #1d1d1f; font-size: 14px; line-height: 1.3em;}

.app_cont table{table-layout: fixed; width: 100%; background: #f8f8f8;}
.app_cont table th{padding: 10px 0; border: 1px solid #a4a4a4; border-bottom: none; color: #1d1d1f; font-size: 18px; font-weight: 700;}
.app_cont table td{padding: 12px 40px; border: 1px solid #a4a4a4; color: #1d1d1f; font-size: 16px;}
.app_cont table td ul li{position: relative; padding-left: 12px;}
.app_cont table td ul li::before{content: ''; position: absolute; top: calc(16px*1.5/2 - 2px); left: 0; width: 4px; height: 4px; background: #1d1d1f; border-radius: 50%;}
.app_cont .step_wrap .item.v2 .txt_box{margin-top: 0; padding-bottom: 20px;}

.app_cont .setting_wrap{padding: 50px 35px; background: #f8f8f8; border-radius: 40px;}
.app_cont .setting_wrap .setting_txt{counter-reset:setting-counter; display: flex; margin-bottom: 35px;}
.app_cont .setting_wrap .setting_txt .item{counter-increment:setting-counter; flex: 1; position: relative; padding-left: 54px; }
.app_cont .setting_wrap .setting_txt .item::before{content:counter(setting-counter); display: flex;align-items:center;justify-content:center; position: absolute; top: -4px; left: 0; width:38px;height:38px;background:#767676;color:#fff;border-radius:50%;font-size:18px;font-weight:900;}
.app_cont .setting_wrap .setting_txt .item p{margin-bottom: 6px; color: #1d1d1f; font-size: 22px; font-weight: 700;}
.app_cont .setting_wrap .setting_txt .item span{color: #1d1d1f; font-size: 14px;}
.app_cont .setting_wrap .setting_img{counter-reset:setting-counter; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0 10px;}
.app_cont .setting_wrap .setting_img .item{counter-increment:setting-counter;}
.app_cont .setting_wrap .setting_img .item p{margin-top: 6px; color: #1d1d1f; font-size: 13px; font-weight: 500; text-align: center;}
.app_cont .setting_wrap .setting_img .item p::before{content:counter(setting-counter)'. ';}