@charset "utf-8";

/* =========================== PAGE */

/* nav */
.promo-header {position: fixed; left: 0; top: 0; width: 100%; z-index: 2}
.promo-header h1 {float: left;}
.promo-header h1 a{float: left;}
.promo-header ul {float: right; padding-right: 13px; }
.promo-header ul li {display: inline; }
.promo-header ul li a {display: inline-block; padding: 25px 15px; color: rgba(255,255,255,0.);font-size: 18px;}
.promo-header ul li a.active {color: #333;}

.promo-logo .logo-link{display: inline-flex;align-items: center;text-decoration: none;}
.promo-logo .logo-text{font-weight: 600;letter-spacing: 0.02em;line-height: 1; color: #ffffff;font-size: 22px;padding: 20px; }

/* 기본은 PC 텍스트 보이기 */
.promo-logo .logo-text-pc{ display:inline; }
.promo-logo .logo-text-m{ display:none; }

.promo-header .mNav {display: none; position: absolute; top: 19px; right: 10px; width: 65px; height: 45px; cursor: pointer;/*background-color: rgba(255,255,255,0.3);*/}

/* icon-menu */
.icon-wrap {padding-left: 10px;}
.icon-wrap .icon, 
.icon-wrap .icon:before, 
.icon-wrap .icon:after {width: 35px; height: 4px; background: #000000;}
.icon-wrap .icon {position: relative; margin-top:20px;}
.icon-wrap .icon:before {content:'';position: absolute; left: 0; bottom: 10px; }
.icon-wrap .icon:after {content:''; position: absolute; left: 0; top: 10px;}

.promo-header-inner {display: flex;justify-content: space-between;background-color: rgba(122, 122, 122, 0.5);}

#sh_content .promo-gnb {display: flex;gap: 16px;font-size: 16px;padding: 17px;}
#sh_content .promo-gnb a {position: relative;padding: 4px 0;font-weight: 500;color: #ffffff;text-decoration: none;}
#sh_content .promo-gnb a:hover {color: #00a092;}
#sh_content .promo-gnb a.active {color: #00a092;}


/* CONTENT */
.pagecommon{position:relative;padding-bottom:10px;font-size:17px;letter-spacing:-.3px;line-height:1.5;color:#171717}
.pagecommon .pl{white-space:pre-line}
.pagecommon *{word-break:keep-all}
.pagecommon .inner{max-width:var(--mainsize);width:100%;margin:0 auto}

#sub_cont .bnr{display:flex;align-items:center;height:600px;color:#fff;background:url(../img/sub/promotion1001_bg.jpg);/* font-family:var(--k-font) */}
#sub_cont .bnr .inner{width:100%}
#sub_cont .bnr span{font-size:40px;}
#sub_cont .bnr span b{font-size: 45px; font-weight: bold;}
#sub_cont .bnr p{margin-top:15px;font-size:27px;line-height:1.3}

#sub_cont .pro > p {margin-top: 60px; font-size:30px; font-weight: bold; color:#111; text-align: center;/* font-family:var(--k-font) */}
#sub_cont .pro > span{display:flex;align-items:center;justify-content:center;width:100%;height:65px;/* border-radius:50px; */color: #222222;/*  background:#fff;transition:all .3s */}
#sub_cont .pro ul {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 10px;}
#sub_cont .pro .inner{display:flex;align-items:center;justify-content:space-between;padding:70px 0; flex-direction: column;}
#sub_cont .pro .bg{background:#f2f2f2;} 
#sub_cont .pro .bg .inner{display:flex;align-items:center;justify-content:space-between;padding:70px 0; flex-direction: column;}
#sub_cont .pro .txt span{display:inline-block;padding:4px 20px 3px;border:2px solid var(--primary);border-radius:50px;color:var(--primary);/* font-family:var(--k-font) */}
#sub_cont .pro .txt p{margin:20px 0 30px;font-size:35px;color:#111;line-height:1.3;/* font-family:var(--k-font) */}
#sub_cont .pro .txt p em{font-style:normal;color:var(--primary)}
#sub_cont .pro .inner img{padding-top: 20px; width: 150px;}
#sub_cont .pro a{display:flex;align-items:center;justify-content:center;width:300px;height:75px;margin:0 auto;border-radius:50px;font-size:20px;text-align:center;color:var(--primary);background:#111;transition:all .3s;/* font-family:var(--k-font) */}

#sub_cont .more{margin-top:10px;padding-top:70px;}
#sub_cont .more p{font-size:30px; font-weight: bold; color:#111; text-align: center;/* font-family:var(--k-font) */}
#sub_cont .more > div > span{display:flex;align-items:center;justify-content:center;width:100%;height:65px;border-radius:50px;color: #222222; background:#fff;transition:all .3s}
#sub_cont .more ul{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}
#sub_cont .more ul a{display:flex;align-items:center;justify-content:space-between;padding:40px 50px;border-radius:5px;background:#f2f2f2}
#sub_cont .more span{display:flex;align-items:center;justify-content:center;width:65px;height:65px;border-radius:50px;color: #B7B7B7; background:#fff;transition:all .3s}
#sub_cont .more dt{font-size:20px;color:#111;/* font-family:var(--k-font); */transition:all .3s}
#sub_cont .more dd{color:#4b4b4b}

#sub_cont .question{margin-top:10px;padding-top:70px;}
#sub_cont .question p{font-size:28px; font-weight: bold; color:#111; text-align: center;/* font-family:var(--k-font) */}
#sub_cont .question ul{display:grid;grid-template-columns:repeat(1,1fr);gap:20px;margin-top:30px}
#sub_cont .question ul li div{display:flex;align-items:center;justify-content:center;padding:40px 50px;border-radius:5px;background:#f2f2f2; background:url(../img/sub/promotion1003_bg.jpg);}
#sub_cont .question span{display:flex;align-items:center;justify-content:center;width:100%;height:65px;border-radius:50px;color: #222222; background:#fff;transition:all .3s}
#sub_cont .question .sub-inner {display: flex; flex-direction: column;}
#sub_cont .question dt{text-align: center; font-size:20px;color:#ffffff;/* font-family:var(--k-font); */transition:all .3s}
#sub_cont .question dd{text-align: center; color:#ffffff}
#sub_cont .question a {display:flex;align-items:center;justify-content:center;width:270px;height:55px;margin:0 auto;border-radius:50px;font-size:20px;text-align:center;color:var(--primary);background:#111;transition:all .3s;/* font-family:var(--k-font); */}

#sub_cont .about{margin-top:10px;padding-top:40px;}
#sub_cont .about p{font-size:35px; font-weight: bold; color:#111; text-align: center;/* font-family:var(--k-font) */}
#sub_cont .about ul{display:grid;grid-template-columns:repeat(1,1fr);gap:20px;margin-top:40px}
#sub_cont .about ul li div{display:flex;align-items:center;justify-content:space-between;padding:100px 50px;border-radius:5px;background:#f2f2f2; background:url(../img/sub/promotion1003_bg.jpg);}
#sub_cont .about span{display:flex;align-items:center;justify-content:center;width:100%;height:65px;/* border-radius:50px; */color: #222222;/*  background:#fff;transition:all .3s */}
#sub_cont .about dt{font-size:20px;color:#111;/* font-family:var(--k-font); */transition:all .3s}
#sub_cont .about dd{font-size: 18px; color:#ffffff;}
#sub_cont .about dd b {font-weight: bold;}

@media(hover:hover){
  #sub_cont .pro a:hover{color:#fff;background:var(--primary)}
  #sub_cont .more ul a:hover span{color:#fff;background:#111}
  #sub_cont .more ul a:hover dt{color:var(--primary)}
}

@media(max-width:1024px){
  .pagecommon{font-size:16px}

  #sub_cont .bnr{height:450px;text-align:center;background-size:cover;background-position:center bottom}
  #sub_cont .bnr span{font-size:40px;}
  #sub_cont .bnr span b{font-size: 45px; font-weight: bold;}
  #sub_cont .bnr p{margin-top:15px;font-size:30px;line-height:1.3}


  #sub_cont .pro ul {display: flex; flex-direction: column;}
  #sub_cont .pro .inner{padding:50px 15px;flex-direction: row;}
  #sub_cont .pro .bg .inner{padding:50px 15px; flex-direction: row;}
  #sub_cont .pro .txt{width:50%}
  #sub_cont .pro .txt p{font-size:30px}
  #sub_cont .pro .inner img{padding-top: 0; width: 250px;}

  #sub_cont .more{padding:70px 15px 0}
}

@media (max-width: 900px) {
  #sub_cont .bnr span{display: flex; flex-direction: column; font-size:30px;}
}

@media(max-width:768px){

  .promo-logo .logo-text-pc{ display:none; }
  .promo-logo .logo-text-m{ display:block; }
	.promo-header .mNav {display: block;}
	.promo-header h1 {width: 100%;padding:10px 0 10px 0;}
  #sh_content .promo-gnb {display: none;}
  #sh_content .promo-gnb {gap: 0px; display: flex; flex-direction: column; width: 100%; float: none; text-align: center; position: fixed; top: 82px; padding: 0px;}
	#sh_content .promo-gnb a {align-items: center;display: flex;text-align: center;justify-content: center;width: 100%; display: inline-block; padding: 6px 0;height: 40px; background-color: rgba(122,122,122,0.5);}
	#sh_content .promo-gnb a.active {color: #fff;}

  .pagecommon{font-size:15px}
  .pagecommon .pl{white-space:normal}
  
  #sub_cont .bnr{height:600px}
  #sub_cont .bnr span b{font-size:30px;font-weight: bold;}
  #sub_cont .bnr p{font-size:20px;}

  #sub_cont .pro .inner{justify-content:space-around;}
  #sub_cont .pro .txt p{font-size:25px;}
  #sub_cont .pro img{width:250px;}
  #sub_cont .pro a{width:250px;height:50px;font-size:16px;}
  #sub_cont .pro > span {text-align: center;}

  #sub_cont .more{padding:70px 15px 0}
  #sub_cont .more ul{display:block}
  #sub_cont .more ul li+li{margin-top:10px}
  #sub_cont .more ul a{padding:30px 40px}
  #sub_cont .more dt{font-size:18px}
  #sub_cont .more span{width:55px;height:55px}
  #sub_cont .more svg{width:20px}
  #sub_cont .more .inner > span {text-align: center;}

  #sub_cont .about span {text-align: center;}
  #sub_cont .question .inner > span {text-align: center;}
}

@media(max-width:590px) {
  #sub_cont .about dd{font-size: 15px; color:#ffffff;}
  #sub_cont .about ul li div{padding:50px 50px;}
}

@media(max-width:480px){
  .pagecommon{font-size:14px}
  
  #sub_cont .bnr span{font-size:25px;}
  #sub_cont .bnr{height:600px}
  #sub_cont .bnr p{font-size:15px}
  
  #sub_cont .pro .inner{display:block;text-align:center}
  #sub_cont .pro .bg .inner{display:block;text-align:center}
  #sub_cont .pro .txt{width:100%;margin-bottom:50px;text-align:center}
  #sub_cont .pro .txt p{font-size:20px}
  #sub_cont .pro img{width:210px}
  
  #sub_cont .more ul a{padding:25px 30px}
  #sub_cont .more dt{font-size:16px}
}