@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* font-family: 'Nanum Gothic', serif; */
@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css); /* font-family: 'Nanum Square', sans-serif; */
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css); /* font-family: 'Noto Sans Korean', sans-serif !important; */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* font-family : 'Pretendard Variable'*/

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css);

/* 초기화 */
html {overflow-y:scroll; width:100%; height:100%;  word-break: break-all;}
body {margin:0;padding:0;font-size:0.75em;font-family: 'NanumSquareAc', serif; height:100%; text-align: justify; word-break: break-all; min-width:1920px;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'NanumSquareAc', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family: 'NanumSquareAc', serif;font-size:1em}
input[type="submit"]{cursor:pointer}
button {cursor:pointer}

textarea, select {font-family: 'NanumSquareAc', serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	
}

 

.placeholdersjs { color: #aaa !important; }

input[type=text],input[type=password], textarea {outline:none;}
input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {outline:none;}


::selection {background:#000; color:#fff;}
::-moz-selection {background:#000; color:#fff;}




/* 서브페이지 상단 주제 */
.sub_title { display:inline-block; width:100%; text-align:center;}
.sub_title li.title_section { display:inline-block; width:100%; max-width:1200px; padding:150px 0 0 0;}
.sub_title li.title_section img.s_title {}
.sub_title li.audio {width:100%; padding:90px 0;}
.sub_title li.audio span.audio { display:inline-block; width:auto;}

.contents { display:inline-block; width:100%;}
.contents li.sub_section {width:100%; max-width:1200px; min-width:1200px; margin:0 auto; padding:0px 0 0 0;}
.contents li.section_1 {width:100%; padding:155px;}
.contents li.section_2 {width:100%; text-align:center;}

.contents span.con_box { display:inline-block; width:100%; max-width:1400px; padding: 0 50px; margin:0 auto; text-align:left;}
.contents span.con_box_mgt {margin:70px 0;}



/* 폼 스타일 */
.form_mb15 {display:inline-block; margin-bottom:15px !important;}
.form_mb30 {display:inline-block; margin-bottom:30px !important;}
.form_mb65 {display:inline-block; margin-bottom:65px !important;}
.form_mb90 {display:inline-block; margin-bottom:90px !important;}

.text_pb10 {padding-bottom:10px;}
.text_pt70 {padding-top:70px !important;}
.text_pt110 {padding-top:110px;}
.text_ptb120 {padding-top:120px; padding-bottom:120px;}

.text_form_1 {display:inline-block; width:100%; padding:0 45px; font-size:2rem; line-height:170%; }
.text_form_1_1 {display:inline-block; width:100%; padding:0 25px; font-size:2rem; line-height:170%;}
.text_form_2 {display:inline-block; width:100%; padding:0 45px; font-size:3rem; font-weight:bold; line-height:170%; padding-bottom:10px;}
.text_form_3 {display:inline-block; width:100%; padding:0 45px; font-size:1.8rem; line-height:170%; color:#292929;}
.text_form_4 {display:inline-block; width:100%; padding:0 45px; font-size:2.3rem; line-height:170%; color:#292929;}
.text_form_question {display:inline-block; width:100%; padding:10px 25px; font-size:2.35rem; line-height:170%; color:#292929; background:#ddd; border-radius:10px;}
.text_form_question2 {display:inline-block; width:auto; padding:10px 25px; font-size:2.35rem; line-height:170%; color:#292929; background:#ddd; border-radius:10px;}
.text_form_answer2 {display:inline-block; width:auto; padding:10px 25px; font-size:2.35rem; line-height:170%; color:#292929; background:#efefef; border-radius:10px;}
.text_form_info { display:inline-block; width:100%; font-size:2rem; padding:5px 35px 0 0;}
.text_center { text-align:center;}
.text_right { text-align:right;}



.img_form {display:flex; justify-content: space-between; width:100%; align-items: flex-start; /* 기본값: 높이 맞춤 */}
.img_form img { position:relative; display:block; width:auto; float:left;}
img.h200 {height:200px;}
img.h250 {height:250px;}
img.h285 {height:285px;}
img.h330 {height:330px;}
img.h370 {height:370px;}
img.h375 {height:375px;}
img.h400 {height:400px;}
img.h420 {height:420px;}
img.h485 {height:485px;}
img.h490 {height:490px;}
img.h520 {height:520px;}
img.h540 {height:540px;}
img.h570 {height:570px;}
img.h870 {height:870px;}


/* Player Skin */
.music-player {background: #f3f3f3; padding:40px 80px 20px 80px; border-radius:100px; display:flex; flex-direction:column; align-items:center; width:550px;}
.progress-bar {width: 100%; height: 5px; background: #ccc; border-radius: 5px; position: relative; margin-bottom: 10px;}
.progress {height: 5px; background: #333; width: 0%; border-radius: 5px;}
.time {width: 100%; display: flex; justify-content: space-between; font-size: 14px; margin-bottom:0px;}
.controls {display: flex; gap: 30px;}
.controls button {background: none; border: none; font-size: 40px; cursor: pointer; color: #000; transition: transform 0.2s;}
.controls button:hover {transform: scale(1.1);}
.controls button img.play_btn_prev {height:30px; margin:8px 0 0 0;}
.controls button img.play_btn_play {height:45px;}
.controls button img.play_btn_next {height:30px; margin:8px 0 0 0;}


.pc_view {}
.mobile_view { display:none !important;}
@media screen and (max-width: 800px) {
.pc_view { display:none !important;}
.mobile_view { display:inline-block !important;}
.mobile_pb20 {padding-bottom:20px !important;}

body {min-width:100%;}

/* 서브페이지 상단 주제 */
.sub_title { display:inline-block; width:100%; text-align:center;}
.sub_title li.title_section { display:inline-block; width:100%; max-width:1200px; padding:150px 30px 0 30px;}
.sub_title li.title_section img.s_title {}
.sub_title li.audio {width:100%; padding:50px 25px 30px 25px;}
.sub_title li.audio span.audio { display:inline-block; width:100%;}

.contents { display:inline-block; width:100%;}
.contents li.sub_section {width:100%; max-width:1200px; min-width:inherit; margin:0 auto; padding:0px 0 0 0;}
.contents li.section_1 {width:100%; padding:155px;}
.contents li.section_2 {width:100%; text-align:center;}

.contents span.con_box { display:inline-block; width:100%; max-width:1400px; padding: 0 50px; margin:0 auto; text-align:left;}
.contents span.con_box_mgt {margin:70px 0;}


/* 폼 스타일 */
.form_mb15 {display:inline-block; margin-bottom:15px !important;}
.form_mb30 {display:inline-block; margin-bottom:10px !important;}
.form_mb65 {display:inline-block; margin-bottom:35px !important;}
.form_mb90 {display:inline-block; margin-bottom:50px !important;}

.text_pb10 {padding-bottom:10px;}
.text_pt70 {padding-top:70px;}
.text_pt110 {padding-top:110px;}
.text_ptb120 {padding-top:120px; padding-bottom:120px;}

.text_form_1 {display:inline-block; width:100%; padding:0 30px; font-size:1.7rem; line-height:170%; letter-spacing:-0.5px;}
.text_form_1_1 {display:inline-block; width:100%; padding:0 30px; font-size:1.7rem; line-height:170%; letter-spacing:-0.5px;}
.text_form_2 {display:inline-block; width:100%; padding:0 30px; font-size:2.1rem; font-weight:bold; line-height:170%; padding-bottom:0px; letter-spacing:-1px;}
.text_form_3 {display:inline-block; width:100%; padding:0 30px; font-size:1.4rem; line-height:170%; color:#292929;}
.text_form_4 {display:inline-block; width:100%; padding:0 30px; font-size:2rem; line-height:170%; color:#292929;}
.text_form_question {display:inline-block; width:100%; padding:10px 20px; font-size:1.6rem; font-weight:bold; line-height:170%; color:#292929; background:#ddd; border-radius:10px;}
.text_form_question2 {display:inline-block; width:auto; padding:10px 20px; font-size:1.6rem; font-weight:bold; line-height:170%; color:#292929; background:#ddd; border-radius:10px;}
.text_form_answer2 {display:inline-block; width:auto; padding:10px 20px; font-size:1.6rem; line-height:170%; color:#292929; background:#efefef; border-radius:10px;}
.text_form_info { display:inline-block; width:100%; font-size:1.3rem; padding:5px 25px 0 0;}
.text_center { text-align:center;}
.text_right { text-align:right;}


.img_form span.text_form_1 { padding:20px 0px 10px 0;}
.img_form span.text_form_1_1 { padding:20px 0px 10px 0;}

.img_form {display:inline-block; justify-content: space-between; width:100%; align-items: flex-start; padding:0 30px;}
.img_form img { position:relative; display:block; width:100%; margin-bottom:5px; float:left;}
img.h200 {height:auto;}
img.h250 {height:auto;}
img.h285 {height:auto;}
img.h330 {height:auto;}
img.h370 {height:auto;}
img.h375 {height:auto;}
img.h400 {height:auto;}
img.h420 {height:auto;}
img.h485 {height:auto;}
img.h490 {height:auto;}
img.h520 {height:auto;}
img.h540 {height:auto;}
img.h570 {height:auto;}
img.h870 {height:auto;}


/* Player Skin */
.music-player {background: #f3f3f3; padding:30px 35px 5px 35px; border-radius:100px; display:flex; flex-direction:column; align-items:center; width:100%;}
.progress-bar {width: 100%; height: 5px; background: #ccc; border-radius: 5px; position: relative; margin-bottom: 0px;}
.progress {height: 5px; background: #333; width: 0%; border-radius: 5px;}
.time {width: 100%; display: flex; justify-content: space-between; font-size: 14px; margin-bottom:5px;}
.controls {display: flex; gap: 30px;}
.controls button {background: none; border: none; font-size: 40px; cursor: pointer; color: #000; transition: transform 0.2s;}
.controls button:hover {transform: scale(1.1);}
.controls button img.play_btn_prev {height:20px; margin:8px 0 0 0;}
.controls button img.play_btn_play {height:35px;}
.controls button img.play_btn_next {height:20px; margin:8px 0 0 0;}

}
