@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

/*===================== reset =====================*/
*{margin:0px; padding:0px; box-sizing:border-box; font-size:12px; word-break:keep-all; font-family:'Noto Sans KR', sans-serif;}
body{background:#1e1e1e;}
ol,ul,li{list-style:none;}
table{border-collapse:collapse;}
a{text-decoration:none;}
img{border:none;}
ol,ul,li,span,a,img{display:inline-block;}
video{margin-top:30px;}
:root {
    --fz2: 1.8rem;
    --fz3: 1.4rem;
    --fz4: 1.2rem;
    --fz5: 0.9rem;
    --fz3-ch: 1.3rem;
    --mb-pc100: 50px;
    --fc-gray: #7d7d7d;
    --btn-on: #5b96e8;
    --btn-off: #494e54;
    --line30: 1px solid #343434;
    --bg-page: #1e1e1e;
}
@media (min-width:1000px){
    *{font-size:16px;}
    :root{
        --mb-pc100:100px;
        --fz2:1.7rem;
        --fz3:1.5rem;
        --fz3-ch:1.4rem;
        --fz5: 0.8rem;
    }
}
.mg-desc{margin:30px 0px 15px;}
.mg-desc select{border:none; color:#fff; background:var(--bg-page);}
.mb20{margin-bottom:20px;}

.al{text-align:left;}
.ac{text-align:center;}

.flex-CB{display:flex; align-items:center; justify-content:space-between;}
.blind{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.fz3{font-size:var(--fz3);}
.desc{color:var(--fc-gray);}

.i-more{width:12px;}
.btn-back{width:16px; height:41px; background:url('../images/btn_back.png') center no-repeat; background-size:100%;}
.btn-srch{width:32px; height:41px; background:url('../images/btn_srch.png') center no-repeat; background-size:100%;}
.box-srch .btn-srch{padding:5px; width:50px; height:28px; border-radius:5px; background-color:var(--btn-on); background-size:45%;}
.box-srch .btn-play{padding:5px; width:50px; height:28px; background:url('../images/btn_play.png') center no-repeat; border-radius:5px; background-color:var(--btn-on); background-size:26%;}
@media (min-width:500px){
    .i-more{width:18px;}
}
@media (min-width:1000px){
    .btn-back{width:26px;}
    .btn-srch{width:42px;} 
    .box-srch .btn-srch{height:35px;}
    .box-srch .btn-play{height:35px; background-size:30%;}
}
span.list-caution, ul.list-caution li{display:block; position:relative; padding-left:10px;}
span.list-caution::before, ul.list-caution li::before{position:absolute; left:0px;}
span.list-caution.star::before, ul.list-caution.star li::before{content:'*';}
span.list-caution.dot::before, ul.list-caution.dot li::before{content:'·';}

/*===================== main =====================*/
main{position:relative; padding:50px 0px 100px; width:100%; min-height:100vh; background:url('../images/bg_main.jpg');}
main h1{margin-bottom:var(--mb-pc100);}
main h1 img{width:70%;}
main > section{position:relative; z-index:1; padding:10% 4%; width:100%;}
main > article{position:absolute; left:0px; bottom:0px; z-index:0; padding-bottom:50px; width:100%;}
main > article::before{content:''; position:absolute; bottom:50px; width:100%; height:2px; background:#676767;}
main > article div{margin:0px auto; width:80%; max-width:1000px; height:500px; background:url('../images/main_acc.jpg') center bottom no-repeat; background-size:100%;}
main .btn{padding:15px; border-radius:15px;}
.btn-lang{padding-left:100px; margin-bottom:20px; width:100%; background:#966c16; color:#fff; font-size:1.2em;}
.btn-lang .icon{margin-right:20px; width:50px; height:50px; background:url('../images/icon_language.png') no-repeat; background-size:contain;}
.btn-lang .en{margin-left:10px; opacity:0.7; font-weight:400;}
.area-btn{display:flex; flex-wrap:wrap; justify-content:space-between;}
.area-btn a{width:49%; text-align:center; color:#fff; font-size:var(--fz3); background:#979797;}
.area-btn a:first-child{margin-bottom:20px; background:#3982e9;}
.area-btn a:nth-child(2){margin-bottom:20px; background:#ee6636;}

.area-btn a span{width:100%; height:60px;}
.area-btn a:nth-child(1) span{background:url('../images/main_btn_1.png') center no-repeat; background-size:50%;}
.area-btn a:nth-child(2) span{background:url('../images/main_btn_2.png') center no-repeat; background-size:50%;}
.area-btn a:nth-child(3) span{background:url('../images/main_btn_3.png') center no-repeat; background-size:70%;}
.area-btn a:nth-child(4) span{background:url('../images/main_btn_4.png') center no-repeat; background-size:30%;}

@media (min-width:500px){
    main h1 img{width:50%;}
    main > article::before{height:4px;}
    main > article div{background-size:70%;}
   .area-btn a span{height:110px;}
   .area-btn a:nth-child(n) span{background-size:40%;}
   .area-btn a:nth-child(3) span{background-size:60%;}
   .area-btn a:nth-child(4) span{background-size:20%;}
}
@media (min-width:1000px){
    main > section{padding-top:50px; margin:0px auto; width:1000px;}
    main h1{margin-bottom:var(--mb-pc100);}
    main .btn{padding:30px; border-radius:15px;}
}
/*코드 정리 필요*/
.wrap-pop{display:none; position:fixed; top:0px; left:0px; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.8); text-align:center;}
.wrap-pop > div{padding:30px; margin:100px auto; width:60%; background:#fff;}
.wrap-pop p{font-size:var(--fz4);}
.wrap-pop span{display:block; margin-bottom:10px; font-size:var(--fz5);}
.wrap-pop select{padding:10px; width:80%;}

.btn-close{margin:10px auto 0px; padding:10px; min-width:70px; border-radius:10px; color:#fff; background:var(--fc-gray);}


/*===================== sub-pages =====================*/
header{position:sticky; top:0px; z-index:999; border-bottom:var(--line30); padding:10px 0px; background:var(--bg-page);}
header > div, nav > div{width:100%; text-align:center;}
header > div{display:flex; align-items:center; padding:0px 20px;}
header h2{width:90%; font-size:var(--fz4); color:#fff; font-weight:500;}
header .btn_back{width:10%;}

#wrapper{padding:20px; width:100%;}

nav{position:fixed; z-index:999; bottom:0px; padding:10px; width:100%; background:#2b2b2b;}
nav > div{display:flex; justify-content:space-between;}
nav a{padding-top:35px; width:24%; color:#bebebe; background-repeat:no-repeat !important; background-size:contain !important; background-position:center top !important; font-size:var(--fz5);}
nav a:nth-child(1){background:url('../images/menu_1_off.jpg');}
nav a:nth-child(2){background:url('../images/menu_2_off.jpg');}
nav a:nth-child(3){background:url('../images/menu_3_off.jpg');}
nav a:nth-child(4){background:url('../images/menu_4_off.jpg');}
nav a:nth-child(1).on{background:url('../images/menu_1_on.jpg');}
nav a:nth-child(2).on{background:url('../images/menu_2_on.jpg');}
nav a:nth-child(3).on{background:url('../images/menu_3_on.jpg');}
nav a:nth-child(4).on{background:url('../images/menu_4_on.jpg');}

nav a.on{color:#fff;}
@media (min-width:360px){
    nav a{padding-top:45px;}
}
@media (min-width:400px){
    nav a{padding-top:40px; background-size:70% !important;}
}
@media (min-width:500px){
    nav a{padding-top:45px;}
}
@media (min-width:700px){
    nav a{padding-top:60px; background-size:60% !important;}
}
@media (min-width:840px){
    nav a{padding-top:80px;}
}
@media (min-width:1000px){
    header{padding:20px 0px;}
    header > div, nav > div{margin:0px auto; width:1000px;}
    #wrapper{margin:0px auto; width:1000px;}
}

.tab a{padding:10px 20px; color:#fff; border-radius:10px; background:var(--btn-off);}
.tab a.on{background:var(--btn-on);}
.tab a + a{margin-left:10px;}
/*
.list-thumb{width:100%;}
.list-thumb{width:100%;}
.list-thumb li{display:flex; padding:10px 0px; width:100%; border-top:var(--line30);}
.list-thumb li:first-child{border-top:none;}
.list-thumb li > span:nth-child(1){width:30%; text-align:center; overflow:hidden; background:#000;}
.list-thumb li > span:nth-child(2){padding:5px 0px 0px 10px; width:70%; color:var(--fc-gray);}
.list-thumb li > span a{font-size:var(--fz4); color:#fff;}
.list-thumb span span{display:block; margin-bottom:5px;}
.list-thumb li img{width:auto; max-height:100px;}
*/
.srch-thumb{display:flex; flex-wrap:wrap;}
.srch-thumb > p{width:50%;}
.srch-thumb > p > span:first-child{display:block; height:150px; text-align:center; background:#000; overflow:hidden;}
.srch-thumb > p > span:nth-child(2){padding:10px;}
.srch-thumb span span{display:block; color:var(--fc-gray);}
.srch-thumb img{width:auto; height:100%;}
.box-srch{display:flex; justify-content: center; margin:20px; text-align:center;}
.box-srch label{width:60%; margin-right:5px;}
.box-srch input[type="text"]{border:0px; padding:5px; width:100%; border-radius:5px;}
@media (min-width:1000px){
  div.srch-thumb > p{width:33%;}  
}
/*audio*/
.audio-player {
    --player-button-width: 2.5em;
    --sound-button-width: 2em;
    --space: .5em;
    width: 100%;
}
.controls {display: flex;flex-direction: row; align-items: center;margin-top: 10px;width: 100%;}
.player-button {border: 0; padding: 0;margin-right: 10px;
width: var(--player-button-width);height: var(--player-button-width);background-color: transparent;cursor: pointer;}
.timeline {margin-right: var(--space);-webkit-appearance: none;
width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));height: .5em;
background-color: #666;border-radius: 5px;background-size: 0% 100%;background-image: linear-gradient(#71b1ff, #71b1ff);background-repeat: no-repeat;}
.timeline::-webkit-slider-thumb {-webkit-appearance: none; width: 1em;height: 1em;border-radius: 50%;cursor: pointer;opacity: 0;transition: all .1s;background-color: #5e8cc4;}
.timeline::-moz-range-thumb {-webkit-appearance: none; width: 1em; height: 1em; border-radius: 50%;cursor: pointer;opacity: 0;transition: all .1s; background-color: #5e8cc4;}
.timeline::-ms-thumb {-webkit-appearance: none;width: 1em;height: 1em;border-radius: 50%;cursor: pointer; opacity: 0;transition: all .1s;background-color: #5e8cc4;}
.timeline::-webkit-slider-thumb:hover {background-color: #4a7cb9;}
.timeline:hover::-webkit-slider-thumb {opacity: 1;}
.timeline::-moz-range-thumb:hover {background-color: #943f65;}
.timeline:hover::-moz-range-thumb {opacity: 1;}
.timeline::-ms-thumb:hover {background-color: #943f65;}
.timeline:hover::-ms-thumb {opacity: 1;}
.timeline::-webkit-slider-runnable-track {-webkit-appearance: none;box-shadow: none;border: none; background: transparent;}
.timeline::-moz-range-track{-webkit-appearance: none; box-shadow: none; border: none; background: transparent;}
.timeline::-ms-track {-webkit-appearance: none; box-shadow: none; border: none; background: transparent;}
.sound-button{background-color: transparent;border: 0; width: var(--sound-button-width); height: var(--sound-button-width); cursor: pointer;padding: 0;}@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

/*===================== reset =====================*/
*{margin:0px; padding:0px; box-sizing:border-box; font-size:12px; word-break:keep-all; font-family:'Noto Sans KR', sans-serif;}
body{background:#1e1e1e;}
ol,ul,li{list-style:none;}
table{border-collapse:collapse;}
a{text-decoration:none;}
img{border:none;}
ol,ul,li,span,a,img{display:inline-block;}

:root {
    --fz2: 1.8rem;
    --fz3: 1.4rem;
    --fz4: 1.2rem;
    --fz5: 0.9rem;
    --fz3-ch: 1.3rem;
    --mb-pc100: 50px;
    --fc-gray: #7d7d7d;
    --btn-on: #5b96e8;
    --btn-off: #494e54;
    --line30: 1px solid #343434;
    --line-brown: 1px solid #af904e;
    --bg-page: #1e1e1e;
}
@media (min-width:1000px){
    *{font-size:16px;}
    :root{
        --mb-pc100:100px;
        --fz2:1.7rem;
        --fz3:1.5rem;
        --fz3-ch:1.4rem;
        --fz5: 0.8rem;
    }
}
.p-layout{padding:20px 20px 120px;}
.mg-desc{margin:30px 0px 15px;}
.mg-desc select{border:none; color:#fff; background:var(--bg-page);}

.flex-CB{display:flex; align-items:center; justify-content:space-between;}
.blind{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.fz3{font-size:var(--fz3);}
.desc{color:var(--fc-gray);}
.line-b-brown{border-bottom:var(--line-brown);}

.i-more{width:12px;}
.btn-back{width:16px; height:41px; background:url('../images/btn_back.png') center no-repeat; background-size:100%;}

@media (min-width:500px){
    .i-more{width:18px;}
}
@media (min-width:1000px){
    .btn-back{width:26px;}
}



/*===================== main =====================*/
main{position:relative; padding:50px 0px 100px; width:100%; min-height:100vh; background:url('../images/bg_main.jpg');}
main h1{margin-bottom:var(--mb-pc100);}
main h1 img{width:70%;}
main > section{position:relative; z-index:1; padding:10% 4%; width:100%;}
main > article{position:absolute; left:0px; bottom:0px; z-index:0; padding-bottom:50px; width:100%;}
main > article::before{content:''; position:absolute; bottom:50px; width:100%; height:2px; background:#676767;}
main > article div{margin:0px auto; width:80%; max-width:1000px; height:500px; background:url('../images/main_acc.jpg') center bottom no-repeat; background-size:100%;}
main .btn{padding:15px; border-radius:15px;}
.btn-lang{padding-left:100px; margin-bottom:20px; width:100%; background:#966c16; color:#fff; font-size:1.2em;}
.btn-lang .icon{margin-right:20px; width:50px; height:50px; background:url('../images/icon_language.png') no-repeat; background-size:contain;}
.btn-lang .en{margin-left:10px; opacity:0.7; font-weight:400;}
.area-btn{display:flex; flex-wrap:wrap; justify-content:space-between;}
.area-btn a{width:49%; text-align:center; color:#fff; font-size:var(--fz3); background:#979797;}
.area-btn a:first-child{margin-bottom:20px; background:#3982e9;}
.area-btn a:nth-child(2){margin-bottom:20px; background:#ee6636;}

.area-btn a span{width:100%; height:60px;}
.area-btn a:nth-child(1) span{background:url('../images/main_btn_1.png') center no-repeat; background-size:50%;}
.area-btn a:nth-child(2) span{background:url('../images/main_btn_2.png') center no-repeat; background-size:50%;}
.area-btn a:nth-child(3) span{background:url('../images/main_btn_3.png') center no-repeat; background-size:70%;}
.area-btn a:nth-child(4) span{background:url('../images/main_btn_4.png') center no-repeat; background-size:30%;}

@media (min-width:500px){
    main h1 img{width:50%;}
    main > article::before{height:4px;}
    main > article div{background-size:70%;}
   .area-btn a span{height:110px;}
   .area-btn a:nth-child(n) span{background-size:40%;}
   .area-btn a:nth-child(3) span{background-size:60%;}
   .area-btn a:nth-child(4) span{background-size:20%;}
}
@media (min-width:1000px){
    main > section{padding-top:50px; margin:0px auto; width:1000px;}
    main h1{margin-bottom:var(--mb-pc100);}
    main .btn{padding:30px; border-radius:15px;}
}

/*===================== sub-pages =====================*/
header{position:sticky; top:0px; z-index:999; border-bottom:var(--line30); padding:10px 0px; background:var(--bg-page);}
header > div, nav > div{width:100%; text-align:center;}
header > div{display:flex; align-items:center; padding:0px 20px;}
header h2{width:90%; font-size:var(--fz4); color:#fff; font-weight:500;}
header .btn_back{width:10%;}

#wrapper{padding:20px; width:100%;}

nav{position:fixed; z-index:999; bottom:0px; padding:10px; width:100%; background:#2b2b2b;}
nav > div{display:flex; justify-content:space-between;}
nav a{padding-top:35px; width:24%; color:#bebebe; background-repeat:no-repeat !important; background-size:contain !important; background-position:center top !important; font-size:var(--fz5);}
nav a:nth-child(1){background:url('../images/menu_1_off.jpg');}
nav a:nth-child(2){background:url('../images/menu_2_off.jpg');}
nav a:nth-child(3){background:url('../images/menu_3_off.jpg');}
nav a:nth-child(4){background:url('../images/menu_4_off.jpg');}
nav a:nth-child(1).on{background:url('../images/menu_1_on.jpg');}
nav a:nth-child(2).on{background:url('../images/menu_2_on.jpg');}
nav a:nth-child(3).on{background:url('../images/menu_3_on.jpg');}
nav a:nth-child(4).on{background:url('../images/menu_4_on.jpg');}

nav a.on{color:#fff;}
@media (min-width:360px){
    nav a{padding-top:45px;}
}
@media (min-width:400px){
    nav a{padding-top:40px; background-size:70% !important;}
}
@media (min-width:500px){
    nav a{padding-top:45px;}
}
@media (min-width:700px){
    nav a{padding-top:60px; background-size:60% !important;}
}
@media (min-width:840px){
    nav a{padding-top:80px;}
}
@media (min-width:1000px){
    header{padding:20px 0px;}
    header > div, nav > div{margin:0px auto; width:1000px;}
    #wrapper{margin:0px auto; width:1000px;}
}

.tab a{padding:10px 20px; color:#fff; border-radius:10px; background:var(--btn-off);}
.tab a.on{background:var(--btn-on);}
.tab a + a{margin-left:10px;}

.list-thumb{width:100%;}
.list-thumb li{display:flex; padding:10px 0px; width:100%; border-top:var(--line30);}
.list-thumb li:first-child{border-top:none;}
.list-thumb li > span:nth-child(1){display:flex; align-items:center; width:30%; text-align:center; overflow:hidden; background:#000;}
.list-thumb li > span:nth-child(2){padding:5px 0px 0px 10px; width:70%; color:var(--fc-gray);}
.list-thumb li > span a, .srch-thumb a{font-size:var(--fz4); color:#fff;}
.list-thumb span span{display:block; margin-bottom:5px;}
.list-thumb li img{width:100%; height:auto; /*max-height:100px;*/}

.wrap-slide, .wrap-con > dl, .wrap-con > div{padding:0px 20px; width:100%;}
.wrap-slide, .wrap-con > dl dd{word-break:break-word;}
.wrap-con{padding:30px 0px 100px 0px; width:auto; background:#fff; min-height:60vh;}
.title{display:block; font-size:var(--fz3);}
.title-sub{display:block; font-size:var(--fz3-ch);}
.add{margin:10px 0px; font-size:var(--fz5);}
@media (min-width:1000px){
    .wrap-con{padding:30px 0px 150px 0px;}
    section, .wrap-slide, .wrap-con > dl, .wrap-con > div{margin:0 auto; width:1000px;}
}
.content-img{padding:20px 0px; background:#000;}


 .con-history{display:block; padding-bottom:120px;}
 .con-history li{display:flex; flex-wrap:wrap;}
 .con-history li > b{position:relative; border-right:2px solid #494949; padding-top:30px; width:30%; font-size:var(--fz4); color:#5f8bc8; text-align:center;}
 .con-history li > span{position:relative; padding:0px 20px; margin:15px 0px; width:70%; background:url('../images/dot_2px.gif') center repeat-x;}
 .con-history li > span::before{content:''; position:absolute; top:39%; left:-6px;
  width:12px; height:12px; background:#707070; border-radius:12px;}
 .con-history li > span.first::before{background:#7591b9;}
 .con-history li > span span{border:2px solid #5c5c5c; padding:15px; background:#282828; color:#e0e0e0; border-radius:20px;}

.introduce p{padding:20px; margin-bottom:20px; border-radius:10px; background:#e7e0d2; font-size:var(--fz3);}
.introduce{padding:20px; margin-bottom:50px;}
.introduce b{font-size:var(--fz3);}
.introduce{font-size:var(--fz4);}

.box-info {padding:20px 0px; background:#a98740;}
.box-info > div {display:flex; flex-wrap:wrap;width:100%;}

.box-info > div div{padding:20px; width:50%; font-size:var(--fz3); color:#fff;}
.box-info h4{display:flex; margin-bottom:10px; color:#e5dbc6; font-weight:500;}
.box-info h4 img{margin-right:10px;}
.box-info span{display:block; margin-top:5px; font-size:var(--fz5); color:#e5dbc6;}

.info dt, .info dd{display:block;}
.info dt{margin-bottom:5px; font-weight:bold;}
.info dd{margin-bottom:20px;}

@media (min-width:1000px){
    .box-info > div {margin:0px auto; width:1000px;}
}