@charset "UTF-8"; /* CSS Document */ /* Web Fonts */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap'); /**e러닝소개 및 시리즈 **/ .learn_tab {padding:30px 0 30px;} .learn_tab.intro {padding:20px 0;} .learn_tab.series {padding:24px 0 0;} .learn_tab ul {display:flex;justify-content:flex-start;align-items:flex-end;} .learn_tab ul li {width:180px;height:48px;} .learn_tab ul li a {display:flex;justify-content:center;align-items:center;width:inherit;height:inherit;border-bottom:4px solid #D9E1E7;font-family:'Noto Sans KR', sans-serif;font-size:18px;font-weight:400;color:#5C7186;transition:.3s;gap:1em;} .learn_tab ul li a span {font-family:'Noto Sans KR', sans-serif;font-size:18px;font-weight:400;color:#777;} .learn_tab ul li:hover a {font-size:18px;color:#217EFD;font-weight:700;} .learn_tab ul li:hover a span {color:#217EFD;font-size:16px;font-weight:700;} .learn_tab ul li.active a {position:relative;border-bottom:4px solid #217EFD;font-size:18px;color:#217EFD;font-weight:700;} .learn_tab ul li.active a span {color:#217EFD;font-size:18px;font-weight:700;} .learn_tab ul li.active a:after {position:absolute;display:block;content:'';top:48px;left:50%;transform:translateX(-50%);width:0;height:0;border-top: 10px solid #217EFD;border-left: 10px solid transparent;border-right: 10px solid transparent;} .learn_tab ul li a img {width:auto;height:36px;} .learn_subtab {} .learn_subtab ul {display:flex;justify-content:flex-start;align-items:center;gap:2px;} .learn_subtab ul li {width:160px;} .learn_subtab ul li a {display: flex;width:160px;height:60px;justify-content: center;align-items: flex-end;transition:.3s;} .learn_subtab ul li a img {width:inherit;} .learn_subtab ul li.active a img {margin-bottom: -14px;z-index: 9} .learn_subtab ul li.defA a {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabA.png) bottom left no-repeat;background-size:160px auto;} .learn_subtab ul li.defB a {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabB.png) bottom left no-repeat;background-size:160px auto;} .learn_subtab ul li.defC a {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabC.png) bottom left no-repeat;background-size:160px auto;} .learn_subtab ul li.defD a {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabD.png) bottom left no-repeat;background-size:160px auto;} .learn_subtab ul li.defA a:hover {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabA_hover.png) bottom left no-repeat;background-size:160px auto;} .learn_subtab ul li.defB a:hover {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabB_hover.png) bottom left no-repeat;background-size:160px auto;} .learn_subtab ul li.defC a:hover {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabC_hover.png) bottom left no-repeat;background-size:160px auto;} .learn_subtab ul li.defD a:hover {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabD_hover.png) bottom left no-repeat;background-size:160px auto;} /* width 639이하일때 보이는 탭*/ .learn_subtab.mob {display:none} /*.learn_bg {background: #F1F5F7}*/ .learn_content {width:100%;max-width:800px;padding:0;margin:0 auto;font-size:0;line-height:1;} .learn_content img {width:800px;max-width:800px} .learn_varea {display:flex;justify-content:center;align-items:center;background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/intro_videobg.png) repeat-y;background-size:800px auto;} .learn_video {position:relative;display:inline-block;} .learn_video .if_video {position:absolute;left:0;top:0;right:0;bottom:0;} /***e러닝 이용권****/ .learn_subarea {margin:30px 0 40px;padding:0;font-size:0;line-height: 1;} .learn_prodarea {margin:20px 0 30px;padding:0;font-size:0;line-height: 1;} /*상품상세화면용*/ .learn_map {position:relative;width:100%;max-width:800px;padding:0;margin:0 auto;font-size:0;line-height: 1} .learn_map img {border:0; vertical-align:top;width:800px;max-width:800px;} .map_1_1 {position:absolute; left:7.5%; top:33.2%; width:45.17%; height:56.13%;} .map_1_2 {position:absolute; left:58.58%; top:33.2%; width:34.17%; height:56.13%;} .map_2_1 {position:absolute; left:7.5%; top:29.34%; width:45.17%; height:61.28%;} .map_2_2 {position:absolute; left:58.58%; top:29.34%; width:34.17%; height:61.28%;} .map_3_1 {position:absolute; left:7.5%; top:26.37%; width:45.17%; height:56%;} .map_3_2 {position:absolute; left:58.58%; top:26.37%; width:34.17%; height:56%;} @media (max-width: 1024px) { .learn_subtab ul {justify-content:center;align-items:flex-end;gap:2px;} .learn_subtab ul li {width:32%;max-width:180px;} .learn_subtab ul li a {width:100%;max-width:180px;height:auto;} .learn_subtab ul li.active a img {margin-bottom: -16px;z-index: 9} .learn_subtab ul li.defA a {background-size:100% auto;} .learn_subtab ul li.defB a {background-size:100% auto;} .learn_subtab ul li.defC a {background-size:100% auto;} .learn_subtab ul li.defD a {background-size:100% auto;} .learn_subtab ul li.defA a:hover {background-size:100% auto;} .learn_subtab ul li.defB a:hover {background-size:100% auto;} .learn_subtab ul li.defC a:hover {background-size:100% auto;} .learn_subtab ul li.defD a:hover {background-size:100% auto;} .learn_content img {width:100%;} .learn_varea {background-size:100% auto;} .learn_video {width:84%;margin:0 auto:max-width:640px;} .learn_subarea {margin:-20px 0 40px;padding:0;font-size:0;line-height: 1;} .learn_map img {border:0; vertical-align:top;width:100%;max-width:800px;} } @media (max-width: 639px) { .learn_subtab {display:none} .learn_subtab.mob {display:block} .learn_subtab.mob ul {display:flex;justify-content:center;align-items:flex-end;gap:2px;} .learn_subtab.mob ul li {width:23.5%;} .learn_subtab.mob ul li a {display: flex;width:100%;height:auto;justify-content: center;align-items: flex-end;transition:.3s;} .learn_subtab.mob ul li a img {width:inherit;} .learn_subtab.mob ul li.active a img {margin-bottom:-14px;z-index: 9} .learn_subtab.mob ul li.defA a {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabAmob.png) bottom left no-repeat;background-size:100% auto;} .learn_subtab.mob ul li.defB a {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabBmob.png) bottom left no-repeat;background-size:100% auto;} .learn_subtab.mob ul li.defC a {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabCmob.png) bottom left no-repeat;background-size:100% auto;} .learn_subtab.mob ul li.defD a {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabDmob.png) bottom left no-repeat;background-size:100% auto;} .learn_subtab.mob ul li.defA a:hover {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabAmob_hover.png) bottom left no-repeat;background-size:100% auto;} .learn_subtab.mob ul li.defB a:hover {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabBmob_hover.png) bottom left no-repeat;background-size:100% auto;} .learn_subtab.mob ul li.defC a:hover {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabCmob_hover.png) bottom left no-repeat;background-size:100% auto;} .learn_subtab.mob ul li.defD a:hover {background:url(https://www.idolebook.com/shop/data/skin/apple_tree/img/learn/series_tabDmob_hover.png) bottom left no-repeat;background-size:100% auto;} }