.flex{display:flex;}
.bg1{background:#f7f7f7}
.bg2{background:#19b4c1}
.f5{font-weight:500;}
.f6{font-weight:600}
.f7{font-weight:700}
.fs0{font-size:1rem;}
.fs1{font-size:1.1rem;}
.fs2{font-size:1.2rem}
.fs3{font-size:1.3rem}
.fs20{font-size:2rem;}
.c_0{color:#000 !important}
.c_f{color:#fff !important}


body{overscroll-behavior:contain}


.title_h2{font-size:2.5rem; font-weight:600; margin-bottom:1em; text-align:center; color:#fff; position: relative;}
.title_h2_2{position: absolute; top:25%; left:50%; transform:translate(-50%,-25%);}


.svg_div{position: absolute; top:-37%; right:23%; transform:translate(-37%,-23%); width:4em; height:3em;}




.container{max-width:1600px; margin:0 auto;}
.container1{margin-top:5em; height:74%}
.container2{height:100%}




.main_sec1 ul li{border-right:1px solid #ddd; padding:2em 1em; box-sizing:border-box;}
.main_sec1 ul li:last-child{border-right:0}





.main_sec{height: 100%;}
.main_sec ul{height: 100%; align-items:center; margin-top:9em}
.main_sec ul li{width:25%; position: relative;}

.main_sec ul li:hover .centre .inner{background:url("/common/img/main/main_vi15.jpg") center center no-repeat !important}



.main_sec ul li:nth-child(1):hover .bg1{position: absolute; width:100%; height:100%; left:0; top:0; background:rgba(24,141,205,0.8)}
.main_sec ul li:nth-child(2):hover .bg1{position: absolute; width:100%; height:100%; left:0; top:0; background:rgba(252,199,72,0.8)}
.main_sec ul li:nth-child(3):hover .bg1{position: absolute; width:100%; height:100%; left:0; top:0; background:rgba(238, 43, 139, .8)}
.main_sec ul li:nth-child(4):hover .bg1{position: absolute; width:100%; height:100%; left:0; top:0; background:rgba(111, 186, 44, .8)}

.main_text_div{color:#fff; text-align:center; display:flex; flex-direction:column; height:100%; align-items:center; justify-content:center;}
.main_text_div p{z-index: 1;}
.main_text_div p:nth-child(3){font-size:18px; line-height:1; margin-bottom:20px; font-weight:500; }
.main_text_div p:nth-child(2){font-size:1.7vw; line-height:1; margin-bottom:15px; font-weight:600; }
.main_text_div p:nth-child(4){font-size:16px; line-height:1.4; margin-bottom:15px; font-weight:600; }
.main_text_div img{width:60%; margin-bottom:10px;}
.intro_btn{height:50px; line-height:50px; border-radius:50px; display:flex; align-items:center; justify-content:center; margin-top:40px; background:#fff; font-size:20px; font-weight:700; position:relative; transition:all .5s; max-height:0; overflow:hidden; opacity:0; cursor: pointer; width:30%;}
.main_sec ul li:nth-child(1) .main_text_div .intro_btn{color:#188dcd}
.main_sec ul li:nth-child(2) .main_text_div .intro_btn{color:#fcc748}
.main_sec ul li:nth-child(3) .main_text_div .intro_btn{color:#ee2b8b}
.main_sec ul li:nth-child(4) .main_text_div .intro_btn{color:#6fba2c}

.main_sec ul li:hover .intro_btn{max-height:50px; margin-top:40px; opacity:1;}


.smart_wrap .smart_left{width:50%; margin-right:1%}
.smart_wrap .smart_right{width:50%; border-top: 1px solid #ddd; z-index: 1;}
.smart_right .flex{border-bottom:1px solid #ddd; padding:2em 0; box-sizing:border-box; height: 200px; cursor: pointer; background:#fff}
.smart_right .flex:hover > div p:nth-child(1){color:#188dcd}
.smart_right .flex > div:first-child{width:65%; margin-right:3%; display:flex; flex-direction:column; justify-content:space-between;}
.smart_right .flex > div:last-child{width:35%}
.smart_right .flex > div p:nth-child(1){color: #000; font-size:1.5rem; font-weight:500; line-height:1.2;}
.smart_right .flex > div p:nth-child(2){color: #999; font-size:1rem; font-weight:500; line-height:1.2;}

.smart_right .flex img{max-width:100%; height: 100%;}



.info_txt{color:#fff; position: absolute; top:50%; left:5%; transform:translate(-0%,-50%); }
.info_txt p:last-child{border:1px solid #fff; padding:10px 20px; box-sizing:border-box; display:inline-block; margin-top:2em; cursor: pointer; font-weight:600}
.info_txt p:last-child:hover{background:#fff; color:#333; font-weight:600}
.resize{position: relative; display:block; height:0; padding-bottom:52.5%; box-sizing:border-box;}
.resize .re{position: absolute; left:0; right:0; top:0; bottom:0; box-sizing:border-box; }
.bgfix{background-size:100% !important}


.bg_img{position: absolute; bottom:-13px; right:0; transform:translate(-0,-13px);}
.bg_img img{width:24em;}
.bg_img1{position:absolute; bottom:-44px; right:0; transform:translate(-0,-13px);}
.bg_img2{position:absolute; top:13%; left:0;}






.smart1{width:1440px; margin:0 auto}
.smart1 li{width:25%; height:100%; text-align:center; margin-right:10px;}
.one1 { 
-webkit-animation: rotate-center 13s ease-in-out infinite;
animation: rotate-center 13s ease-in-out infinite;}

@-webkit-keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

.line {
     stroke-dasharray: 1100; 
     stroke-dashoffset: 0;
     animation: dash 3s linear alternate;
	animation-iteration-count:infinite;
    }

 @keyframes dash {
   0% { stroke-dashoffset: 1100; }
   100% { stroke-dashoffset: 0; }
 }



/* notice */

.notice {width:100%; box-sizing:border-box; display:flex; justify-content:space-between}
.notice li {width:32%; vertical-align:middle; border:1px solid #ddd; padding:2em 3em; box-sizing:border-box; background:#fff}
.notice li a{display:block;}
.notice li b {color:#333; width:100%; font-weight:600; font-size:1.4rem; line-height:1.35em; letter-spacing:-1px; display:inline-block; 
	overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word;   }
.notice li p {color:#777; width:100%; font-size:1rem; display:inline-block;  
display:inline-block;  letter-spacing:-0.5px;
	overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word;
}
.notice li .line {width:100%; height:1px; position:relative;  margin:15px 0; background-color:#ddd }
.notice li .line span {width:100%; height:1px; display:inline-block;  background-color:#333; 
    position:absolute; left:-100%; transition: all 0.3s ease-out;}
.notice li a:hover .line span  { left:0;}

.notice li span.date {color:#999; display:block; margin-top:15px;}
.notice li span.btn {width:100%; line-height:40px; border:1px solid #ddd; display:inline-block; text-align:center; font-size:0.9rem; letter-spacing:1px; font-weight:500;  margin-top:20px; transition: all 0.3s ease-out; font-family:'Montserrat'; }
.notice li a:hover span.btn  {border:1px solid #333; color:#fff; background-color:#333;}


.main-detail-btn_wrap{position:absolute; top:50%; right:0; transform:translate(0%,-50%)}
.main-detail-btn{position:relative; display:inline-flex; align-items:center; color:#000; font-size:1.4rem; font-weight:700; letter-spacing:-0.025em; padding-right:1.5em;}
.main-detail-btn:after{position:absolute; top:-70%; right:0%; width:4.2rem; height:4.2rem; background-color:#fcd42f; content:""; border-radius:50%; transition:all 0.3s;}
.main-detail-btn .txt{font-weight:700; font-size:1em; font-style:normal;}
.main-detail-btn .icon{display:block; position:relative; z-index:1; width:56px; height:12px; margin-left:3rem; transition:all 0.5s; background:url('/common/img/common/detail_arrow_black.png') no-repeat}
.main-detail-btn:hover:after{animation:circleHover 0.7s both;}
.main-detail-btn:hover .icon{transform:translateX(10px)}
.main-tit-box .splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:opacity 0.4s, transform 0.4s;
}

.active-section .splitting .char,
.animated .cm-word-split-JS.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}
@keyframes circleHover {
	0% {
		transform:scale(1); 
	}
	50% {
		transform:scale(1.4); 
	}
	100% {
		transform:scale(1); 
	}
}




.bg_img1_1{position: absolute; top:50%; left:0; z-index: -1; transform:translateY(-50%); }
.bg_img1_1 img{animation:scale 2s ease-in-out infinite; transition:.7s ease-in-out .3s; -webkit-transition:.7s ease-in-out .3s;}

.cont_tm{margin-top:3em;}
  
.cd-nav-trigger span.ham {background-color:#fff}

@media screen and (max-width:950px) {
.console-container { font-size:8vw;}
}
.slide_wrap {width:100%; height:15.5vw; position:relative; } 
.slide_iframe { height:100%; width:100%; position:absolute; }
.slide_wrap div {position:absolute; top:0; left:0; width:100%; height:14vw; }
@media screen and (max-width:950px) {
.slide_wrap {  height:67vw;   }
.slide_wrap div {height:60vw}
.cont_tm{margin-top:0em;}
.bg_img1_1{width:100%; left:50%; transform:translate(-50%,-50%)}
.bg_img1_1 img{width:100%; animation:none}

.main_text_div p:nth-child(4){margin-bottom:0}
}
 


.section-indicator li.main_nav_off .btn-section{color:#333 }  
.section-indicator li.main_nav_off .btn-section i:before{background:#333}
.section-indicator li.main_nav_off .btn-section i:after{border:2px solid #333}
 
 	 .slide_wrap {height:250px; position:relative}

 @media (max-width:950px) {
	 .section {width:100%; display:inline-block; padding:10% 0 0 0}
	 .section.section1{padding:0; height: 700px !important;}
	 .bg2 {padding:10% 0;}
	 .title_h2 {margin-bottom:20px}
	 .section4 {padding-bottom:11%}
	 .slide_wrap {height:33vw; position:relative}
	 .slide_rgba_box {display:none}

   }
 




/* circle scale */
@keyframes scale{
	0%{transform:scale(1);}
	48%{transform:scale(1.1);}
	52%{transform:scale(1.1);}
	100%{transform:scale(1);}
}
@-webkit-keyframes scale{
	0%{-webkit-transform:scale(1,1);}
	48%{-webkit-transform:scale(1.03);}
	52%{-webkit-transform:scale(1.03);}
	100%{-webkit-transform:scale(1);}
}
@-moz-keyframes scale{
	0%{-moz-transform:scale(1);}
	48%{-moz-transform:scale(1.03);}
	52%{-moz-transform:scale(1.03);}
	100%{-moz-transform:scale(1);}
}









@media (max-width:1600px){

.container{max-width:95%; margin:0 auto;}
}

@media (max-width:1400px){

}

@media (max-width:1300px){
.svg_div{display:none}

}

@media (max-width:950px) {

.container1{height: auto;}


.info_txt{width:100%; text-align:center; left:0;}
.info_txt .f6.fs20{font-size:3vw;}
.info_txt p:last-child{padding:5px 10px; margin-top:20px; font-size:.9rem}



.main-detail-btn{padding-top:10px; box-sizing:border-box;}
.main-detail-btn_wrap{width:100%; top:50%; transform:translate(-0,-0)}
.title_h2{font-size:2rem; padding-bottom:3em;} 
.title_h2_1{padding-bottom:0;}
.main-detail-btn .txt{display:none}

.main-detail-btn .icon{margin-left:0;}
.notice {display:block;}
.notice li {width:100%; padding:1em 2em}
.notice li:nth-child(2){margin:10px 0}
.notice li div {height:120px}
 
.notice li b { font-size:1.2rem; 
-webkit-line-clamp: 1; /* 라인수 */
   }

.notice li p { font-size:1rem; 
-webkit-line-clamp: 2; /* 라인수 */
   }

.notice li .line { margin:10px 0; }



.notice li span.date {margin-top:10px}  
.notice li span.btn {display:none}  

.bg_img{display:none}
.bg_img1{display:none;}
.bg_img2{display:none;}







.container2{max-width:95%; margin:0 auto; height:auto;}
.main_sec ul{display:inline-block; width:100%;}
.main_sec ul:after{content:''; display:block; clear:both;}
.main_sec ul li{float:left; width:50%; cursor: pointer;}
.intro_btn{margin-top:0;}
.main_sec ul li:hover .intro_btn{margin-top:0; display:none}
.main_text_div img{width:50%;}
.main_text_div p:nth-child(3){margin-bottom:10px; font-size:2vw}
.main_text_div p:nth-child(2){font-size:3.2vw;}
.main_text_div p:nth-child(4){font-size:2.5vw;}
 }
  






@media (max-width:800px) {

.info_txt .tm20.f5{display:none}

}
@media (max-width:800px) {
.span_br{display:block;  line-height:1.3;}

}

@media (max-width:600px) {
.span_br1{display:block;}
.title_h2{font-size:1.5rem;} 
.info_txt .f6.fs20{font-size:3.8vw}
.main_text_div p:nth-child(2){font-size:4vw;}
.main_text_div p:nth-child(3){font-size:2.5vw;}
.main_text_div p:nth-child(4){font-size:2.8vw;}
}

















  

.section-nav { z-index: 10; position: fixed; top:43%; right:0%;  width: 150px; height: 100%; text-align:right;
    opacity: 0;
    -webkit-transition: ease-out .35s;
    -o-transition: ease-out .35s;
    transition: ease-out .35s;
}
[data-nav="on"] { animation: nav .35s ease-out .35s forwards; }
[data-nav="off"] { display: none; }

@-webkit-keyframes nav {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes nav {
    from { opacity: 0; }
    to { opacity: 1; }
}
.section-indicator { position: relative;z-index:999999999; top:0; bottom: 0; left: 0; margin: auto; height: 140px;  }
 .section-indicator li { margin:5px 0; display:block;}
.section-indicator li:first-child { margin-top: 0; }
.section-indicator li:last-child { margin-bottom: 0; }

.btn-section { position: relative; padding-right: 28px;
    font-size: 13px; color: #fff; line-height:20px;  font-weight:600;  
    opacity: .5; letter-spacing:0.5px;
    -webkit-transition: .35s ease-out .35s;
    -o-transition: .35s ease-out .35s;
    transition: .35s ease-out .35s; 
}
.btn-section  span {  display:inline-block; vertical-align:2.5px}
.btn-section i { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 18px; height: 18px; }
.btn-section i:before{
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 6px; height: 6px; background: #fff; border-radius: 50%;
    box-sizing: border-box;
}
.btn-section i:after{
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%;
    box-sizing: border-box;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: .55s ease-out .35s;
    -o-transition: .55s ease-out .35s;
    transition: .55s ease-out .35s;
    opacity: 0;
}
.btn-section:hover{ opacity: .8; }
.btn-section:hover i:after{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.section-indicator li.on .btn-section{ opacity: 1;   }

.section-indicator li.on .btn-section i:after{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
 
@media (max-width:1200px) {
    .section-nav {   right:1% }
	.smart_right .flex{height: 13vw; padding:1em 0}
	.smart_right .flex > div p:nth-child(1){font-size:2vw}
	.main_text_div{padding:2em 0.5em;}
	.intro_btn{width:47%}

}
@media (max-width:950px) {
    .section-nav {  display: none; }
	.smart_wrap {flex-direction:column;}
	.smart_wrap .smart_left{width:100%; margin-bottom:1em; margin-right:0}
	.smart_wrap .smart_right{width:100%; display:flex;}
	.smart_right .flex{margin-right:1%; flex-direction:column; height: auto;}
	.smart_right .flex > div:first-child{margin-right:0; order:2; margin-top:10px;  width:100%}
	.smart_right .flex > div:last-child{text-align:right; width:100%}
	.smart_right .flex > div p:nth-child(1){font-size:2.5vw; margin-bottom:10px;}
	.smart_right .flex > div p:nth-child(1) br{display:none}
	.smart_right .flex > div p:nth-child(2){font-size:1.5vw}
	.smart_right .flex img{height:auto;}



	.container3{padding:5em 0; box-sizing:border-box;}
	.title_h2_2{top:11%; transform:translate(-50%,-11%)}
	.container.container3 .main_sec.main_sec1 ul{margin-top:5em}
	.main_sec1 ul li:nth-child(3) .main_text_div{border-left:0}
	.main_sec.main_sec1 ul li:nth-child(1){border-bottom:1px solid #ddd}
	.main_sec.main_sec1 ul li:nth-child(2){border-bottom:1px solid #ddd; border-right:0}
}
 
@media (max-width:600px) {
.smart_right .flex > div p:nth-child(1){font-size:3.5vw;}
.smart_right .flex > div p:nth-child(2){font-size:3vw;}
.main_sec.main_sec1 ul{display:flex; flex-wrap:wrap}
.main_text_div{padding:1em 0;}
}