/**
* OLYM Cascading Style Sheets
* File Name : contents.css
* Description : 컨텐츠 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2017.04.26
* Update : 2016.04.26
* Copyright(c) 2017 OLYM Communications. All Rights Reserved.
*/

/*컨텐츠타이틀*/
h3.sub_h3 { font-size: 30px; color: #000; font-weight:900; margin-bottom: 20px;}
h3.sub_h3.mgT {margin-top:60px;}
h4.sub_h4 { font-size: 22px; font-weight: 600; color: #000;}
@media all and (max-width:1024px){
h3.sub_h3 { font-size: 24px;}
h4.sub_h4 { font-size: 18px;}
}
@media all and (max-width:767px){
h3.sub_h3 { font-size: 20px;}
h4.sub_h4 { font-size: 16px;}
h3.sub_h3.mgT {margin-top:40px;}
}

.con_img img {max-width:100%;}
.con_300 {margin-bottom:80px;}
.con_300 .desc_box {align-items:center;border-bottom:1px solid #ddd;padding:50px 0;justify-content:flex-start;}
.con_300 .desc_box:first-of-type {border-top:4px solid #000;margin-top:80px;}
.con_300 .desc_box .num {font-family: 'Montserrat', sans-serif;font-size:80px;color:#f2f2f2;font-weight:700;padding:0 5%;box-sizing:border-box;flex:1;}
.con_300 .desc_box .desc {font-size:22px;color:#000;padding-right:5%;box-sizing:border-box;flex:1;flex-basis:75%;}

@media all and (max-width:767px){
.con_300 .desc_box {flex-direction:column;align-items:flex-start;padding:30px 0;}
.con_300 .desc_box .desc {font-size:15px;word-break:break-all;}
.con_300 .desc_box .desc br {display:none;}
.con_300 .desc_box .num {font-size:40px;padding:0;}
.con_300 .desc_box:first-of-type {margin-top:50px;}
.con_300 {margin-bottom:50px;}
}


/*조직도
.orga_top {margin-top:150px;}
.orga_top div {position:relative;border:1px solid #ff5f00;color:#ff5f00;text-align:center;width:40%;margin:0 auto;line-height:120px;box-sizing:border-box;margin-bottom:20px;font-size:22px;font-weight:700;}
.orga_top .chair {position:absolute;right:10px;bottom:10px;line-height:1em;font-size:16px;color:#666;font-weight:400;}
.orga_bottom {margin-top:100px;}
.orga_bottom > div {flex:1;padding:0 50px;}
.orga_bottom > div > div {text-align:center;border-top:1px solid #000;border-bottom:1px solid #000;margin-bottom:20px;padding:40px;color:#000;font-size:18px;font-weight:700;}
.orga_bottom > div > div.first {border-top:1px solid #ff5f00;border-bottom:1px solid #ff5f00;color:#ff5f00;}

@media all and (max-width:767px){
.orga_top {margin-top:50px;}
.orga_top div {font-size:15px;line-height:60px;width:80%;}
.orga_top .chair {font-size:12px;right:5px;bottom:5px;}
.orga_bottom {flex-direction:column;margin-top:50px;}
.orga_bottom > div {padding:0 10%;}
.orga_bottom > div > div {font-size:15px;padding:0;line-height:60px;}
}*/


/*조직도2
.orga_box {background:url("/project/design/contents/bg_orga.png") no-repeat center;}
.orga1 {margin-bottom:120px;}
.orga1 li {text-align:center;border:6px solid #b69153;border-radius:40px 0;font-size:26px;color:#333;width:33.33%;margin:0 auto;margin-bottom:40px;font-weight:700;padding:1.8rem;box-sizing:border-box;letter-spacing:-0.05em;position:relative;background:#fff;}
.orga1 li:after {position:absolute;display:inline-block;content:"";background:#ccc;width:1px;height:40px;bottom:-46px;left:50%;transform:translate(-50%,0);}
.orga1 li:last-of-type:after {height:60px;bottom:-66px;}

.orga2 {position:relative;align-items:center;justify-content:center;}
.orga2:before {position:absolute;display:inline-block;content:"";width:50%;height:1px;background:#ccc;left:50%;transform:translate(-50%,0);top:-60px;}
.orga2 div {flex:1;padding:0 8.33%;}
.orga2 div li {position:relative;text-align:center;font-size:24px;color:#69563d;font-weight:700;letter-spacing:-0.05em;padding:1.8rem;box-sizing:border-box;border:6px solid #fff;margin-bottom:22px;border-radius:40px 0;background:#e1d5c1;box-shadow:0 0 3px 0 #ddd;}
.orga2 div li:first-of-type {background:#f6f6f6;}
.orga2 div li:after {position:absolute;content:"";display:inline-block;width:1px;height:20px;background:#ccc;left:50%;transform:translate(-50%,0);bottom:-27px;}
.orga2 div li:last-of-type:after {display:none;}
.orga2 div li:first-of-type:before {position:absolute;display:inline-block;content:"";width:1px;height:60px;background:#ccc;left:50%;transform:translate(-50%,0);top:-66px;}

@media all and (max-width:1024px){
.orga1 li {font-size:22px;width:50%;}
.orga2 div {padding:0 5%;}
.orga2 div li {font-size:20px;}
}

@media all and (max-width:767px){
.orga_box {background-size:cover;}
.orga1 {margin-bottom:40px;}
.orga1 li {font-size:18px;width:80%;padding:1.4em;}
.orga1 li:last-of-type:after {height:40px;bottom:-46px;}
.orga2 div {padding:10px;width:80%;}
.orga2 div li {font-size:16px;padding:1.5em;letter-spacing: -0.04rem;}
.orga2 div li:first-of-type:before {top:-27px;height:20px;}
.orga2:before {position: absolute;display: inline-block; content: ""; width: 50%; height: 1px; background: #ccc; left: 50%; transform: translate(-50%,0); top: -11px;}
.orga1 {margin-bottom: 51px;}
}

@media all and (max-width:500px){
.orga2 div li {font-size: 16px; }
.orga1 li {font-size: 16px; width: 80%; padding: 0.8em; }
}

@media all and (max-width:500px){
.orga2 div li { font-size: 13px; letter-spacing: -0.07rem; min-height: 70px; display: flex; align-items: center; justify-content: center; padding: 0; min-width: 160px; }
.orga2:before { width:53%; }

}

@media all and (max-width:320px){
.orga2 div li {min-width: 130px; }
}*/


/*프로그램 사전예약*/
.prog_rese {align-items:center;justify-content:space-between;border:1px solid #eee;padding:4rem;transition:.5s;margin-bottom:40px;}
.prog_rese:hover {border:1px solid #fb5000;box-shadow:0 10px 20px rgba(0,0,0,0.06);}
.prog_rese div {flex:1;}
.prog_rese div:last-of-type {flex:1;display:flex;justify-content:flex-end;}
.prog_rese .tit h4 {font-size:32px;font-weight:900;color:#000;margin-top:10px;}
.prog_rese .tit span {font-size:18px;background:#000;color:#fff;padding:0.25rem 0.75rem;text-align:center;display:inline-flex;}
.prog_rese .con {position:relative;}
.prog_rese .con:before {position:absolute;content:"";left:-5%;top:0;width:1px;height:100%;background:#e5e5e5;}
.prog_rese .con p {font-size:18px;position:relative;padding-left:80px;}
.prog_rese .con p:first-of-type {margin-bottom:20px;}
.prog_rese .con p:first-of-type:after {position:absolute;content:"장소";left:0;top:0;font-weight:700;color:#000;}
.prog_rese .con p:last-of-type:after {position:absolute;content:"내용";left:0;top:0;font-weight:700;color:#000;}
.prog_rese .con p span {font-size:18px;font-weight:700;color:#000;}
.prog_rese a {background:#fb5000;color:#fff;font-size:20px;align-items:center;justify-content:space-between;padding:0.7rem 1.5rem;width:230px;box-sizing:border-box;}
.prog_rese a:hover {background:#000;}

.prog_rese_view {align-items:center;justify-content:space-between;border:1px solid #eee;padding:4rem;transition:.5s;margin-bottom:40px;}
.prog_rese_view:hover {border:1px solid #fb5000;box-shadow:0 10px 20px rgba(0,0,0,0.06);}
.prog_rese_view div {flex:1;}
.prog_rese_view .tit h4 {font-size:32px;font-weight:900;color:#000;margin-top:10px;}
.prog_rese_view .tit span {font-size:18px;background:#000;color:#fff;padding:0.25rem 0.75rem;text-align:center;display:inline-block;}
.prog_rese_view .con {position:relative;}
.prog_rese_view .con:before {position:absolute;content:"";left:-10%;top:0;width:1px;height:100%;background:#e5e5e5;}
.prog_rese_view .con p {font-size:18px;position:relative;padding-left:100px;}
.prog_rese_view .con p:first-of-type {margin-bottom:20px;}
.prog_rese_view .con p:first-of-type:after {position:absolute;content:"장소";left:0;top:0;font-weight:700;color:#000;}
.prog_rese_view .con p:last-of-type:after {position:absolute;content:"프로그램";left:0;top:0;font-weight:700;color:#000;}
.prog_rese_view .con p span {font-size:18px;font-weight:700;color:#000;}

@media all and (max-width:1200px){
.prog_rese div {flex:1;}
}

@media all and (max-width:1024px){
.prog_rese {flex-direction:column;flex-wrap:wrap;align-items:flex-start;padding:3rem;}
.prog_rese div:last-of-type {margin-top:10px;}
.prog_rese .con:before {display:none;}
.prog_rese .con {display:flex;width:100%;}
.prog_rese .con p {font-size:16px;padding-left:0;}
.prog_rese .con p:first-of-type {padding-right:5%;padding-left:40px;}
.prog_rese .con p:last-of-type {padding-left:70px;}
.prog_rese .con span {padding-right:20px;border:1px solid red;}
.prog_rese .tit h4 {font-size:28px;}
.prog_rese .tit span {font-size:16px;}
.prog_rese a {font-size:16px;width:200px;}

.prog_rese_view {padding:3rem;}
.prog_rese_view .tit h4 {font-size:28px;}
.prog_rese_view .tit span {font-size:16px;}
.prog_rese_view .con p {font-size:16px;}
}

@media all and (max-width:768px){
.prog_rese {padding:2rem;margin-bottom:20px;}
.prog_rese .con {flex-direction:column;}
.prog_rese .tit h4 {font-size:24px;margin-bottom:20px;}
.prog_rese .tit span {font-size:14px;}
.prog_rese .con p {font-size:14px;}
.prog_rese .tit span {font-size:14px;}
.prog_rese a {font-size:14px;width:160px;}
.prog_rese .con p:first-of-type {margin-bottom:5px;}
.prog_rese div:last-of-type {margin-top:20px;}

.prog_rese_view {flex-direction:column;align-items:flex-start;padding:2rem;}
.prog_rese_view .con:before {display:none;}
.prog_rese_view .tit h4 {font-size:24px;margin-bottom:20px;}
.prog_rese_view .tit span {font-size:14px;}
.prog_rese_view .con p {font-size:14px;padding-left:80px;}
.prog_rese_view .con p:first-of-type {margin-bottom:5px;}
.prog_rese .con p:last-of-type {padding-left: 40px;}
}

/*체험*/
.expe_desc h3{font-size:40px;font-weight:700;color:#000;}
.expe_desc p {margin:30px 0 60px 0;font-size:18px;}

/*흥덕사*/
.temple_hd {position:relative;padding:8rem;box-sizing:border-box;min-height:1100px;background:url("/project/design/contents/bg_templehd3.png"), url("/project/design/contents/bg_templehd.jpg");background-repeat: no-repeat; background-position:95% 15%, center;}
.temple_hd:before {position:absolute;content:"";background:url("/project/design/contents/bg_templehd1.png") no-repeat center;width:574px;height:330px;left:0;bottom:0;zoom:0.7;}
.temple_hd:after {position:absolute;content:"";background:url("/project/design/contents/bg_templehd2.png") no-repeat center;width:623px;height:844px;right:0;bottom:0;zoom:0.9;}
.temple_hd h4 {color:#ff5c5f;font-size:40px;font-weight:700;}
.temple_hd h5 {color:#000;font-size:30px;font-weight:700;margin:40px 0;}
.temple_hd p.desc {font-size:18px;width:50%;line-height:1.8em;}
.temple_hd ul {margin-top:40px;}
.temple_hd h4 br {display:none;}

/*세계인쇄교류*/
.print_exch {position:relative;padding:8rem;box-sizing:border-box;background:#a17f6a url("/project/design/contents/bg_print_exch.png") no-repeat right center;background-size:auto 100%;}
.print_exch h4 {color:#fff;font-size:40px;font-weight:700;}
.print_exch h5 {color:#fff;font-size:30px;font-weight:700;margin:40px 0;}
.print_exch p.desc {font-size:18px;line-height:1.8em;color:rgba(255,255,255,0.8);}
.print_exch ul {margin-top:40px;}
.print_exch ul li {color:#fff;}

/*세계기록유산*/
.unesco_toul {position:relative;padding:8rem;box-sizing:border-box;background:#585959 url("/project/design/contents/bg_toul.jpg") no-repeat center;background-size:cover;}
.unesco_toul h4 {color:#fff;font-size:40px;font-weight:700;}
.unesco_toul h5 {color:#fff;font-size:30px;font-weight:700;margin:40px 0;}
.unesco_toul p.desc {font-size:18px;line-height:1.8em;color:rgba(255,255,255,0.8);}
.unesco_toul ul {margin-top:40px;}
.unesco_toul ul li {color:#fff;}
.unesco_toul .img_unesco_toul_logo {text-align:right;}

@media all and (max-width:1200px){
.temple_hd {padding:6rem;}
.temple_hd:after {zoom:0.8;}
.unesco_toul {padding:6rem;}
.print_exch {padding:6rem;}
}

@media all and (max-width:1024px){
.temple_hd {padding:4rem;background-position:95% 45%, center;min-height:auto;background-size:30%, cover;}
.temple_hd h4 {font-size:30px;}
.temple_hd h5 {font-size:24px;}
.temple_hd:after {zoom:0.45;}
.temple_hd p.desc {width:100%;font-size:16px;}
.temple_hd ul {padding-bottom:35%;}

.unesco_toul {padding:4rem;}
.unesco_toul h4 {font-size:30px;}
.unesco_toul h5 {font-size:24px;}
.unesco_toul p.desc {font-size:16px;}
.unesco_toul .img_unesco_toul_logo img {width:45%;}

.print_exch {padding:4rem;}
.print_exch h4 {font-size:30px;}
.print_exch h5 {font-size:24px;}
.print_exch p.desc {font-size:16px;}

.expe_desc h3{font-size:30px;}
.expe_desc p {margin:30px 0 60px 0;font-size:16px;}
}

@media all and (max-width:768px){
.temple_hd {padding:3rem;background-position:95% 60%, center;background-size:20%, cover;}
.temple_hd h4 {font-size:24px;}
.temple_hd h5 {font-size:20px;margin:30px 0;}
.temple_hd p.desc {font-size:14px;}
.temple_hd:after {zoom:0.3;}
.temple_hd:before {zoom:0.4;}

.unesco_toul {padding:3rem;}
.unesco_toul h4 {font-size:24px;}
.unesco_toul h5 {font-size:20px;margin:30px 0;}
.unesco_toul p.desc {font-size:14px;}

.print_exch {padding:3rem;}
.print_exch h4 {font-size:24px;}
.print_exch h5 {font-size:20px;margin:30px 0;}
.print_exch h5 br {display:none;}
.print_exch p.desc {font-size:14px;}
}

@media all and (max-width:600px){
.print_exch {background-image:none;background-size:40%;}
.temple_hd h4 br {display:block;}
.temple_hd h5 br {display:none;}

.unesco_toul h5 br {display:none;}
}

@media all and (max-width:500px){
.temple_hd {padding:2rem;background-position:95% 75%, center;}
.temple_hd:after {zoom:0.2;}
.temple_hd:before {zoom:0.3;}
.unesco_toul {padding:2rem;}
.print_exch {padding:2rem;}
}

@media all and (max-width:414px){
.temple_hd {background-position:95% 80%, center;}
}

.online_exhi_bottom {margin-top:60px;}
.online_exhi_bottom p {margin-top:20px;}

@media all and (max-width:768px){
.online_exhi_bottom {margin-top:30px;}
}


/*인사말*/
.greet_box {display:flex;gap:60px;padding:4.5rem 0;}
.greet_box p { width: 100%; font-size:1.125em;color:#222;line-height:1.6em;}
.greet_name {font-size:1.375em;color:#222;font-weight:800;}

@media all and (max-width:768px){
.greet_box {flex-wrap:wrap;gap:30px;padding:2rem 0;}
.greet_box p {font-size:1em;}
.greet_name {font-size:1.05em;}
}

.note_desc_box {display:flex;gap:10px;flex-wrap:wrap;}
.note_desc_box div {flex:1;border:1px solid #eee;box-sizing:border-box;padding:30px;flex-basis:40%;}
.note_desc_box div h4 i {font-size:26px;position:relative;top:3px;}

.note_desc_box2 {border:1px solid #eee;padding:4rem;}
.note_desc_box2 h4 i {font-size:26px;position:relative;top:3px;}


@media all and (max-width:1200px){
.note_desc_box2 ul li {flex-basis:100%;}
}

@media all and (max-width:1024px){
.note_desc_box div h4 i {font-size:22px;}
.note_desc_box2 {padding:3rem;}
.note_desc_box2 h4 i {font-size:22px;}
}

@media all and (max-width:768px){
.note_desc_box div h4 {top:2px;}
.note_desc_box div h4 i {font-size:20px;}
.note_desc_box div {flex-basis:100%;}
.note_desc_box2 {padding:2rem;}
.note_desc_box2 h4 i {font-size:20px;}
}

/*직지구경*/
.img_stamp {margin-top:30px;}
.img_stamp img, .img_stamp2 img {max-width:100%;}
.gaw_box { margin-top: 50px; background: url("/project/design/contents/bg_gaw.jpg") no-repeat center top / 100%; padding:50px 30px 70px 30px; display: flex; justify-content: space-around; align-items: center; gap: 50px;}

@media all and (max-width:1400px){
.gaw_box img { max-width: 360px;}
}

@media all and (max-width:768px){
.img_stamp {margin-top:15px;}
.gaw_box { flex-direction: column; justify-content:start; padding: 30px; gap: 20px;background: url("/project/design/contents/bg_gaw.jpg") repeat-y center top / 100%;}
.gaw_box img { max-width: 90%;}
}

@media all and (max-width:500px){
.gaw_box { padding: 20px;}
.gaw_box img { max-width: 100%; height: 280px;}    
}

@media all and (max-width:340px){
.gaw_box img { height: 200px;}    
}

@media all and (max-width:1024px){
.table_type1 td.inst_photo {padding:10px !important;}
.table_type1 td.inst_photo img {width:100%;}
}

div.partner_wrap ul{ display: grid; grid-template-columns: repeat(7,1fr); border-collapse:collapse; gap: 1.5rem;}
div.partner_wrap ul > li { text-align: center; padding: 0.2rem 0; font-weight: 700; color: #222; border: 1px solid rgb(250, 250, 250); position: relative; z-index: 2; border-radius: 10px; letter-spacing: -0.03rem;}
li.partner_shop { display:block; line-height:40px; border:1px #ff5f00 solid; background-color:#f8f8f8; text-align:center; color:#333; transition:all 0.9s, color 0.3; }
li.partner_shop:hover{ color:#fff; background:#ff5f00; transition: all .2s ease-in-out;}
b.b_gold{ color: #cdab5b;}

@media all and (max-width:1024px){    
div.partner_wrap ul{ grid-template-columns: repeat(5,1fr); }    
}

@media all and (max-width:600px){
div.partner_wrap ul{ grid-template-columns: repeat(2,1fr); }    
}


/* 0306_직지퀴즈 */
@font-face {
font-family: 'SBAggroB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* start */
.quiz_start_box { position: relative; height: 760px; background: url("/project/design/contents/bg_quiz1.png") no-repeat center top; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.quiz_start_box .top_box { height: 600px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.quiz_start_box .top_box h3 {font-family: 'SBAggroB'; font-size: 50px; color: #fff; display: flex; justify-content: center; align-items: center; gap: 10px;}
.quiz_start_box .top_box h3 span { transform: translate(0, -5px); line-height: 1em; padding:10px 10px 0 10px; background-color: #b68e53;}
.quiz_start_box .top_box p { font-size: 20px; color: rgba(255,255,255,0.8); padding: 10px 20px 50px 20px; text-shadow: 0 2px 5px rgba(0,0,0,0.8); text-align: center;}
.quiz_start_box .top_box a { font-size: 50px; color: #fff; font-weight: 900; box-sizing: border-box; border: 5px solid #fb5000; background-color: #fb5000; padding: 15px 120px; border-radius: 100px; box-shadow: 0 2px 10px rgba(0,0,0,0.3);}
.quiz_start_box .top_box a:hover { background-color:rgba(0,0,0,0.3); color: #fb5000;}
.quiz_start_box .bottom_box { border: 1px solid #e9e9e9; border-top: 0; border-bottom: 0; height: 160px; width: 100%; box-sizing: border-box; background-color: #fff; display: flex; justify-content: center; align-items: center; gap: 40px;}
.quiz_start_box .bottom_box h4 { font-weight: 600; color: #000;}
.quiz_start_box .bottom_box ul > li::before { content: "- ";}
.quiz_start_box .bottom_box ul > li span { color: #fb5000;}
.quiz_start_box .img1 { position: absolute; left: 0; bottom: 30px;}
.quiz_start_box .img2 { position: absolute; right: 0; bottom: 30px;}

/* 경품안내 */
.quiz_kodac { background: url("/project/design/contents/bg_kodac.jpg") no-repeat center bottom / cover; display: flex; justify-content:center; align-items: center; padding: 60px; gap: 120px;}
.quiz_kodac .desc_box h4 { font-family: 'SBAggroB'; font-size: 50px; color: #000;line-height: 1em;}
.quiz_kodac .desc_box p { line-height: 1em; padding:10px 10px 5px 10px; background-color: #fff; color: #fb5000;font-family: 'SBAggroB'; font-size: 30px; margin: 20px 0;}
.quiz_kodac .desc_box ul > li::before { content: "- ";}
.quiz_kodac .desc_box ul > li { color: #333;}
.quiz_kodac .desc_box ul > li span { color: #fb5000;}

@media all and (max-width:1200px){
.quiz_start_box .bottom_box { flex-direction: column; gap: 10px;}
.quiz_start_box .img1 img { height: 260px;}
.quiz_start_box .img2 img { height: 260px;}

.quiz_kodac { gap: 60px;}
.quiz_kodac .desc_box h4 { font-size: 45px;}
.quiz_kodac .desc_box p { font-size: 25px;}
}
@media all and (max-width:800px){
.quiz_start_box { height: 460px; background: url("/project/design/contents/bg_quiz1.png") no-repeat center top / cover;}
.quiz_start_box .top_box { height: 340px;}
.quiz_start_box .top_box h3 {font-size: 32px;}
.quiz_start_box .top_box p { font-size: 16px; padding: 10px 20px 30px 20px; }
.quiz_start_box .top_box a { font-size: 32px; border: 3px solid #fb5000; padding: 10px 60px;}
.quiz_start_box .bottom_box { height: 120px;}
.quiz_start_box .img1 { bottom: 90px;}
.quiz_start_box .img1 img { height: 200px;}
.quiz_start_box .img2 { bottom: 90px;}
.quiz_start_box .img2 img { height: 200px;}

.quiz_kodac { padding: 30px; gap: 40px;}
.quiz_kodac .desc_box h4 { font-size: 35px;}
.quiz_kodac .desc_box p { font-size: 20px;}
}
@media all and (max-width:600px){
.quiz_start_box { height: auto;}
.quiz_start_box .top_box { height: 440px; justify-content: flex-start; padding-top: 50px;}
.quiz_start_box .top_box h3 { flex-direction: column; font-size: 28px;}
.quiz_start_box .top_box p { font-size: 14px;}
.quiz_start_box .top_box a { font-size: 28px; padding: 10px 30px;}
.quiz_start_box .bottom_box { height: auto; padding: 30px;}
.quiz_start_box .img1 { bottom: auto; top: 310px;}
.quiz_start_box .img2 { bottom: auto; top: 310px;}

.quiz_kodac { padding: 30px; gap: 20px; flex-direction: column;}
.quiz_kodac .img_box img { height: 180px;}
.quiz_kodac .desc_box { text-align: center;}
.quiz_kodac .desc_box h4 { font-size: 28px;}
}

/* 2 */
.quiz_box .top_box { height: 280px; position: relative; background: url("/project/design/contents/bg_quiz2.png") no-repeat center top / cover; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow:hidden;}
.quiz_box .top_box h3 {font-family: 'SBAggroB'; font-size: 34px; color: #000; display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px;}
.quiz_box .top_box h3 span { color: #b68e53;}
.quiz_box .top_box p { text-align: center;}
.quiz_box .top_box ul > li::before { content: "- ";}
.quiz_box .top_box ul > li span { color: #fb5000;}
.quiz_box .top_box .img1 { position: absolute; left: 0; bottom: -80px;}
.quiz_box .top_box .img1 img { height: 280px;}
.quiz_box .top_box .img2 { position: absolute; right: 15px; bottom: -80px;}
.quiz_box .top_box .img2 img { height: 280px;}

.quiz_box .page_box { border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; transform: translate(0, -33px); display: flex; justify-content: flex-end; align-items: center;}
.quiz_box .page_box ul { display:flex; gap: 10px;}
.quiz_box .page_box ul > li { width: 46px; height: 46px; display: flex; justify-content: center; align-items: center; border: 2px solid #e9e9e9; background-color: #fff; color: #a4a4a4; font-size: 19px; font-weight: 900; border-radius: 100%;}
.quiz_box .page_box ul > li.on { background-color: #b79150; border: 2px solid #b79150; color: #fff;}
.quiz_box .page_box .timeout_box { margin:0 50px; font-size: 20px; color: #fff; font-weight: 700; background-color: #fb5000; padding: 15px 30px; width: 200px; border-radius: 100px;  display: flex; justify-content: center; align-items: center; gap: 15px;}
.quiz_box .page_box .timeout_box span { font-weight: 900; font-size: 26px;}

.quiz_box .question_box { transform: translate(0, -33px); border: 1px solid #e9e9e9; border-top: 0; padding: 50px;}
.quiz_box .ul_ques > li { border-bottom:2px dashed #e9e9e9; padding-top: 30px;}
.quiz_box .ul_ques > li .p_qu { font-size: 22px; font-weight: 800; color: #000; display: flex; gap: 20px; align-items: center;}
.quiz_box .ul_ques > li .p_qu span { font-size: 20px; color: #fb5000;}
.quiz_box .ul_ques > li .example { padding: 30px 0; display: flex; gap: 10px;}
.quiz_box .ul_ques > li .example a, .quiz_box .ul_ques > li .example span { border: 2px solid #dbdbdb; padding: 10px 40px; color: #666; font-size: 20px; font-weight: 700; border-radius: 30px; box-sizing: border-box;}
.quiz_box .ul_ques > li .example a:hover {border: 2px solid #b68e53; color: #b68e53;}
.quiz_box .ul_ques > li .example a.on { border: 2px solid #b68e53; background-color: #b68e53; color: #fff;}
.quiz_box .ul_ques > li .example .correct { border: 2px solid #fb5000; background-color: #fb5000; color: #fff;}
.quiz_box .ul_ques > li .example .wrong { border: 2px solid #b68e53; background-color: #b68e53; color: #fff;}

.quiz_box .question_box .btn_qu_box { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 50px;}
.quiz_box .question_box .btn_qu_box a { background-color: #ebebeb; color: #000; font-size: 20px; font-weight: 800; padding: 20px 50px; display: flex; align-items: center; gap: 10px;}
.quiz_box .question_box .btn_qu_box a.on { background-color: #000; color: #fff;}

@media all and (max-width:1200px){
.quiz_box .top_box { height: 240px;}
.quiz_box .page_box { transform: translate(0, -25px); justify-content: center; gap: 10px;}
.quiz_box .page_box ul { gap: 5px;}
.quiz_box .page_box ul > li { width: 36px; height: 36px; font-size: 17px;}
.quiz_box .page_box .timeout_box { margin:0; font-size: 18px; padding: 10px 20px; gap: 10px;}
.quiz_box .page_box .timeout_box span { font-size: 22px;}
.quiz_box .top_box .img1 img { height: 220px;}
.quiz_box .top_box .img2 img { height: 220px;}
.quiz_box .question_box { transform: translate(0, -25px);padding: 30px;}
.quiz_box .ul_ques > li .p_qu { font-size: 19px; gap: 10px;}
.quiz_box .ul_ques > li .p_qu span { font-size: 17px; flex-basis: 60px; width: 60px;}
.quiz_box .ul_ques > li .example { padding: 20px 0;}
.quiz_box .ul_ques > li .example a, .quiz_box .ul_ques > li .example span { padding: 10px 30px; font-size: 17px;}
.quiz_box .question_box .btn_qu_box {gap: 10px; margin-top: 30px;}
.quiz_box .question_box .btn_qu_box a { font-size: 18px; padding: 15px 30px;}
}
@media all and (max-width:800px){
.quiz_box .top_box { justify-content: flex-start; padding: 50px 20px 150px 20px; height: auto;}
.quiz_box .top_box h3 { font-size: 28px; flex-direction: column; text-align: center; gap: 0;}
.quiz_box .page_box { transform: translate(0, -16px); gap: 3px;}
.quiz_box .page_box ul { gap: 3px;}
.quiz_box .page_box ul > li { width: 28px; height: 28px; font-size: 14px; border: 1px solid #e9e9e9;  box-sizing: border-box; font-weight: 500; letter-spacing: -0.05em;}
.quiz_box .page_box ul > li.on { border: 1px solid #b79150;}
.quiz_box .page_box .timeout_box { font-size: 15px; padding: 2px 10px 0 10px; line-height: 1em; height: 36px; box-sizing: border-box; gap: 5px;}
.quiz_box .page_box .timeout_box span { font-size: 17px;}
.quiz_box .ul_ques > li .example { flex-wrap: wrap;}
}
@media all and (max-width:600px){
.quiz_box .page_box { gap: 10px;flex-direction: column;}
.quiz_box .page_box .timeout_box { width: 80%;}
.quiz_box .ul_ques > li .p_qu { font-size: 17px; flex-direction: column; text-align: center; }
.quiz_box .ul_ques > li .p_qu span {flex-basis: auto; width: auto;}
.quiz_box .ul_ques > li .example { align-items: center; gap: 5px;}
.quiz_box .ul_ques > li .example a, .quiz_box .ul_ques > li .example span { flex: 1 1 40%; padding: 10px; text-align: center; font-size: 15px;}
.quiz_box .question_box .btn_qu_box a { font-size: 16px; padding: 10px 30px;}
}

/* 3 */
.quiz_box .top_box h3.h_quiz { font-size: 45px; padding-top: 40px;}
.ans_box { display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: 20px;}
.ans_box p {display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 20px; color: #000; font-weight: 700;}
.ans_box p i { width: 25px; height: 25px; border-radius: 100%; display: inline-block;}
.ans_box .correct i { background-color:#fb5000;}
.ans_box .wrong i { background-color:#b79150;}

.tab_type_qu { padding: 30px 0 50px 0;}
.tab_type_qu > ul { display: flex; justify-content: center; align-items: center;}
.tab_type_qu > ul > li + li { border-left: 1px solid #d8d8d8;}
.tab_type_qu > ul > li > a { display: flex; align-items: center; gap: 15px; font-size: 30px; font-weight: 800; color: #c7c7c7; padding: 0 60px;}
.tab_type_qu > ul > li > a i { font-size: 50px;}
.tab_type_qu > ul > li > a.on { color: #000;}

@media all and (max-width:800px){
.quiz_box .top_box h3.h_quiz { font-size: 30px; padding-top: 0;}
.ans_box p {font-size: 16px;}
.ans_box p i { width: 20px; height: 20px;}
.tab_type_qu { padding: 20px 0 10px 0;}
.tab_type_qu > ul > li > a { gap: 10px; font-size: 24px; padding: 0 30px;}
.tab_type_qu > ul > li > a i { font-size: 30px;}
}
@media all and (max-width:600px){
.tab_type_qu > ul > li > a {  gap: 5px; font-size: 20px; padding: 0 10px;}
.tab_type_qu > ul > li > a i { font-size: 24px;}
}