@charset "utf-8";

/* Font */
@import url(font.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap');
/* Guide
----------------------------------------------------------------------------------------------------------------------------------------------------------

▶사이즈
pc : 1200px
tablet : 980px ~
mobile : 767px ~ 320px

▶미디어쿼리는 (주석으로 구분 되어있는)파트마다 각각 작성함.

*/


/* Reset
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;font-size:100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
html{box-sizing:border-box;}
*, *:before, *:after{box-sizing:inherit;}
body,th,td,input,select,textarea,button{font-family:'NotoSansKR', sans-serif;font-size:12pt;letter-spacing:-0.03em;line-height:1.475;font-weight:300;color:#555;}
dl,ul,ol,menu,li {list-style:none;}
*, *:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
:focus{outline:0 !important;}
iframe{border:none; width:100%;}
a{color:inherit;text-decoration:none;-webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
a:hover, a:focus ,a:active{text-decoration:none;color:#000;}
img{max-width:100%;}
textarea{max-width:100%;resize:none;}

.hidden{font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;}
 ::selection{background:#333;color:#fff;text-shadow:none;}
 ::-moz-selection{background:#333;color:#fff;text-shadow:none;}
 ::-webkit-selection{background:#333;color:#fff;text-shadow:none;}

	.ff_cont{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
	.fi_cont{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex;}
	.ff_object{margin:-15px;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
	.ff_object .obj{padding:15px;}
	.ff_object.middle{margin:-10px;}
	.ff_object.middle .obj{padding:10px;}
	.ff_obj{margin-left:-15px;margin-right:-15px;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
	.ff_obj .obj{padding-left:15px;padding-right:15px;}
	.f_two .obj{flex:0 0 50%;-ms-flex:0 0 50%;max-width:50%;}
	.f_three .obj{flex:0 0 33.33%;-ms-flex:0 0 33.33%;max-width:33.33%;}
	.f_four .obj{flex:0 0 25%;-ms-flex:0 0 25%;max-width:25%;}
	.f_wrap{flex-wrap:wrap;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;}
	.f_center{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
	.f_middle{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
	.f_end{-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:end;align-items:end;}
	.f_between{-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
	.f_reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}

	/*h1{font-size:2.500em;} 40px 
	h2{font-size:2.188em;}/* 35px 
	h3{font-size:1.875em;}/* 30px 
	h4{font-size:1.500em;}/* 24px 
	h5{font-size:1.250em;}/* 20px
	h6{font-size:1.125em;}/* 18px 
	p{font-size:1em;}/* 16px */
	h1,h2,h3,h4,h5,h6,p{font-weight:normal;line-height:1.5;word-break:keep-all;}
	.en{font-family:'Montserrat', sans-serif;}
	.strong{font-weight:600;}

	@media screen and (max-width:980px){
		body, input, select, textarea{font-size:11pt;}
	}

	@media screen and (max-width:767px){
		body, input, select, textarea{font-size:10.5pt;}
	}

   	@media screen and (max-width:480px){
		html, body{min-width:320px;}
		body, input, select, textarea{font-size:10pt;}
	} 

	@media only screen and (min-width:320px){
		body{overflow-x:hidden;}
	}


/* Parallax
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.parallax{background-position:0 0; background-repeat:no-repeat; background-size:100% auto; width:100%; background-size:cover; background-attachment:fixed;}


/* Preloader
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.animationload{position: fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; z-index:999999;}
	.loader {width:200px; height:200px; font-size: 24px; text-align: center; position:absolute; left:50%; top:50%; background-image:url(/images/basic_resp/img/preloader.gif); background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px;}


/* Back to top (탑 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.back-to-top{width:80px;height:80px;position:fixed;bottom:60px;right:20px;display:none;text-align:center;z-index:10000;-webkit-border-radius:50%;-moz-border-radius:50%; border-radius:50%;background:#05453b url('/images/kor12r-22-0460/common/go_top.png') no-repeat center center;}
    
    @media only screen and (max-width: 980px) {
		.back-to-top {width: 60px; height: 60px; background-size:22px}
        .back-to-top i {line-height: 58px; font-size: 20px;}
	}

    @media only screen and (max-width: 768px) {
		.back-to-top {width: 40px; height: 40px; background-size:18px}
        .back-to-top i {line-height: 40px; font-size: 15px;}
	}

/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#wrapper{position:relative;width:100%;min-width:320px;height:100%;}
	.cont_inner{width:1280px;margin:0 auto;}
	.inner{width:1280px !important;}
	.cont_inner:after,.inner:after{content:'';display:block;clear:both;}

	@media screen and (max-width:1280px){
	    .cont_inner,.inner{width:100% !important;padding:0 30px !important;}
	}

	@media screen and (max-width:980px){
	    .cont_inner,.inner{padding:0 20px !important;}
	}

	@media screen and (max-width:767px){
	    .cont_inner,.inner{padding:0 15px !important;}
	}



/* Button (공통 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.btn{text-transform:uppercase; border-radius:0; line-height:24px;}
	.btn:focus, .btn:active{outline:none; color:#fff;}

	.btn-custom{border-radius:3px; padding:0.8em 1.8em; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:#509591; border-color: #509591; color:#fff;}
	.btn-custom:hover, .btn-custom:focus{background-color:#447774; border-color:#447774; color:#fff;}

	.btn-custom-outline{border-radius:3px; padding:0.8em 1.8em; color:#fff; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:transparent; border-color:#fff;}
	.btn-custom-outline:hover, .btn-custom-outline:focus{color:#fff; background-color:rgba(255,255,255,.5);}
	.btn-bar a{margin-right:10px;}

	.form-control{box-shadow:none; -webkit-box-shadow:none; border-radius:3px; height:38px;}
	.form-control:focus{outline:none; box-shadow:none; -webkit-box-shadow:none; border-color: #509591;}

	.arrow_button{position:relative;display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
	.arrow_button span{font-size:1.5em;color:#444;font-weight:700;white-space:nowrap;font-family:'Montserrat', sans-serif;}
	.arrow_button em{margin-left:15px;display:inline-block;background-repeat:no-repeat;background-position:center center;background-size:auto;}
	.arrow_button.vertical span{text-transform:uppercase;writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;transform:rotate(180deg);-webkit-transform:rotate(180deg);}
	.arrow_button.vertical span:before{content:'';position:absolute;top:-100px;left:50%;margin-left:-20px;width:40px;height:40px;border-radius:50%;background:#bae3ff;}
	.arrow_button.vertical span:after{content:'';position:absolute;top:-80px;left:50%;margin-left:-1px;width:2px;height:60px;background:#333;}
	.arrow_button.single em{width:34px;height:7px;background-image:url('/images/kor12r-22-0460/main/single_arrow.png');}
	.arrow_button.small em{width:17px;height:6px;background-image:url('/images/kor12r-22-0460/common/button_arrow.png');}
	.arrow_button.white em{width:22px;height:8px;background-image:url('/images/kor12r-22-0460/main/list_arrow_more.png');}
	.arrow_button.long em{width:25px;height:12px;background-image:url('/images/kor12r-22-0460/main/arrow_long.png');}
	
	.arrow_button.small span{font-size:16px;font-weight:500;}
	.arrow_button.small:hover span{color:#000;}
	.arrow_button.small:hover:before{content:""; position:absolute; display:block; left:0; bottom:-2px; width:100%; height:1px; background:#000;}

	@media only screen and (max-width: 980px) {

	}



/* Header 
---------------------------------------------------------------------------------------------------------------------------------------------------------- */



/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#footer {position: relative; width: 100%; padding: 50px 0;}
#footer .footer-area {position: relative; width: 1280px; margin: 0 auto;}

#footer .foot-agree {margin-bottom:25px;}
#footer .foot-agree ul {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#footer .foot-agree ul li {padding: 0 20px;}
#footer .foot-agree ul li:not(:last-child) { border-right: 1px solid #afafaf;}
#footer .foot-agree ul li:first-child {padding-left: 0;}
#footer .foot-agree ul li:last-child {padding-right: 0;}
#footer .foot-agree ul li a {display: block; font-size:16px; font-weight:400; color: #464646; line-height: 1;}

#footer .foot-sns {position: absolute;top: 0; right: 0;}
#footer .foot-sns ul {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#footer .foot-sns ul li:not(:last-child) {margin-right:10px;}
#footer .foot-sns ul li a {display: block; width: 45px; height: 45px; border-radius: 50%; background: #efefef; text-align: center; line-height: 45px;}
#footer .foot-sns ul li a i {font-size:26px; line-height: 45px; color: #333;}

#footer .foot-info p, #footer .foot-info li, #footer .foot-info a {font-size: 15px; color: #666; font-weight:300;line-height: 1.6;}
#footer .foot-info ul {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#footer .foot-info ul li {position: relative;}
#footer .foot-info ul li:not(:last-child):after {content: '';display: block; position: absolute; top: 5px; right: 10px; width: 1px; height: 14px; background:#999;}
#footer .foot-info ul li:not(:last-child) {padding-right:20px;}
#footer .copy{padding-top:20px; margin-top:20px; border-top:1px solid #ddd;}

@media screen and (max-width: 1280px) {
  #footer {width: 100%; padding: 30px 15px;}
  #footer .footer-area {width: 100%;}
}

@media screen and (max-width: 768px) {
  #footer .foot-sns {position: relative; margin-bottom:20px;}
  #footer .foot-agree ul li {padding: 0 10px;}
  #footer .foot-agree ul li a{font-size:14px;}
  #footer .foot-info p, #footer .foot-info li, #footer .foot-info a {font-size: 14px; line-height: 1.5;}
  #footer .foot-sns ul {flex-direction:row; justify-content:center;}
  #footer .foot-sns ul li:not(:last-child) {margin-right:20px;}
  #footer .foot-sns ul li a {display: block; width:40px; height: 40px; line-height: 40px;}
  #footer .foot-sns ul li a i {font-size:22px; line-height: 40px;}
}



/* Main Visual (메인이미지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
    .main_visual{position:relative;}
	.main_visual .visual_slide{width:100%;height:930px;}
	.main_visual .visual_slide .item{height:930px;}
    .visual_slide .item.main-img03{background:url("/images/kor12r-22-0460/main/main_visual_02.gif") no-repeat center center/cover;} 
    .visual_slide .item.main-img07{background:url("/images/kor12r-22-0460/main/main_visual_07.gif") no-repeat center center/cover;} 
    .visual_slide .item.main-img01{background:url("/images/kor12r-22-0460/main/main_visual_01.jpg") no-repeat center center/cover;} 

	.main_visual .carousel-caption {
		position: absolute;
		display: table;
		top: 700px;
		left: 1200px;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		text-shadow: none;
		color: #fff;

        
	}
	
	.main_visual .carousel-caption .slogan {
		display: table-cell;
		padding: 0;
		text-align: left;
		line-height: 1.3;
		color: #fff;
		word-break: keep-all;


a:link {
  color : white;
  text-decoration: none;
}
a:visited {
  color : white;
  text-decoration: none;
}
a:hover {
  color : white;
  text-decoration: underline;
}
a:active {
  color : white;
  text-decoration: none;
}
	}

	.main_visual .carousel-caption1 {
		position: absolute;
		display: table;
		top: 700px;
		left: 100px;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		text-shadow: none;
		color: #ffff;
	}
	
	.main_visual .carousel-caption1 .slogan1 {
		display: table-cell;
		padding: 0;
		text-align: left;
		line-height: 1.3;
		color: #ffff;
		word-break: keep-all;

a:link {
  color : White;
  text-decoration: none;
}
a:visited {
  color : White;
  text-decoration: none;
}
a:hover {
  color : White;
  text-decoration: underline;
}
a:active {
  color : White;
  text-decoration: none;
}
    }
	.main_visual .carousel-caption2 {
		position: absolute;
		display: table;
		top: 700px;
		left: 100px;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		text-shadow: none;
		color: #000;
	}
	
	.main_visual .carousel-caption2 .slogan2 {
		display: table-cell;
		padding: 0;
		text-align: left;
		line-height: 1.3;
		color: #000;
		word-break: keep-all;

a:link {
  color : black;
  text-decoration: none;
}
a:visited {
  color : black;
  text-decoration: none;
}
a:hover {
  color : black;
  text-decoration: underline;
}
a:active {
  color : black;
  text-decoration: none;
}
	}

	.main_visual .carousel-caption .slogan p{font-size:20px; font-family: 'NotoSansKR', serif; font-weight:300; }
	.main_visual .carousel-caption .slogan span{font-size:40px; font-family: 'NotoSansKR', serif; font-weight:500; }

	.main_visual .carousel-caption1 .slogan1 p{font-size:20px; font-family: 'NotoSansKR', serif; font-weight:300; }
	.main_visual .carousel-caption1 .slogan1 span{font-size:40px; font-family: 'NotoSansKR', serif; font-weight:500; }

	.main_visual .carousel-caption2 .slogan2 p{font-size:20px; font-family: 'NotoSansKR', serif; font-weight:300; }
	.main_visual .carousel-caption2 .slogan2 span{font-size:40px; font-family: 'NotoSansKR', serif; font-weight:500; }

	.visual_slide .slick-dots{position:absolute;bottom:10px;left:50%;margin-left:-640px;display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex;}
	.visual_slide .slick-dots li button{width:130px;height:3px;font-size:13px;font-weight:bold;color:#fff;background:#ddd;outline:none;border:none;}
	.visual_slide .slick-dots li.slick-active button{background:#000;}
	
	.vis_progress{display:flex; position: absolute; left: 0; bottom:5%; right: 0; flex-direction: row; justify-content: center; z-index: 60;}
	.vis_progress div{display:flex;align-items:center;cursor:pointer;color:#fff; max-width: 180px; padding: 20px; white-space: nowrap; text-align: left;}
	.vis_progress div h6{}
	.vis_progress div span.progressBar{display:block;width:300px;margin-left:5px;height:4px;background-color:rgba(255,255,255,0.33);}
	.vis_progress div span.progressBar .inProgress{display:block;width:0%;height:4px;background-color:rgba(255,255,255,1);}



	@keyframes slickAni{
	  from {transform:scale(1.3) translate(0px);}
	  to {transform:scale(1.0) translate(0px);}
	}
	@-webkit-keyframes slickAni {
	  from {transform:scale(1.3) translate(0px);}
	  to {transform:scale(1.0) translate(0px);}
	}
	
	@media screen and (min-width:1281px){
		.main-visual .carousel-caption {width: 1281px;}
		.main_visual .carousel-caption{top:250px;}		




	}

	@media screen and (max-width:1280px){
		.vis_progress li span.progressBar{width:80px;}
	}

	@media screen and (max-width:980px){
		.main_visual .visual_slide,.main_visual .vis_cont{height:450px;}
		.main_visual .visual_slide{height:450px;}
		.main_visual .visual_slide .item{height:450px;}
		.main_visual .vis_cont{top:40%;left:auto;right:auto;bottom:auto;padding:unset;}
		.main_visual .carousel-caption{top:250px;}		
        .main_visual .carousel-caption .slogan span{font-size:20px;}
		.main_visual .carousel-caption .slogan p{font-size:13px;}
		.main_visual .carousel-caption1{top:250px;}
		.main_visual .carousel-caption1 .slogan1 span{font-size:20px;}
		.main_visual .carousel-caption1 .slogan1 p{font-size:13px;}
		.main_visual .carousel-caption2{top:250px;}
		.main_visual .carousel-caption2 .slogan2 span{font-size:20px;}
		.main_visual .carousel-caption2 .slogan2 p{font-size:13px;}

	}

	@media screen and (max-width:768px){
		.main_visual .visual_slide,.main_visual .vis_cont{height:450px;}
		.main_visual .visual_slide{height:450px;}
		.main_visual .visual_slide .item{height:450px;}
		.main_visual .vis_cont{top:40%;}
		.main_visual .carousel-caption{top:250px;}
		.main_visual .carousel-caption .slogan span{font-size:20px;}
		.main_visual .carousel-caption .slogan p{font-size:13px;}
		.main_visual .carousel-caption1{top:250px;}
		.main_visual .carousel-caption1 .slogan1 span{font-size:20px;}
		.main_visual .carousel-caption1 .slogan1 p{font-size:13px;}
		.main_visual .carousel-caption2{top:250px;}
		.main_visual .carousel-caption2 .slogan2 span{font-size:20px;}
		.main_visual .carousel-caption2 .slogan1 p{font-size:13px;}


		
		.vis_progress div{max-width:100px;}
		.vis_progress div span.progressBar{width:60px;}

	}

	@media screen and (max-width:500px){
		.main_visual .carousel-caption{top:250px;}
        .main_visual .carousel-caption .slogan span{font-size:20px;}
		.main_visual .carousel-caption .slogan p{font-size:13px;}
		.main_visual .carousel-caption1{top:250px;}
		.main_visual .carousel-caption1 .slogan1 span{font-size:20px;}
		.main_visual .carousel-caption1 .slogan1 p{font-size:13px;}
		.main_visual .carousel-caption2{top:250px;}
		.main_visual .carousel-caption2 .slogan2 span{font-size:20px;}
		.main_visual .carousel-caption2 .slogan2 p{font-size:13px;}


	}



/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#mainContainer{z-index:555;}
.main-container{width:100%;position:relative; margin:0;padding:0;}	

.main-container .section{padding:100px 0; position:relative;}
.main-container .section:after{content:'';clear:both;display:block;}
.main-container .section .cont-inner{position:relative; width:1280px; margin:0 auto;}
.main-container .m-title{font-size:54px; margin-bottom:60px; text-align:center; color:#222; line-height:1.4; font-family: 'NotoSansKR', serif; font-weight:700;}
.main-container .m-title span{display:block;margin-top:10px; font-size:22px; color:#05453b; font-family:'Cinzel', sans-serif; font-weight:400;}
.main_section01 .m-title{font-family:'Cinzel';font-size:48px}

.section01-wrap{width:100%; position:relative; }
.section01-wrap:before{content:'';position:absolute;bottom:0px;left:0px;width:45%;height:100%;background:#05453b; z-index:-1;}
.main_section01_inner {position:relative; padding-left:33%;margin: 0 auto;}
.main_section01_inner div._title {position:absolute; left:17%; top:60px; width:300px;}
.main_section01_inner .section01_inner {position:relative; padding-left:80px;}

.main_section01_inner .main_section_title{margin-bottom: 30px;}
.main_section01_inner .main_section_title strong{font-size:38px; line-height:1.1; font-family: 'NotoSansKR', serif;color:#fff; font-weight:700; text-transform:uppercase;}
.main_section01_inner .main_section_title span{font-size:18px;  margin-top:30px;  display:block; color:#c4cccb; line-height:1.3;}
.main_section01_inner .btn-area { margin-top:20px;}
.main_section01_inner .btn-area i{margin-left:10px;}
.main_section01_inner .btn-area em{background:url('/images/kor12r-22-0460/main/arrow_s.png') no-repeat; margin-left:10px; width:15px; height:15px; display:inline-block;}
.main_section01_inner .btn-area a {
    display: flex;
    width: 140px;
    height: 48px;
    color: #fff;
    text-align: center;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border: 1px solid #9bb5b1;
}

.section01_inner .slide-wrap {width: 100%;}
.section01_inner .slide-wrap .owl-item {width: 33.3%;}
.section01_inner .owl-stage-outer {width: 1920px !important;}
/*.section01_inner .owl-stage-outer {height:460px !important;}*/
.section01_inner .slide-wrap .slide-list {position: relative;  height: 300px !important;}
.section01_inner .owl-controls {position: absolute; left:15%; bottom:0; display:flex;}
.section01_inner .slide-wrap .slide-list .owl-controls .owl-dots {display: none !important;}
.section01_inner .gallery-wrap .gallery-list .owl-controls .owl-nav{display:none; }


.section02-wrap{width:100%; position:relative; min-height:580px; background:url('/images/kor12r-22-0460/main/office_3.png') no-repeat left center; }
.section02-wrap:after{content:'';clear:both;display:block;}
.section02-wrap .main_section02_inner{position:absolute; right:0; top:25%; background:#fff; width:50%; text-align:left; padding:70px; box-shadow:0 0 25px rgb(0,0,0,.1);}
.main_section02_inner h3{font-size:36px; color:#222; line-height:1.4; font-weight:400; margin-bottom:30px;}
.main_section02_inner p{font-size:18px; color:#666; line-height:1.4; font-weight:300;}
.main_section02_inner .btn-area{padding-top:30px; text-align:right;}
.main_section02_inner .btn-area a{font-weight:400; color: #222;font-size: 20px;}


.main_section03{position:relative;}
.main_section03_inner .slick-dots{
	position:absolute;
	bottom:0;
	left:0; 
	right:0;
	justify-content:center;
	display:-webkit-inline-box;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:-webkit-inline-flex;
	display:inline-flex;
}
.main_section03_inner .slick-dots li button{width:80px;height:5px;background:#ddd;text-indent:-9999px;outline:none;border:none;}
.main_section03_inner .slick-dots li.slick-active button{background:#000;}
.main_section03_inner .slick-arrow{display:none !important;}
.webzine_slide{width:100%; padding-top:30px; padding-bottom:100px;}
.webzine_slide .cont{position:relative; margin:0 10px;}
.webzine_slide .cont:nth-child(even){padding-top:50px;}
.webzine_slide .cont .t_cont{bottom:30px;left:30px;color:#fff;position:absolute;}
.webzine_slide .cont .t_cont em{font-size:0.938em;margin-bottom:10px;font-family:'Montserrat', sans-serif;font-style:normal;}
.webzine_slide .cont img{display:block;}
.webzine_slide .cont h5{font-size:28px; color:#fff; font-weight:400; text-shadow:0 0 20px rgba(0,0,0,1);}
.main_section03_inner .btn-area { margin-top:50px;}
.main_section03_inner .btn-area i{margin-left:10px;}
.main_section03_inner .btn-area em{background:url('/images/kor12r-22-0460/main/arrow_s02.png') no-repeat; margin-left:10px; width:15px; height:15px; display:inline-block;}
.main_section03_inner .btn-area a {
    display: flex;
    width: 140px;
    height: 48px;
    color: #333;
    text-align: center;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border: 1px solid #333;
	margin:0 auto;
}

.main_section04{width:100%; position:relative; }
.main_section04:before{content:'';position:absolute; top:0px;left:0px;width:100%;height:50%;background:#05453b; z-index:-1;}
.main_section04 .m-title,
.main_section04 .m-title span{color:#fff;}
.section04-wrap .ban-box{padding:180px 20px; margin-bottom:50px; text-align:center; background:url('/images/kor12r-22-0460/main/network_3.png') no-repeat center center/cover; }
.section04-wrap .ban-box span{position:relative; font-size:36px; text-align:center; color:#fff; line-height:1.3; font-weight:500; z-index:1;text-shadow:1px 1px 2px black;}
.section04-wrap .ban-box span:after {content:''; display:inline-block; position:absolute; bottom:7px; left:0; width:100%; height:26px; z-index:-1;
	}
.section04-wrap .ban-box br{display:none;}
.section04-wrap p{font-size:20px; text-align:center; color:#333; line-height:1.4; font-weight:400;}
.main_section04 .cont-inner .go-btn{position:absolute; top:0; left:0; display:block; width:100%; height:100%; text-indent:-9999em; overflow:hidden; z-index:2;}

.main-container .section.main_section05{padding:0;}
.main_section05 .full-banner{display:table;width:100%; padding:170px 20px; text-align:center; background:url('/images/kor12r-22-0460/main/main_visual_02.gif') no-repeat center center/cover;}
.main_section05 .full-banner a{display:table-cell; vertical-align:middle;}
.main_section05 .full-banner h3{font-size:40px; line-height:1.2; font-family:'NotoSansKR' !important;color:#fff; font-weight:700; text-transform:uppercase;}
.main_section05 .full-banner h3 span{font-size:20px; display:block; margin-top:20px; color:#fff; font-family:'NotoSansKR', sans-serif; font-weight:400; }

.main_section05 .side-banner{display:flex;}
.main_section05 .side-banner > div{width:50%; color:#fff; text-align:left;}
.main_section05 .side-banner > div h3{font-size:28px; font-weight:500; margin-bottom:10px;}
.main_section05 .side-banner > div p{font-size:20px; font-weight:300; }
.main_section05 .side-banner > div > div{position:relative; width:640px; padding:80px;}
.main_section05 .side-banner .location{background:url('/images/kor12r-22-0460/main/video.jpg') no-repeat center center/cover;}
.main_section05 .side-banner .community{background:url('/images/kor12r-22-0460/main/data.jpg') no-repeat center center/cover;}
.main_section05 .side-banner .location:after{content:'';clear:both;display:block;}
.main_section05 .side-banner .go-btn{position:absolute; top:0; left:0; display:block; width:100%; height:100%; text-indent:-9999em; overflow:hidden;}
.main_section05 .side-banner > div > div i{position:absolute; content:""; right:0; top:50%; width:48px; height:29px; background:url('/images/kor12r-22-0460/main/main_ban_arrow.png') no-repeat;}


@media only screen and (min-width:1281px) {
	.main_section05 .side-banner .location > div{float:right; padding-left:0;}
	.main_section05 .side-banner .location > div i{right:80px;}
}

@media only screen and (max-width:1280px) {
	.main-container .section .cont-inner{width:100%; padding:0 30px;}
	.main_section05 .side-banner > div > div{width:100%; padding:80px 40px;}
	.main_section05 .side-banner > div > div i{right:40px;}
}

@media only screen and (max-width:1024px) {
    .section01-wrap:before{width:100%; height:50%; top:0;}
	.main_section01_inner{padding:0 30px;}
	.main_section01_inner div._title{position:relative; left:0; top:0; padding-top:50px; width:100%;}
	.main_section01_inner .section01_inner{padding-left:0;}
	.section01_inner .owl-controls{left:0; right:0;}	
	.section02-wrap .main_section02_inner{width:70%;}
}


@media only screen and (max-width:980px) {
	.main-container .section{padding:80px 0;}
	.main-container .section .cont-inner{padding:0 20px;}

	.section02-wrap{background-position:center center; background-size:cover;}
	.section02-wrap .main_section02_inner{top:50%; width:80%; padding:50px;}

}


@media only screen and (max-width:768px) {	
	.main-container .m-title{font-size:30px; margin-bottom:30px;}
	.main-container .m-title span{font-size:16px; margin-top:5px;}
.main_section01 .m-title{font-size:26px;}

.main_section01_inner{padding:0 15px;}
	.main_section01_inner .main_section_title{margin-bottom:20px;}
	.main_section01_inner .main_section_title strong{font-size:26px;}
	.main_section01_inner .main_section_title span{font-size:16px; margin-top:10px;}
	.main_section01_inner .btn-area a{width:120px; height:40px; font-size:14px;}
	
	.section02-wrap{min-height:460px;}
	.main_section02_inner h3{font-size:22px; line-height:1.3; margin-bottom:20px;}
	.main_section02_inner p{font-size:16px; line-height:1.3;}
	.main_section02_inner .btn-area{padding-top:20px;}
	.main_section02_inner .btn-area a{font-size:15px;}
	.webzine_slide .cont .t_cont{bottom:20px;left:20px;}
	.webzine_slide .cont h5{font-size:18px;}
	
	.main_section03_inner .btn-area{margin-top:30px;}
	.main_section03_inner .btn-area a{width:120px; height:40px; font-size:14px;}

	.section04-wrap .ban-box{padding:100px 20px; margin-bottom:30px;}
	.section04-wrap .ban-box span{font-size:24px;}
	.section04-wrap .ban-box span:after {bottom:5px; height:18px;}
	.section04-wrap .ban-box br{display:block;}
	.section04-wrap p{font-size:16px;}

	.main_section05 .full-banner{padding:100px 20px;}
	.main_section05 .full-banner h3{font-size:24px;}
	.main_section05 .full-banner h3 span{font-size:16px; margin-top:5px;}

	.main_section05 .side-banner > div h3{font-size:22px;}
	.main_section05 .side-banner > div p{font-size:16px;}
	.main_section05 .side-banner > div > div{padding:50px 20px;}
	.main_section05 .side-banner > div > div i{right:20px;}
}

@media only screen and (max-width:620px) {	
	.section01_inner .owl-controls {top:0}
	.section01_inner .gallery-wrap .gallery-list .owl-controls .owl-nav{display:block;}
	.section01_inner .gallery-wrap .gallery-list .owl-controls .owl-prev {top:-13%; left:inherit; right:50px;}
	.section01_inner .gallery-wrap .gallery-list .owl-controls .owl-next {top:-13%;  right:10px;}

	.section01_inner .gallery-wrap .gallery-list .owl-controls .owl-prev,
	.section01_inner .gallery-wrap .gallery-list .owl-controls .owl-next{
		width:34px; height:34px; border-radius:50px; border:1px solid #fff; line-height:36px;}
	
	.main_section03_inner{padding:0 45px;}
	.main_section03_inner .slick-dots{display:none !important;}
	.main_section03_inner .slick-arrow{display:block !important; position:absolute;top:0px;width:36px;height:36px;text-indent:-9999px;outline:none; border:0; background:transparent}
	.main_section03_inner .slick-arrow.slick-prev{left:-40px; top:40%; background-image:url('/images/kor12r-22-0460/main/w_arrow_prev.png');}
	.main_section03_inner .slick-arrow.slick-next{right:-40px; top:40%; background-image:url('/images/kor12r-22-0460/main/w_arrow_next.png');}
	.webzine_slide{padding-top:0; padding-bottom:0;}
	.webzine_slide .cont:nth-child(even){padding-top:0;}
	
	.main_section05 .side-banner{flex-direction:column}
	.main_section05 .side-banner > div{width:100%;}
	
}

@media only screen and (max-width:500px) {	
	.main-container .section{padding:30px 0;}
	.main-container .section .cont-inner{padding:0 10px;}
	
	.main-container .main_section02{padding-bottom:60px;}
	.section02-wrap .main_section02_inner{width:90%; padding:20px;}
	.section02-wrap{min-height:380px;}
	.main_section02_inner h3 br, .main_section02_inner p br{display:none;}
	
	.main-container .section.main_section04{margin-top:40px; padding:40px 0;}
	.section04-wrap .ban-box{padding:60px 10px;}

	.main_section05 .full-banner{padding:60px 10px;}
	.main_section05 .side-banner .community p{letter-spacing:-1px;}
}


/* si Contents (신제품)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
    #hayan-business-section {
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 20px;
        font-family: 'Noto Sans KR', sans-serif;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease-out;
    }

    #hayan-business-section.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .hayan-title-area {
        margin-bottom: 40px;
    }
    .hayan-title-area h2 {
        font-size: 32px;
        font-weight: 700;
        color: #333;
        margin-bottom: 10px;
    }
    .hayan-title-area p {
        font-size: 16px;
        color: #666;
    }

    .hayan-content-display {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        margin-bottom: 50px;
        min-height: 200px;
        align-items: center;
    }

    .hayan-main-img {
        flex: 1 1 50%;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }

    .hayan-main-img img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.5s ease;
    }

    .hayan-main-desc {
        flex: 1 1 40%;
        padding: 20px;
        animation: fadeInRight 0.5s ease forwards;
    }

    .hayan-main-desc h3 {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #111;
    }

    .hayan-main-desc p {
        font-size: 16px;
        line-height: 1.6;
        color: #555;
        margin-bottom: 30px;
        word-break: keep-all;
    }

    .hayan-btn-more {
        display: inline-block;
        padding: 12px 30px;
        border: 1px solid #ccc;
        text-decoration: none;
        color: #333;
        transition: all 0.3s;
        font-size: 14px;
    }

    .hayan-btn-more:hover {
        background: #0054a6 ;
        border-color: #0054a6 ;
        color: #fff;
    }

    /* --- 수정된 하단 썸네일 영역 --- */
    .hayan-nav-list {
        display: flex;
        gap: 15px; /* 간격 살짝 넓힘 */
        justify-content: space-between;
        overflow-x: auto;
        padding-bottom: 15px;
    }

    .hayan-nav-item {
        flex: 1;
        min-width: 150px; /* 요청하신 너비 150px 반영 */
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: all 0.3s;
        opacity: 0.6;
    }

    .hayan-nav-item:hover {
        opacity: 1;
        transform: translateY(-10px); /* 사진이 커졌으므로 움직임도 조금 더 줌 */
    }

    .hayan-nav-item.active {
        opacity: 1;
        border-bottom: 3px solid #05453b ;
    }

    .hayan-nav-item img {
        width: 100%;
        height: 200px; /* 요청하신 높이 200px 반영 */
        object-fit: cover; /* 이미지가 찌그러지지 않고 영역을 꽉 채우도록 설정 */
        border-radius: 4px;
        margin-bottom: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 사진이 커져서 그림자 추가하면 더 예쁨 */
    }

    .hayan-nav-item span {
        display: block;
        text-align: center; /* 사진이 커졌으니 가운데 정렬이 더 안정적임 */
        font-weight: 600;
        font-size: 15px;
        color: #333;
        padding-top: 5px;
    }
    
    .hayan-nav-item.active span {
        color: #000;
    }

    @keyframes fadeInRight {
        from { opacity: 0; transform: translateX(20px); }
        to { opacity: 1; transform: translateX(0); }
    }

    @media (max-width: 768px) {
        .hayan-content-display {
            flex-direction: column;
        }
        .hayan-main-img, .hayan-main-desc {
            flex: 1 1 100%;
            width: 100%;
        }
        .hayan-nav-list {
            justify-content: flex-start;
        }
        /* 모바일에서는 썸네일 크기를 조금 줄여도 됨 (선택사항) */
        /* .hayan-nav-item img { height: 150px; } */
    }




/* --- 하얀메디칼 메인 배너 스타일 시작 --- */

/* 전체 섹션 컨테이너 */
#hayan-hero-section {
    position: relative;
    width: 100%;
    height: 1000px; /* PC 화면 기본 높이 */
    overflow: hidden; /* 이미지 확대 시 영역 밖으로 나가는 것 방지 */
    display: flex;
    align-items: center; /* 박스 수직 중앙 정렬 */
    justify-content: center; /* 박스 수평 중앙 정렬 */
    color: #fff;
    font-family: 'Noto Sans KR', sans-serif;
}

/* 배경 이미지 영역 */
.hayan-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 가장 뒤로 배치 */
}

.hayan-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 비율을 유지하며 영역을 꽉 채움 */
    transition: transform 0.6s ease-out; /* 부드러운 확대 효과 */
}

/* 반투명 텍스트 박스 */
.hayan-hero-overlay-box {
    position: relative;
    z-index: 2; /* 배경보다 위에 배치 */
    background-color: rgba(0, 0, 0, 0.1); /* 검은색 배경, 투명도 60% (0.6을 조절하세요) */
    padding: 50px;
    max-width: 500px; /* 박스 최대 너비 */
    width: 90%; /* 모바일에서는 90% 너비 */
    text-align: center;
    border-radius: 8px; /* 모서리 둥글게 */
    backdrop-filter: blur(5px); /* (선택사항) 박스 뒤 배경을 흐리게 - 최신 브라우저 지원 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 얇은 테두리 */
    transition: all 0.4s ease; /* 부드러운 움직임 효과 */
}

/* 박스 안 텍스트 스타일 */
.hayan-hero-overlay-box h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hayan-hero-overlay-box p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

/* 버튼 스타일 */
.hayan-hero-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: #;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.hayan-hero-btn:hover {
    background-color: #; /* 버튼 호버 시 색상 변경 */
}

/* --- 마우스 호버 애니메이션 효과 --- */
#hayan-hero-section:hover .hayan-hero-bg img {
    transform: scale(1.05); /* 배경 이미지 살짝 확대 */
}

#hayan-hero-section:hover .hayan-hero-overlay-box {
    transform: translateY(-10px); /* 텍스트 박스 살짝 위로 떠오름 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); /* 그림자 강화 */
    background-color: rgba(0,0,0,0.2); /* 호버 시 박스가 조금 더 어두워짐 */
}

/* --- 모바일 반응형 스타일 --- */
@media (max-width: 768px) {
    #hayan-hero-section {
        height: 450px; /* 모바일에서 높이 줄임 */
    }
    .hayan-hero-overlay-box {
        padding: 30px 20px; /* 패딩 줄임 */
    }
    .hayan-hero-overlay-box h2 {
        font-size: 28px; /* 폰트 크기 줄임 */
    }
    .hayan-hero-overlay-box p {
        font-size: 15px;
    }
    .hayan-hero-btn {
        padding: 12px 30px;
        font-size: 14px;
    }
}
/* --- 하얀메디칼 메인 배너 스타일 끝 --- */


    /* === 1. 기본 스타일 (이전과 동일) === */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    .network-section {
        font-family: 'Noto Sans KR', sans-serif;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 20px;
        background-color: #fff;
        position: relative;
    }

    .network-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
    }

    /* === 2. 좌측 지도 === */
    .map-area {
        flex: 1 1 45%;
        min-width: 300px;
        text-align: center;
        opacity: 0;
        transform: translateX(-50px);
        transition: all 1s ease;
    }
    .map-img {
        width: 100%;
        height: auto;
        max-width: 500px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        transition: transform 0.5s ease;
    }
    .map-img:hover { transform: scale(1.02); }

    /* === 3. 우측 지사 리스트 === */
    .branch-list {
        flex: 1 1 45%;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .branch-item {
        background: #f9f9f9;
        padding: 20px 30px;
        border-radius: 12px;
        border-left: 5px solid #ccc;
        cursor: pointer; /* 클릭 가능 표시 */
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.4s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .branch-item:hover {
        background: #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transform: translateX(10px);
        border-left-color: #0056b3;
    }
    .branch-name { font-size: 1.2rem; font-weight: 700; color: #333; }
    .branch-desc {
        font-size: 0.9rem; color: #666; opacity: 0; max-width: 0;
        white-space: nowrap; overflow: hidden; transition: all 0.4s ease;
    }
    .branch-item:hover .branch-desc { opacity: 1; max-width: 200px; margin-left: 10px; }
    .branch-item.headquarters { background: #eef4ff; border-left-color: #0056b3; }

    /* 애니메이션 활성화 */
    .active .map-area { opacity: 1; transform: translateX(0); }
    .active .branch-item { opacity: 1; transform: translateY(0); }

    /* === 4. 팝업(모달) 스타일 === */
    .modal-overlay {
        display: none; /* 기본 숨김 */
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .modal-overlay.open {
        display: flex;
        opacity: 1;
    }
    .modal-box {
        background: #fff;
        width: 90%;
        max-width: 500px;
        padding: 40px;
        border-radius: 15px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        position: relative;
        transform: translateY(20px);
        transition: transform 0.3s ease;
        text-align: left;
    }
    .modal-overlay.open .modal-box {
        transform: translateY(0);
    }
    .modal-close {
        position: absolute;
        top: 15px; right: 20px;
        font-size: 28px;
        color: #999;
        cursor: pointer;
        background: none;
        border: none;
    }
    .modal-close:hover { color: #333; }
    
    /* 팝업 내부 콘텐츠 */
    .modal-title { font-size: 1.6rem; font-weight: bold; margin-bottom: 20px; color: #0056b3; border-bottom: 2px solid #eee; padding-bottom: 15px; }
    .modal-info-row { margin-bottom: 12px; font-size: 1rem; color: #444; display: flex; align-items: flex-start; }
    .modal-label { font-weight: bold; width: 80px; color: #333; flex-shrink: 0; }
    
    /* 모바일 반응형 */
    @media (max-width: 768px) {
        .network-container { flex-direction: column; }
        .map-area { order: 1; width: 100%; }
        .branch-list { order: 2; width: 100%; }
    }




    /* 전체 컨테이너 설정 */
    .split-section {
        display: flex;
        flex-wrap: wrap; /* 모바일에서 줄바꿈 허용 */
        width: 100%;
        height: 600px; /* 섹션 높이 설정 (조절 가능) */
        font-family: 'Pretendard', 'Noto Sans KR', sans-serif; /* 폰트 설정 */
    }

    /* 각 영역 공통 스타일 */
    .split-item {
        flex: 1; /* 1:1 비율로 분할 */
        min-width: 320px; /* 최소 너비 */
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }

    /* 배경 이미지 설정 (이 부분을 실제 이미지 경로로 바꿔주세요) */
    .item-left {
        /* 파란색 건물 느낌의 배경 */
        background-image: url('/images/kor12r-22-0460/si/introduce/BIO.png');
    }
    .item-right {
        /* 자연/인물 느낌의 배경 */
        background-image: url('/images/kor12r-22-0460/si/introduce/UBE_SYSTEM.png');
    }

    /* 배경 어둡게 깔아주는 오버레이 (텍스트 가독성용) */
    .split-item::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.1); /* 검은색 투명도 40% */
        z-index: 1;
        transition: background 0.3s;
    }
    
    /* 마우스 올렸을 때 배경 살짝 더 어둡게 */
    .split-item:hover::before {
        background: rgba(0, 0, 0, 0.3);
    }

    /* 콘텐츠 박스 (글자와 버튼들) */
    .content-box {
        position: relative;
        z-index: 2; /* 오버레이보다 위에 표시 */
        color: #fff;
        width: 100%;
        max-width: 400px;
        padding: 20px;
    }

    /* 타이틀 스타일 */
    .title {
        font-size: 3rem; /* 48px */
        font-weight: 700;
        margin-bottom: 10px;
        letter-spacing: -1px;
    }
    
    .external-icon {
        font-size: 1.5rem;
        vertical-align: top;
        font-weight: 400;
    }

    /* 설명 텍스트 스타일 */
    .desc {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 40px;
        opacity: 0.9;
        word-break: keep-all;
    }

    /* 버튼 그룹 컨테이너 */
    .link-group {
        display: flex;
        flex-direction: column;
        gap: 0; /* 버튼 사이 간격 없음 (테두리가 겹치지 않게 처리 필요) */
    }

    /* 투명 버튼 스타일 */
    .ghost-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        text-decoration: none;
        padding: 15px 20px;
        border: 1px solid rgba(255, 255, 255, 0.4); /* 반투명 테두리 */
        margin-top: -1px; /* 테두리 겹침 방지 */
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    /* 첫 번째 버튼 위쪽 둥글게 (선택사항) */
    .ghost-btn:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.4);
    }

    /* 버튼 호버 효과 */
    .ghost-btn:hover {
        background: rgba(255, 255, 255, 0.15); /* 배경색 살짝 흰색 */
        padding-left: 25px; /* 텍스트 살짝 이동 */
    }

    .ghost-btn .arrow {
        font-size: 1.2rem;
        transition: transform 0.3s;
    }

    .ghost-btn:hover .arrow {
        transform: translateX(5px); /* 화살표 이동 */
    }

    /* 모바일 반응형 처리 */
    @media (max-width: 768px) {
        .split-section {
            height: auto; /* 높이 자동 */
            flex-direction: column;
        }
        .split-item {
            height: 500px; /* 모바일에서 각 영역 높이 */
        }
        .title {
            font-size: 2.5rem;
        }
    }




    .hm-banner-grid {
        background-color: #f8f9fa;
        padding: 60px 20px;
        text-align: center;
    }
    .hm-grid-container {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 20px;
    }
    .hm-grid-item {
        flex: 1;
        min-width: 200px;
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transition: transform 0.3s;
    }
    .hm-grid-item:hover {
        transform: translateY(-5px); /* 마우스 올리면 살짝 뜸 */
    }
    .hm-icon-circle {
        width: 60px;
        height: 60px;
        background: #eef4ff;
        color: #004080;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin: 0 auto 15px;
        font-weight: bold;
    }
    .hm-grid-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }
    .hm-grid-text {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
    }




    .hm-banner-vision {
        position: relative;
        width: 100%;
        height: 300px; /* 배너 높이 조절 가능 */
        background: url('/images/kor12r-22-0460/main/main_visual_01.jpg') no-repeat center center/cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
        overflow: hidden;
    }
    /* 배경을 어둡게 덮어 글씨가 잘 보이게 함 */
    .hm-banner-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.3); 
        z-index: 1;
    }
    .hm-vision-content {
        position: relative;
        z-index: 2;
        padding: 20px;
    }
    .hm-vision-title {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 15px;
        letter-spacing: -0.5px;
    }
    .hm-vision-desc {
        font-size: 16px;
        margin-bottom: 25px;
        opacity: 0.9;
    }
    .hm-vision-btn {
        padding: 12px 30px;
        border: 1px solid #fff;
        color: #fff;
        text-decoration: none;
        transition: all 0.3s;
        display: inline-block;
    }
    .hm-vision-btn:hover {
        background: #fff;
        color: #003366;
        font-weight: bold;
    }



 /* --- 하얀메디칼 서브 배너 스타일 시작 --- */

/* 전체 섹션 컨테이너 */
#hayan-hero2-section {
    position: relative;
    width: 100%;
    height: 550px; /* PC 화면 기본 높이 */
    overflow: hidden; /* 이미지 확대 시 영역 밖으로 나가는 것 방지 */
    display: flex;
    align-items: center; /* 박스 수직 중앙 정렬 */
    justify-content: center; /* 박스 수평 중앙 정렬 */
    color: #fff;
    font-family: 'Noto Sans KR', sans-serif;
}

/* 배경 이미지 영역 */
.hayan-hero2-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 가장 뒤로 배치 */
}

.hayan-hero2-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 비율을 유지하며 영역을 꽉 채움 */
    transition: transform 0.6s ease-out; /* 부드러운 확대 효과 */
}

/* 반투명 텍스트 박스 */
.hayan-hero2-overlay-box {
    position: relative;
    z-index: 2; /* 배경보다 위에 배치 */
    background-color: rgba(0, 0, 0, 0.1); /* 검은색 배경, 투명도 60% (0.6을 조절하세요) */
    padding: 50px;
    max-width: 500px; /* 박스 최대 너비 */
    width: 90%; /* 모바일에서는 90% 너비 */
    text-align: center;
    border-radius: 8px; /* 모서리 둥글게 */
    backdrop-filter: blur(5px); /* (선택사항) 박스 뒤 배경을 흐리게 - 최신 브라우저 지원 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 얇은 테두리 */
    transition: all 0.4s ease; /* 부드러운 움직임 효과 */
}

/* 박스 안 텍스트 스타일 */
.hayan-hero2-overlay-box h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hayan-hero2-overlay-box p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

/* 버튼 스타일 */
.hayan-hero2-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: #;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.hayan-hero2-btn:hover {
    background-color: #; /* 버튼 호버 시 색상 변경 */
}

/* --- 마우스 호버 애니메이션 효과 --- */
#hayan-hero2-section:hover .hayan-hero2-bg img {
    transform: scale(1.05); /* 배경 이미지 살짝 확대 */
}

#hayan-hero2-section:hover .hayan-hero2-overlay-box {
    transform: translateY(-10px); /* 텍스트 박스 살짝 위로 떠오름 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); /* 그림자 강화 */
    background-color: rgba(0,0,0,0.2); /* 호버 시 박스가 조금 더 어두워짐 */
}

/* --- 모바일 반응형 스타일 --- */
@media (max-width: 768px) {
    #hayan-hero2-section {
        height: 450px; /* 모바일에서 높이 줄임 */
    }
    .hayan-hero2-overlay-box {
        padding: 30px 20px; /* 패딩 줄임 */
    }
    .hayan-hero2-overlay-box h2 {
        font-size: 28px; /* 폰트 크기 줄임 */
    }
    .hayan-hero2-overlay-box p {
        font-size: 15px;
    }
    .hayan-hero2-btn {
        padding: 12px 30px;
        font-size: 14px;
    }
}
/* --- 하얀메디칼 서브 배너 스타일 끝 --- */