@charset "utf-8";

.txt-orange{color: #f3621b;}
.doc-tit {margin-bottom: 50px;}
.doc-tit h3 {position: relative; font-weight: 700; font-size: 28px; line-height: 1.5em; letter-spacing: -.05em; padding-left: 55px;}	
.doc-tit h3:before {content:""; position: absolute; top: 1px; left: 0; width: 42px; height: 42px; background-image:url("../images/sub/bullet.png"); background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.doc-tit p {position: relative; font-weight: 300; font-size: 24px; line-height: 1.5em; letter-spacing: -.05em; padding-left: 60px; margin-top: 20px;}	
.doc-tit p:before {content:""; position: absolute; top: 1px; left: 0; width: 39px; height: 39px; background-image:url("../images/sub/bullet2.png"); background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.doc-tit p span {position: relative;}
.doc-tit p span:before {content:""; position: absolute; top: 0; left: 0; width: 136%; height: 120%; margin-left: -18%; margin-top: -10%; background: url("../images/sub/tit_deco.png") center center no-repeat; background-size:contain;}
.doc-cnt {margin-bottom: 100px;}
.doc-cnt:last-child {margin-bottom: 0;}

.table-wrap {max-width: 1188px; margin: 0 auto;overflow-x: auto; -webkit-overflow-scrolling: touch;}
.sub-table {width:100%; border-collapse:collapse; border-spacing:0px; line-height:1.556; letter-spacing:-.04em;}
.sub-table th {padding:14px 8px; border:1px solid #fff; color:#fff; font-size: 20px; font-weight: 700;}
.sub-table thead th {color:#fff; font-size: 20px; font-weight: 700;}
.sub-table tbody th {color: #555; font-size: 18px; font-weight: 700;}
.sub-table td {padding:14px 8px; border:1px solid #fff; color:#555; text-align:center; font-size: 18px; font-weight: 300;}
.sub-table td.left {text-align: left; padding-left: 27px;}
.sub-table tr th:first-child,
.sub-table tr td:first-child {border-left:0;}
.sub-table tr th:last-child,
.sub-table tr td:last-child {border-right:0;}

.sub-table.ty1 thead th {background: #ffa914;}
.sub-table.ty1 tbody th {background: #f0e4cf;}
.sub-table.ty1 td {background: #fff2dc;}

.sub-table.ty2 thead th {background: #e84c4f;}
.sub-table.ty2 tbody th {background: #f7e4e4;}
.sub-table.ty2 td {background: #f8edee;}

.sub-table.ty3 thead th {background: #9ab73e;}
.sub-table.ty3 tbody th {background: #eaf0d7;}
.sub-table.ty3 td {background: #f7faef;}

.sub-table.ty4 thead th {background: #5481c5;}
.sub-table.ty4 tbody th {background: #e9eff8;}
.sub-table.ty4 td {background: #f5f8fc;}

/* .prodgram-intro {margin-bottom: 100px; padding: 85px 80px 50px; border-radius:20px; overflow:hidden; background: url("../images/sub/bg_intro.png") center center no-repeat; background-size:cover;}
.prodgram-intro h3 {position: relative; font-size: 36px; line-height: 1.4; color: #fff; margin-bottom: 55px;}
.prodgram-intro h3:before {content:""; position: absolute; width: 29px;height: 29px; right: 100%; top: -5px; background: url("../images/sub/ico_intro_tit.png") center center no-repeat; background-size:contain;}
.prodgram-intro dl {font-size: 20px; background: rgba(255,255,255,.8); border-radius:30px; padding: 25px 20px 25px 40px; margin-bottom: 17px;}
.prodgram-intro dl:last-child {margin-bottom: 0;}
.prodgram-intro dl dt {font-size: 1.2em; font-weight: 700; line-height: 1.5;}
.prodgram-intro dl dd {line-height: 1.8;} */

.prodgram-intro .tt {font-size: 24px; font-weight: 500; line-height: 1.25; text-align: center;}
.prodgram-intro .tt .c1 {color: #f44348;}
.prodgram-intro .tt .c2 {color: #118c83;}
.prodgram-intro .tt .c3 {color: #d88296;}
.prodgram-intro dl {padding: 90px 50px 70px 50px; background-repeat:no-repeat;}
.prodgram-intro dl.bg1 {padding-right: 50%; background-size: 51% auto; background-position: 97% 63%; background-color: #91d6e3; background-image:url("../images/sub/bg_pm_intro1.jpg");}
.prodgram-intro dl.bg2 {padding-left: 45%; text-align: right; background-size: 38.41% auto; background-position: 8% 50%; background-color: #f7a3ab; background-image:url("../images/sub/bg_pm_intro2.jpg");}
.prodgram-intro dl dt {margin-bottom: 15px;}
.prodgram-intro dl dt strong {display: block; font-size: 60px; line-height: 1.2;}
.prodgram-intro dl.bg1 dt strong {color: #008f97;}
.prodgram-intro dl.bg2 dt strong {color: #f22126;}
.prodgram-intro dl dt p {font-size: 20px; font-weight: 600; line-height: 1.5; color: #fff;}
.prodgram-intro dl.bg1 dt p span {color: #008f97;}
.prodgram-intro dl.bg2 dt p span {color: #f22126;}
.prodgram-intro dl dd {font-size: 20px; line-height: 1.4; font-weight: 300; color: #fff;}
.prodgram-intro .row .tt {margin: 50px 0 40px;}

.greetings {padding: 30px 40px; border-radius:17px; background: #fedfde;}
.greetings .ceo {display: flex;align-items: flex-end; margin-bottom: 32px;}
.greetings .ceo .img {flex:0 0 165px; padding-right: 10px;}
.greetings .ceo .info {color: #555; line-height: 1.5;}
.greetings .txtBox {position: relative; padding: 40px 70px; background: #fff; border-radius:17px;}
.greetings .txtBox .row {margin-top: 35px; width: 64%;}
.greetings .txtBox .row:first-child {margin-top: 0;}
.greetings .txtBox h3 {font-size: 28px; line-height: 1.2; margin-bottom: 15px;}
.greetings .txtBox h3.c1 {color: #008f97;}
.greetings .txtBox h3.c2 {color: #f26428;}
.greetings .txtBox p {color: #555; font-size: 1.125em; line-height: 1.667em;}
.greetings .ab-img {position: absolute;	width: 26%; right: 4.9%; bottom: -17%;}

.program-manual {}
.program-manual ul {display: flex;justify-content: center;flex-wrap:wrap; margin: 0 -23px -50px;}
.program-manual ul li {width: 25%; padding: 0 23px; margin-bottom: 50px;}
.program-manual ul li .in {position: relative; padding: 23px 30px 75%; height: 100%; border-radius:20px; background-position:left bottom; background-repeat:no-repeat; background-size:contain;}
.program-manual ul li .in:after {content:""; position: absolute; top: -6px; right: -4px; width: 74px; height: 74px; background-position:center center; background-repeat:no-repeat; background-size:contain;}
.program-manual ul li strong {display: block; font-size: 22px; line-height: 1.4; letter-spacing: -.05em; margin-bottom: 12px;}
.program-manual ul li p {color: #555; line-height: 1.250em; letter-spacing: -.05em;}

.program-manual ul li.list1 .in {background-color: #90eeee; background-image:url("../images/sub/bg_pm1.jpg");}
.program-manual ul li.list2 .in {background-color: #ffe5c9; background-image:url("../images/sub/bg_pm2.jpg");}
.program-manual ul li.list3 .in {background-color: #ffdb76; background-image:url("../images/sub/bg_pm3.jpg");}
.program-manual ul li.list4 .in {background-color: #f4babc; background-image:url("../images/sub/bg_pm4.jpg");}
.program-manual ul li.list5 .in {background-color: #bab2e7; background-image:url("../images/sub/bg_pm5.jpg");}
.program-manual ul li.list6 .in {background-color: #e2edbf; background-image:url("../images/sub/bg_pm6.jpg");}
.program-manual ul li.list7 .in {background-color: #c9e5ef; background-image:url("../images/sub/bg_pm7.jpg");}
.program-manual ul li.list1 .in:after {background-image:url("../images/sub/icon_pm1.png");}
.program-manual ul li.list2 .in:after {background-image:url("../images/sub/icon_pm2.png");}
.program-manual ul li.list3 .in:after {background-image:url("../images/sub/icon_pm3.png");}
.program-manual ul li.list4 .in:after {background-image:url("../images/sub/icon_pm4.png");}
.program-manual ul li.list5 .in:after {background-image:url("../images/sub/icon_pm5.png");}
.program-manual ul li.list6 .in:after {background-image:url("../images/sub/icon_pm6.png");}
.program-manual ul li.list7 .in:after {background-image:url("../images/sub/icon_pm7.png");}
.program-manual strong.c1 {color: #0b9494;}
.program-manual strong.c2 {color: #ff7827;}
.program-manual strong.c3 {color: #8c6905;}
.program-manual strong.c4 {color: #cd2b30;}
.program-manual strong.c5 {color: #4d428c;}
.program-manual strong.c6 {color: #93bf07;}
.program-manual strong.c7 {color: #1ea7d8;}

.program-system {position: relative; padding-top: 35px;}
.program-system:before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 360px; background: #fef0de; border-radius:30px; z-index: -1;}
.program-system ul {max-width: 1090px; margin: 0 auto; display: flex;justify-content: space-between; text-align: center;}
.program-system ul li {padding: 0 5px;}
.program-system ul li .img {}
.program-system ul li .img:after {content:""; display: block; width: 18px; height: 18px; border-radius:100%; background: #e95800; margin: 25px auto 35px;}
.program-system ul li .txt {}
.program-system ul li .txt strong {display: block; margin-bottom: 20px; font-size: 24px; line-height: 1.25; letter-spacing: -.05em;}
.program-system ul li .txt p {font-size: 1.125em; line-height: 1.667em; letter-spacing: -.05em;}


.composition-book {}
.composition-book .group {display: flex; padding: 30px; border: 6px solid #efefef; border-radius:20px; margin-bottom: 37px;}
.composition-book .group:last-child {margin-bottom: 0;}
.composition-book .group .img {width: 47.98%; text-align: center; padding-right: 20px;}
.composition-book .group .cnt {flex: 1 1 auto; min-width: 0; width: 1%;}
.composition-book .group .tit {position: relative; padding-left: 115px; font-size: 34px; font-weight: 700; line-height: 1.4em; letter-spacing: -.05em;}
.composition-book .group .tit span {position: absolute; top: 0; left: -9px; min-width: 111px; text-align: center; color: #fff; font-size: 28px; line-height: 50px; border-radius:50px; padding: 0 5px;}
.composition-book .group .desc {color: #555; font-size: 20px; line-height: 1.5; letter-spacing: -.05em; margin: 25px 0 30px;}
.composition-book .group .cont-table {max-width: 591px; text-align: center;}
.composition-book .group .cont-table .head {display: flex; border-radius:20px 20px 0 0; overflow: hidden;}
.composition-book .group .cont-table .body {display: flex; border-radius: 0 0 20px 20px; overflow: hidden;}
.composition-book .group .cont-table .col {flex:1; border-right: 1px solid #fff; line-height: 54px; font-size: 1.125em; font-weight: 500; letter-spacing: -.05em;}
.composition-book .group .cont-table .col:last-child {border-right: 0;}
.composition-book .group .cont-table .body .col {background: #f5f5f5;}

.composition-book .group .tit.c1 {color: #d39500;}
.composition-book .group .tit.c2 {color: #ca2326;}
.composition-book .group .tit.c3 {color: #769418;}
.composition-book .group .tit.c4 {color: #0a4092;}
.composition-book .group .tit span.bg1 {background: #ffba14;}
.composition-book .group .tit span.bg2 {background: #e84c4f;}
.composition-book .group .tit span.bg3 {background: #9ab73e;}
.composition-book .group .tit span.bg4 {background: #2760b6;}
.composition-book .group .cont-table .head.bg1 .col {background: #f2e9d3;}
.composition-book .group .cont-table .head.bg2 .col {background: #f8e5e5;}
.composition-book .group .cont-table .head.bg3 .col {background: #e7f1c8;}
.composition-book .group .cont-table .head.bg4 .col {background: #d7e1f0;}

.composition-video {}
.composition-video ul {display: flex;flex-wrap:wrap; margin: 0 -25px -36px;}
.composition-video ul li {width: 50%; padding: 0 25px; margin-bottom: 36px;}
.composition-video ul li .in {display: flex; border: 6px solid #efefef; height: 100%; border-radius:20px; padding: 30px 35px 50px; background-position:96.5% 92%; background-repeat:no-repeat; background-size:103px;}
.composition-video ul li .img {width: 54.28%; padding-right: 15px;}
.composition-video ul li .txt {flex: 1 1 auto; min-width: 0; width: 1%; margin-top: -5px;}
.composition-video ul li .txt strong {display: block; margin-bottom: 12px; font-size: 26px; line-height: 1.4; letter-spacing: -.05em;}
.composition-video ul li .txt p {color: #555; font-size: 1.125em; line-height: 1.667em; letter-spacing: -.05em;}

.composition-video ul li .in.bg1 {background-image:url("../images/sub/icon_cv1.png");}
.composition-video ul li .in.bg2 {background-image:url("../images/sub/icon_cv2.png");}
.composition-video ul li .in.bg3 {background-image:url("../images/sub/icon_cv3.png");}
.composition-video ul li .in.bg4 {background-image:url("../images/sub/icon_cv4.png");}



/* learning */
#sub.learning #header {display: none;}
#sub.learning #contArea {max-width: 1460px; padding-bottom: 70px;}
#sub.learning {background: url("../images/learning/bg_learning.jpg") center center no-repeat; background-size:cover;}

#sub.learning .real-cont {position: relative; padding: 55px 40px 40px; border-radius:20px; min-height: 82vh; box-shadow:rgba(0,0,0,.3) 10px 15px 15px; background: url("../images/learning/bg_learning_cont.png") center center no-repeat; background-size:cover;}

.learning-btns {position: absolute; right: -10%; top: -15px; }
.learning-btns ul li {margin-bottom: 30px;}
.learning-btns a {display: block; border-radius:100%; box-shadow:rgba(0,0,0,.3) 3px 5px 5px;}

.learning-categogy {text-align:center; margin-bottom:55px;}
.learning-categogy ul {display:flex; flex-wrap:wrap; justify-content:center; margin:-7px;}
.learning-categogy ul li {padding:7px;}
.learning-categogy ul li a {display:block; min-width:160px; padding:0 8px; font-size:18px; line-height:46px; overflow-y: hidden; background:#fff; border: 1px solid #e6e6e6; border-radius:20px; box-shadow: rgba(146,146,146,.35) 3px 3px 3px;}
.learning-categogy ul li a:hover {color:#ffd428;}
.learning-categogy ul li.active a {background:#ffd428; color:#fff !important; font-weight: 900; border: 0; line-height: 48px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.4) 0px -2px 8px 0px inset, rgba(255,255,255, 0.4) 0px 8px 6px 0px inset;}

.learning-list {max-width: 1200px; margin: 0 auto;}
.learning-list ul {display: flex;flex-wrap:wrap; margin: 0 -12px -24px; text-align: center;}
.learning-list ul li {width: 25%; padding: 0 12px; margin-bottom: 24px;}
.learning-list ul li .in {position: relative; display: block; padding: 18px 20px; background: #fff; border-radius:10px; border: 2px solid #ddd; transition:none;}
/* .learning-list ul li .in:before {content:""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #ddd; border-radius:inherit;} */
.learning-list ul li .thunmb {display: flex;justify-content: space-between;}
.learning-list ul li .thunmb a {display: block; width: calc(50% - 7px);}
.learning-list ul li .thunmb img {box-shadow:rgba(0,0,0,.4) 5px 5px 5px;}
.learning-list ul li .tit {color: #333; font-weight: 500; line-height: 1.5; letter-spacing: 0; margin-top: 18px;}

.learning-list ul li .thunmb a.unable {position: relative; cursor: initial;}
.learning-list ul li .thunmb a.unable:after {content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255,255,255,.25);}
.learning-list ul li .thunmb a.unable img {opacity: .5;}

.learning-list ul li .in:hover {background: #fcebdb;}
.learning-list ul li .in:hover:after {border: 4px solid #e1bb6e;}
.learning-list ul li .in:hover .thunmb img {box-shadow:none;}
.learning-list ul li .in:hover .tit {color: #9a7325; font-weight: 900;}

.learning-board {margin-bottom: 30px;}
.learning-board:after {content:""; display:block; clear:both;}
.learning-board .calss {float: left; text-align: center; width: 315px; display: flex;justify-content: space-between; padding: 15px 18px; background: #fff; border: 1px solid #ddd; border-radius:20px;}
.learning-board .calss .group {width: calc(50% - 2px);}
.learning-board .calss .group a {display: block; padding: 14px 18px 8px; border-radius:10px;}
.learning-board .calss .group.active a {border: 1px solid #ddd; background: #cce14c;}
.learning-board .calss .group .thumb {}
.learning-board .calss .group .thumb img {box-shadow:rgba(0,0,0,.4) 5px 5px 5px;}
.learning-board .calss .group .tit {font-size: 20px; font-weight: 700; line-height: 1.5; margin-top: 12px;}

.learning-board .chapter {float: right; width: calc(100% - 335px); text-align: center; margin-bottom: 28px;}
.learning-board .chapter ul {display:flex; flex-wrap:wrap; margin:-7px;}
.learning-board .chapter ul li {width: 20%;padding:7px; min-height: 62px; display: table;}
/* ¾Æ·¡ ³»¿ëÀ¸·Î ¼öÁ¤
.learning-board .chapter ul li a {display:table-cell;  vertical-align:middle; padding:0 8px; line-height: 1.3; font-size:18px; background:#fff; border: 1px solid #e6e6e6; border-radius:20px; box-shadow: rgba(146,146,146,.35) 3px 3px 3px;}*/

.learning-board .chapter ul li a {display:table-cell;  vertical-align:middle; padding:0 8px; line-height: 1.3; font-size:18px; border: 1px solid #e6e6e6; border-radius:20px; box-shadow: rgba(146,146,146,.35) 3px 3px 3px;}

/* .learning-board .chapter ul li a:hover {color:#cce14c;}
.learning-board .chapter ul li.active a {background:#cce14c;color:#fff !important; font-weight: 700; border: 0; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.4) 0px -2px 8px 0px inset, rgba(255,255,255, 0.4) 0px 8px 6px 0px inset;} */


/* ¾Æ·¡ ³»¿ëÀ¸·Î ¼öÁ¤
.learning-board .chapter ul li.active a {color:#fff !important; font-weight: 700; border: 0; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.4) 0px -2px 8px 0px inset, rgba(255,255,255, 0.4) 0px 8px 6px 0px inset;}
*/
.ytp-pause-overlay.caption-window.ytp-endscreen-content{display:block!important;}

.learning-board .chapter ul li a.mellon {background:#cce14c;}
.learning-board .chapter ul li a.orange {background:#fc861e;}
.learning-board .chapter ul li a.yellow {background:#ffa914;}
.learning-board .chapter ul li a.red {background:#d84e04;}
.learning-board .chapter ul li a.blue {background:#5481c5;}
.learning-board .chapter ul li a.green {background:#2ab5b5;}


.learning-board .chapter ul li a {color:#FFF; font-weight: 700; border: 0; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.4) 0px -2px 8px 0px inset, rgba(255,255,255, 0.4) 0px 8px 6px 0px inset;}

.learning-board .chapter ul li.active a {color:#000; background:#FFF; font-weight: 400;}

/*¼öÁ¤ ³¡*/


.learning-board .calss.type2 { padding: 47px 18px;}
.learning-board .chapter.type2 ul li { width: 16.666%;}

.learning-board .goal {float: right; width: calc(100% - 335px); height: 102px; overflow-y: auto; background:#fff url("../images/learning/icon_gaol.png") right 25px top no-repeat; border-radius:20px; padding: 20px 45px; color: #333; font-size: 20px; line-height: 1.5;}
.learning-board .goal strong {display: block; margin-bottom: 5px;}
.learning-board .goal p {font-size: 0.9em;}


/* mypage */
.achievement {background: #fafafa; padding: 30px 40px 50px; border-radius:20px;}
.achievement .my {position: relative; padding-left: 33px; color: #888; font-weight: 500; font-size: 14px; letter-spacing: 0; line-height: 1.5;}
.achievement .my .name {color: #a5477c;}
.achievement .my:before {content:""; position: absolute; top: -3px; left: 0; width: 27px; height: 27px; background: no-repeat url("../images/mypage/icon_my.png") center center / contain;}
.achievement .today {margin-bottom: 25px; text-align: right; color: #888; font-size: 14px; font-weight: 500; line-height: 1.5;}
.achievement .today p {position: relative; display: inline-block; padding-left: 36px;}
.achievement .today p:before {content:""; position: absolute; width: 26px; height: 26px; top: -2px; left: 0; background: url("../images/mypage/icon_today.png") center center no-repeat; background-size:contain;}
.achievement .cnt {display: flex;justify-content: space-between;}
.achievement .cnt .col {width: calc(44% - 20px);}
.achievement .cnt .col.ty2 {width: calc(56% - 20px);}
.achievement .cnt .col .box {background-color: #fff; border: 1px solid #ddd; border-radius:10px; padding: 30px 25px;}
.achievement .cnt h3 {position: relative; font-size: 24px; line-height: 1.5; letter-spacing: -.05em; margin-bottom: 10px; padding-left: 38px;}
.achievement .cnt h3:before {content:""; position: absolute; top: 5px; left: 0; width: 28px; height: 28px; background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}

.achievement .reward {}
.achievement .reward h3:before {background-image:url("../images/mypage/icon_tit.png");}
/*¹èÁö 2°³ ´õ Ãß°¡µÇ¾î ¼öÁ¤ÇÏ¿´½À´Ï´Ù.*/
/*.achievement .reward .items {padding: 25px 20px; margin-bottom: 35px; background: #fafafa; border-radius:10px; text-align: center;}*/
.achievement .reward .items {padding: 25px 66px; margin-bottom: 35px; background: #fafafa; border-radius:10px; text-align: center;}

.achievement .reward .items:last-child {margin-bottom: 0;}
.achievement .reward ul {display: flex;flex-wrap:wrap;justify-content: center; margin: -5px -10px;}
.achievement .reward ul li {width: auto; padding: 5px 10px;}
.achievement .reward ul.badge li .img {position:relative; padding-bottom:100%; width: 46px; overflow:hidden; background: #fff; border-radius:100%;}
.achievement .reward ul.badge li .img:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08); border-radius:100%;}
.achievement .reward ul.badge li img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}

.achievement .learning-time {margin-top: 20px;}
.achievement .learning-time .row {color: #fff; font-size: 18px; font-weight: 500; line-height: 1.5; padding: 15px 45px; border-radius:50px; margin-bottom: 10px;}
.achievement .learning-time .row:after {content:""; display:block; clear:both;}
.achievement .learning-time .row:last-child {margin-bottom: 0;}
.achievement .learning-time .row .tt {position: relative; padding-left: 33px;}
.achievement .learning-time .row .tt:before {content:""; position: absolute; top: 4px; left: 0; width: 23px; height: 23px; background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.achievement .learning-time .row .time {float: right; margin-left: 5px;}
.achievement .learning-time .row1 {background: #aacf00;}
.achievement .learning-time .row1 .tt:before {background-image:url("../images/mypage/icon_lt1.png");}
.achievement .learning-time .row2 {background: #a5477c;}
.achievement .learning-time .row2 .tt:before {background-image:url("../images/mypage/icon_lt2.png");}

.achievement .progress { background: url("../images/mypage/bg_progress.jpg") center bottom no-repeat; background-size:contain;}
.achievement .progress h3 {display: inline-block; margin-bottom: 25px;}
.achievement .progress h3:before {background-image:url("../images/mypage/icon_tit2.png");}
.achievement .progress ul {display: flex;}
.achievement .progress ul li {width: 50%;}
.achievement .progress ul li .graph {position: relative; width: 200px; height: 200px; margin: 0 auto; border: 20px solid #d3d3d3; border-radius:100%;}
.achievement .progress ul li .graph:after {content:""; position: absolute; top: 0; left: 0; width: 20%; height: 100%; background: #fba81b; border-radius: inherit;}
.achievement .progress ul li .percent {font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.05em; }

.achievement .progress .chartwrap {display: flex; text-align: center;}
.achievement .progress .chartwrap .chart {width: 50%;}

.helpArea {position: relative; margin-top: 89px;}
.btn-help {display: inline-block; margin-left: 35px; min-width: 124px; padding: 0 15px; color: #333; font-weight: 700; line-height: 40px; background: #fff; border: 1px solid #ddd; border-radius:50px;}
.btn-help img {vertical-align:middle; margin: -.2em 8px 0 0;}

#hlepLayer {display: none; position: absolute; bottom: calc(100% + 12px); max-width: 550px; width: 100%; text-align: left; background: rgba(0,0,0,.75); border-radius:20px; padding: 35px 40px 40px; color: #fff; line-height: 1.5; z-index: 1;}
#hlepLayer:before {content:""; position: absolute; width: 0; height: 0; bottom: -20px; left: 60px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid rgba(0,0,0,.75);}
#hlepLayer h1 {position: relative; padding-left: 37px; font-size: 24px; font-weight: 500; margin-bottom: 25px;}
#hlepLayer h1:before {content:""; position: absolute; top: 5px; left: 0; width: 27px; height: 27px; background: url("../images/mypage/icon_help_tit.png") center center no-repeat; background-size:contain;}
#hlepLayer dl {margin-bottom: 15px;}
#hlepLayer dl:last-child {margin-bottom: 0;}
#hlepLayer dl dt {font-size: 0.938em; line-height: 1.75; letter-spacing: -.04em; font-weight: 300; margin-bottom: 3px;}
#hlepLayer dl dd {font-size: 0.875em; line-height: 1.5; letter-spacing: -.04em; font-weight: 300; padding-left: 0.875em;}