@charset "utf-8";

/* Font */
@font-face {
	font-family:sh;
	src:url('../../inc/fonts/OneShinhanLight.ttf');
	font-weight: 300;
	font-style: normal
}
@font-face {
	font-family:sh;
	src:url('../../inc/fonts/OneShinhanMedium.ttf');
	font-weight: 500;
	font-style: normal
}
@font-face {
	font-family:sh;
	src:url('../../inc/fonts/OneShinhanBold.ttf');
	font-weight: 700;
	font-style: normal
}


/* Reset */
html,body {width:100%;height:100%;font-size:16px;color:#4a5777;line-height:1.3;-webkit-text-size-adjust:none;}
/* body {background:#282828;} */
body,div,form,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,em,p,span,textarea,pre,label,fieldset,th,td,button,a,input,select,hr, figure {margin:0;padding:0;font-family:sh, Arial, dotum;word-break:break-all;vertical-align:top;}
#gnb .menu > a {font-family:'ns';}
/*common*/
#wrap{overflow-x: hidden; width: 100%;}
.floatC:after{content:''; display:table; clear:both;}

/*sec1*/
.contents .sec1{background:#eff0f7; padding:130px 0 304px; text-align: center; height: 996px; box-sizing: border-box; overflow:hidden; position:relative;}
.contents .sec1 h2{font-size: 125.5px; font-weight: 500; display: inline-block; text-align: left; margin-bottom: 67px; letter-spacing: -.021em; opacity: 0;}
.contents .sec1 h2 p{font-size: 25px;}
.contents .sec1 ul{width:1351px; position: relative; margin: 0 auto}
.contents .sec1 ul.mainImg li {position: relative; width:250px;}
.contents .sec1 ul.mainImg li img {opacity:0;}
.contents .sec1 ul.mainImg li.left{float: left; margin-right:10px;}
.contents .sec1 ul.mainImg li.right{float: right; margin-left:10px;}
.contents .sec1 ul.mainImg li:nth-child(3){position:absolute; top:-67px; left:50%; width:340px; margin-left:-170px; z-index:1;}
.contents .sec1 ul.mainImg li.shadowBox img {box-shadow:11px 36px 118px -50px #000; border-radius: 35px; width: auto; transition-duration: 0.5s}

.contents .sec1 ul.mainImg li .bg {position:absolute; top:-1120px; left:0; background:#60ccf2; z-index:2; width:100%; height:0;}
.contents .sec1 ul.mainImg li:nth-child(2) .bg{background: #70d3d6;}
.contents .sec1 ul.mainImg li:nth-child(3) .bg{background: #e89dc1;  width:90.8%; margin-left:4.6%}
.contents .sec1 ul.mainImg li:nth-child(4) .bg{background: #7ab5fc;}
.contents .sec1 ul.mainImg li:nth-child(5) .bg{background: #99a3fe;}
.contents .sec1 ul.mainImg li .bg2 {position:absolute; top:0; left:0; width:100%; height:100%; background:#60ccf2; opacity:0;z-index:2; }
.contents .sec1 ul.mainImg li:nth-child(2) .bg2{background: #70d3d6;}
.contents .sec1 ul.mainImg li:nth-child(3) .bg2{background: #e89dc1; top:10.4%; left:4.6%; width:90.8%; height:52%;}
.contents .sec1 ul.mainImg li:nth-child(4) .bg2{background: #7ab5fc;}
.contents .sec1 ul.mainImg li:nth-child(5) .bg2{background: #99a3fe;}

.contents .sec1 .award {position:absolute; bottom:30px; left:50%; margin-left:440px;}
 

/*sec2*/
.contents .sec2{margin:55px; background: #e89dc1; padding: 238px 0 125px}
.contents .sec2 .sct2Inner{max-width: 1161px; width: 90%; margin: 0 auto}
.contents .sec2 h3{margin-bottom: 80px; color: #000; font-weight: 100; font-size: 45px; letter-spacing: -.01em;}
.contents .sec2 h3 span{font-weight: 700;}
.contents .sec2 .sct2Inner>div:after{content:''; display: table; clear:both;}
.contents .sec2 .sct2Inner>div>div{background: rgba(255,255,255,0.1); float: left; width: 88%; border-radius: 4px; margin-bottom: 50px;}
.contents .sec2 .sct2Inner>div>p{color: #fff; font-size: 45px; padding-left: 24px; float: right; line-height: 1em; width: 12%; box-sizing: border-box;}
.contents .sec2 .sct2Inner>div>div>span{background: #fff; display: block; white-space: nowrap;border-radius: 4px; padding: 16px 0 16px 25px;box-sizing: border-box; font-size: 16px; font-weight: 100;}
.contents .sec2 .sct2Inner>div>div>span b{font-weight: bold;}
.contents .sec2 .sct2Inner>div>div>span{width: 0;}


/*sec3*/
.contents .sec3, .sec4, .sec5, .sec6, .titleWrap{width: 100%; max-width: 1351px; margin: 0 auto;}
.contents .sec3>p{font-size: 58px;text-align: center;color:#4a5777; margin-top: 165px; opacity: 0; transform:translateY(35px);}
.contents .sec3>p span{font-weight: 100; margin-bottom:36px;display: block;}
.contents .sec3>ul{ margin: 80px 0 234px; }
.contents .sec3>ul:after{content:''; display: table; clear:both}
.contents .sec3>ul>li{position:relative; float: left; width: 19%; text-align: center;  opacity:0;}
.contents .sec3>ul>li>div{height: 310px; margin-right: 10px; padding-top: 100px; box-sizing: border-box;} 

.contents .sec3>ul>li:nth-child(1) {transform: translateX(500px); z-index:1}
.contents .sec3>ul>li:nth-child(5) {transform: translateX(-500px); z-index:1}
.contents .sec3>ul>li:nth-child(3) {width: 24%; z-index:3}
.contents .sec3>ul>li:nth-child(2) {transform: translateX(200px); z-index:2}
.contents .sec3>ul>li:nth-child(4) {transform: translateX(-200px); z-index:2}
.contents .sec3>ul>li:nth-child(1)>div{background: #60ccf2;}
.contents .sec3>ul>li:nth-child(2)>div{background: #70d3d6}
.contents .sec3>ul>li:nth-child(3)>div{background: #e89dc1; padding-top: 90px; margin-right: 0;}
.contents .sec3>ul>li:nth-child(4)>div{background: #99a3fe; margin-right: 0; margin-left: 10px}
.contents .sec3>ul>li:nth-child(5)>div{background: #7ab5fc; margin-right: 0; margin-left: 10px;}
.contents .sec3>ul>li dl dd{margin-top: 20px; font-size: 20px; color: #fff;}



/*sec4*/
.contents .sec4 {margin-bottom:150px;}
.contents .sec4>p.keyPoint{color:#4a5777; font-weight: 500; opacity: 0; transform: translateY(100px);}
.contents .sec4 h3, .contents .sec5 h3, .contents .sec6 h3, .contents .sec7 h3{font-size: 45px; font-weight: 700; letter-spacing: -.01em;  opacity: 0; transform: translateY(100px);}
.contents .sec4>p, .contents .sec5>div>p, .contents .sec6 div>p, .contents .sec7 div.titleWrap>p{color:#8e9aa8; font-size: 20px; line-height: 1.7em; margin: 54px 0 114px; font-weight: 100;  opacity: 0; transform: translateY(100px);}
.contents .sec4 ul{position: relative; height: 1010px; }
.contents .sec4 ul>li{padding: 35px 0 57px; background: #60ccf2; width: 260px; position: absolute; text-align: center;}
.contents .sec4 ul>li .imgWrap{margin-bottom: 30px;}
.contents .sec4 ul>li dt{font-size: 30px; color: #000; margin-bottom: 35px;}
.contents .sec4 ul>li dd{font-size: 16px; color: #fff; font-weight: 100; line-height: 1.75em;}
.contents .sec4 ul>li:nth-child(1){box-shadow:6px 68px 15px 6px #e0eef3}
.contents .sec4 ul>li:nth-child(2){background:#70d3d6; left: 520px;}
.contents .sec4 ul>li:nth-child(3){background:#99a3fe;right: 250px; box-shadow:0px 22px 75px -15px #9e9e9e; z-index: 1;}
.contents .sec4 ul>li:nth-child(4){background:#7ab4fb;right: 0;}
.contents .sec4 ul>li:nth-child(5){background:#99a3fe;;}
.contents .sec4 ul>li:nth-child(6){background:#7ab4fb;left:280px; box-shadow:4px 17px 56px -8px #4579b8;}
.contents .sec4 ul>li:nth-child(7){left: 50%; box-shadow:0px 22px 26px 0px #70bad4;}
.contents .sec4 ul>li:nth-child(8){background:#70d3d6; right: 0; box-shadow:6px 68px 15px 6px #e0eef3}


/*sec5*/
.contents .sec5{display: table; margin-bottom:175px;}
.contents .sec5>div{display: table-cell;}
.contents .sec5>div.sec5Left{vertical-align: middle;}
.contents .sec5>div.sec5Right{opacity: 0; transform: translateY(35px);}

/*sec6*/
.contents .sec6:after{content:''; display: table; clear: both;}
.contents .sec6>div{float:right; margin-right:140px; margin-top: 30px;}
.contents .sec6 ul{position: relative; height: 1065px; float: left; max-width: 965px;}
.contents .sec6 ul li{position: absolute; width: 265px;}
.contents .sec6 ul li img{border-radius: 25px; box-shadow: 0 2px 20px 3px #ccc;  opacity: 0; transform: translateY(35px);}
.contents .sec6 ul li:nth-child(1){left:-15px;}
.contents .sec6 ul li:nth-child(2){left: 335px; top: -100px;}
.contents .sec6 ul li:nth-child(3){left: 670px; bottom: 80px;}
.contents .sec6 ul li img:first-child{margin-bottom: 60px}
.contents .sec6 ul li:last-child img:first-child{margin-bottom: 0;}


/*sec7*/
.contents .sec7{margin-top: 215px; position:relative; height:850px; box-sizing:border-box;}
.contents .sec7 .imgSect{background:url(images/line.png) no-repeat center center;  }
.contents .sec7 ul.iconBox{position:relative; width:1351px; height:287px; margin:0 auto;}
.contents .sec7 ul.iconBox:after{content:''; display:table; clear:both; }
.contents .sec7 ul.iconBox li {position:absolute; width:132px; height:132px;}
.contents .sec7 ul.iconBox li:nth-child(1) {top:50px; left:0;}
.contents .sec7 ul.iconBox li:nth-child(2) {top:130px; left:250px;}
.contents .sec7 ul.iconBox li:nth-child(3) {top:120px; right:240px;}
.contents .sec7 ul.iconBox li:nth-child(4) {top:0; right:0;}
.contents .sec7 ul.iconBox li img{position: absolute;}
.contents .sec7 .mobileImg {position:absolute; top:300px; left:50%; margin-left:-170px; border-radius: 35px;  box-shadow:11px 36px 118px -50px #000;}

/*sec8*/
.contents .sec8{margin: 318px 55px 55px;}
.contents .sec8 div{background: #e89dc1;}
.contents .sec8 div div{text-align: center; height: 100%; }
.contents .sec8 div button{margin-top: 476px;}
.contents .sec8 div iframe{position: absolute; width: 100%; height: 100%;}

@media screen and (max-width:767px) {
  .contents .sec1 {height:auto;padding:90px 20px 120px;}
  .contents .sec1 h2 {font-size:56px;margin-bottom:50px;}
  .contents .sec1 ul {width:100%;}
  .contents .sec1 ul.mainImg {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .contents .sec1 ul.mainImg li,.contents .sec1 ul.mainImg li:nth-child(3) {position:relative;top:auto;left:auto;float:none;width:100%;margin:0;}
  .contents .sec1 ul.mainImg li:nth-child(3) {grid-column:1 / -1;max-width:210px;justify-self:center;}
  .contents .sec1 .award {right:20px;bottom:20px;left:auto;margin-left:0;}
  .contents .sec2 {margin:20px;padding:100px 0 70px;}
  .contents .sec3,.contents .sec4,.contents .sec5,.contents .sec6,.titleWrap {box-sizing:border-box;max-width:100%;padding-right:20px;padding-left:20px;}
  .contents .sec3 > ul > li {float:none;width:100%!important;margin:12px 0;transform:none!important;}
  .contents .sec4 ul {display:grid;grid-template-columns:1fr;height:auto;gap:20px;}
  .contents .sec4 ul > li {position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:100%;}
  .contents .sec5,.contents .sec5 > div {display:block;}
  .contents .sec6 > div,.contents .sec6 ul {float:none;max-width:100%;margin-right:0;}
  .contents .sec6 ul {height:auto;}
  .contents .sec6 ul li {position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:100%;margin:20px 0;}
  .contents .sec7 ul.iconBox {width:100%;}
  img,video {max-width:100%;height:auto;}
}