@import url("https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre:400,500|Lora:400,400i,700,700i|Roboto:300,400,500,600,700");

.ui-widget-content {z-index: 9999999 !important;}


/* main */
.fixed-header {position:relative !important;top:0 !important; left:0;width:100%;padding:0px 0; animation:slide-down 0.3s; opacity:1;}
 
.section { background-size: cover; text-align:center; background-position: center top; position: relative;}

.main_img { position: relative; overflow: hidden;  height: 682px; top: 60px; background: #ebebee;}

.slide_img div.fp-tableCell {height: auto !important;}
.slide1_img {background-image: url(/img/posart/main_img.png);     background-size: cover;}
.slide2_img {background-image: url(/img/posart/main_img1.png);     background-size: cover;}
.slide3_img {background-image: url(/img/posart/main_img2.png);     background-size: cover;}
.slider_box {margin: 0 auto; width: 1400px;  }
.slick-dots { bottom: 20px !important;}

#section0 {position: relative; text-align:center;margin: 0 auto; width: 100%;}
#section0 div.slick-slide img {width: 100%;  height: 622px;} 
.section0_slider {position: relative; width: 100%; margin: 0 auto; text-align:center;    }
.fp-slides { background-image: url(/img/front/kr/new/main_movie_bg.png);  background-size: cover; }


#section1 .container { display: flex;  flex-direction: row;  flex-wrap: nowrap;  justify-content:center;  align-items: center;  align-content: center; padding: 50px 0px; gap: 20%;}
#section1 li {padding-top: 120px;  font-size: 16px;  line-height: 21px; cursor: pointer; transition: .3s;}
#section1 li:hover {transform: translateY(-10px);}
#section1 li p {font-size: 24px; font-weight: bold; padding-bottom:20px; }
#section1 li.icon01 {background: url(/img/posart/section1_icon01.svg) no-repeat top center; }
#section1 li.icon02 {background: url(/img/posart/section1_icon02.svg) no-repeat top center; }
#section1 li.icon03 {background: url(/img/posart/section1_icon03.svg) no-repeat top center; }
#section1 li.icon04 {background: url(/img/posart/section1_icon04.svg) no-repeat top center; }
#section1 li.icon05 {background: url(/img/posart/section1_icon05.svg) no-repeat top center; }

#section2 .container { display: flex;  flex-direction: row;  flex-wrap: nowrap;  justify-content: space-around;  align-items: center;  align-content: center; padding: 50px 0px;}
#section2 .opacity {background:#000000; opacity: 0.6;}
#section2 li { font-size: 16px; line-height: 21px; padding: 50px; width: 25%; height: 222px; border: 1px solid #f9fafa;overflow: hidden; transition: .3s; cursor: pointer;}
#section2 li:hover {opacity: 0.8; border: 1px solid #f9fafa;/* background-size: 120% !important; -webkit-transform: scale(1.15);  transform: scale(1.15); */}
#section2 li p {font-size: 30px; font-weight: bold; margin-top: 60px; padding-bottom:50px;color: #ffffff;}
#section2 li p:after {content: "+"; display: block; margin-top: 50px; font-size: 50px; font-weight: initial;}
#section2 li.icon01 {background: url(/img/posart/section2_img01.png) no-repeat center center; background-size: cover; }
#section2 li.icon02 {background: url(/img/posart/section2_img02.png) no-repeat center center; background-size: cover;}
#section2 li.icon03 {background: url(/img/posart/section2_img03.png) no-repeat center center; background-size: cover;}
#section2 li.icon04 {background: url(/img/posart/section2_img04.png) no-repeat center center; background-size: cover;}

.section_centent1 {padding: 8% 0px;}
.section_centent1 h1 { margin-top: 0px; color: rgba(0, 0, 0, 0.8);font-size: 45px; font-weight: 500; padding:0px 0px 10px 0px;}
.section_centent1 h2 {font-size: 20px;   font-weight: 400; padding: 0px; margin-top: 0px;  margin-bottom:50px;}
.section_centent1 h2 span {color: #ffa32d;  }
.section_centent1 h3 { font-size: 18px; font-weight: bold; margin:10px 0px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.section_box1 {margin-top: 2%;}
.section_box1 li {display: inline-block; width: 93% !important; line-height: 28px;font-size: 16px; padding:30px 0px; text-align: center; letter-spacing: -0.5px; cursor: pointer; border: 1px solid #cacaca; }
.section_box1 li:hover { border: 1px solid #cacaca;    background:#ffffff;cursor: pointer; box-shadow: 1px 3px 10px 0px rgb(0 0 0 / 20%);}
.section_box1 li:hover img.icon {filter: brightness(10);}
.section_box1 li img {height: 195px; max-width: 250px;}
.section_box1 li img.icon { padding: 10px 0px; display: none;}
.section_box1 .slick-dots li:hover {box-shadow: none !important;}
.section_box1 .line { margin: 10px 0px; border-top: 1px solid #cacaca; height: 1px;}
.section_box1 .label {background: #5297de; width: max-content; padding: 0px 4px; margin: 0 auto; color: #ffffff; font-size: 10px;vertical-align: top; margin-right: 5px;border-radius: 2px;}
.section_box1 .bg01 {background: transparent; border: 1px solid #5297de; color: #5297de;}
.section_box1 .bg02 {background: transparent; border: 1px solid #e73b1d; color: #fffff; background:#e73b1d; }
.section_box1 .bg03 {background: #f5bf27;display: none;}
/* .section_box1 div div li:nth-last-child(1) { border-right:1px solid #cacaca;} */
.section_box1 .slick-dots li {border:none !important; width:auto !important;  height:auto !important; margin:auto !important; padding:0px; background:transparent;}
.section_box1 .slick-dots {bottom:-30px !important; }


.section_centent2 {padding: 8% 0px; background: #f3f4f8;}
.section_centent2 h1 { margin-top: 0px; color: rgba(0, 0, 0, 0.8);font-size: 45px; font-weight: 500; padding:0px 0px 10px 0px;}
.section_centent2 h2 {font-size: 20px;   font-weight: 400; padding: 0px; margin-top: 0px;  margin-bottom:50px;}
.section_centent2 h2 span {color: #ffa32d;  }
.section_centent2 h3 { font-size: 18px; font-weight: bold; margin:10px 0px;}
.section_box2 {margin-top: 2%;}
.section_box2 li {display: inline-block; width: 23% !important; margin:10px 10px; background: #ffffff; line-height: 28px;font-size: 16px; padding:30px 0px; text-align: center; letter-spacing: -0.5px; cursor: pointer; border: 1px solid #cacaca; }
.section_box2 li:hover { border: 1px solid #d2d2d2; /* background: #1c5187; color: #ffffff;  */cursor: pointer; box-shadow:1px 3px 10px 0px rgb(0 0 0 / 10%);}
/* .section_box2 li:hover img.icon {filter: brightness(10);} */
.section_box2 li img.icon { padding: 10px 0px; max-width: auto;  min-width: auto; display: none;}
.section_box2 li img {/* max-width: 240px; min-width: 240px; */ max-height:195px; height: 200px;  max-width: 250px;}
.section_box2 .line { margin: 10px 0px; border-top: 1px solid #cacaca; height: 1px;}
.section_box2 .label {background: #5297de; width: max-content; padding:0px 4px; margin: 0 auto; color: #ffffff; font-size: 10px; vertical-align: top;  margin-right: 5px;border-radius: 2px;}
.section_box2 .bg01 {background: transparent; border: 1px solid #5297de; color: #5297de; /* width: max-content; padding: 0px 10px; margin: 0 auto; color: #ffffff; font-size: 12px; */}
.section_box2 .bg02 {background: transparent; border: 1px solid #e73b1d; color: #ffffff; /*  width: max-content;*/  margin: 0 auto; background:#e73b1d; }
.section_box2 .bg03 {background: #f5bf27;display: none;}
.section_box2 .slick-dots li {border:none !important; width:auto !important;  height:auto !important; margin:auto !important;}
.section_box2 .slick-dots {bottom:-150px !important; }


#section3 .scroll_icon {display:none;}
#section3 .slick-prev:before {background: url(/img/posart/main_arrow_l_1.png) no-repeat 0 0 !important;}
#section3 .slick-next:before {background: url(/img/posart/main_arrow_r_1.png) no-repeat 0 0 !important;}
#section3 .slick-prev { left: -30px;}
#section3 .slick-next { right: -35px;}

#section5 {background: #ffffff;}
#section5 li {font-size: 14px;  line-height: 21px;  width:32.3%; display: inline-block; height: 220px;vertical-align: middle;cursor: pointer; transition: .3s;}
#section5 li:hover {transform: translateY(-20px);}
#section5 li.icon01 {text-align:left;  background: #f8f8f8;cursor: default;}
#section5 li.icon01 .title {font-size: 21px; font-weight: bold; padding:40px 0px 0px 30px;}
#section5 li.icon01 .txt {font-size: 30px; color:#00578a; font-weight: 800; padding: 20px 0px 20px 30px;}
#section5 li.icon01 .txt1 {padding: 0px 0px 0px 30px;}
#section5 li.icon02 {background:#dce8ea url(/img/posart/section5_img02.png) no-repeat top 50px center;cursor: default;}
#section5 li.icon02 .txt {font-size: 26px; color:#333333; font-weight: 800; padding-top: 110px;}
#section5 li.icon02 .txt1 {font-size: 20px; color:#2f7e8b; font-weight: 800;padding-top: 20px;}
#section5 li.icon02 .txt1 a {color: #2f7e8b;}
#section5 li.icon03 {background: #3fa899;}
#section5 li.icon03 div {border: 1px solid #ffffff8c; padding: 10px; margin: 20px;}
#section5 li.icon03 .txt {display: block;font-size: 36px; color: #ffffff; font-weight: 800; padding:35px; text-shadow: 0px 0px 5px rgb(0 0 0 / 50%);}
#section5 li.icon03 .txt1 {font-size: 14px; color:#ffffff; margin-bottom: 30px; letter-spacing: -1.0px;}
#section5 li.icon04 {background: #fae100 url(/img/posart/section5_img04.png) no-repeat center; cursor: pointer;}

.hover {opacity: 0.35;  -webkit-transform: scale(1.15);  transform: scale(1.15);}

#slide1 { background-image: url(/img/front/kr/new/slide_img01.png);  }
#slide2 { background-image: url(/img/front/kr/new/slide_img02.png); }
#slide3 { background-image: url(/img/front/kr/new/slide_img03.png); }

.fp-bottom {bottom: 13%;}


.scroll_icon {display: none;  height: 85px; position: absolute;    margin: auto 47.95%;    bottom: 220px;    background: url(/img/posart/icon_scroll.png) no-repeat center; background-size: 90%;  width: 5%;	z-index:11; cursor: pointer; 
opacity: 0.7; min-width: 60px;}

.intro {position:absolute; margin: 0 auto; margin-top:150px;	z-index:111; text-align: left;}
.intro .text_bottom {text-align: left;}
.intro h1 {font-size: 18px; background: #7e7c7a; width: max-content; padding: 5px 30px;    color: #ffffff;  margin-bottom: 10px;display: inline-block;}
.intro h2 {color:#000000; font-size: 16px; padding:0px 0px 30px 0px; font-weight:normal; line-height: 24px;}
.intro h3 {color:#000000; font-size: 24px; padding: 30px 0px 60px 0px; font-weight: 500;letter-spacing: -0.5px;line-height: 14px;}
.intro span.text_color1 {color:#080808;  }
.intro .img1 {max-width: 300px;height: auto !important;text-align: center; display: inline-block;margin-bottom: 30px;}
.intro .img2 {width: 100% !important;height: auto !important;text-align: center; display: inline-block;margin-bottom: 30px; }


@keyframes slide-down {
            0% {
                opacity: 0;
                transform: translateY(-100%);
            } 
            100% {
                opacity: 1;
                transform: translateY(0);
            } 
        }
  
.quick_menu {position: fixed;  top: 400px;   right: 40px;  z-index: 5;}
.quick_menu ul li {
    display: block;
    padding-top: 25px;
    width: 100px;
    height: 100px;
    line-height: 35px;
	border-radius: 20px 0px 0px 0px;
    /*border-radius: 50%;*/
    box-sizing: border-box;
    text-align: center;
    background-color: #004d81;
    color: #ffffff;
    letter-spacing: -1.2px;
    margin-bottom: 5px;
    cursor: pointer;
}
.quick_menu ul li:hover {    background-color: #e98913;}
.quick_menu li.btn_close {
    margin: 0px;
    font-size: 14px;
    color: #ffffff;
    background: #2e2e2e;
    border-radius: 0%;
    padding: 5px;
    height: 34px;
    line-height: 23px;
}
.video_wrapper {
	position: relative;
	/* background-image: url(/img/front/kr/new/main_movie_bg.png);     background-size: cover;   overflow: hidden;background-position: center; */
	/* padding-bottom: 56.25%; 16:9 비율인 경우 */
	/* padding-bottom값은 4:3 비율인 경우 75%로 설정합니다 */
	}
	
#video { 
   position : relative;
	margin-top:-217px;
	left : 0;
	width : 59.1vw;
	height : 70vh;
    object-fit: fill;
    /* border: 3px solid #000000; */
    background: transparent;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
}


video::-webkit-media-controls {
	  display:none !important;
	}
	
.video-overlay {
	background-image: url(/img/front/kr/new/main_movie_bg.png);     background-size: cover;   overflow: hidden;background-position: center;
	/* background: rgba(0, 0, 0, 0.2); */
    position: relative;
    left: 0;
    top: 0px;
    width: 100%;
	height:100%;
	z-index:-1;
	opacity: 0.3;
	}


.fp-tableCell {height: 100% !important;} 	

	
.btn_banner  {
	border: 1px solid #adadad;
    display: inline-block;
    padding:10px 60px 10px 40px;
    font-size: 16px;
    transition: 0.3s;
    color: #333333;
}
.btn_link {background: transparent !important;  padding: 15px 0px;}
.btn_link a {
    display: inline-block;
    padding: 10px 40px;
    font-size: 16px;
    transition: 0.3s;
    color: #ffffff;
    background: url(/img/posart/link_more.png) no-repeat center left;
}
.btn_banner:hover { color: #ffffff;  border: 2px solid #ffa32d;  background: #ffa32d;}

.intro p{ color: #fff; }





/* main 공통 */
.mobile_none {display: block;    color: #ffffff;}
.margin_top50 {margin-top:50px; }

div:hover, li:hover {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ui-widget-content a {display: inline-block !important;color: #ffffff;}
.ui-dialog .ui-dialog-titlebar {padding: 0.4em 0em;}

/* CSS 에니메이션 */
.animated {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
} 

                              
@-webkit-keyframes bounce {
  0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
  50% {-webkit-transform: translateY(-5px);}
} 

@keyframes bounce { 
  0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}
  50% {transform: translateY(-5px);}
} 

.bounce { 
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

.ui-dialog .ui-dialog-content img {width:100%;}


/*main_popup*/
.main_popup  .popcontent {min-width: 280px;}
.ui-widget.ui-widget-content {padding: 20px !important; border-radius: 10px !important;  background: #ffffff !important;border: 1px solid #aaa;}
.ui-dialog .ui-dialog-content { padding: 0px !important;}
.ui-draggable .ui-dialog-titlebar {border-bottom-right-radius: 0px !important; border: 0px !important; }
.ui-dialog .ui-dialog-titlebar {padding: 10px 0px !important;}
.ui-widget-content a { border: 0px solid #307cb7; color: #ffffff;    display: flex;  justify-content: flex-end;}
@media screen and (max-width: 860px){
	.ui-widget.ui-widget-content {width: 100% !important;  left: 0px !important; top: 220px !important;padding: 10px !important;}
	.main_popup img {width:100%;}
	}

/*  responsive */

@media all and (max-width: 1420px){
	.wrapper, .wp_center {width: 100%;min-width: 100%;}
	.slider_box { padding: 0px 10px;  width: 100% !important;}
	.section_centent1 {padding: 3% 0px;}
	.section_centent h1, .section_centent h2 {font-size: 40px;}
	.section_centent1 .section_box {margin-top: 2%;}	
	#section5 li {padding: 0px 20px; width: 29.5%;}
	#section5 li.icon03 div {margin: 20px 0 0 0;}
	.intro .text_bottom {bottom: 45%;}	
	#video {width: 81vw;}
}
@media all and (max-width: 1210px){
	.section_box2 li {width: 30% !important;}
	#section5 li {padding: 0px 20px; width: 28.5%;}
}
	
@media all and (max-width: 1180px){
	.intro .img1, .intro .img2 {min-height: auto !important; width: 50% !important;    transform: translate(0%, 0%);}	
	.main_popup { padding: 0px!important; }
	.ui-widget-content { width: auto !important; max-width: 600px !important; min-width: 230px !important; min-height: auto !important;}
	.ui-widget-content img {width: 95% !important;  min-width: 215px;}	
	#section1 .container, #section2 .container {flex-wrap: wrap;  justify-content: center; padding: 20px 0px; }
	#section1 li { font-size: 14px; width: 25%; margin: 10px; border: 1px solid #a9a9a9; padding: 130px 20px 20px 20px;}
	#section1 li.icon01, #section1 li.icon02, #section1 li.icon03, #section1 li.icon04, #section1 li.icon05 { background-position-y: 30px;}	
	#section1 li p {  font-size: 20px;	}
	#section2 li {width: 17%; margin: 10px;}
	.section_box1 .slick-dots { bottom: -25px !important;}
	.section_centent2 {margin-top: 20px;}
	.main_img {height: 572px;}
	.main_img img {    transform: translate(-16%, 0%);    height: 513px !important;    width: 155% !important;}
}

@media all and (max-width: 1025px){	
	.intro { padding: 0px 10px;margin-top: 150px;}
	.fp-slides {height: 100% !important;}
	.fp-controlArrow {display: none;}
	.section_centent, .section_centent1 {padding-top:0px; }
	.fp-bottom {  bottom: 35px; }
	#video {margin-top: 0px; top: 50px !important;}	
	.video_wrapper video { height: auto !important;	}
	.quick_menu {right: 0px;}
	.section_centent1 h1, .section_centent2 h1 {font-size: 36px;}
	.section_centent2 h2 {font-size: 16px;}
	#section5 li { width: 42%;}
	#section5 li.icon01 {background: #fafafa;}
	
}

@media all and (max-width: 920px){
	.mobile_none {display: none;}		
	.center_line {display: none !important; }
	#section1 li {font-size: 14px;}
	.section_box2 li {width: 45% !important; padding: 20px 0px;}
	
}

@media all and (max-width: 830px){
	#section5 li { width: 42%;}
	#section2 li {width: 29%; }
}

@media all and (max-width: 750px){
	#section1 li {width: 40%;}
}

@media all and (max-width: 700px){
	.main_img {top: 35px; height: 100%;}
	.intro {padding: 0px 10px;  margin-top: 50px;}
	.intro h2 {font-size: 14px;}
	.main_img img { height: 435px !important;transform: translate(-29%, 0%);  width: 250% !important;}
}	
		
@media all and (max-width: 640px){
	#video {  margin-top: 50px;  top: 0px !important; }
	#section1, #section2, #section3 {padding: 10px 0px;}
	#section1 .container { flex-direction: column;}
	#section1 li {width: 90%; margin: 10px;}	
	#section2 li {width: 90%; margin: 10px; height: 100px;}
	#section2 li p { font-weight: bold; margin-top: 0px; padding-bottom: 0px;}
	#section2 li p:after {    margin-top: 30px;}
}
	
@media all and (max-width: 580px){	
	.section_centent .section_box li { width: 185px;}	
	.section_box2 li {width: 95% !important;}
	#section5 li {width:100%;padding: 0px;}
	#section5 li.icon03 div { margin: 20px;}
}

@media all and (max-width: 480px){	
	.section_centent2 h1:after {left: 22%;  width: 57%;}	
	.slide_img, .slide1_img, .slide2_img {    background-size: 173%;}
	
}
	
@media all and (max-width: 321px){
	.wrapper, .wp_center {  min-width: 300px;   width: 100%;}
		
}