/* 공통 */
.v_pc {display: none;}
.v_mo {display: block;}

/* header */
.header .header-box {padding: 0;}
.header .logo {position: relative; display: block; width: 100%; padding: 7px 0 6px; text-align: center; background: #2a2a2a; margin-left: 0;}
.header .logo a {width: 28%; margin: 0 auto; color: #fff;}
.header .logo a img {width: 100%;}
.header .logo em {display: inline-block; margin-top: -3px; font-size: 23px; font-weight: 700; letter-spacing: -1px; line-height: 23px;}
.header .logo .logo-txt {margin-left: 7px; font-size: 12px; line-height: 12px;}
.header .logo .logo-txt span {margin: 1px 0 0 -6px; font-size: 10px; -webkit-transform: scale(0.9);}
.header .gnb {position: relative; box-sizing: border-box; width: 100%; margin: 0 auto; padding: 12px 12px 14px; text-align: center; background: #515151;}
.header .gnb .menu li a {padding: 0 6px 0 11px; font-size: 12px; font-weight: 500; line-height: 12px;}
.header .gnb .menu li:first-child a {padding-left: 0;}
.header .gnb .menu li:last-child a {padding-right: 0;}
.header .gnb .menu li.on a {color: #a7deff;}
.header .gnb .menu li a:before {content: ""; position: absolute; display: block; width: 5px; height: 5px; top: 50%; left: 0; margin-top: -2px; border-radius: 100%; background: #fff;}
.header .gnb .menu li:first-child a:before {content: none;}

/* footer */
.footer {padding: 17px 0 18px;}
.footer .logo {width: 30%; margin: 0 auto;}
.footer .logo img {width: 100%;}
.footer .f-txt-box p {font-size: 10px; line-height: 16px;}
.footer .f-txt-box p.p-0 {margin-top: 8px;}
.footer .f-txt-box address {font-size: 10px; line-height: 16px;}
.footer .f-txt-box address small {letter-spacing: -0.1px; font-size: 10px;}

/*TOP버튼*/
.btn-top {
	right: 15px;
	bottom: 15px;
	width: 42px;
	height: 42px;
	background: #fff;
	z-index: 10;
	border: 1px solid #b8b7b1;
	color: #363636;
	text-align: center;
	border-radius: 50%;
	box-sizing: border-box;
	padding-top: 4px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.9px;
	font-size: 14px;
	-webkit-box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.btn-top .arr {
	display: block;
	font-family: "Nanum Gothic", sans-serif;
	transform: rotateX(45deg);
	-webkit-transform: rotateX(45deg);
	-ms-transform: rotateX(45deg);
	-o-transform: rotateX(45deg);
	font-size: 15px;
}

/*
  Main
 */
.Main .contents .con-tit {margin: 0 auto 13px; padding-left: 10px;}
.Main .contents .con-tit:before {width: 3px; height: 32px; top: 50%; margin-top: -16px;}
.Main .contents .con-tit span {height: auto; line-height: 1.6}
.Main .contents .con-tit .row-1 {font-size: 17px; font-weight: 500;}
.Main .contents .con-tit .sokcho { margin-left: 2px; font-size: 12px;}
/* row1,2 텍스트 2줄 */
.Main .contents .con-tit.type-2:before {height: 34px; margin-top: -16px;}
.Main .contents .con-tit.type-2 .row-1 {font-size: 10px; line-height: 10px;}
.Main .contents .con-tit.type-2 .row-1 .sokcho {font-size: 10px; line-height: 10px; font-weight: 500;}
.Main .contents .con-tit.type-2 .row-2 {margin-top: 3px; font-size: 20px;}
.Main .contents .con-tit.type-2 .row-2 span {font-size: 20px;}

/* 서브페이지 비주얼영역 */
.subVisual {box-sizing: border-box; padding: 40px 15px 38px;}
/* 게시판 비주얼 */
.subVisual .mainTxt {padding: 13px 0 13px 27px; background-size: auto 100%;}
.subVisual .mainTxt * {text-shadow: 3px 3px 2px rgba(0,0,0, .25); letter-spacing: -0.7px;}
.subVisual .mainTxt h2 {font-size:23px; line-height:23px;}
.subVisual .mainTxt .p-2 {margin-top: 3px; font-size: 10px; -webkit-transform: scale(0.9);}
/* 비주얼 type-2 */
.subVisual.type-2 {padding: 40px 0 55px;}
.subVisual.type-2 .mainTxt h2 {margin: 5px auto 7px; font-size: 25px;}
.subVisual.type-2 .mainTxt .p-1 {font-size: 14px;}
.subVisual.type-2 .mainTxt .p-2 {font-size: 10px;}


/* 메인 비주얼 */
.Main section[class*="-sec"].visual-sec {position: relative; width: 100%; height: auto; padding: 0; background: rgba(0, 0, 0, 0.8);}
.Main .visual-sec .visual-txt {margin-top: -96px;}
.Main .visual-sec .visual-txt h2 {margin: 4px auto 15px; font-size: 46px; line-height: 46px;}
.Main .visual-sec .visual-txt h2 span {display: inline;}
.Main .visual-sec .visual-txt .p-1 {font-size: 14px;}
.Main .visual-sec .visual-txt .p-2 {height: 20px; padding: 0 21px 0 23px; font-size: 10px; line-height: 20px;}
.Main .visual-sec .visual-txt .p-3 {margin-top: 9px; font-size: 13px; line-height: 18px;}

/* 해수욕장 소개 */
.Main .about-sec {padding-top: 2rem; padding-bottom: 2rem; background: none;}
.Main .about-sec .con-area {padding-bottom: 10px;}
.Main .about-sec .con-area .sub-tit {padding: 16px 0 6px; font-size: 17px; line-height: 20px;}
.Main .about-sec .con-area .con-txt {position: relative; clear: both; padding: 10px 0 5px; font-size: 12px; line-height: 15px; word-break: keep-all; color: #535353;}
.Main .about-sec .con-area .con-txt.type01 {float: left; box-sizing: border-box; width: 46%; padding-right: 12px;}
.Main .about-sec .con-area .fimg {position: relative; box-sizing: border-box; display: inline-block; margin-top: 15px;}
.Main .about-sec .con-area .full {width: 100%; margin-top: 0;}
.Main .about-sec .con-area .img01 {width: 54%; margin-top: 8px; float: initial; flex: none;}
.Main .about-sec .cont-wrap {display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem;}
.Main .about-sec .img-wrap {display: flex; justify-content: space-between; align-items: stretch; gap: 0.5rem;}
.Main .about-sec .img-wrap img {height: 100%}

/* 주변관광지 */ 
.Main .tour-sec {padding-top: 2rem; padding-bottom: 2rem}
.Main .tour-sec .area .h4-tit {font-size: 15px; margin-top: 15px; margin-top: 5px;}
.Main .tour-sec .area .h4-tit:before { width: 5px; height: 14px; margin-right: 4px;}
.Main .tour-sec .tourist-box .area:first-child .h4-tit {margin-top: 10px;}
.Main .tour-sec .area .list > li figure {border: 1px solid #a9a7a8; box-sizing: border-box;}
.Main .tour-sec .area .list > li figure img {width: 100%;}
.Main .tour-sec .area .list > li dl {margin-top: 7px;}
.Main .tour-sec .area .list > li dl dt {font-size: 12px; padding-bottom: 5px; margin-bottom: 7px;}
.Main .tour-sec .area .list > li dl dt h5 {font-size: 14px;}
.Main .tour-sec .area .list > li dl dd {font-size: 12px; line-height: 1.4; word-break: keep-all;}

/* 고성8경 / 속초8경 */
.Main .view-sec {padding-top: 2rem;}
.Main .view-sec .con-area {margin-top: 1rem;}
.Main .view-sec .con-area + .con-tit {margin-top: 30px;}
.Main .view-sec .con-area .gs-list {gap: 0.5rem;}
.Main .view-sec .con-area .gs-list .img-box {height: 100%; max-height: 150px;}
.Main .view-sec .con-area .gs-list .img-box img {position: relative; min-height: 150px;}
.Main .view-sec .con-area .gs-list .txt-box {padding: 10px 8px 12px; min-height: fit-content;}
.Main .view-sec .con-area .gs-list .txt-box p {letter-spacing: -0.7px;}
.Main .view-sec .con-area .gs-list .txt-box .tit {margin-bottom: 0; font-size: 14px; line-height: 18px;}
.Main .view-sec .con-area .gs-list .txt-box .adr {padding: 5px 0 6px; font-size: 12px; line-height: 16px;}
.Main .view-sec .con-area .gs-list .txt-box .txt {font-size: 12px; line-height: 16px;}

/* 속초8경 type-2 */
.Main .view-sec.type-2 .view-map .info,
.Main .view-sec.type-2 .p-1 {font-size: 13px; text-align: center; margin: 10px 0 12px; word-break: keep-all;} 
.Main .view-sec.type-2 .p-1 .block {display: block;}
.Main .view-sec.type-2 .view-map {border: 1px solid #d7d7d7; box-sizing: border-box; border-radius: 10px; overflow: hidden;}
.Main .view-sec.type-2 .view-map img {width: 100%;}
.Main .view-sec.type-2 .area .list {margin-top: 15px;}
.Main .view-sec.type-2 .area .list + .list {margin-top: 0px;}
.Main .view-sec.type-2 .area .list > li {width: 48.6%;}
.Main .view-sec.type-2 .area .list > li dl {margin-top: 8px;}
.Main .view-sec.type-2 .area .list > li dl dt {padding-bottom: 5px;}
.Main .view-sec.type-2 .area .list > li dl dt h5 {font-size: 14px;}
.Main .view-sec.type-2 .area .list > li dl dt h5 .num {width: 18px; height: 18px; line-height: 1.6; font-size: 13px;}
.Main .view-sec.type-2 .area .list > li dl dd {font-size: 11.5px; line-height: 1.4; padding: 0; height: 60px; text-overflow: ellipsis; white-space: nowrap;}

/* 오시는 길 */
/* 지도 이미지 */
.Main .waycome-sec {padding-bottom: 2rem;}
.Main .waycome-sec .con-area {flex-direction: column; padding-top: 0;}
.Main .waycome-sec .con-area .map-box {max-width: 100%;}
/* 지도 텍스트 */
.Main .waycome-sec .con-area .way-info dl {margin-bottom: 18px;}
.Main .waycome-sec .con-area .way-info .way-tit, .Main .waycome-sec .way-info .way-txt {padding-left: 12px;}
.Main .waycome-sec .con-area .way-info .way-tit {font-size: 15px; line-height: 18px;}
.Main .waycome-sec .con-area .way-info .way-tit:before {display: block; width: 5px; height: 15px; margin-top: -7px;}
.Main .waycome-sec .con-area .way-info .way-txt p {font-size: 13px; line-height: 20px;}
.Main .waycome-sec .con-area .way-info .way-txt .way-sub-tit {margin-top: 5px;}
.Main .waycome-sec .con-area .way-info .way-txt .dot {margin-top: 1px; padding-left: 8px;}
.Main .waycome-sec .con-area .way-info .way-txt .dot:before {width: 3px; top: 9px; left: 2px;}
.Main .waycome-sec .con-area .way-info .btn-box {gap: 0.5rem;}
.Main .waycome-sec .con-area .way-info .btn-box a {max-width: 135px;}


/*
  Event - 속초해수욕장기준  
 */
/* event common */
.Event .container {width: 94%;}
/* event list */
.Event .wrap.cmStyle {padding: 17px 0 20px;}
.Event .event .area .h3-tit {font-size: 14px; color: #5a5a5a; font-weight: 700; padding-bottom: 5px; word-break: keep-all; text-align: center;}
.Event .event .area .evt-img {position: relative;}
.Event .event .area .evt-img img {width: 100%;}
.Event .event .area .evt-img iframe {height: 174px; margin-top: 10px;}
.Event .event .area .evt-info .detail {padding-top: 3px;}
.Event .event .area .evt-info dl {margin-top: 5px; font-size: 13px;}
.Event .event .area .evt-info dt, .contents .event .area .evt-info dd {display: inline-block; vertical-align:top;}
.Event .event .area .evt-info dd {margin-left: 10px;}
.Event .event .showing {font-size: 13px; margin-top: 10px; padding-top: 10px; word-break:keep-all; border-top: 1px solid #d2d2d2; line-height: 1.5;}

/*
  Board
 */
/* 게시판 */
.Board .con-sec {padding: 35px 15px 45px;}
/* 게시판 tit */
.Board .con-sec .con-tit {margin-bottom: 20px; line-height: 17px; padding: 0;}
.Board .con-sec .con-tit .row-1 {font-size: 17px;}
.Board .con-sec .con-tit .sokcho {margin-left: 4px; font-size: 12px;}

/* 게시판 list */
.Board .board-area {min-height: 300px; width: 100%; margin: 0 auto;}
.Board .board-area .tb-list {font-size: 12px; table-layout: fixed;}
.Board .board-area .tb-list col.nth-1 {width: 70%;}
.Board .board-area .tb-list col.nth-3 {width: 30%;}
.Board .board-area .tb-list th, .Board .board-area .tb-list td {padding: 10px 6px;}
.Board .board-area .tb-list td:nth-child(1) {text-align: left; padding-left: 5px;}
.Board .board-area .tb-list tr.reply td a .re {font-size: 12px;}
.Board .board-area .tb-list thead tr {background: #f2f2f2; border-top: 1px solid #3c3b3b; border-bottom: 1px solid #d9d9d9;}
.Board .board-area .tb-list tbody tr {border-bottom: 1px solid #d9d9d9;}
/* page number */
.Board .board-area .pagenation {margin-top: 20px;}
.Board .board-area .pagenation a {font-size: 12px; width: 24px; height: 24px; line-height: 2em;}
.Board .board-area .pagenation a[class*="prev"], .Board .board-area .pagenation a[class*="next"] {font-size: 10px; line-height: 2.3em;}
/* btn */
.Board .board-area .area-1 [class*=btn-] {background: #fff; border: 1px solid #b0b0b0; line-height: 1; padding: 7px 14px; border-radius: 30px; font-size: 13px; color: #676767; letter-spacing: -1px; min-width: 68px;}
.Board .board-area .area-1 [class*=btn-]:first-child + button {margin-left: 1px;}
.Board .board-area .area-1 .row-btn .left {float: left;}
.Board .board-area .area-1 .row-btn .right {float: right;}
.Board .board-area .row-btn [class*=btn-] {font-size: 13px; height: 29px; padding: 0 14px; border-radius: 30px; min-width: 68px;}
.Board .board-area .row-btn [class*=btn-]:first-child + button {margin-left: 1px;}

/* search */
.Board .board-area .row-search > * {height: 32px; font-size: 12.5px; color: #383838;}
.Board .board-area .row-search .sltDiv {width: 70px;}
.Board .board-area .row-search .sltDiv:after {right: 5px; top: 9px;}
.Board .board-area .row-search .category {padding-left: 5px; font-size: 13px; color: #383838; background: #fff;}
.Board .board-area .row-search .keword {margin: 0 2px; width: 90px;}
.Board .board-area .row-search .btn-search {padding: 0 12px; border-radius: 5px;}
.Board .board-area .row-search .btn-write {border-radius: 3px; padding: 0 14px; margin-left: 3px;}
.Board .board-area .row-btn {margin-top: 20px; padding: 0;}
.Board .board-area .row-btn.v_mo {margin-top: 0;}
.Board .board-area .row-btn.v_mo .btn-write {min-width: fit-content; height: 32px; padding: 0 14px; font-size: 13px; border: 1px solid #c8c8c8; border-radius: 3px;}

/* 게시판 read */
.Board .board-area .tb-list tr.post td {padding: 10px; font-size: 12.5px; line-height: 1.6;}
.Board .board-area .tb-read th {padding: 10px 10px; font-size: 12.5px;}
.Board .board-area .tb-read td {padding: 10px; font-size: 12.5px; line-height: 1.6; word-break: keep-all;}
.Board .board-area .tb-read thead tr th .flt-r {margin-left: 5px;}

/* 게시판 write */
.Board .board-area .tb-write {margin-top: 0px;}
.Board .board-area .tb-write col.nth-1 {width: 20%;}
.Board .board-area .tb-write tbody tr th {font-size: 13px;}
.Board .board-area .tb-write tbody tr td {font-size: 12.5px; padding: 8px 5px;}
.Board .board-area .tb-write .appe-reset,
.Board .board-area .tb-write input[class*=w-] {height: 32px;}
.Board .board-area .tb-write input+label {display: block; font-size: 12px; color: #d3213e;}
.Board .board-area .tb-write .w-1 {width: 100px;}
.Board .board-area .tb-write .w-2 {width: 100px;}
.Board .board-area .tb-write tbody tr td textarea {padding: 10px; font-size: 12.5px;}
.Board .board-area .tb-write .inp-reset {height: 32px; width: 58px; font-size: 12px; line-height: 32px;}
.Board .board-area .tb-write .tr-secure img {width: 68px;}
.Board .board-area .tb-write .tr-secure .w-1 {margin: 0 2px; padding-left: 5px; width: 70px;}
.Board .board-area .tb-write .tr-secure .s-1 {font-size: 11px; letter-spacing: -0.7px;}
.Board .board-area .row-cause {margin-top: 15px; font-size: 12px; word-break: keep-all; letter-spacing: -0.9px;}

/* 수정 시 팝업 */
.popWrapper .pop-password {width: 250px; margin-left: -125px; margin-top: -71px;}
.popWrapper .pop-password .pop-header h2 {font-size: 16px;}
.popWrapper .pop-password .pop-header .btn-x {width: 32px; height: 40px;}
.popWrapper .pop-password .pop-header .btn-x .a-x {top: 7px; right: 5px;}
.popWrapper .pop-password .pop-header .btn-x .a-x:before, .popWrapper .pop-password .pop-header .btn-x .a-x:after {width: 17px;}
.popWrapper .pop-password .pop-body {padding: 20px 20px; font-size: 13px;}
.popWrapper .pop-password .pop-body .row-inp > * {height: 32px; font-size: 13px;}
.popWrapper .pop-password .pop-body .row-inp .pwd { width: 110px;}
.popWrapper .pop-password .pop-body .row-inp .btn-ok {padding: 0 15px; min-width: 54px; margin-left: 2px;}

/* 파일박스 커스터마이징 */
.filebox label, .filebox .upload-name {font-size: 12px; height: 32px;}
.filebox label {
  width: 58px; margin-left: 2px; border-radius: 5px; line-height: 32px;
}
/* named upload */
.filebox .upload-name {
  padding-left: 5px;
}

@media (max-width: 350px) {
  .Main .waycome-sec .con-area .btn-box {padding-left: 0; flex-wrap: nowrap;}
}

@media (max-device-width: 320px) {
    /* header */
    .header .gnb {padding: 1px 12px 6px;}
    .header .gnb .menu li a {padding: 0 4px 0 8px; font-size: 11px; line-height: 11px;}
    .header .gnb .menu li a:before {width: 4px; height: 4px; margin-top: -1px;}

    /* 고성8경 / 속초8경 */
    .Main .view-sec .con-area .gs-list .txt-box {padding: 8px 5px 10px;}
    .Main .view-sec .con-area .gs-list .txt-box .tit {font-size: 13px; line-height: 16px;}
    
    /* 게시판 write */
    .Board .board-area .tb-write .w-2 {width: 96px;}
    .Board .board-area .tb-write .tr-secure .s-1 {font-size: 10px;}
}