/*=========================================================*/
/*           커리어넷 신규 웹진 2026년 3월호 (mobile)           */
/*=========================================================*/

@charset "utf-8";


/* font */
@font-face { font-family: 'GMarketSans'; src: url('/cloud/w/font/webzine/GmarketSansLight.woff') format('woff'); font-weight: 300; font-display: swap; } 
@font-face { font-family: 'GMarketSans'; src: url('/cloud/w/font/webzine/GmarketSansMedium.woff') format('woff'); font-weight: 500; font-display: swap; } 
@font-face { font-family: 'GMarketSans'; src: url('/cloud/w/font/webzine/GmarketSansBold.woff') format('woff'); font-weight: 700; font-display: swap; }


/* color */
:root {
    --point1: #ff6e6e;
    --point2: #ff7316;
    --point3: #359871;
    --point4: #856afb;
    --point5: #335cf3;
}

/* 공통 */
#wz_2603 {max-width: 720px; margin: 0 auto; color: #222; }
#wz_2603 img {margin: 0;}
#wz_2603 section {padding: 0; margin-top: 30px;}
#wz_2603 section .title{position: relative; margin: 10px 0; text-align: center; font-family: 'GMarketSans';}
#wz_2603 section .title .section-num {position: relative; display: flex; justify-content: center; align-items: flex-end;}
#wz_2603 section .title .section-num:before {position: absolute; bottom: 28px; width: 100%; border-top: 2px dotted #d9d9d9; opacity: 0.3; content: ''; }
#wz_2603 section.main01 .title .section-num:before {border-color: var(--point1);}
#wz_2603 section.main02 .title .section-num:before {border-color: var(--point2);}
#wz_2603 section.main03 .title .section-num:before {border-color: var(--point3);}
#wz_2603 section.main04 .title .section-num:before {border-color: var(--point4);}
#wz_2603 section.main05 .title .section-num:before {border-color: var(--point5);}
#wz_2603 section .title .section-num span {position: relative; right: 30px; display: inline-block; line-height: 1; padding: 15px 40px 13px 80px; font-size:28px; color: #fff; font-weight: 700; border-radius: 70px;}
#wz_2603 section.main01 .title .section-num span {background-color: var(--point1);}
#wz_2603 section.main02 .title .section-num span {background-color: var(--point2);}
#wz_2603 section.main03 .title .section-num span {background-color: var(--point3);}
#wz_2603 section.main04 .title .section-num span {background-color: var(--point4);}
#wz_2603 section.main05 .title .section-num span {background-color: var(--point5);}
#wz_2603 section .title .section-num img {position: relative; left: 30px; z-index: 1; width: 80px;}
#wz_2603 section .title h3 {margin-top: 15px; line-height: 1.2; font-size: 30px; font-weight: 700;}
#wz_2603 section.main01 strong {color: var(--point1);}
#wz_2603 section.main02 strong {color: var(--point2);}
#wz_2603 section.main03 strong {color: var(--point3);}
#wz_2603 section.main04 strong {color: var(--point4);}
#wz_2603 section.main05 strong {color: var(--point5);}
#wz_2603 section .title .sub-ttl {margin-top: 10px;}
#wz_2603 section .title .sub-ttl p {line-height: 1.3; font-size: 16px; color: #000;}
#wz_2603 section .title .sub-ttl p.bold {margin-bottom: 5px; font-size: 20px; font-weight: 700;}
#wz_2603 section .title .img-title {position: absolute; bottom:-20%; right: 0; max-width: 18%;}
#wz_2603 .keypoint {position: relative;  }
#wz_2603 .keypoint h4 {display: flex; justify-content: center; align-items: flex-start; line-height: 1.4; font-size:18px; color: #000; font-weight: bold; letter-spacing: -2px; word-break: keep-all;}
#wz_2603 .keypoint h4 img {width: 24px !important; margin-right: 5px; }
#wz_2603 .keypoint p {text-align: center; margin-top: 5px; line-height: 1.4; font-size: 15px; color: #555; letter-spacing: -1px;}
#wz_2603 .btn-link {display: flex; justify-content: center; align-items: center; min-height: 50px; margin-top: 20px; text-align: center; line-height: 1.2; font-size: 18px; color: #fff; font-weight: 700; font-family: 'GMarketSans';}
#wz_2603 .btn-link:hover {box-shadow: inset -9999px -9999px rgba(0,0,0,0.3);}

/* 애니메이션 */
.leaf-container {position:absolute;top:0%;width:50%;height:100%;overflow:hidden;pointer-events:none;}
.leaf-container img {max-width: 4%;}
.leaf-container.left {left: 0;}
.leaf-container.right {right: 0}
.leaf-container .petal {position:absolute;top:0;opacity:1;animation:fall linear infinite;}
.leaf-container.left .petal.p1 { left: 5%;  animation-duration: 14s; animation-delay: 0s; }
.leaf-container.left .petal.p2 { left: 15%; animation-duration: 10s; animation-delay: 3s; }
.leaf-container.left .petal.p3 { left: 28%; animation-duration: 16s; animation-delay: 1s; filter: blur(1px); }
.leaf-container.left .petal.p4 { left: 10%; animation-duration: 11s; animation-delay: 5s; }
.leaf-container.left .petal.p5 { left: 20%; animation-duration: 15s; animation-delay: 2s; }
.leaf-container.left .petal.p6 { left: 30%; animation-duration: 9s;  animation-delay: 7s; filter: blur(1.5px); }
.leaf-container.right .petal.p1 { right: 5%;  animation-duration: 7s; animation-delay: 0s; }
.leaf-container.right .petal.p2 { right: 15%; animation-duration: 10s; animation-delay: 3s; }
.leaf-container.right .petal.p3 { right: 28%; animation-duration: 16s; animation-delay: 1s; filter: blur(1px); }
.leaf-container.right .petal.p4 { right: 10%; animation-duration: 11s; animation-delay: 5s; }
.leaf-container.right .petal.p5 { right: 20%; animation-duration: 15s; animation-delay: 2s; }
.leaf-container.right .petal.p6 { right: 35%; animation-duration: 9s;  animation-delay: 7s; filter: blur(1.5px); }

@keyframes fall {
    0% {transform: translate(0, 0) rotate(0deg) scale(1);opacity: 1;}
    15% {opacity: 0.75;}
    30% {transform: translate(-40px, 10vh) rotate(120deg); opacity: 0.6;}
    60% {transform: translate(50px, 20vh) rotate(280deg); opacity: 0.4;}
    80% {opacity: 0.2;}
    100% {transform: translate(-20px, 50vh) rotate(540deg) scale(0.7); opacity: 0;}
}

/* start */
#wz_2603 .start {position: relative; overflow: hidden;}

/* main01 */
#wz_2603 .main01 {margin-bottom: 50px;}
#wz_2603 .main01 .box-w {position: relative;}
#wz_2603 .main01 .box-w:last-of-type {margin-top: 50px;}
#wz_2603 .main01 .box {position: relative; padding-bottom: 20px; border: 3px solid var(--point1); border-radius: 30px; overflow: hidden; }
#wz_2603 .main01 .box .box-tit {text-align: center; padding:20px 15px 17px 15px; line-height: 1.2; font-size: 20px; color: #000; font-weight: 700; letter-spacing: -1px; background-color: #fff1fc; font-family: 'GMarketSans';}
#wz_2603 .main01 .box .box-cnt {padding: 20px;}
#wz_2603 .main01 .btn-link {position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); width: 60%; height: 50px; line-height: 50px; text-align: center; background-color: var(--point1); border-radius: 69px; }

/* main02 */
#wz_2603 .main02 .title .img-title {width: 14%; bottom: -92px;}
#wz_2603 .main02 .box {position: relative; padding: 30px; background-color: #fff0b0; border-radius: 40px;}
#wz_2603 .main02 .box .box-cnt {display: flex; gap: 3%; justify-content: space-between; margin-top: 20px;}
#wz_2603 .main02 .box .box-cnt > div {display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 50%;}
#wz_2603 .main02 .btn-link {padding: 7px 20px 4px 20px; background-color: var(--point2); border-radius: 68px;}

/* main03 */
#wz_2603 .main03 .title .img-title {width: 14%; bottom: -14px;}
#wz_2603 .main03 .box {position: relative; padding: 45px; background-color: #dfffbf; border-radius: 40px;}
#wz_2603 .main03 .box .cnt-center {width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px;}
#wz_2603 .main03 .btn-link {padding: 0 30px; background-color: var(--point3); border-radius: 68px;}

/* main04 */
#wz_2603 .main04 .title .img-title {width:12%; bottom: -60px;}
#wz_2603 .main04 .box {position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px;}
#wz_2603 .main04 .box img {width: 100%;}
#wz_2603 .main04 .box:last-of-type { margin-bottom: 0;}
#wz_2603 .main04 .box .box-cnt {width: 100%; margin-top: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#wz_2603 .main04 .btn-link {width: 60%; line-height: 1.2; padding: 20px 20px 15px 20px; text-align: center; background-color: var(--point4); border-radius: 18px;}

/* main05 */
#wz_2603 .main05 {margin-bottom: 40px;}
#wz_2603 .main05 .title .img-title {width: 14%; bottom: -86px;}
#wz_2603 .main05 .box-link {position: relative; background-color: var(--point5); border-radius: 18px; overflow: hidden;}
#wz_2603 .main05 .box-link ul {display: flex; flex-wrap: wrap;}
#wz_2603 .main05 .box-link ul li {width: 50%; border-bottom: 1px solid rgba(255,255,255,0.2);}
#wz_2603 .main05 .box-link ul li:nth-child(2n-1) {border-right: 1px solid rgba(255,255,255,0.2);}
#wz_2603 .main05 .box-link ul li:nth-child(7), #wz_2603 .main05 .box-link ul li:nth-child(8) {border-bottom: none;}
#wz_2603 .main05 .box-link ul li a {display: flex; gap: 10px; justify-content: space-between; align-items: center; height: 100%; margin: 0; padding: 15px 20px; text-align: left; }


@media screen and (max-width: 720px) {
    #wz_2603 section {padding: 0 20px; }
    #wz_2603 .main01 .btn-link {width: 80%;}
    #wz_2603 .main04 .btn-link {width: 80%;}
}
@media screen and (max-width: 550px) {
    #wz_2603 section .title .img-title {display: none !important;}
    #wz_2603 .keypoint h4 {font-size: 16px;}
    #wz_2603 .keypoint p {font-size: 14x;}
}
@media screen and (max-width: 480px) {
    #wz_2603 .btn-link {font-size: 15px;}
}
@media screen and (max-width: 440px) {
    #wz_2603 section {margin-top: 15px;}
    #wz_2603 section .title .section-num img {width: 64px;}
    #wz_2603 section .title .section-num:before {bottom: 20px;}
    #wz_2603 section .title .section-num span {padding: 10px 26px 6px 70px; font-size: 24px;}
    #wz_2603 section .title h3 {margin-top: 8px; font-size: 24px;}
    #wz_2603 section .title .sub-ttl {margin-top: 5px;}
    #wz_2603 section .title .sub-ttl p.bold {font-size: 16px;}
    #wz_2603 section .title .sub-ttl p {font-size: 14px;}
    #wz_2603 .keypoint h4 {font-size: 15px;}
    #wz_2603 .keypoint h4 img {width: 20px !important;}
    #wz_2603 .keypoint p {font-size: 13px;}
    #wz_2603 .btn-link {min-height: 44px; margin-top: 10px; font-size: 14px; letter-spacing: -1px;}
    #wz_2603 .main01 {margin-bottom: 35px;}
    #wz_2603 .main01 .box-w:last-of-type {margin-top: 30px;}
    #wz_2603 .main01 .box {border-radius: 20px;}
    #wz_2603 .main01 .box .box-tit {padding: 12px 15px 8px 15px; font-size: 17px;}
    #wz_2603 .main01 .box .box-cnt {padding: 10px;}
    #wz_2603 .main01 .btn-link {bottom: -22px; width: 90%; height: 44px; line-height: 44px; }
    #wz_2603 .main02 .box {padding: 15px; border-radius: 20px;}
    #wz_2603 .main02 .box .box-cnt {margin-top: 10px;}
    #wz_2603 .main03 .box {padding: 15px; border-radius: 20px;}
    #wz_2603 .main03 .box .cnt-center {margin-top: 10px;}
    #wz_2603 .main04 .box .box-cnt {margin-top: 10px;}
    #wz_2603 .main04 .btn-link {padding: 15px 20px 10px 20px; border-radius: 12px;}
    #wz_2603 .main05 {margin-bottom: 20px;}
}
@media screen and (max-width: 420px) {
    #wz_2603 .main05 .box-link {border-radius: 12px;}
    #wz_2603 .main05 .box-link ul li {width: 100% !important;}
    #wz_2603 .main05 .box-link ul li:nth-child(7) {border-bottom: 1px solid rgba(255,255,255,0.2);}
    #wz_2603 .main05 .box-link ul li a {min-height: 40px; padding: 8px 15px;}
    #wz_2603 .main05 .box-link ul li a img {width: 18px;}
}
@media screen and (max-width: 400px) {
    #wz_2603 section .title .section-num:before {bottom: 18px;}
    #wz_2603 section .title .section-num span {font-size: 20px;}
    #wz_2603 section .title h3 {line-height: 1.1; font-size: 22px;}
}