@charset "UTF-8";
*{font-family:'Paperlogy', 'Noto Sans Korean', sans-serif; font-weight:400;}

/* 과목 별 색상 (default = math) */
#contentMap{
  --main-color:#00B298;
  --bg-color:#E2FAF7;
  --bg-filter1:invert(96%) sepia(20%) saturate(180%) hue-rotate(95deg) brightness(96%) contrast(104%) opacity(0.5);
  --bg-filter2:invert(91%) sepia(16%) saturate(249%) hue-rotate(120deg) brightness(100%) contrast(95%) opacity(0.5);
  --text-color:#537671;
}
#contentMap.type-social{
  --main-color:#FF9932;
  --bg-color:#FFF1E3;
  --bg-filter1:invert(94%) sepia(8%) saturate(1781%) hue-rotate(304deg) brightness(105%) contrast(116%) opacity(0.5);
  --bg-filter2:invert(87%) sepia(35%) saturate(340%) hue-rotate(318deg) brightness(102%) contrast(106%) opacity(0.5);
  --text-color:#68625C;
}
#contentMap.type-science{
  --main-color:#9062EC;
  --bg-color:#F0E9FF;
  --bg-filter1:invert(83%) sepia(19%) saturate(233%) hue-rotate(220deg) brightness(106%) contrast(102%) opacity(0.5);
  --bg-filter2:invert(89%) sepia(15%) saturate(938%) hue-rotate(202deg) brightness(101%) contrast(93%) opacity(0.5);
  --text-color:#675873;
}
#contentMap.type-english{
  --main-color:#4A9EFF;
  --bg-filter1:invert(83%) sepia(20%) saturate(141%) hue-rotate(183deg) brightness(107%) contrast(107%) opacity(0.5);
  --bg-filter2:invert(87%) sepia(7%) saturate(1759%) hue-rotate(188deg) brightness(104%) contrast(106%) opacity(0.5);
  --bg-color:#EBF4FF;
  --text-color:#555B63;
}
#contentMap.type-music{
  --main-color:#3BC384;
  --bg-filter1:invert(97%) sepia(6%) saturate(414%) hue-rotate(81deg) brightness(101%) contrast(96%) opacity(0.5);
  --bg-filter2:invert(95%) sepia(7%) saturate(635%) hue-rotate(82deg) brightness(102%) contrast(90%) opacity(0.5);
  --bg-color:#EAFAF0;
  --text-color:#4C5C52;
}
#contentMap.type-art{
  --main-color:#FF65B4;
  --bg-filter1:invert(86%) sepia(20%) saturate(530%) hue-rotate(240deg) brightness(104%) contrast(117%) opacity(0.5);
  --bg-filter2:invert(85%) sepia(11%) saturate(692%) hue-rotate(293deg) brightness(104%) contrast(104%) opacity(0.5);
  --bg-color:#FFEAF5;
  --text-color:#745967;
}
#contentMap.type-physical{
  --main-color:#6D62FF;
  --bg-filter1:invert(87%) sepia(90%) saturate(6302%) hue-rotate(180deg) brightness(106%) contrast(106%) opacity(0.5);
  --bg-filter2:invert(85%) sepia(95%) saturate(2065%) hue-rotate(180deg) brightness(102%) contrast(101%) opacity(0.5);
  --bg-color:#EFEEFF;
  --text-color:#565468;
}
#contentMap.type-practical{
  --main-color:#FF7D6C;
  --bg-filter1:invert(89%) sepia(24%) saturate(375%) hue-rotate(307deg) brightness(104%) contrast(105%) opacity(0.5);
  --bg-filter2:invert(88%) sepia(2%) saturate(2513%) hue-rotate(314deg) brightness(97%) contrast(113%) opacity(0.5);
  --bg-color:#FFEAE8;
  --text-color:#68625C;
}

[class*='badge_']{display:inline-flex; align-items:center; border-radius:300px; color:#fff; background:#94A6B5;}
.badge_s{padding:0 9px; height:23px;}
.badge_m{padding:0 18px; height:30px;}
.badge_l{padding:0 14px; height:33px;}
.inner{position:relative; margin:0 auto; max-width:1440px;}
.thumb img{max-width:100%;}

header{position:relative; background:#50B1FF url('/resources/images/contentMap/header_bg.png') no-repeat center;}
header .top_module{position:absolute; top:18px; left:50%; transform:translateX(-50%); max-width:1440px; width:100%; display:flex; z-index:10;}
header .logo_viva{margin-left:auto;}
header .logo_viva a{display:block; width:120px; height:17px; background:url('/resources/images/common/logo/renew/logo_vivasam_l_w.png') no-repeat center right / contain}
header .inner{padding:28px 0 22px;}
header h2{text-align:center;}
header .obj{position:absolute; background-repeat:no-repeat; background-position:center;}
header .obj.ani-bounce{animation:objBounce infinite alternate 1s linear;}
header .obj.obj1{left:-33px; top:102px; width:108px; height:72px; background-image:url('/resources/images/contentMap/obj1.png'); animation-delay:.25s}
header .obj.obj2{right:-95px; top:65px; width:95px; height:53px; background-image:url('/resources/images/contentMap/obj2.png'); animation-delay:.75s}

header .obj.obj3{right:151px; top:129px; width:29px; height:33px; background-image:url('/resources/images/contentMap/obj3.png');}
header .obj.sub_obj1{left:-191px; top:42px; width:86px; height:93px; background-image:url('/resources/images/contentMap/math_obj1.png');}
header .obj.sub_obj2{right:50px; top:108px; width:106px; height:112px; background-image:url('/resources/images/contentMap/math_obj2.png'); animation-delay:.5s}

.type-social header .obj.obj3{right:150px; top:178px;}
.type-social header .obj.sub_obj1{left:-162px; top:41px; width:73px; height:71px; background-image:url('/resources/images/contentMap/soc_obj1.png');}
.type-social header .obj.sub_obj2{right:56px; top:84px; width:92px; height:118px; background-image:url('/resources/images/contentMap/soc_obj2.png');}

.type-science header .obj.obj3{right:145px; top:166px;}
.type-science header .obj.sub_obj1{left:-173px; top:36px; width:76px; height:76px; background-image:url('/resources/images/contentMap/sci_obj1.png');}
.type-science header .obj.sub_obj2{right:61px; top:84px; width:74px; height:116px; background-image:url('/resources/images/contentMap/sci_obj2.png');}

.type-english header .obj.obj3{right:150px; top:89px;}
.type-english header .obj.sub_obj1{left:-169px; top:46px; width:83px; height:84px; background-image:url('/resources/images/contentMap/eng_obj1.png');}
.type-english header .obj.sub_obj2{right:29px; top:114px; width:129px; height:76px; background-image:url('/resources/images/contentMap/eng_obj2.png');}

.type-music header .obj.obj3{right:174px; top:133px;}
.type-music header .obj.sub_obj1{left:-185px; top:50px; width:86px; height:84px; background-image:url('/resources/images/contentMap/mus_obj1.png');}
.type-music header .obj.sub_obj2{right:36px; top:107px; width:169px; height:119px; background-image:url('/resources/images/contentMap/mus_obj2.png');}

.type-art header .obj.obj3{right:161px; top:124px;}
.type-art header .obj.sub_obj1{left:-166px; top:49px; width:52px; height:95px; background-image:url('/resources/images/contentMap/art_obj1.png');}
.type-art header .obj.sub_obj2{right:63px; top:107px; width:87px; height:92px; background-image:url('/resources/images/contentMap/art_obj2.png');}

.type-physical header .obj.obj3{right:149px; top:120px;}
.type-physical header .obj.sub_obj1{left:-159px; top:45px; width:79px; height:66px; background-image:url('/resources/images/contentMap/phy_obj1.png');}
.type-physical header .obj.sub_obj2{right:63px; top:112px; width:83px; height:88px; background-image:url('/resources/images/contentMap/phy_obj2.png');}

.type-practical header .obj.obj3{right:163px; top:107px;}
.type-practical header .obj.sub_obj1{left:-146px; top:29px; width:71px; height:75px; background-image:url('/resources/images/contentMap/pra_obj1.png');}
.type-practical header .obj.sub_obj2{right:62px; top:59px; width:135px; height:172px; background-image:url('/resources/images/contentMap/pra_obj2.png');}

@keyframes objBounce{
  0%{transform: translateY(0);}
  100% {transform: translateY(-10px);}
}

main{background:#F6F6F6; padding:20px 0 36px;}

.content_tab_menu{margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; gap:20px;}
.content_tab_menu button{flex:1; font-size:20px; color:#6A7782; background:#D3DEE8; border-radius:300px; height:46px;}
.content_tab_menu button.on{font-weight:700; color:#fff;}
.content_tab_menu button.math.on{background:#00B298;}
.content_tab_menu button.social.on{background:#FF9932;}
.content_tab_menu button.science.on{background:#9062EC;}
.content_tab_menu button.english.on{background:#4A9EFF;}
.content_tab_menu button.music.on{background:#3BC384;}
.content_tab_menu button.art.on{background:#FF65B4;}
.content_tab_menu button.physical.on{background:#6D62FF;}
.content_tab_menu button.practical.on{background:#FF7D6C;}

.step_wrap{display:flex; gap:15px;}
.step_wrap .step_box{position:relative; width:360px; height:calc(100dvh - 362px); flex:none; display:flex; flex-direction:column; padding:30px 30px 25px; background:#fff; border-radius:10px; box-shadow:2px 4px 12px 0 #DFE6EB;}
.step_wrap .step_box{height:711px;} /* 임시 css 오픈 후 반응형 작업 예정 */
.step_wrap .step_box.step02{flex:1;}

.step_box .bg_obj{position:absolute; right:20px; top:0; width:324px; height:190px;}
.step_box .bg_obj div{position:absolute; left:0; top:0; right:0; bottom:0;}
.step_box .bg_obj .bg1{background:url('/resources/images/contentMap/cont_bg1.png') no-repeat center; filter:var(--bg-filter1);}
.step_box .bg_obj .bg2{background:url('/resources/images/contentMap/cont_bg2.png') no-repeat center; filter:var(--bg-filter2);}

.step_box .step_top{position:relative; margin-bottom:20px;}
.step_box .step_top .badge_m{font-size:15px; color:#fff; font-weight:700; background:var(--main-color);}
.step_box .step_top p{margin-top:10px; font-size:18px; color:#555;}
.step_box .step_top h3{margin-top:5px; font-size:25px; color:#333; font-weight:700;}

.step_box .step_info{position:relative; margin-bottom:18px; padding:8px 20px; border:1px solid #00B298; background:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:52px;}
.step_box .step_info .info_title{display:flex; align-items:center;}
.step_box .step_info .info_title .thumb{margin-right:12px; width:46px; height:46px; border-radius:50%; background:#F4F4FF;}
.step_box .step_info .info_title .thumb img{width:100%; height:100%;}
.step_box .step_info .info_title p{margin-right:6px; font-size:17px; color:#333; font-weight:700;}
.step_box .step_info .info_title .badge_s{font-size:13px; font-weight:500;}
.step_box .step_info .info_desc{margin-top:4px;}
.step_box .step_info .info_desc p{font-size:14px; color:#666; font-weight:400; line-height:1.34;}
.step_box .step_info .info_other{display:none; position:relative; flex:1;}
.step_box .step_info .info_other:before{content:''; position:absolute; left:-25px; top:0; bottom:0; width:1px; border-left:1px dashed #94A6B5;}
.type-math .step_box .step_info .info_other{display:block;}
.step_box .step_line{position:relative; margin-bottom:13px;}
.step_box .step_line:after{content:''; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:1px; background:#DAE0E5;}
.step_box .step_line .badge_l{position:relative; font-size:16px; font-weight:500; z-index:1;}

.step_box .step_cont{flex:1; position:relative; overflow-y:auto; display:flex; gap:10px;}
.step_box .step_cont .item_box{width:300px;}
.step_box .step_cont .item{display:block;}
.step_box .step_cont .item+.item{margin-top:14px;}
.step_box .step_cont .item .item_label{position:relative; padding:8px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px solid #DAE0E5; border-radius:10px;}
.step_box .step_cont .item .item_label .thumb{margin-right:5px; flex:none; width:46px; height:46px; border-radius:50%; background:#F4F4FF;}
.step_box .step_cont .item .item_label .thumb img{width:100%; height:100%;}
.step_box .step_cont .item .item_label p{flex:1; font-size:17px; color:#333; font-weight:600; line-height:1.3;}
.step_box .step_cont .item .item_label i{flex:none; width:24px; height:24px; background:url('/resources/images/contentMap/ico_label_arr.png') no-repeat center;}
.step_box .step_cont .item .item_desc{max-height:0; margin-top:-10px; border-radius:0 0 10px 10px; background:var(--bg-color); overflow:hidden; transition:.4s linear;}
.step_box .step_cont .item .item_desc p{padding:22px 16px 12px; font-family:'Pretendard', sans-serif; font-size:14px; font-weight:400; line-height:19px; color:var(--text-color); letter-spacing:-.04em; word-break:keep-all;}
.step_box .step_cont .item .item_desc p span{font:inherit; color:inherit; font-weight:700;}
.step_box .step_cont .item.on .item_label{background:var(--main-color);border-color:var(--main-color);}
.step_box .step_cont .item.on .item_label p{color:#fff;}
.step_box .step_cont .item.on .item_label i{background-image:url('/resources/images/contentMap/ico_label_arr_on.png')}
.step_box .step_cont .item.on .item_desc{max-height:160px;}

.step_box .step_label{margin-top:33px; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; background:#E7EEF4; border-radius:10px;}
.step_box .step_label b{padding-left:26px; font-size:16px; color:#333; font-weight:600; line-height:20px; background:url('/resources/images/contentMap/ico_ready.png') no-repeat left center;}
.step_box .step_label p{padding-right:15px; font-size:15px; color:#7F888F; font-weight:500; background:url('/resources/images/contentMap/arr_right.png') no-repeat right center;}

footer{background-color: #FFF;padding:30px 0;}
footer .inner{display: flex;align-items: center;gap: 32px; max-width:1200px;}
footer h2{margin-left: 8px;flex-shrink: 0;width: 91px;}
footer .right{width: 100%;}
footer .right .links{display: flex;align-items: center;gap: 18px;}
footer .right .links a{font-size: 12px;font-weight: 500;color: #797878; font-family:'Noto Sans Korean',sans-serif;}
footer .right address{color: #787878;font-size: 12px;letter-spacing: -0.04em; font-family:'Noto Sans Korean',sans-serif;font-weight: 400;line-height: 18px;margin-top: 5px;}
footer .right address span{display: inline-block;height: 10px;width: 1px;border-left: 1px solid #c1c1c1;margin:0 7px;}