@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR:300,400,500,600,700&display=swap&subset=korean');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: 'InkLipquid';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*

font-family : 'Noto Serif KR', serif;
font-family : 'Noto Sans KR', sans-serif;
font-family : 'NanumSquare', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'InkLipquid';
font-family: 'GmarketSansBold';
             
*/

.noto_sans {font-family : 'Noto Sans KR', sans-serif !important;}


* { margin: 0; padding: 0; outline: none;}
html,body { width: 100%; height: 100%; min-width: 1024px;}
ul,li {list-style: none;}
a {text-decoration: none; color: inherit;}
p, span, h1, h2, h3, h4, h5, h6, a, li { font-family : 'NanumSquare', sans-serif; }
.mob {display: none;}
.pc {display: block;}
#header {min-width: 1024px;}
.hidden {overflow-y: hidden;}

/* 초기화 영역 끝 */


/*header*/


#wrap {width: 100%;}
#header { height: 90px; width: 100%; position: absolute; left: 0; top: 0; margin: 0px auto; z-index: 11; background-color: #fff; }


#header_inner { width: 95%;  max-width: 1200px;  margin: 25px auto 0px;  font-size: 0px;  position: relative; font-size: 0px;}
#header_logo { width: 15%;  display: inline-block;  vertical-align: top;}
#header_logo img {width: 100%; max-width: 170px;}


#nav { width: 80%;  margin: 22px 0px 0px;  display: inline-block;  font-size: 0px;  text-align: center;  box-sizing: border-box; vertical-align: top}
#nav > li {cursor: pointer; display: inline-block; width:14.2857%; font-weight : bold; font-size : 15px; line-height: 15px;  color : #2E3185;  vertical-align: top; position: relative; transform: skewX(-0.3deg);}
#nav > li:hover::before {content: ""; position: absolute; left: 50%; top: -10px; width: 20px; height: 3px; background-color: #2E3185; transform: translateX(-50%)}
#nav > li:hover .nav_ul {display: block;}

.nav_ul {  min-width: 250px;  text-align: left;  margin-top: 44px;  background-color: #fff;  padding: 20px;  box-sizing: border-box;  display: none;}
.nav_ul li {  font-size: 14px;  line-height: 16.55px;  margin-bottom: 15px;  transform: skewX(-0.3deg);  color: #666666;  font-weight: normal; transition: all 0.4s;}
.nav_ul li:hover {color: #2E3185;}
.nav_ul li:last-child {margin-bottom: 0px;}
.nav_ul li a {display: block; width: 100%; height: 100%;}



#lang { box-sizing: border-box;  display: inline-block;  border: 1px solid #fff;  text-align: center; cursor: pointer;  vertical-align: top;  padding: 5px 0px;  border-radius: 12px;  width: 8%;  margin-left: 2%;  margin-top: 20px; overflow: hidden;}
#lang li { display: block;  position: relative;  text-align: center;  font-size: 13px;  text-transform: uppercase;  color: #fff;  transform: skewX(-0.3deg); line-height: 14px;}
.lang_sub {  display: none;   padding: 5px 0px 0px;}
.lang_sub.on {  display: block;}
#lang .lang_sub li {padding: 5px 0px; transition: all 0.4s;}
#lang .lang_sub li:hover {color: #333; background-color: #fff;}


.header_bottom {  background-color: #2E3182;  width: 100%;  height: 30px;  position: absolute;  top: 90px;  z-index: 10;}
.h_bottom_inner {width: 95%; height: 100%; max-width: 1200px; margin: auto; overflow: hidden; position: relative; }
.h_bottom_inner:after {content: ""; background-image: url(../image/h_bottom_bg.png);  position: absolute;  right: 0;  z-index: 10;  top: -16px;  width: 60px;  height: 160px;}
.h_bottom_inner:before {content: "";  background-image: url(../image/h_bottom_bg.png);  position: absolute; left: -5px;  top: -90px; z-index: 10; width: 60px;  height: 160px;}

.h_bottom_ul { font-style : italic; font-size : 14px; color: #fff; position: absolute; width: 100%; height: 100%; margin: 0; line-height: 25px; text-align: center; white-space: nowrap;
    
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: h_move 30s linear infinite;
 -webkit-animation: h_move 30s linear infinite;
 animation: h_move 30s linear infinite;
    
}

/* Move it (define the animation) */
@-moz-keyframes h_move {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes h_move {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes h_move {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

.h_bottom_ul:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.h_bottom_ul li {display:inline-block; width:auto; margin:0px 5px; cursor: pointer; opacity: 0.8; transition: all 0.4s;}
.h_bottom_ul li:hover {opacity: 1}


.header_top {position: absolute; right: 20px; top: 10px; font-size: 0px; z-index: 10;}
.header_top li { font-size: 11px;  line-height: 1.3;  display: inline-block;  padding: 3px 10px;  vertical-align: middle;  color: #2E3185;  position: relative; }
.header_top li::after { content: "";  position: absolute;  width: 1px;  height: 10px;  right: 0px;  top: 50%;  transform: translateY(-50%);  background-color: #ddd;}
.header_top li:last-child { padding-right: 0px;}
.header_top li:last-child::after {display: none;}
.header_top li.sitemap_btn {background-color: #2E3185; color: #fff; border-radius: 15px;}
.header_top li.sitemap_btn::after {display: none;}
.header_top li a {display: block; transform: skewX(0.3deg);     text-transform: uppercase;}
.header_top li a:hover {text-decoration: underline;}




/*footer*/

#footer {width: 100%; background-color: #2e3180; z-index: 10; position: relative; padding: 20px 0px 35px;}
.f_inner { width: 95%;  max-width: 1200px;  margin: 0px auto;}
.f_nav {font-size: 0px;}
.f_nav > li {display: inline-block; vertical-align: top; position: relative; width:14.2857%;  font-weight : bold; font-size : 17px; color: #fff; }
.f_nav > li > p {padding: 0px 5px; box-sizing: border-box;  line-height: 1.1}
.f_nav > li > p.line2 {line-height: 2.2}
.f_nav_ul {  width: 100%;  padding: 0px 8px;  box-sizing: border-box;  padding-top: 20px; min-height: 255px;}
.f_nav_ul li { display: block;   font-size: 13px;  transform: skewX(-0.3deg);  line-height: 17px;  margin-bottom: 10px;  width: 100%;  font-weight: normal; transition: all 0.4s;}
.f_nav_ul li:hover {text-decoration: underline;}
.f_nav_ul li a {display: block; width: 100%;}


.f_txtbox {width: 100%; margin-top: 50px; font-size: 0px;}
.f_txtbox li {display: inline-block; vertical-align: top;}
.f_txtbox li:nth-child(1) {width: 25%;}
.f_txtbox li:nth-child(1) img {width: 100%; max-width: 170px}
.f_txtbox li:nth-child(2) {width: 75%;}
.f_txtbox li p { font-size : 15px; line-height : 27px; color : #FFFFFF; transform: skewX(-0.3deg)}
.f_txtbox li p .f_bold {font-weight: bold;}
.f_txtbox li p .f_margin {margin-right: 15px;}
.f_txtbox li p.copy { font-size: 14px; margin-top: 15px;  }
    
    
.f_map {width: 100%; height: 255px; }
    
    




/* main 01 */

.main_section {width: 100%; position: relative;}
.main_inner {width: 90%; max-width: 1400px; margin: auto; display: block; position: relative;}

#m1 {margin-top: 90px;}
.m1_right_nav {position: absolute; right: 3%; top: 50%; transform: translateY(-50%); z-index: 10;}
.m1_box {width: 100px; height: 100px; border-radius: 100%; text-align: center; background-color: #333333; transition: all 0.4s; margin-bottom: 25px; position: relative; }
.m1_box:hover {background-image: linear-gradient(140deg, #009FDC 0%, #2E3185 75%); }
.m1_box_txt {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: block; width: 100%; }
.m1_box:last-child {margin-bottom: 0px;}
.m1_box img {width: 100%; max-width: 45px; display: block; margin: auto;}
.m1_box p { font-size: 14px;  line-height: 20.94px;  letter-spacing: -0.43px;  color: #B2B2B2;  transition: all 0.4s;  margin-top: 5px;  transform: skewX(-0.3deg);  text-transform: uppercase;}
.m1_box:hover p {color: #fff;}


.ms1 {width: 100%; position: relative; overflow: hidden;}

.ma1_bg {width: 100%; height: 780px; background-repeat: no-repeat; background-size: cover; background-position: center; 
    -webkit-animation: mymove 10s infinite;
    -moz-animation: mymove 10s infinite;
    -ms-animation: mymove 10s infinite;
    -o-animation: mymove 10s infinite;
    animation: mymove 10s infinite;
}

.ms1.a1 .ma1_bg {background-image: url(../image/m1_bg1.png)}
.ms1.a2 .ma1_bg {background-image: url(../image/m1_bg2.png)}
.ms1.a3 .ma1_bg {background-image: url(../image/m1_bg3.png)}
.ms1.a4 .ma1_bg {background-image: url(../image/m1_bg4.png)}


/*
@keyframes mymove {
    
    50% {
        background-position: bottom right;
    }    

}
*/


.ms1_txtbox { position: absolute;  left: 22%;  top: 30%;  transform: translate(0px, -50%);  text-align: left;}
.ms1_txtbox::before {position: absolute; left: -13px; top:-1px; width: 22px; height: 22px; background-color: #009FDC; content: ""; z-index: 0; border-radius: 100%;}

.ms1_txt1 { font-size : 65px; line-height : 65px; color : #FFFFFF; position: relative; font-family: 'Roboto', sans-serif; z-index: 1; text-transform: uppercase; font-weight: 800;}
.ms1_txt2 { font-style : italic; font-size : 20px; line-height: 20px; margin-bottom: 30px; color : #fff; font-family: 'Roboto', sans-serif;}
.ms1_txt3 { font-size: 19px;  line-height: 27px;  color: #FFFFFF;  max-width: 675px;}

.ms1_txtbox_2 { position: absolute;  left: 50%;  top: 45%;  transform: translate(-50%, -50%);  text-align: left;  width: 90%;  max-width: 1200px;}
.ms1_txtbox_2::before {position: absolute; left: -13px; top:-1px; width: 22px; height: 22px; background-color: #009FDC; content: ""; z-index: 0; border-radius: 100%;}

.ms1_txtbox_3 { position: absolute;  left: 50%;  top: 45%;  transform: translate(-50%, -50%);  text-align: left;  width: 90%;  max-width: 1200px;}
.ms1_txtbox_3::before {position: absolute; left: -13px; top:-1px; width: 22px; height: 22px; background-color: #009FDC; content: ""; z-index: 0; border-radius: 100%;}


.ms1_txtbox_4 { position: absolute;  left: 22%;  top:45%;  transform: translate(0px, -50%);  text-align: left;}
.ms1_txtbox_4::before {position: absolute; left: -13px; top:-1px; width: 22px; height: 22px; background-color: #009FDC; content: ""; z-index: 0; border-radius: 100%;}


.ms1_bullet {  bottom: 8% !important; }
.swiper-container-horizontal>.swiper-pagination-bullets.ms1_bullet .swiper-pagination-bullet { margin: 0px 15px;}    
.ms1_bullet .swiper-pagination-bullet { width: 12px; height: 12px; background-color: #fff; opacity: 1;  transition: all 0.4s; border-radius: 15px; box-sizing: border-box; border: 2px solid #fff;}
.ms1_bullet .swiper-pagination-bullet-active {background-color: #2E3185;}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {   content: none;}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {   content: none;    
}





/* main 02 */


#m2 {  margin: 0px 0px 150px;  position: relative;  padding-top: 150px;}

.m2_bg {width: 100%; max-width: 325px; position: absolute; top: 0px; right: 0px;  z-index: -1}
.m2_bg img {width: 100%;}

.m2_ul {font-size: 0px; width: 100%; font-size: 0px; margin: auto; position:relative;}
.m2_ul > li { display: inline-block; vertical-align: middle; }

.m2_ul > li:nth-child(1) {width: 50%; }
.m2_img {background-repeat: no-repeat; background-size: cover; background-position: center;  height: 555px;}
.m2_img.img1 {background-image: url(../image/m2_img1.png);} 
.m2_img.img2 {background-image: url(../image/m2_img2.png);} 


.m2_ul > li:nth-child(2) {box-sizing: border-box; width: 50%; text-align: left; }
.m2_txt1 {font-size : 38px; line-height : 48px; color : #2E3185; padding-left: 50px; box-sizing: border-box; width: 100%; max-width: 450px; text-align: right; margin-bottom: 10px; font-family: 'Roboto', sans-serif;}
.m2_txt1 span {font-size : 60px; text-align: left; display: block; margin-bottom: 10px; font-family: 'Roboto', sans-serif; font-weight: 800;}
span.line {position: relative;}
span.line::before {content: ""; background-color:#2E3185; position: absolute; top: -10px; left:-10px; width: 20px; height: 3px; transform: rotate(-45deg)}

.m2_txtbox {background-color: #DFE9ED; width: 100%; padding: 40px 50px; box-sizing: border-box; }
.m2_txtbox .inner {width: 100%; max-width: 450px;}
.m2_txtbox p:nth-child(1) {  font-family: 'Roboto', sans-serif;  font-style: italic;  font-size: 25px;  line-height: 26px;  color: #333333;  border-bottom: 1px solid #2E3185;  padding: 0px 3px 8px;  margin-bottom: 30px;  font-weight: bold;}
.m2_txtbox p:nth-child(2) { word-break: keep-all;  font-size: 18px;  line-height: 27px;  letter-spacing: -0.5px;  color: #595959;  margin-bottom: 30px;}
.m_more {display: block; transform: skewX(-0.3deg)}
.m2_txtbox .m_more {text-align: right}
.m_more span {font-size : 15px; line-height : 30px; color : #808080; vertical-align: middle; display: inline-block; margin-right:5px;}
.more_effect {width: 70px; display: inline-block; vertical-align: middle; height: 1px; background-color: #cccccc; position: relative; }
.more_effect::before {position: absolute; left: 0px; top: 50%; width: 25px; height: 3px; transform: translateY(-50%); background-color:#009FDC; content: ""; transition: all 0.4s;}
.m_more:hover .more_effect::before{left: 45px; }






/* main 03 */


#m3 {margin: 100px 0px; height: 90vh; }

.m3_sub_menu {position: absolute; left: 0px;  width: 100%;  top: 60px; z-index: 10; font-size: 0px;}
.m3_sub_menu li { width: 23%;  margin: 0px 1%;  display: inline-block; vertical-align: top;  box-sizing: border-box; transition: all 0.4s; cursor: pointer; padding-top: 25px; font-weight: 800;  font-size: 0px; min-height: 140px;}

.m3_play {position: absolute; left: 25%;  top: 5px;  font-size: 35px;  color: #fff;  border: 2px solid #fff;  border-radius: 100%;  width: 45px;  height: 45px;  text-align: center; cursor: pointer; z-index: 10; transition: all 0.4s; opacity: 0;}
.m3_play:hover {background-color: #0099d6; color: #fff; border: 2px solid #0099d6; }
.m3_play.on {opacity: 1;}
.m3_play i {position: absolute; left: 55%; top: 50%; transform: translate(-50%,-50%); display: none;}
.m3_play img { position: absolute;  left: 50%;  top: 45%;  transform: translate(-50%,-50%);  width: 25px;}


.swiper-container.m3_slide.img { width: 100%; height: 100%;}
.m3_bg_img {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1}
.m3_img  {width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }
.m3_img.m3_img1 { background-image: url(../image/m3_img1.png)}
.m3_img.m3_img2 { background-image: url(../image/m3_img2.png)}
.m3_img.m3_img3 { background-image: url(../image/m3_img3.png)}
.m3_img.m3_img4 { background-image: url(../image/m3_img4.png)}


.m3_cont {width: 100%; height: 100%; position: relative; }
.m3_cont .main_inner { max-width: 1200px;  position: absolute;  left: 50%; top: 50%; transform: translate(-50%, -50%);}
.m3_txt1 { color: #fff;  box-sizing: border-box;  width: 100%;  margin-bottom: 45px; padding-left: 10px;}
.m3_txt1 span {font-size : 50px; font-family: 'Roboto', sans-serif; font-weight: 800;}
.m3_txt1 span.line::before {  background-color: #fff;}

.m3_txt_ul {width: 100%; font-size: 0px}
.m3_txt_ul > li {width: 23%; margin: 0px 1%; display: inline-block; vertical-align: top; box-sizing: border-box; transition: all 0.4s;}

.m3_cont .swiper-pagination { position: relative; bottom: auto; margin: 0px;}
.m3_cont .swiper-pagination-bullet { width: 23%;  height: 3px;  display: inline-block;  border-radius: 0%;   background-color: #808080;  opacity: 1;  margin: 0px 1% !important;  transition: all 0.4s;}
.m3_cont .swiper-pagination-bullet-active { background-color: #0099d6; }


.m3_txtbox {width: 100%; box-sizing: border-box; padding-top: 25px; transition: all 0.4s}
.m3_cont .swiper-slide .m3_txtbox {opacity: 0;}
.m3_cont .swiper-slide.swiper-slide-active .m3_txtbox {opacity: 1;}
.m3_txtbox > p:nth-child(1) {  font-weight : 800; font-size : 22px; line-height : 27.22px;letter-spacing : -1.5px; color : #808080; min-height: 60px; cursor: default; }
.m3_txt_ul li.on .m3_txtbox p:nth-child(1) {color: #fff;}

.m3_txtbox p:nth-child(2) { word-break: keep-all; font-size: 0px; margin-bottom: 70px; opacity: 0; cursor: default; transition: all 0.4s}
.m3_txt_ul li.on .m3_txtbox p:nth-child(2) {opacity: 1}
.m3_txtbox p:nth-child(2) span {display: inline-block; width: 100%; position: relative; padding-left: 12px; box-sizing: border-box; font-size: 17px;  line-height: 25px;  letter-spacing: -1.5px;  color: #fff; }
.m3_txtbox p:nth-child(2).width50 span {width: 50%; vertical-align: top}
.m3_txtbox p:nth-child(2) span::before {content: ""; width: 4px; height: 4px; border-radius: 100%; background-color:#fff; position: absolute; left: 0px; top: 10px; transition: all 0.4s;}

.m3_txt_ul li.on .m3_txtbox.black  p:nth-child(1) { color: #333333}
.m3_txt_ul li.on .m3_txtbox.black p:nth-child(2) span  { color: #333333}
.m3_txt_ul li.on .m3_txtbox.black p:nth-child(2) span::before {background-color: #333333}
.m_more.white span {  color: #fff;}
.m_more.white .more_effect { background-color: #fff;}

.m_more.black span {  color: #000;}
.m_more.black .more_effect { background-color: #000;}

.m3_cont.on .m3_sub_menu li {pointer-events: none;}
.m3_cont.on .swiper-pagination {text-align: left}
.m3_cont.on .swiper-pagination-bullet { width: 0px;  height: 0px; margin: 0px !important; }
.m3_cont.on .swiper-pagination-bullet-active {width: 30%;  height: 3px; margin-left: 1%;  background-color: #0099d6; }


.m3_slide.txt .swiper-slide.on .m3_txt_ul > li {width: 0%; margin: 0px;}
.m3_slide.txt .swiper-slide.on .m3_txt_ul .m3_txtbox p:nth-child(1) {font-size: 0px; line-height: 0px; min-height: auto;}
.m3_slide.txt .swiper-slide.on .m3_txt_ul .m3_txtbox p:nth-child(2) span { padding-left: 0px;  font-size: 0px;  line-height: 0px;}
.m3_slide.txt .swiper-slide.on .m3_txt_ul .m3_txtbox p:nth-child(2) span::before { width: 0px; height: 0px;}

.m3_slide.txt .swiper-slide.on .m3_txt_ul li.on {width: 30%; margin-left: 0px;}
.m3_slide.txt .swiper-slide.on .m3_txt_ul li.on .m3_txtbox p:nth-child(1) {font-size: 22px; line-height: 27.22px; min-height: 60px;}
.m3_slide.txt .swiper-slide.on .m3_txt_ul li.on .m3_txtbox p:nth-child(2) span { padding-left: 12px;  font-size: 17px;  line-height: 25px;}
.m3_slide.txt .swiper-slide.on .m3_txt_ul li.on .m3_txtbox p:nth-child(2) span::before { width: 4px; height: 4px;}


.m3_slide.txt .swiper-slide.on .m3_txt_ul li.on .m3_txtbox.black p:nth-child(1) { color: #fff}
.m3_slide.txt .swiper-slide.on .m3_txt_ul li.on .m3_txtbox.black p:nth-child(2) span  { color: #fff}
.m3_slide.txt .swiper-slide.on .m3_txt_ul li.on .m3_txtbox.black p:nth-child(2) span::before {background-color: #fff}
.m3_slide.txt .swiper-slide.on .m_more.black span {  color: #fff;}
.m3_slide.txt .swiper-slide.on .m_more.black .more_effect { background-color: #fff;}

.m3_list_ul {width: 100%;}
.m3_list_ul li {display: inline-block; vertical-align: top; width: 50%; margin-bottom: 25px; }
.m3_list_ul li p:nth-child(1) { position: relative;  padding-left: 12px;  box-sizing: border-box;  font-size: 17px !important;  line-height: 25px !important;  letter-spacing: -1.5px;  color: #fff;  min-height: initial !important;}
.m3_list_ul li p:nth-child(1)::before {content: ""; width: 4px; height: 4px; border-radius: 100%; background-color:#fff; position: absolute; left: 0px; top: 10px; transition: all 0.4s;}
.m3_list_ul li p:nth-child(2) {margin-bottom: 0px;}
.m3_list_ul li p:nth-child(2) span::before {display: none;}




/* main 04 */

#m4 {margin: 150px 0px;}

.m4_ul {font-size: 0px; width: 100%; font-size: 0px; margin: auto; position:relative;}
.m4_ul > li { display: inline-block; vertical-align: middle; }

.m4_ul > li:nth-child(1) { height: 520px; width: 55%; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../image/m4_img1.png)}

.m4_ul > li:nth-child(2) {box-sizing: border-box; width: 50%; text-align: left; margin-left: -5%;}
.m4_txtbox {  background-color: #2E3185;  width: 100%;  padding: 65px 60px 35px 60px;  box-sizing: border-box;  max-width: 565px;  box-shadow: 7px 7px 7px rgb(0 0 0 / 50%);}
.m4_txt1 {margin-bottom: 30px; font-family: 'Roboto', sans-serif;}
.m4_txt1 span { color: #fff;  font-size : 50px; font-family: 'Roboto', sans-serif; font-weight: 800; text-transform: uppercase;}
.m4_txt1 span.line::before {background-color:#fff;}
.m4_txtbox p:nth-child(2) { word-break: keep-all; font-size : 17px; line-height : 27px; letter-spacing : -1.5px; color : #fff; margin-bottom: 30px;}
.m4_ul2 {font-size: 0px; width: 100%; margin-bottom: 40px;}
.m4_ul2 li {width: 50%; padding-right: 10px; box-sizing: border-box; display: inline-block; vertical-align: top;}
.m4_ul2 li p {color: #fff;  font-size : 14px; line-height : 18px; margin-bottom: 10px; position: relative; padding-left: 10px; box-sizing: border-box; transform: skewX(-0.3deg);}
.m4_ul2 li p::before {content: ""; width: 5px; height: 1px; position: absolute; top: 8px; left: 0px; background-color: #fff;}
.m4_txtbox .m_more span {color: #fff;}





/* main 05 */

#m5 {margin: 150px 0px; padding-bottom: 130px;}
.m5_bg {width: 100%; position: absolute; bottom: 0px; left: 0px; height: 480px; background-image: url(../image/m5_bg.png); background-size: cover; background-position: center; background-repeat: no-repeat; }
#m5 .main_inner {background-color: #fff; padding: 50px 100px; box-sizing: border-box; box-shadow: 8px 8px 15px 5px rgb(0 0 0 / 15%);}
.m5_ul  {font-size: 0px; width: 100%;}
.m5_ul li {display: inline-block; vertical-align: top; width: 50%;}
.m5_ul li:nth-child(1) {width: 40%; margin-right: 10%;}
.m5_ul li:nth-child(1) img {width: 100%; max-width: 165px;}
.m5_ul li:nth-child(1) p:nth-child(2) {font-size : 36px; line-height : 46px; letter-spacing : -2px; color : #000000; margin: 35px 0px;}
.m5_ul li:nth-child(1) p:nth-child(2) span {font-weight: 800;}
.m5_ul li:nth-child(1) p:nth-child(3) {  font-size : 17px; line-height : 27px; letter-spacing : -0.9px; color : #666666;}
.m5_ul li:nth-child(1) p:nth-child(3) .color {  position: relative;  background-color: rgba(0,159,220,0.2);
}
.m5_ul li:nth-child(1) p:nth-child(3) .color::before {content: ""; position: absolute; left: 0px; bottom: 0px; width: 100%; background-color: rgba(0,159,220,0.2); height: 60%; display: none;}

.m5_ul li:nth-child(2) {width: 50%; margin-left: 0%; margin-top: 50px;}
.m5_ul li:nth-child(2) img {width: 90%; max-width: 530px; margin: auto; display: block;}





/* main 06 */

#m6 {margin: 150px 0px;}
.m_title {font-family: 'Roboto', sans-serif;  font-size : 45px; line-height : 55px; text-transform : uppercase; color : #2E3185; font-weight: 800; position: relative;}
.m_title::before {content: ""; width: 100%; max-width: 20px; height: 3px; margin: 10px auto 25px; transform: rotate(-45deg); background-color: #2E3185; display: block;}
.m_title2 {font-size : 18px; line-height : 28px; letter-spacing : -0.9px; color : #595959; margin-top: 25px;}
.center {text-align: center;}

.m6_wrap {width: 100%; margin: 60px 0px;}
.m6_cont {width: 100%; height: 450px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;}
.m6_cont.img1 {background-image: url(../image/m6_img1.png);}
.m6_cont.img2 {background-image: url(../image/m6_img2.png);}
.m6_cont.img3 {background-image: url(../image/m6_img3.png);}
.m6_cont.img4 {background-image: url(../image/m6_img4.png);}
.m6_cont.img5 {background-image: url(../image/m6_img5.png);}
.m6_cont.img6 {background-image: url(../image/m6_img6.png);}
.m6_cont.img7 {background-image: url(../image/m6_img7.png);}
.m6_cont.img8 {background-image: url(../image/m6_img8.png);}
.m6_cont .inner {width: 90%; max-width: 1000px; margin: auto; height: 100%; position: relative; }
.m6_txtbox {position: absolute; left: 0px; top: 50%; transform: translateY(-50%); background-color: #E4E6EA; padding: 40px 25px; box-sizing: border-box; box-shadow: 7px 7px 7px rgb(0 0 0 / 50%); width: 100%; max-width: 445px;}
.m6_txtbox p:nth-child(1) {font-weight : 800; font-size : 35px; line-height : 35.22px; letter-spacing : -1.5px; color : #2E3185;}
.m6_txtbox p:nth-child(2) { font-weight: 800;  font-size: 16px;  line-height: 27.22px;  color: #2E3185;  margin: 10px 0px 25px;  transform: skewX(-0.3deg);}
.m6_txtbox p:nth-child(3) { font-size: 16px;  line-height: 26px;  letter-spacing: -0.9px;  color: #595959;  margin-bottom: 30px;  transform: skewX(-0.3deg);}
.m6_txtbox p.last {font-size: 16px; line-height: 26px; letter-spacing: -0.9px;  color: #000000; font-weight: bold; transform: skewX( -0.3deg );}
.m6_txtbox img.addimg {position: absolute; right: 25px; top: 40px; width: 100%; max-width: 115px;}

.m6_txtbox .m_more span { font-size: 14px;}

.swiper-pagination.m6_thum {  position: relative;  margin: 30px auto;  width: 100%;  max-width: 1000px; transform: skewX(-0.3deg); bottom: auto; left: auto;}

.swiper-pagination.m6_thum .swiper-pagination-bullet {  width: 12.5%;  margin: 0px !important;  height: auto;  vertical-align: top;  display: inline-block;  background: transparent;  opacity: 1;  position: relative;  border-radius: 0px;  padding: 10px 0px 15px;  font-size: 15px;  line-height: 1.1;  min-height: 122px;  letter-spacing: -0.75px;  color: #808080;  font-weight: bold;  border-right: 1px solid #ddd;  box-sizing: border-box;}
.swiper-pagination.m6_thum .swiper-pagination-bullet:last-child {border-right: 0px;}

.m6_thum .img {width: 100%; max-width: 55px; transition: all 0.4s; display: block; margin: 0px auto 10px}
.m6_thum .img_hover {opacity: 0; position: absolute; left: 50%; top: 10px; width: 100%; max-width: 55px; transform: translateX(-50%); transition: all 0.4s}
.m6_thum .img_on {opacity: 0; position: absolute; left: 50%; top: 10px; width: 100%; max-width: 55px; transform: translateX(-50%); transition: all 0.4s}

.swiper-pagination.m6_thum .swiper-pagination-bullet:hover {color:#2E3185; }
.swiper-pagination.m6_thum .swiper-pagination-bullet:hover .img {opacity: 0;}
.swiper-pagination.m6_thum .swiper-pagination-bullet:hover .img_hover {opacity: 1;}


.swiper-pagination.m6_thum .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1;  background-color: #009FDC; color: #fff;}
.swiper-pagination.m6_thum .swiper-pagination-bullet.swiper-pagination-bullet-active .img {opacity: 0;}
.swiper-pagination.m6_thum .swiper-pagination-bullet.swiper-pagination-bullet-active::before { content: "";  width: 0;  height: 0;  border-left: 10px solid transparent; border-right: 10px solid transparent;  border-bottom: 12px solid #009FDC; position: absolute;  left: 50%;  top: -12px; transform: translateX(-50%);}
.swiper-pagination.m6_thum .swiper-pagination-bullet.swiper-pagination-bullet-active .img_on {opacity: 1;}
.swiper-pagination.m6_thum .swiper-pagination-bullet.swiper-pagination-bullet-active:hover {color: #fff;}
.swiper-pagination.m6_thum .swiper-pagination-bullet.swiper-pagination-bullet-active:hover .img_hover {opacity: 0;}








/* main 07 */

#m7 {margin: 150px 0px 0px; background-color: #E4E6EA; padding: 70px 0px 100px;}
.main_inner.m7 {max-width: 1350px; width: 90%;}
.m7_board {width: 90%; margin: 50px auto;}