@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/*공통*/
body {color:#000; font-family: 'Noto Sans KR', sans-serif; letter-spacing:-1px;}
* {padding:0; margin:0;}
img {border:0; vertical-align:top;}
li {list-style:none;}
a {text-decoration:none; color:#222;}

input {vertical-align:top;}
select {vertical-align:top;}

.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display:block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}
.imgbox img {width:100%;}


/*메인*/
.main {width:100%; max-width:640px; margin: 0 auto; }

/*헤더*/
.header {width:100%;}
.header .logo {width:100%;}
.header .gnb {width:100%; height:50px; line-height:50px; border-bottom:1px solid #eaeaea;}
.header .gnb ul {width:100%; display:flex;}
.header .gnb ul li {width:14.2%;}
.header .gnb ul li a {font-size:16px; width:100%; height:100%; text-align:center; display:inline-block;}
.header .gnb ul li a.active {font-weight:500; color:red;}

.container {width:100%;}



/*헤드라인*/
.headline {width:100%; padding:4% 4% 4% 4%; box-sizing:border-box; border-bottom:1px solid #eaeaea;}
.headline .title {width:100%; font-size:24px; line-height:32px; font-weight:700;}
.headline .title span {color:red;}
.headline .subtitle {width:100%; font-size:16px; line-height:24px; font-weight:500; color:#999; margin-top:3%;}




/*기사본문*/
.article {width:100%; margin-top:7%; padding:0 4%; box-sizing:border-box; letter-spacing:-0.5px;}
.article p.imgbox {width:100%; margin:7% 0 0 0; box-sizing:border-box;}
.article p.txtbox {width:100%; margin:7% 0 0 0; box-sizing:border-box; font-size:17px; line-height:26px;}
.article p.vidbox {width:100%; margin:7% 0 0 0; padding-bottom:56.5%; box-sizing:border-box; position:relative;}
.article p.vidbox iframe {width:100%; height:100%; position:absolute; top:0; left:0;}
.article .swiper {margin-top:5%; overflow:hidden;}



/*디비*/
.db {width:100%; margin-top:5%; box-sizing:border-box; background:#fff; position:relative; z-index:999999;}
.db > form {width:100%; padding:7% 5%; box-sizing: border-box; border: 5px solid #000; border-top: 0;}
.radiobox {width:100%; padding:0 0 5% 0; box-sizing:border-box; border-bottom:2px dotted #eaeaea;}
.radiobox > div {width:100%; padding:0 0; box-sizing:border-box;}
.radiobox > .q1 > div:nth-child(1) {width:100%; font-size:18px; font-weight:600;}
.radiobox > .q1 > div:nth-child(2) {width:100%; display:flex; margin-top:7px; font-size:16px; font-weight:400;}
.radiobox > .q1 > div:nth-child(2) > div {width:25%;}
.radiobox > .q1 > div:nth-child(2) > div input {margin-right:5px; vertical-align:middle;}
.inputbox {width:100%; padding:5% 0 0 0; box-sizing:border-box;}
.inputbox > div {width:100%; font-size:18px; height:40px; line-height:40px; margin-top:10px; display:flex;}
.inputbox > div:nth-child(1) {margin-top:0;}
.inputbox > div > div {height:100%;}
.inputbox > div > div:nth-child(1) {width:25%; font-size:16px; font-weight:500;}
.inputbox > div > div:nth-child(2) {width:75%;}
.inputbox > div > div:nth-child(2) input {width:100%; height:100%; font-size:16px; border:1px solid #999; box-sizing:border-box; padding-left:10px; border-radius:0;}
.inputbox .tel > div:nth-child(2) {font-size:0;/*필요*/}
.inputbox .tel > div:nth-child(2) input {width:32%; height:100%; font-size:16px; border:1px solid #999; box-sizing:border-box; padding-left:10px; border-radius:0; margin-left:2%;}
.inputbox .tel > div:nth-child(2) input:nth-child(1) {margin-left:0;}
.db_btn {width:100%; margin-top:5%; padding:0 0 0 0; box-sizing:border-box;}
.db_btn input {width:100%;}
.arrow {width:100%; text-align:center; margin-top:5%;}
.arrow img {display:inline-block;}
.pay {width:100%; text-align:center;}
.pay > div {width:100%; height:100%; background:#f5f5f5; padding:3%; box-sizing:border-box; font-size:16px; line-height:30px;}
.pay input {width:25%; height:17px; vertical-align:middle;}




.db2 {margin-top:7%; border:0;}
.db2 > form {border:5px solid #000; box-sizing:border-box;}




/*댓글*/
.coment {width:100%; margin-top:14%; padding:0 4%; box-sizing:border-box;}
.co_border {width:100%; border:1px solid #eaeaea; box-sizing:border-box;}
.co_box {width:100%; padding:5% 4%; box-sizing:border-box; border-bottom:1px solid #eaeaea;}
.co_user {width:100%; font-size:15px; font-weight:600;}
.co_ment {width:100%; margin-top:7px;}
.co_ment a {font-size:15px; line-height:22px;}
.co_ment span {display:inline-block; width:40px; height:16px; line-height:16px; border-radius:4px; text-align:center; background:red; color:#fff; font-size:12px; margin-right:5px;}
.co_info {width:100%; display:flex; margin-top:7px; height:18px; line-height:18px;}
.co_info > div {width:50%; font-size:13px; color:#999;}
.co_emotion {display:flex; flex-direction: row-reverse;}
.co_emotion > div {width:40px; height:18px; border-radius:3px; border:1px solid #eaeaea; font-size:12px;}
.co_emotion > div > img {padding-left:5px; padding-top:3px; padding-right:3px;}
.co_emotion > div:nth-child(1) {color:deepskyblue;}
.co_emotion > div:nth-child(2) {color:red; margin-right:5px;}
.co_input {width:100%; display:flex; padding:5% 4%; box-sizing:border-box;}
.co_input > div:nth-child(1) {width:75%;}
.co_input > div:nth-child(1) textarea {width:100%; height:54px; padding:10px; box-sizing:border-box; border:1px solid #aaa; border-radius:5px; font-family: 'Noto Sans KR', sans-serif; letter-spacing:-1px;}
.co_input > div:nth-child(2) {width:23%; margin-left:2%;}
.co_input > div:nth-child(2) button {width:100%; height:54px; line-height:54px; text-align:center; background:#777; color:#fff; font-size:13px; border:0; border-radius:5px;}



/*time*/
.userCounter { font-size: 1.2em; line-height: 1.3;  background: #361206; text-align: center; padding:7px 5px; letter-spacing: -0.05em; position:relative; z-index:999;}
.userCounter > ul > li {font-size: 24px;}
.datebg { display: inline-block; color:#ffe829; font-weight: bold;}
.datebg2{ display: inline-block; color:#fff; font-weight: 400;}
.date2::after, .date4::after{content:':'; padding-left:7px;}



.bottom_ban {width:100%; max-width:640px; position:fixed; z-index:999998; bottom:0;}