/* 메인슬라이더 */
@font-face {
    font-family: 'Binggrae-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


#hd.on {
  background-color:#163161;
  -webkit-transition-duration:0.4s;
  -webkit-transition-timing-function:ease;
  transition-duration:0.4s;
  transition-timing-function:ease;
}

.iti {    display: block!important;}
.iti-mobile .iti__country-list {
    height: 40%!important;
    width: 40%!important;
    left: 50%!important;
    top: 50%!important;
    transform: translate(-50%, -50%)!important;
}
.iti.iti--container {
    height: 100vh!important;
    width: 100vw!important;
    background: #163161ba;
    top: 0!important;
    bottom: unset!important;
    left: 0!important;
    right: 0!important;
}

@media only screen and (max-width: 1400px){
	.iti-mobile .iti__country-list {
		width: 80%!important;}
}
@media only screen and (max-width: 768px){
	.iti-mobile .iti__country-list {
		width: 100%!important;}
}
.swal-modal {    padding-top: 20px;}
.swal-text {      margin-top: 0px!important;  padding: 15px 0;}
.swal-footer {      text-align: center;    width: 100%;  padding: 0;}
.swal-button-container {    width: 100%;    margin: 0;}
button.swal-button.swal-button--confirm {   background: #163161; width: 100%;}

.gnb_1dli:not(:first-child) .gnb_2dul {display:none!important}
.mgnb_1dli:not(:first-child) svg {display:none!important}

.floating {transition: all ease 0.5s 0s;position: fixed;z-index: 50;background: #fff; box-shadow: 0 0 20px 0 #79797963; border: 1px solid #163161;width: 300px;height: 230px; bottom: 50px; right: 50px; padding: 20px}
.floating.large {    box-shadow: 0 0 20px 0 #ffffff85;/*transition: all ease 0.5s 0s*/;width: 180px;    height: 95px;    background: #163161;    padding: 15px;}
.floating button.close {     font-size: 1.2em;  }
.floating button.sub {margin-top: 10px;  padding: 10px ;border: none;background: #163161;color: #fff;;width: 100%}
.floating button.open {display: none;   ;border: none;background: #ffffff00;color: #fff;;font-weight: 800;width: 100%}
.floating p {    font-weight: 800;text-align: left}
.floating.large p {   color: #fff; font-weight: 800;text-align: center}
.floating input {   padding: 10px; border: 1px solid  rgba(61,61,61,1.00);border-radius: 0;width: 100%}
@media only screen and (max-width: 768px){
	.floating {display: none}
}

div.iframe {    position: relative;    padding-top: 56%;    width: 100%;    height: 0;}

/* iframe */
div.iframe > iframe {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}

.section01 {height: 100vh;background-size: cover!important;	background: linear-gradient(45deg, #163161, #3a3a3a00), url(../img/main/mainbg.jpg) center center; position: relative}
.section01 .wrap {position: absolute; max-width: 1400px; width: 90%;padding: 20px ; top:45%;left:50%;transform: translate(-50%,-50%)}
.section01 .slogan img{    max-width: 100px;    background: #163161;    padding: 10px 15px;    border-radius: 100px;}
.section01 .slogan h2{    text-transform: uppercase;   color: #fff;  font-size: 3em;    font-weight: 900;line-height: 1.25em;;padding-top: 10px }
.section01 .slogan h3{     color: #fff;font-size: 1.5em;font-weight: 500;line-height: 1.5em;padding-top: 10px}
.section01  .slogan p{     color: #fff;font-size: 1.15em;font-weight: 200;line-height: 2em;padding-top: 40px}
@media only screen and (max-width: 768px){
.section01 .slogan h2{       color: #fff;  font-size: 1.7em;    font-weight: 900;line-height: 1.25em;;padding-top: 10px }
.section01 .slogan h3{     color: #fff;font-size: 1.1em;font-weight: 500;line-height: 1.5em;padding-top: 10px}
.section01 .slogan h3 br{     display: none}
.section01 .slogan p br{     display: none}
.section01  .slogan p{     color: #fff;font-size: 0.9em;font-weight: 200;line-height: 2em;padding-top: 40px}
.section01 .wrap {padding: 20px;}
}


.flex-01{display: flex;    max-width: 1400px;    margin: 0 auto;    padding: 20px;;}
.flex-01.reverse{flex-direction: row-reverse}
.flex-02 {width: 50%;  }
.flex-03 {width: 50%;  }
.section02 {min-height: 50vh;padding: 00px 0 50px 0}
.section02 .wrap { max-width: 1400px; width: 90%; margin: 0 auto}
.section02 .flex-01 {   margin-top: 50px}
.section02 .slogan {   padding: 10px;padding-top: 0px; text-align: left}
.section02 .slogan h2{    text-transform: uppercase;   color: #163161;  font-size: 3em;    font-weight: 900;line-height: 1.25em; }
.section02 .slogan h3{     color: #000;font-size: 1.5em;font-weight: 500;line-height: 1.5em;padding-top: 10px}
.section02  .slogan p{     color: #000;font-size: 1.15em;font-weight: 300;line-height: 2em;padding-top: 40px}
.section02 .sloimg {width: 100%; height: 300px; position: relative;     background-blend-mode: luminosity;
             -webkit-transition: transform .3s ease-out;         -moz-transition: transform .3s ease-out; 
        -ms-transition: transform .3s ease-out;        -o-transition: transform .3s ease-out;         transition: transform .3s ease-out;    }
.section02 .sloimg:hover { -webkit-transform: scale(1.05);        -moz-transform: scale(1.05);        -ms-transform: scale(1.05); /* IE 9 */
        -o-transform: scale(1.05);        transform: scale(1.05);
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ 
    background-color: none;    background-blend-mode: normal;}
.section02 .sloimg.bg01 {width: 100%; height: 300px;background: url(../img/main/mainbg01.jpg) bottom center; background-size: cover;   background-color: #163161;}
.section02 .sloimg.bg02 {width: 100%; height: 300px;background: url(../img/main/mainbg02.jpg) bottom center;    background-color: #163161;}
.section02 .sloimg.bg03 {width: 100%; height: 450px;background: url(../img/main/mainbg03.jpg) bottom center; background-size: cover;   background-color: #163161;}
.section02 .sloimg.bg04 {width: 100%; height: 300px;background: url(../img/main/mainbg04.jpg) center center;    background-color: #163161;}

.section02 .sloimg h2  {position: absolute; color:#fff;text-align: center ; font-weight: 900; font-size: 4em; top:50%;left:50%;transform: translate(-50%,-50%) ; text-transform: uppercase; opacity: 0.5;       transition:  .3s ease-out; mix-blend-mode: overlay;}

.section02 .sloimg:hover h2  {opacity: 1;       transition:  .3s ease-out;mix-blend-mode: normal; }

@media only screen and (max-width: 1200px){
	.section02 {padding: 20px 0;}
	.flex-01 {display: block;   }
	.flex-02 {width: 100%}
	.flex-03 {width: 100%;}
	
	.section02 .flex-01 {   margin-top: 10px}
	.section02 .slogan {   padding-top: 0px}
	.section02 .slogan h2{     font-size: 1.7em;   padding-top: 20px  }
	.section02 .slogan h3{     font-size: 1.1em;}
	.section02 .slogan h3 br{     display: none}
	.section02 .slogan p br{     display: none}
	.section02  .slogan p{   font-size: 1em; padding-top: 20px}
	.section02 .sloimg {width: 100%; height: 200px!important; }
	.section02 .sloimg h2  {font-size: 2em; }
}

.section_3 {min-height: 90vh; background-size: cover!important;	background: url(../img/main/bg03.png) center center;
    background-color: #163161;	background-blend-mode: color-burn;}
.section_3.sub1 {min-height: 90vh; background-size: cover!important;	background: url(../img/main/bg03.png) center center;
    background-color: #163161;
    background-blend-mode: color-burn;}
.section_3 input:focus ~ label, .section_3 textarea:focus ~ label, .section_3 input:valid ~ label, .section_3 textarea:valid ~ label {    font-size: 0.75em;
    color: #999;    top: -5px;    -webkit-transition: all 0.225s ease;    transition: all 0.225s ease;}
.styled-input {    float: left;    width: 293px;    margin: 1rem 0;    position: relative;    border-radius: 4px;}
@media only screen and (max-width: 768px){
    .styled-input {        width:100%;    }
}
.styled-input label {    color: #999;    padding:1.3rem 30px 1rem 30px;    position: absolute;    top: 10px;    left: 0;    -webkit-transition: all 0.25s ease;    transition: all 0.25s ease;    pointer-events: none;}

.styled-input.wide { width: 100%;}

#CONTACTUS label {color: #fff;font-size: 0.9em;    margin-top: 5px; }
.section_3 input,.section_3 textarea {    padding: 13px;    border: 0;    width: 100%;  font-size: 1em;  background-color: #2d2d2d;    color: white;    border-radius: 4px;}
.flex-0 {display: flex;    max-width: 1400px;    margin: 0 auto;    padding-top: 100px;}
.flex-2 {width: 60%;    padding: 10px;}
.flex-1 {width: 40%;    padding:0 30px;}
.section_3 input:focus,
.section_3 textarea:focus { outline: 0; }
.section_3 select {     height: 65px;    padding: 0 25px;    background-color: #2d2d2d;    border: none;    color: #999;    font-weight: 700;    width: 100%;    margin-bottom: 20px; }
.section_3 option {   color: white; }
.section_3 input:focus ~ span,.section_3 textarea:focus ~ span {    width: 100%;    -webkit-transition: all 0.075s ease;    transition: all 0.075s ease;}
.section_3 textarea {    width: 100%;    min-height: 15em;}
.input-container {   width: 100%;    margin: 0px auto;}
.submit-btn {    float: right;    padding: 7px 35px;    border-radius: 5px;    display: inline-block;    background-color: #fff;    color: #163161;
    font-size: 18px;    cursor: pointer;    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06),              0 2px 10px 0 rgba(0,0,0,0.07);    -webkit-transition: all 300ms ease;    transition: all 300ms ease;}
.submit-btn:hover {    transform: translateY(1px);    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),              0 1px 1px 0 rgba(0,0,0,0.09);}
.section_3 input[type=checkbox] + label {  color: #ccc;  font-style: italic;} 
.section_3 input[type=checkbox]:checked + label {  color: #f00;  font-style: normal;}
.section_3 h3{ font-size: 2.5em;font-weight: 900; color: #fff; line-height: 3em}
.section_3 .slogan {position: relative;  padding: 10px;;   color: #fff;     margin: 0 auto; text-align: left}
.section_3 .slogan h2{     font-size: 3.5em;    font-weight: bold;line-height: 1em;padding-top: 20px} 
.section_3  .slogan h2 span{   color: rgba(255,255,255,1.00); /* -webkit-text-stroke: 1px white;*/}
.section_3 .slogan h4{ font-size: 1.25em;font-weight: 400;line-height: 1.5em;padding-top: 20px}
.section_3 .slogan h3{ font-size: 1.5em;font-weight: 600;line-height: 1.2em}
.section_3  .slogan p{ font-size: 1.15em;font-weight: 200;line-height: 2em;padding-top: 60px}
@media (max-width: 950px) {
	.section_3 .slogan { text-align: left}
	.section_3  .slogan p{ padding-top: 0px}
	.flex-0 {display: block;    padding-top: 100px;    padding: 50px 0 80px;}
	.flex-1 {width: 100%}
	.flex-2 {width: 100%;padding: 30px;}
    .submit-btn {        width:100%;        float: none;        text-align:center;    }
	.section_3 > h3{ font-size: 2em;    text-align: center;}
	.section_3 .slogan h2{     font-size: 1.5em;    }
	.section_3 .slogan h4{ font-size: 1.05em;font-weight: 400;line-height: 1.5em}
	.section_3 .slogan h3{ font-size: 1.35em;font-weight: 600;line-height: 1.2em}
	.section_3  .slogan p{ font-size: 1em;font-weight: 200;line-height: 2em;}
	.section_3 select {		height: 50px;}
	.styled-input label {    padding: 10px 30px;		top: 6px;}
	.section_3 input, .section_3 textarea {    padding: 15px 20px;}
}




/*3사각배너*/
#m_bg{width:100%; background:#f8f8f8;}
#atc01_wrap{z-index:99;position:relative; bottom:70px; width:1200px; margin:0 auto;}
#atc01_wrap .m_01{float:left;position:relative; width:calc(33.333% - 16px); height:330px; margin:8px; color:#666; background:#fff; box-shadow:0 0 15px rgba(0,0,0,0.1); transition: transform .3s;-webkit-transition: transform .3s}
#atc01_wrap:after{display:block;clear:both;content:""}
#atc01_wrap .m_01 a{display:block;width:100%;height:100%;padding:50px}
#atc01_wrap .m_01 .plus{position:absolute;top:78px;right:60px;width:2px;height:28px;background-color:#a1a1a1;transition: transform .3s;-webkit-transition: transform .3s}
#atc01_wrap .m_01 .plus:after{display:block;position:absolute;top:13px;right:-13px;content:"";width:28px;height:2px;background-color:#a1a1a1;transition: transform .3s;-webkit-transition: transform .3s}
#atc01_wrap .m_01 .more{margin-top:20px;font-size:0.95em;font-weight:400;color:#333;-webkit-transition:all .3s;transition:all .3s;}
#atc01_wrap p.sh_tit{padding:22px 0 18px 0; font-size:1.55em; font-weight:500; color:#000;letter-spacing:-0.15px;-webkit-transition:all .3s;transition:all .3s;}
#atc01_wrap .txt{font-size:1.15em; line-height:1.6em; color:#848484;}
#atc01_wrap .svg-inline--fa{font-size:2.5em; color:#000;}
/*hover*/
#atc01_wrap .m_01:hover{transform:translateY(-25px);-webkit-transform:translateY(-25px);;transition: transform .3s;-webkit-transition: transform .3s;box-shadow:0px 3px 20px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0px 3px 20px 0 rgba(0,0,0,0.05);-moz-box-shadow:0px 3px 20px 0 rgba(0,0,0,0.05);-ms-box-shadow:0px 3px 20px 0 rgba(0,0,0,0.0.05);behavior:url(/js/PIE.htc)}
#atc01_wrap .m_01 a:hover .plus{background-color:#4e7dd8;transition: transform .3s;-webkit-transition: transform .3s;transform: rotate(90deg);-webkit-transform: rotate(90deg)}
#atc01_wrap .m_01 a:hover .plus:after{background-color:#4e7dd8;transition: transform .3s;-webkit-transition: transform .3s}
#atc01_wrap .m_01 a:hover .more{color:#3260b8}
#atc01_wrap .m_01 a:hover p.sh_tit{color:#3260b8}
@media (max-width: 1200px) {
#atc01_wrap{bottom:0; width:100%; padding:12px 10px; }
#atc01_wrap .m_01{width:100%; height:auto; margin:0 0 10px 0;}
#atc01_wrap .m_01 a{padding:25px 20px}
#atc01_wrap .svg-inline--fa{font-size:1.6em;}
#atc01_wrap p.sh_tit{font-size:1.2em; padding:15px 0 10px 0}
#atc01_wrap .txt{font-size:0.95em;}
#atc01_wrap .m_01 .more{margin-top:10px;}
#atc01_wrap .m_01 .plus{top:25px; right:25px;}
}





.swiper-pagination-bullet{    position: relative; width: 10px!important;    height: 10px!important;   background: none!important;    opacity: 0.8;    border: 2px solid #fff;}
.swiper-pagination-bullet-active {background: #Fff!important}
.swiper-container-vertical > .swiper-pagination-bullets{    right: 40px!important;}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {    margin: 40px 0!important;    }
span.swiper-pagination-bullet.swiper-pagination-bullet-active:after {    position: absolute;    content: "";    width: 500%;
    height: 500%;    background-color: rgb(255 255 255 / 13%);    border-radius: 50%;    top: -185%;    left: -200%;}

.section_1 .swiper-container {height: calc( 100vh - 80px );}
.section_1 .swiper-slide  {width: 100%; height: 100%; background: #163161;}
.section_1 .swiper-slide  .slogan {  z-index: 999 ; position: absolute;    top: 35%;    left: 35%;      max-width: 830px;    width: 80%;    transform: translate(-50%,-50%);  color: #fff;}
.section_1 .swiper-slide  .slogan h2{     font-size: 5.5em;    font-weight: bold;line-height: 1em;    text-transform: uppercase;}
.section_1 .swiper-slide  .slogan h2 span{   color: rgba(255,255,255,1.00);}
.section_1 .swiper-slide  .slogan h3{ font-size: 3.5em;font-weight: 500;line-height: 1.2em}
.section_1 .swiper-slide  .slogan p{ font-size: 1.75em;font-weight: 200;line-height: 2em}
.section_1 .swiper-slide  .slogan2 {  z-index: 999 ; position: absolute;     top: 50%;    text-align: right;    right: -10%;     max-width: 830px;    width: 80%;    transform: translate(-50%,-50%);  color: #fff;}
.section_1 .swiper-slide  .slogan2 h2{     font-size: 5.5em;    font-weight: bold;line-height: 1em;    text-transform: uppercase;}
.section_1 .swiper-slide  .slogan2 h2 span{   color: rgba(255,255,255,1.00); }
.section_1 .swiper-slide  .slogan2 h3{ font-size: 3.5em;font-weight: 500;line-height: 1.2em}
.section_1 .swiper-slide  .slogan2 p{ font-size: 1.75em;font-weight: 200;line-height: 2em}
.section_1 .slide01  { background: linear-gradient( to top, #163161db 0%, #163161 100% ), url(../img/main/slide01.jpg) center center;}
.section_1 .slide02  {  background: linear-gradient( to top, #163161db 0%, #163161 100% ), url(../img/main/slide02.jpg) center center;}
.section_1 .slide03  {   background: linear-gradient( to top, #163161db 0%, #163161 100% ), url(../img/main/slide03.jpg) center center;}
.section_1 .slide04  {  background: linear-gradient( to top, #163161db 0%, #163161 100% ), url(../img/main/slide04.jpg) center center;}
.swiper-slide-active div.img {opacity: 1 }
.swiper-slide-prev div.img, .swiper-slide-next div.img {    background: #adadad52!important; }
.section_1 .slide01 div.img { position: absolute;   z-index: 4; bottom: -35%;    right: -5%; ;    background-size: cover!important;	background: url(../img/main/slide01-1.jpg) center center;  transform: translate(-50%,-50%);     animation: imgScale 6s ease 0s forwards;animation-delay: 0.5s;}
.section_1 .slide02 div.img { position: absolute; z-index: 3;   bottom: -25%;    right: -5%; ;    background-size: cover!important;	background: url(../img/main/slide02-1.jpg) center center;  transform: translate(-50%,-50%);     animation: imgScale 6s ease 0s forwards;animation-delay: 0.8s;}
.section_1 .slide03 div.img { position: absolute; z-index: 2;   bottom: -35%;      left: 30%;    background-size: cover!important;	background: url(../img/main/slide03-1.jpg) center center;  transform: translate(-50%,-50%);     animation: imgScale 6s ease 0s forwards;animation-delay: 1.2s;}
.section_1 .slide04 div.img { position: absolute; z-index: 1;   bottom: -25%;      left: 30%;    background-size: cover!important;	background: url(../img/main/slide04-1.jpg) center center;  transform: translate(-50%,-50%);     animation: imgScale 6s ease 0s forwards;animation-delay: 1.5s;}
.slide02 .slogan {    top: 50%!important;}
.slide03  .slogan2 p{ font-size: 1.35em!important;}
div.more {  box-shadow:inset 0 -.05em 0 0 #fff;  color:#fff; font-weight: 100;   font-size: 1.15em; cursor:pointer;  display:inline-block;  padding:.7em 0;  transition: all  300ms ease-out;}
div.more:hover { padding:.7em ; box-shadow:inset 0 -3em 0 0 #fff;  color:#163161;font-weight: 300;   }
 
div.mouse {  z-index: 998; padding-top: 60px;    position: absolute;        bottom: -35%; color: #fff;    text-shadow: 0 0 5px #424242;}
div.mouse:hover { color: #fff;}
div.mouse span {  position: absolute;  top: 0;  left: 50%;  width: 30px;  height: 50px;  margin-left: -15px;  border: 2px solid #fff;  border-radius: 50px;  box-sizing: border-box;}
div.mouse span::before {  position: absolute;  top: 10px;  left: 50%;  content: '';  width: 6px;  height: 6px;  margin-left: -3px;  background-color: #fff;  border-radius: 100%;  -webkit-animation: sdb 2s infinite;  animation: sdb 2s infinite;  box-sizing: border-box}

.col-xs-12, .col-md-6 {padding: 0}

@media (max-width: 1200px) {
	
	.section_1 .slide01  { background-size: cover!important;}
	.section_1 .slide02  { background-size: cover!important;}
	.section_1 .slide03  { background-size: cover!important;}
	.section_1 .slide04  { background-size: cover!important;}
	.section_1 .swiper-slide  .slogan { top: 35%;    left: 50%;  width: 80%; }
	.section_1 .swiper-slide  .slogan h2{     font-size: 3.5em;  }
	.section_1 .swiper-slide  .slogan h2 span{   color: rgba(255,255,255,1.00); }
	.section_1 .swiper-slide  .slogan h3{ font-size: 2.5em;font-weight: 500;line-height: 1.2em}
	.section_1 .swiper-slide  .slogan p{ font-size: 1.5em;font-weight: 200;line-height: 2em}
	
	.slide02 .slogan {    top: 45%!important;}
	.slide03 .slogan2 {    top: 45%!important;}
	.slide03  .slogan2 p{ font-size: 1em!important;}
	.section_1 .swiper-slide  .slogan2 { top: 35%;    left: 50%;  width: 80%; }
	.section_1 .swiper-slide  .slogan2 h2{     font-size: 3.5em;  }
	.section_1 .swiper-slide  .slogan2 h2 span{   color: rgba(255,255,255,1.00); }
	.section_1 .swiper-slide  .slogan2 h3{ font-size: 2.5em;font-weight: 500;line-height: 1.2em}
	.section_1 .swiper-slide  .slogan2 p{ font-size: 1.5em;font-weight: 200;line-height: 2em}
	.section_1 .slide01 div.img {      bottom: -25%;    right: -10%;    width: 400px;    height: 600px;    animation: none;  }
	.section_1 .slide02 div.img {      bottom: -25%;    right: -10%;    width: 400px;    height: 600px;    animation: none;  }
	.section_1 .slide03 div.img {      bottom: -25%;    left: 30%;    width: 400px;    height: 600px;    animation: none;  }
	.section_1 .slide04 div.img {      bottom: -25%;    left: 30%;    width: 400px;    height: 600px;    animation: none;  }
	div.mouse {   }
	div.more { font-size: 1em; }
	.slide03 div.mouse {    left: 5%;    bottom: 10%;    right: unset;    z-index: 999;}
	.slide04 div.mouse {    left: 5%;    bottom: 10%;    right: unset;    z-index: 999;}
	
	.section_2 #nav section {    margin-bottom: 20px;    width: 100%;}
	
}

@media (max-width: 768px) {
	
	.section_1 .swiper-slide  .slogan { top: 35%;    left: 50%;  width: 90%; }
	
	.slide03 .slogan {    top: 40%!important;}
	.section_1 .swiper-slide  .slogan h2{     font-size: 3em;  }
	.section_1 .swiper-slide  .slogan h2 span{   color: rgba(255,255,255,1.00); }
	.section_1 .swiper-slide  .slogan h3{ font-size: 2em;font-weight: 500;line-height: 1.2em}
	.section_1 .swiper-slide  .slogan p{ font-size: 1em;font-weight: 200;line-height: 2em}
	.section_1 .swiper-slide  .slogan2 { top: 35%;    left: 50%;  width: 90%;
    text-align: left;
    right: unset; }
	
	.slide02 .slogan {    top: 45%!important;}
	.slide03 .slogan2 {    top: 45%!important;}
	.section_1 .swiper-slide  .slogan2 h2{     font-size: 3em;  }
	.section_1 .swiper-slide  .slogan2 h2 span{   color: rgba(255,255,255,1.00); }
	.section_1 .swiper-slide  .slogan2 h3{ font-size: 2em;font-weight: 500;line-height: 1.2em}
	.section_1 .swiper-slide  .slogan2 p{ font-size: 1em;font-weight: 200;line-height: 2em}
	div.more { font-size: 0.85em; }
	.section_1 .slide01 div.img {display: none}
	.section_1 .slide02 div.img {display: none}
	.section_1 .slide03 div.img {display: none}
	.section_1 .slide04 div.img {display: none}
	div.mouse { }
}


@-webkit-keyframes sdb {
  0% {    -webkit-transform: translate(0, 0);    opacity: 0;  }
  40% {    opacity: 1;  }
  80% {    -webkit-transform: translate(0, 20px);    opacity: 0;  }
  100% {    opacity: 0;  }
}
@keyframes sdb {
  0% {    transform: translate(0, 0);    opacity: 0;  }
  40% {    opacity: 1;  }
  80% {    transform: translate(0, 20px);    opacity: 0;  }
  100% {    opacity: 0;  }
}
@keyframes visualScale {
  0% {     background-size:100%}
100% {     background-size:105%}
}
@keyframes imgScale {
  0% {	  opacity: 0;    width: 600px;    height: 1000px;}
100% {	  opacity: 1;    width: 600px;    height: 760px;}
}
.section_1 .swiper-slide {    animation: visualScale 6s ease 0s infinite alternate;    background-size: cover;    background-position: 50% 0;    background-repeat: no-repeat;}


.section_2 {min-height: 100vh}
.section_2  { padding: 50px;background-size: cover!important;	/*background: url(../img/main/bg02.jpg) center center;
    background-color: white;
    background-blend-mode: difference; */}
.section_2 .slogan {position: relative; max-width: 1500px;      padding: 0 0 7% 0;width: 80%;/*   color: #fff;*/     margin: 0 auto;}
.section_2  .slogan h2{    color: #163161 ;  font-size: 3em;   text-align: center; font-weight: bold;line-height: 1em;    text-transform: uppercase;}
.section_2  .slogan h3{     font-size: 2em;   text-align: center; font-weight: bold;line-height: 1.3em;    text-transform: uppercase;}
.section_2  .slogan h4{text-align: center; font-size: 1.25em;font-weight: 700;line-height: 1.2em}
.section_2  .slogan p{ text-align: center;font-size: 1.1em;font-weight: 400;line-height: 2em}
/*.section_2 .slogan:after {    background-size: 100%!important;    content: "";    width: 730px;    height: 170vh;    position: absolute;
    background: url(../img/common/logo.png);    top: -90px;    right: 5px;    filter: blur(7px);      opacity: 0.2;    background-repeat-x: no-repeat;}*/
.section_2  #nav {  }
.section_2  ul#nav {  padding: 0;}
.section_2  #nav li {  list-style: none;}
.section_2  .acdn.a1 { background: url(../img/sub/about01.jpg) center center}
.section_2  .acdn.a2 { background: url(../img/sub/about02.jpg) center center}
.section_2  .acdn.a3 { background: url(../img/sub/about03.jpg) center center; border: 1px solid #f9f9f9}
.section_2  .acdn {background-color:#eee;color:#444;cursor:pointer;width:100%;border:none;text-align:left;outline:none;font-size:15px;transition:.4s;padding:18px;}
.section_2  .panel {background-color:#f5f5f5;max-height:0;    overflow: hidden;    transition:  .2s ease-out;      border: none;    box-shadow: none;    margin-bottom: 0;}
.section_2  .panel.bg { padding: 20px;}
.section_2  .p-hide { display: none }
.section_2  .p-show { display: block }
.section_2  .acdn { cursor: pointer;    color: #fff;    text-align: center;    text-transform: uppercase;    font-weight: bold;
    text-shadow: -1px 0px #163161, 0px 1px #163161, 1px 0px #163161, 0px -1px #163161, 0 0 5px #163161; display: block;  padding: 50px 1%;  text-decoration: none; background-size: cover!important; background-repeat: no-repeat!important}
.section_2  #nav li a.active {       background-blend-mode: revert;} 
.section_2  #nav li a:hover, #nav li a.active {  color: #fff;}
.section_2  #nav section {  display: none;  float: left;  background: #f9f9f9;  overflow: hidden;  padding: 20px;}
.section_2  .no-js #nav section {  display: block;}
.section_2  #nav li ul li a {  padding: 10px 25px;}
.section_2 #pcnav .slogan   {  width: 100%;}
.section_2 #pcnav .slogan   h2{   font-size: 3em;   text-align: left; font-weight: bold;line-height: 1em;    text-transform: uppercase;}
.section_2 #pcnav .slogan  h3{  color: #163161 ;    font-size: 2em;   text-align: left; font-weight: bold;line-height: 1.3em;    text-transform: uppercase;}
.section_2 #pcnav .slogan   h3 svg{       font-size: 0.8em; }
.section_2 #pcnav  .slogan h4{text-align: left; font-size: 1.2em;font-weight: 700;line-height: 1.2em}
.section_2  #pcnav .slogan p{ text-align: left;font-size: 1.05em;font-weight: 400;line-height: 2em}
.section_2 #pcnav .slogan p.goto  {   margin-top: 130px; }
.section_2 #pcnav .slogan p.goto span {    background: #fff;    padding: 10px;    border-radius: 10px;    cursor: pointer;
    font-weight: 800;    text-align: center;    /* margin-top: 10px; */}

#pcnav {display: none;  overflow: hidden; height: 350px}
 
/*.accordion > .menu-item:focus > p {  display: none}   
.accordion > .menu-item:focus .slogan p {  display: block}   
.accordion > .menu-item:focus {  width: 80vw;  box-sizing: border-box;  }
.menu-item:focus .sub-menu .menu-item {  transform: translateY(0%);  transition: transform 0.3s ease-out;}*/

.accordion > .menu-item.on > p {  display: none}   
.accordion > .menu-item.on .slogan p {  letter-spacing: 0px;font-family: 'Noto Sans KR', sans-serif; display: block; color:#fff}   
.accordion > .menu-item.on .slogan h3 {  color: #fff !important;margin-bottom: 20px;}   
.accordion > .menu-item.on .slogan h4 {font-family: 'Noto Sans KR', sans-serif;  color: #fff !important; margin-bottom: 10px;}   
.accordion > .menu-item.on {  width: 80vw;  box-sizing: border-box;  }
.menu-item.on .sub-menu .menu-item {  transform: translateY(0%);  transition: transform 0.3s ease-out;}

.accordion {  display: flex;    justify-content: space-between;  height: 350px;}
.accordion > .menu-item {  width: 20vw;  flex: 0 1 auto;  height: 350px;  line-height: 0.8;  cursor: pointer;
  transition: width 0.4s ease-out;  position: relative;}

.accordion > .menu-item.on1 {  width: 80vw;  }
.accordion > .menu-item.on2 {  width: 10vw;  }
.accordion > .menu-item:nth-child(1) {  background: url(../img/sub/about01.jpg) center center; background-size: cover !important;}
.accordion > .menu-item a {  color: inherit;}
.accordion > .menu-item:nth-child(1).has.on { background: url(../img/sub/about01-1.jpg) center center;  ;}
.accordion > .menu-item:nth-child(1).has {  background-color: #ffffffe8;    background-blend-mode: hue;}
.accordion > .menu-item:nth-child(5) {  z-index: 0;}
.accordion > .menu-item:nth-child(2) {  background: url(../img/sub/about02.jpg) center center; background-size: cover !important;}
 .accordion > .menu-item:nth-child(2).has.on {  background: url(../img/sub/about02-1.jpg) center center;}
 .accordion > .menu-item:nth-child(2).has {  background-color: #ffffffe8;    background-blend-mode: hue}
.accordion > .menu-item:nth-child(3) {  background: url(../img/sub/about03.jpg) center center; background-size: cover !important;}
.accordion > .menu-item:nth-child(3) .goto a {  color: #163161;}
 .accordion > .menu-item:nth-child(3).has.on {  background: url(../img/sub/about03-1.jpg) top center;;}
 .accordion > .menu-item:nth-child(3).has {    background-color: #ffffffe8;    background-blend-mode: hue}
.accordion > .menu-item:nth-child(3) {  z-index: 2;}
.accordion > .menu-item:nth-child(3) .sub-menu iframe {  width: 54%; height: 310px}
.accordion > .menu-item:nth-child(3) .sub-menu .slogan {  width:45%!important; display: inline-block; padding-left: 20px;    vertical-align: bottom; }
.accordion > .menu-item:nth-child(1) {  z-index: 4;}
.accordion > .menu-item > p {    color: #fff;  text-align: center;    position: absolute;    width: 100%;    bottom: 10px; text-shadow:-1px 0px #163161, 0px 1px #163161, 1px 0px #163161, 0px -1px #163161, 0 0 5px #163161}  
.accordion > .menu-item.has > p {  color: #163161; text-shadow:none}  
.accordion > .menu-item > p > a {  font-size: 1em;  text-decoration: none;  transition: 0.2s ease-out;  pointer-events: none;    
	text-transform: uppercase;    font-weight: 800;}
ol {  list-style: none;  padding: 0;  margin: 0;} ol * {  outline: 0;}
.sub-menu { padding: 30px; }
.menu-item  {     border: 1px solid #ececec;}
.menu-item .sub-menu {      display: none;opacity: 0;  transition: 0.3s ease-out;}
.menu-item.on {  border: none;}
.menu-item.on .sub-menu {  display: block;opacity: 1;  transition: 0.5s ease-out;}
.sub-menu .menu-item {  transform: translateY(100%);}
.sub-menu .menu-item:hover a {  text-decoration: none;}
.sub-menu .menu-item a {  line-height: 1.5;  font-size: 4vmin;  pointer-events: default;}

@media only screen and (min-width: 1200px) /*pc 일때*/{
	#pcnav {display: block;}
.section_2    #nav {	display: none;  margin: 0 auto;    border: none;  }
.section_2  	#nav li {    display: block;    padding: 0px;    border: none;  }
.section_2  	#nav{display:none;justify-content:space-between}
.section_2  	#nav li {    border: none;    width: 20%; min-width: 250px } 
.section_2  	#nav li a {        height: 350px;float: left;    padding-top:300px  ;  text-align: center;  border: none;    width: 100%; 
    text-transform: uppercase; color: #fff; font-weight: bold  } 
.section_2  	#nav.on{display:inline-block;}
.section_2  	#nav.on li{    width: auto;  min-width:none; } 
.section_2    #nav.on li a {    float: left;padding-top:300px  ;  text-align: center;  border: none;    width: 10%;  } 
.section_2    #nav.on li a.active {       background-blend-mode: revert;} 
.section_2    #nav section {    padding: 20px;    width: 70%;       height: 350px;  text-align: left!important;    margin-bottom: 20px;}
}
@media (max-width: 1200px) {
.section_2 {	padding: 50px 0px 40px;}
.section_2 {	min-height: 67vh;}
.section_2 .slogan p:not(.list) br{display: none}
.section_2  .slogan h2{     font-size: 3em;   }
.section_2  .slogan h3{     font-size: 2.2em;    }
.section_2  .slogan h4{ font-size: 1.1em;}
.section_2  .slogan p{ font-size: 1em;}
.section_2 .slogan #nav   h2{     font-size: 2em;  line-height: 1.5em;   }
.section_2 .slogan #nav   h3{     font-size: 1.5em; line-height: 1.5em;  }
.section_2 .slogan #nav   h3 svg{       font-size: 0.8em; }
.section_2  .slogan #nav h4{ font-size: 1.15em;line-height: 1.5em}
.section_2  .slogan #nav p{ font-size: 1em;line-height: 2em}
.section_2 ul#nav.m500 {    margin-bottom: 150px}
.section_2 .slogan #nav p.goto  {  text-align: center;  margin-top: 10px; }
.section_2 .slogan #nav p.goto span {    background: #163161;    padding: 10px;    border-radius: 10px;    cursor: pointer;
    font-weight: 800;    text-align: center;    /* margin-top: 10px; */}
.section_2 .slogan #nav p.goto span a {  color: #fff; }
.section_2 .slogan:after {    height: 75vh;    opacity: 0.1; }
}