/* -------------------------------------------------------------------------- * * file : voca.css * page : Allround API * Version : 1.0 * Author : Talkstaion - Team * Author URI : http://unicornnet.com * * -------------------------------------------------------------------------- */ @charset "utf-8"; dl {margin: 0;} /* 공통사항 */ /*//////////////////////품사 아이콘 Style////////////////////////////*/ /*ipart_noun 큰것 1*/ .ipart_noun{display:inline-block; height:21px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat left 0;} .ipart_noun strong{display:block; height:21px; line-height:170%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat right 0px;} /*ipart_verb 큰것 2*/ .ipart_verb{display:inline-block; height:21px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat left -21px;} .ipart_verb strong{display:block; height:21px; line-height:170%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat right -21px;} /*ipart_adj 큰것 3*/ .ipart_adj{display:inline-block; height:21px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat left -42px;} .ipart_adj strong{display:block; height:21px; line-height:170%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat right -42px;} /*ipart_adv 큰것 4*/ .ipart_adv{display:inline-block; height:21px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat left -63px;} .ipart_adv strong{display:block; height:21px; line-height:170%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat right -63px;} /*ipart_pron 큰것 5*/ .ipart_pron{display:inline-block; height:21px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat left -84px;} .ipart_pron strong{display:block; height:21px; line-height:170%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat right -84px;} /*ipart_prep 큰것 6*/ .ipart_prep{display:inline-block; height:21px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat left -105px;} .ipart_prep strong{display:block; height:21px; line-height:170%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat right -105px;} /*ipart_conj 큰것 7*/ .ipart_conj{display:inline-block; height:21px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat left -126px;} .ipart_conj strong{display:block; height:21px; line-height:170%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat right -126px;} /*ipart_interj 큰것 8*/ .ipart_interj{display:inline-block; height:21px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat left -147px;} .ipart_interj strong{display:block; height:21px; line-height:170%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat right -147px;} /*ipart_det 큰것 9*/ .ipart_det{display:inline-block; height:21px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat left -168px;} .ipart_det strong{display:block; height:21px; line-height:170%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_big.gif') no-repeat right -168px;} /*ipart_noun 작은것 1*/ .ipart_noun_s{display:inline-block; height:17px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat left 0;} .ipart_noun_s strong{display:block; height:17px; font-size:11px; font-weight:normal; line-height:140%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat right 0px;} /*ipart_verb 작은것 2*/ .ipart_verb_s{display:inline-block; height:17px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat left -17px;} .ipart_verb_s strong{display:block; height:17px; font-size:11px; font-weight:normal; line-height:140%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat right -17px;} /*ipart_adj 작은것 3*/ .ipart_adj_s{display:inline-block; height:17px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat left -34px;} .ipart_adj_s strong{display:block; height:17px; font-size:11px; font-weight:normal; line-height:140%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat right -34px;} /*ipart_adv 작은것 4*/ .ipart_adv_s{display:inline-block; height:17px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat left -51px;} .ipart_adv_s strong{display:block; height:17px; font-size:11px; font-weight:normal; line-height:140%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat right -51px;} /*ipart_pron 작은것 5*/ .ipart_pron_s{display:inline-block; height:17px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat left -68px;} .ipart_pron_s strong{display:block; height:17px; font-size:11px; font-weight:normal; line-height:140%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat right -68px;} /*ipart_prep 작은것 6*/ .ipart_prep_s{display:inline-block; height:17px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat left -85px;} .ipart_prep_s strong{display:block; height:17px; font-size:11px; font-weight:normal; line-height:140%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat right -85px;} /*ipart_conj 작은것 7*/ .ipart_conj_s{display:inline-block; height:17px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat left -102px;} .ipart_conj_s strong{display:block; height:17px; font-size:11px; font-weight:normal; line-height:140%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat right -102px;} /*ipart_interj 작은것 8*/ .ipart_interj_s{display:inline-block; height:17px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat left -119px;} .ipart_interj_s strong{display:block; height:17px; font-size:11px; font-weight:normal; line-height:140%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat right -119px;} /*ipart_syn, ant 작은것 9*/ .ipart_syn_s{display:inline-block; height:17px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat left -136px;} .ipart_syn_s strong{display:block; height:17px; font-size:11px; font-weight:normal; line-height:140%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat right -136px;} /*ipart_det 작은것 9*/ .ipart_det_s{display:inline-block; height:17px; padding-left:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat left -153px;} .ipart_det_s strong{display:block; height:17px; font-size:11px; font-weight:normal; line-height:140%; color:#fff; padding-right:5px; background:url('https://ts.idictionary.co.kr/imgs/common/word_part_bg_small.gif') no-repeat right -153px;} #audio { display: none; } /* 공통사항 */ .idic-word-larger-column { float: left; position: relative; min-height: 1px; padding: 0; text-align: left; } .idic-word-larger-column > h5 { font-size: 24px; font-weight: 600; padding: 0; margin: 0; margin-bottom: 10px;} .idic-word-larger-column > h5 > span { font-size: 10px; font-weight: 700; } .idic-word-larger-column > div { display: none; } .idic-word-larger-column > div > h6 { font-size: 16px; font-weight: 500; padding: 0; margin: 0; } .idic-word-larger-column > h5 > a, .idic-word-larger-column > div > h6 > a { color: #777777; } .idic-word-larger-column > h5 > a:hover, .idic-word-larger-column > div > h6 > a:hover { color: #000000; } .idic-word-larger-column > h5 > a > i, .idic-word-larger-column > div > h6 > a > i { font-size: 15px; border: 1px solid #CCCCCC; padding: 4px; -webkit-border-radius: 3px; border-radius: 3px; } .idic-word-larger-column > div > p > img { width: 100%; border: 1px solid #DDDDDD; padding: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .idic-word-larger-column > footer { margin-top: 4px; margin-bottom: 4px; font-size: 15px; font-weight: 500; line-height: 20px; } /* 서브 단어 리스트 */ .idic-word-larger-column > ul { display: inline-block; width: 100%; text-align: center; margin: 10px 0 0; padding: 0; background-color: #FFFFFF; } .idic-word-larger-column > ul > li { display: inline-block; width: 50px; margin: 0; padding: 2px; border: 2px solid #FFFFFF; vertical-align: top; text-align: center; } .idic-word-larger-column > ul > li > a > img { width: 100%; } .idic-word-larger-column > ul > li.active { border: 2px solid #4F89E9; -webkit-border-radius: 3px; border-radius: 3px; } ul.idic-word-column { float: left; position: relative; min-height: 1px; padding: 5px 5px; list-style: none; text-align: left; border: 3px solid #DDDDDD; } ul.idic-word-column:after, ul.idic-word-column:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } ul.idic-word-column:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #FFFFFF; border-width: 30px; margin-left: -30px; } ul.idic-word-column:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #DDDDDD; border-width: 35px; margin-left: -35px; } ul.idic-word-column > li { float: left; position: relative; min-height: 1px; width: 100%; height: auto; padding: 10px 0; border-bottom: 1px solid #DDDDDD; } ul.idic-word-column > li:last-child { border-bottom: 0; } ul.idic-word-column > li > dl > dt { float: left; position: relative; min-height: 1px; width: 12%; margin: 0; padding: 0 10px; } ul.idic-word-column > li > dl > dt > img, ul.idic-word-column > li > dl > dt > a > img { width: 100%; } ul.idic-word-column > li > dl > dt { position: relative; display: inline-block; overflow: hidden; } ul.idic-word-column > li > dl > dt > img, ul.idic-word-column > li > dl > dt > a > img { width: 100%; } ul.idic-word-column > li > dl > dt:hover > a > i { z-index: 9; opacity: 0.5; top: 0; height: 400px; margin: 0 10px; padding-top: 22px; font-size: 48px; font-weight: normal; color: #FFFFFF; background-color: #000000; } ul.idic-word-column > li > dl > dt > a > i { display: block; position: absolute; top: -100%; opacity: 0; left: 0; bottom: 0; right: 0; text-align: center; color: inherit; } ul.idic-word-column > li > dl > dd { float: left; position: relative; min-height: 1px; width: 54%; margin: 0; padding: 0 10px; } ul.idic-word-column > li > dl > dd:nth-of-type(2) { width: 34%; text-align: right; } ul.idic-word-column > li > dl > dd > h6 { font-size: 14px; font-weight: 600; padding: 0; margin: 0; } ul.idic-word-column > li > dl > dd > h6 > span { font-size: 10px; font-weight: 700; } ul.idic-word-column > li > dl > dd > footer { margin-top: 4px; font-size: 14px; font-weight: 500; } ul.idic-word-column > li > dl > dd > h6 > a, ul.idic-word-column > li > dl > dd > footer > a { padding: 2px; border: 1px solid #FFFFFF; color: #AAAAAA; -webkit-border-radius: 3px; border-radius: 3px; } ul.idic-word-column > li > dl > dd > h6 > a:hover, ul.idic-word-column > li > dl > dd > footer > a:hover { border-color: #4F89E9; color: #4F89E9; } ul.idic-word-column > li > dl > dd > h6 > a:active, ul.idic-word-column > li > dl > dd > footer > a:active { background-color: #4F89E9; color: #FFFFFF; } ul.idic-word-column > li > dl > dd > h6 > a > i, ul.idic-word-column > li > dl > dd > footer > a > i { margin-top: 4px; font-size: 18px; font-weight: 500; } ul.idic-word-column > li > dl > dd > footer + footer { margin-top: 6px; font-size: 12px; color: #777777; } ul.idic-word-column > li > dl > dd:nth-of-type(2) > a { float: left; position: relative; min-height: 1px; width: 70px; height: 70px; -webkit-border-radius: 70px; border-radius: 70px; text-align: center; font-size: 13px; font-weight: 600; padding: 24px 5px 0; margin: 1px 2px; background-color: #BBBBBB; color: #FFFFFF; } ul.idic-word-column > li > dl > dd:nth-of-type(2) > a:nth-of-type(2), ul.idic-word-column > li > dl > dd:nth-of-type(2) > a:nth-of-type(3) { padding: 15px 5px 0; color: #FFFFFF; } ul.idic-word-column > li > dl > dd:nth-of-type(2) > a:hover { background-color: #4F89E9; text-decoration: none; } ul.idic-word-column > li > dl > dd:nth-of-type(2) > a.active { background-color: #4F89E9; text-decoration: none; } /* 센텐스 목록 */ .idic-sentence-list { display: inline-block; text-align:left; margin:5px 0 0; padding: 0; background-color: #FFFFFF; } .idic-sentence-list > li { display: inline-block; width: 50px; margin: 0; padding: 2px; border: 2px solid #FFFFFF; vertical-align: top; text-align: center; width: 33.3333%;} .idic-sentence-list > li > a > img { width: 100%; } .idic-sentence-list > li.active { border: 2px solid #4F89E9; -webkit-border-radius: 3px; border-radius: 3px; } @media all and (max-width: 1201px) { ul.idic-word-column > li > dl > dt { width: 90px; padding: 0 10px; } ul.idic-word-column > li > dl > dd { width: 56%; } ul.idic-word-column > li > dl > dd:nth-of-type(2) { float: right; width: 220px; padding: 0 10px 0 0; text-align: right; } } @media all and (max-width: 769px) { ul.idic-word-column { padding: 0 4px; } ul.idic-word-column > li > dl > dt { width: 110px; padding: 0 5px; } ul.idic-word-column > li > dl > dd { width: 56%; padding: 0 5px; } ul.idic-word-column > li > dl > dd > h6 { font-size: 13px; } ul.idic-word-column > li > dl > dd > footer { margin-top: 2px; font-size: 13px; } ul.idic-word-column > li > dl > dd > footer + footer { margin-top: 3px; font-size: 12px; } ul.idic-word-column > li > dl > dd > h6 > a, ul.idic-word-column > li > dl > dd > footer > a { padding: 2px 4px; } ul.idic-word-column > li > dl > dd > h6 > a > i, ul.idic-word-column > li > dl > dd > footer > a > i { margin-top: 3px; font-size: 16px; font-weight: 500; } ul.idic-word-column > li > dl > dd:nth-of-type(2) { float: left; width: 120px; padding: 0 5px 0 0; text-align: right; } .idic-sentence-list > li { display: inline-block; width: 38px; } } @media all and (max-width: 526px) { ul.idic-word-column > li > dl > dt { width: 70px; } ul.idic-word-column > li > dl > dd { width: 75%; } ul.idic-word-column > li > dl > dd > footer { margin-top: 2px; } ul.idic-word-column > li > dl > dd > footer + footer { margin-top: 3px; line-height: 16px; } ul.idic-word-column > li > dl > dd > h6 > a > i, ul.idic-word-column > li > dl > dd > footer > a > i { font-size: 14px; } ul.idic-word-column > li > dl > dd:nth-of-type(2) { float: left; position: relative; min-height: 1px; width: 75%; text-align: left; margin-left: 73px; } .idic-sentence-list > li { display: inline-block; width: 35px; } } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > p {font-size: 12px; background: #ecf0f1; width: 23px; border-radius: 50%; color: #303030; font-weight: 700; line-height: 23px; letter-spacing: -2px; position: absolute; top: 0; right: 2px; margin: 0;} ul.idic-word-column > li > dl > dd > h6 > p { margin: 0; display: inline-block; background: #d9534f; color: #fff; padding: 2px 5px; font-size: 12px; border-radius: 4px; font-weight: 700; } @media (max-width:769px) { ul.idic-word-column > li > dl > dd > h6 > p { font-size: 10px; padding: 2px 5px; } } .idic-wcard-label { margin: 0; display: inline-block; background: #d9534f; color: #fff; padding: 2px 5px; font-size: 12px; border-radius: 4px; font-weight: 700; } .idic-word-column > li > dl > dt > a > div {font-size: 12px; background: #4F89E9; color: #fff; text-align: center; margin-top: 5px; padding: 3px 0 2px;} .ibq_one_words_list * { font-size: 11px; } .ibq_one_words_list > ul { float:left; width:100%; text-align:left; margin:0; padding: 0; background-color: #FFFFFF; } /* .ibq_one_words_list > ul > li { display:inline-block; width: px; margin:0; padding: 0; vertical-align:top; text-align: center; } */ .ibq_one_words_list > ul > li > dl > dt { margin: 0; padding: 0; } .ibq_one_words_list > ul > li > dl > dt > a { display: inline-block; border: 1px solid #ddd; } .ibq_one_words_list > ul > li > dl > dt > a:hover { border: 1px solid #0eaded; } /* .ibq_one_words_list > ul > li > dl > dt > img, .ibq_one_words_list > ul > li > dl > dt > a > img { width: px; height: px; } */ .ibq_one_words_list > ul > li > dl > dd { float: left; width: 100%; height: auto; text-align: center; line-height: 16px; padding: 0; margin: 0; } .ibq_one_words_list > ul > li > dl > dd, .ibq_one_words_list > ul > li > dl > dd > a { color: #000000; font-size: 11px; font-weight: 600; } .ibq_one_words_list > ul > li > dl > dd > span { margin: 6px 0 0; } .ibq_one_words_list > ul > li > dl > dd > span:last-child, .ibq_one_words_list > ul > li > dl > dd > a:last-child { display: block; padding: 0 0 3px; } .ibq_one_words_list > ul > li > dl > dd > a > img { width: 21px; height: 20px; } /* VOCA SERIES LIST */ /* .voca-flist-column { display: block; margin-left: -10px; margin-right: -10px; padding: 0; } */ .voca-flist-column > ul { padding: 0; list-style: none; text-align: left; margin: 0; border-top: 2px solid #DDDDDD; } .voca-flist-column > ul > li { float: left; position: relative; min-height: 1px; width: 100%; height: auto; margin-left: 0; margin-right: 0; padding: 10px 0; border-top: 1px solid #DDDDDD; } .voca-flist-column > ul > li:last-child { border-bottom: 1px solid #DDDDDD; } .voca-flist-column > ul > li > dl > dt, .voca-flist-column > ul > li > dl > dd { float: left; position: relative; min-height: 1px; margin: 0; padding: 0; } .voca-flist-column > ul > li > dl > dt { width: 11%; } .voca-flist-column > ul > li > dl > dt > a > img { width: 100%; } .voca-flist-column > ul > li > dl > dd { width: 53%; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) { width: 36%; text-align: right; } .voca-flist-column > ul > li > dl > dd > h5 { display: block; padding: 0; margin: 0; font-weight: 600; } .voca-flist-column > ul > li > dl > dd > h6 { display: block; padding: 7px 0 0; margin: 0; font-weight: 900; color: #787f89; } .voca-flist-column > ul > li > dl > dd > footer { margin-top: 10px; font-size: 14px; font-weight: 500; } .voca-flist-column > ul > li > dl > dd > footer > a { font-weight: 700; color: #4f4f4f; font-size: 16px; } .voca-flist-column > ul > li > dl > dd > footer > a:hover { color: #0000FF; } .voca-flist-column > ul > li > dl > dd > footer > span.keyword, .voca-flist-column > ul > li > dl > dd > footer > a > span.keyword { color: #FF1100; background-color: #FFFF00; font-weight: 700; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul { padding: 0; list-style: none; text-align: right; display: flex; justify-content: space-between; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li { position: relative; min-height: 1px; width: 25%; height: auto; padding: 0; text-align: center; margin: 0; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a { display: inline-block; width: 65px; height: 65px; -webkit-border-radius: 65px; border-radius: 65px; text-align: center; font-size: 16px; font-weight: 600; padding: 0; margin: 1px 2px; background-color: #999999; color: #FFFFFF; position: relative; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a > i { display: block; font-size: 22px; font-weight: normal; color: #FFFFFF; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a > span { display: block; font-size: 14px; font-weight: 600; color: #FFFFFF; position: absolute; bottom: 10%; width: 100%; left: 0; text-align: center; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a > span > em { font-style: normal; color: #DDDDDD; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a:hover, .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a.active { background-color: #4F89E9; text-decoration: none; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > span { display: block; font-size: 11px; font-weight: 600; padding: 0; color: #333333; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a.disabled, .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a[disabled] { cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; pointer-events: none; } .voca-flist-column .voca-list-img a { display: block; border: 5px solid #fafafa; border-radius: 10px; overflow: hidden; } @media all and (max-width: 1201px) { .voca-flist-column > ul > li > dl > dt { width: 11%; padding-right: 2%;} .voca-flist-column > ul > li > dl > dd { width: 49%; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) { width: 38%; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a { width: 62px; height: 62px; -webkit-border-radius: 62px; border-radius: 62px; padding: 0; } } @media all and (max-width: 993px) { .voca-flist-column > ul > li > dl > dt { width: 11%; max-width: 100px; padding-right: 2%;} .voca-flist-column > ul > li > dl > dd { width: 46%; padding: 0 0; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) { width: 42%; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li { float: none; position: normal; display: inline-block; width: auto; height: auto; padding: 0; text-align: center; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a { width: 62px; height: 62px; -webkit-border-radius: 62px; border-radius: 62px; padding: 0; } } @media all and (max-width: 769px) { .voca-flist-column > ul > li > dl > dt { width: 23%; max-width: 25%; min-width: 150px; padding-right: 0;} .voca-flist-column > ul > li > dl > dd { width: 66%; } .voca-flist-column > ul > li > dl > dd > footer { margin-top: 5px; font-size: 14px; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) { width: 66%; margin-top: 5px; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li { float: left; position: relative; display: inline-block; width: 78px; height: auto; padding: 0 1px; text-align: center; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a { width: 55px; height: 55px; -webkit-border-radius: 55px; border-radius: 55px; padding: 0; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a > i { font-size: 17px; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a > span { font-size: 13px; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > span { font-size: 10px; } } @media all and (max-width: 526px) { .voca-flist-column > ul > li > dl > dt { width: 20%; max-width: 25%; min-width: 110px; } .voca-flist-column > ul > li > dl > dd { width: 64%; } .voca-flist-column > ul > li > dl > dd > h6 { padding-top: 0; font-size: 14px; } .voca-flist-column > ul > li > dl > dd > footer { margin-top: 1px; font-size: 12px; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) { width: 64%; margin-top: 5px; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li { float: left; position: relative; display: inline-block; width: 25%; height: auto; padding: 0 1px; text-align: center; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a { width: 48px; height: 48px; -webkit-border-radius: 48px; border-radius: 48px; padding: 0; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a > i { font-size: 17px; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > a > span { font-size: 13px; } .voca-flist-column > ul > li > dl > dd:nth-of-type(2) > ul > li > span { font-size: 10px; } } /* VOCA SERIES LIST */ /* ##### dfb보카 css 추가사항 START ##### */ .voca-list-box {display: table; width: 100%;} .voca-list-box>div {display: table-cell; vertical-align: middle;} .voca-flist-column > ul {border: none;} .voca-flist-column > ul > li { background: url(../images/renewal/voca-list-box-bg.svg) #fff no-repeat 50% 100%; background-size: 100%; border: none;border-radius: 20px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,.07); margin-bottom: 10px; padding: 15px 10px 15px 20px; box-sizing: border-box;} .voca-list-box .voca-list-title {vertical-align: top; padding-right: 20px; width: 80px;} .voca-list-box .voca-list-title .dfb-title-date {font-size: 18px; color: #787f89; font-weight: 900; text-align: center;} .voca-list-box .voca-list-img {width: 90px; margin-left: 10px; margin-top: 10px;} .voca-list-box .voca-list-img a {display: block; border: 2px solid #fafafa; border-radius: 10px; overflow: hidden;} .voca-list-box > .btn-voca-wrap {width: 280px; text-align: center;} .voca-list-box > .btn-voca-wrap > ul {display: flex; justify-content: space-between;} .voca-list-box > .btn-voca-wrap > ul > li {width: 23%;} .voca-list-box > .btn-voca-wrap > ul > li > span {font-weight: 900;} .voca-list-box > .btn-voca-wrap > ul > li > a {color: #4d4d4d; text-decoration: none; font-weight: 900;} .voca-list-box > .btn-voca-wrap > ul > li > a {position: relative; display: block; } .voca-list-box > .btn-voca-wrap > ul > li > a > span {position: absolute; bottom: 14%; left: 0; text-align: center; width: 100%; color: #fff;} .voca-list-box > .btn-voca-wrap > ul > li > a > span em {font-style: normal;} .voca-list-word {padding: 20px 0; margin-left: 10px; word-break: break-word; padding-right: 10px; padding-left: 10px;} .voca-list-word footer { margin-left: 10px; display: flex; gap: 10px; flex-wrap: wrap; } .voca-list-word footer > a { font-weight: 700; color: #4f4f4f; font-size: 18px; flex-shrink: 0; background: #feee; padding: 2px 10px 4px; border-radius: 14px; } .dfb-title-tutor {font-weight: 400; color: #c5c8cd; font-size: 12px; text-align: center; margin-top: 10px; } .dfb-title-tutor .tutor-img {width: 50px; margin: 0 auto; border-radius: 100%; overflow: hidden; border: 1px solid #dbdbdb; border: 1px solid #fafafa; box-shadow: 0 5px 15px rgba(0,0,0,.07);} ul.idic-word-column {border-color: #b6b6b6; border-radius: 20px;} ul.idic-word-column:before { border-bottom-color: #b6b6b6;}.idic-sentence-list {width: 100%;} .idic-sentence-list > li.active {border: 3px solid #ef890d; border-radius: 3px; overflow: hidden;} .idic-word-column > li > dl > dt > a > div {background: #ef890d;} .voca-list-box > .btn-voca-wrap > ul > li > a[disabled] { pointer-events: none; cursor: not-allowed; } .vocaheader .btn-close {width: 30px; margin-top: 10px;} @media (max-width: 768px) { .voca-list-box {display: block; justify-content: space-between;} .voca-list-box>div {display: block;} .voca-list-box .voca-list-img { display: flex; width: 100%; justify-content: center; } .voca-list-box .voca-list-word { width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; } .voca-list-word footer { margin-left: 0; justify-content: center; } .voca-list-box > .btn-voca-wrap {margin: 0 auto; margin-top: 10px;} .voca-list-box .voca-list-title { display: flex; align-items: center; justify-content: space-between; width: 100%; } .dfb-title-tutor { margin-top: 0; } .dfb-title-tutor .tutor-img { width: 40px; } } /* ##### dfb보카 css 추가사항 END ##### */