/*     2099065 : 한줄 텍스트      */
.intro_layout_29872 * {margin:0; padding:0; box-sizing:border-box;}
.intro_layout_29872 {overflow:hidden;}
.introBox {display: flex; align-items: center; justify-content: center;}
        
.introBox > li {height: 100vh; position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: center; width:32%; transition: all ease 1.8s;}

.introBox > li .conBox {display: flex; flex-direction: column; justify-content: center;}
.introBox > li .conBox span {display: block;}
.introBox > li .conBox > span {font-family:'ONE-Mobile-Regular'; font-size:18px;}
.introBox > li.active .conBox > span {font-size: 24px; color:#fff;}
.introBox .intro_lb .conBox > span > b {color:#d75900; font-size:18px;}
.introBox > li.active .conBox > span {color:#fff;}
.introBox > li.active .conBox > span > b {color:#ffa56f; font-size:24px;}

.introBox > li .conBox .linkBtn {display: none; text-align: center; width:65%;; padding:10px 0; border: 1px solid #fff; border-radius: 8px; margin-top: 40px; color:#fff; font-family:'ONE-Mobile-Regular'; font-size:20px; background:none;}
.introBox > li .conBox > span {letter-spacing:-1px; margin-top: 15px;}






.introBox > li h1 {line-height: 1.3;font-size: 32px;  font-family:'Paperlogy-8ExtraBold';}
.introBox > li h1 span {}

.introBox > li .introIcon {margin-bottom: 30px; width:200px;}

.introBox .btBox {position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 380px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap:20px;}
.introBox .host {width: 100%; display: flex; align-items: center; justify-content:center; flex-wrap: wrap; list-style:none; gap:15px;}
.introBox .host > li > a  {display:block; padding:10px 20px; font-size:0; border-radius:5px; background:#f5f5f5; box-shadow:4px 4px 4px #0000001c;}

.introBox .adrBox {text-align: center;}
.introBox .adrBox > p {font-family:'ONE-Mobile-Regular'; font-size:17px; color:#333; font-weight:600}


.introBox > li.active .introIcon {display: none;}
.introBox > li.active .btBox {display: none;}
.introBox > li.active .conBox .linkBtn {display: flex; align-items: center; justify-content: center; transition: 0.5s;}
.introBox > li.active .conBox .linkBtn:hover {background: #fff; color: #555; font-weight: bold; box-shadow: none;}

/* 슬로건 */
.introBox > li .introSlogan {display: none;}
.introBox > li.active .introSlogan {filter: drop-shadow(0 2px 2px #3333337a);}
.introBox > li.active .is_02 {position: absolute; top: 20%; left: 45%;}


.intro_lb {align-items: flex-end; text-align: right;}
.intro_lb .conBox {margin-right: 200px; align-items: flex-end;}

.intro_lb.active {width:68%; background: url(/img_up/shop_pds/appkorea135/build/option/kakaotalk_20250515_1806595761747300027.jpg) no-repeat center left; background-size: cover;}
.intro_lb.active h1 span {color: #6fffe8;}
.intro_lb.active::before {content: ''; display: inline-block; position: absolute; top: 0; right: 0; z-index: -1; width: 50%; height: 100%; background: linear-gradient(to right, #2181da00, #2181dab2,#2181da);}
.intro_lb .svg_icon {display:none;}
.intro_lb.active .svg_icon { display: inline-block; position: absolute; right:-125px; top:0; width:126px; height:100%; font-size:0;}
.intro_lb.active .svg_icon > img {height:100%;}

.intro_lb.active .introSlogan {display: block; position: absolute; top: 20px; left: 38%;}

/* 공통 h1 */
.intro_lb.active h1, .intro_rb.active h1 {font-size: 50px; color: #fff; filter: drop-shadow(0 0 3px #33333381);}


.intro_rb {align-items: flex-start;}
.intro_rb .conBox {margin-left:200px; align-items: flex-start;}

.intro_rb.active {width:70%; background: url(/img_up/shop_pds/appkorea135/build/option/kakaotalk_20250514_1545228861747273178.png) no-repeat center right; background-size: cover;}
.intro_rb.active h1 span {color: #ffec49;}
.intro_rb.active::before {content: ''; display: inline-block; position: absolute; top: 0; left: 0; z-index: -1; width: 50%; height: 100%; background: linear-gradient(to left, #4c1f7200, #a35b30a8, #d75900);}
.intro_rb.active .svg_icon {display: inline-block; position: absolute; left:-124px; top:0; width:126px; height:100%; font-size:0;}
.intro_rb.active .svg_icon > img {height:100%;}
.intro_rb .svg_icon {display:none;}

.btBox_mb {width: 100%; height: 16vh; display: flex; flex-direction: column; justify-content: center; align-items: center; display: none;}
.btBox_mb .host {width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px;}
.btBox_mb .host > li > a {display:block; padding:10px 20px; font-size:0; border-radius:5px; background:#f5f5f5; box-shadow:4px 4px 4px #0000001c;}

.btBox_mb .adrBox {text-align: center; font-size: 14px;}


@media screen and (max-width:1440px) {
  .intro_lb.active .svg_icon,    
  .intro_lb .svg_icon,
  .intro_rb.active .svg_icon,
  .intro_rb .svg_icon {display:none;}
  .intro_lb .conBox {margin-right:150px;}
  .intro_rb .conBox {margin-left:100px;}
  .introBox .host > li > a {padding:5px 20px;}
}

@media screen and (max-width:1080px) {
    .introBox {flex-direction: column;}

    .introBox > li {width: 100%; height: 42vh; transition: none;}
    .introBox > li .introIcon {display: none;}
    
    .introBox > li .btBox {display: none;}
    .introBox > li .conBox > span {font-size: 16px; margin-top: 5px;}
    .introBox > li.active .conBox > span {font-size: 16px; margin-top: 5px;}
    .introBox > li.active .conBox > span > b {font-size:16px;}
    .introBox > li.active .conBox .linkBtn {margin-top: 15px; width: 180px; padding: 8px 0; background: rgba(255, 255, 255, 0.144); box-shadow: 0 5px 10px 0 rgba(65, 65, 65, 0.144) blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.301);}

    .intro_lb .conBox {margin-right: 10%;}
    .intro_lb.active {width: 100%;}
    .intro_lb.active h1 {font-size: 32px;}
    .intro_lb.active h1 span {color: #6fffe8;}
    .intro_lb.active::after {content: none;}
    .intro_lb.active::before {width: 60%;}
    
    .intro_rb {align-items: flex-end;}
    .intro_rb .conBox {align-items: flex-end; margin-left: 0; margin-right: 10%;}
    .intro_rb.active {width: 100%;}
    .intro_rb.active h1 {font-size: 32px; text-align:center;}
    .intro_rb.active h1 span {color: #ffec49;}
    .intro_rb.active::after {content: none;}
    .intro_rb.active::before {width: 60%; left: auto; right: 0; background: linear-gradient(to right, #4c1f7200, #a35b30a8, #d75900);}

  .btBox_mb {gap:15px; display:flex;}
  .btBox_mb .host {list-style:none; gap:15px;}
  .btBox_mb .host > li > a {padding:5px 20px;}
  .btBox_mb .adrBox > p {font-size:15px; font-family:'ONE-Mobile-Regular'; font-weight:600; color:#333;}
}

@media screen and (max-width: 768px) { 
    .intro_rb.active h1 {text-align:right;}
    .intro_lb.active h1, .intro_rb.active h1 {font-size: 25px;}
}