/*


제이에스 디자인 랩(JS DESIGN LAB)
https://web-js.co.kr

작성된 코드는 제이에스 디자인 랩의 지적재산권에 귀속됩니다.
무단배포 및 사용시 법적 처벌을 받을 수 있습니다.


*/



/* Main root */
html, body,
/* Document metadata */
base, head, link, meta, style, title,
/* Content sectioning */
address, article, aside, footer, h1, h2, h3, h4, h5, h6, header, hgroup, nav, section,
/* Text content */
blockquote, dd, div, dl, dt, figcaption, figure, hr, li, main, ol, p, pre, ul,
/* Inline text semantics */
a, abbr, b, bdi, bdo, br, cite, code, data, dfn, em, i, kbd, mark, q, rp, rt, rtc, ruby, s, samp, small, span, strong, sub, sup, time, u, var, wbr,
/* Image and multimedia */
area, audio, img, map, track, video,
/* Embedded content */
embed, object, param, source,
/* Scripting */
canvas, noscript, script,
/* Demarcating edits */
del, ins,
/* Table content */
caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr,
/* Forms */
button, datalist, fieldset, form, input, label, legend, meter, optgroup, option, output, progress, select, textarea,
/* Interactive elements */
details, dialog, menu, menuitem, summary,
/* Web Components */
content, element, shadow, slot, template,
/* Obsolete and deprecated elements */
acronym, applet, basefont, big, blink, center, command, content, dir, element, font, frame, frameset, image, isindex, keygen, listing, marquee, multicol, nextid, noembed, plaintext, shadow, spacer, strike, tt, xmp
{ margin:0; padding:0; outline:0; outline:none; box-sizing:border-box; word-break:keep-all;}



*::selection{background:#444; color:#fff; font-weight:bold;}
*[use="x"]{display:none !important;}
[class*=" JS-"],
[class^=JS-] *,
[class*=" JS-"] *,
[class^=JS-]{box-sizing:border-box; border:0;}

html,body { width:100%; height:100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body,code {font-family:'Noto Sans KR', 'Nanum Barun Gothic', 'Roboto', '나눔고딕', NanumGothic, 'Nanum Gothic', "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", Verdana,Dotum,sans-serif; font-size:12px; line-height:1.6; color:#333; overflow-y:scroll; background:#fff; }
body {}
body#popup { min-width:0; }
head,style,script{display:none !important;}

ul,ol,li,dd,dt { list-style:none; }
img,fieldset { border:none; vertical-align:top; }
img{max-width:100%; height:auto !important;}
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; font-size:12px;}
caption { display:none; }
th,td { border:0; vertical-align:top; }
button { overflow:visible; border:0; cursor:pointer;}
iframe:focus{outline:none;}
iframe[seamless]{display:block;}
textarea{resize:vertical; min-height:18px;}
hr.layout { display:none; }

a { text-decoration:none; color:#333; }
a:hover { text-decoration:normal; }
a:active { text-decoration:none; }
.objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; }
.cf{}
.cf:after{display:block; content:""; clear:both;}
.tablize{display:table; width:100%; font-size:0; line-height:0;}
.tablize>*{display:inline-block; width:auto; font-size:13px; line-height:1.6; vertical-align:top;}
.tablize>.tablize{font-size:0; line-height:0;}
.tablize>.tablize>*{font-size:13px; line-height:1.6;}
.split>li{position:relative;}
.split>li + li:after{display:block; position:absolute; top:5px; left:0; content:""; width:1px; height:5px; background:rgba(0,0,0,0.2);}
.hide{display:none !important;}
.hideAway{display:none !important; visibility:hidden !important; width:0 !important; height:0 !important; overflow:hidden !important;
          line-height:0 !important; font-size:0 !important; opacity:0 !important; position:fixed !important;
          top:-9999px !important; left:-9999px !important; margin:-9999px 0 0 -9999px !important; z-index:-9999 !important;}
.displaynone {display:none;}



#wrap{ padding:0 10px;}
#content{max-width:1500px; margin:0 auto; min-height:200px;}



.wow{}



/* layout */

.JS-header{background:rgba(0,0,0,0); position:relative; padding:0 10px;  transition:background 0.2s; z-index:20; background:#e;}
.JS-header.w{border-bottom:1px solid rgb(255,255,255,0);}
.JS-header.w:hover{background:rgba(0,0,0,0.6);}
.JS-header.c{border-bottom:1px solid rgb(0,0,0,0);}
.JS-header>.in{max-width:1500px; margin:0 auto; height:80px; position:relative; padding:0;}
.JS-header>.in h1{position:absolute; top:33px; left:10px; width:auto;}
.JS-header>.in h1 img{display:none; width:100%; height:auto;}

.JS-header.w>.in h1 img.w{display:inline;}
.JS-header.w>.in h1 img.c{display:none;}

.JS-header.c>.in h1 img.w{display:none;}
.JS-header.c>.in h1 img.c{display:inline;}

.JS-header .mo-btn{display:none;}
.mo-aside{display:none;}
.mo-asideBG{display:none;}

.JS-header>.in nav{padding-top:16px; text-align:; padding-left:280px;}
.JS-header>.in nav>ul{}
.JS-header>.in nav>ul>li{position:relative; margin-left:10px; z-index:10;}
.JS-header>.in nav>ul>li:hover{z-index:11;}
.JS-header>.in nav>ul>li>a{position:relative; cursor:pointer; display:block; padding:0 3px; font-size:14px; line-height:50px; font-weight:900; font-family:'Roboto', '나눔고딕', NanumGothic, 'Nanum Gothic', "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", Verdana,Dotum,sans-serif;}
.JS-header>.in nav>ul>li.last{float:right; margin-right:5px;}
.JS-header>.in nav>ul>li.last>a{font-size:13px;}
.JS-header>.in nav>ul>li.last>a i{position:relative; left:-3px; top:1px; font-size:15px;}


.JS-header.w>.in nav>ul>li>a{color:#ccc;}
.JS-header.c>.in nav>ul>li>a{color:#999;}

.JS-header.w>.in nav>ul>li.on>a{color:#fff;}
.JS-header.c>.in nav>ul>li.on>a{color:#000;}

.JS-header.w>.in nav>ul>li:hover>a{color:#fff;}
.JS-header.c>.in nav>ul>li:hover>a{color:#000;}

.JS-header>.in nav>ul>li>a:after{position:absolute; bottom:13px; left:0; width:0; height:3px; content:""; opacity:0; transition:0.2s;}
.JS-header>.in nav>ul>li.on>a:after{width:100%; opacity:1;}
.JS-header.w>.in nav>ul>li.on>a:after{background:rgba(255,255,255,1);}
.JS-header.c>.in nav>ul>li.on>a:after{background:rgba(0,0,0,1);}
/*
.JS-header>.in li.d1.this:after{position:absolute; bottom:15px; left:50%; margin-left:-2px; width:4px; height:4px; border-radius:50%; content:""; background:#ccc; opacity:0.4; transition:0.2s;}
.JS-header>.in li.d1.this:hover:after{bottom:10px; opacity:1;}*/
.JS-header>.in nav>ul>li>a i{}




.JS-header .depth02Area{position:absolute; top:50px; left:50%; margin-left:-85px; width:170px;  text-align:left; background:#000; display:none;}
.JS-header .depth02Area ul{padding:10px 5px;}
.JS-header .depth02Area ul li{display:block;}
.JS-header .depth02Area ul li + li{}
.JS-header .depth02Area ul li a{display:block;  padding:5px;   font-size:14px; color:#fff;}
.JS-header .depth02Area ul li a:hover{background:#333}

.JS-header li:hover .depth02Area{display:block; animation:fadeInUpSmall5 0.2s linear;}


@media all and (max-width:1000px){

  .JS-header{background:transparent !important;}
  .JS-header>.in{height:auto; min-height:80px;}
  .JS-header>.in h1{width:130px; top:15px; left:7px;}
  .JS-header>.in nav{text-align:left; width:100%; padding-top:40px; display:none;}
/*
  .JS-header>.in nav ul{}
  .JS-header>.in nav ul>li{position:static;}
  .JS-header>.in nav>ul>li>a{font-size:12px; line-height:20px;}
  .JS-header>.in nav>ul>li>a:after{bottom:0;}

  .JS-header li .depth02Area{animation:none; width:100%; top:60px; left:0; margin:0; background:transparent;}
  .JS-header li .depth02Area ul{display:table; font-size:0; line-height:0; width:100%;  padding:0;}
  .JS-header li .depth02Area ul li{display:inline-block; font-size:10px; line-height:1; vertical-align:top;}
  .JS-header li .depth02Area ul li a{color:#333;}


  .JS-header li:hover .depth02Area{display:none; animation:none;}
  .JS-header li.on .depth02Area{display:block;}
*/


  .JS-header .mo-btn{display:inline-block; position:absolute; top:0; right:0; padding:10px; cursor:pointer;}
  .JS-header .mo-btn i{font-size:20px;}

  .JS-header.w .mo-btn i{color:#fff;}

  .mo-aside{display:block; position:fixed; height:100%; padding:30px; top:0; right:-70%; width:60%; background:#fff; z-index:999; transition:0.2s;}
  .mo-aside>.in{}
  .mo-aside nav{}
  .mo-aside nav ul.{}
  .mo-aside>.in nav{}
  .mo-aside>.in nav>ul{}
  .mo-aside>.in nav>ul>li{display:block; position:relative; margin-bottom:20px; z-index:10;}
  .mo-aside>.in nav>ul>li:hover{z-index:11;}
  .mo-aside>.in nav>ul>li>a{position:relative; display:inline-block; font-size:14px; line-height:2; font-weight:900; font-family:'Roboto', '나눔고딕', NanumGothic, 'Nanum Gothic', "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", Verdana,Dotum,sans-serif;}

  .mo-aside>.in nav>ul>li>a:after{position:absolute; bottom:13px; left:0; width:0; height:3px; content:""; opacity:0; transition:0.2s;}
  .mo-aside>.in nav>ul>li.on>a:after{width:100%; opacity:1;}

  .mo-aside .depth02Area{}
  .mo-aside .depth02Area ul{padding:0 5px;}
  .mo-aside .depth02Area ul li{}
  .mo-aside .depth02Area ul li a{display:inline-block; line-height:1.6;  font-size:14px;}

  .mo-aside.on{right:0;}

  .mo-asideBG{  position:fixed; height:100%; top:0; left:0; width:100%; background:rgba(0,0,0,0.6); z-index:888; transition:0.2s;}
  .mo-asideBG i{position:absolute; top:20px; left:20px; font-size:30px; color:#fff;}
  .mo-asideBG.on{display:block;}


}





.JS-footer{padding:10px 10px; text-align:right;}
.JS-footer>.in{max-width:1500px; margin:0 auto;}


@media all and (max-width:1000px){

  .JS-footer{margin-top:50px;}

}




/* main */

/*
.first_loading{ text-align:center; position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999999; background:#000;}
.first_loading i{font-size:40px; color:#ccc;}


.JS-mainVideo{position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:10;}
.JS-mainVideo:before{position:absolute; top:0; left:0; width:100%; height:100px; background:#000; content:""; z-index:11; transition:0.3s;}
.JS-mainVideo:after{position:absolute; top:0; left:0; width:100%; height:100px; background:#000; content:""; z-index:11; transition:0.3s;}
.JS-mainVideo.load:before{opacity:0;}
.JS-mainVideo.load:after{opacity:0;}

.JS-mainVideo>.in{position:relative; width:100%; height:100%;}
.JS-mainVideo>.in:after{position:absolute; top:0; left:0; width:100%; height:100%; content:""; background:rgba(0,0,0,0); z-index:12; display:none;}
.JS-mainVideo iframe{transform:scale(1.1); width:100% !important; height:100% !important; position:relative; z-index:10;}


.JS-mainVisual{position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:10;}
.JS-mainVisual>.in{}
.JS-mainVisual iframe{position:absolute; top:-5%; left:50%; width:3000px !important; height:110% !important; margin-left:-1500px; z-index:10;}
.JS-mainVisual .in div{position:absolute; top:0; left:0; width:100%; height:100%; z-index:11;}
.JS-mainVisual p{position:absolute; bottom:0; left:0; width:100%; height:70px; background:#000; z-index:11; display:none;}
.JS-mainVisual h2{position:relative; top:40%; font-size:100px; line-height:1.2; color:#fff; z-index:12; font-weight:bold; width:100%; max-width:1200px; margin:0 auto; display:block; text-shadow:0 0 40px rgba(0,0,0,0.4);}

*/









body.main #wrap,
body.main #content{max-width:100% !important; padding:0 !important; height:100%; position:relative;}

.first_loading{ text-align:center; position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999999; background:#000;}
.first_loading i{font-size:40px; color:#ccc;}



.main-vid{position:relative; width:100%; height:100%; min-height:500px; margin-top:-80px; background:#000; overflow:hidden; z-index:15;}
.main-vid>.in{margin:0 auto;}

.main-vid{height:auto; min-height:auto;}
.main-vid iframe{width:100% !important;}


.vimeo-area{position:relative;}
.vimeo-area .video-btn{position:absolute; text-align:center; bottom:10px; right:10px; }
.vimeo-area .video-btn i{cursor:pointer; font-size:30px; background:rgba(255,255,255,0.3); line-height:30px; padding:5px; border-radius:5px; transition:0.2s;}
.vimeo-area .video-btn i:hover{}
.vimeo-area.muted .video-btn .vid-mute{display:none;}
.vimeo-area.unmuted .video-btn .vid-unmute{display:none;}






.main-vid .move {position:absolute; bottom:20px; left:50%; width:32px; margin-left:-16px; padding-top: 80px; cursor:pointer; z-index:20;}
.main-vid .move span {position: absolute;  top: 0;  left: 50%;  width: 24px;  height: 24px;  margin-left: -12px;  border-left: 1px solid #fff;  border-bottom: 1px solid #fff;  -webkit-transform: rotate(-45deg);  transform: rotate(-45deg);  -webkit-animation: sdb07 2s infinite;  animation: sdb07 2s infinite;  opacity: 0;  box-sizing: border-box;}
.main-vid .move span:nth-of-type(1) {-webkit-animation-delay: 0s;  animation-delay: 0s;}
.main-vid .move span:nth-of-type(2) {top: 16px;  -webkit-animation-delay: .15s;  animation-delay: .15s;}
.main-vid .move span:nth-of-type(3) {top: 32px;  -webkit-animation-delay: .3s;  animation-delay: .3s;}
@-webkit-keyframes sdb07 {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes sdb07 {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

@media all and (max-width:1000px){
  .main-vid{height:auto; min-height:auto;}
  .main-vid iframe{width:100% !important;}
  .main-vid .move{display:none;}
}




.main-nav{position:fixed; top:0; left:0; width:100%; height:100%; z-index:16;}
.main-nav:after{position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; content:""; backdrop-filter:blur(6px); background:rgba(0,0,0,0.6);}
.main-nav>.in{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:12;}

.main-nav nav{ font-family:'Roboto', '나눔고딕', NanumGothic, 'Nanum Gothic', "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", Verdana,Dotum,sans-serif;}
.main-nav nav>ul{position:relative; text-align:center;}
/*
.main-nav nav>ul:after{position:absolute; top:0; left:0; width:100%; height:1px; background:rgba(255,255,255,0.3); content:"";}
.main-nav nav>ul>li{position:relative; width:11%; margin:0 2%; text-align:left; margin-top:-40px; opacity:0.6; transition:0.2s;}
.main-nav nav>ul>li:hover{opacity:1;}
.main-nav nav>ul>li:after{position:absolute; top:40px; left:0; width:100%; height:2px; background:rgba(255,255,255,1); content:"";}
.main-nav nav>ul>li>a{position:relative; color:#fff; font-size:13px; font-weight:900;}
*/
.main-nav nav>ul>li{position:relative; width:100%; margin:0.5% 0;   opacity:0.8; transition:0.2s;}
.main-nav nav>ul>li:hover{opacity:1;}
.main-nav nav>ul>li>a{
  font-size:50px; font-weight:900;
  -webkit-text-fill-color:transparent; /* Will override color (regardless of order) */
  -webkit-text-stroke: 1px #fff;

}
.main-nav nav>ul>li.last{display:none;}

.main-nav .depth02Area{position:relative; padding-top:60px; display:none;}
.main-nav .depth02Area:after{}
.main-nav .depth02Area ul{}
.main-nav .depth02Area ul li{position:relative; display:block; margin-bottom:3px;}
.main-nav .depth02Area ul li:after{}
.main-nav .depth02Area ul li + li{}
.main-nav .depth02Area ul li a{position:relative; display:block; padding:5px 10px; border:1px solid rgba(255,255,255,0.4); font-size:15px; color:#fff;}
.main-nav .depth02Area ul li a:after{position:absolute; top:8px; right:10px; font-family:xeicon; content:"\e940"; color:#fff; font-size:12px;}
.main-nav .depth02Area ul li a:hover{background:rgba(255,255,255,0.2);}


.main-nav .close{text-align:center; margin-top:50px;}
.main-nav .close i{border-radius:50%; font-size:40px;  line-height:40px; height:40px; width:40px; text-align:center; color:#fff; cursor:pointer; transition:0.3s;}
.main-nav .close i:hover{transform:rotate(270deg);}

@media all and (max-width:1000px){

  .main-nav{position:static; padding:50px 20px; height:auto; background:#fff;}
  .main-nav>.in{padding:0; position:static; transform:none;}
  .main-nav nav>ul:after{display:none;}
  .main-nav nav>ul>li{width:100%;   opacity:1;}
  .main-nav nav>ul>li:after{display:none;}
  .main-nav nav>ul>li>a{
    font-size:30px; font-weight:900;
    -webkit-text-fill-color: white; /* Will override color (regardless of order) */
    -webkit-text-stroke: 1px black;  }

  .main-nav .depth02Area{padding:10px;}
  .main-nav .depth02Area ul li a{border:0; padding:0; font-size:13px;}
  .main-nav .depth02Area ul li a:after{display:none;}
  .main-nav .close{display:none;}


}

@media all and (min-width:2000px){
  .main-nav>.in{padding-top:20%;}
}







.main-img{padding:10% 0 10% 10%; background:#f4f4f4;}
.main-img>.in{position:relative;}
.main-img + .main-img{}
.main-img .txt{position:absolute; padding:5%; z-index:11;  text-shadow:2px 2px 3px #fff;}
.main-img h2{font-size:30px; margin-bottom:10px; font-weight:900; line-height:1.1; letter-spacing:-1px;}
.main-img h3{font-size:20px; font-weight:500;}

.main-img.reverse{padding:10% 10% 10% 0; background:#fff;}
.main-img.reverse .txt{}

.main-img.w .txt{color:#fff;  text-shadow:2px 2px 3px #000;}
.main-img.t .txt{top:0;}
.main-img.l .txt{left:0;}
.main-img.r .txt{right:0; text-align:right;}
.main-img.b .txt{bottom:0;}
.main-img.m .txt{top:40%;}

.main-img-slider{  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);}

  @media all and (max-width:1000px){

    .main-img h2{font-size:15px;}
    .main-img h3{font-size:11px;}

  }




/* greeting */
.greeting{padding:5% 0;}
.greeting>.in{}
.greeting .pic{position:relative; width:45%; margin-right:5%; padding:5%; font-size:0; line-height:0; vertical-align:middle;}
.greeting .pic span{display:block; overflow:hidden;}
.greeting .pic img{width:100%; height:auto; /*animation:zoomJS linear 30s; animation-iteration-count:infinite;*/}
.greeting .pic .btn-video{position:absolute; bottom:5%; right:5%; text-align:center; width:80px; height:80px; line-height:80px; border-radius:50%; background:#fff; cursor:pointer;}
.greeting .pic .btn-video i{line-height:80px; font-size:80px; color:#999; transition:0.3s;}
.greeting .pic .btn-video i:hover{color:#000;}
.greeting .text{width:50%; padding:0 3% 0 12%; vertical-align:middle;}
.greeting .text h2{font-size:27px; margin-bottom:10%; padding-bottom:10%; font-weight:800; line-height:1.3; border-bottom:1px solid #333;}
.greeting .text h3{font-size:15px; font-family:'Noto Serif KR'; font-weight:400; text-align:justify;}
.greeting .text h4{margin-top:10%; font-size:14px; font-family:'Noto Serif KR';}
.greeting .text h4 b{vertical-align:middle; font-family:'Noto Serif KR'; position:relative; top:2px;}
.greeting .text h4 span{/*margin:0 5px;  font-family:'Noto Serif KR'; */display:inline-block; vertical-align:middle; font-size:20px; margin-left:5px; letter-spacing:2px;}
.greeting .text h4 img{margin-bottom:10px; width:250px; height:auto; display:inline-block; vertical-align:middle;}

.greeting-v{position:fixed; top:25%; left:25%; width:50%; height:50%; background:#000; z-index:100;}
.greeting-v i{position:absolute; top:-50px; right:-50px; font-size:50px; color:#fff; cursor:pointer; transition:0.2s;}
.greeting-v i:hover{color:#eee; transform: rotate(180deg);}
.greeting-v iframe{position:fixed; top:25%; left:25%; width:50%; height:50%;  background:#000; z-index:100;}
.greeting-bg{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:90; cursor:pointer;}



@media all and (max-width:1000px){

  .greeting{padding:0;}
  .greeting .pic{width:100%; padding:0; margin:0;}
  .greeting .pic .btn-video{bottom:10px; right:0; border-top-right-radius:0; border-bottom-right-radius:0;}
  .greeting .text{width:100%; padding:10% 0 0 0;}
  .greeting-v{width:96%; left:2%;}
  .greeting-v i{right:0;}
  .greeting-v iframe{width:96%; left:2%; }


}



/* 교육 1 */
.edu-01{position:relative; margin-top:-80px; /*position:fixed; top:0; left:0; width:100%; height:100%; z-index:10; background-image:url('../../img/edu_01.jpg'); background-position:center; background-size:cover;*/}
.edu-01:after{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); content:""; z-index:10;}
.edu-01 .pic{display:block;}
.edu-01 .pic img{width:100%;}
.edu-01 .pic img.pc-only{display:inline;}
.edu-01 .pic img.mo-only{display:none;}

.edu-01>.in{position:absolute; top:0; left:0; width:100%; height:100%; padding:0 10px; z-index:11;}
.edu-01>.in>div{position:relative; width:100%; height:100%; max-width:1500px; margin:0 auto;}
.edu-01>.in>div>div{display:table; height:100%; width:100%;}
.edu-01>.in>div>div>div{display:table-row; width:100%; height:100%; vertical-align:middle;}
.edu-01>.in>div>div>div>div{display:table-cell;  width:100%; height:100%; vertical-align:middle;}
.edu-01 h2{font-size:37px; font-weight:800; margin-bottom:3%; line-height:1.3; color:#fff;}
.edu-01 h3{width:50%; font-size:20px;margin-bottom:5%;  font-weight:400; text-align:justify; color:#fff;}
.edu-01 a{display:inline-block; font-size:15px; font-weight:400; color:#fff; border:1px solid #fff; padding:5px 15px; transition:0.2s;}
.edu-01 a:hover{background:#fff; color:#000;}
.edu-01 a i{font-size:13px; position:relative; }


@media all and (max-width:1000px){

  .edu-01{}
  .edu-01:after{display:none;}
  .edu-01 .pic img.mo-only{display:inline;}
  .edu-01 .pic img.pc-only{display:none;}
  .edu-01>.in{position:relative; padding-top:10%;}
  .edu-01 h2{font-size:27px; margin-bottom:10%; color:#000;}
  .edu-01 h3{width:100%; font-size:15px; font-weight:400; color:#000;}
  .edu-01 a{color:#000; border-bottom:1px solid #000; padding:5px 0;}

}



.edu-02{padding:5% 0;}
.edu-02>.in{max-width:1500px; margin:0 auto;}
.edu-02 .pic{width:40%;}
.edu-02 .slick-slider ul.slick-dots{bottom:-40px; text-align:right;;}
.edu-02 .text{width:60%; padding-left:5%;}
.edu-02 .text .box{margin-bottom:7%;}
.edu-02 .text h2{font-size:27px; font-weight:800; margin-bottom:2%; line-height:1.3;}
.edu-02 .text h2 span{display:none; margin-left:10px; font-size:15px; font-family:'Noto Serif KR'; font-weight:400; color:#999;}
.edu-02 .text ul{}
.edu-02 .text ul li{margin-right:20px; line-height:2; padding-left:0;}
.edu-02 .text ul li + li:after{top:30%; left:-10px; height:40%; background:#aaa; display:none;}
.edu-02 .text ul li a{font-size:15px; transition:0.1s;}
.edu-02 .text ul li a:hover{color:#999;}


@media all and (max-width:1000px){

  .edu-02{padding:0;}
  .edu-02>.in{display:block;}
  .edu-02 .pic{width:100%; padding:0; border:0;}
  .edu-02 .text{padding:5% 10px; width:100%;}

}






.status-01{position:relative; margin-top:-80px; height:100%; padding:10% 10px 5% 10px; background-image:url('../../img/status_01n_bg.jpg'); background-position:center; background-size:cover;}
.status-01:after{position:absolute; top:0; left:0; width:100%; height:100%; content:""; opacity:0.8; z-index:10;
                background-image:url('../../img/status_01n_bg.jpg'); background-position:center; background-repeat:repeat-y; background-size:100%;
}
.status-01>.in{position:relative; max-width:1500px; margin:0 auto; z-index:11;}
.status-01 .box{position:relative; padding:0; height:220px; color:#fff; transition:0.2s; box-sizing:border-box; z-index:10;}
.status-01 .box_:hover{-webkit-transform:scale(1.03); -ms-transform:scale(1.03); -o-transform:scale(1.03); -ms-transform:scale(1.03); transform:scale(1.03); z-index:11;}
.status-01 .box.bl{background-color:rgba(165,20,100,0.7);
/*
  background: rgb(152,88,109);
  background: linear-gradient(315deg, rgba(70,50,96,0.8) 40%, rgba(152,88,109,0.8) 100%);
*/
}
.status-01 .box.br{background-color:rgba(183,161,157,0.8); background-color:rgba(110,99,116,0.8); background-color:rgba(210,165,100,0.8);}
.status-01 .box.bl:hover{background-color:rgba(165,20,100,0.85);}
.status-01 .box.br:hover{background-color:rgba(183,161,157,1); background-color:rgba(210,165,100,1);}
.status-01 .box .wrap{position:absolute; width:100%; height:auto; padding:15px; transition:0.2s;}
.status-01 .box:hover .wrap{}
.status-01 .box.t-r-m .wrap{top:0; right:0; text-align:right;}
.status-01 .box.t-l-b .wrap{bottom:0;}
.status-01 .box.t-r-b .wrap{right:0; bottom:0; text-align:right;}

.status-01 .box:after{position:absolute; top:0; left:0; width:100%; height:100%; content:""; opacity:0.4; background-repeat:no-repeat; background-size:contain;}
.status-01 .box.z1:after{background-image:url('../../img/status-ico01.png'); background-position:bottom right;}
.status-01 .box.z2:after{background-image:url('../../img/status-ico02.png'); background-position:right bottom; background-size:30%;}
.status-01 .box.z3:after{background-image:url('../../img/status-ico03.png'); background-position:;}
.status-01 .box.z4:after{background-image:url('../../img/status-ico04.png'); background-position:right top; background-size:50%;}
.status-01 .box.z5:after{background-image:url('../../img/status-ico05.png'); background-position:right bottom; background-size:50%;}
.status-01 .box.z6:after{background-image:url('../../img/status-ico06.png'); background-position:bottom right; }
.status-01 .box.z7:after{background-image:url('../../img/status-ico07.png'); background-position:top right; background-size:40%;}
.status-01 .box.z8:after{background-image:url('../../img/status-ico08.png'); background-position:bottom right; background-size:60%;}
.status-01 .box.z9:after{background-image:url('../../img/status-ico11.png'); background-size:cover; background-position:center;}
.status-01 .box.z10:after{background-image:url('../../img/status-ico10.png'); background-position:bottom right; background-size:40%;}
.status-01 .box.z11:after{background-image:url('../../img/status-ico09.png'); background-position:;}



.status-01 .box h3{font-size:17px; line-height:1.2;}
.status-01 .box h3 span{font-size:12px; font-weight:400;}
.status-01 .box h3 b{font-size:27px;}
.status-01 .box h4{font-size:60px; line-height:1.2; font-family: 'Jost', 'Noto Sans KR', 'Nanum Barun Gothic', 'Roboto', '나눔고딕', NanumGothic, 'Nanum Gothic', "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", Verdana,Dotum,sans-serif;}
.status-01 .box h4 span{font-size:15px;}
.status-01 .box h4 span.up{position:absolute; top:3%; line-height:1; opacity:0;}
.status-01 .box:hover h4 span.up{opacity:1;}

.status-01 .box h4 b{letter-spacing:-5px;}
@media all and (max-width:1400px){
  .status-01 .box h4 b{font-size:50px;}
  @media all and (max-width:1200px){
  .status-01 .box h4 b{font-size:40px;}
  }
  @media all and (max-width:1000px){
  .status-01 .box h3 b{font-size:20px;}
  .status-01 .box h4 b{font-size:30px; letter-spacing:-1px;}
  .status-01 .box h4 span.up{opacity:1;}
  }
}


.status-01 .left{width:50%; padding-right:2%;}
.status-01 .left .title{position:relative; height:120px; font-size:23px; font-weight:bold; line-height:1.3;}
.status-01 .left .title p{position:relative; top:10px; font-size:14px; color:#666; font-weight:normal;}
.status-01 .left .title span{position:absolute; bottom:10px; right:0; font-size:14px; color:#666; font-weight:normal;}
.status-01 .left .top{position:relative; height:100%; padding-left:41%; margin-bottom:1%;}
.status-01 .left .top .top-l{width:40%; position:absolute; top:0; left:0; height:100%;}
.status-01 .left .top .top-r{width:100%; height:160.5px;}
.status-01 .left .top .top-r.r1{margin-bottom:1.5%;}
.status-01 .left .top .top-r.r2{}

.status-01 .left .bottom{}
.status-01 .left .bottom .bottom-l{width:49%; margin-right:1%;}
.status-01 .left .bottom .bottom-r{width:50%;}

.status-01 .right{width:50%; padding-left:2%;}
.status-01 .right .top{margin-bottom:1%;}
.status-01 .right .top .top-l{width:59%; margin-right:1%;}
.status-01 .right .top .top-r{width:40%;}
.status-01 .right .middle{margin-bottom:1%;}
.status-01 .right .middle .middle-l{width:40%;}
.status-01 .right .middle .middle-r{width:59%; margin-left:1%;}
.status-01 .right .bottom{}
.status-01 .right .bottom .bottom-l{width:49.5%; margin-right:1%;}
.status-01 .right .bottom .bottom-r{width:49.5%;}


@media all and (min-width:1001px){

  .status-01 .box:after{opacity:0;}
  .status-01 .box:hover:after{opacity:0.4;}


  .status-01 .box .wrap{text-align:center !important; height:100%;}
  .status-01 .box.t-r-m:hover .wrap{text-align:right !important;}
  .status-01 .box.t-r-b:hover .wrap{text-align:right !important;}

  .status-01 .box h3{display:none;}
  .status-01 .box .wrap h4{line-height:190px; transition:0.3s;}
  .status-01 .left .top .top-l h4{line-height:295px;}
  .status-01 .left .top .top-r h4{line-height:130px;}

  .status-01 .box:hover h3{display:block;}
  .status-01 .box:hover .wrap{text-align:inherit !important; height:auto;}
  .status-01 .box:hover .wrap h4{line-height:70px;}

}



@media all and (max-width:1000px){

  .status-01{padding-top:100px;}
  .status-01 .left{width:100%; margin:0; padding:0;}
  .status-01 .right{width:100%; margin:1% 0 0 0; padding:0;}

  .status-01 .box{height:200px;}
  .status-01 .box .wrap{height:auto; text-align:inherit !important;}
  .status-01 .left .top .top-r{height:150px;}

  .status-01 .box h3{display:block; font-size:15px;}
  .status-01 .box h3 span{font-size:10px; display:inline-block;}
  .status-01 .box h4{font-size:30px;}
  .status-01 .box h4 span{font-size:12px;}

}



.status-02{position:relative; padding:0 10px; height:100%;}
/*
.status-02:after{position:absolute; top:0; left:0; width:100%; height:100%;  background:#999; opacity:0.4; content:"";
                  background-image:url('../../img/status_02_bg.jpg'); background-position:center; background-size:cover; background-attachment:fixed; z-index:10;}
.status-02:before{position:absolute; top:0; left:0; width:100%; height:100%; background:#9f8f91; opacity:0.5; content:""; z-index:11;}*/
.status-02>.in{position:relative; max-width:1500px; margin:0 auto; padding:5% 0;}

.status-02 .line{position:absolute; top:0; width:1px; height:100%; background:#ddd; content:""; z-index:14;}
.status-02 .line.l1{left:5%;}
.status-02 .line.l2{left:35%;}
.status-02 .line.l3{left:65%;}
.status-02 .line.l4{left:95%;}

.status-02 .title{position:relative; margin-bottom:10%; padding-left:5%; z-index:13;}
.status-02 .title h2{font-size:37px; font-weight:800;}
.status-02 .title h3{font-size:20px; font-weight:400;}

.status-02 .l{position:relative; width:100%; padding:0; z-index:11;}
.status-02 .l ul{position:relative; z-index:13;}
.status-02 .l ul li{position:relative; left:5%; display:block; padding:0 0 70px 0;}
.status-02 .l ul li + li{}
.status-02 .l ul li h2{font-size:40px; font-family: 'Jost', 'Noto Sans KR', 'Nanum Barun Gothic', 'Roboto', '나눔고딕', NanumGothic, 'Nanum Gothic', "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", Verdana,Dotum,sans-serif;}
.status-02 .l ul li h3{font-size:25px; font-weight:400;}
.status-02 .l ul li .img{position:absolute; top:-50%; left:30%; width:30%; display:inline-block;}
.status-02 .l ul li .img img{width:100%; height:auto;}

.status-02 .l ul li.hasPic{margin:250px 0 100px 0;}
.status-02 .l ul li.s2{left:35%;}


/*
.status-02 .left{position:relative; width:100%; padding:0 50% 0 0; color:#fff; z-index:11;}
.status-02 .left .title{text-align:center;;}
.status-02 .left ul{position:relative; text-align:right; border-right:1px solid #fff; padding-right:100px; z-index:13;}
.status-02 .left ul li{position:relative; display:block; padding:20px 0;}
.status-02 .left ul li:before{position:absolute; top:37px; right:-104px; width:8px; height:8px; border-radius:50%; background:#fff; content:"";}
.status-02 .left ul li:after{position:absolute; top:40px; right:-100px; width:50px; height:1px; background:#fff; content:"";}
.status-02 .left ul li + li{}
.status-02 .left ul li h2{font-size:30px; font-family: 'Jost', 'Noto Sans KR', 'Nanum Barun Gothic', 'Roboto', '나눔고딕', NanumGothic, 'Nanum Gothic', "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", Verdana,Dotum,sans-serif;}
.status-02 .left ul li h3{font-size:15px; font-weight:400;}
.status-02 .left ul li .img{width:220px; display:inline-block;}
.status-02 .left ul li .img img{width:100%; height:auto;}

.status-02 .left ul li.long-250{margin-right:250px;}
.status-02 .left ul li.long-250:before{right:-354px; }
.status-02 .left ul li.long-250:after{right:-350px; width:300px;}

.status-02 .left ul li.long-100{margin-right:100px;}
.status-02 .left ul li.long-100:before{right:-204px; }
.status-02 .left ul li.long-100:after{right:-200px; width:150px;}
*/



@media all and (max-width:1200px){




}




.status-03{position:relative; margin-top:-80px; padding:10% 10px 5% 10px; height:100%;}
.status-03:after{position:absolute; top:0; left:0; width:50%; height:100%;  background:#999; opacity:1; content:"";
                  background-image:url('../../img/status_02nnn_bg.jpg'); background-position:center; background-size:cover; z-index:10;}
.status-03:before{position:absolute; top:0; left:0; width:50%; height:100%; background:#000; opacity:0.2; content:""; z-index:11;}
.status-03>.in{max-width:1500px; margin:0 auto;}

.status-03 .title{position:relative; margin-bottom:10%; z-index:13;}
.status-03 .title h2{font-size:37px; font-weight:800;}
.status-03 .title h3{font-size:20px; font-weight:400;}

.status-03 .left{position:relative; width:50%; padding:0 5%; color:#fff; z-index:11;}
.status-03 .left .title{text-align:right;}
.status-03 .left ul{position:relative; text-align:right; border-right:1px solid #fff; padding-right:100px; z-index:13;}
.status-03 .left ul li{position:relative; display:block; padding:20px 0;}
.status-03 .left ul li:before{position:absolute; top:37px; right:-104px; width:8px; height:8px; border-radius:50%; background:#fff; content:"";}
.status-03 .left ul li:after{position:absolute; top:40px; right:-100px; width:50px; height:1px; background:#fff; content:"";}
.status-03 .left ul li + li{}
.status-03 .left ul li h2{font-size:30px; font-family: 'Jost', 'Noto Sans KR', 'Nanum Barun Gothic', 'Roboto', '나눔고딕', NanumGothic, 'Nanum Gothic', "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", Verdana,Dotum,sans-serif;}
.status-03 .left ul li h3{font-size:15px; font-weight:400;}
.status-03 .left ul li .img{width:220px; display:inline-block;}
.status-03 .left ul li .img img{width:100%; height:auto;}

.status-03 .left ul li.long-250{margin-right:250px;}
.status-03 .left ul li.long-250:before{right:-354px; }
.status-03 .left ul li.long-250:after{right:-350px; width:300px;}

.status-03 .left ul li.long-100{margin-right:100px;}
.status-03 .left ul li.long-100:before{right:-204px; }
.status-03 .left ul li.long-100:after{right:-200px; width:150px;}

.status-03 .right{position:relative; width:50%; padding:0 5%; z-index:11;}
.status-03 .right .title{}
.status-03 .right .title h2{color:#343434;}
.status-03 .right .title h3{color:#999;}

.status-03 .right ul{padding-left:10%;}
.status-03 .right ul li{position:relative; display:block; padding:0 0 150px 0; color:#343434;}
.status-03 .right ul li h2{position:relative; font-size:70px;font-family: 'Jost', 'Noto Sans KR', 'Nanum Barun Gothic', 'Roboto', '나눔고딕', NanumGothic, 'Nanum Gothic', "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", Verdana,Dotum,sans-serif;}
.status-03 .right ul li h2:after{position:absolute; bottom:0; left:0; width:50px; height:2px; background:#343434; content:"";}
.status-03 .right ul li h2 span{font-size:17px;}
.status-03 .right ul li h3{font-size:15px; margin:30px 0 10px 0;}
.status-03 .right ul li h4{color:#e4c9ab; font-size:20px; font-weight:bold; font-family: 'Jost', 'Noto Sans KR', 'Nanum Barun Gothic', 'Roboto', '나눔고딕', NanumGothic, 'Nanum Gothic', "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", Verdana,Dotum,sans-serif;}




@media all and (max-width:1200px){

  .status-03{padding:0;}
  .status-03:after{display:none;}
  .status-03:before{display:none;}

  .status-03 .left{width:100%; padding:100px 5% 5% 5%;}
  .status-03 .left .title{}
  .status-03 .left:after{position:absolute; top:0; left:0; width:100%; height:100%;  background:#999; opacity:1; content:"";
                    background-image:url('../../img/status_02nnn_bg.jpg'); background-position:center; background-size:cover; z-index:10;}
  .status-03 .left:before{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.2; content:""; z-index:11;}

  .status-03 .left ul li{margin-right:0 !important;}
  .status-03 .left ul li:before{right:-104px !important;}
  .status-03 .left ul li:after{right:-100px !important; width:50px !important;}
  .status-03 .left ul li .img{width:220px; display:inline-block;}

  .status-03 .right{width:100%; padding:5%;}
  .status-03 .right ul li{padding:0 0 30px 0;}
  .status-03 .right ul li h2{font-size:50px;}
  .status-03 .right ul li h3{margin:20px 0 5px 0;}

}




.status-04{padding:5% 0;}
.status-04>.in{padding:0 15%;}
.status-04 iframe{width:100% !important; height:600px !important; margin-bottom:2%;}
.status-04 h2{font-size:27px; margin-bottom:2%; font-weight:800;}
.status-04 h3{font-size:15px;}
.status-04 h3 span{font-weight:400;}

.status-04 .top{}

.status-04 .slider-for{margin-bottom:5px; padding:0 5px;}
.status-04 .slider-for .img{position:relative;}
.status-04 .slider-for .img p{display:none;}
.status-04 .slider-for .img i{display:inline-block; position:absolute; width:10px; height:10px; border:1px solid #fff; border-radius:50%;  font-style:normal; font-size:0; line-height:0; z-index:20;}
.status-04 .slider-for .img i[class*="r-"]{background:#cc3366;}
.status-04 .slider-for .img i[class*="m-"]{background:#cc3366;}
.status-04 .slider-for .img i[class*="d-"]{background:#cc3366;}
.status-04 .slider-for .img i[class*="e-"]{background:#cc3366;}
.status-04 .slider-for .img i[class*="s-"]{background:#cc3366;}
.status-04 .slider-for .img i[class*="z-"]{background:#e29b35;}

.status-04 .slider-for .img i.m-01{top:48%; left:32%;}
.status-04 .slider-for .img i.m-02{top:46%; left:35.5%;}
.status-04 .slider-for .img i.m-03{top:43%; left:37%;}
.status-04 .slider-for .img i.m-04{top:40%; left:38.5%;}
.status-04 .slider-for .img i.m-05{top:38%; left:40%;}
.status-04 .slider-for .img i.m-06{top:33%; left:40%;}
.status-04 .slider-for .img i.m-07{top:35%; left:36%;}
.status-04 .slider-for .img i.m-08{top:37%; left:35%;}
.status-04 .slider-for .img i.m-09{top:40%; left:33.5%;}
.status-04 .slider-for .img i.m-10{top:43%; left:32%;}
.status-04 .slider-for .img i.m-11{top:48%; left:26%;}
.status-04 .slider-for .img i.m-12{top:42%; left:28%;}
.status-04 .slider-for .img i.m-13{top:36%; left:31%;}
.status-04 .slider-for .img i.m-14{top:30%; left:34%;}
.status-04 .slider-for .img i.m-15{top:28%; left:39%;}
.status-04 .slider-for .img i.m-16{top:32%; left:45%;}
.status-04 .slider-for .img i.m-17{top:50%; left:28%;}

.status-04 .slider-for .img i.d-01{top:38%; left:54%;}
.status-04 .slider-for .img i.d-02{top:34%; left:51.5%;}
.status-04 .slider-for .img i.d-03{top:30%; left:55.5%;}
.status-04 .slider-for .img i.d-04{top:28%; left:59.5%;}
.status-04 .slider-for .img i.d-05{top:41%; left:68.5%;}
.status-04 .slider-for .img i.d-06{top:39%; left:62%;}
.status-04 .slider-for .img i.d-07{top:43%; left:64%;}
.status-04 .slider-for .img i.d-08{top:46%; left:60%;}
.status-04 .slider-for .img i.d-09{top:55%; left:59%;}
.status-04 .slider-for .img i.d-10{top:40%; left:59.5%;}

.status-04 .slider-for .img i.e-01{top:11%; left:64%;}
.status-04 .slider-for .img i.e-02{top:15%; left:66%;}
.status-04 .slider-for .img i.e-03{top:26%; left:64%;}
.status-04 .slider-for .img i.e-04{top:26%; left:65.5%;}
.status-04 .slider-for .img i.e-05{top:26%; left:66.8%;}
.status-04 .slider-for .img i.e-06{top:26%; left:68%;}
.status-04 .slider-for .img i.e-07{top:28.5%; left:66.2%;}
.status-04 .slider-for .img i.e-08{top:28.5%; left:64.8%;}
.status-04 .slider-for .img i.e-09{top:28.5%; left:63.5%;}
.status-04 .slider-for .img i.e-10{top:15.5%; left:58.5%;}
.status-04 .slider-for .img i.e-11{top:10.5%; left:57.5%;}

.status-04 .slider-for .img i.s-01{top:58%; left:44%; }
.status-04 .slider-for .img i.s-02{top:59%; left:53%; }
.status-04 .slider-for .img i.s-03{top:68%; left:47%;}
.status-04 .slider-for .img i.s-04{top:65%; left:40%;}
.status-04 .slider-for .img i.s-05{top:73%; left:42%;}
.status-04 .slider-for .img i.s-06{top:73%; left:33%;}
.status-04 .slider-for .img i.s-07{top:78%; left:37%;}
.status-04 .slider-for .img i.s-08{top:66.5%; left:37%;}
.status-04 .slider-for .img i.s-09{top:48.5%; left:39%;}

.status-04 .slider-for .img i.r-01{top:52%; left:30%;}
.status-04 .slider-for .img i.r-02{top:55%; left:28.5%;}
.status-04 .slider-for .img i.r-03{top:58%; left:27%;}
.status-04 .slider-for .img i.r-04{top:62%; left:25%;}
.status-04 .slider-for .img i.r-05{top:51%; left:23%;}
.status-04 .slider-for .img i.r-06{top:58%; left:20%;}

.status-04 .slider-for .img i.z-01{top:65%; left:47.5%;}
.status-04 .slider-for .img i.z-02{top:58.5%; left:39.5%;}
.status-04 .slider-for .img i.z-03{top:46%; left:27%;}
.status-04 .slider-for .img i.z-04{top:61%; left:19.5%;}
.status-04 .slider-for .img i.z-05{top:49%; left:30%;}
.status-04 .slider-for .img i.z-06{top:45.3%; left:39.5%;}
.status-04 .slider-for .img i.z-07{top:51.3%; left:34.5%;}
.status-04 .slider-for .img i.z-08{top:47.3%; left:40.5%;}
.status-04 .slider-for .img i.z-09{top:38.5%; left:50%;}
.status-04 .slider-for .img i.z-10{top:36%; left:60%;}
.status-04 .slider-for .img i.z-11{top:28%; left:62%;}
.status-04 .slider-for .img i.z-12{top:30%; left:59.5%;}

.status-04 .slider-for .img i:hover{border:0; color:#fff; font-size:12px; line-height:1; width:auto; height:auto; padding:5px 10px; border-radius:5px; transform:translate(-50%, -50%); z-index:21;}




.status-04 .slider-nav{}
.status-04 .slider-nav li{cursor:pointer; transition:0.2s;}
.status-04 .slider-nav li.slick-center{background:#333; color:#fff;}
.status-04 .slick-slider button.slick-arrow.font{width:30px; height:30px; line-height:30px; font-size:20px; margin-top:-10px;}
.status-04 .slider-nav .img{position:relative; padding:5px; text-align:left;}
.status-04 .slider-nav .img p{font-size:14px;}
.status-04 .slider-nav .img i{display:none;}

.status-04 .slick-prev{left:-60px;}
.status-04 .slick-next{right:-60px;}

@media all and (max-width:1000px){

  .status-04>.in{padding:0;}
  .status-04 .slick-prev{left:0;}
  .status-04 .slick-next{right:0;}
  .status-04 .slider-nav .img p{font-size:10px;}

}


.research-01{margin-top:-80px; padding:8% 10px 5% 10px; background:#f4f4f4;}
.research-01>.in{max-width:1500px; margin:0 auto; text-align:center;}

.research-01 .title{text-align:left; width:60%; margin:0 auto 5% auto;}
.research-01 .title h2{font-size:30px; line-height:1.3;}

.research-01 .box{margin-bottom:5%;}
.research-01 .box .pic{width:35%; height:100%;}
.research-01 .box .pic img{width:100%; height:auto;}

.research-01 .box .txt{position:relative; border:1px solid #eee;  width:30%; margin:3% 0 0 -3%;  text-align:left; padding:40px 50px; background:#fff; box-shadow:10px 10px 10px rgba(0,0,0,0.1); z-index:11;}
.research-01 .box .txt h2{font-size:25px; line-height:1.3; font-weight:900; margin-bottom:30px;}
.research-01 .box .txt h3{font-size:16px; font-weight:400; color:#666;}
.research-01 .box a{display:inline-block; font-size:14px; margin-top:30px; padding:5px 15px; border:2px solid #ccc; transition:0.2s;}
.research-01 .box a i{margin-left:10px;}
.research-01 .box a:hover{background:#000; color:#fff; border-color:#000;}

.research-01 .box.reverse .txt{margin:3% -3% 0 0;}


@media all and (max-width:1000px){

  .research-01{padding-top:80px;}
  .research-01 .box .pic{width:90%; margin:0;}
  .research-01 .box .txt{width:90%; padding:20px 30px; margin:-5% 0 0 -5%; border:1px solid #eee;}
  .research-01 .box.reverse .txt{margin:0 -5% -5% 0;}

}

.research-02{margin-top:-80px; padding:8% 10px 5% 10px; background:#f4f4f4;}
.research-02>.in{max-width:1500px; margin:0 auto; text-align:center;}

.research-02 .title{text-align:left; width:60%; margin:0 auto 5% auto;}
.research-02 .title h2{font-size:30px; line-height:1.3;}

.research-02 .box{margin-bottom:5%;}
.research-02 .box .pic{width:35%; height:100%;}
.research-02 .box .pic img{width:100%; height:auto;}

.research-02 .box .txt{position:relative; border:1px solid #eee; width:30%; margin:3% 0 0 -3%;  text-align:left; padding:40px 50px; background:#fff; box-shadow:10px 10px 10px rgba(0,0,0,0.1); z-index:11;}
.research-02 .box .txt h2{font-size:25px; line-height:1.3; font-weight:900; margin-bottom:30px;}
.research-02 .box .txt h3{font-size:16px; font-weight:400; color:#666;}
.research-02 .box a{display:inline-block; font-size:14px; margin-top:30px; padding:5px 15px; border:2px solid #ccc; transition:0.2s;}
.research-02 .box a i{margin-left:10px;}
.research-02 .box a:hover{background:#000; color:#fff; border-color:#000;}

.research-02 .box.reverse .txt{margin:3% -3% 0 0;}


@media all and (max-width:1000px){

  .research-02{padding-top:80px;}
  .research-02 .box .pic{width:90%; margin:0;}
  .research-02 .box .txt{width:90%; padding:20px 30px; margin:-5% 0 0 -5%;}
  .research-02 .box.reverse .txt{margin:0 -5% -5% 0;}

}


.research-03{margin-top:-80px;}
.research-03>.in{max-width:1500px; margin:0 auto; text-align:center;}
.research-03 .img{}
.research-03 .img img{width:100%; height:auto;}

.research-03 .img img.pc-only{display:inline-block;}
.research-03 .img img.mo-only{display:none;}


@media all and (max-width:1000px){

  .research-03 .img img.pc-only{display:none;}
  .research-03 .img img.mo-only{display:inline-block;}

}



.my{margin-top:-80px; padding:8% 10px 5% 10px; background:#666;}
.my>.in{max-width:1500px; margin:0 auto; text-align:center;}

.my .grid{width:80%; margin:0 auto; font-size:0; line-height:0;}
.my .grid-item{}
.my .grid-item .in-wrap{position:relative; padding:5px;}
.my .grid-item--width2{}
.my .grid-sizer,
.my .grid-item {width:33.3333%;}
.my .grid-item--width2 {width: 50%;}
.my .grid-item--width3{width:66.6666%;}
.my .gutter-sizer {width: 0;}

.my .grid-item.video{cursor:pointer;}
.my .grid-item.video:after{font-family:'xeicon'; text-indent:4px; border-radius:50%; border:3px solid #fff; color:#fff; position:absolute; top:50%; left:50%; margin:-30px 0 0 -30px; width:60px; height:60px; line-height:60px; font-size:50px;  text-align:center; content:"\ea3e";}

.my .grid-item.txt{}
.my .grid-item.txt .inn{opacity:0; position:absolute; width:100%; height:100%; top:0; left:0; text-align:center; line-height:1.2;  color:#fff;   transition:0.3s;}
.my .grid-item.txt:hover .inn{width:100%; height:100%; top:0; left:0; padding:15px;  opacity:1;}
.my .grid-item.txt .in{width:100%; height:100%; padding:5px; background:rgba(0,0,0,0.7); border-radius:15px;}
.my .grid-item.txt:hover .in{}
.my .grid-item.txt .in>div{display:table; width:100%; height:100%; }
.my .grid-item.txt .in>div>div{display:table-row; width:100%; height:100%;}
.my .grid-item.txt .in>div>div>div{display:table-cell; width:100%; height:100%; vertical-align:middle;}
.my .grid-item.txt h2{font-size:25px; font-weight:900; margin-bottom:7px;}
.my .grid-item.txt h3{font-size:15px; font-weight:400; opacity:0.7;}


@media all and (max-width:1000px){
  .my .grid-item{padding:1px; }
  .my .grid-item .in-wrap{padding:1px; overflow:hidden; border-radius:15px;}
  .my img{border-radius:0 !important; filter:none !important;  box-shadow:none !important;}
  .my .grid-item.video img{border-radius:0 !important;}
  .my .grid-sizer,
  .my .grid-item { width:50%;}
  .my .grid-item--width2 { width: 100%; }
  .my .grid-item.txt .inn,
  .my .grid-item.txt:hover .inn{top:auto; bottom:0; height:auto; padding:1px; opacity:1;}
  .my .grid-item.txt .in{height:auto; border-radius:0;}
  .my .grid-item.txt h2{font-size:15px; margin-bottom:5px;}
  .my .grid-item.txt h3{font-size:10px;}
}




.my img{width:100%; height:auto; filter: grayscale(100%); box-shadow:5px 5px 5px rgba(0,0,0,0.3); border-radius:10px; transition:0.2s;}
.my .grid-item:hover img{filter: grayscale(0);}

.my .grid-item.txt img{filter: grayscale(0);}
.my .grid-item.txt:hover img{filter: grayscale(100%);}

.my .grid-item.color img{filter: grayscale(0);}
.my .grid-item.color:hover img{}

@media all and (max-width:1000px){

  .my{padding-top:80px;}
  .my .grid{width:100%;}
}








.life{margin-top:-80px; padding:8% 10px 5% 10px; background:#ddd;}
.life>.in{max-width:1500px; margin:0 auto; text-align:center;}

.life .grid{width:80%; margin:0 auto; font-size:0; line-height:0;}
.life .grid-item{padding:5px;}
.life .grid-item--width2{}
.life .grid-sizer,
.life .grid-item {width:33.3333%; cursor:pointer;}
.life .grid-item.on{width:66.6666%;}
.life .gutter-sizer {width: 0;}



@media all and (max-width:1000px){
  .life .grid-item{padding:2px;}
  .life .grid-sizer,
  .life .grid-item { width:50%;}
  .life .grid-item--width2 { width: 100%; }
  .life .grid-item.on{width:100%;}
}




.life img{width:100%; height:auto; /*filter: grayscale(100%);*/ box-shadow:5px 5px 5px rgba(0,0,0,0.3); border-radius:10px; transition:0.2s;}
/*
.life .grid-item:hover img{filter: grayscale(0);}

.life .grid-item.txt img{filter: grayscale(0);}
.life .grid-item.txt:hover img{filter: grayscale(100%);}

.life .grid-item.color img{filter: grayscale(0);}
.life .grid-item.color:hover img{}
*/

@media all and (max-width:1000px){

  .life{padding-top:80px;}
  .life .grid{width:100%;}
}








.grid_loading{ text-align:center; position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999999;}
.grid_loading i{font-size:40px; color:#000;}




.btn-a{position:fixed; line-height:20px; bottom:50px; right:10px; border-radius:2px; display:inline-block; background:rgba(165,20,100,1); box-shadow:2px 2px 4px rgba(0,0,0,0.2); font-size:15px; color:#fff; padding:15px 40px; transition:0.2s; z-index:15;}
.btn-a i{position:relative; top:1px;}
.btn-a.n i{margin:0 -5px 0 10px;}
.btn-a.p i{margin:0 10px 0 -5px;}
.btn-a:hover{background:rgba(165,20,100,0.7);}


@media all and (max-width:1000px){
  .btn-a{bottom:20px; font-size:11px; padding:5px 15px;}
}



















/**/