@charset "UTF-8"; 

/********************************
 section01
 *******************************/
.main_visual {background:url(/u/storyCms/mayor/images/main/bg_main.jpg) no-repeat center center; background-size:cover;}
.main_box {position:relative; width:100%; max-width:1860px; height:700px; margin:0 auto;}
.main_slogan_box {position:relative; padding-top:100px; text-align:center; z-index:1; transition:all 0.3s ease-in-out 0s;}
.main_slogan_box .slogan {width:493px; height:96px; margin:0 auto; background:url(/u/storyCms/mayor/images/main/slogan.png) no-repeat center center; background-size:cover; overflow:hidden; text-indent:-999px;}
.main_slogan_box .mayor_txt span {display:inline-block; font-size:34px; font-weight:500; color:#fff; text-shadow:0 0 6px rgba(0,0,0,0.5);}
.main_slogan_box .mayor_txt span.point_txt {font-size:46px;}
.mayor_photo {position:absolute; bottom:0; left:0;}
.mayor_photo img {width:100%; height:100%;}

.iconmenu_list {position:absolute;}    
.iconmenu_list,.iconmenu_list a {display:flex; text-decoration:none;}
.iconmenu_list {bottom:100px; right:60px;}
.iconmenu_list li {box-sizing:border-box; margin:0 2px;}
.iconmenu_list li.hexagon_menu01 {position:relative; width:150px; height:80px; background-color:#017caa;}
.iconmenu_list li.hexagon_menu01:before {content:""; position:absolute; top:-45px; left:0; border-left:75px solid transparent; border-right:75px solid transparent; border-bottom:45px solid #017caa;}
.iconmenu_list li.hexagon_menu01:after {content:""; position:absolute; bottom:-45px; left:0; border-left:75px solid transparent; border-right:75px solid transparent; border-top:45px solid #017caa;}
.iconmenu_list li.hexagon_menu02 {position:relative; width:150px; height:80px; background-color:#5b369f;}
.iconmenu_list li.hexagon_menu02:before {content:""; position:absolute; top:-45px; left:0; border-left:75px solid transparent; border-right:75px solid transparent; border-bottom:45px solid #5b369f;}
.iconmenu_list li.hexagon_menu02:after {content:""; position:absolute; bottom:-45px; left:0; border-left:75px solid transparent; border-right:75px solid transparent; border-top:45px solid #5b369f;}
.iconmenu_list li.hexagon_menu03 {position:relative; width:150px; height:80px; background-color:#c82d2e;}
.iconmenu_list li.hexagon_menu03:before {content:""; position:absolute; top:-45px; left:0; border-left:75px solid transparent; border-right:75px solid transparent; border-bottom:45px solid #c82d2e;}
.iconmenu_list li.hexagon_menu03:after {content:""; position:absolute; bottom:-45px; left:0; border-left:75px solid transparent; border-right:75px solid transparent; border-top:45px solid #c82d2e;}

.iconmenu_list li.hexagon_menu01 a i:after {background-image:url(https://www.ulsan.go.kr/u/storyCms/mayor/images/main/iconmenu01.png);}
.iconmenu_list li.hexagon_menu02 a i:after {background-image:url(https://www.ulsan.go.kr/u/storyCms/mayor/images/main/iconmenu02.png);}
.iconmenu_list li.hexagon_menu03 a i:after {background-image:url(https://www.ulsan.go.kr/u/storyCms/mayor/images/main/iconmenu03.png);}
.iconmenu_list li.hexagon_menu01 a i {position:relative; width:100%; padding-top:60px; color:#fff; font-size:16px; text-align:center;}
.iconmenu_list li.hexagon_menu02 a i {position:relative; width:100%; padding-top:60px; color:#fff; font-size:16px; text-align:center;}
.iconmenu_list li.hexagon_menu03 a i {position:relative; width:100%; padding-top:60px; color:#fff; font-size:16px; text-align:center;}
.iconmenu_list li.hexagon_menu01:hover, .iconmenu_list li.hexagon_menu02:hover, .iconmenu_list li.hexagon_menu03:hover {transform:translateY(-10px); transition:all 0.3s ease-in-out 0s;}

.icon01 {background-image:url(/u/storyCms/mayor/images/main/icon_pointmenu01.png); background-repeat:no-repeat; background-position:center -6px;}
.icon02 {background-image:url(/u/storyCms/mayor/images/main/icon_pointmenu02.png); background-repeat:no-repeat; background-position:50px -6px;}
.icon03 {background-image:url(/u/storyCms/mayor/images/main/icon_pointmenu03.png); background-repeat:no-repeat; background-position:center -6px;}


/********************************
 section02
 *******************************/
.mayor_content01 {position:relative; width:100%; background-color:#f1e6f7; z-index:0;}
.mayor_content01:before {content:""; position:absolute; width:50%; height:595px; top:0; left:0; background-color:#fff; z-index:-1;}
.mayor_content01_inner {display:flex; max-width:1500px; margin:0 auto; background-color:#f1e6f7; border-bottom-left-radius:70px;}
.mayor_content01_box {width:1350px; margin:0 auto; padding:60px 0;}

.maintitle01 {position:relative; margin:0 0 30px; font-size:3.0rem; font-weight:600; color:#333;}
.maintitle01:after {content:""; position:absolute; top:20px; left:125px; width:66%; height:1px; background-color:#555;}
.maintitle02 {position:relative; margin:0 0 30px; font-size:3.0rem; font-weight:600; color:#333;}
.maintitle02:after {content:""; position:absolute; top:20px; left:155px; width:61%; height:1px; background-color:#555;}
.maintitle03 {position:relative; margin:0 0 30px; font-size:3.0rem; font-weight:600; color:#333;}
.maintitle03:after {content:""; position:absolute; top:20px; left:125px; width:84%; height:1px; background-color:#555;}

.schedule_box {float:left; position:relative; width:50%;}
.schedule_innerbox {position:relative; width:100%; height:370px;}
.schedule_innerbox:after {clear:both;}
.schedule_monthbox {float:left; padding:10px 10px 6px; text-align:center; font-weight:600; font-size:1.2rem; border:2px solid #555; background-color:#fff;}
.schedule_monthbox .schedule_day {display:block; font-size:4.0rem; line-height:1.0;}
.schedule_timebox_outer {float:left; width:85%; padding-left:20px;}
.schedule_timebox {padding:16px 0; border-top:1px solid #decae9;}
.schedule_timebox .schedule_time {display:inline-block; position:relative; padding-left:20px; font-size:1.8rem; font-weight:500; color:#3c1e8e;}
.schedule_timebox .schedule_time:before {content:''; position:absolute; top:5px; left:0; width:16px; height:16px; background:url(/u/storyCms/mayor/images/icon_time.png) no-repeat 0 0;}
.schedule_timebox .schedule_place {display:inline-block; position:relative; margin-left:25px; padding-left:18px; font-size:1.8rem; font-weight:500; color:#3c1e8e;}
.schedule_timebox .schedule_place:before {content:''; position:absolute; top:5px; left:0; width:12px; height:16px; background:url(/u/storyCms/mayor/images/icon_place.png) no-repeat 0 0;}
.schedule_timebox .schedule_title a {display:block; margin-top:5px; font-size:2.2rem; font-weight:500; color:#333; text-decoration:none; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.schedule_timebox .schedule_title a:hover {color:#3c1e8e;}

.media_box {float:left; position:relative; width:50%; padding-left:20px;}
.media_innerbox {position:relative; width:100%; height:370px;}

.main_morebox {position:absolute; right:0; top:0;}
.main_morebox.date_mg {margin-right:10px;}
.media_innerbox iframe {width:100%; height:100%;}
.main_more a {display:block; width:38px; height:38px; font-size:0; background:url(/u/storyCms/mayor/images/icon_more.png) no-repeat 0 0;}


/********************************
 section03
 *******************************/
.mayor_content02 {position:relative; width:100%; background-color:#fff;}
.mayor_content02_inner {display:flex; width:1500px; margin:0 auto;}
.mayor_content02_box {width:1350px; margin:0 auto;}

.photo_box {position:relative; width:100%; margin:60px 0;}
.photo_list {width:100%;}
.photo_list:after {content:''; display:block; visibility:hidden; clear:both;}
.photo {float:left; width:32%; margin:0 7px;}
.photo a {display:block; background-color:#f9f9f9;}
.photo a img {width:100%; height:300px; max-height:300px;}
.photo_date {display:block; position:relative; margin-top:12px; padding-left:23px; font-size:1.5rem; font-weight:500;}
.photo_date:before {content:''; position:absolute; top:3px; left:0; width:16px; height:16px; background:url(/u/storyCms/mayor/images/icon_date.png) no-repeat 0 0;}
.photo_title {display:block; margin:5px 0 30px; font-size:2.0rem; font-weight:500; color:#333; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}


/********************************
 media query
 *******************************/

@media screen and (max-width:1600px) {
	.mayor_content02_inner {width:100%; padding:0 30px;}
}

@media screen and (max-width:1400px) {
	.mayor_content01_box {width:100%; height:595px; margin:0 auto; padding:50px 30px;}
	.mayor_content02_box {width:100%;}
	.photo a img {height:250px; max-height:250px;}
	.photo_date {font-size:1.6rem;}
	.photo_title {font-size:2.0rem;}	
}

@media screen and (max-width:1350px) {
	.photo {width:31.8%;}
}

@media screen and (max-width:1200px) {
	.main_slogan_box {padding-top:50px;}	
	.schedule_timebox_outer {width:auto;}
	.photo a img {height:230px; max-height:230px;}	
	.photo_date {font-size:1.6rem;}
	.photo_title {font-size:1.9rem;}	
}

@media screen and (max-width:1024px) {
	.mayor_content01_box {height:auto;}
	.schedule_innerbox {height:400px; border-bottom:1px solid #555;}	
	.schedule_timebox_outer {width:85%;}	
	.schedule_box {width:100%;}	
	.media_box {width:100%; margin-top:40px; padding-left:0;}
	.main_morebox.date_mg {margin-right:0;}
	.media_innerbox {height:500px;}
	
	.maintitle01:after, .maintitle02:after, .maintitle03:after {width:0;}			
	.photo_date {font-size:1.5rem;}
	.photo_title {font-size:1.7rem;}
	.photo {width:31.6%;}
}

@media screen and (max-width:960px) {
	.maintitle01,.maintitle02,.maintitle03 {font-size:2.8rem;}
	
	.photo {width:31.4%;}
	.photo a img {height:190px; max-height:190px;}		
}

@media screen and (max-width:800px) {
	.media_innerbox {height:420px;}	
	.photo {width:31%;}
	.photo a img {height:170px; max-height:170px;}	
}

@media screen and (max-width:767px) {
	.photo_box {margin:40px 0;}
	.photo {width:30.8%;}
	.photo a img {height:160px; max-height:160px;}	
}

@media screen and (max-width:640px) {
	.maintitle01,.maintitle02,.maintitle03 {font-size:2.4rem;}
	
	.mayor_content01_inner {padding-bottom:20px;}
	.media_innerbox {height:380px;}				
	.schedule_timebox_outer {width:82%;}
	.schedule_innerbox {height:380px;}	
	.schedule_timebox .schedule_title a {font-size:1.9rem;}
	.mayor_content02_box {margin: 0 auto;}
	.main_more a {width:33px; height:33px; background-size:100%;}
	
	.photo {width:100%; margin:0;}
	.photo a img {height:360px; max-height:360px;}
	.main_slogan_box .slogan {width:400px; height:78px;}
}

@media screen and (max-width:580px) {
	.iconmenu_list {right:50px;}
	.media_innerbox {height:360px;}		
	.photo a img {height:300px; max-height:300px;}	
}

@media screen and (max-width:540px) {
	.main_box {height:600px;}
	.mayor_photo {width:75%; left:12%; bottom:100px;}
	.main_slogan_box {padding-top:25px;}	
	.main_slogan_box .slogan {width:380px; height:72px;}	
	.main_slogan_box .mayor_txt span {font-size:22px;}
	.main_slogan_box .mayor_txt span.point_txt {font-size:32px;}
		
	.iconmenu_list, .iconmenu_list a {width:100%;}
	.iconmenu_list {right:0; bottom:0;}	
	.iconmenu_list li {margin:0;}
	.iconmenu_list li.hexagon_menu01, .iconmenu_list li.hexagon_menu02, .iconmenu_list li.hexagon_menu03 {width:100%; height:110px;}
	.iconmenu_list li.hexagon_menu01:before, .iconmenu_list li.hexagon_menu01:after, .iconmenu_list li.hexagon_menu02:before, .iconmenu_list li.hexagon_menu02:after, .iconmenu_list li.hexagon_menu03:before, .iconmenu_list li.hexagon_menu03:after {content:none;}
	.iconmenu_list li.hexagon_menu01 a i, .iconmenu_list li.hexagon_menu02 a i, .iconmenu_list li.hexagon_menu03 a i {padding:75px 0 13px;}
	.icon01, .icon02, .icon03 {background-position:center 8px;}

	.media_innerbox {height:340px;}		
}

@media screen and (max-width:520px) {
	.schedule_timebox .schedule_title a {font-size:1.8rem;}
	.media_innerbox {height:320px;}	
}

@media screen and (max-width:480px) {
	.main_box {height:450px;}
	.main_slogan_box {padding-top:20px;}
	.main_slogan_box .slogan {width:300px; height:58px;}
	.main_slogan_box .mayor_txt {position:absolute; width:40%; right:38px; top:100px;}	
	.main_slogan_box .mayor_txt span {font-size:22px;}
	.main_slogan_box .mayor_txt span.point_txt {font-size:26px;}	
	.mayor_photo {width:55%; left:0; bottom:165px;}	
	.iconmenu_list, .iconmenu_list a {display:block; font-size:3.0rem; line-height:1.6;}
	.iconmenu_list li.hexagon_menu01:hover, .iconmenu_list li.hexagon_menu02:hover, .iconmenu_list li.hexagon_menu03:hover {transform: none;}
	.iconmenu_list li.hexagon_menu01, .iconmenu_list li.hexagon_menu02, .iconmenu_list li.hexagon_menu03 {height:60px; padding-top:0; text-align:center;}
	.iconmenu_list li.hexagon_menu01 a, .iconmenu_list li.hexagon_menu02 a, .iconmenu_list li.hexagon_menu03 a {height:60px;}
	.iconmenu_list li.hexagon_menu01 a i, .iconmenu_list li.hexagon_menu02 a i, .iconmenu_list li.hexagon_menu03 a i {padding:0;}
	.icon01, .icon02, .icon03 {background:none;}	
	.schedule_monthbox {float:none;}
	.schedule_timebox_outer {width:100%;}
	.schedule_innerbox {height:440px;}
	.schedule_timebox .schedule_title a {font-size:1.7rem;}
	.media_innerbox {height:280px;}		
	.photo a img {height:270px; max-height:270px;}	
}

@media screen and (max-width:400px) {
	.main_slogan_box .slogan {width:265px; height:50px;}
	.main_slogan_box .mayor_txt {position:absolute; width:40%; right:25px; top:100px;}	
	.main_slogan_box .mayor_txt span {font-size:20px;}
	.main_slogan_box .mayor_txt span.point_txt {font-size:24px;}
	
	.iconmenu_list li.hexagon_menu01 a, .iconmenu_list li.hexagon_menu02 a, .iconmenu_list li.hexagon_menu03 a {padding-top:2px;}
		
	.mayor_photo {width:65%;}
	.media_innerbox {height:250px;}		
	.photo a img {height:240px; max-height:240px;}	
}

@media screen and (max-width:350px) {
	.main_slogan_box .mayor_txt {position:absolute; width:40%; right:35px; top:100px;}	
	.main_slogan_box .mayor_txt span {font-size:18px;}
	.main_slogan_box .mayor_txt span.point_txt {font-size:22px;}	
	.mayor_photo {width:70%;}
	.media_innerbox {height:220px;}		
	.photo a img {height:200px; max-height:200px;}	
}

@media screen and (max-width:320px) {
	.main_slogan_box .mayor_txt {position:absolute; width:40%; right:35px; top:100px;}	
	.main_slogan_box .mayor_txt span {font-size:18px;}
	.main_slogan_box .mayor_txt span.point_txt {font-size:22px;}	
	.mayor_photo {width:70%;}
	.media_innerbox {height:180px;}		
	.photo a img {height:180px; max-height:180px;}	
}