@charset "utf-8";
/* 스포카 한스 네오체 */
@import url(../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo.css);
/* ybm */
@import url(../fonts/ybm/ybm-ext.css);
/* 나눔옛고어체 */
@import url(../fonts/yethangul/yethangul.css);


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
abbr, address, cite, code, dfn, em, img, small, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, a,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
mark, audio, video { margin: 0; padding: 0; font-size: 100%; background: transparent; border: 0; outline :0; vertical-align: baseline; }

html { -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; }
body { height: 100vh; font-weight: 400; overflow-y: hidden; line-height: 1.6; font-family: 'Spoqa Han Sans Neo', 'NanumBarunGothic-YetHangul', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul, ol, li, dl, dd { list-style: none; }
img { vertical-align: middle; }
a { display: inline-block; text-decoration: none; box-sizing: border-box; }
em, b { font-style: normal; }
b, strong { font-weight: bolder; }
div, span, td, li, input { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 {font-weight: normal;}

table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
th, td { word-wrap: break-word; word-break: break-all; }

legend { font-size: 0; }
summary { display: list-item; }

hr { display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid #cccccc; box-sizing: border-box; overflow: hidden; }
hr.hidden{ height: 0; margin: 0; border-top: 0;}

button, input, optgroup, select, textarea { margin: 0; font-size: 100%; font-family: 'Spoqa Han Sans Neo';}
textarea{ overflow-y: auto; overflow-x: hidden;}
button, input { overflow: visible; border: 0; }
button, select { text-transform: none; vertical-align: middle; }
button, [type="button"], [type="reset"], [type="submit"] { margin: 0; padding: 0; -webkit-appearance: button; cursor: pointer; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none;}
button::-moz-focusring, [type="button"]::-moz-focusring, [type="reset"]::-moz-focusring, [type="submit"]::-moz-focusring { outline: 1px dotted gray; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[hidden] { display: none; }
[type="search"] { -webkit-appearance:textfield; outline-offset: -1px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}
::-webkit-file-upload-button { -webkit-appearance:button; font: inherit; }
:focus { outline: 0; }
input:focus, a:focus, button:focus, textarea:focus { outline-color: gray; outline-offset: -1px; outline-style: dotted; outline-width: 1px;}
button::-moz-focusring { outline-color: gray; outline-offset: -1px; outline-style: dotted; outline-width: 1px;}
.pcView .notPC { display: none !important; }

input { margin: 0; padding: 0; vertical-align: middle; }
input[type=text]::-ms-clear{display:none;}
input[type="text"], input[type="search"] { width: 100%; height: 100%; color: #383735; background-color: transparent; border: 0; font-family: 'Spoqa Han Sans Neo', 'NanumBarunGothic-YetHangul'; }
input[type="text"]::placeholder, input[type="search"]::placeholder { color: #ababab; font-family: 'Spoqa Han Sans Neo', 'NanumBarunGothic-YetHangul'; }

/* 이미지 */
img {pointer-events: none;}
/* 숨김텍스트 */
*[class]._hidden{ position:absolute;display:block; width:1px; height:1px; overflow:hidden; white-space:nowrap; clip:rect(1px 1px 1px 1px); clip-path:inset(1px);}

.inputBox { position: relative; }
.searchBox .inputBox { height: 100%; font-size: 24px; font-weight: 700; line-height: 1.13; font-family: 'Spoqa Han Sans Neo', 'NanumBarunGothic-YetHangul'; }
.searchBox .inputBox input[type="text"], .searchBox .inputBox input[type="search"] { height: 56px; line-height: 56px; outline: none;}
.inputBox .btn-delTxt { position: absolute; top: 10px; right: 0; width: 36px; height: 36px; background: url('../images/common/btn_close_02_n@2x.png') center center no-repeat #fff; background-size: 36px 36px; text-indent: -9999px; }
.searchBox .inputBox .btn-delTxt { top: 1px; right: 1px; width: 54px; height: 54px; }
.searchBox .inputBox .btn-delTxt { display: none; }
.searchBox .inputBox .btn-delTxt.on { display: block; }
.inputBox input::-ms-clear, .inputBox input::-ms-reveal { display: none; width: 0; height: 0; }
.inputBox input::-webkit-search-decoration,
.inputBox input::-webkit-search-cancel-button,
.inputBox input::-webkit-search-results-button,
.inputBox input::-webkit-search-results-decoration { display: none; }
select { padding: 5px; background: #fff; border: solid 1px #d5d5d5; line-height: 18px; }


.cls::after { content: ''; display: block; clear: both; }
.pos-r { position: relative !important; }
.fl-l { float: left !important; }
.fl-r { float: right !important; }
.taL { text-align: left !important;}
.taC { text-align: center !important;}
.taR { text-align: right !important;}
.vaT { vertical-align: top !important;}
.vaM { vertical-align: middle !important;}
.d-none { display: none !important; height: 0; overflow: hidden; }
.d-tbl { display: table; width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
.d-tbc { display: table-cell; width: auto; vertical-align: top; }
.tabcont { display: none; }
.tabcont.active { display: block; }
button.hidden { display: none !important; }
.mt0 { margin-top: 0 !important; }

/*말줄임*/
.abbreviation { display: block; width: 99%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }

/* 품사 - 기본형 */
span.w-pos{ display: inline-block; height: 20px; padding: 2px 5px; font-size: 12px; color: #ffffff; text-align: center; background-color: #b7b7b7; min-width: 20px; line-height: 1.58; border-radius: 5px; vertical-align: middle; }


/* 공통 */
body { background-color: #004f5e; }
.wrap { width: 100%; height: 100vh; }
.btn-back { position: fixed; top: 0; left: 50%; display: none; width: 64px; height: 64px; margin-left: -640px; background: url('../images/common/comm_btn_back_w@2x.png') 0 0 no-repeat; background-size: cover; border: 0; text-indent: -9999px; z-index: 33; }
.btn-back.btn-closeOut { background: url('../images/common/common_btn_close_w@2x.png') 0 0 no-repeat; background-size: cover; z-index: 13; }
.btn-back.btn-backDetail { background: url('../images/common/common_btn_back_b@2x.png') 0 0 no-repeat; background-size: cover; }
.btn-back.actived { background: url('../images/common/common_btn_back_g@2x.png') 0 0 no-repeat; background-size: cover; }
.btn-closeOut.actived { background: url('../images/common/common_btn_close_g@2x.png') 0 0 no-repeat; background-size: cover; }
.btn-back.onview { display: block; }
.btn-back.hasWrapper { width: 100px; height: 50px; margin-left: -625px; font-size: 20px; color: #fff; background-color: #0a424d; background-image: none; line-height: 1.1; /* font-family: 'LOVELOVE_OTFBold';  */ text-indent: 0; border-radius: 10px;}
.btn-goSearch { position: fixed; top: 64px; left: 50%; display: none; width: 64px; height: 64px; margin-left: -640px; background: url('../images/icon/icon_search_n@2x.png') center center no-repeat; background-size: 32px 29px; border: 0; text-indent: -9999px; z-index: 33; }
.btn-goSearch.active { display: block; }
.timeline-tot-wrap .btn-back.btn-closeOut { position: absolute; z-index: 146 ; }
.btn-timeline-question { position: absolute; top: 16px; left: 50%; width: 38px; height: 38px; margin-left: 570px; background: url('../images/icon/icon_question_01_n@2x.png') 0 0 no-repeat; background-size: cover; border: 0; text-indent: -9999px; z-index: 33; }
#container { position:relative; width: 100%; height: auto; margin: 0 auto; max-width: 1280px; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
.bulInfo { position: relative; padding-left: 10px; }
.bulInfo::before{ content: '·'; position: absolute; top: 0; left: 0; }
.btn-out { position: absolute; top: 0; left: calc(50% - 640px); width: 64px; height: 64px; font-size: 0; background: url('../images/common/common_btn_close_w@2x.png') 0 0 no-repeat; background-size: cover; }

/* main - 공통 */
section#main { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; }
section#main.d-under{ height: 100vh; overflow-y: hidden; }
.fixNoneBoxL { position: fixed; top: 0; left: 0; width: calc((100vw - 1280px) / 2); height: 100vh; background-color: #004f5e; z-index: 200; }
.fixNoneBox { position: fixed; top: 0; right: 0; width: calc((100vw - 1280px) / 2); height: 100vh; background-color: #004f5e; z-index: 200; }
.main-inner { width: 1050px; margin: 0 auto; }
.main-head { position: fixed; top: 0; left: calc(50% - 640px); width: 1280px; z-index: 10; }
.main-head .main-inner { position: relative; padding-bottom: 30px; /*background-color: #004f5e;*/ }
.main-head .main-inner::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #fff; opacity: .45; }
.main-head .top_aniBox { height: 170px; text-align: center; }
.main-head .top_aniBox img { width: 1280px; height: auto; vertical-align: top; cursor: pointer; }

/* 메인타이틀 - 공통 */
.main-head .head-tit{ position: relative; padding: 62px 0 42px; text-align: center; }
.main-head .head-tit h1{ position: relative; display: inline-block; font-size: 54px; color: #fff; line-height: 1.11; cursor: pointer; }
.main-head .head-tit h1::before{ content: ''; position: absolute; }
/* 메인타이틀 - 검색왕 */
#searchKing .main-head .head-tit { padding: 45px 0 33px; }
#searchKing .main-head .head-tit h1 { width: 295px; height: 93px; font-size: 0; color: transparent; background: url(../images/common/logo.png) no-repeat center center / 295px; }
/* 메인타이틀 - 웅진학습백과 */
#main_woongjin .main-head .head-tit h1 { padding-left: 102px; }
#main_woongjin .main-head .head-tit h1::before{ top: 5px; left: 0; width: 84px; height: 45px; background: url('../images/icon/icon_dic_wjstudy_04@2x.png') 0 0 no-repeat; background-size: cover;}
/* 메인타이틀 - 영한사전 */
#main_eng .main-head .head-tit h1 { padding-left: 93px; }
#main_eng .main-head .head-tit h1::before{ top: 9px; left: 0; width: 78px; height: 45px; background: url('../images/icon/icon_dic_ybm_04@2x.png') 0 0 no-repeat; background-size: cover;}
/* 메인타이틀 - 용어사전 */
#main_word .main-head .head-tit h1 { padding-left: 82px; }
#main_word .main-head .head-tit h1::before{ top: 10px; left: 0; width: 58px; height: 52px; background: url('../images/icon/icon_dic_term_04@2x.png') 0 0 no-repeat; background-size: cover;}
/* 메인타이틀 - 국어사전 */
#main_kor .main-head .head-tit h1 { padding-left: 72px; }
#main_kor .main-head .head-tit h1::before{ top: 10px; left: 0; width: 48px; height: 49px; background: url('../images/icon/icon_dic_korean_04@2x.png') 0 0 no-repeat; background-size: cover;}
/* 메인타이틀 - 초등학습백과 */
#main_elem .main-head .head-tit h1 { padding-left: 72px; }
#main_elem .main-head .head-tit h1::before{ top: 10px; left: 0; width: 42px; height: 51px; background: url('../images/icon/icon_dic_elstudy_04@2x.png') 0 0 no-repeat; background-size: cover;}
/* 메인타이틀 - 공공DB 유물정보 */
#main_relic .main-head .head-tit h1 { padding-left: 82px; }
#main_relic .main-head .head-tit h1::before{ top: 11px; left: 0; width: 67px; height: 46px; background: url('../images/icon/icon_dic_relic_04@2x.png') 0 0 no-repeat; background-size: cover;}
/* 메인타이틀 - 공공DB 자연사정보 */
#main_natural .main-head .head-tit h1 { padding-left: 82px; }
#main_natural .main-head .head-tit h1::before{ top: 6px; left: 0; width: 69px; height: 53px; background: url('../images/icon/icon_dic_natural_04@2x.png') 0 0 no-repeat; background-size: cover;}
/* 메인타이틀 - 공공DB 문화재청  */
#main_cultural .main-head .head-tit h1 { padding-left: 82px; }
#main_cultural .main-head .head-tit h1::before{ top: 12px; left: 0; width: 73px; height: 43px; background: url('../images/icon/icon_dic_cultural_04@2x.png') 0 0 no-repeat; background-size: cover;}
/* 메인타이틀 - 공공DB 관광사진정보 */
#main_sight .main-head .head-tit h1 { padding-left: 82px; }
#main_sight .main-head .head-tit h1::before{ top: 13px; left: 0; width: 60px; height: 46px; background: url('../images/icon/icon_dic_sightseeing_04@2x.png') 0 0 no-repeat; background-size: cover;}

/* 메인 상단 우측 - 배너 롤링 영역 */
.main-banner-wrap { position: absolute; top: 65px; right: 20px; width: 264px; }
.main-banner-wrap .swiper-container { padding-bottom: 26px; }
.main-banner-wrap .swiper-slide { height: 72px; }
.main-banner-wrap .btn-main-top-banner { width: 100%; height: 100%; }
.main-banner-wrap .btn-audiotop { background: transparent url('../images/common/bnr_main_top300@2x.png')  no-repeat 0 0 / cover; }
.main-banner-wrap .btn-event { background: transparent url('../images/common/bnr_main_event_001@2x.png')  no-repeat 0 0 / cover; }
.main-banner-wrap .btn-event2 { background: transparent url('../images/common/bnr_main_event_001@2x.png')  no-repeat 0 0 / cover; }
.main-banner-wrap .btn-audiotop2 { background: transparent url('../images/event/2204/bnr_main_event_220314@2x.png')  no-repeat center 0/265px; }
.main-banner-wrap .btn-spring-evt { background: transparent url('../images/event/2205/evtdummy.png') no-repeat center; background-size: auto; }
.main-banner-wrap .swiper-pagination { bottom: 3px; }
.main-banner-wrap .swiper-pagination-bullet { width: 6px; height: 6px; }
.main-banner-wrap .swiper-pagination-bullet { background-color: #fff; opacity: 0.4; }
.main-banner-wrap .swiper-pagination-bullet-active { opacity: 1; }

/* 메인 검색영역 */
.main-head .searchBox{ position: relative; height: 76px; padding: 5px 97px 5px 35px; background-color: #fff; border: 5px solid #c5c5c5; border-radius: 38px; }
.head-top .d-tbc{ height: 76px; }
.main-head .searchBox .btn-search { position: absolute; top: 5px; right: 8px; width: 81px; height: 56px; background: url('../images/icon/icon_search_n@2x.png') center center no-repeat #38818f; background-size: 32px 29px; border: 0; border-radius: 28px; text-indent: -9999px; }
.main-head .searchBox .btn-search.actived { background: url('../images/icon/icon_search_p@2x.png') center center no-repeat #1c6572; background-size: 32px 29px;}
.main-head .toggleSwitch { width: 300px; height: 76px; padding-right: 10px; }
.main-head .micTbc { width: 110px; height: 76px; padding-left: 10px; }
.main-head .btn-mic { width: 100%; height: 76px; background: url('../images/icon/icon_mike_n@2x.png') center center no-repeat #fb4f2b; background-size: 23px 32px; border: 6px solid #ffaa68; border-radius: 38px; }
.main-head .btn-mic.actived { background: url('../images/icon/icon_mike_p@2x.png') center center no-repeat #c43d20; background-size: 23px 32px; border-color: #cc732e; }

/* switchBox - 공통 */
.switchBox { position: relative; display: block; width: calc(100% - 6px); height: 69px; margin-top: 5px; padding: 5px 0; font-size: 24px; font-weight: 700; background-color: #063d47; border: 3px solid #06333b; border-radius: 38px; line-height: 1.13; box-sizing: border-box; }
.switchBox::after { content: ''; display: block; clear: both; }
.switchBox input[type="checkbox"] { display: none; }
.switchBox .toggleTxtBox { display: block; width: auto; height: 76px; margin-top: -13px; margin-left: -3px; float: left; }
.switchBox .toggleTxt { display: table; width: 100%; height: 76px; table-layout: fixed; }
.switchBox .toggleTxt span { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; }
.switchBox .toggleTxtBox em {display: flex; width: calc(100% + 10px); height: 76px; justify-content: center; align-items: center; color: #ffffff; background: #979797; border: 5px solid #808080; border-radius: 38px; box-sizing: border-box;}
.switchBox .switchTrue em { color: #ababab; background-color: transparent; border-color: transparent; }
.switchBox.chk-active .switchFalse em { color: #ababab; background-color: transparent; border-color: transparent; }
.switchBox.chk-active .switchTrue em { color: #ffffff; border-color: transparent; }
/* switchBox - 웅진학습백과 */
.switchBox-wj .switchTrue { width: 180px; }
.switchBox-wj .switchFalse { width: calc(100% - 180px); }
.switchBox-wj.chk-active .switchTrue em { background-color: #ff9e40; border-color: #e67e19;}
/* switchBox - 영한사전 */
.switchBox-eng .switchTrue { width: 180px; }
.switchBox-eng .switchFalse { width: calc(100% - 180px); }
.switchBox-eng.chk-active .switchTrue em { background-color: #5eceb8; border-color: #149f84;}
/* switchBox - 초등학습백과 */
.switchBox-elem .switchTrue { width: 180px; }
.switchBox-elem .switchFalse { width: calc(100% - 180px); }
.switchBox-elem.chk-active .switchTrue em { background-color: #ae79d1; border-color: #8a4cb4;}
/* switchBox - 용어사전 */
.switchBox-word .switchTrue { width: 180px; }
.switchBox-word .switchFalse { width: calc(100% - 180px); }
.switchBox-word.chk-active .switchTrue em { background-color: #f47495; border-color: #df4f74;}
/* switchBox - 국어사전 */
.switchBox-kor .switchTrue { width: 180px; }
.switchBox-kor .switchFalse { width: calc(100% - 180px); }
.switchBox-kor.chk-active .switchTrue em { background-color: #5e96ce; border-color: #307ecc;}
/* switchBox - 공공DB 사전 */
.switchBox-pub .switchTrue, .switchBox-relic .switchTrue, .switchBox-natural .switchTrue, .switchBox-cultural .switchTrue, .switchBox-sight .switchTrue { width: 180px; }
.switchBox-pub .switchFalse, .switchBox-relic .switchFalse, .switchBox-natural .switchFalse, .switchBox-cultural .switchFalse, .switchBox-sight .switchFalse { width: calc(100% - 180px); }
.switchBox-pub.chk-active .switchTrue em, .switchBox-relic.chk-active .switchTrue em, .switchBox-natural.chk-active .switchTrue em, .switchBox-cultural.chk-active .switchTrue em, .switchBox-sight.chk-active .switchTrue em { background-color: #88c669; border-color: #599f36; }

/* 최근검색어 */
.recentSearch{margin: -4px 0;padding: 0 2px;background-color: #004f5e;overflow: hidden;}
.recentSearch ul::after {content: ''; display: block; clear: both; }
/* .recentSearch ul li { position: relative; display: block; float: left; min-height: 39px; padding-right: 45px; background-color: #7fa7af; border-radius: 20px; margin-right: 10px; margin-bottom: 10px; } */
.recentSearch ul {display: flex; flex-wrap: nowrap;}
.recentSearch ul li { position: relative; display: flex; width: auto; flex: 0 0 auto; align-items: center; margin-right: 10px; margin-bottom: 10px; padding-right: 45px; background-color: #7fa7af; min-height: 39px; border-radius: 20px; }
.recentSearch ul li a { display: block; padding-left: 19px; font-size: 16px; color: #ffffff;  line-height: 1;}
.recentSearch ul li .del-btn { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background-color: transparent;}
.recentSearch ul li .del-btn::after { content: '';position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; background: url('../images/common/btn_close_01_n@2x.png') 0 0 no-repeat; background-size: cover; }
.recentSearch .swiper-scrollbar-drag {background: #38818f;}
.recentSearch.mobScr ul {overflow-x: auto;}

/* 메인 바디 */
.main-body {position: relative;left: 10px;width: 1071px;height: calc(100vh - 269px);margin: 269px auto 0;overflow-x: hidden;overflow-y: auto;}
.main-body::-webkit-scrollbar{width:20px;}
.main-body::-webkit-scrollbar-thumb{background-color:#38818f;background-clip:padding-box;border:6px solid transparent;border-radius:10px;}
.main-body::-webkit-scrollbar-track{background-color:transparent;}
#searchKing .main-body { height: calc(100vh - 276px);margin-top: 295px;}
#searchKing .main-body.is-active { height: calc(100vh - 116px); margin-top: 116px; }
#searchKing .main-body.is-photo {padding-bottom: 128px;}
.main-initBox { position: relative; height: calc(100vh - 276px - 30px); background: url('../images/common/img_searchking_main@2x.png') 160px bottom no-repeat transparent; background-size: 398px 330px; min-height: 370px; }
.main-initBox p { position: absolute; left: 575px; bottom: 120px; font-size: 36px; color: #7fa7af;}
.main-initBox.main-iss { background: url('../images/common/img_searchking_noresult_6@2x.png') no-repeat left 137px bottom -7px; background-size: 548px;min-height: 380px; }
.main-initBox.main-iss p { left: 710px; bottom: 125px; }
.main-body_blank { position: relative; height: calc(100vh - 269px); background: url('../images/common/img_searchking_noresult_2@2x.png') 205px bottom no-repeat transparent; background-size: 628px 493px; min-height: 500px; }
#searchKing .main-body_blank { height: calc(100vh - 276px); }
.main-body_blank .recommendList { position: absolute; left: 210px; bottom: 60px; display: block; width: 325px; }
.main-body_blank .recommendList li { display: block; margin-bottom: 25px; text-align: center; }
.main-body_blank .recommendList li:last-child { margin-bottom: 0; }
.main-body_blank .recommendList li a { display: inline-block; padding: 11px 30px 10px; font-size: 17px ; color: #fff; background-color: #7fa7af; border-radius: 20px;  }
.main-body_blank p { position: absolute; left: 595px; bottom: 315px; font-size: 36px; color: #7fa7af; text-align: center; font-weight: 700; line-height: 1.28; }
.main-body_head { position: relative; padding: 18px 0; }
.main-body_head::before{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #729ea6; }
.main-body_head.js-recentSearch { padding-bottom: 8px; }
.main-body_head .fixedTbc{ width: 145px; padding-right: 16px; }
.tablist-tot a, .tablist ul a{ position: relative; padding: 7px 20px; color: #fff; text-align: center; background-color: #0a424d; min-width: 120px; min-height: 44px; border-radius: 26px; }
.tablist-tot a {display: flex;width: 100%;justify-content: center;align-items: center;padding-right: 10px;padding-left: 10px;}
.tablist-tot span.txt, .tablist span.txt { position: relative; display: block; font-size: 18px; font-weight: 400;}
.tablist-tot span.cnt, .tablist span.cnt {position: relative;display: block;height: 26px;margin-left: 5px;margin-left: 8px;font-size: 18px;text-align: center;font-weight: 700;line-height: 1.4;border-bottom: 2px solid #88c669;}
.tablist-tot span.cnt { color: #ababab; border-color: #ababab; }
.tablist-tot a.on span.cnt, .tablist ul .on a span.cnt { color: #ffffff; border-color: #ffffff; }
.tablist-tot a span.cnt::after { background-color: #ffffff; }
.tablist-tot a.on { background-color: #808080; }
.scrollX-box { position: relative; width: auto; min-width: 100%; overflow-x: auto; white-space: nowrap; }
.main-body_head.longActive::after { content: ''; position: absolute; top: 35px; right: -30px; width: 36px; height: 20px; animation-name: arrowBlink; animation-duration: 2000ms; animation-iteration-count:infinite; }

/* 210513, 수정 */
@keyframes arrowBlink {
    0% { background-image: url('../images/icon/icon_arrow_01@2x.png'), url('../images/icon/icon_arrow_01@2x.png');  background-repeat: no-repeat, no-repeat; background-position: 36px 0, 36px 0; background-size: 12px 20px, 12px 20px; }
    25% { background-image: url('../images/icon/icon_arrow_01@2x.png'), url('../images/icon/icon_arrow_01@2x.png');  background-repeat: no-repeat, no-repeat; background-position: 24px 0, 24px 0; background-size: 12px 20px, 12px 20px; }
    50% { background-image: url('../images/icon/icon_arrow_01@2x.png'), url('../images/icon/icon_arrow_01@2x.png');  background-repeat: no-repeat, no-repeat; background-position: 24px 0, 12px 0; background-size: 12px 20px, 12px 20px; }
    75% { background-image: url('../images/icon/icon_arrow_01@2x.png'), url('../images/icon/icon_arrow_01@2x.png');  background-repeat: no-repeat, no-repeat; background-position: 24px 0, 12px 0; background-size: 12px 20px, 12px 20px; }
    100% { background-image: url('../images/icon/icon_arrow_01@2x.png'), url('../images/icon/icon_arrow_01@2x.png');  background-repeat: no-repeat, no-repeat; background-position: 24px 0, 12px 0; background-size: 12px 20px, 12px 20px; }
}
.scrollX-box ul li{ display: inline-block; margin-right: 15px; }
.scrollX-box ul li:last-child{ margin-right: 0; }
.tablist ul a {display: flex; align-items: center; justify-items: center;}
.tablist ul a span.txt {display: flex; align-items: center; justify-items: center;}
.tablist ul a span.txt::before { content: ''; display: block; width: 30px; height: 26px; margin-right: 4px; background-repeat: no-repeat; background-position: center center;}

.book-wj a span.txt::before { background-image: url('../images/icon/icon_dic_wjstudy_01@2x.png'); background-size: 21px 13px; }
.book-wj a span.cnt { color: #ff9e40; border-color: #ff9e40; }
.book-wj.on a { background-color: #ff9e40; }
.book-wj.on a span.txt::before { background-image: url('../images/icon/icon_dic_wjstudy_02@2x.png'); }
.book-iss a span.txt::before { background-image: url('../images/icon/icon_dic_suprise_01@2x.png'); background-size: 22px 24px; }
.book-iss a span.cnt { color: #f827ce; border-color: #f827ce; }
.book-iss.on a { background-color: #f827ce; }
.book-iss.on a span.txt::before { background-image: url('../images/icon/icon_dic_suprise_02@2x.png'); }
.book-elem a span.txt::before { background-image: url('../images/icon/icon_dic_elstudy_01@2x.png'); background-size: 14px 17px; }
.book-elem a span.cnt { color: #ae79d1; border-color: #ae79d1; }
.book-elem.on a { background-color: #ae79d1; }
.book-elem.on a span.txt::before { background-image: url('../images/icon/icon_dic_elstudy_02@2x.png'); }
.book-word a span.txt::before { background-image: url('../images/icon/icon_dic_term_01@2x.png'); background-size: 18px 16px; }
.book-word a span.cnt { color: #f47495; border-color: #f47495; }
.book-word.on a { background-color: #f47495; }
.book-word.on a span.txt::before { background-image: url('../images/icon/icon_dic_term_02@2x.png'); }
.book-kor a span.txt::before { background-image: url('../images/icon/icon_dic_korean_01@2x.png'); background-size: 18px 18px; }
.book-kor a span.cnt { color: #5e96ce; border-color: #5e96ce; }
.book-kor a { background-color: #5e96ce; }
.book-kor.on a { background-color: #5e96ce; }
.book-kor.on a span.txt::before { background-image: url('../images/icon/icon_dic_korean_02@2x.png'); }
.book-eng a span.txt::before { background-image: url('../images/icon/icon_dic_ybm_01@2x.png'); background-size: 29px 17px; }
.book-eng a span.cnt { color: #5eceb8; border-color: #5eceb8; }
.book-eng.on a { background-color: #5eceb8; }
.book-eng.on a span.txt::before { background-image: url('../images/icon/icon_dic_ybm_02@2x.png'); }
.book-relic a span.txt::before { background-image: url('../images/icon/icon_dic_relic_01@2x.png'); background-size: 23px 16px; }
.book-relic a span.cnt { color: #88c669; border-color: #88c669; }
.book-relic.on a { background-color: #88c669; }
.book-relic.on a span.txt::before { background-image: url('../images/icon/icon_dic_relic_02@2x.png'); }
.book-natural a span.txt::before { background-image: url('../images/icon/icon_dic_natural_01@2x.png'); background-size: 26px 18px; }
.book-natural a span.cnt { color: #88c669; border-color: #88c669; }
.book-natural.on a { background-color: #88c669; }
.book-natural.on a span.txt::before { background-image: url('../images/icon/icon_dic_natural_02@2x.png'); }
.book-cultural a span.txt::before { background-image: url('../images/icon/icon_dic_cultural_01@2x.png'); background-size: 27px 18px; }
.book-cultural a span.cnt { color: #88c669; border-color: #88c669; }
.book-cultural.on a { background-color: #88c669; }
.book-cultural.on a span.txt::before { background-image: url('../images/icon/icon_dic_cultural_02@2x.png'); }
.book-sight a span.txt::before { background-image: url('../images/icon/icon_dic_sightseeing_01@2x.png'); background-size: 21px 17px; }
.book-sight a span.cnt { color: #88c669; border-color: #88c669; }
.book-sight.on a { background-color: #88c669; }
.book-sight.on a span.txt::before { background-image: url('../images/icon/icon_dic_sightseeing_02@2x.png'); }
.book-woorimal a span.txt::before { background-image: url('../images/icon/icon_dic_sam_01@2x.png'); background-size: 24px 19px; }
.book-woorimal a span.cnt { color: #5e96ce; border-color: #5e96ce; }
.book-woorimal a { background-color: #5e96ce; }
.book-woorimal.on a { background-color: #5e96ce; }
.book-woorimal.on a span.txt::before { background-image: url('../images/icon/icon_dic_sam_02@2x.png'); }
.book-folklore a span.txt::before { background-image: url('../images/icon/icon_dic_folklore_01@2x.png'); background-size: 22px 19px; }
.book-folklore a span.cnt { color: #88c669; border-color: #88c669; }
.book-folklore a { background-color: #88c669; }
.book-folklore.on a { background-color: #88c669; }
.book-folklore.on a span.txt::before { background-image: url('../images/icon/icon_dic_folklore_02@2x.png'); }
.book-biology a span.txt::before { background-image: url('../images/icon/icon_dic_biology_01@2x.png'); background-size: 27px 18px; }
.book-biology a span.cnt { color: #88c669; border-color: #88c669; }
.book-biology a { background-color: #88c669; }
.book-biology.on a { background-color: #88c669; }
.book-biology.on a span.txt::before { background-image: url('../images/icon/icon_dic_biology_02@2x.png'); }
.book-royal a span.txt::before { background-image: url('../images/icon/icon_dic_royal_01@2x.png'); background-size: 20px 20px; }
.book-royal a span.cnt { color: #88c669; border-color: #88c669; }
.book-royal a { background-color: #88c669; }
.book-royal.on a { background-color: #88c669; }
.book-royal.on a span.txt::before { background-image: url('../images/icon/icon_dic_royal_02@2x.png'); }
.book-dic3d a span.txt::before { background-image: url('../images/icon/icon_dic_3d_05@2x.png'); background-size: 26px 26px; }
.book-dic3d a span.cnt { color: #32c38c; border-color: #32c38c; }
.book-dic3d a { background-color: #32c38c; }
.book-dic3d.on a { background-color: #32c38c; }
.book-dic3d.on a span.txt::before { background-image: url('../images/icon/icon_dic_3d_02@2x.png'); }
.book-eduwill a span.txt::before { background-image: url('../images/icon/icon_dic_eduwill_06.svg'); background-size: 26px 26px; }
.book-eduwill a span.cnt { color: #ef585b; border-color: #ef585b; }
.book-eduwill a { background-color: #ef585b; }
.book-eduwill.on a { background-color: #ef585b; }
.book-eduwill.on a span.txt::before { background-image: url('../images/icon/icon_dic_eduwill_04.svg'); }
.book-art a span.txt::before { background-image: url('../images/icon/icon_dic_art_01.svg'); background-size: 26px 26px; }
.book-art a span.cnt { color: #a58255; border-color: #a58255; }
.book-art a { background-color: #a58255; }
.book-art.on a { background-color: #a58255; }
.book-art.on a span.txt::before { background-image: url('../images/icon/icon_dic_art_02.svg'); }
.book-oceans a span.txt::before { /*top: 5px; width: 23px; height: 20px;*/ background-image: url('../images/icon/icon_dic_oceans_01.svg'); background-size: 23px 20px; }
.book-oceans a span.cnt { color: #88c669; border-color: #88c669; }
.book-oceans a { background-color: #88c669; }
.book-oceans.on a { background-color: #88c669; }
.book-oceans.on a span.txt::before { background-image: url('../images/icon/icon_dic_oceans_02.svg'); }
.book-jongmyo a span.txt::before { background-image: url('../images/icon/icon_dic_palace_01.svg'); background-size: 24px 20px; }
.book-jongmyo a span.cnt { color: #88c669; border-color: #88c669; }
.book-jongmyo a { background-color: #88c669; }
.book-jongmyo.on a { background-color: #88c669; }
.book-jongmyo.on a span.txt::before { background-image: url('../images/icon/icon_dic_palace_02.svg'); }
.book-country a span.txt::before { background-image: url(../images/icon/icon_dic_nation_01@2x.png); background-size: 20px 20px; }
.book-country a span.cnt { color: #88c669; border-color: #88c669; }
.book-country a { background-color: #88c669; }
.book-country.on a { background-color: #88c669; }
.book-country.on a span.txt::before { background-image: url(../images/icon/icon_dic_nation_02@2x.png); }
.book-math a span.txt::before { background-image: url('../images/icon/icon_dic_math_01.svg'); background-size: 30px 30px; }
.book-math a span.cnt { color: #41b9eb; border-color: #41b9eb; }
.book-math a { background-color: #41b9eb; }
.book-math.on a { background-color: #41b9eb; }
.book-math.on a span.txt::before { background-image: url('../images/icon/icon_dic_math_02.svg'); }
.book-dino a span.txt::before { background-image: url('../images/icon/icon_dic_science_01.svg'); background-size: 28px; }
.book-dino a span.cnt { color: #88c669; border-color: #88c669; }
.book-dino a { background-color: #88c669; }
.book-dino.on a { background-color: #88c669; }
.book-dino.on a span.txt::before { background-image: url('../images/icon/icon_dic_science_02.svg'); }
.book-affair a span.txt::before { background-image: url('../images/icon/icon_dic_affair_01.svg'); background-size: 30px; }
.book-affair a span.cnt { color: #f8bd00; border-color: #f8bd00; }
.book-affair a { background-color: #f8bd00; }
.book-affair.on a { background-color: #f8bd00; }
.book-affair.on a span.txt::before { background-image: url('../images/icon/icon_dic_affair.svg'); }
.book-plant a span.txt::before { background-image: url('../images/icon/icon_dic_plant_01.svg'); background-size: 30px; }
.book-plant a span.cnt { color: #88c669; border-color: #88c669; }
.book-plant a { background-color: #88c669; }
.book-plant.on a { background-color: #88c669; }
.book-plant.on a span.txt::before { background-image: url('../images/icon/icon_dic_plant_02.svg'); }
.book-modern a span.txt::before { background-image: url('../images/icon/icon_dic_history_01.svg'); background-size: 32px; }
.book-modern a span.cnt { color: #a58255; border-color: #a58255; }
.book-modern a { background-color: #a58255; }
.book-modern.on a { background-color: #a58255; }
.book-modern.on a span.txt::before { background-image: url('../images/icon/icon_dic_history_03.svg'); }

.main-body_cont { padding-top: 30px; }
.tileListBox { padding-top: 30px;  overflow-x: hidden;  }
.tileList.mainlist { height: 97%; }
.tileList .mainlist_tit{ margin-top: -7px; margin-bottom: 20px; font-size: 22px; color: #ffffff; font-weight: 700; }
.tileList > ul {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.tileList ul li {width: 230px;height: 290px;margin-right: 43px;margin-bottom: 30px;overflow: hidden;}
.tileList ul li:nth-child(4n) {margin-right: 0;}
.tileList ul li a.list-thumBox { display: block; width: 100%; height: 100%; padding: 0 21px; text-align: left; background-color: #fff; border-radius: 20px;}
.tileList ul li a.list-thumBox.actived { background-color: #e4e4e4; }
.issBox { position: absolute; left: 143px; bottom: 72px; width: 246px; height: 301px; border-top-left-radius: 30px; overflow: hidden; }
.issBox .tileList { width: 100%; height: 100%; }
.issBox .tileList ul { width: 100%; height: 100%; margin-right: auto; margin-left: auto; }
.issBox .tileList ul li { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; padding: 0; float: none; }
.issBox .tileList ul li a.list-thumBox { border-top-left-radius: 35px; }
.issBox .swiper-pagination-bullet-active {background: #000;}
.issBox .swiper-pagination-bullet {width: 10px; height: 10px;}
.issBox .swiper-container-horizontal>.swiper-pagination-bullets {bottom: 8px;}
.issBox .tile_affair .list-thumBox p.cont { height:46px; -webkit-line-clamp: 2; line-height: 1.63; }

/* 타입 타입 : 기본형 */
.list-thumBox_cat { color: #ffffff; text-align: center; }
.list-thumBox_cat-inner { display: inline-flex; height: 34px; justify-content: center; align-items: center; font-size: 16px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; vertical-align: top; }
.list-thumBox_cat-inner .txt { position: relative;  font-size: 16px; letter-spacing: -0.14px;}
.list-thumBox_cat-inner .txt::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.list-thumBox_tit { margin-top: 11px; color: #383735; line-height: 1.13; }
.list-thumBox_tit h2 { font-size: 28px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
.list-thumBox_tit h2 em { font-size: 15px; }
.list-thumBox_tit h2 sup { font-size: 15px; vertical-align: super; }
.list-thumBox_cont { margin-top: 7px; font-size: 16px; color: #383735; line-height: 1.63;  }
.list-thumBox_cont .tumbImgCropBox { height: 181px; border-radius: 10px; overflow-y: hidden;}
.list-thumBox_cont .tumbImgCropBox img{ width: 100%; height: auto; border-radius: 10px; }
.list-thumBox_cont p.cont { position: static; left: auto; bottom: auto; display: -webkit-box; height: 50px; font-size: inherit; color: inherit; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; white-space: normal; overflow: hidden; text-overflow: ellipsis;}
.list-thumBox_cont p.cont + .tumbImgCropBox { height: 124px; margin-top: 12px; }
.list-thumBox.onlyTxt p.cont { height: 186px; -webkit-line-clamp: 7; }
.list-thumBox_cont p.cont span.ex { position: relative; display: block; padding-left: 10px; word-break: break-all; }
.list-thumBox_cont p.cont span.ex::before { content: '\00B7'; position: absolute; top: 0; left: 0; }
.list-thumBox_cont p.cont strong { font-weight: 700; }
.list-thumBox_sec { width: 100%; margin-top: 10px; }
.list-thumBox_sec p.sec-tit { position: relative; padding-left: 8px; font-size: 16px; color: #383735; text-align: left;  line-height: 1.63; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
.list-thumBox_sec p.sec-tit::before { content: ''; position: absolute; top: 50%; left: 0; width: 4px; height: 4px; margin-top: -2px; background-color: #ababab; border-radius: 50%; }
.list-thumBox_sec p.sec-tit em { color: #ababab; }
.list-thumBox_from { width: 100%; margin-top: 10px; }
.list-thumBox_from p.from-tit { position: relative; padding-left: 8px; font-size: 16px; color: #383735; text-align: left;  line-height: 1.63; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
.list-thumBox_from p.from-tit::before { content: ''; position: absolute; top: 50%; left: 0; width: 4px; height: 4px; margin-top: -2px; background-color: #ababab; border-radius: 50%; }
.list-thumBox_from + .list-thumBox_from { margin-top: 0; }
/* 타일 타입 --- 웅진학습백과 */
.tile_wj .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #ff9e40; }
.tile_wj .list-thumBox_cat-inner .txt { padding-left: 25px; }
.tile_wj .list-thumBox_cat-inner .txt::before { width: 19px; height: 10px; background: url('../images/icon/icon_dic_wjstudy_03@2x.png') 0 0 no-repeat; background-size: cover; }
/* 타일 타입 --- 깜짝뉴스 */
.tile_iss .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #f827ce; }
.tile_iss .list-thumBox_cat-inner .txt { padding-left: 25px; }
.tile_iss .list-thumBox_cat-inner .txt::before { width: 18px; height: 20px; background: url('../images/icon/icon_dic_suprise_03@2x.png') 0 0 no-repeat; background-size: cover; }
/* 타일 타입 --- 초등학습백과 */
.tile_elem .list-thumBox_cat-inner { padding-right: 16px; padding-left: 15px; background-color: #ae79d1; }
.tile_elem .list-thumBox_cat-inner .txt { padding-left: 19px; }
.tile_elem .list-thumBox_cat-inner .txt::before { width: 12px; height: 15px; background: url('../images/icon/icon_dic_elstudy_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_elem .list-thumBox_cont .tumbImgCropBox { height: 150px; }
/* 타일 타입 --- 용어사전 */
.tile_word .list-thumBox_cat-inner { padding-right:18px; padding-left: 14px; background-color: #f47495; }
.tile_word .list-thumBox_cat-inner .txt { padding-left: 22px; }
.tile_word .list-thumBox_cat-inner .txt::before { width: 16px; height: 14px; background: url('../images/icon/icon_dic_term_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_word .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_word .list-thumBox_cont p.cont + .tumbImgCropBox { margin-top: 8px; }
.tile_word .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 국어사전 */
.tile_kor .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #5e96ce; }
.tile_kor .list-thumBox_cat-inner .txt { padding-left: 22px; }
.tile_kor .list-thumBox_cat-inner .txt::before { width: 16px; height: 16px; background: url('../images/icon/icon_dic_korean_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_kor .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_kor .list-thumBox_cont p.cont + .tumbImgCropBox { margin-top: 8px; }
.tile_kor .list-thumBox.onlyTxt p.cont { height: 160px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 우리말샘사전 */
.tile_woorimal .list-thumBox_cat-inner { padding-right:18px; padding-left: 14px; background-color: #5e96ce; }
.tile_woorimal .list-thumBox_cat-inner .txt { padding-left: 22px; }
.tile_woorimal .list-thumBox_cat-inner .txt::before { width: 16px; height: 14px; background: url('../images/icon/icon_dic_sam_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_woorimal .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_woorimal .list-thumBox_cont p.cont + .tumbImgCropBox { margin-top: 8px; }
.tile_woorimal .list-thumBox.onlyTxt p.cont { height: 160px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 영한사전 */
.tile_eng .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #5eceb8; }
.tile_eng .list-thumBox_cat-inner .txt { padding-left: 29px; }
.tile_eng .list-thumBox_cat-inner .txt::before { width: 24px; height: 14px; background: url('../images/icon/icon_dic_ybm_03@2x.png') 0 0 no-repeat; background-size: cover; }
/* 타일 타입 --- 공공 DB-유물정보 */
.tile_relic .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_relic .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_relic .list-thumBox_cat-inner .txt::before { width: 19px; height: 13px; background: url('../images/icon/icon_dic_relic_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_relic .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_relic .list-thumBox_cont .tumbImgCropBox { height: 150px; }
.tile_relic .list-thumBox_cont p.cont + .tumbImgCropBox { margin-top: 8px; }
/* 타일 타입 --- 공공 DB-자연사정보 */
.tile_natural .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_natural .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_natural .list-thumBox_cat-inner .txt::before { width: 20px; height: 15px; background: url('../images/icon/icon_dic_natural_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_natural .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_natural .list-thumBox_cont .tumbImgCropBox { height: 150px; }
.tile_natural .list-thumBox_cont p.cont + .tumbImgCropBox { margin-top: 8px; }
/* 타일 타입 --- 공공 DB-문화재정보 */
.tile_cultural .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_cultural .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_cultural .list-thumBox_cat-inner .txt::before { width: 24px; height: 14px; background: url('../images/icon/icon_dic_cultural_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_cultural .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_cultural .list-thumBox_cont .tumbImgCropBox { height: 150px; }
.tile_cultural .list-thumBox_cont p.cont + .tumbImgCropBox { margin-top: 8px; }
/* 타일 타입 --- 공공 DB-관광사진정보 */
.tile_sight .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_sight .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_sight .list-thumBox_cat-inner .txt::before { width: 17px; height: 13px; background: url('../images/icon/icon_dic_sightseeing_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_sight .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_sight .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
/* 타일 타입 --- 공공 DB-한국민속대백과 */
.tile_folklore .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_folklore .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_folklore .list-thumBox_cat-inner .txt::before { width: 17px; height: 15px; background: url('../images/icon/icon_dic_folklore_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_folklore .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_folklore .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.tile_folklore .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 공공 DB-어린이생물도감 */
.tile_biology .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_biology .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_biology .list-thumBox_cat-inner .txt::before { width: 20px; height: 13px; background: url('../images/icon/icon_dic_biology_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_biology .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_biology .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
/* 타일 타입 --- 공공 DB-왕실유물정보 */
.tile_royal .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_royal .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_royal .list-thumBox_cat-inner .txt::before { width: 15px; height: 16px; background: url('../images/icon/icon_dic_royal_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_royal .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_royal .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
/* 타일 타입 --- 공공 DB-해양생물정보 */
.tile_oceans .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_oceans .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_oceans .list-thumBox_cat-inner .txt::before { width: 15px; height: 16px; background: url('../images/icon/icon_dic_oceans_03@2x.png') 0 0 no-repeat; background-size: cover; }
.tile_oceans .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_oceans .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.tile_oceans .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 공공 DB-3D백과 */
.tile_dic3d .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #32c38c; }
.tile_dic3d .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_dic3d .list-thumBox_cat-inner .txt::before { width: 20px; height: 20px; background: url('../images/icon/icon_dic_3d_03.png') 0 0 no-repeat; background-size: cover; }
.tile_dic3d .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_dic3d .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.tile_dic3d .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 공공 DB-시사상식 */
.tile_eduwill .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #ef585b; }
.tile_eduwill .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_eduwill .list-thumBox_cat-inner .txt::before { width: 20px; height: 20px; background: url('../images/icon/icon_dic_eduwill_04.svg') 0 0 no-repeat; background-size: cover; }
.tile_eduwill .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_eduwill .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.tile_eduwill .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 공공 DB-미술백과 */
.tile_art .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #a38356; }
.tile_art .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_art .list-thumBox_cat-inner .txt::before { width: 20px; height: 20px; background: url('../images/icon/icon_dic_art_03.svg') 0 0 no-repeat; background-size: cover; }
.tile_art .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_art .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.tile_art .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 공공 DB-궁궐종묘정보 */
.tile_jongmyo .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_jongmyo .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_jongmyo .list-thumBox_cat-inner .txt::before { width: 20px; height: 16px; background: transparent url('../images/icon/icon_dic_palace_02.svg') no-repeat 0 0 / cover; }
.tile_jongmyo .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_jongmyo .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.tile_jongmyo .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 수학사전 */
.tile_math .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px;background-color: #41b9eb;}
.tile_math .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_math .list-thumBox_cat-inner .txt::before { width: 20px; height: 20px; background: transparent url('../images/icon/icon_dic_math_02.svg') no-repeat 0 0 / cover; }
.tile_math .list-thumBox p.cont {height: 26px;}
.tile_math .list-thumBox p.cont img {max-width: 100%; max-height: 100%;}
.tile_math .list-thumBox_cont .tumbImgCropBox:first-child {height: 156px;} /* 표제어가 없을 떄 */
.tile_math .list-thumBox_cont p.cont + .tumbImgCropBox {margin-top: 6px;}
.tile_math .list-thumBox_cont .tumbImgCropBox { text-align: center;background: #f8f8f8;} /* 수학 사전일때 배경 깔고 이미지 가운데로 */
.tile_math .list-thumBox_cont .tumbImgCropBox img {position: relative; top: 50%; width: auto; height: 100%; transform: translateY(-50%);} /* 수학 사전일때 이미지의 높이가 100% */
.tile_math .list-thumBox_sec p.sec-tit em {position: relative; margin-left: 8px; padding-left: 8px;}
.tile_math .list-thumBox_sec p.sec-tit em::before {content: ''; position: absolute; top: 5px; left: 0; display: block; width: 1px; height: 16px; background-color: #61605d;}
/* 타일 타입 --- 공룡사전 */
.tile_dino .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_dino .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_dino .list-thumBox_cat-inner .txt::before { width: 20px; height: 20px; background: transparent url('../images/icon/icon_dic_science_02.svg') no-repeat 0 0 / cover; }
.tile_dino .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_dino .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.tile_dino .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 어린이 시사사전 */
.tile_affair .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #f8bd00; }
.tile_affair .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_affair .list-thumBox_cat-inner .txt::before { width: 20px; height: 20px; background: transparent url('../images/icon/icon_dic_affair.svg') no-repeat 0 0 / cover; }
.tile_affair .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.tile_affair .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 테마# */
.tileList ul li.tile_theme .theme-swiper {position: relative; width: 100%; height: 290px; background: transparent; border-radius: 20px; overflow: hidden;}
.tileList ul li.tile_theme .theme-swiper ul {margin: 0;}
.tileList ul li.tile_theme .theme-swiper .swiper-slide {width:100%; height: 100%; padding: 0; border-radius: 0;}
.tileList ul li.tile_theme .theme-swiper button {display: block; width: 100%; height: 100%; background: transparent; border: none;}
.tileList ul li.tile_theme .theme-swiper img {display: block; width: 100%;}
.tileList ul li.tile_theme .theme-swiper .pagination {position: absolute; top: 0; right: 0; bottom: auto; padding-right: 20px; text-align: right; z-index: 10;}
.tileList ul li.tile_theme .theme-swiper .pagination .swiper-pagination-bullet {width: 6px; height: 6px; margin: 0 3px; background: #fff;}
.tileList ul li.tile_theme .theme-swiper .pagination .swiper-pagination-bullet-active {background: #fff;}
/* 타일 타입 --- 식물도감 */
.tile_plant .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_plant .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_plant .list-thumBox_cat-inner .txt::before { width: 20px; height: 20px; background: transparent url('../images/icon/icon_dic_plant_02.svg') no-repeat 0 0 / cover; }
.tile_plant .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_plant .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.tile_plant .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }
/* 타일 타입 --- 역사탐방정보(근현대사) */
.tile_modern .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #a58255; }
.tile_modern .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_modern .list-thumBox_cat-inner .txt::before { width: 20px; height: 20px; background: transparent url('../images/icon/icon_dic_history_03.svg') no-repeat 0 0 / cover; }
.tile_modern .list-thumBox p.cont { height:18px; -webkit-line-clamp: 1; line-height: 1.2; }
.tile_modern .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.tile_modern .list-thumBox.onlyTxt p.cont { height: 152px; -webkit-line-clamp: 6; line-height: 1.63; }

/* 사전별 메인화면 */
.dict-location { display: flex; width: auto; align-items: center; padding-top: 24px; padding-bottom: 16px; font-size: 18px; flex-direction: row; }
.dict-location .btn-go-home { display: block; width: auto; padding: 4px 0 6px 40px; color: #fff; background: transparent url('../images/icon/ico_ctg_home.svg') no-repeat left center / 32px 32px; }
.dict-location_txt { padding-left: 24px; padding-bottom: 2px; background: url('../images/icon/ico_ctg_navi.svg') no-repeat 8px center / 8px 16px; }
.dict-location_txt.dlt-wj { color: #ff9e40; }
.dict-location_txt.dlt-word { color: #f47495; }
.dict-location_txt.dlt-elem { color: #ae79d1; }
.dict-location_txt.dlt-kor { color: #5e96ce; }
.dict-location_txt.dlt-eng { color: #5eceb8; }
.dict-location_txt.dlt-eduwill { color: #ff7378; }
.dict-location_txt.dlt-plant { color: #88c669; }
.btn-toggle-dictsummary { display: block; width: 32px; height: 32px; background: transparent url('../images/icon/ico_info.svg') no-repeat center center / contain; }
.dict-summary-wrap { margin-bottom: 32px; }
.dict-summary { display: flex; width: 100%; background-color: #004150; flex-direction: row; border-radius: 16px; overflow: hidden; }
.dict-summary dt { position: relative; display: flex; width: 168px; justify-content: center; align-items: center; /* font-family: 'LOVELOVE_OTFBold';  */ padding-left: 8px; font-size: 20px; text-align: center; flex-direction: column; flex-shrink: 0; line-height: 1; box-sizing: border-box; }
.dict-summary dt::before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 100%; border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.dict-summary dt .ico { display: block; width: 40px; height: 40px; margin-top: -16px; background-repeat: no-repeat; background-position: center center; background-size: contain; }
.dict-summary.dict-wj dt { color: #ff9e40; }
.dict-summary.dict-wj dt::before { background-color: #ff9e40; }
.dict-summary.dict-wj dt .ico { background-image: url('../images/icon/ico_dic_wj.svg'); }
.dict-summary.dict-word dt { color: #f47495; }
.dict-summary.dict-word dt::before { background-color: #f47495; }
.dict-summary.dict-word dt .ico { background-image: url('../images/icon/ico_dic_term.svg'); }
.dict-summary.dict-elem dt { color: #ae79d1; }
.dict-summary.dict-elem dt::before { background-color: #ae79d1; }
.dict-summary.dict-elem dt .ico { background-image: url('../images/icon/icon_dic_el.svg'); }
.dict-summary.dict-kor dt { color: #5e96ce; }
.dict-summary.dict-kor dt::before { background-color: #5e96ce; }
.dict-summary.dict-kor dt .ico { background-image: url('../images/icon/ico_dic_kor.svg'); }
.dict-summary.dict-eng dt { color: #5eceb8; }
.dict-summary.dict-eng dt::before { background-color: #5eceb8; }
.dict-summary.dict-eng dt .ico { background-image: url('../images/icon/ico_dic_ybm.svg'); }
.dict-summary.dict-eduwill dt { color: #ff7378; }
.dict-summary.dict-eduwill dt::before { background-color: #ff7378; }
.dict-summary.dict-eduwill dt .ico { background-image: url('../images/icon/icon_dic_eduwill.svg'); background-size: 30px; }
.dict-summary.dict-plant dt { color: #88c669; }
.dict-summary.dict-plant dt::before { background-color: #88c669; }
.dict-summary.dict-plant dt .ico { background-image: url('../images/icon/icon_dic_plant_01.svg'); background-size: 30px; }
.dict-summary dd { position: relative; padding: 16px 16px 16px 24px; font-size: 16px; color: #b9dce6; text-align: left; letter-spacing: 0.45px; line-height: 1.33; }
.dict-summary dd::before { content: ''; position: absolute; top: 16px; left: 0; width: 3px; height: calc(100% - 32px); background-color: #00505f; }
.tit-dict-main { margin-top: -6px; margin-bottom: 16px; padding-left: 56px; font-size: 18px; color: #cbedf3; text-align: left; background: url('../images/icon/ico_view_friend.svg') no-repeat left center / 40px 32px; }
.pcView .main-body_dictinfo { width: 1050px; margin-right: 10px; float: right; }

/* details */
#bookDetail {position: fixed; top: 0; left: 100%; width: 2560px; height: 100vh; background-color: #004f5e; overflow-x: hidden; z-index: 10; transition: 300ms left; }
#container.viewLeft #bookDetail { left: calc((100vw - 1280px)/2); z-index: 30; }
#container.viewLeftFirst #bookDetail { left: calc((100vw - 1280px)/2); transition: none; z-index: 30; }
#container.viewRight #bookDetail { left: calc((100vw - 1280px)/2 - 1280px); transition: 300ms left; }
#bookDetail.ing-view { left: calc(50% + 640px - 106px); background-color: transparent; transition: 300ms left; }
#bookDetail.ing-view .btb-bookmarkTag-list { display: none; }
#bookDetail.ing-view .bookCoverL { width: 146px; }
#bookDetail.ing-view .bookmarkTag { margin-right: 24px; }
#bookDetail.ing-view .bookLeft-coverWrap { width: 124px; }
#bookLeft { width: 1280px; float: left; min-height: 100vh; }
#bookRight { width: 1280px; float: left; min-height: 100vh; }
.bookLeft-inner {width: 100%;overflow: hidden;position: relative;}
.bookLeft-coverWrap { position: relative; width: 164px; float: left; }
.bookLeft-tapList { width: 263px; height: auto; background-color: #fff; float: left; min-height: 100vh; }
.bookLeft-contWrap{ width: 757px; height: 100vh; background-color: #ffffff; float: left; overflow-y: hidden; }
.bookLeft-contWrap iframe { width: 100%; height: 100vh; background: url('../images/common/Gradation@2x.png') 0 0 repeat-y; background-size: 163px 100vh; }
.bookCoverL { position: absolute; top: 0; left: 0; width: 164px; height: 100vh; z-index: 20; overflow: hidden; }
.bookCoverL_last { position: absolute; top: 0; right: 40px; width: 30px; height: 100%; background-color: #756aaf; min-height: 100vh; border: 4px solid #564b8b; border-right: 0; border-top-left-radius: 30px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3); }
.bookCoverL_paper { position: absolute; top: 0; right: 15px; width: 45px; height: 100%; background-color: #f0f0f0; min-height: 100vh; border-top-left-radius: 30px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); }
.bookCoverL_paper::after { content: ''; position: absolute; top: 0; right: -5px; width: 45px; height: 100%; background-color: #f5f5f5; min-height: 100vh; border-top-left-radius: 30px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }
.bookCoverL_paper.upP { right: 5px; background-color: #fcfcfc; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }
.bookCoverL_paper.upP::after { background-color: #ffffff; }
.bookmarkTag { position: relative; height: 100vh; margin-right: 30px; padding-top: 173px; padding-right: 15px; text-align: right; z-index: 21; overflow: hidden;}
.bookmarkTag-ing { margin-bottom: 10px; }
.btb-bookmarkTag-ing { display: inline-block; width: 100px; height: 74px; padding-top: 45px; font-size: 16px; color: #fff; text-align: center; font-weight: 500; background: url('../images/common/img_seeing_n@2x.png') 0 0 no-repeat; background-size: cover; line-height: 1.25; }
.btb-bookmarkTag-ing.actived { background: url('../images/common/img_seeing_p@2x.png') 0 0 no-repeat; background-size: cover; }
.btb-bookmarkTag-list-box { display: inline-block; width: 95px; padding-right: 5px; max-height: calc(100vh - 263px); overflow-x: hidden; overflow-y: auto; }
.btb-bookmarkTag-list li { display: block; width: 100%; margin-bottom: 12px; padding-bottom: 2px; background-color: #5c82aa; border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.btb-bookmarkTag-list li:last-child { margin-bottom: 0; }
.btb-bookmarkTag-list li a{ width: 100%; padding: 13px 3px 16px; color: #fff; text-align: center; background-color: #6987a5; border-top-left-radius: 16px; border-bottom-left-radius:18px; }
.btb-bookmarkTag-list li a .tit { display: block; font-size: 13px; letter-spacing: -0.45px; font-weight: 400;line-height: 1;}
.btb-bookmarkTag-list li a em { display: -webkit-box; height: auto; margin-top: 8px; font-size: 20px; font-weight: 400; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all; white-space: normal; overflow: hidden; text-overflow: ellipsis; max-height: 75px; line-height: 1.14; }
.btb-bookmarkTag-list li a em sup { font-size: 12px; vertical-align: super; }
.btb-bookmarkTag-list li.here { width: 100px; background-color: #5c82aa; }
.btb-bookmarkTag-list li.here a { background-color: #72a0cc; }


/* 상세화면에서의 왼쪽 - 타일 리스트 */
.detail-tileList-wrap { padding: 34px 26px 34px 0; font-size: 16px; background-color: #ffffff;  }
.scrollY-box { height: 100vh; overflow-x: hidden; overflow-y: auto; }
.detail-tileList ul { display: block; margin: 0; overflow: visible; }
.detail-tileList ul li { display: block; width: 100%; padding: 0; float: none; overflow: visible; }
.detail-tileList ul li a { position: relative; border: 2px solid #e4e4e4; border-radius: 20px; overflow: visible; outline: none;}
.detail-tileList ul li a.active::after{ content: ''; position: absolute; top: calc(50% - 5px); right: calc((24px + 2px) * -1); width: 0; height: 0; border-top: 12px solid #fff; border-bottom: 10px solid transparent; border-left: 12px solid #e4e4e4; border-right: 10px solid transparent; }
.detail-tileList ul li.tile_wj a.active{ border: 4px solid #ff9e40; }
.detail-tileList ul li.tile_wj a.active::after{ border-left-color: #ff9e40; }
.detail-tileList ul li.tile_iss a.active{ border: 4px solid #f827ce; }
.detail-tileList ul li.tile_iss a.active::after{ border-left-color: #f827ce; }
.detail-tileList ul li.tile_elem a.active{ border: 4px solid #ae79d1; }
.detail-tileList ul li.tile_elem a.active::after{ border-left-color: #ae79d1; }
.detail-tileList ul li.tile_eng a.active{ border: 4px solid #5eceb8; }
.detail-tileList ul li.tile_eng a.active::after{ border-left-color: #5eceb8; }
.detail-tileList ul li.tile_word a.active{ border: 4px solid #f47495; }
.detail-tileList ul li.tile_word a.active::after{ border-left-color: #f47495; }
.detail-tileList ul li.tile_kor a.active,
.detail-tileList ul li.tile_woorimal a.active { border: 4px solid #5e96ce; }
.detail-tileList ul li.tile_kor a.active::after,
.detail-tileList ul li.tile_woorimal a.active::after{ border-left-color: #5e96ce; }
.detail-tileList ul li.tile_relic a.active,
.detail-tileList ul li.tile_natural a.active,
.detail-tileList ul li.tile_cultural a.active,
.detail-tileList ul li.tile_sight a.active,
.detail-tileList ul li.tile_folklore a.active,
.detail-tileList ul li.tile_biology a.active,
.detail-tileList ul li.tile_oceans a.active,
.detail-tileList ul li.tile_royal a.active,
.detail-tileList ul li.tile_jongmyo a.active,
.detail-tileList ul li.tile_dino a.active,
.detail-tileList ul li.tile_plant a.active{ border: 4px solid #88c669;}
.detail-tileList ul li.tile_relic a.active::after,
.detail-tileList ul li.tile_natural a.active::after,
.detail-tileList ul li.tile_cultural a.active::after,
.detail-tileList ul li.tile_sight a.active::after,
.detail-tileList ul li.tile_folklore a.active::after,
.detail-tileList ul li.tile_biology a.active::after,
.detail-tileList ul li.tile_country a.active::after,
.detail-tileList ul li.tile_oceans a.active::after,
.detail-tileList ul li.tile_royal a.active::after,
.detail-tileList ul li.tile_jongmyo a.active::after,
.detail-tileList ul li.tile_dino a.active::after,
.detail-tileList ul li.tile_plant a.active::after { border-left-color: #88c669; }
.detail-tileList ul li.tile_dic3d a.active{ border: 4px solid #32c38c; }
.detail-tileList ul li.tile_dic3d a.active::after{ border-left-color: #32c38c; }
.detail-tileList ul li.tile_eduwill a.active{ border: 4px solid #ef585b; }
.detail-tileList ul li.tile_eduwill a.active::after{ border-left-color: #ef585b; }
.detail-tileList ul li.tile_art a.active{ border: 4px solid #a38356; }
.detail-tileList ul li.tile_art a.active::after{ border-left-color: #a38356; }
.detail-tileList ul li.tile_math a.active{ border: 4px solid #2dc3fa; }
.detail-tileList ul li.tile_math a.active::after{ border-left-color: #2dc3fa; }
.detail-tileList ul li.tile_affair a.active{ border: 4px solid #f8bd00; }
.detail-tileList ul li.tile_affair a.active::after{ border-left-color: #f8bd00; }
.detail-tileList ul li.tile_modern a.active{ border: 4px solid #a58255; }
.detail-tileList ul li.tile_modern a.active::after{ border-left-color: #a58255; }
.detail-tileList .list-thumBox_cat { margin-top: -2px; }

/* details Left - 우측 버튼 모음 */
.bookLeft-btnWrap { position: relative; width: 96px; height: 100vh; background-color: #ffffff; float: right; }
.btn-toggleFavorite { position: absolute; top: 0; left: -74px; width: 50px; height: 60px; background: url('../images/common/dic_img_favorite_n@2x.png') 0 0 no-repeat transparent; background-size: cover; text-indent: -9999px; }
.btn-toggleFavorite.on { background: url('../images/common/dic_img_favorite_s@2x.png') 0 0 no-repeat transparent; background-size: cover; }
.bookLeft-btnWrap ul { display: block; padding-top: 34px;}
.bookLeft-btnWrap ul li { position: relative; display: block; margin-bottom: 12px; }
.bookLeft-btnWrap ul li button { display: block; width: 78px; height: 56px; margin: 0 auto; font-size: 24px; color: #ffffff; font-weight: 700; background-color: #7fa7af; border-radius: 28px; box-sizing: border-box;}
.bookLeft-btnWrap ul li button.btn-history { background: url('../images/icon/dic_btn_resent_dic.svg') center center no-repeat #7fa7af; background-size: 33px; }
.bookLeft-btnWrap ul li button.btn-history.actived { background-color: #1c6572; }
.bookLeft-btnWrap ul li button.btn-favorite { background: url('../images/icon/dic_btn_favorite_dic.svg') center center no-repeat #7fa7af; background-size: 33px; }
.bookLeft-btnWrap ul li button.btn-favorite.actived { background-color: #1c6572; }
.bookLeft-btnWrap ul li button.btn-sendmailOpen { background: url('../images/icon/dic_btn_mail.svg') center center no-repeat #7fa7af; background-size: 34px; }
.bookLeft-btnWrap ul li button.btn-sendmailOpen.actived, .bookLeft-btnWrap ul li button.btn-sendmailOpen.on { background-color: #1c6572; }
.bookLeft-btnWrap ul li button.btn-fontsize { background-color: #766bb0; line-height: 1.13; }
.bookLeft-btnWrap ul li button.btn-fontsize.actived, .bookLeft-btnWrap ul li button.btn-fontsize.on { background-color: #493e85; }
.bookLeft-btnWrap ul li button.btn-infoDict { background: url('../images/icon/dic_btn_info@2x.png') center center no-repeat #766bb0; background-size: 40px 33px; text-indent: -9999px; }
.bookLeft-btnWrap ul li button.btn-infoDict.actived, .bookLeft-btnWrap ul li button.btn-infoDict.on { background-color: #493e85; }
.bookLeft-btnWrap ul li button.btn-openPrintPage { background: url('../images/icon/icon_print@2x.png') center center no-repeat #766bb0; background-size: 31px 31px; text-indent: -9999px; }
.bookLeft-btnWrap ul li button.btn-openPrintPage.actived, .bookLeft-btnWrap ul li button.btn-openPrintPage.on { background-color: #493e85; }
.bookLeft-btnWrap ul li button.btn-category { background: url('../images/icon/dic_btn_subject_woo_01@2x.png') center center no-repeat #ff9e40; background-size: 78px 56px; }
.bookLeft-btnWrap ul li button.btn-category.actived { background-color: #cc732e; }
.bookLeft-btnWrap ul li button.btn-subject { background: url('../images/icon/dic_btn_process_woo_01@2x.png') center center no-repeat #ff9e40; background-size: 78px 56px; }
.bookLeft-btnWrap ul li button.btn-subject.actived { background-color: #cc732e; }
.bookLeft-btnWrap ul li button.btn-audioSub { height: 102px; margin-top: 20px; background: url('../images/icon/dic_btn_audio_woo_05@2x.png') center center no-repeat transparent; background-size: 56px 102px; border-radius: 0; }
.bookLeft-btnWrap ul li button.btn-country { background: url('../images/icon/dic_btn_continent_woo_01@2x.png') center center no-repeat #ff9e40; background-size: 78px 56px; }
.bookLeft-btnWrap ul li button.btn-country.actived { background-color: #cc732e; }
.bookLeft-btnWrap ul li button.btn-artSub { height: 72px; margin-top: 20px; background: url('../images/icon/dic_btn_art_woo_01@2x.png') center center no-repeat transparent; background-size: 78px 72px; border-radius: 0; }

/* 미니팝업 */
.popBox-mini { position: absolute; top: -50%; left: 0; display: none; z-index: 20;}
.popBox-mini.active { display: block; }
.popBox-mini_inner { position: absolute; top: -50%; right: 24px; background-color: #ffffff; border: #e4e4e4 solid 6px; border-radius: 55px; }
.popBox-mini_inner::after { content: ''; position: absolute; top: calc(50% - 12px); right: -36px; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 20px solid #e4e4e4; border-right: 12px solid transparent; }
.popBox-mini_infoBox { position: fixed; top: 20px; left: calc(50% + 640px - 662px - 96px - 17px); width: 662px; } /* 640 = 1280/2 , 662=width , 96=bookLeft-btnWrap width , 17 = paddingSpace */
.infoImgList { position: relative; }
.infoImgBox { display: none; }
.infoImgBox.active { display: block; }
.bookLeft-btnWrap ul li .btn-closePopMini { position: absolute; top: 11px; left: -60px;  width: 130px; height: 70px; background: url('../images/common/common_btn_close_w@2x.png') 0 0 no-repeat #5d50a2; background-size: 64px 64px; text-indent: -9999px; }
.bookLeft-btnWrap ul li .fontpop .btn-closePopMini { top: 0; left: -520px; background: url('../images/common/common_btn_close_w@2x.png') 0 0 no-repeat #766bb0; background-size: 64px 64px; }
.bookLeft-btnWrap ul li .mailpop .btn-closePopMini { top: 0; left: -560px; background: url('../images/common/common_btn_close_w@2x.png') 0 0 no-repeat #7fa7af; background-size: 64px 64px; }

/* 미니팝업 - 메일보내기 */
.mailpop.popBox-mini { top: -110px; }
.mailpop .popBox-mini_inner { width: 480px; padding: 34px 34px 32px; }
.mailPop_header { padding: 0 0 30px 117px; background: url('../images/icon/img_mailbox@2x.png') 10px 0 no-repeat; background-size: 79px 102px; }
.mailPop_header .tit { margin-bottom: 10px; font-size: 36px; color: #7fa7af; font-weight: 700; line-height: 1.28; }
.mailPop_header .txt { font-size: 20px; color: #646463;  line-height: 1.5;  }
.mailInput { width: 100%; height: 56px; padding: 5px 25px; border: 3px solid #c5c5c5; border-radius: 28px; }
.mailInput .inputBox { height: 100%; padding-right: 40px; font-size: 20px; line-height: 1.13;  }
.mailInput .inputBox .btn-delTxt { top: 2px; }
.mailInput .inputBox input[type="text"] { text-align: center;  }
.bookLeft-btnWrap ul li button.btn-sendmail { width: 100%; height: 56px; margin: 14px 0; font-size: 25px; text-align: center; font-weight: 700; background-color: #7fa7af; border-radius: 28px; line-height: 1.12; }
.bookLeft-btnWrap ul li button.btn-sendmail span { display: inline-block; padding-left: 47px; background: url('../images/icon/icon_send_mail@2x.png') 0 5px no-repeat; background-size: 40px 18px; }
.mailpop ul { padding-top: 0; padding-right: 0; }
.mailpop .bulInfo { display: inline-block; margin: 0 -10px; font-size: 14px; color: #646463;  line-height: 1.63;}
.mailpop .popBox-mini_inner { border-color: #7fa7af; }
.mailpop .popBox-mini_inner::after { top: calc(50% - 90px); border-left-color: #7fa7af; }

/* 미니팝업 - 폰트사이즈 변경 */
.fontpop .popBox-mini_inner { width: 440px; padding: 25px 22px; border-color: #766bb0; }
.fontpop .popBox-mini_inner::after { border-left-color: #766bb0; }
.btnFontList::after { content: ''; display: block; clear: both; }
.btnFontList li { float: left; }
.bookLeft-btnWrap ul li .btnFontList{ padding: 0; }
.bookLeft-btnWrap ul li .btnFontList li { margin-bottom: 0; padding-right: 18px;}
.bookLeft-btnWrap ul li .btnFontList li:last-child { padding-right: 0; }
.bookLeft-btnWrap ul li .btnFontList li button { position: relative; width: 115px; height: 60px; font-size: 22px; color: #ababab; background-color: transparent; border: 6px solid #e4e4e4; border-radius: 30px;  }
.bookLeft-btnWrap ul li .btnFontList li button::after { content: ''; position: absolute; top: 16px; right: -22px; width: 14px; height: 8px; background-color: #e4e4e4; border-radius: 4px; }
.bookLeft-btnWrap ul li .btnFontList li button.txtSmaller { font-size: 18px; }
.bookLeft-btnWrap ul li .btnFontList li button.txtBigger { font-size: 26px; }
.bookLeft-btnWrap ul li .btnFontList li button.txtBigger::after { display: none; }
.bookLeft-btnWrap ul li .btnFontList li button.active { color: #383735; border-color: #766bb0; }
.bookLeft-btnWrap ul li .btnFontList li button.active::before { content: ''; position: absolute; top: -20px; left: calc(50% - 18px); width: 36px; height: 28px; background: url('../images/icon/icon_check_02@2x.png'); background-size: cover; }

/* 위로 가기 버튼 */
.btn-top { position: fixed; left: calc(50% + 546px); bottom: 24px; display: none; width: 72px; z-index: 333; }
.btn-top.subActive { left: calc(50% + 460px); } /* 468px */
.pcView .btn-top.subActive { left: calc(50% + 475px); }
.btn-top.active { display: block; }
.btn-top a { width: 72px; height: 72px; text-align: center; background: rgba(80, 80, 80, 0.88) url('../images/icon/top_btn@2x.png') center/72px no-repeat; border-radius: 50%; text-indent: -9999px; opacity: 0; box-shadow: 0 0 4px 0 rgba(30, 40, 50, 0.08); transition: 200ms opacity; }
.btn-top a.actived { background-color: #1c6572; }
.btn-top.active a { opacity: 1; transition: 200ms opacity; }

/* 레이어팝업 */
.dimBox { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); overflow: auto; z-index: 900; }
.dimBox.active { display: block; }
.layerBox { position: absolute; top: 50%; left: 50%; width: 1200px; height: auto; padding: 0 10px 20px; background-color: #ffffff; -webkit-transform: translate( -50%, -50%); -ms-transform: translate( -50%, -50%); transform: translate( -50%, -50%); overflow-y: auto; border-radius: 20px; overflow: hidden; }
.layerBox .layerBox-inner { padding-bottom: 115px; }
.layer-head { margin-top: 13px; padding: 11px 74px 19px; }
.layer-head ul li { display: none; }
.layer-head ul li::after { content: ''; display: block; clear: both; }
.layer-head ul li.active { display: block; }
.layer-head h1.tit { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; font-size: 22px; color: #464543; font-weight: 700; -webkit-box-pack: center; -ms-flex-pack: center; max-width: 99.5%; }
.layer-head h1.tit em { padding-right: 12px; font-size: 26px; color: #383735; font-weight: 700; flex-grow: 1; /*white-space: nowrap;*/ }
.layer-head h1.tit span { position: relative; padding-left: 15px; font-size: 22px; color: #464543; flex-grow: 2; -ms-align-self: stretch; align-self: stretch;  max-width: 910px; }/*jkjk*/
.layer-head h1.tit span::before { content: ''; position: absolute; top: 7px; left: 0; width: 3px; height: 18px; background-color: #e4e4e4; }
.layer-body { padding: 0 10px; }
.dimBox .btn-closeLayer { position: absolute; top: 13px; left: 10px; width: 64px; height: 64px; background: url('../images/common/common_btn_close_b@2x.png') 0 0 no-repeat transparent; background-size: cover; text-indent: -9999px; }
.layer-detail { position: absolute; top: 0; right: 0; z-index: 901; }
.layer-detail li { display: none; }
.layer-detail li.active { display: block; }
.layer-detail-pos{ position: absolute; top: 0; right: 0; }
.layer-detail-body { width: 800px; margin-top: -100%;  padding: 20px; background-color: #7fa7af; border-bottom-left-radius: 20px; transition: 250ms margin-top; }
.layer-detail-pos.active .layer-detail-body { margin-top: 0; transition: 250ms margin-top; }
.layer-detail-inner { padding: 30px 25px 35px 35px; background-color: #fff; max-height: 600px; overflow-y: auto; border-radius: 10px; }
.layer-detail-prime { display: block; font-size: 22px; color: #464543; }
.layer-detail-prime dt { position: relative; display: block; font-weight: 700; line-height: 1.82; }
.layer-detail-prime dt::before { content: ''; position: absolute; top: 15px; left: -16px; width: 6px; height: 6px; background-color: #646463; border-radius: 50%; }
.layer-detail-prime dd { position: relative; display: block;  line-height: 1.82; }
.layer-detail-prime dd::before { content: ''; position: absolute; top: 15px; left: -16px; width: 6px; height: 6px; background-color: #646463; border-radius: 50%; }
.layer-detail-from { display: table; width: 100%; margin-top: 60px; margin-bottom: -10px; font-size: 22px; color: #464543; table-layout: fixed;  line-height: 1.82; }
.layer-detail-from dl { display: table-row; }
.layer-detail-from dt { position: relative; display: table-cell; width: 115px; padding-bottom: 10px; vertical-align: top; }
.layer-detail-from dt::before { content: ''; position: absolute; top: 15px; left: -16px; width: 6px; height: 6px; background-color: #646463; border-radius: 50%; }
.layer-detail-from dd { position: relative; display: table-cell; width: auto; padding: 0 15px 10px; vertical-align: top; overflow: hidden; }
.layer-detail-from dd::before { content: ''; position: absolute; top: 10px; left: 0; width: 3px; height: 90%; background-color: rgba(171, 171, 171, 0.3); }
.layer-detail-from dd::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3px; height: 20px; background-color: #fff; }
.layer-detail-from.long dt { width: 140px; }
.layer-detail-from.type2 {margin-top: 0;}
.layer-detailBtn { position: absolute; right: 20px; bottom: -65px; font-weight: 700; }
.layer-detailBtn button { width: 110px; padding: 38px 22px 12px; color: #ffffff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.btn-layer-detailOpen { background: url('../images/icon/icon_arrow_down_02@2x.png') 48px 18px no-repeat #7fa7af; background-size: 13px 8px; }
.btn-layer-detailClose { background: url('../images/icon/icon_arrow_up_02@2x.png') 48px 18px no-repeat #7fa7af; background-size: 13px 8px; }
.layer-detail .btn-layer-detailOpen { display: block; }
.layer-detail .btn-layer-detailClose { display: none; }
.layer-detail-pos.active .btn-layer-detailOpen { display: none; }
.layer-detail-pos.active .btn-layer-detailClose { display: block; }
.layer-btm { position: absolute; left: 0; bottom: 0; width: 100%; height: 115px; padding: 20px 40px; background-color: #ebebeb; z-index: 3; }
.layer-btm.opened { height: auto; }
.layer-btm li { display: none; }
.layer-btm li.on { display: table; width: 100%; table-layout: fixed; }
.layer-btm p {  height: auto; font-size: 22px;  line-height: 1.82; }
.layer-btm p.long { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; white-space: normal; overflow: hidden; text-overflow: ellipsis; max-height: 75px; }
.layer-btm .d-tbc-btnBox { display: table-cell; width: 115px; text-align: right; vertical-align: bottom; }
.layer-btm .btn-layerbtm-open { width: 110px; height: 40px; padding-left: 8px; font-size: 18px; color: #fff; /* font-family: 'LOVELOVE_OTFBold';  */ text-align: center; background: url('../images/icon/icon_arrow_up_02@2x.png') 17px 16px no-repeat #a5a5a5; background-size: 13px 8px; line-height: 40px; border-radius: 20px; }
.layer-btm .btn-layerbtm-close { position: absolute; top: -50px; right: 35px; display: none; width: 64px; height: 51px; font-size: 0; background: url('../images/icon/common_btn_close_b@2x.png') center center no-repeat #ebebeb; background-size: 22px 22px; border-top-left-radius: 20px; border-top-right-radius: 20px; }
.layer-btm .btn-layerbtm-close.active { display: block; }
.layer-btm span.rmrk {font-size: 15px; color:#646463; display: block;}

/* 레이어팝업 안의 풀 슬라이드 */
.fullSlide { position: relative; width: auto; height: 500px; max-width: 100%;}
.fullSlide .swiper-container { width: 100%; height: 100%; }
.fullSlide .swiper-slide { position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; font-size: 18px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; }
.fullSlide .slideFullImg { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: auto; }
.fullSlide .slideFullImg.onlyImg { height: 100%; }
.fullSlide .slideFullImgCenter { position: relative; display: flex; width: auto; height: auto; justify-content: flex-start; align-items: center; text-align: center; max-height: 100%; flex-direction: column;/* overflow: auto;*/ }
.fullSlide .slideFullImgCenter img { width: auto; height: auto; /*max-height: 100%;*/ max-width: 100%; max-height: 500px; vertical-align: middle; border-radius: 10px; transform-origin: top left; }
.fullSlide .excellence { position: relative; }
.fullSlide .excellence::after { content: ''; position: absolute; top: 0; left: 0; width: 160px; height: 160px; background: transparent url('../images/common/ico_madedict.svg') no-repeat center center / cover; }
.fullSlide .audioVisual { position: relative; width: 100%; height: 268px; background: url('../images/common/img_sound_2@2x.png') center center no-repeat; background-size: 844px 268px; }
.fullSlide .videoVisual { position: absolute; top: 50%; left: 50%; width: 0; height: 0; background-image: none; z-index: 911; }
.fullSlide .audioVisual .btn-audio { position: absolute; top: calc(50% - 58px); left: calc(50% - 58px); width: 116px; height: 116px; background: url('../images/common/btn_play_2@2x.png') 0 0 no-repeat; background-size: cover; text-indent: -9999px; }
.fullSlide .audioVisual .btn-audio.active { background: url('../images/common/btn_pause@2x.png') 0 0 no-repeat; background-size: cover; }
.fullSlide .videoVisual .btn-audio.active { display: none; }
.fullSlide .slideFullImgCenter video { width: auto; height: auto; /*max-height: 610px; : 22-01-18 개발요청으로 수정 */ max-width: 890px; max-height:490px; vertical-align: middle; }
.fullSlide audio { width: 844px; }
.fullSlide .sourcefrom { position: absolute; left: 0; bottom: 5px; padding: 10px 15px; font-size: 20px; color: #383735; text-align: center; font-weight: 700; background-color: #ffffff; border-top-right-radius: 15px; border-bottom-right-radius: 15px; line-height: 1.87; }
.fullSlide .sourcefrom img { transform: translate3d(0px, 0px, 0px) scale(1) !important; }
.fullSlide .swiper-paginationBox { position: absolute; left: 0; bottom: 16px; width: 100%; text-align: right; }
.fullSlide .swiper-pagination { position: relative; left: auto; bottom: auto; display: inline-block; width: auto; margin-right: 10px; padding: 0 8px; font-size: 15px; color: #ffffff; text-align: center; font-weight: 700; background-color: rgba(56,55,53,0.3); border-radius: 15px; line-height: 1.87; }
.fullSlide .swiper-button-prev { left: 0; width: 80px; height: 100px; margin-top: calc(-1 * var(--swiper-navigation-size)/ 2 - 20px); color: transparent; background: url('../images/common/btn_arrow_left02@2x.png') 0 0 no-repeat; background-size: cover; }
.fullSlide .swiper-button-next { right: 0; width: 80px; height: 100px; margin-top: calc(-1 * var(--swiper-navigation-size)/ 2 - 20px); color: transparent; background: url('../images/common/btn_arrow_right02@2x.png') 0 0 no-repeat; background-size: cover; }
.layerBox.noDetailTxt .layerBox-inner { padding-bottom: 0; }
.layerBox.noDetailTxt .fullSlide { height: 615px; }
.layerBox.noDetailTxt .layer-btm { display: none; }


/* 임시 메인 공지사항 리스트 */
.main-notice-wrap { position:relative; width: 1050px; margin-top:16px; margin-right: 10px; padding: 12px;float: right; clear: left;}
.main-notice-wrap .toggle-arrow { position: absolute; top: 20px; right: 22px; width: 0; height: 0; border:none; transition: .2s ease all; border-top: 15px solid #333; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid transparent;}
.main-notice-wrap .toggle-arrow.active {transform: rotate(180deg);}
.main-notice-wrap ul{ padding:15px 42px; background:#fff; border-radius: 12px; }
.main-notice-wrap li{ position: relative; display: none;}
.main-notice-wrap li:first-child { display: block;}
.main-notice-wrap .active li { display: block;}
.main-notice-wrap li + li{ border-top:1px solid #f0f3f6;}
.main-notice-wrap li:before { content: '';  position: absolute; top: 50%; left: -16px; display: block; width: 4px; height: 4px; background: #f3797b; border-radius: 50%;  transform: translateY(-50%);}
.main-notice-wrap li:first-child:before { left: -26px;  width: 16px; height: 16px; background: red; border-radius: 0;}
.main-notice-wrap button {display: block; width: 100%; color: #333; text-align:center; background: transparent; cursor: pointer; border: none; }

/* 임시 메인 테마샵 리스트 */
.main-theme-wrap { position:relative; width: 350px; margin-top:16px; margin-right: 10px; padding: 12px;float: right; clear: left;}

/* 레이어팝업 공지사항/테마 타입 */
.dimBox2 { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100vh; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); overflow: auto; z-index: 900;  }
.dimBox2.active {display: flex;}
.dimBox2 .btn-closeLayer { position: absolute; top: 13px; left: 10px; width: 64px; height: 64px; background: url('../images/common/common_btn_close_b@2x.png') 0 0 no-repeat transparent; background-size: cover; text-indent: -9999px; }
.dimBox2 .dimBox2-title,
.dimBox2 .dimBox2-body {position: relative;}
.dimBox2 .dimBox2-title {height: auto;  margin-top: 0; padding: 0; z-index: 2;}
.dimBox2 .dimBox2-title .dimTitle {position: absolute; top: -20px; left: 50%; width: 200px; height: 56px; font-size: 26px; color: #fff; text-align: center; /*font-family:'LOVELOVE_OTFMedium';*/ letter-spacing: 0.65px; font-weight: 700; background: url(../images/common/bg_dialog_title.svg) no-repeat center center; transform: translateX(-50%); line-height: 54px;}
.dimBox2 .dimBox2-body { height: 628px;padding: 0;  z-index: 1;}
.dimBox2 .dimBox2-inner {width: 720px; padding: 0; background: #fff; border: 6px solid #7fa7af; overflow: visible;  border-radius: 30px;}
.dimBox2 .swiper-slide {display: block; padding: 60px 72px 35px;}
.dimBox2 .swiper-slide .title { display: -webkit-box;  width: 100%; margin-bottom: 14px; padding: 0 20px; font-size: 30px; color: #383735; text-align: center; font-weight: 700; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 80px; line-height: 1.33;  word-break: break-all; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;}
.dimBox2 .swiper-slide .contentsBox {width: 100%; height: 416px; padding:24px; text-align: left; border-top: 2px solid #e4e4e4; overflow: auto;}
.dimBox2 .swiper-slide .contentsBox::-webkit-scrollbar{width:20px;}
.dimBox2 .swiper-slide .contentsBox::-webkit-scrollbar-thumb{background-color:#009093;background-clip:padding-box;border:6px solid transparent;border-radius:10px;}
.dimBox2 .swiper-slide .contentsBox::-webkit-scrollbar-track{background-color:#fff;}
.dimBox2 .swiper-slide .contentsBox.mCustomScrollbar {padding:0;}
.dimBox2 .swiper-slide .contentsBox .mCSB_container { padding:24px;}
.dimBox2 .swiper-slide .contentsBox .mCSB_inside > .mCSB_container {margin-right: 0;}
.dimBox2 .swiper-slide .contentsBox .mCSB_scrollTools {margin: 5px 0; opacity: 0; transition: .3s ease opacity;}
.dimBox2 .swiper-slide .contentsBox .mCustomScrollBox:hover .mCSB_scrollTools {opacity: 1;}
.dimBox2 .swiper-slide .contentsBox .mCS-light.mCSB_scrollTools .mCSB_draggerRail { width: 2px;opacity: 1; }
.dimBox2 .swiper-slide .contentsBox .mCS-light.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #7fa7af;border: none;}
.dimBox2 .swiper-slide .hashTags {width: 100%; padding-top: 14px; border-top: 2px solid #e4e4e4;}
.dimBox2 .swiper-slide .hashTags ul {display: flex; justify-content: flex-start; align-items: flex-start;}
.dimBox2 .swiper-slide .hashTags li {flex-shrink: 0;}
.dimBox2 .swiper-slide .hashTags li + li {margin-left: 8px;}
.dimBox2 .swiper-slide .hashTags a{display: block; padding: 12px 16px; font-size: 16px; color: #fa5028; text-align: left; line-height: 1; border: 1px solid #fa5028; border-radius: 22px; white-space: nowrap; transition: .3s ease all;}
.dimBox2 .swiper-slide .hashTags a:hover{color: #fff; background: #fa5028;}
.dimBox2 .swiper-slide .hashTags a:before {content: '\0023';}
.dimBox2 .swiper-button-next,
.dimBox2 .swiper-button-prev {position: absolute;top: 304px; width:48px;height: 48px;margin-top: -16px;background-size: 24px;border-radius: 50%;}
.dimBox2 .swiper-button-prev {left: 18px; background: #a2a2a2 url(../images/common/dialog_arrow_l.svg) no-repeat center center;}
.dimBox2 .swiper-button-next {right: 18px; background: #a2a2a2 url(../images/common/dialog_arrow_r.svg) no-repeat center center;}
.dimBox2 .swiper-button-next:after,
.dimBox2 .swiper-button-prev:after {display: none;}
.dimBox2 .buttonWrap {display: flex; width: 100%; justify-content: center; align-items: center; padding-top: 14px; flex-shrink: 0; border-top: 2px solid #e4e4e4;}
.dimBox2 .buttonWrap .button {color: #fff; text-align: center; border:none;}
.dimBox2 .buttonWrap .button.type01 { width: 160px; height: 44px; font-size: 16px; font-weight: 500; background: #7fa7af; border-radius: 22px; line-height: 44px; transition: .3s ease all;}
.dimBox2 .buttonWrap .button.type01:hover { background: #009093;}
.dimBox2 .swiper-slide.titleRow2 .contentsBox {width: 100%; height: 376px; text-align: left;}

/* 레이어팝업 에디터 내용 */
.dimBox2 .swiper-slide .contentsBox img { margin: 0;max-width: 100%; border-radius: 8px;}
.dimBox2 .swiper-slide .contentsBox table{max-width: 100%;}
.dimBox2 .swiper-slide .contentsBox table td {width: auto !important;}


/* 서브화면 */
.bookRight-inner { width: 100%; overflow: hidden; }
.bookRight-contWrap { width: 1170px; height: 100vh; padding-right: 78px; padding-left: 45px; background-color: #ffffff; float: left; overflow: hidden; }
.bookRight-contWrap iframe { width: 100%; height: 100vh; }
.bookRight-coverWrap { position: relative; width: 90px; height: 100vh; float: left; overflow: hidden; }
.bookCoverR { position: absolute; top: 0; left: 0; width: 100px; height: 100vh; overflow: hidden; }
.bookCoverR_last { position: absolute; top: 0; left: 16px; width: 30px; height: 100%; background-color: #756aaf; min-height: 100vh; border: 4px solid #564b8b; border-left: 0; border-top-right-radius: 30px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3); }
.bookCoverR_paper { position: absolute; top: 0; left: -9px; width: 45px; height: 100%; background-color: #f0f0f0; min-height: 100vh; border-top-right-radius: 30px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); }
.bookCoverR_paper::after { content: ''; position: absolute; top: 0; left: -5px; width: 45px; height: 100%; background-color: #f5f5f5; min-height: 100vh; border-top-right-radius: 30px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }
.bookCoverR_paper.upP { left: -19px; background-color: #fcfcfc; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }
.bookCoverR_paper.upP::after { background-color: #ffffff; }
.bookRight-btnWrap { position: relative; width: 68px; margin-top: 32px; margin-left: 22px; max-height: 100%; overflow: auto; padding-bottom: 40px;}
.bookRight-btnWrap a { position: relative; width: 61px; height: 100px; margin-left: 5px; margin-bottom: 6px; padding-top: 63px; font-size: 15px; color: #fff; text-align: center; background-color: #7b7b7b; z-index: 1; border-top-right-radius: 10px; border-bottom-right-radius: 10px; line-height: 16px; vertical-align: top;}
.bookRight-btnWrap a.active { width: 66px; margin-left: 0; }
.bookRight-btnWrap a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 96px; background-color: #b7b7b7; background-repeat: no-repeat; background-position: center center; background-size: 56px 80px; z-index: -1; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.bookRight-btnWrap a.btn-sub_history {text-indent: -9999px;}
.bookRight-btnWrap a.btn-sub_history::after { background-image: url('../images/icon/dic_btn_resent_dic.svg'); background-size : 33px; }
.bookRight-btnWrap a.btn-sub_history.active::after { background-color: #7fa7af; }
.bookRight-btnWrap a.btn-sub_favorite {text-indent: -9999px;}
.bookRight-btnWrap a.btn-sub_favorite::after { background-image: url('../images/icon/dic_btn_favorite_dic.svg'); background-size: 33px; }
.bookRight-btnWrap a.btn-sub_favorite.active::after { background-color: #7fa7af; }
.bookRight-btnWrap a.btn-sub_category::after { background-image: url('../images/icon/icon_dic_category.svg'); background-position: center 17px; background-size: 40px; }
.bookRight-btnWrap a.btn-sub_category.active { background-color: #a44e14; }
.bookRight-btnWrap a.btn-sub_category.active::after { background-color: #ff9e40; }
.bookRight-btnWrap a.btn-sub_subject::after { background-image: url('../images/icon/icon_dic_subject.svg'); background-position: center 17px; background-size: 40px; }
.bookRight-btnWrap a.btn-sub_subject.active { background-color: #a44e14; }
.bookRight-btnWrap a.btn-sub_subject.active::after { background-color: #ff9e40; }
.bookRight-btnWrap a.btn-sub_country::after { background-image: url('../images/icon/icon_dic_continent.svg'); background-position: center 17px; background-size: 40px; }
.bookRight-btnWrap a.btn-sub_country.active { background-color: #a44e14; }
.bookRight-btnWrap a.btn-sub_country.active::after { background-color: #ff9e40; }
.bookRight-btnWrap a.btn-sub_audio {padding-top: 55px; font-size: 9pt;}
.bookRight-btnWrap a.btn-sub_audio::after { background-image: url('../images/icon/icon_dic_audio.svg'); background-position: center 10px; background-size: 40px; }
.bookRight-btnWrap a.btn-sub_audio.active { background-color: #2d4185; }
.bookRight-btnWrap a.btn-sub_audio.active::after { background-color: #4c6cd5; }
.bookRight-btnWrap a.btn-sub_art::after { background-image: url('../images/icon/icon_dic_art_02.svg'); background-position: center 17px; background-size: 40px; }
.bookRight-btnWrap a.btn-sub_art.active { background-color: #a44e14; }
.bookRight-btnWrap a.btn-sub_art.active::after { background-color: #ff9e40; }
.bookRight-btnWrap a.btn-sub_jongmyo::after { background-image: url('../images/icon/icon_dic_palace_02.svg'); background-position: center 17px; background-size: 40px; }
.bookRight-btnWrap a.btn-sub_jongmyo.active { background-color: #a44e14; }
.bookRight-btnWrap a.btn-sub_jongmyo.active::after { background-color: #ff9e40; }
.bookRight-btnWrap a.btn-sub_dino {padding-top: 55px; font-size: 14px;}
.bookRight-btnWrap a.btn-sub_dino::after { background-image: url('../images/icon/icon_dic_science_02.svg'); background-position: center 10px; background-size: 40px; }
.bookRight-btnWrap a.btn-sub_dino.active { background-color: #a44e14; }
.bookRight-btnWrap a.btn-sub_dino.active::after { background-color: #ff9e40; }


.bookRight-btnWrap a.btn-sub_modern {padding-top: 55px; font-size: 14px;}
.bookRight-btnWrap a.btn-sub_modern::after { background-image: url('../images/icon/icon_dic_history_03.svg'); background-position: center 10px; background-size: 40px; }
.bookRight-btnWrap a.btn-sub_modern.active { background-color: #98662c; }
.bookRight-btnWrap a.btn-sub_modern.active::after { background-color: #c88c48; }


/* 에러화면 */
.error_wrap { width: 1050px; height: 100vh; margin: auto; font-weight: 700; }
.error_wrap.type-a { background: url('../images/common/img_searchking_error_1@2x.png') center bottom no-repeat; background-size: 500px 305px; }
.error_wrap.type-b { background: url('../images/common/img_searchking_error_2@2x.png') center bottom no-repeat; background-size: 500px 300px; }
.error_wrap.type-c { background: url('../images/common/img_searchking_error_3@2x.png') center bottom no-repeat; background-size: 505px 312px; }
.error-txt { padding-top: 180px; font-size: 36px; color: #7fa7af; text-align: center; line-height: 1.28; }
.type-c .error-txt { padding-top: 165px; }
.error-btnBox { margin-top: 67px; text-align: center; }
.type-c .error-btnBox { margin-top: 56px; }
.error-btnBox .btn-error { display: inline-block; width: 210px; padding: 18px 0; font-size: 30px; color: #fff; text-align: center; background-color: #7fa7af; border-radius: 35px; line-height: 34px; }
.error-btnBox .btn-error + .btn-error { margin-left: 15px; }
.error-btnBox .btn-error.long { width: 250px; }


/* 뷰어팝업 */
.dimBox-popviewer { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); overflow: auto; z-index: 900; }
.dimBox-popviewer.active { display: block; }
.pv-wrap { position: absolute; top: 50%; left: 50%; width: 850px; height: 450px; margin-top: 10px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.btn-pv-close { position: absolute; top: 0; left: -60px; display: block; width: 120px; height: 70px; font-size: 0; background: url('../images/common/common_btn_close_w@2x.png') 0 0 no-repeat #5d50a2; background-size: 64px 64px; border-radius: 35px; }
.pv-contBox { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; }
.pv-bookcoverL_wrap { position: absolute; top: 0; left: 0; width: 55px; height: 100%; z-index: 20; overflow: hidden; }
.pv-bookCoverL_last { position: absolute; top: 0; left: 0; width: 55px; height: 100%; background-color: #756aaf; border: 4px solid #564b8b; border-right: 0; border-top-left-radius: 30px; border-bottom-left-radius: 30px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3); }
.pv-bookCoverL_paper { position: absolute; top: 0; left: 10px; width: 45px; height: calc(100% - 4px); background-color: #f0f0f0; border-top-left-radius: 30px; border-bottom-left-radius: 30px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); }
.pv-bookCoverL_paper::after { content: ''; position: absolute; top: 0; left: 5px; width: 45px; height: 100%; background-color: #f5f5f5; border-top-left-radius: 30px; border-bottom-left-radius: 30px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }
.pv-bookCoverL_paper.upP { left: 15px; width: 35px; background-color: #fcfcfc; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }
.pv-bookCoverL_paper.upP::after { background-color: #ffffff; }
.pv-bookcoverR_wrap { position: absolute; top: 0; right: 0; width: 55px; height: 100%; overflow: hidden; }
.pv-bookCoverR_last { position: absolute; top: 0; right: 0; width: 55px; height: 100%; background-color: #756aaf; border: 4px solid #564b8b; border-left: 0; border-top-right-radius: 30px; border-bottom-right-radius: 30px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3); }
.pv-bookCoverR_paper { position: absolute; top: 0; right: 10px; width: 45px; height: calc(100% - 4px); background-color: #f0f0f0; border-top-right-radius: 30px; border-bottom-right-radius: 30px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); }
.pv-bookCoverR_paper::after { content: ''; position: absolute; top: 0; right: 5px; width: 40px; height: 100%; background-color: #f5f5f5; border-top-right-radius: 30px; border-bottom-right-radius: 30px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }
.pv-bookCoverR_paper.upP { left: -10px; background-color: #fcfcfc; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }
.pv-bookCoverR_paper.upP::after { background-color: #ffffff; }
.pv-cont { position: relative; width: 742px; height: 450px; margin-left: 54px; padding: 32px 6px 4px; background-color: #fff; overflow: hidden; }
.pv-cont::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background-color: #564b8b; }
.pv-cont::after { content: ''; position: absolute; left: 0; bottom: 2px; width: 100%; height: 2px; background-color: #3a335d; }
.pv-head { color: #383735; }
.pv-head::after { content: ''; display: block; clear: both; }
.pv-head h1 { font-size: 40px; font-weight: 700; float: left; line-height: 1.11; }
.pv-head h2 { margin-top: 10px; margin-left: 20px; font-size: 26px; float: left;  line-height: 1.11; }
.pv-head h2 em { position: relative; display: inline-block; }
.pv-head h2 em::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background-color: #383735; }
.pv-body { padding-top: 30px; }
.pv-cont .tileList ul { margin: 0 -10px; }
.pv-cont .tileList ul li { width: 250px; padding: 0 10px; }
.pv-cont .tileList ul li .blank-item { display: block; height: 100%; background: url('../images/common/img_no_08@2x.png') bottom center no-repeat #f1f1f1; background-size: 150px 230px; border-radius: 20px; }
.pv-cont .tileList ul li:last-child .blank-item { background: url('../images/common/img_no_09@2x.png') bottom center no-repeat #f1f1f1; background-size: 150px 230px; }
.pv-cont .tileList ul li a { border: 2px solid #e4e4e4; }
.pv-wrap .btn-go-more { position: absolute; top: 25px; right: -5px; display: inline-block; width: 163px; height: 59px; background: url('../images/common/bg_eyes_01@2x.png') 0 0 no-repeat; background-size: cover; }
.pv-wrap .btn-go-more::before { content: ''; position: absolute; top: 17px; left: 19px; width: 45px; height: 28px; background: url('../images/common/img_eyes_01@2x.png') 0 0 no-repeat; background-size: cover; }
.pv-wrap .btn-go-more::after { content: ''; position: absolute; top: 26px; right: 18px; width: 11px; height: 15px; background: url('../images/common/btn_arrow_right_3@2x.png') 0 0 no-repeat; background-size: cover; }
.pv-wrap .btn-go-more.actived { background: url('../images/common/bg_eyes_02@2x.png') 0 0 no-repeat; background-size: cover; }
.pv-wrap .btn-go-more.actived::before { background: url('../images/common/img_eyes_02@2x.png') 0 0 no-repeat; background-size: cover;}
.pv-wrap .btn-go-more span { display: block; padding: 21px 40px 0 70px; font-size: 20px; color: #fff; text-align: center; line-height: 1.11; }

/* 연표 */
.timeline-tot-wrap { position: absolute; top: calc(-100vh - 7px); left: 50%; width: 1280px; /*height: 800px;*/ margin-top: 0; margin-left: -640px; padding: 0 30px; z-index: 30; transition: all .2s ease-in-out; }
.timeline-tot-wrap::-webkit-scrollbar{width:20px;}
.timeline-tot-wrap::-webkit-scrollbar-thumb{background-color:#38818f;background-clip:padding-box;border:6px solid transparent;border-radius:10px;}
.timeline-tot-wrap::-webkit-scrollbar-track{background-color:transparent;}
.timeline-tot-wrap.is-upped { margin-top: -160px; }
.timeline-tot-wrap.is-active {top: 0;}
.timeline-tot-wrap.is-upped + .fixNoneBoxL + .wrap .hamburger-box { margin-top: -160px; }
.timeline-inner { height: calc(100vh - 127px); padding: 0 0 7px; overflow-y: auto; }
.timeline-tot-tit { padding: 0 45px 0 36px; }
.timeline-tot-tit h1 { padding: 14px 68px; font-size: 30px; color: #fff; text-align: center; font-weight: 700; background-color: #004f5e; background-image: url('../images/common/img_dot_01@2x.png'), url('../images/common/img_dot_02@2x.png'); background-repeat: no-repeat, no-repeat; background-position: left 29px, right 29px; background-size: 442px 10px, 442px 10px; line-height: 1.3;}
.timeline-wrap { position: relative; background-color: #fff; border-radius: 15px; border: 7px solid #e4e4e4; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }
ul.timeline { position: relative;  }
ul.timeline > li { position: relative; padding-left: 138px; }
.timeline-year { position: absolute; top: 0; left: 0; width: 138px; padding: 15px 20px 12px 0; text-align: right; }
.timeline-year::before { content: ''; position: absolute; top: 26px; right: 0; width: 12px; height: 2px; background-color: #646463; }
.timeline-year::after { content: ''; position: absolute; top: 21px; right: 5px; width: 10px; height: 10px; background-color: #646463; border-radius: 50%; }
.timeline-item-wrap { position: relative; display: table; table-layout: fixed; border-left: 2px solid #646463; border-right: 2px solid #646463; }
.timeline-item-wrap::after { content: ''; position: absolute; top: 26px; right: 0; width: 5px; height: 2px; background-color: #646463; border-radius: 1px; }
.timeline-item { position: relative; display: table-cell; width: 208px; padding-top: 12px; padding-bottom: 12px; border-left: 1px solid #e4e4e4; vertical-align: top;}
.timeline-item::before { content: ''; position: absolute; top: 26px; left: -5px; width: 20px; height: 2px; border-radius: 1px; }
.btn-timeline-detail-wrap {min-height: 30px;}
.btn-timeline-detail { position: relative; display: block; margin-left: 5px; padding: 1px 14px 2px; font-size: 18px; color: #646463; text-align: left; background-color: transparent; line-height: 1.5; }
.btn-timeline-detail::before { content: ''; position: absolute; top: 10px; left: 0; width: 10px; height: 10px; background-color: #fff; border-radius: 50%;  box-sizing: border-box; }
.btn-timeline-detail.active { color: #fff; border-radius: 15px; }
.science-history { background: url('../images/common/dot_01@2x.png') 0 26px repeat-x; background-size: 6px 2px; }
.science-history::before { background-color: #5e96ce; }
.science-history .btn-timeline-detail.active { background-color: #5e96ce; }
.science-history .btn-timeline-detail::before { border: 3px solid #5e96ce; }
.thought-history { background: url('../images/common/dot_02@2x.png') 0 26px repeat-x; background-size: 6px 2px; }
.thought-history::before { background-color: #ff9e40; }
.thought-history .btn-timeline-detail.active { background-color: #ff9e40; }
.thought-history .btn-timeline-detail::before { border: 3px solid #ff9e40; }
.world-history { background: url('../images/common/dot_03@2x.png') 0 26px repeat-x; background-size: 6px 2px; }
.world-history::before { background-color: #eebf00; }
.world-history .btn-timeline-detail.active { background-color: #eebf00; }
.world-history .btn-timeline-detail::before { border: 3px solid #eebf00; }
.art-history { background: url('../images/common/dot_04@2x.png') 0 26px repeat-x; background-size: 6px 2px; }
.art-history::before { background-color: #88c669; }
.art-history .btn-timeline-detail.active { background-color: #88c669; }
.art-history .btn-timeline-detail::before { border: 3px solid #88c669; }
.korean-history { background: url('../images/common/dot_05@2x.png') 0 26px repeat-x; background-size: 6px 2px; }
.korean-history::before { background-color: #e9103c; }
.korean-history .btn-timeline-detail.active { background-color: #e9103c; }
.korean-history .btn-timeline-detail::before { border: 3px solid #e9103c; }
.timeline-detailBox { display: none; width: 1044px;  border-left: 2px solid #646463; border-right: 2px solid #646463; }
.timeline-detailBox.active { display: block; }
ul.timeline.head { margin-top: 30px; }
ul.timeline.head .timeline-item-wrap::after,
ul.timeline.head .timeline-year::before,
ul.timeline.head .timeline-year::after,
ul.timeline.head .timeline-item::before { display: none; }
ul.timeline.head .timeline-item { padding-top: 14px; padding-bottom: 16px; background: none; }
ul.timeline.head::after { content: ''; position: absolute; left: 138px; bottom: 0; width: calc(100% - 163px); height: 1px; background-color: #646463; }
.btn-jumpyear { position: absolute; top: -65px; left: 24px;  width: 110px; height: 91px; font-size: 0; background: url('../images/common/btn_time_01_n.png'); background-size: cover; z-index: 7; }
.btn-jumpyear.active { width: 130px; height: 86px; background: url('../images/common/btn_time_02_n.png'); background-size: cover; }
.jumpyear-wrap { position: absolute; top: 20px; left: 24px; display: none; width: 130px; padding-top: 16px; background-color: #646463; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; z-index: 7; }
.jumpyear-wrap.active { display: block; }
.jumpyear-wrap li { display: block; width: 100%; margin-bottom: 20px; text-align: center; }
.jumpyear-wrap li button { display: inline-block; width: 100px; height: 40px; color: #fff; background-color: #565656; line-height: 40px; font: 20px normal 'LOVELOVE_OTFMedium'; border-radius: 5px; }
.toggle-wrap { position: absolute; left: 0; bottom: 16px; width: 100%; }
.toggle-wrap input[type="checkbox"] { display: none; }
.toggle-wrap label { position: relative; display: block; width: 100%; font-size: 20px; color: #ababab; text-align: center; line-height: 1.5; cursor: pointer;}
.toggle-wrap input + label::before { content: ''; position: absolute; top: 5px; left: 10px; width: 38px; height: 18px; background: url('../images/icon/icon_off_01.png') 0 0 no-repeat; background-size: cover; }
.toggle-wrap input:checked + .toggle-sh { color: #5e96ce; }
.toggle-wrap input:checked + .toggle-sh::before { background: url('../images/icon/icon_on_01.png') 0 0 no-repeat; background-size: cover;; }
.toggle-wrap input:checked + .toggle-th { color: #ff9e40; }
.toggle-wrap input:checked + .toggle-th::before { background: url('../images/icon/icon_on_02.png') 0 0 no-repeat; background-size: cover;; }
.toggle-wrap input:checked + .toggle-wh { color: #eebf00; }
.toggle-wrap input:checked + .toggle-wh::before { background: url('../images/icon/icon_on_03.png') 0 0 no-repeat; background-size: cover;; }
.toggle-wrap input:checked + .toggle-ah { color: #88c669; }
.toggle-wrap input:checked + .toggle-ah::before { background: url('../images/icon/icon_on_04.png') 0 0 no-repeat; background-size: cover;; }
.toggle-wrap input:checked + .toggle-kh { color: #e9103c; }
.toggle-wrap input:checked + .toggle-kh::before { background: url('../images/icon/icon_on_05.png') 0 0 no-repeat; background-size: cover;; }
.btn-view-timeline { position: absolute; left: 65px; bottom: -91px; width: 71px; height: 90px; font-size: 0; background: url('../images/icon/btn_chronology_n.png') 0 0 no-repeat; background-size: cover; }
.btn-view-timeline.actived { background: url('../images/icon/btn_chronology_p.png') 0 0 no-repeat; background-size: cover; }
.timeline-detailBox-inner { position: relative; padding: 24px 25px; background-color: #fff; }
.timeline-detailBox.science-history .timeline-detailBox-inner { border-top: 2px solid #5e96ce; border-bottom: 2px solid #5e96ce; }
.timeline-detailBox.thought-history .timeline-detailBox-inner { border-top: 2px solid #ff9e40; border-bottom: 2px solid #ff9e40; }
.timeline-detailBox.world-history .timeline-detailBox-inner { border-top: 2px solid #eebf00; border-bottom: 2px solid #eebf00; }
.timeline-detailBox.art-history .timeline-detailBox-inner { border-top: 2px solid #88c669; border-bottom: 2px solid #88c669; }
.timeline-detailBox.korean-history .timeline-detailBox-inner { border-top: 2px solid #e9103c; border-bottom: 2px solid #e9103c; }
.btn-close-td { position: absolute; top: 4px; right: 0; width: 30px; height: 30px; font-size: 0; background: url('../images/common/btn_close_03.png') 0 0 no-repeat; background-size: cover; }

/* 210413, 연혁 숨기기 추가 */
.timeline-item.is-passive ,
.timeline.science-history_off .science-history ,
.timeline.thought-history_off .thought-history ,
.timeline.world-history_off .world-history ,
.timeline.art-history_off .art-history ,
.timeline.korean-history_off .korean-history {background-color: #ebebeb;}
.timeline-item.is-passive:before,
.timeline.science-history_off .science-history::before ,
.timeline.thought-history_off .thought-history::before ,
.timeline.world-history_off .world-history::before ,
.timeline.art-history_off .art-history::before ,
.timeline.korean-history_off .korean-history::before {background-color: transparent;}
.timeline-item.is-passive .btn-timeline-detail,
.timeline.science-history_off .science-history .btn-timeline-detail ,
.timeline.thought-history_off .thought-history .btn-timeline-detail ,
.timeline.world-history_off .world-history .btn-timeline-detail ,
.timeline.art-history_off .art-history .btn-timeline-detail ,
.timeline.korean-history_off .korean-history .btn-timeline-detail {display: none;}

/* *** pc로 접속했을때!!  *** */
/*.pcView .main-head .head-tit .btn-audiotop { left: auto; right: 0; }*/
.pcView .tileList.mainlist { text-align: left; }
.pcView .main-body_blank { width: 1050px; float: right; }
/* .pcView .main-initBox::before { position: absolute; top: -32px; left: 0; left: -14px; width: 100%; height: 2px; background-color: #729ea6; content: ''; }*/
.pcView .btn-back.btn-closeOut { display: none; }
.pcView .timeline-tot-wrap .btn-back.btn-closeOut { display: block; }
.mCSB_inside > .mCSB_container { margin-right: 0; padding-right: 14px; }
.mCSB_scrollTools { z-index: 25; transition: 800ms opacity; }
.viewLeft .mCSB_scrollTools, .viewLeftFirst .mCSB_scrollTools { opacity: 0; z-index: 0; transition:none; }
.main-body .mCS-light.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; }
.main-body .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #38818f; }
.main-body .mCS-light.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { border: 1px solid transparent; box-sizing: border-box; }
.pcView .bookRight-contWrap { padding-right: 50px; padding-left: 0; } /* padding-right: 18px; */
/* 210412, 연혁 버튼 */
/* 220110 : 공통으로 변경 */
/* tablist : 타일의 좌측으로 이동 및 스타일 변경 */
.pcView #main { text-align: center; }
.pcView .main-head { text-align: center; }
.pcView .main-inner::after { content: ''; display: block; clear: both; }
.pcView .main-body {display: inline-block;width: 1300px;margin-right: 0;margin-left: -223px;}
.pcView .main-body .main-inner { width: 100%; }
.pcView .main-body_head { width: 1050px; margin-right: 10px; float: right; clear: right; }
/*.pcView .main-body_head::before { display: none; }*/
.pcView .main-body_head.js-dictCntList { width: auto; margin-right: 0; margin-left: 115px; float: left; }
.pcView .main-body_head.js-dictCntList::before { display: none; }
/* 210614, 연관검색서 PC일 경우 하단 라인 추가 */
/* .pcView .main-body_head.js-recentSearch { float: right; width: 1050px; clear: left; position: relative} */
.pcView .main-body_head.js-recentSearch { width: 1050px; margin-right: 10px; float: right; clear: left; }
.pcView .main-body_cont { width: 1050px; margin-right: 10px; float: right; }
.pcView .main-body_head .d-tbl { display: block; width: 85px; }
.pcView .main-body_head .d-tbc { display: block; width: 100%; padding: 0; }
.pcView .main-body_head .tablist-tot a, .pcView .main-body_head .tablist ul a { display: inline-block; width: 100%; padding: 15px 5px 16px; font-size: 18px; text-align: center; min-width: 100%; border-radius: 10px; }
.pcView .main-body_head .tablist ul li:last-child a { border-bottom-right-radius: 0; }
.pcView .main-body_head .tablist-tot a { position: relative; padding: 20px 5px; border-top-left-radius: 25px; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pcView .main-body_head .tablist-tot a span.cnt { margin-top: 10px; }
.pcView .main-body_head .scrollX-box { width: 100%; white-space: normal; }
.pcView .main-body_head .scrollX-box ul li { position: relative; display: block; margin-right: 0; background-color: #0a424d; }
.pcView .main-body_head .tablist-tot a::after, .pcView .main-body_head .scrollX-box ul li::after { content: ''; position: absolute; left: 13px; bottom: 0; width: calc(100% - 25px); height: 1px; background-color: #004f5e; }
.pcView .main-body_head .scrollX-box ul li:last-child { border-bottom-left-radius: 25px; overflow: hidden; }
.pcView .main-body_head .scrollX-box ul li:last-child::after, .pcView .main-body_head .scrollX-box ul li.on::after, .pcView .main-body_head .tablist-tot a.on::after { display: none; }
.pcView .main-body_head .tablist-tot a span.txt, .pcView .main-body_head .tablist ul a span.txt {display: block;font-size: 16px;line-height: 1.25;}
.pcView .main-body_head.longActive::after { display: none; }
.pcView .tablist ul a span.txt::before {margin: 0 auto 4px;}
.pcView .tablist ul a span.txt { padding-top: 0; padding-left: 0; }
.pcView .book-wj a span.txt::before { margin: 0 auto; background-size: 34px 19px;}

.pcView .tablist-tot a span.cnt::after, .pcView .tablist ul a span.cnt::after { bottom: -1px; height: 1px; }
.pcView .pc-block { display: block; }

/* 북마크 리스트 스크롤처리 */
.pcView .btb-bookmarkTag-list-box { position: relative; width: 100%; margin-right: -19px; padding-right: 0; }
.pcView .btb-bookmarkTag-list-box::-webkit-scrollbar{width:20px;}
.pcView .btb-bookmarkTag-list-box::-webkit-scrollbar-thumb{background-color:#ebe9e5;background-clip:padding-box;border:6px solid transparent;border-radius:10px;}
.pcView .btb-bookmarkTag-list-box::-webkit-scrollbar-track{background-color:transparent;}
.pcView .btb-bookmarkTag-list li { width: 95px; }
.pcView .btb-bookmarkTag-list li.here { width: 100px; }
.pcView .btb-bookmarkTag-list .mCustomScrollBox { width: calc(100% + 20px); margin-right: -20px; max-width: none; }

/* 상세 타일 */
.pcView #bookLeft .bookLeft-tapList { height: 100vh; background-color: #fff; }
.pcView #bookLeft .detail-tileList-wrap { height: 100%; }
.pcView #bookLeft .detail-tileList-wrap::-webkit-scrollbar{width:20px;}
.pcView #bookLeft .detail-tileList-wrap::-webkit-scrollbar-thumb{background-color:#ebe9e5;background-clip:padding-box;border:6px solid transparent;border-radius:10px;}
.pcView #bookLeft .detail-tileList-wrap::-webkit-scrollbar-track{background-color:transparent;}
.pcView #bookLeft .mCSB_scrollTools, .pcView #bookLeft .mCSB_scrollTools { opacity: 1; transition:none; }
.pcView #bookLeft .mCS-light.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; }
.pcView #bookLeft .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #ebe9e5; }
.pcView #bookLeft .mCS-light.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; }
.pcView .tablist-tot a span.cnt, .pcView .tablist ul a span.cnt { display: inline-block; margin-left: 0; font-size: 16px; font-weight: 700; }

/* 인증 */
.hamburger-box { position: absolute; top: 0; right: 35px;display: none; z-index: 13; transition: all .2s ease-in-out;}
.hamburger-box .btn-hamburger {display: block;width: 64px; height: 64px; background: url(../images/icon/common_btn_more_w@2x.png) center center no-repeat; background-size: 100%;  text-indent: -9999px;}
.log-box {display: flex;align-items: center; font-size: 16px; color: #abc5cb;}
.log-box > span {margin: 8px 8px 0 0;}
.btn-logout {width: 64px; height: 64px; background: url(../images/icon/common_btn_out_g.png) center center no-repeat; background-size: 100%;}
.contents-hamburger { position: absolute; top: 60px; right: 36px;display: none; z-index: 13;}
.contents-hamburger .icon:first-child {display: block; height: 43px; background: url(../images/icon/icon_buyCertified_g.png) 50% no-repeat; background-size: 40px 43px;}
.contents-hamburger span {display: block; margin-top: 2px;}
.contents-hamburger .btn-area .btn {position: relative; width: 100px; height: 100px; font-size: 16px; color: #383735; font-weight: 700; background: #fff; border: 6px solid #7fa7af; border-radius: 15px;}
.contents-hamburger .btn-area .btn::after {content: ''; position: absolute; top: -22px; right: 15px; display: block; width: 20px; height: 16px; margin-left: -10px; background: url(../images/common/img_tag_main_layer@2x.png); background-size: 100%;}

/* 공지사항 */
.btn-notice {position: relative; width: 64px; height: 64px; background: url(../images/icon/ico_notice.svg) center center no-repeat; background-size: 100%;}
.btn-notice .count {position: absolute;left: 8px;bottom: 30px;display: inline-flex;width: auto;height: 18px;justify-content: center;align-items: center;padding: 0 5px;font-size: 10px;color: #fff;font-weight: 700;background: #ef585b;min-width: 18px;border-radius: 9px;}
.pcView .btn-notice .count {line-height: 18px;}

/* layer popup */
.wrap-layer-popup{ position:fixed;_position:absolute;top:0;left:0;display:none;width:100%;height:100%;z-index:1000; overflow:auto;}
.wrap-layer-popup .dimmed{ position:absolute;top:0;left:0;width:100%;height:100%; background:#000;opacity:.5;filter:alpha(opacity=50);}
.wrap-layer-popup .loop{position:absolute;width:0;height:0;overflow:hidden;clip:rect(1px 1px 1px 1px);}
.pop-layer{ position:absolute;top:50%;left:50%;display:none;width:600px;height:auto;background-color:#f9f3e6; border-radius:20px;z-index:10;}
.pop-layer .head{ position:relative;padding:0 50px;background-color:#fff; border-radius:20px 20px 0 0;border-bottom:solid 1px #ddd;}
.pop-layer .head h1{font-size:20px;color:#757575;text-align:center;font-weight:800;line-height:72px;}
.pop-layer .head .btn-close{ position:absolute;top:23px;left:24px;display:inline-block;width:24px;height:24px; background:url('../../resources/images/common/btn_close.png') no-repeat 0 0;background-size:24px; text-indent:-9999px;}
.pop-layer .contents{padding:20px; text-align:center;}
.pop-layer .contents .cont{padding:30px 20px; font-size:20px;font-weight:800;min-height:80px;line-height:1.5;word-break:keep-all;}
.pop-layer .contents .btn-wrap{margin-top:20px;}
.pop-layer .contents .btn-wrap button{width:204px;height:48px;margin:0 3px; font-size:20px;color:#f15c43;font-weight:800;background-color:#fff;line-height:48px; border-radius:24px;border:solid 1px #f6f6f6;}
.pop-layer .contents .btn-wrap .btn-orange{color:#fff;background-color:#f15c43;border:solid 1px #f15c43;}
.pop-layer .contents.change-pw{padding:42px 52px 20px;}
.pop-layer .contents.change-pw .tit{font-size:20px;font-weight:700;}
.pop-layer .contents.change-pw .tit >em{color:#f15c43;}
.pop-layer .contents.change-pw .tit p +span{ display:inline-block;margin-top:4px; font-size:14px;color:#f15c43;font-weight:800;}
.pop-layer .contents.change-pw .tit +.inp{margin-top:40px;}
.pop-layer .contents.change-pw .inp{margin-top:20px;}
.pop-layer .contents.change-pw .inp label{display:inline-block;width:200px;margin-right:16px; font-size:20px; text-align:right;font-weight:700;vertical-align:middle;}
.pop-layer .contents.change-pw .inp label span{ display:block;margin-top:4px; font-size:14px;color:#f15c43;font-weight:800;}
.pop-layer .contents.change-pw .inp input{width:280px;height:66px; font-size:20px;border-radius:10px;}
.pop-layer .contents.change-pw .btn-wrap{margin-top:50px;}
.pop-layer.roundup{width:465px;}

.pop-hamburger {position: relative; width: 600px; background-color: #ffffff; border-radius: 30px; border: solid 6px #7fa7af;}
.pop-hamburger .pop-content {position: relative; padding: 40px 50px; background: #fff; border-radius: 30px; z-index: 999;}
.pop-hamburger .txt-pop-title {font-size: 32px; color: #383735;}
.pop-hamburger .txt-pop-title span {color: #ff9e40;}
.pop-hamburger .alert-content {padding: 20px 0 10px 120px; font-size: 16px; letter-spacing: -.25px; background: url(../images/common/img_pop_cha.png) 0 no-repeat; background-size: 112px 80px;}
.pop-hamburger .form-group {padding: 30px 0; border-top: 2px solid #e4e4e4; border-bottom: 2px solid #e4e4e4;}
.pop-hamburger .inputBox {width: 100%; text-align: center;}
.pop-hamburger .inputBox::after {content: ''; display: block; clear: both;}
.pop-hamburger .inputBox + .inputBox {margin-top: 15px;}
.pop-hamburger .inputBox dt {float: left;}
.pop-hamburger .inputBox dt label {font-size: 18px; color: #383735; font-weight: 700; line-height: 46px;}
.pop-hamburger .inputBox label::before {content: "\00b7"; display: inline-block; margin-right: 4px;}
.pop-hamburger .inputBox dd { width: 80%;float: right;}
.pop-hamburger .inputBox input {height: 50px; padding: 5px 50px 5px 25px; border: 3px solid #c5c5c5; border-radius: 28px;}
.pop-hamburger .inputBox .btn-delTxt {top: 7px; right: 7px; background-color: transparent;}
.pop-hamburger .inputBox p {display: list-item; margin-top: 5px; margin-left: 22px; font-size: 14px; color: #ff0042; text-align: left; clear: both;}
.pop-hamburger .inputBox p::before {content: '-'; display: inline-block; margin-left: -12px; padding-right: 6px;}
.pop-hamburger .btn-close {position: absolute; top: -6px; right: -64px; width: 120px; height: 70px; text-align: right; background: url(../images/common/bg_pop_close_6.png) 50% no-repeat;}
.pop-hamburger .btn-close span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;overflow: hidden; border: 0 !important; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); white-space: nowrap;}
.pop-hamburger .btn-wrap {margin-top: 20px;}
.pop-hamburger .btn-wrap .btn {width: 100%; height: 50px; font-size: 25px; color: #fff; text-align: center; background-color: #7fa7af; border-radius: 30px;}
.pop-hamburger .btn-wrap .btn.btn-close {position: inherit;}
.pop-hamburger .list-style-hyphen {margin-top: 20px;}
.pop-hamburger .list-style-hyphen li {font-size: 12px; color: #383735; font-weight: normal;}
.pop-hamburger .list-style-hyphen li::before {content: '-'; display: inline-block; margin-right: 4px;}
.pop-hamburger .complete-box {padding: 60px 0 100px; font-size: 26px; color: #646463; text-align: center; background: url(../images/common/img_pop_cha.png) center bottom no-repeat; border-bottom: 2px solid #e4e4e4;}

/* 210309, 자동완성 리스트 */
.main-head {transition: all .2s ease;}
.main-head.is-active {top: -160px; background: #004f5e;}
.main-head.is-active .main-inner{padding-bottom: 12px;}
.main-body {transition: all .2s ease;}
.main-body.is-active {height: calc(100vh - 100px) !important; margin-top: 100px !important;}
.d-tbl {position: relative;}
.d-tbc {width: 100%;}
.search-list-box {position: absolute;top: 246px;left: 38px;width: calc(100% - 186px);height: 0;background-color: #fff;overflow: hidden;max-height: 300px;overflow: auto;z-index: 99999;}
.search-list-box::-webkit-scrollbar{width:18px;}
.search-list-box::-webkit-scrollbar-thumb{background-color:#009093;background-clip:padding-box;border:6px solid transparent;border-radius:12px;}
.search-list-box::-webkit-scrollbar-track{background-color:#fff;}
.search-list-box.is-active { height: auto; }
.pcView .search-list-box {width: calc(100% - 76px); max-height: 600px; }
.search-list-box ul {padding: 0 24px;}
.search-list-box ul > li {padding:  0; text-align: left; border-top: 2px solid #ececec;}
.search-list-box ul > li a {display: block;margin: 4px 0;padding: 8px 12px 12px;font-size: 20px; color:#383735;border-radius: 8px;}
.search-list-box ul > li a:hover {background:#f26c00; transition:.25s ease all;}
.search-list-box ul > li a:hover em { color:#fff;}
.search-list-box ul > li em {color: #f26c00; font-family: 'NanumBarunGothic-YetHangul'; }
.search-list-box.is-active {height: auto;}

/* 210513, 연관검색어 */
/* 210614, 연관검색어 수정 S */
.nkeyword-box { position: relative; width: 100%; margin-left: 0;clear: both; }
.nkeyword-box::after {content: none;}
.suggest-box + .nkeyword-box {padding-top: 18px;}
.nkeyword-box dl {width: 100%; font-size: 0;}
.nkeyword-box dl dt, .nkeyword-box dl dd { position: relative;display: inline-block; vertical-align: middle;}
.nkeyword-box dl dt {width: 110px; font-size: 20px; color: #fff; font-family: /* 'LOVELOVE_OTFBold', */ 'Spoqa Han Sans Neo', 'ybmExt';}
.nkeyword-box dl dd {width: calc(100% - 110px);}
.nkeyword-box .swiper-btn {padding: 10px 27px; font-size: 18px; color: #fff; background-color: #0a424d; border-radius: 22px; line-height: 1; font-family: 'NanumBarunGothic-YetHangul'; }
.nkeyword-box .swiper-btn.is-active {background-color: #7fa7af;}
.swiper-container.nkeyword-swiper {width: calc(100% - 40px);}
.swiper-container.nkeyword-swiper .swiper-slide {width: auto;}
.nkeyword-box .swiper-button-prev {top: 50%; left: -25px; width: 36px; height: 20px; margin-top: 0; transform: translateY(-50%); z-index: 1; }
.nkeyword-box .swiper-button-next {top: 50%; right: -25px; width: 36px; height: 20px; margin-top: 0; transform: translateY(-50%); z-index: 1; }
.nkeyword-box .swiper-button-prev::after,
.nkeyword-box .swiper-button-next::after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 36px; height: 20px; background-image: url('../images/icon/icon_arrow_01@2x.png'), url('../images/icon/icon_arrow_01@2x.png');  background-repeat: no-repeat, no-repeat; background-position: 36px 50%, 36px  50%; background-size: 12px 20px, 12px 20px; z-index: 999; animation: arrowBlink 2000ms infinite; -ms-animation: arrowBlink 2000ms infinite; z-index: 1;/* transform: translateY(12px); */}
.nkeyword-box .swiper-button-next::after {transform: rotate(180deg); /* translateY(12px); */}
/* 210614, 연관검색어 수정 E */
.nkeyword-box .swiper-button-prev.swiper-button-disabled,
.nkeyword-box .swiper-button-next.swiper-button-disabled {display: none;}

/* 제안검색어 */
.suggest-box { font-size: 0; text-align: left;clear: both;}
.suggest-box .suggest-help {display: inline-block; font-size: 16px; color: #7fa7af; vertical-align: middle;}
.suggest-box .suggest-help::before {content: ''; display: inline-block; width: 22px; height: 23px; margin-right: 5px; background-image: url(../images/icon/icon_exc_mark_01.png); background-position: center; background-size: contain; vertical-align: middle;}
.suggest-box .recommend {display: inline-block; margin-left: 16px; color: #7fa7af; vertical-align: middle;}
.suggest-box .recommend::before {content: ''; display: inline-block; width: 1px; height: 16px; background-color: #fff;}
.suggest-box .recommend-keyword {margin-left: 14px; font-size: 20px; color: #fff; font-weight: 700;}
.suggest-box .recommend-span {font-size: 20px;}
.suggest-box .dsc_area {display: inline-block; margin-left: 14px; vertical-align: middle;}
.suggest-box .dsc_area .keyword {font-size: 20px; color: #fff;}

/* 20210408 연혁 추가*/
.pop-layer.pop-coach-mark { top:0 !important; left: 0 !important;width: 100%; background-color: transparent;}
.pop-layer.pop-coach-mark .coach-mark {position: relative; text-align: center;}
.pop-layer.pop-coach-mark .coach-mark img {width: auto; height: 100%; max-height: 800px;}
.pop-layer.pop-coach-mark .btn-close::after{content: ''; position: absolute; left: 50%; bottom: 0; display:inline-block; width: 99px; height: 64px; margin-left: -210px; background-image: url(../images/common/BTN_CLOSE_04@2X.PNG); background-size: contain;}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.timeline-detailBox-inner {font-size: 0;}
.timeline-detailBox-inner .thumb { position: relative;display: inline-block; width: 100%; max-width: 240px; vertical-align: top;}
.timeline-detailBox-inner .thumb img {width: 100%;}
.timeline-detailBox-inner .desc {display: inline-block; width: calc(100% - 255px);}
.timeline-detailBox-inner .desc::after {content:''; display: inline-block; clear:both; }
.timeline-detailBox-inner .thumb + .desc {margin-left: 15px; font-size: 18px;  color: #383735; word-break: keep-all; line-height: 1.67;}
.tag-box {display: inline-block; margin-top: 10px;}
.tag-box .btn { padding: 4px;font-size: 16px; color: #7fa7af; background-color: transparent;}
.tag-box .btn + .btn {margin-left: 4px;}
.timeline-detailBox-inner .thumb .btn {position: absolute; right: 6px; bottom: 6px; width: 44px; height: 30px; background-color: #7fa7af; background-image: url(../images/icon/ICON_PLUS_01@2X.PNG); background-repeat: no-repeat; background-position: center; background-size: 16px; border-radius: 15px; z-index: 2;}

/* 210427, 폰트 변경 */
/* .btb-bookmarkTag-list li a em,
.cont_wj .ifCont_txt strong,
.searchBox .inputBox input[type="text"],
.searchBox .inputBox input[type="search"],
.recentSearch ul li a,
.main-body_blank .recommendList li a,
.ifCont_head,
.ifCont_head h1.doc-tit,
.ifCont_head h1.doc-tit em,
.ifCont_tabWrap .tablist ul li.on a,
.ifCont_sec.hashtagBox li,
.ifCont_txt,
.ifCont_sec,
.ifWrap .ifCont_txt.ifCont_txt-min strong,
.layer-head h1.tit em,
.layer-btm p,
.list-thumBox_cont,
.list-thumBox_cont p.cont,
.list-thumBox_from p.from-tit,
.noDataBox .recommendList li a,
.ifCont_txt .level3,
.ifCont_txt .level4,
.ifCont_txt .level5,
.tblTypeList th,
.ifCont_txt strong { font-family: 'NanumBarunGothic-YetHangul'; } */
.ifCont_txt .level3,
.ifCont_txt .level4,
.ifCont_txt .level5,
.ifCont_txt strong {font-weight: 'bold';}



.list-thumBox_tit h2 {
    font-family: 'NanumBarunGothic-YetHangul', 'ybmExt';
}

/* 210507, 영한사전 발음기호 폰트 설정 */
.tabContList.tile_eng .list-thumBox_tit h2 em {font-weight: 700;}

/* 210524, 연표 빠른이동 추가 */
.jumpyear-wrap > div { height: calc(100vh - 248px); margin-right: -16px;overflow: auto;}
@media (max-height: 700px) {
    .jumpyear-wrap > div {height: calc(100vh - 160px);}
}

/* 210524, 햄버거 메뉴 겹치는 영역 수정 */
.timeline-tot-tit {background: #004f5e;}

/* 210526, 연혁 수정 */
.toggle-wra label {font-size: 24px;}
.toggle-wrap label {display: inline-block; width:auto; padding-left: 94px;}
.toggle-wrap input + label::before {width: 46px; height: 24px;}


/* 로딩 페이지 - 로티 */
.loading-wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; text-align: center; background-color: rgba(0,0,0,0.5); z-index: 99;}
.loading-wrap .loading-box {position: absolute; top: 50%; left: 50%; width: 200px; height: auto; background:transparent; transform: translate(-50%, -50%);}
.loading-wrap .loading {width: 100%;}
.loading-wrap .loading-box .msg { position: absolute; left: 50%; bottom: 8px;display: inline-block; width: 100%; margin-top: -40px; font-size: 25px; color: #fff; transform: translate(-50%, 0);}
#loading svg {min-height: 206px;}

/* 국가기본정보 */
.pcView .book-country a span.txt { padding-top: 24px; padding-left: 0; }
.pcView .book-country a span.txt::before { left: calc(50% - 10px); width: 20px; height: 20px; background: url(../images/icon/icon_dic_nation_01@2x.png) 0 0 no-repeat; background-size: cover; }
.pcView .book-countryl.on a span.txt::before { background: url(../images/icon/icon_dic_nation_02@2x.png) 0 0 no-repeat; background-size: cover; }

/* 타일 타입 --- 공공 DB-국가기본정보 */
.tile_country .list-thumBox_cat-inner { padding-right: 12px; padding-left: 12px; background-color: #88c669; }
.tile_country .list-thumBox_cat-inner .txt { padding-left: 26px; }
.tile_country .list-thumBox_cat-inner .txt::before { width: 16px; height: 16px; background: url(../images/icon/icon_dic_nation_03@2x.png) 0 0 no-repeat; background-size: cover; }
.tile_country .list-thumBox_cont .tumbImgCropBox { height: 124px; margin-top: 8px; }
.detail-tileList ul li.tile_country a.active {border: 4px solid #88c669;}

/* cc */
.fullSlide .sourcefrom {padding: 0 10px 4px; border-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.fullSlide .sourcefrom .cc-info {margin-left: 6px;}

.wrap.timeline-open #main { z-index: 0; }
.wrap.timeline-open #bookDetail { left: 100%; }
.wrap.timeline-open > header { display: none; }

/* 태블릿에서 상세레이어팝업을 별도 화면으로 띄우느라 common.css와 if_common.css에 동일하게 처리 필요 */
/* 레이어팝업 안에 슬라이드가 없이 자료화면 찰때 - 3D백과 */
.dicpop-noslide-wrap { position: relative; width: 100%; height: 540px; }
.dicpop-noslide-wrap iframe { overflow: hidden; }
.sourcefrom.pbhasbox { position: absolute; left: 0; bottom: 5px; padding: 0 10px 4px; font-size: 20px; color: #383735; text-align: center; font-weight: 700; background-color: #ffffff; border-top-right-radius: 5px; border-bottom-right-radius: 5px; line-height: 1.87; }

/* 2021.10.20 3D백과 사용방법 */
.btn-3dexp-open { position: absolute; top: 10px; right: 10px; padding: 9px 18px 14px 52px; color: #32c38c; background: url('../images/common/ic_3d_howtouse.png') 7px 5px no-repeat #fff; background-size: 34px 34px; font: normal 20px /*'LOVELOVE_OTFbold'*/; border: 2px solid #f5f5f5; border-radius: 21px; outline: 0 !important; }
.btn-3dexp-close { position: absolute; top: 22px; left: 24px; width: 56px; height: 54px; font-size: 0; background: url('../images/common/btn_3d_close.svg') top left no-repeat transparent; background-size: cover; border: 0; }
.layer-exp-wrap { position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(56, 55, 53, 0.92); border: 8px solid #fff; border-radius:20px; box-sizing: border-box; }
.layer-exp-wrap.active { display: block; }
.layer-exp-container { display: flex; height: 100%; justify-content: center; align-items: center; flex-direction: column; }
.layer-exp-head h1 { /* font-family: 'LOVELOVE_OTFBold';  */ padding: 16px 34px; font-size: 30px; color: #fff; line-height: normal; border: 3px solid #fff; border-radius: 36px; }
.layer-exp-body { display: flex; justify-content: center; padding-top: 42px; flex-direction: row; }
.layer-exp-item { text-align: center; }
.layer-exp-item img { width: 320px; height: 320px; margin: 0 88px 28px; vertical-align: top; }
.layer-exp-item p { /* font-family: 'LOVELOVE_OTFBold';  */ font-size: 24px; color: #fff; }

#snow { color: white; }
.snowflake{position:absolute;width:10px;height:10px;background:linear-gradient(white,white); border-radius:50%;filter:drop-shadow(0 0 10px white);/* Workaround for Chromium's selective color inversion */}

/* notice */
.notice_wrap { height: 100vh; font-size: 0; text-align: center; background: url('../images/notice/img_pm_setting@3x.png') -333px -320px/740px no-repeat, url('../images/notice/img_pm_setting@3x.png') right -182px bottom -182px/400px no-repeat; background-color: #fff;min-width: 1280px; font-family: "NanumBarunGothic-YetHangul";}
.notice_wrap::after {content: ''; display: inline-block; height: 100%; vertical-align: middle;}
.btn-out {position: absolute; top: 0; left: 0; width: 64px; height: 64px; background: url('../images/common/common_btn_close_b@2x.png') center/cover no-repeat;}
.notice_cen_box {display: inline-block; vertical-align: middle;}
.notice_cen_box .main_tit {margin-bottom: 37px; font-size: 56px; color: #004f5e; letter-spacing: 2.8px; line-height: 1.3;}
.notice_cen_box .detail_txt {margin-bottom: 45px; font-size: 28px; color: #b5b5b5; letter-spacing: 1.4px; line-height: 1.7;}
.notice_cen_box .info_box { margin: 0 auto; padding: 40px 80px; background-color: #f8fafc;max-width: 1080px; border: 3px solid #f1f5f9; border-radius: 20px;}
.notice_cen_box .info_box dl {display: flex; flex-wrap: wrap; font-size: 32px; text-align: left; letter-spacing: 0.8px;}
.notice_cen_box .info_box dl dt {position: relative; width: 270px; margin-bottom: 17px; padding-left: 30px; box-sizing: border-box;}
.notice_cen_box .info_box dl dt::before {content: ''; position: absolute; top: 19px; left: 0; display: block; width: 8px; height: 8px; background-color: #383735; border-radius: 50%;}
.notice_cen_box .info_box dl dd {width: calc(100% - 270px); margin-bottom: 17px; color: #fb4f2b;}
.notice_cen_box .info_box dl > *:last-of-type {margin-bottom: 0;}

/* 포토백과 Lite 공통 레이어*/
.photo-dict-wrap{position:fixed;left:0;bottom:0;width:100%;height:128px;background:linear-gradient(to bottom,rgba(255,255,255,0.94),#fff);box-shadow:0 4px 16px 0 rgba(60,65,70,0.16);font-family:'Spoqa Han Sans Neo';z-index:200;transition: .3s ease all;}
.photo-dict-wrap.deactivate {bottom: -130px;}
.photo-dict-box{display:flex;width:1280px;justify-content:center;align-items:center;margin:0 auto;padding:12px;}
.photo-dict-l{width:192px;}
.photo-dict-l .photo-title{width:80px;height:24px;background:url('../images/icon/photo-title.svg') no-repeat center center;}
.photo-dict-l p{margin-top:9px;font-size:16px;color:#9ba4ae;text-align:left;font-weight:500;}
.photo-dict-l .photo-link{display:block;width:62px;height:20px;margin-top:10px;font-size:14px;color:#5f73f0;text-align:left;font-weight:500;background:url('../images/icon/photo-bnr-ic-more.svg') no-repeat right 2px center;line-height:20px;}
.photo-dict-r{width:835px;margin-left:24px;}
.photo-dict-r ul{display:flex;width:100%;justify-content:flex-start;overflow: hidden;}
.photo-dict-r li{position:relative;height:104px;flex:0 0 160px;border-radius:8px;overflow:hidden;}
.photo-dict-r li:nth-child(8n+1) { background: url('../images/common/img_no_07@2x.png') center 12px no-repeat; background-size: 121px 78px; }
.photo-dict-r li:nth-child(8n+2) { background: url('../images/common/img_no_01@2x.png') center 12px no-repeat; background-size: 121px 78px; }
.photo-dict-r li:nth-child(8n+3) { background: url('../images/common/img_no_02@2x.png') center 12px no-repeat; background-size: 121px 78px; }
.photo-dict-r li:nth-child(8n+4) { background: url('../images/common/img_no_03@2x.png') center 12px no-repeat; background-size: 121px 78px; }
.photo-dict-r li:nth-child(8n+5) { background: url('../images/common/img_no_04@2x.png') center 12px no-repeat; background-size: 121px 78px; }
.photo-dict-r li a {position: relative; display: block; width: 100%; height: 100%; background: #fff;}
.photo-dict-r li a:before {content: ''; position: absolute; top: 4px; left: 4px; display: block; width: 30px; height: 30px; border-radius: 11px; z-index: 99;}
.photo-dict-r li + li{margin-left:8px;}
.photo-dict-r li img{position:absolute;top:50%;left:50%;display:block;transform:translate(-50%,-50%);max-width:100%; max-height: 100%; border-radius: 8px;}


/* 포토백과 Lite 다이얼로그 */
.photo-list-dialog{position:fixed;top:0;left:0;display:none;width:100%;height:100%;z-index:999;}
.photo-list-dialog .btn-closeLayer{width:64px;height:64px;background:url('../images/common/common_btn_close_b@2x.png') 0 0 no-repeat transparent;background-size:cover;text-indent:-9999px;}
.photo-list-dialog .dimmed-bg{width:100%;height:100%;background-color:rgba(0,0,0,0.5);}
.photo-list-dialog .layerBox{height:720px;max-width: 100%;max-height:90%;overflow:hidden;}
.photo-list-dialog .layerBox .layerBox-inner{width:100%;height:100%;padding: 8px 0;}
.photo-list-dialog .layerBox .layerBox-inner a{display:block;border-radius:8px;overflow:hidden;}
.photo-list-dialog .photo-dict-title{display:flex;justify-content:flex-start;align-items:center;margin-left:0;font-size:26px;text-align:left;font-weight:bold;line-height:100%;}
.photo-list-dialog .photo-dict-title span{margin-left:8px;color:#5f73f0;}
.photo-list-dialog .photo-dict-title h1,.photo-list-dialog .photo-dict-title h2{width:calc(100% - 85px);margin-left:8px;font-size:24px;color:#383735;font-weight:500;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.photo-list-dialog .photo-dict-grid-wrap {height: 615px;max-height: 92%;overflow: auto;}
.photo-list-dialog .photo-dict-grid {min-height: 630px;}
.photo-dict-grid-wrap::-webkit-scrollbar{width:20px;}
.photo-dict-grid-wrap::-webkit-scrollbar-thumb{background-color:#009093;background-clip:padding-box;border:6px solid transparent;border-radius:10px;}
.photo-dict-grid-wrap::-webkit-scrollbar-track{background-color:#fff;}
.photo-list-dialog .layerBox .layerBox-inner img {border-radius: 8px;}
.photo-list-dialog .layerBox .layerBox-inner a:before {content: ''; position: absolute; top: 20px; left: 20px; display: block; width: 30px; height: 30px; border-radius: 11px; z-index: 99;}
.photo-list-dialog .layerBox .layerBox-inner a[data-dict="PHOTOLIB"]:before {background:url('../images/icon/mark_wj.svg') no-repeat 0 0 / 100%;}
.photo-list-dialog .layerBox .layerBox-inner a[data-dict="NANUMPHOTO"]:before {background:url('../images/icon/mark_nanum.svg') no-repeat 0 0 / 100%;}

/* 포토백과 Lite 다이얼로그 상세 */
.layerBox.phdict-focused {transform: translateX(-50%) translateY(-85%); transition: .3s ease all;}
.photo-list-dialog .photo-dict-detail{position:absolute;top:0;left:0;width:100%;height:100%;padding:8px 16px;background:#fff;z-index: 999;transform:translateX(100%);}
.photo-list-dialog .photo-dict-detail.active{transform:translateX(0);}
.photo-list-dialog .photo-dict-detail .btn-close{width:64px;height:64px;flex:0 0 auto;background:url('../images/icon/common_btn_back_b.svg') 0 0 no-repeat transparent;}
.photo-list-dialog .photo-detail-wrap{display:flex;height:calc(100% - 75px);justify-content:space-between;align-items:flex-start;margin-top:8px;}
.photo-list-dialog .photo-detail-wrap .photo-detail-l{position: relative; display: flex;width: 824px;height: 100%;flex: 0 0 calc(100% - 340px);justify-content: center;align-items: center; overflow:hidden;}
.photo-list-dialog .photo-detail-wrap .photo-detail-l img{display:block;margin: 0 auto;max-width:100%;max-height: 100%; border-radius:8px;}
.photo-list-dialog .photo-detail-wrap .photo-detail-l .photo-move-btn {position: absolute; top: 0; left: 0; width: 100%;}
.photo-list-dialog .photo-detail-wrap .photo-detail-l .photo-move-btn button {position: absolute; top: 272px; width: 40px; height: 80px; background-color: rgba(0,0,0,0.4); background-repeat: no-repeat; background-position: center center; background-size: 24px;}
.photo-list-dialog .photo-detail-wrap .photo-detail-l .photo-move-btn .prev{left: 0; background-image: url('../images/icon/ic_dic_photo_details_prev.svg');}
.photo-list-dialog .photo-detail-wrap .photo-detail-l .photo-move-btn .next{right: 0; background-image: url('../images/icon/ic_dic_photo_details_next.svg');}
.photo-list-dialog .photo-detail-wrap .photo-detail-r{position: relative;display:flex;height:100%; flex:0 0 320px;justify-content:space-between;flex-direction:column;}
.photo-list-dialog .photo-type{display:flex;align-items:center;padding:12px;font-size:16px;text-align:left;font-weight:bold;}
.photo-list-dialog .photo-type:before{content:'';display:block;width:32px;height:32px;margin-right:12px;border-radius: 14px;}
/*웅진포토*/
.photo-list-dialog .photo-type.type-01{color:#5f73f0;}
/*학습백과*/
.photo-list-dialog .photo-type.type-02{color:#004f5e;}
/*dictKorNm:'웅진학습백과',dictCd:'ECCPD'*/
.photo-list-dialog .photo-type.type-04 {color: #ff9e40;}
/*웅진포토*/
.photo-list-dialog .photo-type.type-05{color:#88c669;}

/* 기타사전 */
.photo-list-dialog .photo-type.type-03:before {border-radius: 14px;}
/*dictKorNm: "용어사전",dictCd: "STDDIC"*/
.photo-list-dialog .photo-type.type-03[data-dict="STDDIC"] {color: #f47495;}
/*
dictKorNm:'국어사전',dictCd:'KODIC'
dictKorNm:'우리말샘',dictCd:'KORSAM'*/
.photo-list-dialog .photo-type.type-03[data-dict="KODIC"],
.photo-list-dialog .photo-type.type-03[data-dict="KORSAM"] {color: #5e96ce;}
/*dictKorNm:'어린이 시사사전',dictCd:'AFFAIR'*/
.photo-list-dialog .photo-type.type-03[data-dict="AFFAIR"] {color: #f8bd00;}
/*
dictKorNm:'유물정보',dictCd:'MUSM'
dictKorNm:'자연사정보',dictCd:'NARIS'
dictKorNm:'궁궐종묘정보',dictCd:'JONGMYO'
dictKorNm:'관광사진정보',dictCd:'VISIT_PHTG'
dictKorNm:'왕실유물정보',dictCd:'ROYAL'
dictKorNm:'국가기본정보',dictCd:'COUNTRY'
dictKorNm:'해양생물종정보',dictCd:'OCEANS'
viewDictNm: 'tradition', dictKorNm: '한국민속대백과사전'
dictKorNm:'어린이생물도감',dictCd:'BIOLOGY'
dictKorNm:'문화재정보',dictCd:'CTLHRIT'
viewDictNm: 'PLANT', dictKorNm: '식물도감'
dictKorNm:'과학학습콘텐츠',dictCd:'DINO'
*/
.photo-list-dialog .photo-type.type-03[data-dict="MUSM"],
.photo-list-dialog .photo-type.type-03[data-dict="NARIS"],
.photo-list-dialog .photo-type.type-03[data-dict="JONGMYO"],
.photo-list-dialog .photo-type.type-03[data-dict="VISIT_PHTG"],
.photo-list-dialog .photo-type.type-03[data-dict="ROYAL"],
.photo-list-dialog .photo-type.type-03[data-dict="COUNTRY"],
.photo-list-dialog .photo-type.type-03[data-dict="OCEANS"],
.photo-list-dialog .photo-type.type-03[data-dict="TRADITION"],
.photo-list-dialog .photo-type.type-03[data-dict="BIOLOGY"],
.photo-list-dialog .photo-type.type-03[data-dict="PLANT"],
.photo-list-dialog .photo-type.type-03[data-dict="DINO"],
.photo-list-dialog .photo-type.type-03[data-dict="CTLHRIT"] {color: #88c669;}
/*dictKorNm:'3D백과',dictCd:'DIC3D'*/
.photo-list-dialog .photo-type.type-03[data-dict="DIC3D"] {color: #32c38c;}
/*dictKorNm:'시사상식',dictCd:'SENSE'*/
.photo-list-dialog .photo-type.type-03[data-dict="SENSE"] {color: #ef585b;}
/*dictKorNm:'미술백과',dictCd:'ART'*/
.photo-list-dialog .photo-type.type-03[data-dict="ART"] {color: #a38356;}
/*dictKorNm:'수학사전',dictCd:'MATHDICT'*/
.photo-list-dialog .photo-type.type-03[data-dict="MATHDICT"] {color: #41b9eb;}

*[data-dict="PHOTOLIB"]:before {background:url('../images/icon/mark_wj.svg') no-repeat 0 0 / 100%;}  /*dictKorNm:'포토백과',dictCd:'PHOTOLIB'*/
*[data-dict="NANUMPHOTO"]:before {background:url('../images/icon/mark_nanum.svg') no-repeat 0 0 / 100%;} /*dictKorNm:'포토백과',dictCd:'NANUMPHOTO'*/
*[data-dict="PARTICIPATION_IMAGE"]:before {background: url('../images/icon/mark_user.svg') no-repeat 0 0 / 100%;}  /*dictKorNm:'참여포토',dictCd:'PARTICIPATION_IMAGE'*/
*[data-dict="WJ"]:before {background:#ff9e40 url('../images/photodict/ic-dic-wjstudy.svg') no-repeat center center;} /*dictKorNm:'웅진학습백과',dictCd:'WJ'*/
*[data-dict="ECCPD"]:before {background:#ff9e40 url('../images/photodict/ic-dic-wjstudy.svg') no-repeat center center;} /*dictKorNm: "용어사전",dictCd: "STDDIC"*/
*[data-dict="STDDIC"]:before {background:#f47495 url('../images/photodict/ic_dic_term.svg') no-repeat center center;} /*dictKorNm:'웅진학습백과',dictCd:'ECCPD'*/
*[data-dict="KODIC"]:before{background:#5e96ce url('../images/photodict/ic_dic_korean.svg') no-repeat center center;} /*dictKorNm:'국어사전',dictCd:'KODIC'*/
*[data-dict="KORSAM"]:before {background:#5e96ce url('../images/photodict/ic_dic_sam.svg') no-repeat center center;} /*dictKorNm:'우리말샘',dictCd:'KORSAM'*/
*[data-dict="AFFAIR"]:before {background:#f8bd00 url('../images/photodict/ic_dic_child.svg') no-repeat center center;} /*dictKorNm:'어린이 시사사전',dictCd:'AFFAIR'*/
*[data-dict="MUSM"]:before {background:#88c669 url('../images/photodict/ic-dic-relic.svg') no-repeat center center;} /*dictKorNm:'유물정보',dictCd:'MUSM'*/
*[data-dict="NARIS"]:before {background:#88c669 url('../images/photodict/ic-dic-natural.svg') no-repeat center center;} /*dictKorNm:'자연사정보',dictCd:'NARIS'*/
*[data-dict="JONGMYO"]:before {background:#88c669 url('../images/photodict/ic-dic-cultural.svg') no-repeat center center;} /*dictKorNm:'궁궐종묘정보',dictCd:'JONGMYO'*/
*[data-dict="VISIT_PHTG"]:before{background:#88c669 url('../images/photodict/icon_dic_sightseeing.svg') no-repeat center center;} /*dictKorNm:'관광사진정보',dictCd:'VISIT_PHTG'*/
*[data-dict="ROYAL"]:before {background:#88c669 url('../images/photodict/ic-dic-royal.svg') no-repeat center center;} /*dictKorNm:'왕실유물정보',dictCd:'ROYAL'*/
*[data-dict="COUNTRY"]:before {background:#88c669 url('../images/photodict/ic-dic-nation.svg') no-repeat center center;} /*dictKorNm:'국가기본정보',dictCd:'COUNTRY'*/
*[data-dict="OCEANS"]:before {background:#88c669 url('../images/photodict/ic-dic-oceans.svg') no-repeat center center;} /*dictKorNm:'해양생물종정보',dictCd:'OCEANS'*/
*[data-dict="TRADITION"]:before {background:#88c669 url('../images/photodict/ic-dic-folklore.svg') no-repeat center center;} /*viewDictNm: 'tradition', dictKorNm: '한국민속대백과사전'*/
*[data-dict="BIOLOGY"]:before {background:#88c669 url('../images/photodict/ic-dic-biology.svg') no-repeat center center;} /*dictKorNm:'어린이생물도감',dictCd:'BIOLOGY'*/
*[data-dict="PLANT"]:before {background:#88c669 url('../images/photodict/ic_dic_plant.svg') no-repeat center center;} /*viewDictNm: 'PLANT', dictKorNm: '식물도감'*/
*[data-dict="DINO"]:before,
*[data-dict="WILDFLOWER"]:before,
*[data-dict="CAMERA"]:before,
*[data-dict="INSECT"]:before,
*[data-dict="CONSTELLATION"]:before {background:#88c669 url('../images/photodict/ic_dic_science.svg') no-repeat center center / 24px;} /*dictKorNm:'과학학습콘텐츠',dictCd:'DINO / WILDFLOWER / CAMERA / INSECT / CONSTELLATION'*/
*[data-dict="CTLHRIT"]:before {background:#88c669 url('../images/photodict/ic-dic-cultural.svg') no-repeat center center;} /*dictKorNm:'문화재',dictCd:'CTLHRIT'*/
*[data-dict="DIC3D"]:before {background:#32c38c url('../images/photodict/ic_dic_3d.svg') no-repeat center center;} /*dictKorNm:'3D백과',dictCd:'DIC3D'*/
*[data-dict="SENSE"]:before {background:#ef585b url('../images/photodict/ic_dic_eduwill.svg') no-repeat center center;} /*dictKorNm:'시사상식',dictCd:'SENSE'*/
*[data-dict="ART"]:before {background:#a38356 url('../images/photodict/ic_dic_art.svg') no-repeat center center;} /*dictKorNm:'미술백과',dictCd:'ART'*/
*[data-dict="MATHDICT"]:before {background:#41b9eb url('../images/photodict/ic_dic_math.svg') no-repeat center center;} /*dictKorNm:'수학사전',dictCd:'MATHDICT'*/
*[data-dict="MODERN"]:before {background:#c88c48 url('../images/photodict/icon_dic_history_03.svg') no-repeat center center;} /*dictKorNm:'근현대사',dictCd:'MODERN'*/

/* .photo-list-dialog .photo-info-wrap{max-width: 320px; max-height:420px;overflow:auto;} */
.photo-list-dialog .photo-info-wrap{max-width: 320px; max-height:422px;overflow:auto;}
.photo-list-dialog .photo-info-wrap::-webkit-scrollbar{width:18px;}
.photo-list-dialog .photo-info-wrap::-webkit-scrollbar-thumb{background-color:#009093;background-clip:padding-box;border:6px solid transparent;border-radius:12px;}
.photo-list-dialog .photo-info-wrap::-webkit-scrollbar-track{background-color:#fff;}
.photo-list-dialog .photo-info{padding:16px;}
.photo-list-dialog .photo-info + .photo-info{margin-top:8px;}
.photo-list-dialog .photo-info li{position:relative;display:flex;width: 100%;justify-content:flex-start;align-items:flex-start; font-size:16px;color:#323c46;font-weight:400;line-height:1.5;}

.photo-type[data-dict="PLANT"] + .photo-info-wrap .photo-info-data,
.photo-type[data-dict="DINO"] + .photo-info-wrap .photo-info-data,
.photo-type[data-dict="WILDFLOWER"] + .photo-info-wrap .photo-info-data,
.photo-type[data-dict="CAMERA"] + .photo-info-wrap .photo-info-data,
.photo-type[data-dict="INSECT"] + .photo-info-wrap .photo-info-data,
.photo-type[data-dict="CONSTELLATION"] + .photo-info-wrap .photo-info-data {word-break: break-all;}
.photo-list-dialog .photo-info li + li{margin-top:8px;}
.photo-list-dialog .photo-info li:before{content:'';position:absolute;top:12px;left:-12px;display:block;width:3px;height:3px;background-color:#7b8284;opacity:0.5;border-radius:1.5px;}
.photo-list-dialog .photo-info li .photo-info-title{flex:0 0 88px;color:#7b8284;}
.photo-list-dialog .photo-info li .photo-info-data{flex: 0 0 calc(100% - 88px);font-weight: 700;word-break: keep-all;}
.photo-buttons > div{display:flex;justify-content:space-between;}
.photo-buttons button{display:flex;width:auto;height:56px;justify-content:center;align-items:center;padding:0 20px 0 16px;font-size:16px;color:#fff;font-weight:500;background:#7fa7af;border-radius:8px;}
.photo-buttons button:before{content:'';display:block;height:24px;margin-right:8px;}
.photo-buttons .btn-photo-like{width:136px;}
.photo-buttons .btn-photo-like:before{width:24px;background:url('../images/icon/ic-like.svg') no-repeat center center;}
.photo-buttons .btn-photo-like.liked{background:#eb4b87;}
.photo-buttons .btn-photo-like.liked:before{background:url('../images/icon/ic_like_fill.svg') no-repeat center center;}
.photo-buttons .btn-photo-mail{width:168px;}
.photo-buttons .btn-photo-mail:before{width:32px;background:url('../images/icon/ic-mail.svg') no-repeat center center;}
/*.photo-buttons .photo-qrcode button{display:flex;width:100%;height:64px;justify-content:center;align-items:center;margin:16px 0 0;padding:0 24px;font-size:14px;color:#fff;text-align:left;background:#72a0cc;border-radius:8px;line-height:1.57;}*/
.photo-buttons .photo-qrcode button{display:flex;width:100%;height:64px;justify-content:center;align-items:center;margin:16px 0 0;padding:0 24px;font-size:13px;color:#fff;text-align:left;background:#72a0cc;border-radius:8px;line-height:1.57;}
.photo-buttons .photo-qrcode button:before{content:'';display:block;width:40px;height:40px;margin-right:16px;background:url('../images/icon/ic-qr.svg') no-repeat center center;}

/* 포토백과 Lite 다이얼로그 내 다이얼로그 */
.photo-inner-dialog{position:absolute;left:0;bottom:0;display:none;width:100%;height:472px;padding:34px 16px 26px;background:#fff;border-radius:8px;border:2px solid #5f73f0;z-index:999;}
.photo-inner-dialog .btn-innder-close{position:absolute;top:-2px;right:-2px;width:40px;height:40px;background:#5f73f0 url(../images/icon/ic_close.svg) no-repeat center center;border-bottom-left-radius:8px;border-top-right-radius: 8px;}
.photo-inner-dialog .photo-inner-head{margin-bottom:24px;padding-left:80px;background:url('../images/icon/ico_mail.svg') no-repeat 0 center;}
.photo-inner-dialog .photo-inner-head .photo-inner-title{font-size:26px;color:#5f73f0;letter-spacing:-0.52px;/*font-family:'LOVELOVE_OTFbold';*/}
.photo-inner-dialog .photo-inner-head .photo-inner-desc{font-size:16px;color:#323c46;line-height:1.63;}
.photo-inner-dialog .photo-inner-email{width:100%;height:56px;padding:0;text-align:center; text-align:center;background-color:#fff;line-height:56px;outline:none;border-radius:8px;border:solid 2px #dfe4eb; transition: .3s ease all;}
.photo-inner-dialog .photo-inner-email:focus{border:solid 2px #5f73f0;}
.photo-inner-dialog .photo-button-submit{display:flex;width:100%;justify-content:center;align-items:center;margin-top:16px;padding:16px 0;font-size:16px;color:#fff;text-align:center;font-weight:500;background:#5f73f0;border-radius:8px;border:none;}
.photo-inner-dialog .photo-button-submit .ico-mail{display:block;width:32px;height:24px;margin-right:8px;background:url('../images/icon/ic_mail.svg') no-repeat center center;}
.photo-inner-dialog .photo-inner-notice{margin-top:24px;font-size:13px;color:#7b8284;line-height:1.69;}
.photo-inner-dialog .photo-inner-notice li{position:relative;padding-left:10px;}
.photo-inner-dialog .photo-inner-notice li:before{content:'';position:absolute;top:10px;left:0;display:block;width:3px;height:3px;background:#7b8284;opacity:.5;border-radius:50%;}
.photo-inner-dialog.photo-qr-wrap .photo-inner-head{background:url('../images/icon/ico_qrcode.svg') no-repeat 0 center;}
.photo-inner-dialog.photo-qr-wrap .photo-inner-qrcode{display:flex;width:288px;height:288px;margin-top:26px;padding:32px;background:#9eacff;border-radius:8px;}
.photo-inner-dialog.photo-qr-wrap .photo-inner-qrcode img{display:block;border-radius:8px;}

/* 22-10-21 메인 UI 개선 */
/* 메인 상단 좌측 - 마퀴 영역 */
.main-marquee {position: absolute; top: 65px; left: 60px; width: 280px; padding-left: 16px; }
.main-marquee-title{ margin-bottom: 6px; padding-left: 20px;font-size:16px; color:#d2faff; text-align: left; font-weight:500; background: url(../images/common/ic_sch_popular@2x.png) no-repeat left center / 16px; }
.main-marquee .swiper-container {width: 208px; height: 40px; margin: 0;text-align: left; background: #003f4d; overflow: hidden; border-radius: 8px;}
.main-marquee .swiper-container ul {list-style:decimal;}
.main-marquee .swiper-container .swiper-slide {width: 100%; height: 40px; font-size: 16px; font-weight: 500;}
.main-marquee .swiper-container .swiper-slide button {display: block; width: 100%; height: 100%; padding-left: 12px;  color: #00ff69; text-align: left; background: transparent; border: none; line-height: 38px; outline: none; white-space: nowrap; overflow: hidden;}
.main-sub-title {font-size: 20px; color: #cbedf3;}
.main-new-pictures > h2,
.main-good-2know > h2{width:100%;height:24px;margin-bottom:16px;padding-left:32px;font-size:22px; color:#cbedf3;text-align:left; letter-spacing: -.25px; font-weight:500;background-repeat:no-repeat;background-position: 0 center;line-height:24px;box-sizing:border-box;}
.main-new-pictures > h2{background-image:url(../images/common/ic-new-photo.svg);}
.main-good-2know > h2{background-image:url(../images/common/ic-knowledge.svg);}

/* 새로 올라온 사진이야 */
.main-new-pictures{ width:1050px;  margin:24px 0 40px 0;  float:right;}
.pcVuew .main-new-pictures {margin-right:10px;}
.main-new-pictures.mobScr .swiper-container {overflow: auto;}
.main-new-pictures.mobScr li {margin-right: 20px;}
.main-new-pictures ul{display:flex; flex-wrap:nowrap; padding-bottom: 10px; box-sizing:border-box;}
.main-new-pictures ul li{ width: auto;flex-shrink:0; flex-grow:0;}
.main-new-pictures ul li button {display:block; width:120px; background: none; border: none; }
.main-new-pictures .img-box{width:120px; height:120px; margin-bottom:12px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:50%; overflow:hidden;}
.main-new-pictures .img-box img{width:100%; opacity: 0;}
.main-new-pictures .title,
.main-new-pictures .desc{width:120px;height: 28px;text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.main-new-pictures .title{ margin-bottom:4px;font-size:20px; color:#fff; font-weight:500;}
.main-new-pictures .desc{font-size:18px; color:#7fa7af; font-weight:400;}
.main-new-pictures .swiper-scrollbar {position: absolute; left: 0; bottom: 0; width: 100%;}
.main-new-pictures .swiper-scrollbar-drag {background: #38818f;}

/* 알아두면 쓸모 있는 백과 지식 */
.main-good-2know {width: 1050px; margin-right: 0; float: right; padding-bottom: 130px;}
.main-good-2know .tileListBox{width: 100%; padding-top: 0;}
.main-good-2know.searched .tileListBox{padding-top: 30px;}
.main-good-2know.searched .tileList ul li {margin-right: 43px;}
.main-good-2know.searched .tileList ul li:nth-child(4n) {margin-right: 0;}

.pcView .main-good-2know,
.pcView .main-new-pictures{margin-right: 10px;}
.pcView .main-good-2know .tileListBox {width: 1050px; margin-right: 0; float: none;}
.pcView .main-good-2know .tileList ul li {margin-right: 43px;}
.pcView .main-good-2know .tileList ul li:nth-child(4n) {margin-right: 0;}


/* responsive web for any device */
@media screen and (max-width: 1280px) {
    body.dict-en .btn-back{top:8px; left:8px; margin-left:0;}
}


/* ChatGPT */
.main-gpt{width:1050px;margin:24px 0 40px 0;float:right;}
.main-gpt > h2{background:url(../images/chatgpt/ic_ai@2x.png) no-repeat 0 0 / 24px;width:100%;height:24px;margin-bottom:16px;padding-left:32px;font-size:22px;color:#cbedf3;text-align:left;letter-spacing:-.25px;font-weight:500;background-repeat:no-repeat;background-position:0 center;line-height:24px;box-sizing:border-box;}
.main-gpt ul{display:flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap;padding-bottom:10px;box-sizing:border-box;}
.main-gpt ul li{flex:0 0 232px;height:160px;opacity:0;animation:fadeInGPT .5s ease forwards;}
.main-gpt ul li:nth-child(1){animation-delay:.2s;}
.main-gpt ul li:nth-child(2){animation-delay:.3s;}
.main-gpt ul li:nth-child(3){animation-delay:.4s;}
.main-gpt ul li:nth-child(4){animation-delay:.5s;}
.main-gpt ul li:nth-child(5){animation-delay:.6s;}
.main-gpt ul li:nth-child(1) button {background: #ff9937 url(../images/chatgpt/gpt_card_bg@2x.png) no-repeat 0 0 / 100%;}
.main-gpt ul li:nth-child(2) button {background: #00d39e url(../images/chatgpt/gpt_card_bg@2x.png) no-repeat 0 0 / 100%;}
.main-gpt ul li:nth-child(3) button {background: #54b5ff url(../images/chatgpt/gpt_card_bg@2x.png) no-repeat 0 0 / 100%;}
.main-gpt ul li:nth-child(4) button {background: #ffc746 url(../images/chatgpt/gpt_card_bg@2x.png) no-repeat 0 0 / 100%;}
.main-gpt ul li:nth-child(5) button {background: #956ef8 url(../images/chatgpt/gpt_card_bg@2x.png) no-repeat 0 0 / 100%;}
.main-gpt ul li button{display:flex;justify-content:flex-start;align-items:flex-start; text-align: left; width:100%;height:100%;border:none;border-radius:20px;font-size:24px;padding:24px;word-break:keep-all; color: #fff; font-weight: 700;}
@keyframes fadeInGPT{
    0%{transform:scale(0);opacity:0;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}
.pcView .main-gpt{margin-right:10px;}

/* ChatGPT */
#bookLeft.chatGPT {position: absolute; top: 0; left: calc(50% + 640px - 125px); z-index: 199; transition: .3s ease all;}
#bookLeft.chatGPT.active {left: 50%; transform: translateX(-50%); }
.cont_chatGPT h2 { width: 100%; height: 64px; margin-bottom: 20px; padding-left: 4px;font-size: 24px; font-weight: 700; background: url('../images/chatgpt/gpt_chat_top@2x.png') no-repeat center center / 100%;}
.chatgptwrap{width:100%;max-height: calc(100vh - 235px);border-radius:12px;overflow-x: hidden;overflow-y: auto;}
.chatgptwrap:after,
.chatgptwrap > div:after {content: ''; display: block; width: 100%; clear: both;}
.chatgptwrap .chatgpt-q{max-width: 640px; margin-bottom: 24px; padding:19px 32px 19px 24px; font-size:21px; line-height: 1;color:#fff; font-weight:400; background:#005a6a; float: right; border-radius:19px 8px 19px 24px;}
.chatgptwrap .chatgpt-a{max-width: 640px; margin-bottom: 24px; padding:19px 32px 19px 24px; font-size:21px; line-height: 1.52; color:#333; font-weight:400; background:#f0f3f6; float: left; border-radius: 8px 24px 24px 24px;}
.chatgptwrap .chatgpt-wait{max-width: 640px; margin-bottom: 20px; padding:36px 24px 36px 176px; font-size:18px; line-height: 1.44; color:#333; font-weight:400; background:#f0f3f6; float: left; border-radius: 19px 32px 19px 24px; background: #f0f3f6 url(../images/chatgpt/img_character@2x.png) no-repeat 32px 0 / 120px ;}
.chatgptwrap .chatgpt-wait span {display: block; animation: wating 3s ease infinite;}
@keyframes wating {
    30% {
        opacity: 0;
    }
}

.dummyChatGPTInput{display:flex;width:100%;justify-content:space-between;align-items:center;margin-top:24px;border:1px solid #eee; border-radius: 24px; border: solid 2px #f0f3f6; padding: 0 10px;}
.dummyChatGPTInput input{display:block;width:100%;height:64px;line-height:100%;text-indent:20px; font-size: 21px; font-weight: 400; color: #333; }
.dummyChatGPTInput input::placeholder{color: #b4bec8; }
.dummyChatGPTInput input:focus{outline:none;}
.dummyChatGPTInput button{display:flex;height:44px;flex:0 0 44px;justify-content:center;align-items:center;background:#38818f url(../images/chatgpt/gpt_ic_send@2x.png) no-repeat center center / 32px; border-radius: 16px;}
#bookLeft.chatGPT .detail-tileList ul .tile_photo a {display: flex; width: 100%; height: 170px; border-width: 1px; overflow: hidden;}
#bookLeft.chatGPT .detail-tileList ul .tile_photo a:before{content:''; position: absolute; top: 10px; left: 10px; display:block;width:30px;height:30px;margin-right:12px;border-radius: 14px;}
#bookLeft.chatGPT .detail-tileList ul .tile_photo a img {width: 100%; height: 100%; object-fit: cover;}
#bookLeft.chatGPT .tileList ul li {height: auto;opacity:0;}
#bookLeft.chatGPT.active .tileList ul li {animation:fadeInGPT .5s ease forwards;}
#bookLeft.chatGPT .tileList ul li:nth-child(1) {animation-delay:.3s;}
#bookLeft.chatGPT .tileList ul li:nth-child(2) {animation-delay:.4s;}
#bookLeft.chatGPT .tileList ul li:nth-child(3) {animation-delay:.5s;}
#bookLeft.chatGPT .tileList ul li:nth-child(4) {animation-delay:.6s;}
#bookLeft.chatGPT .tileList ul li:nth-child(5) {animation-delay:.7s;}
#bookLeft.chatGPT .tileList ul li:nth-child(6) {animation-delay:.8s;}
@keyframes fadeInlistGPT{
    0%{transform:scale(0);opacity:0;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}
.gptballoon{width:100%;height:96px;margin-bottom:20px;padding:16px 25px 18px 21px;border-radius:20px;background-color:#ff9e40;font-size:24px;font-weight:bold;line-height:1.33;text-align:left;color:#fff;display:block;position:relative;   transform: translateX(100%) scale(0);}
#bookLeft.chatGPT.active .gptballoon{animation: balloongpt .5s ease forwards; animation-delay: .3s; }
@keyframes balloongpt {
    0% {
        transform: translateX(100%) scale(0) rotate(25deg);
    }
    100% {
        transform: translateX(0) scale(1);
    }
}
.gptballoon::after{content:'';display:block;position:absolute;top:50%;right:-18px;transform:translateY(-50%);width:19px;height:24px;background:url(../images/chatgpt/img_tag_relic@2x.png) no-repeat center center / 19px;}
.btn-back.onview.zind {z-index: 9999;}