ol li {list-style: none;}
.scrollbar-track-y {z-index: 100;}
.gnb .logo { background-image: url('/static/images/logo_w.png'); } 
.gnb .menu { border-top-color: #fff; } 
.gnb .menu:before,
.gnb .menu:after { background: #fff; }
.gnb .gnb_wrap {background-color: rgba(0, 0, 0, 0);}

.gnb .gnb_wrap.active  {background: transparent;}
.gnb .gnb_wrap.active .logo { background-image: url('/static/images/logo.png'); }
.gnb .gnb_wrap.active .menu { border-top-color: #000; }
.gnb .gnb_wrap.active .menu:before,
.gnb .gnb_wrap.active .menu:after { background: #000; }

#free {height: 100vh;}
#free .free_scroller {overflow: hidden;}
section * {font-family: 'Pretendard';}
.large_wrap {position:relative;margin: 0 auto; width: 1360px; /*300px*/}
.tit {font-size: 40px; font-weight: 700; line-height: 1.4em; color: #1B1A1A;}
.stit {font-size: 20px; font-weight: 500; line-height: 1.6em; letter-spacing: 0.5px; color: #333; flex-shrink: 1;}
.desc {font-size: 18px; font-weight: 400; line-height: 1.6em; color: #aaa;}
.point_txt {font-size: 32px; font-weight: 600; line-height: 26px; letter-spacing: 0; color: #1f1f1f;} 
.info .tit {margin-top: 20px;}
.info .desc {margin-top: 48px;}
#free .linebreak {display: block;}
.section_textbox {padding: 240px 0; margin: 0 auto; width:calc(100% - 400px); max-width:1520px; display: flex; justify-content: space-between; align-items: flex-start;}
.section_textbox .point_txt{padding-right:20px; width: 50%; line-height: 1.4;}
.section_textbox .stit{width:50%;}
.section_textbox p + p{margin-top:30px;}

.number_ico{display:inline-block; margin-right:5px; width:24px; height:24px; font-size:24px; background-color:#333; color:#fff; border-radius: 50%; text-align: center; line-height: 24px;}

.fl_between{display: flex; justify-content: space-between;}
.fl_center{display: flex; justify-content: center; align-items: center;}
.num_list li:not(:last-of-type){margin-bottom:4px;}
.num_list li{display: flex;}
.num_list li p{width: calc(100% - 30px);}
.num_list em{display:inline-block; margin-right:24px; width:16px;}

section .fl_two{display: flex; gap: 24px;}
section .fl_two>*{width:calc(50% - 12px); border-radius:64px; overflow: hidden;}
section .fl_full{display: flex;}
section .fl_full>li{width: 50%; overflow: hidden;}
section .fl_full li:first-child{border-radius: 64px 0 0 64px;}
section .fl_full li:last-child{border-radius: 0 64px 64px 0;}
section .fl_center_bottom{display: flex; align-items: flex-end; justify-content: center;}
section .fl_center_top{display: flex; align-items: flex-start; justify-content: center;}
section .fl_center_center{display: flex; align-items: center; justify-content: center;}

section p,
section .section_textbox{word-break: keep-all;}

.vid_box{position: absolute;}
video[poster]{width:100%;}
.swiper-container{touch-action: pan-y;}

/* section01 - pc */
.section01_animation>div{position:relative; display: flex; margin:0 auto; max-width:1760px; width:calc(100% - 160px); height:800px; background-color:#f2f2f2; border-radius: 64px;}

.section01_animation>div>div{width:50%; position: relative;}
.section01_animation .pay_txt_box{display: flex; align-items: center; padding-left:240px;}
.pay_toggle{position:relative; margin-right:10px; width: 78px; height:45px; background-color: #c4c4c4; border-radius: 45px;}
.pay_toggle::after{
  opacity:0;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 45px;
  content: '';
  background: -webkit-linear-gradient(to right, #27C6F5, #BBF8FF 50%);
  background: linear-gradient(to right, #27C6F5, #BBF8FF 50%);
  transition:1s;
}
.pay_toggle span{position:absolute; top:50%; left:-5px; display: inline-block; width:56px; height:56px; background-color: #fff; border-radius: 50%; transform: translateY(-50%) scale(0.5);transition: .8s; z-index: 5;}

.pay_txt>span{display: inline-block; vertical-align: middle;}
.pay_txt .won{width:0; height:44px; overflow: hidden; transition: width .8s;}
.pay_txt .won em{display:inline-block; width:141px;padding-bottom:44px; background:url('/static/images/portfolio/wooricardpay/won_txt.svg') no-repeat center; background-size:100%;}


.section01_animation .pay_img_box{padding-left:160px;}
.pay_img_box>div{position: absolute; width:480px; overflow: hidden; border-radius:0 0 64px 64px;
  border-right:solid 12px #000;
  border-left:solid 12px #000;
  border-bottom:solid 12px #000;
}
.pay_img_box .screen_box{position: absolute; bottom:0; transform: translateY(calc(203px - 80px)); transition: transform .8s}
.pay_img_box .screen_top{margin:0 auto; width:calc(100% - (64px * 2)); height:80px; border-radius:42px 42px 0 0; background:#0067AC url('/static/images/portfolio/wooricardpay/screen_bottom_txt.png') no-repeat center 0; background-size:184px; transition: width .8s, background-color .8s, background-position .8s;}


/* section01 애니메이션 시작 css */
.section01_animation.active>div{background-color:#ECF5FD;}

.section01_animation.active .pay_toggle::after{
  opacity: 1;
}
.section01_animation.active .pay_toggle span{left:28px; transform: translateY(-50%) scale(1); background-color:#0028a0;}

.section01_animation .pay_txt .woori{width:78px}
.section01_animation.active .pay_txt .woori path{fill:#0028A0; transition: fill .8s}
.section01_animation.active .pay_txt .won{width:141px; overflow: hidden;}
.section01_animation .pay_txt .pay{width:80px}
.section01_animation.active .pay_txt .pay path{fill:#27C6F5; transition: fill .8s}

.section01_animation.active .pay_img_box .screen_box{transform: translateY(14px);}
.section01_animation.active .pay_img_box .screen_top{width:100%; background-color:#3182f7; background-position: center -80px;}


/* section02 - pc */
#section02{padding:240px 0 0;}
#section02 ol{margin-top:40px; font-size:16px; color:#888; font-weight:500; line-height: 1.6;}
#section02 ol em{margin-right:24px;}

.section02_animation{margin:0 auto; width:calc(100% - 400px); max-width: 1520px;}
.section02_animation>p{margin-bottom:40px; color:#1f1f1f; font-size:20px; font-weight: 600;}
.section02_animation>p sup{font-size:12px;}

.bar_box{margin-bottom:104px;}
.bar_box>div{position: relative; height:48px; border-radius: 24px; font-size:16px; opacity: 0; overflow: hidden;}
.bar_box>div+div{margin-top:12px;}
.bar_box strong,
.bar_box span{font-weight:600; position:absolute; top:50%; transform: translateY(-50%);}
.bar_box strong{left:20px;}
.bar_box span{right:20px;}
.bar_box .bar_2022{width:0; background-color: #f2f2f2;}
.bar_box .bar_2022 strong{color:#1f1f1f;}
.bar_box .bar_2022 span{color:#888;}
.bar_box .bar_2023{width:0; background-color:#3182f7;}
.bar_box .bar_2023 strong,
.bar_box .bar_2023 span{color:#fff;}
.bar_box .bar_2023 span em{position:relative; display:inline-block; margin-left:8px; padding-right:18px; color:#7edaff}
.bar_box .bar_2023 span em::after{position:absolute; top:50%; right:0; display:inline-block; content: ''; width: 16px; height:16px; background:url('/static/images/portfolio/wooricardpay/ico_bar_arrow.png') no-repeat; transform: translateY(-50%);}


.bubble_box{display: flex; gap:40px;}
.bubble_box>div{width:50%;}
.bubble_box strong{font-size:16px; font-weight:600;}
.bubble_box ul{display: flex; flex-wrap: wrap; gap:12px; margin-top:16px;}
.bubble_box ul li{opacity: 0;}

/* section03 - pc */
#section03{position:relative; background-color:#f2f2f2; height:200vh; min-height:2080px; overflow: hidden;}
#section03 .section03_pin{height:100vh;min-height:1040px;}
.section03_pin{position:relative;height:100vh;min-height:1040px; margin:0 auto; max-width:1520px; width: 100%;}
.section03_pin .section_txt{position:absolute; top:0; left:50%; display:flex; flex-direction: column; justify-content: space-between; padding-top:240px; width:calc(100% - 200px); max-width:1520px; height:800px; transform: translateX(-50%);}
.section03_pin .section_txt>div>p{margin-bottom:80px; font-size:24px; font-weight: 600; color:#1f1f1f;}

.section03_pin .text_effect{display: flex; flex-wrap: wrap;}
.section03_pin .text_effect>*{font-size:40px; font-weight: 700; color:#1f1f1f;}
.section03_pin .text_effect span{color:#aaa}
.section03_pin .text_effect .txt_hidden{height:60px;overflow: hidden; white-space: nowrap;}
.section03_pin .text_effect .txt_hidden.middle{margin:0 12px;}
.section03_pin .text_effect .txt_hidden:last-child{width:100%;}
.section03_pin .section_txt ol{color:#888;}
.section03_pin .section_txt li{height:24px; font-size:16px; overflow: hidden;}

.img_effect{width:100%;}
.img_effect ul{display: flex;flex-direction: column; align-items: flex-end;}
.img_effect ul li{position:absolute; width:calc(50% + 8px); height:1040px; display: flex;}
.img_effect ul .first_effect{top:0;}
.img_effect ul .second_effect{bottom:-100%}
.img_effect ul li:first-child{align-items: center;}
.img_effect ul li:last-child{align-items: end;}

/* section03 - 히단 라인 이펙트 부분 */
#section03Line{padding:0 20px}
.line_box .absol_txt{opacity:0;}
.line_effect_area{position:relative; margin:0 auto 240px; max-width:1080px; width:100%; height:1920px; overflow: hidden;}
.line_effect_area::before{position: absolute; width:100%;top:300px;  bottom:0; content:''; background-color:#F2F2F2; border-radius: 80px;}
.line_effect_area>div{position: relative;}

.line-blue{position: relative; height:1503px}
.line-blue .line_effect_blue{position:absolute; left:50%; width:16px; height:450px; background-color: #3182F7; transform: translateX(-50%); border-radius: 0 0 10px 10px;}
.line-blue > svg{margin:0 auto; stroke-dasharray: 1600px; stroke-dashoffset: 1600px;}

.line-pink {fill: none; stroke: #EF5C91; stroke-width: 16px; stroke-dasharray: 800px; stroke-dashoffset: 800px;}
.line-green {fill: none; stroke: #31C4B4; stroke-width: 16px; stroke-dasharray:800px; stroke-dashoffset: -800px;}
.line-yellow {fill: none; stroke: #FFC227; stroke-width: 16px; stroke-dasharray: 800px; stroke-dashoffset: 800px;}

.line_box{position:absolute; width:540px;}
.line_box.pink{top:459px; right:calc(50% + 8px);}
.line_box.green{top:933px; left:calc(50% + 8px);}
.line_box.yellow{top:1134px; right:calc(50% + 8px);}

/* line dot effect */
.line-blue .line_dot{left:calc(50% - 20px); z-index:2;}
.line-blue .line_dot:nth-child(1){top:745px; transform: translateY(-50%);}
.line-blue .line_dot:nth-child(2){top:940px; transform: translateY(-50%);}
.line-blue .line_dot:nth-child(3){top:1141px; transform: translateY(-50%);}
.line-blue .line_dot:nth-child(4){top:calc(100% - 20px)}

/* line effect txt */
.absol_txt strong {font-size:24px; font-weight:600;}
.absol_txt.strategy_txt{display: flex; gap:60px; top:442px; left:calc(50% - 20px); opacity:1; z-index:1;}
.strategy_txt>div{width:calc(100% - 100px); max-width: 400px;}
.strategy_txt strong{font-size:32px; font-weight: 600;}
.strategy_txt p{margin-top:24px; font-size:20px;}

.affordance_txt{display: flex; gap:24px; align-items: center; top:44%; right:calc(50% - 20px); transform: translateY(-50%);}
.nudge_txt{display: flex; flex-direction: column; align-items: center; top:26px; left:calc(29% - 10px); transform: translateY(-50%);}
.react_txt{display: flex; flex-direction: column; align-items: center; top:26px; left:calc(62% - 10px); transform: translateY(-50%);}

.line_end_box{margin:60px 0 200px; text-align: center;}
.line_end_box strong{display:inline-block; font-size: 48px; font-weight: 700; color:#1f1f1f; opacity:0; transform: translateY(50px);}
.line_end_box p{margin-top:24px; font-size: 24px; font-weight: 600; color:#999; opacity:0; transform: translateY(50px);}

.line_dot.pink{position:absolute;}



/* section04 */
#section04{margin:0 auto;}
#section04 .pay_area{display: flex; height:1080px;}
#section04 .pay_area>div{width:50%; height:100%}
#section04 .pay_area .lottie-button{display:flex; background-color: #0028A0; align-items: center; justify-content: center;}
#section04 .pay_area .lottie-button svg{max-width:160px;}
#section04 .pay_area .pay_area_bg{position:relative; background: url('/static/images/portfolio/wooricardpay/pay_button_img.png') no-repeat center center; background-size:cover;overflow: hidden;}
#section04 .pay_area .pay_area_bg .vid_box{top:0; left:50%; width:100%; min-width: 1920px; height:100%; transform: translateX(-50%);}

#section04 .main_pay_area{background-color:#3182f7;}
#section04 .main_pay_area .section_textbox>div,
#section04 .main_pay_area p{color: #fff}

#section04 .main_pay_area .section_textbox{padding-bottom:80px;}
#section04 .main_pay_area .point_txt sup{margin-left:2px; font-size:16px; color:#33c5ff}
/* #section04 .main_pay_area .stit{font-size:20px; font-weight: 500;} */

#section04 .section04_vid_01{display:flex; justify-content: space-between; margin:0 auto 24px; width:calc(100% - 400px); max-width: 1520px;}
#section04 .section04_vid_01>div{width:50%;}
#section04 .section04_vid_01 .phone_img_box{display: flex; gap:24px;}
#section04 .phone_figure{position:relative; width:368px; height:800px; border-radius: 40px; overflow: hidden; background-color:#fff;}
#section04 .section04_vid_01 .phone_figure .vid_box{top:50%; left:50%; width: 100%; height:100%; transform: translate(-50%, -50%);}
#section04 .section04_vid_01 .phone_figure .vid_box>video{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}

#section04 .section04_vid_02 {margin:0 auto; width:calc(100% - 400px); max-width: 1520px;}
#section04 .section04_vid_02 ul{display:flex;}
#section04 .section04_vid_02 ul:not(:last-of-type){margin-bottom:24px;}
#section04 .section04_vid_02 ul:last-of-type{margin-bottom:240px;}
#section04 .section04_vid_02 ul:last-child{margin:0 auto 240px;}
#section04 .section04_vid_02 ul li:last-child{display: flex; align-items: flex-end;}
#section04 .section04_vid_02 .cardphone_area{position:relative; display:flex; align-items: flex-end; justify-content: center; width:50%; height:800px; background-color:#186DE8; border-radius: 64px; overflow: hidden;}
#section04 .section04_vid_02 .cardphone_area .vid_box{top:0;}
#section04 .section04_vid_02 .cardphone_area .vid_box video{max-width:initial; height:80%; max-height:1280px;}
/* #section04 .section04_vid_02 .cardphone_area .vid_box::before{position:absolute; top:-10px; left:0; content:''; width:100%; height:20px; background-color: #186DE8;} */
#section04 .section04_vid_02 ul li{width:50%;}


#section04 .section04_vid_02 .section_textbox{display:block; padding:0 0 64px 64px; width:100%}
#section04 .section04_vid_02 .section_textbox>*{width:100%}
#section04 .section04_vid_02 .section_textbox .point_txt{margin-bottom:24px;}


/* section05 */
#section05{padding:240px 0;}
#section05>div{display: flex; gap:24px; margin:0 auto; max-width: 1720px; width: calc(100% - 40px); height:800px;}
#section05>div>div{position:relative; width:calc(50% - 12px); overflow: hidden; border-radius:64px;}

#section05 .slide_area{background-color:#1f1f1f}
#section05 .img_area{position:relative; background-color:#33c5ff;}
#section05 .img_area>img{position:absolute; bottom:0; left:50%; transform:translateX(-50%); max-width:868px;}

#section05 .swiper-pagination{bottom:80px;}
#section05 .swiper-pagination-bullet{margin:0 5px; width:12px; height:12px; background-color:#484848; border-radius:24px; opacity:1; transition:.5s;}
#section05 .swiper-pagination-bullet.swiper-pagination-bullet-active{width:40px; height:12px; background-color: #33c5ff;}
#section05 .slide_area li{display:flex; align-items: center; justify-content: center;}
#section05 .slide_area li img{max-width:480px;}

/* section06 */
#section06{height:300vh; overflow: hidden;}
#section06 .section06_pin{position:absolute; width: 100%;}

#section06 .txt_area{display:flex; flex-direction: row-reverse; align-items: center; margin:0 auto; max-width: 1520px; width:calc(100% - 400px);}
#section06 .txt_area ul{padding-left:64px; width: 50%;}
#section06 .txt_area li{display:flex; flex-direction: column; justify-content: center; height: 100vh;}
#section06 .txt_area li>*{color:#1f1f1f;}
#section06 .txt_area li strong{display:block; margin-bottom:24px; font-size: 32px; font-weight: 600;}
#section06 .txt_area li p{font-size: 20px; font-weight: 500;}

.section06_pin .vid_area{margin:0 auto; display: flex; max-width:1520px; width:calc(100% - 400px); height:calc(100vh - 80%);}
.section06_pin .vid_area>div{position:relative; width:50%;}
.section06_pin .vid_area ul{position: absolute; top:50%; left:50%; width:369px; height:800px; transform: translate(-50%, -50%); border-radius:40px; border:12px solid #000; overflow: hidden; box-sizing: initial;}
.section06_pin .vid_area ul li{position:absolute; width:100%; height:100%; background-color: #fff;}
.section06_pin .section_textbox{display:flex; flex-direction: column; justify-content: space-between; padding:0 0 0 64px; margin:0; width:50%;}
#section06 .section_textbox .point_txt{display:block; height:160px; padding:0; width:100%}
#section06 .section_textbox sup{font-size:16px; color:#3182f7}

.section06_pin .section_textbox .gradation{width:100%; height:80px; background:linear-gradient(0, rgba(255,255,255,1), rgba(255,255,255,0) 50%);}
.section06_pin .section_textbox .point_txt.gradation{background:linear-gradient(0, rgba(255,255,255,0), rgba(255,255,255,1) 50%);}
.section06_pin .white_box{width:100%; height:40%; background-color: #fff;;}

#section06Img{margin-top:240px;}
#section06Img .bg_img{height:1080px; background: url('/static/images/portfolio/wooricardpay/section06_full_img.webp') no-repeat center center; background-size:cover;}

/* section07 */
#section07{padding:240px 0 0;}
#section07 .section07_list_box{margin:0 auto; max-width: 1520px; width:calc(100% - 40px);}
#section07 .section07_list_box>ul{margin-bottom: 24px; min-height:800px;}
#section07 .section07_list_box>ul:last-child{margin:0;}
#section07 .section07_list_box ul li{position: relative}
#section07 .point_txt sup{margin-left:2px; font-size:16px; font-weight: 600; color:#3182f7;}
#section07 .section07_list_box .phone_box{width:100%; height:100%;}
#section07 .section07_list_box .phone_box>img{width:80%; max-width: 360px;}

#section07 .section07_top{margin-bottom:24px; display: flex; gap: 24px;}
#section07 .section07_top i{display:inline-block; width:128px; height:128px; border-radius:50%;}
#section07 .section07_top i.ico_pen{background:#0028A0 url('/static/images/portfolio/wooricardpay/ico_pen_w.svg') no-repeat center center; }
#section07 .section07_top i.ico_smile{background:#0028A0 url('/static/images/portfolio/wooricardpay/ico_smile_w.svg') no-repeat center center; }
#section07 .section07_top .point_txt{padding:0 48px;width:calc(100% - (24px + 128px)); height:128px; background-color:#0028A0; border-radius: 64px; color:#fff; line-height: 114px;}
#section07 .section07_top sup{color:#33c5ff;}

#section07 .txt_area{display:flex; flex-direction: column; justify-content: space-between; padding:80px 64px; height:100%; background-color:#0028a0; border-radius: 64px;}
#section07 .txt_area *{font-size:20px; font-weight:500;}
#section07 .txt_area p{color:#fff;}
#section07 .txt_area ol em,
#section07 .txt_area ol p{color:#33c5ff}
#section07 .section07_top + .txt_area{height:calc(100% - (128px + 24px))}

#section07 .gray_area{background-color:#f2f2f2;}
.motion-clap{width: 438px;}
.lottie-check-blue svg g:first-child path{fill:#e6e6e6;}
#section07 .lottie_box{width: 160px;}
#section07 .number{position:absolute; top:64px; left:64px; font-size:20px; font-weight:600; color:#0028a0}

#section07 .vid_box{position:relative; width: 240px; height:520px; border:8px solid #000; border-radius:32px; overflow: hidden; box-sizing: initial;}
#section07 .vid_box video{position: absolute;}


/* section08 */
#section08>div:not(:last-of-type){margin-bottom:24px;}
#section08>div{ margin:0 auto; width:calc(100% - 40px); max-width: 1760px;}
#section08 .rolling_area{position: relative; padding-left:64px; height:1080px;border-radius:64px; overflow: hidden; background-color:#3182f7;}
#section08 .rolling_area>div{position: absolute;}
#section08 .rolling_area .text{width:80%;}
#section08 .rolling_area .phone_box{top:50%; left:50%; width: 360px; height:780px; transform: translate(-50%, -50%); border-radius:40px; overflow: hidden;}
#section08 .rolling_area .phone_box ul{display: flex; animation: slide 10s infinite; /* 애니메이션 적용 */}
#section08 .rolling_area .phone_box ul li{width: 360px; height:780px;}

#section08 .fl_center{background-color:#ECF5FD;}
#section08Img .bg_img{height:1080px; background:url('/static/images/portfolio/wooricardpay/section08_full_img.webp') no-repeat center center; background-size:cover;}

/* section09 */
#section09{background-color:#f2f2f2;}
#section09 .txt_effect{display:flex; flex-direction: column; align-items: center; justify-content: center; margin:0 auto; width:100%; max-width:1920px; height:1080px}
#section09 .txt_effect>div{display: flex;}
#section09 .txt_effect p{font-size:80px; font-weight:700; color:#1f1f1f;}
#section09 .txt_effect>div{width:880px;}
#section09 .txt_effect .motion_div{width:0; overflow: hidden; transition: width .6s ease-in-out;}
#section09 .txt_effect .first_txt .motion_div{width: 24px;}
#section09 .txt_effect .second_txt .motion_div p{width:740px; height:128px; background:url('/static/images/portfolio/wooricardpay/section09_list_img.png') no-repeat;}
#section09 .txt_effect .third_txt .motion_div{position:relative;}

#section09 .txt_effect .third_txt .motion_div .motion_box{width:728px; display: flex;}
#section09 .txt_effect .third_txt .motion_div .motion_box p{width:496px; height:128px; background:url('/static/images/portfolio/wooricardpay/third_txt_02.png') no-repeat;}
#section09 .txt_effect .third_txt .motion_div .motion_box div{width:0; height:128px; transition:.6s; transition-delay:.1s;}
#section09 .txt_effect .first_txt.active .motion_div{width:calc(100% - (204px * 2));}
#section09 .txt_effect .second_txt.active .motion_div{width:calc(100% - (66px * 2));}
#section09 .txt_effect .third_txt.active .motion_div{width:calc(100% - (16px + 136px));}
#section09 .txt_effect .third_txt.active .motion_div .motion_box div{width:calc(100% - 496px);}

/* section10 */
#section10{display:flex; justify-content: center; background-color: #1f1f1f; height:1080px;}
#section10>div{display:flex; align-items: flex-end; flex-direction: column; margin:0 auto; width: calc(100% - 400px); max-width:1520px;}
#section10 .direct_list{margin:0 auto; width: 100%; max-width: 1920px;}
#section10 .direct_list>li{display: flex; gap:64px; font-size:20px; font-weight:500; }
#section10 .direct_list>li:not(:last-child){margin-bottom:24px;}
#section10 .direct_list>li>*{width: calc(50% - 32px);}
#section10 .direct_list strong{display:inline-block; text-align: right; color:#666;}
#section10 .direct_list ul{display: flex; flex-wrap: wrap;}
#section10 .direct_list ul li{display:flex; align-items: center; color:#fff;}
#section10 .direct_list ul li:not(:last-child){margin-right:24px;}
#section10 .copyright_area{margin-top:80px; width:calc(50% - 32px); font-size:16px; font-weight:600; color:#fff}

.color_box{position:relative; height:1080px;}
.color_box .color_txt{display: flex; justify-content: space-between; padding:64px; font-size:24px; font-weight:600; color:#fff}
.color_box .color_txt.black{color:#333}
.color_box .color_chip{position:absolute; left:50%; width:calc(100% + 2px); transform: translateX(-50%); border-radius:64px 64px 0 0;}

.color_box .color_chip{bottom:-1px; height:17%;}
.color_box:first-child .color_chip:nth-child(1){width:calc(100% - 1.5px);}
.color_box:first-child .color_chip:nth-child(2){width:calc(100%);}
.color_box .color_chip:nth-child(1){width:calc(100% - 1.5px); top:0; height:calc(17% * 5);}
.color_box .color_chip:nth-child(2){width:calc(100% - 1.5px); height:calc(17% * 3); bottom:calc(17% * 2)}
.color_box .color_chip:nth-child(3){width:calc(100% - 1.5px); height:calc(17% * 2); bottom:calc(17% * 2)}
.color_box .color_chip:nth-child(4){height:calc(17% * 3); bottom:0}
.color_box .color_chip:nth-child(5){height:calc(17% * 2); bottom:0}
.color_box .color_chip:nth-child(6){height:17%; bottom:0;}

.color_box .color_chip.secondary{bottom:0; height:360px;}
.color_box .color_chip.secondary .color_txt{color:#3182F7}

.font_box{display:flex; gap:24px; margin-top:24px; padding:64px; min-height:1080px; background-color:#ecf5fd; border-radius: 64px;}
.font_box li{display:flex; flex-direction: column; justify-content: space-between; width:calc(50% - 12px);}
.font_box>*{color:#3182f7}
.font_box .font_txt{font-size:24px; font-weight:600;}
.font_box .font_txt.txt_space{letter-spacing:.5rem}
.font_box .big_txt{font-size:400px; font-weight:600;}
.font_box li:first-child .big_txt{font-size:480px; font-weight:500;}

.line_dot{display: inline-block; width: 40px; height:40px; background: url('/static/images/portfolio/wooricardpay/line_dot.png'); background-size: 100%;}
.absol_txt{position: absolute; opacity: 0;}
#section02 .text-area{
  height:1040px;
  background-color:#F2F2F2;
}

@media (min-width: 769px) and (max-width: 1919px) {
  #section04 .section04_vid_02 .cardphone_area .vid_box video{max-width:initial; height:66.667vw;}
  #section04 .section04_vid_01 .phone_img_box,
  #section04 .section04_vid_02 ul li{gap:12px}
  #section04 .phone_figure{width:calc(50% - 6px); height:0; padding-bottom:105%; border-radius: 2.083vw;}
  #section04 .section04_vid_02 .cardphone_area{height:0; padding-bottom:50%; border-radius:3.333vw;}
  #section04 .section04_vid_02 .cardphone_area .vid_box{bottom:-23.438vw;}

  .font_box .big_txt{font-size:20.833vw;}
  .font_box li:first-child .big_txt{font-size:25vw;}
}

@media (min-width: 769px) and (max-width: 1760px) {
  .section01_animation>div{height:45.455vw; border-radius:3.636vw;}
  .section01_animation .pay_txt_box{padding-left:13.636vw;}
  .section01_animation .pay_img_box{padding-left:5.091vw;}
  .pay_img_box>div{
    width:28.636vw;
    border-right:solid 0.682vw #000;
    border-left:solid 0.682vw #000;
    border-bottom:solid 0.682vw #000;
    border-radius: 0 0 3.636vw 3.636vw;
  }
  .pay_toggle{width: 4.432vw; height: 2.557vw;border-radius: 2.557vw;}
  .pay_toggle span{left: -0.168vw; display: inline-block; width: 3.182vw; height: 3.182vw;}
  .section01_animation.active .pay_toggle span{left:1.591vw}
  
  .pay_img_box .screen_box{transform: translateY(calc(11.534vw - 4.545vw));}
  .pay_img_box .screen_top{height:4.545vw; border-radius: 2.386vw 2.386vw 0 0; background-size: 10.455vw;}
  .section01_animation.active .pay_img_box .screen_box{transform: translateY(0.795vw);}
  .section01_animation.active .pay_img_box .screen_top{background-position:center -4.545vw;}

  .section01_animation .pay_txt .woori{width:4.432vw}
  .section01_animation .pay_txt .pay{width:4.545vw}
  .pay_txt .won em,
  .section01_animation.active .pay_txt .won{width:8.011vw;}


  #section05 .swiper-pagination{bottom:4.545vw;}
}

@media (min-width: 769px) and (max-width: 1560px) {
  .line_dot{width:2.564vw; height:2.564vw;}
  .line-blue .line_effect_blue{width:1.026vw; transform: translateX(0);}
  .img_effect ul li{width:calc(50%);}
  .strategy_txt,
  .line-blue .line_dot{left: calc(50% - 0.713vw);}
  .line_box.pink{right: calc(50% );}
  .line_box.pink svg path{stroke-width:1.026vw;}
  .line_box.green{left: calc(50% + 1.026vw);}
  .line_box.green svg path{stroke-width:1.026vw;}
  .line_box.yellow{right: calc(50%);}
  .line_box.yellow svg path{stroke-width:1.026vw;}
  .affordance_txt{right: calc(50% - 1.136vw);}
  .line-blue .line_dot:nth-child(4){top:calc(100% - 0.713vw)}
  .absol_txt.strategy_txt{gap:3.846vw; left: calc(50% - 0.713vw);}
}

@media (min-width: 769px) and (max-width: 1380px) {
  .section_textbox,
  .section02_animation,
  #section04 .section04_vid_01,
  #section04 .section04_vid_02,
  .section06_pin .vid_area,
  #section06 .txt_area,
  #section10>div,
  .section03_pin .section_txt{width: calc(100% - 20%);}
  #section07 .section07_top i.ico_smile{display: none;}
  #section07 .section07_top .point_txt.full_area{width: 100%; white-space: nowrap;}
  #section07 .section07_list_box .phone_box>img{width:60%;}
}

@media (min-width:769px) and (max-width:1023px) { 
  .section06_pin .vid_area ul{width: 36.07vw; height:78.201vw; border-radius:3.91vw; border:1.173vw solid #000}
}

@media (max-height: 800px){
  .section06_pin .vid_area ul{width: calc(40.4vh - 20px); height: calc(84vh - 20px); border-radius: 5vh; border: 1.5vh solid #000;}
}

@media (min-width: 769px) and (max-width: 1080px) {
  .section_textbox{display: block;}
  .section_textbox>div{width: 100% !important;}
  .section_textbox .point_txt{margin-bottom: 24px;}

  .section03_pin .text_effect .txt_hidden{height: 45px;}
  .section03_pin .text_effect>*{font-size:30px}
  .section03_pin .section_txt li{height:21px; font-size: 14px;}

  #section04 .section04_vid_02 ul{align-items: center;}
  #section04 .section04_vid_02 .section_textbox{padding: 64px 0 64px 64px;}

  #section09 .txt_effect>div{width:100%; max-width:880px;}

  #section04 .phone_figure{padding-bottom:103%}

  .section06_pin .section_textbox .point_txt.gradation{margin-top:-1px; height:160px;}
  
}

/* 모바일 */
@media screen and (max-width: 768px) {
  #free .pc_only{display: none !important;}
  #free .mo_only{display: initial !important;}
  #free .free_scroller {width: 100%;  display: block; overflow: hidden;}
  .bg_visual {background-size: cover;}

  section p,
  section .section_textbox{word-break:normal}
  
  #free .linebreak {display: block;}
  .large_wrap {margin: 0 auto; padding: 0 16px; width: 100%;}
  .tit {font-size: 24px;}
  .stit {font-size: 16px; font-weight: 500; line-height: 1.6em; letter-spacing: 0;margin-top: 24px;}
  .desc {font-size: 13px; font-weight: 400; line-height: 1.4em;}
  .point_txt {margin-bottom:24px; font-size: 24px; line-height: 1.2em; letter-spacing: 0;} 
  .flex_box{display: block; padding:0 16px;}
  .flex_box>div{width: 100%; height:343px; border-radius: 40px;}
  .section_textbox {display: block; padding:120px 24px 80px; width:100%;}
  .section_textbox .stit{width:100%;}
  .section_textbox .point_txt{width:100%;}

  .mo_slide_common .swiper-slide{opacity:.5; transition: .5s; margin-left:16px;}
  .mo_slide_common .swiper-slide-active{opacity:1;}

  section .fl_two{display: block;}
  section .fl_two>li{width:100%; border-radius:32px;}

  #section07 .gray_area{background-color:#e6e6e6;}
  #section07 .gray_area_f2{background-color:#f2f2f2;}
  
  /* section01 - mo*/
  .section01_animation{padding:0 16px; overflow: hidden;}
  .section01_animation>div{padding-bottom:64px; width: 100%; height:400px;flex-direction: column-reverse; justify-content: space-between; border-radius:32px;}
  .section01_animation .pay_txt_box{justify-content: center; padding:0;}
  .pay_img_box>div{
    position: relative;
    margin:0 auto;
    width:256px;
    border-right:solid 8px #000;
    border-left:solid 8px #000;
    border-bottom:solid 8px #000;
    border-radius: 0 0 32px 32px;
  }
  .section01_animation .pay_txt_box{ width:100%;}
  .section01_animation>div>div{width: 100%;}
  .section01_animation .pay_img_box{padding-left:0; margin-top:-20px;}

  .pay_img_box .screen_top{height:40px; border-radius: 21px 21px 0 0; background-size:92px;}
  .pay_toggle{position:relative; margin-right:10px; width: 34px; height:19px;}
  .pay_toggle span{left:-2px; display: inline-block; width:24px; height:24px;}

  .pay_txt>span{display: inline-block; vertical-align: middle;}
  .pay_txt .won{width:0; height:19px;}
  .pay_txt .won em{display:inline-block; width:60px; padding-bottom:19px; background:url('/static/images/portfolio/wooricardpay/won_txt.svg') no-repeat center; background-size:100%;}
  .section01_animation .pay_txt .woori{width:33px}
  .section01_animation .pay_txt .pay{width:33px}
  .pay_img_box .screen_box{position: absolute; bottom:0; transform: translateY(calc(203px - 80px)); transition: transform .8s}

  .section01_animation.active .pay_toggle span{left:14px;}
  .section01_animation.active .pay_txt .won{width:59px;}
  .section01_animation.active .pay_img_box .screen_box{transform: translateY(14px);}
  .section01_animation.active .pay_img_box .screen_top{width: 100%; background-position: center -40px;}

  .bubble_box ul li{opacity:1; display: inline-block; width: auto;}

  /* section02 - mo*/
  #section02{flex-direction: column-reverse; padding:0;}
  .section02_animation{width:100%; margin-bottom:120px; padding:0 24px;}
  .section02_animation>p{margin-bottom:24px; font-size:16px;}
  .bar_box{margin-bottom:80px;}
  .bar_box span{font-size: 14px;}
  .bubble_box{display: block; margin-bottom:80px;}
  .bubble_box>div{width:100%;}
  .bubble_box .bubble_left{margin-bottom:40px;}
  .bubble_box ul{width:640px;gap:0;}
  .bubble_box strong{font-size:14px;}
  .bubble_box img{height:40px;}

  #section02 ol{font-size:14px; font-weight:500;}
  #section02 ol em{margin-right:16px;}

  /* section03 - mo*/
  .line_dot{
    position:absolute;
    width:20px; height:20px;
  }
  #section03{min-height:auto; height:auto;}
  #section03 .section03_pin {height: auto; min-height: auto;}
  /* #section03 .img_effect_mo{display:flex; width:200vw; min-width: 750px; height:100vh;} */
  #section03 .img_effect_mo{display:flex; width:200vw;}
  /* #section03 .img_effect_mo>li{position:relative; display:flex; align-items: flex-end; justify-content: center; width:50%} */
  #section03 .img_effect_mo>li{position:relative; display:flex; flex-direction: column; align-items: center; justify-content: flex-start; width:50%; overflow: hidden;}
  #section03 .img_effect_mo>li img{max-width:375px;}

  .blue_line{position: absolute; top:-95px; left: calc(50% - (161px - 8.5px));}

  .section03_pin .section_txt{position:static; padding:120px 0 64px; width:calc((100% - 48px)); transform: translateX(0); height:auto; margin:0 auto;}
  .section03_pin .section_txt>div>p{margin-bottom:40px; font-size: 16px;}
  .section03_pin .text_effect .txt_hidden{height:36px}
  .section03_pin .text_effect>*{font-size: 24px;}

  #section03Line{background-color:#f2f2f2; padding:0; min-width:375px;}

  .line_effect_area{margin-bottom:0; height:1165px; overflow: inherit;}
  .line_effect_area::before{display: none;}
  .line_end_box{margin-bottom:0;}
  .line_end_box strong{font-size:32px;}
  .line_end_box p{margin-top:8px; font-size:20px;}
  .strategy_txt strong{font-size: 24px;}
  .strategy_txt p{font-size: 16px; font-weight: 500;}
  .affordance_txt strong{font-size: 20px;}
  .react_txt strong{font-size: 20px;}


  .pink_box .line{width:50vw; height:8px; background-color:#EF5C91;}

  .green_box{display: flex; align-items: flex-end;}
  .green_box svg{max-width:187px;}
  .green_box .line{width:30vw; height:8px; background-color:#31C4B4;}
  
  .yellow_box{display: flex;}
  .yellow_box svg{margin-left:-1px; max-width:120px;}
  .yellow_box .line{width:calc(50vw - 120px); height:8px; background-color:#FFC227;}

  /* section04 - mo*/
  #section04 .main_pay_area .section_textbox{padding-bottom:40px;}
  #section04 .pay_area{display: block; height:400px;}
  #section04 .pay_area>div{width: 100%;}
  #section04 .pay_area .lottie-button svg{max-width:80px;}
  
  #section04 .main_pay_area{padding-bottom:120px;}

  #section04 .section04_vid_01,
  #section04 .section04_vid_02{width:100%}
  #section04 .section04_vid_02 ul{flex-direction: column-reverse;}
  #section04 .section04_vid_02 ul:first-child{margin:120px 0;}
  #section04 .section04_vid_02 ul li,
  #section04 .section04_vid_02 .cardphone_area{display:block; margin:0 auto; width:100%;}
  #section04 .section04_vid_02 .cardphone_area{ width:calc(100% - 32px); height:400px; border-radius:32px;}
  #section04 .section04_vid_02 .section_textbox{padding:0  24px 40px}
  #section04 .section04_vid_02 .cardphone_area .vid_box{width:1640px; left:50%; bottom: -100%; border-radius: 32px; transform: translateX(-50%);}
  #section04 .section04_vid_02 .cardphone_area .vid_box video{max-width:100%; height:auto;}

  #section04 .vid_box{width:100%;}
  
  /* #section04 .phone_figure{width:240px; height:512px; padding-bottom:0; border-radius: 32px;} */
  #section04 .phone_figure{width:64vw; min-width: 240px; height:136.533vw; min-height:512px; padding-bottom:0; border-radius: 8.533vw; background-color:transparent;}
  #section04 .phone_figure img{position: absolute; top:50%; left:50%; width:100%; transform: translate(-50%, -50%);}

  /* section05 - mo*/
  #section05{padding:0;}
  #section05>div{display: block; width: 100%; height: auto;}
  #section05 .img_area{display: block; width: 100%; height:400px;}
  #section05>div>div{border-radius:0;}
  #section05 .img_area>img{left:inherit; right:0; width:375px; transform: translateX(0);}

  /* section06 - mo*/
  #section06Mo{position: relative; overflow: hidden;}
  #section06Mo .section_textbox{padding-bottom:40px;}
  #section06Mo .section_textbox .point_txt{margin-bottom:0; padding-right:0;}
  #section06Mo .section_textbox sup{margin-left:2px; font-size:14px; color:#3182f7}
  #section06Mo .phone_box .vid_box{position:relative; margin:0 auto; width:240px; height:512px; box-sizing:initial; border-radius:32px; border: 8px solid #000; overflow: hidden;}
  
  #section06Mo .txt_area{padding-bottom:40px}

  #section06Mo .txt_area li{display:flex; gap:16px; padding:0 24px 16px;}
  #section06Mo .txt_area li:last-child{padding-bottom:0;}

  #section06Mo .txt_area li em{display:inline-block; width: 16px; font-size: 16px; font-weight:600; color:#1f1f1f;}
  #section06Mo .txt_area li em + div{width:calc(100% - (16px * 2));}

  #section06Mo .txt_area li strong{font-size:16px; font-weight:600; color:#1f1f1f;}
  #section06Mo .txt_area li p{margin-top:8px; font-size: 16px; font-weight:500; color: #1f1f1f}

  #section06Img{margin-top:120px;}
  #section06Img .bg_img{height:640px; background:url('/static/images/portfolio/wooricardpay/section06_full_img_mo.webp') no-repeat center center; background-size:640px;}

  /* section07 - mo*/
  #section07{padding:120px 0 0;}
  #section07 .section07_list_box{width:calc(100% - 32px);}
  #section07 .section07_top{gap:8px; margin-bottom:8px;}
  #section07 .section07_list_box>.section07_top{flex-direction: row-reverse;}
  #section07 .section07_top .point_txt{width:calc(100% - (64px + 8px)); height:64px; margin:0;padding: 0 24px; font-size:20px; line-height:52px; white-space:nowrap}
  #section07 .section07_top i{width:64px; height:64px;}
  #section07 .section07_top i.ico_pen,
  #section07 .section07_top i.ico_smile{background-size:24px;}
  #section07 .section07_list_box ul li:not(:last-of-type){margin-bottom:8px;}
  #section07 .fl_two{display: block;}
  #section07 .fl_two>li{width:100%;}

  #section07 .txt_area{padding:32px 24px; min-height:400px; border-radius:32px;}
  #section07 .txt_area *{margin-right:16px; font-size:16px;}
  #section07 .txt_area>div,
  #section07 .txt_area>div p{margin-right:0;}

  #section07 .vid_box{position:absolute; top:80px; width:231px; height:501px; border:0;}
  #section07 .number{top:24px; left:24px; font-size:16px}
  #section07 .section07_list_box .phone_box>img{max-width:231px;}

  .pagination_common_swiper{position:relative; height:400px;}
  .pagination_common_swiper .swiper-slide{position:relative; display: flex; align-items: center; justify-content: center;}

  .pagination_common_swiper .swiper-pagination{position: absolute; top:33px !important; padding-right:24px; height:8px; display: flex;justify-content: flex-end; z-index:10;}
  .pagination_common_swiper .swiper-pagination-bullet{margin:0 3px !important; width:8px; height:8px; background-color:#c4c4c4; opacity: 1; transition: .6s;}
  .pagination_common_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{width:24px; height:8px; border-radius: 24px; background-color:#0028A0;}

  .motion-clap{width:264px;}
  .lottie-check-blue,
  .lottie-check{width: 120px;}

  #section07 .number{position:static;}
  #section07 .mo_number_list{position:absolute; top:33px; z-index:10;}
  #section07 .mo_number_list li{opacity:0; padding-left:24px; position: absolute !important; top:0;}
  #section07 .mo_number_list li.active {opacity:1;}

  /* section08 - mo*/
  #section08 .rolling_area{margin-bottom:80px !important; padding-left:0; width:100%; height:800px; border-radius:0;}
  #section08 .rolling_area .text{padding-left:15px; width: 100%;}
  #section08 .rolling_area .text img{min-width:400px; width:100%; max-width:630px;}
  #section08 .rolling_area .phone_box{width:240px; height:520px; border-radius:32px;}
  #section08 .rolling_area .phone_box ul li{width:240px; height:520px;}
  
  #section08>div{width:calc(100% - 32px);}
  #section08>div:not(:last-of-type){margin-bottom:16px;}
  #section08 .fl_two li:not(:last-of-type){margin-bottom:16px;}

  .color_box{height:720px;}
  .color_box .color_chip{border-radius:32px 32px 0 0;}
  .color_box .color_chip.secondary{height:240px;}
  .color_box .color_txt{font-size: 16px;padding:32px 24px;}

  .font_box{padding:32px 24px; min-height:720px; border-radius:32px; overflow: hidden;}
  .font_box li{width: 100%;}

  .font_box .font_txt{font-size:16px;}

  .font_box li:first-child .big_txt{font-size:58.667vw; text-align: center; line-height: 1;}
  .font_box .font_txt.txt_space{letter-spacing: 0.35rem;}
   

   #section09 .txt_effect{height:800px;}
   #section09 .txt_effect>div{width:calc(100% - 48px) ; max-width: 327px;}
   #section09 .txt_effect>div>*,
   #section09 .txt_effect .second_txt .motion_div p,
   #section09 .txt_effect .third_txt .motion_div .motion_box div{height:58px;}
   #section09 .first_txt p{width:94px;}

   #section09 .txt_effect .first_txt .motion_div{width: 8px;}
   #section09 .second_txt>p{width:32px;}
   #section09 .txt_effect .second_txt .motion_div p{margin: 0 auto; width: 246px; background:url('/static/images/portfolio/wooricardpay/section09_list_img_mo.png') no-repeat; background-position: center center; background-size:contain;}
   #section09 .third_txt>p:first-child{width:63px;}
   #section09 .third_txt>p:last-child{width:7.2px; margin-left:0.8px;}
   
   #section09 .txt_effect .third_txt .motion_div .motion_box p{width:227px; height:58px; background-position: center center; background-size:contain;}
   
   #section09 .txt_effect .first_txt.active .motion_div{width: calc(100% - (94px* 2));}
   #section09 .txt_effect .second_txt.active .motion_div{width: calc(100% - (32px* 2));}
   #section09 .txt_effect .third_txt.active .motion_div{width: calc(100% - (63px + 8px))}
   #section09 .txt_effect .third_txt.active .motion_div .motion_box{width: calc(100% )}
   #section09 .txt_effect .third_txt.active .motion_div .motion_box div{width: calc(100% - 227px);}
   
   

   #section10{height:800px;}
   #section10>div{width: 100%;}
   #section10 .direct_list>li{gap:40px; font-size: 16px;}
   #section10 .copyright_area{width:100%; text-align: center;font-size:14px;}

   #section10 .woori_logo img{width:92px;}

   .m_only .line_dot{position:absolute; z-index: 10; transition: .4s;}
   .m_only .dot_box{position:absolute; top:0; bottom:0; right:0; left:0; z-index:10;}
   .m_only .dot_box>*{opacity:0;}
   .m_only .pink_box.active::after{right:100%;}
   .m_only .green_box.active::after{left:100%;}
   .m_only .yellow_box.active::after{right:100%;}
   .m_only .blue_line.active::after{top:100%;}

   .m_only .blue_line .dot_box .line_dot.first{left:-6px; bottom:850px;}
   .m_only .blue_line .dot_box .line_dot.second{right:-2px; bottom:-10px;}
   
   .pink_box{position:absolute; top:610px; left:calc(50% + 4px); z-index:5;}
   .green_box{position:absolute; top:720px; right:calc(50% + 6px); z-index:5;}
   .yellow_box{position:absolute; top:850px; left:calc(50% + 4px); z-index:5;}
   
   .pink_box .line_dot{top:-6px; left:-15px;}
   .green_box .line_dot{top:-6px; right:-15px;}
   .yellow_box .line_dot{top:-6px; left:-15px;}

   .m_only .strategy_txt{position: absolute; bottom: 724px; left: 30px; max-width:300px; width:78.1vw; height:150px; z-index: 10;}
   .m_only .blue_line .dot_box>*{opacity:1; transition:.4s;}
   .m_only .blue_line .dot_box .line_dot.second{opacity:0;}
   .m_only .affordance_txt{width:104px; position: absolute; top:18px; left:30px; padding-top:20px;}
   .m_only .affordance_txt .line_dot{top:0; left:50%; transform: translateX(-50%);}
   .m_only .affordance_txt strong{ font-size:20px; font-weight:600;}
   .m_only .nudge_txt{width:87px; position: absolute; left:initial; top: 36px; right: 63px; padding-right:20px;}
   .m_only .nudge_txt .line_dot{top:50%; right:0; transform: translateY(-50%);}
   .m_only .nudge_txt strong{ font-size:20px; font-weight:600;}
   .m_only .react_txt{width:104px; position: absolute; top:18px; left:30px; padding-top:20px;}
   .m_only .react_txt .line_dot{top:0; left:50%; transform: translateX(-50%);}
   .m_only .react_txt strong{ font-size:20px; font-weight:600;}

   .m_only .pink_box::after{position:absolute; top:50%; left:0; right:0; height:calc(100% + 4px); transform: translateY(-50%); content: '';background-color:#f2f2f2; transition: .4s;}
   .m_only .green_box::after{position:absolute; top:50%; left:0; right:0; height:calc(100% + 4px); transform: translateY(-50%); content: '';background-color:#f2f2f2; transition: .4s;}
   .m_only .yellow_box::after{position:absolute; top:50%; left:0; right:0; height:calc(100% + 4px); transform: translateY(-50%); content: '';background-color:#f2f2f2; transition: .4s;}
   .m_only .blue_line::after{position:absolute; top:370px; left:50%; right:0; bottom:0; content:''; background-color:#f2f2f2; width:calc(100% + 4px); transform: translateX(-50%); transition: 1.2s;}

   .line_end_box{margin:0 0 240px; padding:0 24px; overflow: hidden; width: 100vw;}
}
@media screen and (max-width: 520px) {
  #section04 .section04_vid_02 .cardphone_area .vid_box{width:1140px; bottom: -60%;}
}
@media screen and (max-width: 400px) {
}
@media screen and (max-width: 375px) {
  #section09 .txt_effect>div>*,
   #section09 .txt_effect .second_txt .motion_div p,
   #section09 .txt_effect .third_txt .motion_div .motion_box div{height:15.467vw;}
   #section09 .first_txt p{width:25.067vw;}
   
   #section09 .second_txt>p{width:8.533vw;}
   #section09 .txt_effect .second_txt .motion_div p{width:61.8vw;}
   #section09 .third_txt>p:first-child{width:16.8vw;}
   #section09 .third_txt>p:last-child{width:1.92vw; margin-left:0.213vw;}
   
   #section09 .txt_effect .third_txt .motion_div .motion_box p{width:60.533vw; height:15.467vw;}
   
   #section09 .txt_effect .first_txt.active .motion_div{width: calc(100% - 50.133vw);}
   #section09 .txt_effect .second_txt.active .motion_div{width: calc(100% - 17.067vw);}
   #section09 .txt_effect .third_txt.active .motion_div{width: calc(100% - 18.933vw)}
   #section09 .txt_effect .third_txt.active .motion_div .motion_box{width: calc(100% )}
   #section09 .txt_effect .third_txt.active .motion_div .motion_box div{width: calc(100% - 60.533vw);}
  
}

@media screen and (max-height: 520px){
}

@media (min-width: 1080px) and (max-height: 1000px){
}