@charset "utf-8";

header{border-bottom:1px solid #2d85d0}
#detail_con{padding:40px 13px 60px; min-height:500px}
#detail_con>h4{background:url(../img/sub/bl.gif) no-repeat left 3px ;  color:#1d528f}
#lmenu h2{background:#53c4e7 url(../img/sub/lmenu_bg.gif) repeat-x center bottom; color:#fff; font-weight:bold; text-shadow:0px 0px 2px rgba(0,0,0,.3); font-size:2.13em}
#lmenu>ul>li{position:relative}
#lmenu>ul>li.on{border-color:#2d85d0}
#lmenu>ul>li.on+li{border-top-color:#2d85d0}
#lmenu>ul>li.on:after,
#lmenu>ul>li.on:before{display:block; content:''; position:absolute; right:20px; top:27px; width:12px; height:3px; background:#fff; transform:rotate(45deg); -webkit-transform:rotate(45deg); z-index:1}
#lmenu>ul>li.on:after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg); margin-top:7px}
#lmenu>ul>li.on>a{background:#2d85d0; font-weight:bold}
.para{padding:30px 15px}
.bl02{position:relative; padding-left:24px; background:none}
.bl02:before,
.bl02:after{display:block; content:''; position:absolute; top:7px; left:0px; border-radius:30px}
.bl02:before{width:20px; height:20px; background:#7a2d85/* d0ce4c */; background:-webkit-linear-gradient(to bottom, #2d85d0 0%, #53c4e7 100%); background:linear-gradient(to bottom, #2d85d0 0%, #53c4e7 100%); box-shadow:0px 1px 1px rgba(0,0,0,.2)}
.bl02:after{margin-top:5px; left:5px; width:10px; height:10px; background:#fff}
.bl03{margin-left:15px}
.bl03>p{padding-left:13px}
.bl03>p:before,
.bl03>p:after{display:block; content:''; position:absolute; left:0px; top:13px; border-radius:1px; background:#2d85d0; border:0px}
.bl03>p:before{left:0px; top:12px; width:9px; height:3px;}
.bl03>p:after{left:3px; top:9px; height:9px; width:3px;}
.nobl{padding-left:0px !important}
.nobl:before,
.nobl:after{display:none !important}
table .bgcolor1{background:#fff7cc}
table .bgcolor2{background:#dcf5ec}
table .bgcolor3{background:#f2eaf5}

.point{color:#a81e1e}
.map_api{border:1px solid #aaa; padding:8px; line-height:0px; height:500px}
.map{border:1px solid #aaa; padding:8px; line-height:0px}
.gridBox{margin-top:15px; border:2px solid #e0e0e0; background:url(/soraefestival/img/sub/gridBox.gif) 7px top}
.gridBox+p{margin-top:10px}
.photo{overflow:hidden}
.photo>li{position:relative; float:left; margin:.5%; width:24%; border-radius:3px; overflow:hidden; box-shadow:0px 1px 2px rgba(0,0,0,.2)}
.photo>li>img{width:100%; height:145px}
.photo>li a.btn_viewBig{display:block; position:absolute; right:0px; bottom:0px; width:35px; height:35px; background:#333; background:rgba(0,0,0,.8); text-indent:-5000px}
.photo>li a.btn_viewBig:before,
.photo>li a.btn_viewBig:after{display:block; content:''; position:absolute; border-radius:60px}
.photo>li a.btn_viewBig:before{left:8px; top:8px; width:10px; height:10px; border:3px solid #fff}
.photo>li a.btn_viewBig:after{left:20px; top:22px; width:7px; height:3px; background:#fff; transform:rotate(45deg); -webkit-transform:rotate(45deg)}
.photo>li div{font-size:0px}
.photo>li div a.btn_viewClose{display:none; position:absolute; right:-55px; top:0px; width:50px; height:50px; }
.photo>li div p a.btn_viewClose:before,
.photo>li div p a.btn_viewClose:after{display:block; content:''; position:absolute; left:0px; top:25px; width:100%; height:2px; background:#fff; transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}
.photo>li div.view{transition:all ease .1s}
.photo>li div.view p a.btn_viewClose:after{transform:rotate(45deg); -webkit-transform:rotate(45deg)}
.photo>li div.view{position:fixed; left:0px; text-align:center; top:0px; width:100%; height:100%; background:rgba(0,0,0,.85); z-index:999}
.photo>li div.view p{position:absolute; top:45%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%)}
.photo>li div.view p img {width:auto; height:auto; max-width:100%; max-height:600px; box-shadow:0px 2px 8px #000} 
.photo>li div.view p a.btn_viewClose{display:block;}

/*** 소래포구축제  ***/
/* 모시는 글 */
.greeting{margin-top:2%; overflow:hidden; background:url(/soraefestival/img/sub/greeting_bg02.gif) left -10px bottom / 43.2% no-repeat}
.greeting>div.img{float:left; padding-top:44px; width:45%; background:url(/soraefestival/img/sub/greeting_bg01.gif) no-repeat left top}
.greeting>div.img p.txt1{font-size:1.35em; letter-spacing:-1px}
.greeting>div.img p.txt2{margin-top:20px}
.greeting>div.txt{float:right; margin-top:6%; width:50%}
.greeting>div.txt>p{margin-bottom:20px; font-size:1.02em; line-height:150%}
.greeting>div.txt>p span{font-size:1.05em; font-weight:bold; color:#333; text-decoration:underline}
.greeting>div.txt>p.name{margin-top:40px; font-weight:bold; font-size:1.05em; color:#1d528f}
/* 축제소개 */
.introduce{position:relative; padding-top:70px; background:#0f4a86 url(/soraefestival/img/sub/introduce_bgT.gif) no-repeat center top}
.introduce:after{display:block; content:''; position:absolute; right:-30px; top:-30px; width:265px; height:265px; background:url(/soraefestival/img/sub/introduce_bg1.png) no-repeat center center}
.introduce p.tit{text-align:center;}
.introduce p.tit:After{display:block; content:''; margin:0px 0px 2.5%; height:115px; background:url(/soraefestival/img/sub/introduce_bg2.png) no-repeat center center}
.introduce p.txt{padding:0px 15% 190px; text-align:center; font-size:18px; line-height:150%; color:#fff; background:url(/soraefestival/img/sub/introduce_bgB.gif) no-repeat center bottom}
/* 축제캐릭터 */
.gridBox{margin-top:15px; border:2px solid #e0e0e0; background:url(/soraefestival/img/sub/gridBox.gif) 7px top}
.gridBox+p{margin-top:10px}
.character{padding-top:4%}
.character ul{margin-top:8%; margin-bottom:40px; position:relative}
.character ul li.base01{width:60%; background:url(/soraefestival/img/sub/character_base01_bg.png) no-repeat left top}
.character ul li.base01 img{margin-top:-45px; margin-left:20%}
.character ul li.base02{position:absolute; top:10px; right:0px; width:58%; background:url(/soraefestival/img/sub/character_base02_bg.png) no-repeat left 20px}
.character ul li.base02 img{margin-top:-35px; margin-left:40%}
.character p.txt{margin-top:15px}
.character_grid{padding:6% 8%; overflow:hidden}
.character_grid li{float:left; text-align:center; width:50%}
.character_grid li span{display:block; margin:10px auto 0px; padding:2px 0px 5px; width:100px; background:#333333; border-radius:60px; color:#fff; font-weight:bold}
.character_grid li.grid01 span{background:#3db526}
.character_grid li.grid02 span{background:#fd7032}
.character_use{overflow:hidden}
.character_use li{float:left; text-align:center; padding:5%; width:50%}
.character_use li:first-child{border-right:1px solid #e0e0e0}
.character_use li span{display:block; margin:10px auto 0px; padding:2px 0px 5px; width:100px; background:#2d85d0; border-radius:60px; color:#fff; font-weight:bold}
.character_sub p.txt{padding:20px 0px}
.character_sub div ul{padding:0px 5%; overflow:hidden}
.character_sub div ul li{float:left; text-align:center; padding:5%; width:25%}
.character_sub div ul li span{display:block; margin:10px auto 0px; padding:2px 0px 5px; width:100px; background:#333; border-radius:60px; color:#fff; font-weight:bold}
.character_sub div p{padding:1% 5% 5%; text-align:center}
.character_subuse{padding:5%; text-align:center}
.character_subuse p{padding:5% 5% 0%; text-align:center}
/* 오시는 길 */
.location{margin:50px 0px; border-top:3px solid #2d85d0}
.location>li{position:relative; padding:30px 0px; border-bottom:1px dashed #bbbbbb; min-height:110px}
.location>li p.tit{position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); text-align:center; padding-top:80px; width:28%; color:#333; font-weight:bold; font-size:18px; letter-spacing:-1px; background-repeat:no-repeat; background-position:center top}
.location>li.ic01 p.tit{background-image:url(/soraefestival/img/sub/location_ic01.png)}
.location>li.ic02 p.tit{background-image:url(/soraefestival/img/sub/location_ic02.png)}
.location>li .con{padding-left:30%}
.location>li .con.bl04{margin-top:0px}
.location .carnavi{font-size:1.1em; font-weight:bold}
.location .carnavi span{color:#1d528f}
.location .bl04{margin-left:0px}
.location .bl04>li{margin-bottom:0px}
.location .bl05{margin-top:5px}
.location .bl05>li{margin:0px; font-size:0.93em}
.location .ic02 ul>li>p{font-size:0.93em}

/*** 축제프로그램 ***/
.ready20 {text-align:center; font-size:30px; padding-top:130px; padding-bottom:320px; background:url(/soraefestival/img/sub/summary_bgB.gif) no-repeat center bottom; background-size:100%}
.ready20 span {font-size:1.10rem;}

.ready30 {text-align:center; padding-top:80px; padding-bottom:320px; background:url(/soraefestival/img/sub/summary_bgB.gif) no-repeat center bottom; background-size:100%; font-size:18px;}
.ready30 .txt1{font-size:22px;}
.ready30 .txt1 span.title{font-size:30px; font-weight:bold}


/* 축제개요 */
.summary{position:relative; background:url(/soraefestival/img/sub/summary_bgM.gif) no-repeat center center; background-size:100% 100%}
.summary ul{padding-bottom:25%; background:url(/soraefestival/img/sub/summary_bgB.gif) no-repeat center bottom; background-size:100%}
.summary ul li{position:relative; margin:auto; padding:25px 0px; width:90%; max-width:660px; padding-left:190px}
.summary ul li>p{position:absolute; left:0px}
.summary ul li>dl{}
.summary ul li>dl dd{margin-top:20px; font-size:1.1em; line-height:1.6em; letter-spacing:0px}
.summary p.sponsor{text-align:right; padding:10px 20px; font-size:1.1em; background:#66584b; color:#fff}
.summary p.sponsor span{font-weight:bold}
/* 주요프로그램 */
.program>div{padding:20px 0px; border-top:1px dashed #ccc}
.program>div:first-child{padding-top:0px; border-top:0px}
.program>div dl dt{font-weight:bold; font-size:1.5em}
.program>div ul.bl04{margin:20px 5px 0px}
.program>div.type01 *{color:#fff}
.program>div.type01 .txt{margin-top:20px; font-size:1.1em}
.program>div.type01 dl{padding:5% 20px 0px 0px; padding-left:55%; min-height:320px; background-color:#000; background-repeat:no-repeat; background-position:center center; background-size:cover}
.program>div.open dl{background-image:url(/soraefestival/img/sub/program_img01.jpg)}
.program>div.close dl{background-image:url(/soraefestival/img/sub/program_img07.jpg)}
.program>div.fire dl{background-image:url(/soraefestival/img/sub/program_img09.jpg)}
.program>div.type01 dl dt{font-size:1.8em}
.program>div.type01 ul li:before{background:#fff}
.program>div.type02{padding:30px 20px}
.program>div.type02 dl{margin-top:20px}
.program>div.type03{overflow:hidden}
.program>div.type03>dl{float:left; margin:0% 2%; width:46%}
.program>div.type03>dl:last-child{float:right}
.program>div.type03>dl dt{padding-top:20px; height:80px; overflow:hidden}
.program>div.type03>dl dd.img{padding:10px 2px 0px}
.program>div.type04{padding:25px 10px; overflow:hidden}
.program>div.type04 p.img{float:left; width:45%}
.program>div.type04>dl{float:right; width:52%}
.program>div.type04>dl dt{padding-top:10px; overflow:hidden}


.schedule_data td, 
.schedule_data th{padding:10px 2%; border:1px solid #ccc; border-right:0px}
.schedule_data th:first-child{border-left:0px}
.schedule_data thead th{padding:15px 2%; font-weight:bold; background:#f0f0f0; border-top:2px solid #000; border-color:#000}
.schedule_data tbody th{}

/* 행사장안내 */
.event{margin-top:20px}
.event p.img{padding:10px; box-shadow:0px 1px 2px rgba(0,0,0,.5); font-size:0px}
.event ul{margin-top:15px}
.event ul li{display:inline-block; vertical-align:middle; margin:5px; padding-right:3%; min-width:25%; font-size:17px}
.event ul li span{display:inline-block; text-align:center; margin-right:5px; width:30px; height:30px; line-height:25px; border:2px solid #333; border-radius:30px; font-weight:bold; font-size:18px}

/*** 소래포구 ***/
.origin{position:relative; padding-top:10px; margin-top:40px; padding-left:1%; padding-right:52%; line-height:150%}
.origin p.txt{padding-right:6%; margin-top:20px}
.origin p.txt1{margin-top:40px}
.origin .photo{position:absolute; right:0px; top:0px; width:49.2%}

.logo .box {padding:5%; border:1px solid #c2c2c2; background:url('/main/img/contents/logo_bg.gif') 0 0 repeat;}
.logo .box+.box {margin-top:10px;}
.logo .conbtnBox {text-align:right; margin-top:15px;}
.logo .logo {overflow:hidden;}
.logo .logo div dl {position:relative; margin-top:25px; padding-left:45px;}
.logo .logo div dl:first-child {margin-top:0;}
.logo .logo div dt {color:#0f54a8; font-size:16px; font-weight:bold;}
.logo .logo div dd {position:relative; margin-top:2px; padding-left:10px; color:#555;}
.logo .logo div dd:before {content:'-'; position:absolute; left:0;}
.logo .slogan {overflow:hidden;}
.logo .slogan .tit {float:left; text-align:center; margin-top:5%; padding:5px 10px; min-width:116px; color:#fff; font-size:18px; border-radius:30px; background-color:#1054a8;}
.logo .slogan .img {padding-left:25%;}
.logo .mov_video {margin:20px 0 0 20px; border:1px solid #c2c2c2; font-size:0;}
.logo .bi ul li {padding-left:73px; min-height:50px; background:no-repeat left center; text-shadow:1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;}
.logo .bi ul li span {font-weight:600; font-size:17px; color:#444;}
.logo .bi ul li.ic_n {background-image:url('/main/img/contents/bi_info1.png'); color:#0056a4; font-weight:500;}
.logo .bi ul li.ic_c {background-image:url('/main/img/contents/bi_info2.png');}
.logo .bi ul li.ic_h {background-image:url('/main/img/contents/bi_info3.png');}
.logo .bi ul li.ic_i {background-image:url('/main/img/contents/bi_info4.png');}
.logo .bi_apply ul {display:flex; justify-content:space-between; align-items:flex-end; text-align:center; margin:0 auto;}
.logo .bi_apply ul li {display:inline-block;}
.logo .character .txt .serang {color:#e84133}
.logo .character .txt .gerang {color:#1a519b}
.logo .character_app {text-align:center;}
.logo .character_app li {display:inline-block; margin:4%;}
.logo .conbtnBox .caption:not(:focus) {overflow:hidden; height:0; padding:0; font-size:0; text-indent:-5000px;}

table.data tbody th, table.data td {height:45px;}
table.data tbody th {border-right:1px solid #d4d4d4;}
table.data .td-ir {width:0; padding:0; border:0;}
table.data td.bdr_line_none {border-right:0 !important;}

.float_box:after {display:block; content:""; clear:both;}
.float_box>div {margin-top:10px; float:left; width:48%;}
.float_box>div:nth-child(2n) {float:right;}

table.data tbody th.dummy {padding:0; border:0 !important;}

/*******************************************************************************************************************/


@media all and (min-width:801px){
	#lmenu>ul{border-bottom:1px solid #dfdfdf}
	#lmenu>ul>li{border-bottom:0px; border-top:1px solid #dfdfdf}
	#lmenu>ul>li:first-child{border-top:0px}

	.logo .logo .img {position:relative; float:left; margin-left:8%; padding-top:10px; padding-right:60px;}
	.logo .logo div {position:relative; float:left; padding-left:65px; width:50%;}
	.logo .logo div:before,
	.logo .logo div dl:before {content:''; position:absolute; background-color:#1054a8;}
	.logo .logo div:before {top:10px; width:1px; height:69%;}
	.logo .logo div dl:nth-child(2):before {left:-65px; width:100px;}
	.logo .logo div dl:before {left:0; top:10px; width:35px; height:1px;}
	.logo .logo .img:after,
	.logo .logo .img:before {content:''; position:absolute; background-color:#a5a5a5;}
	.logo .logo .img:after {right:0; top:0; width:1px; height:167px;}
	.logo .logo .img:before {right:0; top:0; width:35px; height:166px; border-top:1px solid #a5a5a5; border-bottom:1px solid #a5a5a5; background-color:transparent;}
	.logo .bi:after {display:block; content:""; clear:both;}
	.logo .bi .img {position:relative; float:left; margin-left:6.5%; padding-top:4%;}
	.logo .bi ul {float:left; margin-left:12%; width:415px;}
	.logo .bi ul li:not(:first-child) {margin-top:17px;}
	.logo .character:after {display:block; content:""; clear:both;}
	.logo .character .img{float:left; text-align:right; width:40%;}
	.logo .character .txt{float:right; width:56%; padding-top:3.5%; font-size:17px; line-height:30px; text-shadow:1px 1px 0 #fff;}
	.logo .character .txt .wfont {font-size:20px;}

}

@media screen and (max-width:800px){
	#detail_con{padding:25px 10px; font-size:14px}
	#container{margin-top:80px}
	.map_api{height:300px}
	.photo>li{width:49%}
	.photo>li div.view p{width:80%; text-align:center}
	.photo>li div a.btn_viewClose{top:-55px; right:0px}
	.greeting{background-position:right 16%; background-size:50%}
	.greeting>div.img{width:100%; padding-bottom:10%}
	.greeting>div.img p.txt2 img{max-width:65%}
	.greeting>div.txt{width:100%; margin-top:0px}
	.introduce:after{width:165px; height:165px; background-size:100%}
	.introduce p.txt{padding-bottom:20%; background-size:contain; font-size:15px;}
	.character ul{margin-top:15%}
	.character ul li.base01{width:70%; background-size:100%}
	.character ul li.base01 img{margin-top:-45px; margin-left:1%; max-width:150px}
	.character ul li.base02{background-size:100%}
	.character ul li.base02 img{margin-top:-35px; margin-left:30%; max-width:150px}
	.character_grid li img{max-width:110px}
	.character_use li{width:100%; border:0px !important}
	.character_sub div ul li{width:50%}	
	.location{margin:50px 0px; border-top:3px solid #2d85d0}
	.location>li{text-align:center}
	.location>li p.tit{display:inline-block; position:static; top:50%; transform:translateY(0%); -webkit-transform:translateY(0%); text-align:left; padding:10px 40px 12px; padding-left:80px; width:auto; background-color:#ddd; background-repeat:no-repeat; background-position:20px center; background-size:55px 40px; border-radius:60px}
	.location>li .con{text-align:left; margin-top:15px !important; padding-left:0%}
	.summary ul li{padding-left:0px; padding-bottom:0px}
	.summary ul li>p{position:relative; text-align:center}
	.summary ul li>dl dt{margin-top:10px;}
	.summary ul li>dl dd{margin-top:10px; font-size:.9em; line-height:1.3em}
	.summary p.sponsor{font-size:.9em}
	.program>div dl dt{font-size:1.3em}
	.program>div.type01 .txt{font-size:1em}
	.program>div.type01 dl{padding:50% 20px 20px; background-position:left top; background-size:200% 50%}
	.program>div.type01 dl dt{font-size:1.8em}
	.program>div.type03{padding:0px}
	.program>div.type03>dl{float:none !important; padding:20px 0px; width:100%; border-top:1px dashed #ccc}
	.program>div.type03>dl:first-child{border-top:0px}
	.program>div.type03>dl dt{padding-top:20px; height:auto}	
	.program>div.type04{padding:20px 10px}
	.program>div.type04 p.img{text-align:center; width:100%}
	.program>div.type04>dl{width:100%; padding:0px 10px}
	.event ul li{font-size:15px}
	.event ul li span{width:20px; height:20px; line-height:15px; font-size:16px}
	.origin{padding-top:0px; padding-left:1%; padding-right:0%; line-height:150%}
	.origin p.txt{padding-right:0%}
	.origin .photo{position:static; text-align:center; margin-top:20px; width:100%}
	.ready30 {text-align:center; padding-top:45px; padding-bottom:260px;}
	.float_box>div {float:none; width:100%;}
}