/**reset **/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    letter-spacing: -1px;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* a링크 초기화 */
a:link,
a:visited,
a:active {color:#fff; text-decoration:none;}
a:hover {color:#FFCE3C;text-decoration:none;}

.clearfix:after{content:''; display:block; clear:both;}
/**reset **/

/* font */
/*카페24*/
@font-face {
    font-family: 'Cafe24Dongdong'; /*카페24동동*/
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Dongdong.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cafe24Ssurround'; /*카페24써라운드*/
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*여기어때 잘난체*/
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.nanumbarungothic * {
    font-family: 'NanumBarunGothic', sans-serif;
}

html, body {margin:0;padding:0; width:100%; height:100%;}

/**** intro ****/
/* .m_wrap{width:100%; background:url(../images/main_bg.jpg) repeat-x; height:727px;} */
.intro_bg{position:relative; width:100%; height:900px; margin:0 auto; background:url(../images/main_img.png) 50% 54px no-repeat;}
.intro_bg a{color:#fcd500;}
.intro_bg a:hover{color:#473a24;}
.btn_enter{position:absolute; top:617px; left:50%; transform: translateX(-50%); display:inline-block; padding: 6px 3px; background:#473a24; transition: 0.3s; width:94px; border-radius: 50px; font-family: 'Cafe24Ssurround'; font-size:20px; text-align:center;}
.btn_enter:hover{background:#fff;}


/***** list, 이미지자료실 공통 *****/
.wrap_sub{position:relative; width:100%; height:100%; background:url(../images/sub_img.png) center 0 no-repeat;}
.wrap_data{position:relative; width:100%; height:100%; background:url(../images/data_top.png) center 0 no-repeat;}
.wrap_con{position:relative; width:1180px; height:887px; margin:0 auto;}/* 자료실까지 모두 포함 */
/* .wrap_con_data{position:relative; width:1180px; height:100%; margin:0 auto; border:1px solid #f00;} */
.wrap_sub .wrap_con .header{position:relative; width:1150px; margin:0 auto;}
.sub_title{text-align:center; margin-top:32px;}
.data{position: absolute; top:0; right:30px;}

/***** contents list *****/
.con_box{margin:59px auto 0; width:1180px; min-height:480px; background:#625e48; border-radius: 20px;}
.list_con{display:flex; justify-content: space-between; position:relative; z-index:999;}
.list_con > div{position:relative; width:25%; text-align:left;border-left:1px solid #817B5A; margin-top:21px; min-height:400px;}
.list_con > div:first-child{border-left:none;}
.part01 h2, .part02 h2, .part03 h2, .part04 h2{font-size:32px; font-family: 'yg-jalnan'; color:#fff; text-align:center; border-radius: 15px; padding-top:10px; height:43px; margin:0 auto;}
.list_con > div h2 p {text-align:right;}
.part01 h2{background:#3da4b0; width:80%;}
.part01 h2 img{margin-top:-5px;}
.part02 h2{background:#7F73A1; width:80%;}
.part03 h2{background:#F79649; width:80%;}
.part04 h2{background:#FAB62F; width:80%;}

.list{width:100%;} /*리스트배경 공통*/
.list label{ width:160px; height:32px; border-radius:0 15px 15px 0;font-size:18px; font-family: 'yg-jalnan'; padding:15px 0 0 70px;}
/*.m_tit{width:194px; height:44px; border-radius: 0 25px 25px 0; background:#fef9e4; margin-bottom:5px; padding:12px 0 0 18px; box-sizing: border-box; font-size:24px; font-family: 'Cafe24Ssurround';}
.btimg{position:absolute; left:50%; transform: translateX(-50%); bottom:20px; z-index:90;}
.btimg_list{position:absolute; left:50%; transform: translateX(-50%); bottom:120px; z-index:90;}*/

/*리스트별 개별 색상*/
.part01 .list_tit1_1{background:#D6F0F3 url(../images/list_icon01.png) 8px bottom no-repeat; color:#1E8490;}
.part01 .list_tit1_2{background:#D6F0F3 url(../images/list_icon02.png) 8px bottom no-repeat; color:#1E8490;}
.part01 .list_tit1_3{background:#D6F0F3 url(../images/list_icon03.png) 8px 10px no-repeat; color:#1E8490;}
.part02 .list_tit2_1{background:#d2cbe9 url(../images/list_icon01.png) 8px 10px no-repeat; color:#614F98;}
.part02 .list_tit2_2{background:#d2cbe9 url(../images/list_icon02.png) 8px 10px no-repeat; color:#614F98;}
.part02 .list_tit2_3{background:#d2cbe9 url(../images/list_icon03.png) 8px 10px no-repeat; color:#614F98;}
.part03 .list_tit3_1{background:#f5d3b7 url(../images/list_icon01.png) 8px 10px no-repeat; color:#D97A2F;}
.part03 .list_tit3_2{background:#f5d3b7 url(../images/list_icon02.png) 8px 10px no-repeat; color:#D97A2F;}
.part03 .list_tit3_3{background:#f5d3b7 url(../images/list_icon03.png) 8px 10px no-repeat; color:#D97A2F;}
.part04 .list_tit4_1{background:#fbdea4 url(../images/list_icon01.png) 8px 10px no-repeat; color:#D09215;}
.part04 .list_tit4_2{background:#fbdea4 url(../images/list_icon02.png) 8px 10px no-repeat; color:#D09215;}
.part04 .list_tit4_3{background:#fbdea4 url(../images/list_icon03.png) 8px 10px no-repeat; color:#D09215;}

.part02 .m_tit02{background:url(../images/list_icon02.png) 0 0 no-repeat;}
.part03 .m_tit02{background:url(../images/list_icon03.png) 0 0 no-repeat;}
.sm_list ul{margin:0 0 14px 24px;}
.sm_list ul li{position:relative; font-size:20px; font-family:'Cafe24Dongdong'; padding:10px 0 0 20px; color:#fff;}
/* .sm_list ul li:before{content:''; position:absolute; width:6px; height:6px; border-radius: 50%; background:rgba(70,171,105,.8); margin:8px 0 0 -10px;} */
.sm_list ul li:before{
  content:''; position:absolute;
  width: 5px;
  height: 5px;
  border: 4px solid #96906F; /* 바깥 원 색상 */
  border-radius: 50%;          /* 원형으로 만들기 */
  background-color: transparent;
  left:0;
}
.sm_list ul li:hover:before{
    content:''; position:absolute;
  width: 5px;
  height: 5px;
  border: 4px solid #FFCE3C; /* 바깥 원 색상 */
  border-radius: 50%;          /* 원형으로 만들기 */
  background-color: transparent;
}
.sm_list ul li:nth-child(1){padding-top:15px; !important;}
.list > div{margin:15px 0 0 0} /*두번째 타이틀*/
.lang{display:inline-block; margin-left:2px;}

.layoutTable{width:100%; height:100%;}
.inner_wrap{position:relative; height:100%; z-index:99;}
/*.wrap_con{position:relative; width:1297px; margin:0 auto; border:2px solid #000;}*/

/* 자료실, 탭메뉴 */
.con_data{position:relative; width:1180px; height:100%; margin:0 auto;}
.tab_menu{width:100%; margin:55px auto 0; display: flex; justify-content: space-between;}
.tab_menu li{display:inline-block; border-radius: 10px; color:#3b3736; width:24.7%;  margin-top:4px; text-align:center; background:#fff; border:1px solid #30A65F; font-size:22px; line-height:54px; transition: all .3s;}
.tab_menu li a{display:inline-block; width:100%; color:#666; text-decoration:none; font-family:'Cafe24Ssurround'; padding-top:-1px;}
.tab_menu li:hover{background:#30A65F;}
.tab_menu li:hover a{color:#fff;}
.tab_menu .on{border-radius: 10px; background:#30A65F; font-weight:400;}
.tab_menu .on a{color:#fff;}
.tab_menu > div{margin-top:50px;}
.tab_menu > div h4{position:relative;}
.con_list{/*border-top:2px solid #F47F1F;*/ width:95%; margin:0 auto;}
.con_list ul{margin-top:20px; display:flex; justify-content:flex-start; flex-wrap:wrap;}
.con_list ul li{width:180px; height:180px; text-align:center; padding:10px 0; border:1px solid rgba(48,166,95,.3); /*border-radius: 15px;*/ background:#fff; box-sizing: border-box; margin:0 8px 10px 0;}
.con_list ul li:nth-child(6n){margin-right:0;}
.con_list .ch li img{height:100%;}
.con_list .ch li .img_wd{width:80%; height:45%; padding-top:35px;}
.con_list .ch li .img_sz{width:70%; height:85%; padding-top:10px;}
.con_list .bg li img{width:90%; padding-top:20px;}
.con_list .pl li img{width:90%;}
.con_list .pl li:nth-child(11) img,.con_list .pl li:nth-child(12) img{width:48%;}
.con_list .pl li .img_hg{width:60%;}
.con_list .pl li{display:flex; justify-content:center; align-items:center;}
.special{margin-top:10px;}
.special li{background:url(../images/list_star.png) 0 0 no-repeat; font-size:20px; font-family: 'MaplestoryOTFBold'; padding-left:28px;}
/*.bottom_data{position:relative; background:url(../images/bottom_bg.jpg) center top repeat-x; height:150px;}*/
/*.con_list .bg li:nth-child(1){padding-top:20px;}
.con_list .bg li:nth-child(2){padding-top:20px;}
.con_list .bg li:nth-child(3){position:relative;}
.con_list .bg li:nth-child(3) img{padding-top:0;}
.con_list .bg li:nth-child(4) img{padding-top:0;}*/

/*
.sticker{display:block; font-size:11px; margin-top:-4px; color:#222;font-family: 'TheJamsil4Medium';}
.sticker .stic01{background:rgba(1,92,207,.7);}
.sticker .stic02{background:rgba(254,44,109,.7);}
.sticker .stic03{background:rgba(254,169,0,.7);}
.sticker .stic04{background:rgba(3,208,71,.7);}
.sticker span{display:inline-block; background:rgba(0,0,0,.7); border-radius: 10px; color:#fff; padding:3px 5px; letter-spacing:0;font-family: 'TheJamsil1Thin';}
*/

.tooltip1, .tooltip2, .tooltip3, .tooltip4 {
    position: relative;
    padding: 0;
    color: white;
    background-color: none;
    border: none;
    cursor: pointer;
}
.tooltip1::after, .tooltip2::after, .tooltip3::after,.tooltip4::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 70%;
    left: 80%;
    transform: translateX(-50%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 100;
    font-size: 16px;
    font-family:  'TheJamsil2Light';
 
}
.tooltip1::after{background-color: rgba(30, 132, 132, 0.9);}
.tooltip2::after{background-color: rgba(97, 79, 152, 0.9);}
.tooltip3::after{background-color: rgba(217, 122, 47, 0.9);}
.tooltip4::after{background-color: rgba(208, 146, 21, 0.9);}


.tooltip1:hover::after, .tooltip2:hover::after, .tooltip3:hover::after, .tooltip4:hover::after {
    opacity: 1;
    font-size:16px;
    font-family:  'TheJamsil2Light';
}

input[id*="answer"] {
    display:none;
}
input[id*="answer"] + label {
    display:block;
    border-bottom:0;
    cursor:pointer;
}
input[id*="answer"] + label + div{
    max-height:0;
    transition: all .35s;
    overflow:hidden;
    margin:0;
    padding:0;
    vertical-align: top;
}
input[id*="answer"]:checked + label + div {max-height:300px; margin:0;}
input[id*="answer"]:checked + label + .thum {max-height:340px; margin:0;}
input[id*="answer"]:checked + label + div img{ vertical-align: top;}