/*     2157835 : 한줄 텍스트      */
.shgroup,
#sub_view #container .contents_wrap .snb_wrap,
#header,
#row_info,
#footer {display:none;}
#viewport.on #container {padding-top:0;}
#sub_view #container .contents_wrap {position:relative; padding:0; background:url(/img_up/shop_pds/appkorea290/build/option/kakaotalk_20250428_17261802317458311821.jpg); height:100vh; background-size:cover; background-repeat:no-repeat;} 
#sub_view #container .contents_wrap::before {position:absolute; content:''; left:0; top:0; width:100%; height:100%; background:#00000012;}

@keyframes arrow-ani {
  0% {transform:translateX(0px);}
  50% {transform:translateX(5px);}
  100% {transform:translateX(0px);}
}

.list__2157835__ * {margin:0; padding:0; box-sizing:border-box;}
.list__2157835__ {height:100vh; display:flex; flex-direction:column; justify-content:center;}
.list__2157835__ .top-title {font-size:50px; color:#000; text-align:center; display:block; padding-bottom:30px; font-family:var(--subject-font); font-weight:300;}
.list__2157835__ .subject {font-size:30px; color:#000; text-align:center; padding-bottom:220px; font-family:var(--subject-font);}
.list__2157835__ .list_wrapper {display:flex; gap:100px; justify-content:center;}
.list__2157835__ .list_wrapper > div {position:relative; width:50%;}
.list__2157835__ .list_wrapper > div.two {display:none;}
.list__2157835__ .list_wrapper > div > figure {position:absolute; z-index:0; top:-180px; font-size:0;}
.list__2157835__ .list_wrapper .one > figure {left:0;}
.list__2157835__ .list_wrapper .one > figure.blue_icon {right:0; left:unset;}
.list__2157835__ .list_wrapper .two > figure {right:0;}
.list__2157835__ .list_wrapper > div > a {position:relative; display:block; text-align:center; padding:30px; border-radius:30px; background:#fff; box-shadow:5px 5px 5px #00000033; transition:all .2s;}
.list__2157835__ .list_wrapper > div > a .icon {font-size:0;}
.list__2157835__ .list_wrapper > div > a .icon > img {width:40%; margin:0 auto;}
.list__2157835__ .list_wrapper > div > a .icon > img.normal {display:block;}
.list__2157835__ .list_wrapper > div > a .icon > img.hover {display:none;}
.list__2157835__ .list_wrapper > div > a .title {display:block; padding:10px 0 20px 0; font-size:30px; color:#333;}
.list__2157835__ .list_wrapper > div > a > p {font-size:20px; display:flex; align-items:center; justify-content:center; color:#666; gap:5px;}
.list__2157835__ .list_wrapper > div > a > p > i {background:#fff; border-radius:50%; padding:3px;}

.quick_button * {margin:0; padding:0; box-sizing:border-box;}
.quick_button {position:fixed; right:0; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; box-shadow:1px 2px 13px 0px rgb(6 6 6 / 16%); border-radius:20px 0 0 20px; overflow:hidden; z-index:10;}
.quick_button > a {display:flex; flex-direction:column; background:var(--main-color); border-bottom:1px solid #fff; align-items:center; justify-content:center; padding:40px 15px; gap:10px; transition:all .3s;}
.quick_button > a:last-child {border-bottom:none;}
.quick_button > a > i,
.quick_button > a > span {color:#fff; font-size:17px; transition:all .3s;}

.quick_button > a:hover {background:#ccc;}
.quick_button > a:hover > i,
.quick_button > a:hover > span {color:#333;}

@media all and (hover:hover){
  .list__2157835__ .list_wrapper > div:nth-child(1):hover > a > p > i {color:#ff5a5a; -webkit-animation-name:arrow-ani; -webkit-animation-duration: 0.8s; animation-name:arrow-ani; animation-duration:0.8s; animation-iteration-count:infinite;}
  .list__2157835__ .list_wrapper > div:nth-child(2):hover > a > p > i {color:#0066bc; -webkit-animation-name:arrow-ani; -webkit-animation-duration: 0.8s; animation-name:arrow-ani; animation-duration:0.8s; animation-iteration-count:infinite;}
  .list__2157835__ .list_wrapper > div:nth-child(1):hover > a {background:#ff5a5a}
  .list__2157835__ .list_wrapper > div:nth-child(2):hover > a {background:#0066bc;}
  .list__2157835__ .list_wrapper > div:hover > a .icon > img.normal {display:none;}
  .list__2157835__ .list_wrapper > div:hover > a .icon > img.hover {display:block;}
  .list__2157835__ .list_wrapper > div:hover > a .title {color:#fff;}
  .list__2157835__ .list_wrapper > div:hover > a > p {color:#fff;}
}
  
@media all and (max-width:830px){
  .quick_button {top:unset; bottom:0;}
  .quick_button > a {padding:10px 5px;}
  .quick_button > a > i {display:none;}
  .quick_button > a > span {font-size:13px;}
  #viewport #container {padding-top:0;}
  .list__2157835__ .top-title {font-size:25px; padding-bottom:20px;}
 .list__2157835__ .subject {font-size:20px; line-height:1.5em; word-break:keep-all; padding-bottom:400px;}
  #sub_view #container .contents_wrap #contents {padding:0;}
  .list__2157835__ .list_wrapper {gap:30px;}
  .list__2157835__ .list_wrapper > div {width:100%;}
.list__2157835__ .list_wrapper > div > figure {width:100px; top:-80px;}
  .list__2157835__ .list_wrapper > div > a .icon > img {width:20%;}
  .list__2157835__ .list_wrapper > div > a {padding:20px;}
  .list__2157835__ .list_wrapper > div > a .title {font-size:16px;}
  .list__2157835__ .list_wrapper > div > a > p {font-size:15px;}
}

