/*
  root 속성 및 타이포 그래피는 디자인 시스템 참고
*/
:root {
    --skeleton-base: #eeeeee;
    --skeleton-pulse: #dddddd;
    --primary: #3370ff;
    --secondary: #f4f4f4;
    --action: #3370ff;
    --gray_line: #dedede;
    --black: #131313;
    --gray_txt: #696969;
    --red_alert: #ff0014;
    --red_kt: #dd142d;
    --white: #ffffff;
}

*::-webkit-scrollbar {width: 1.4rem;}
*::-webkit-scrollbar-track {background: #fff;}
*::-webkit-scrollbar-thumb {background-color: #d6d6d6; border-radius: 1.3rem; border: 0.1rem none #ffffff;}

* {box-sizing: border-box; font-family: 'Pretendard', Roboto , sans-serif ,Helvetica , Arial !important; }
a{text-decoration: none; color: var(--black);}
a:hover{color:var(--black);}
html,body{font-size: 62.5%; color: var(--black);}

/* 리뉴얼 COMMON */

/* common class */
.gogo-btn {display: flex; justify-content: center; align-items: center; padding: 1.2rem 1.5rem; border-radius: 0.8rem; background-color: #eff1f7; color:#7a86a1; font-size: 1.6rem; font-weight: 500; line-height: 1.63; cursor: pointer; text-align: center; transition: all .15s ease-in-out;}
.gogo-btn.on,
.gogo-btn.active {background-color: var(--primary); color:var(--white);}

.gogo-input {padding: 1.2rem 1.5rem; border: 0.1rem solid #eff1f7; border-radius: 0.8rem; color:var(--black); font-size: 1.6rem; line-height: 1.63; outline: none; transition: all .15s ease-in-out;}
.gogo-input::placeholder {color: #888;}
.gogo-input:focus{border-color: var(--primary);}
/*header*/
header {position: fixed; top: 0; left: 0; right: 0; height:8rem; background-color: #fff; font-size: 1.8rem; font-weight: bold; border-bottom: 0.1rem solid #f4f4f4; z-index: 1001;}
header .logo img {width: 13.6rem;}
header a {font-size: 2rem;}
header .header-wrap {display:flex; justify-content: space-between; align-items:center;  width: 100%; max-width: 114rem; height: 8rem; margin: 0 auto;}
header .header-items {display:flex; align-items:center; gap: 0 5rem; height: 100%;}
header .header-list {display:flex; align-items: center; width: 71.2rem; height: 100%;}
header .header-list li {display:flex; justify-content: center; align-items: center; flex: 1; height: 100%;}
header .header-list li a{transition: all .15s ease-in-out;}
header .header-list li:hover a,
header .header-list li.on a{color:var(--action);}
header .header-icons .icons-ul{display:flex; align-items: center; gap: 0 1.6rem;}
header .icons-ul a {position: relative;}
header .icons-ul img {width: 2.5rem;}
header .icons-ul .delivery-cnt {position: absolute; top: -1rem; right:-1rem; display:flex; justify-content: center; align-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background-color: #ff0014; color:#fff; font-size: 1rem; font-weight: 500; line-height: -1;}

.header-overlay{position: fixed; inset: 0; display: none; background-color: rgba(0,0,0,0.6); transition:all .15s ease-in-out; opacity: 0; z-index: -1;}
.header-overlay.on{display:block; opacity: 1; z-index: 999;}
.sub-header {display:none; position: fixed; top: 8rem; left: 0; right: 0; background-color: #fff; box-shadow: 0 1rem 2rem -0.5rem rgba(0,0,0,0.4);}
.sub-header .sub-header__wrap {display:flex; gap: 0 5rem; max-width: 114rem; margin: 0 auto; padding: 4rem 0; z-index: 12;}
.sub-header .sub-header__wrap .sub-header__img img{width: 13.6rem;}
.sub-header .sub-header__content {display:flex; width: 71.2rem;}
.sub-header .sub-header__content .sub-list {display:flex; flex-direction: column; gap: 2.5rem; flex: 1;}
.sub-header .sub-list.plan li{padding-left: 4.4rem;}
.sub-header .sub-list.phone li{padding-left: 4.6rem;}
.sub-header .sub-list.roaming li{padding-left: 4rem;}
/*.sub-header .sub-list.join li{padding-left: 1.4rem;}*/
.sub-header .sub-list.event li{padding-left: 2.6rem;}
.sub-header .sub-list.user li{padding-left: 3.8rem;}
.sub-header .sub-list a {font-size: 1.4rem; font-weight: 500; transition: all .15s ease-in-out;}
.sub-header .sub-list a:hover{color:var(--action);}

.full-menu {display:none; position: fixed; inset:0; z-index: 1003; background-color: #fff; overflow: auto;}
.full-menu.on{display:block;}
.full-menu .mobile-contents {display:none;}
.full-menu .full-menu__wrap {position: relative; max-width: 114rem; margin: 0 auto;}
.full-menu .full-menu__close {position: absolute; top:9.5rem; right: 3rem; width: 3.7rem; cursor:pointer; z-index: 2;}
.full-menu .full-menu__close img {width: 100%;}
.full-menu .menu-list {position: relative; padding: 8rem 0;}
.full-menu .menu-list .menu-img__wrap{flex-shrink: 0; width: 6rem; margin-right:6.2rem; text-align: center;}
.full-menu .menu-list .menu-item.user .menu-img__wrap,
.full-menu .menu-list .menu-item.mypage .menu-img__wrap{position: relative; top: -0.6rem;}
.full-menu .menu-list .menu-item{width: 100%;  padding: 2.6rem 0; border-bottom: 0.1rem solid #f4f4f4; min-height: 10.4rem;}
.full-menu .menu-list .menu-item .menu-item__wrap{position: relative; display:flex; align-items: center; height: 100%; margin: 0 auto; padding-left: 8.5rem;}
.full-menu .menu-list .menu-item.user .menu-item__wrap {align-items: flex-start;}
.full-menu .menu-list .menu-item.mypage .menu-item__wrap {align-items: flex-start; border-bottom: none; height: auto;}
.full-menu .menu-list h4 {width: 17rem; font-size: 2.2rem; font-weight: bold; flex-shrink: 0;}
.full-menu .menu-list h4::after {content: ""; position: absolute; bottom: -0.1rem; left: 0; width: 0; height: 0.2rem; background-color: var(--action); transition: all .15s ease-in-out;}
.full-menu .sub-menu__list {display:flex; gap: 2rem; flex-wrap: wrap;}
.full-menu .sub-menu__list > li{width: 16.8rem;}
.full-menu .sub-menu__list > li > a{font-size: 1.8rem; font-weight: 500;}
.full-menu .sub-menu__list .arrow {display:none;}
.full-menu .sub-menu__depth2{display:flex; flex-direction: column; gap: 1.8rem; margin: 2rem 0;}
.full-menu .sub-menu__depth2 a {color:#696969; font-size: 1.6rem;}
/* header end */


#wrap {width: 100%; font-size:1.6rem;}
main {position: relative; margin: 8rem auto 0; padding: 4rem 0; max-width: 114rem;}

/*footer*/
footer {position: relative; width: 100%; background-color: #f4f4f4;}
footer .footer-wrap {width: 100%; max-width: 114rem; margin: 0 auto; padding: 4rem 0; font-size: 1.2rem; line-height: 1.4}
footer .footer-main {display:flex; align-items: center; gap: 0 23.3rem;}
footer .link-list {display:flex; align-items: center; gap: 1.5rem;}
footer .link-list a {font-size: 1.4rem; font-weight: 500;}
footer .tel-info {display:flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem;}
footer .tel-info b {display:block; margin-top: 0.5rem; font-size: 1.6rem; font-weight: bold;}
footer .main-menu > p {margin-top: 1.3rem;}
footer .icon-list {display:flex; align-items: center; gap: 0.8rem;}
footer .icon-list img {width: 3.1rem;}
footer .isms {display:flex; align-items: center; gap: 0.6rem; margin-top: 1rem;}
footer .isms img {width: 3rem;}

footer .footer-sub {position: relative; display:flex; flex-direction: column; gap: 1.6rem; margin-top: 1.6rem;}
footer .footer-sub .company-info{display:none;}
footer .footer-sub .company-info br {display: none;}
footer .footer-sub .company-info__toggle {display:flex; align-items: center; gap: 0 0.5rem; cursor:pointer;}
footer .footer-sub .company-info__toggle .company-info__toggle__btn {display:flex; justify-content: center; align-items: center; width: 1.1rem; height: 1.1rem; background-color: #696969; border-radius: 50%; transition: all .15s ease-in-out; transform: rotateZ(180deg);}
footer .footer-sub .company-info__toggle.on .company-info__toggle__btn{transform: rotateZ(0);}
footer .footer-sub .company-info__toggle img {width: 0.6rem;}
footer .footer-sub .company-info p:last-of-type{margin-top: 0.5rem;}
footer .partner-site {position: absolute; bottom: 0; right: 0; width: 14.8rem; z-index: 2;}
footer .partner-site [class^="site-btn"]{display:flex; justify-content: space-between; align-items: center;  padding: 0.8rem 1rem; border: 0.1rem solid #dedede; font-size: 1rem; cursor:pointer;}
footer .partner-site__links {display:none;}
footer .partner-site__links .site-btn {border-bottom: 0;}
footer .partner-site__toggle {background-color: #fff;}
footer .partner-site__toggle img {width: 0.9rem;}
/*footer end*/

/*20250503 새로운 로딩바 생성*/
.gogo-loader-overlay { position:fixed; inset:0; background-color: rgba(0,0,0,0.7); z-index: 2555;}
.gogo-loader-wrap {position:fixed; top:50%; left:50%; transform: translate(-50%, -50%);}
.gogo-loader {width: 6rem; height: 6rem; border: 0.5rem solid #FFF; border-bottom-color: var(--primary); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: loader-rotation 1s linear infinite;}

/*20250604 스켈레톤 추가*/
.gogo-skeleton { background-color: var(--skeleton-base); border-radius: 1rem; height: 6rem; width: 100%; animation: skeleton-pulse 2s ease-in-out infinite;}


/*
    동민: 반응형 함수 -> rem이므로 시안 사이즈를 기준으로 root font-size를 vw로 계산된 사이즈로 적용
    ★ 1rem -> 10px (1배) ★
    ★ PC -> 시안 사이즈: 1280기준 1배 (작아질수록 scale down) ★
    ★ MO -> 시안 사이즈: 720기준 1배 (작아질수록 scale down) ★
*/

@media (min-width: 1025px) {
    html {
        font-size: clamp(
            8px,
            calc(100vw / 1280 * 10),
            10px
        );
    }
}

@media screen and (max-width: 1024px) {
    header .header-wrap {padding: 0 1.6rem;}
    header .header-list,
    header .sub-header{display:none;}

    footer .footer-wrap {padding: 4rem 1.6rem;}
    footer .footer-main {justify-content: space-between; gap: 0;}
}

@media screen and (max-width: 720px){
    html {
        font-size: clamp(
                4px,
                calc(100vw / 720 * 10),
                10px
        );
    }

    main {margin: 11.2rem auto 0;}
    header,header .header-wrap {height: 11.2rem;}
    header .header-wrap {padding: 0 3.2rem;}
    header .logo img {width: 27.2rem;}
    header .header-icons .icons-ul {gap: 0 3.2rem;}
    header .icons-ul img {width: 5rem;}
    header .icons-ul .delivery-cnt {top: -3.4rem; right: -2.2rem; width: 3.4rem; height: 3.4rem; font-size: 2rem;}
    .full-menu {display:block; transform: translateX(100%); overflow-x:hidden; transition: transform .2s ease-in-out;}
    .full-menu.on {transform: translateX(0);}
    .full-menu .full-menu__close {display:none;}
    .full-menu .mobile-contents {display:block;}
    .full-menu .mobile-contents .main-cont {padding: 3.6rem 3.2rem;}
    .full-menu .mobile-top__items {display:flex; justify-content: space-between; align-items: center;}
    .full-menu .mobile-top__items .logo img{width: 21rem; vertical-align: bottom;}
    .full-menu .mobile-top__items .mobile-top__close{width: 3.2rem;}
    .full-menu .mobile-top .login-txt,
    .full-menu .mobile-top .user-txt{display: block; margin-top: 3.6rem; font-size: 3.6rem; font-weight: bold;}
    .full-menu .mobile-top .user-txt {display: flex; align-items: center; gap: 0 0.2rem;}
    .full-menu .mobile-top .user-txt img {width:4rem;}
    .full-menu .mobile-square__menu {border-top: 0.2rem solid #f4f4f4; border-bottom: 0.2rem solid #f4f4f4; }
    .full-menu .square-menu__list{display: flex; justify-content: space-between; align-items: center; padding: 3.4rem 3.2rem;}
    .full-menu .square-menu__list li a{display: flex; flex-direction: column; gap:1rem; align-items: center; font-size: 2.4rem; font-weight: bold; white-space: nowrap;}
    .full-menu .square-menu__list .img-wrap{display: flex; justify-content: center; align-items: center; width:14.2rem; height: 13.6rem; border-radius: 2rem; background-color: #f4f4f4;}
    .full-menu .square-menu__list img {width: 11.2rem;}
    .full-menu .menu-list {display:flex; flex-direction: column; padding: 0;}
    .full-menu .menu-list .menu-item {padding: 0; min-height: unset;}
    .full-menu .menu-list .menu-item .menu-item__wrap {position: static; padding-left: 0;}
    .full-menu .menu-list h4 {position: relative; width: 44%;  min-width: 31rem; padding: 4.4rem 3.2rem; border-bottom: 0.2rem solid #dedede; font-size: 3.6rem;}
    .full-menu .menu-list h4::after {bottom: -0.2rem;}
    .full-menu .menu-list h4.on {color:var(--action); background-color: #dbe7ff}
    .full-menu .menu-list h4.on::after {width: 100%;}
    .full-menu .menu-list .menu-item {border-bottom: 0;}
    .full-menu .menu-list .menu-item.mypage {order: -1;}
    .full-menu .sub-menu__list {display: none; position: absolute; top: 0; right: 0; width: 56%; flex-direction: column; gap: 0; }
    .full-menu .sub-menu__list.on {display:flex;}
    .full-menu .sub-menu__list > li {width: 100%; min-width: 41rem; padding: 2.8rem 3.2rem;}
    .full-menu .sub-menu__list > li > a {display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 3.2rem; font-weight: bold;}
    .full-menu .sub-menu__list .arrow {display: block; width: 2.6rem; transition: transform .15s ease-in-out;}
    .full-menu .sub-menu__list .arrow.on {transform: rotate(-180deg);}
    .full-menu .sub-menu__depth2 {margin: 2.6rem 0 0 0; gap: 0; background-color: #f4f4f4;}
    .full-menu .sub-menu__depth2 > div {padding: 2.8rem 0 2.8rem 3.2rem;}
    .full-menu .sub-menu__depth2 a {color:#000; font-size: 3.2rem; font-weight: 500;}
    .full-menu .menu-img__wrap {display: none;}


    footer .footer-main {flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 3.2rem;}
    footer .footer-wrap {padding: 8rem 3.2rem; font-size: 2.4rem;}
    footer .link-list {flex-wrap: wrap; gap: 3rem;}
    footer .link-list a {font-size: 2.8rem;}
    footer .link-list .mr-3{margin-right: 6rem;}
    footer .tel-info b {margin-top: 1rem; font-size: 3.2rem;}
    footer .tel-info{flex-wrap: wrap; gap: 2rem 3rem; margin-top: 3.2rem;}
    footer .main-menu > p {margin-top: 2rem;}
    footer .icon-list {gap: 1.6rem;}
    footer .icon-list img {width: 6.2rem;}
    footer .isms {gap: 1.2rem; margin-top: 2rem;}
    footer .isms img {width: 6rem;}
    footer .footer-sub{gap: 1.4rem;}
    footer .footer-sub .company-info p{ line-height: 1.5;}
    footer .footer-sub .company-info br {display: block;}
    footer .footer-sub .company-info p:last-of-type{margin-top: 1.4rem;}
    footer .footer-sub .copyright {margin-top: 1.8rem;}
    footer .footer-sub .company-info__toggle .company-info__toggle__btn {width: 2.2rem; height: 2.2rem;}
    footer .footer-sub .company-info__toggle img {width: 1.2rem;}
    footer .partner-site__toggle img {width: 1.8rem;}
    footer .partner-site{position:relative; margin-top: 1.8rem; width: 100%;}
    footer .partner-site__links {position: absolute; bottom: 6.2rem; width: 100%; background-color: #f4f4f4; z-index: 2;}
    footer .partner-site [class^="site-btn"] {padding: 1.6rem 2rem; border: 0.1rem solid #dedede; font-size: 2rem;}
}



/* ANIMATION */
@keyframes loader-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes skeleton-pulse {
    0% {
        background-color: var(--skeleton-base);
    }
    50% {
        background-color: var(--skeleton-pulse);
    }
    100% {
        background-color: var(--skeleton-base);
    }
}