@charset "utf-8";

/* FONT */
@font-face {
	font-family:roboto;
	src:url('../../inc/fonts/Roboto-Regular.eot');
	src:local(※),
		url('../../inc/fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
		url('../../inc/fonts/Roboto-Regular.woff') format('woff'),
		url('../../inc/fonts/Roboto-Regular.otf') format('opentype');
	font-weight:400;
	font-style:normal;
}
@font-face {
	font-family:roboto;
	src:url('../../inc/fonts/Roboto-Medium.eot');
	src:local(※),
		url('../../inc/fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
		url('../../inc/fonts/Roboto-Medium.woff') format('woff'),
		url('../../inc/fonts/Roboto-Medium.otf') format('opentype');
	font-weight:500;
	font-style:normal
}
@font-face {
	font-family:roboto;
	src:url('../../inc/fonts/Roboto-Bold.eot');
	src:local(※),
		url('../../inc/fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
		url('../../inc/fonts/Roboto-Bold.woff') format('woff'),
		url('../../inc/fonts/Roboto-Bold.otf') format('opentype');
	font-weight:700;
    font-style:normal;
}

/* RESET */
html, body{width:100%;height:100%;}
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:roboto, ns, Arial, dotum, sans-serif;font-size:18px;font-weight:400;line-height:1;word-break:break-all;vertical-align:top;}

/* COMMON */
.fcWhite{color:#fff;}
.fcBlack{color:#000;}
.fcPoint01{color:#3778f9;}

/* LAYOUT */
#wrap{overflow-x:hidden;min-width:1366px;}
.inner{width:100%;max-width:1366px;margin:0 auto;}
.overViewWrap > .inner, .strategyWrap > .inner{padding:100px 0 125px;text-align:center;}

/* START */
/* main */
.main{position:relative;width:100%;height:1030px;background:#3778f9;}
.main .mainTitWrap{position:absolute;top:90px;left:50%;margin-left:-360px;text-align:center;z-index:1;}
.main .mainTitWrap .projectTit > span{display:inline-block;font-size:20px;font-weight:300;}
.main .mainTitWrap .projectTit > span + span.fcPoint01{padding-right:12px;}
.main .mainTitWrap .mainTit > span{position:relative;font-size:90px;font-weight:300;line-height:1.4;}
.main .mainTitWrap .mainTit .fcWhite strong{position:absolute;left:82px;}
.main .mainTitWrap .mainTit .fcWhite em{position:relative;display:inline-block;width:82px;height:118px;margin-left:82px;font:inherit;z-index:1;}
.main .mainTitWrap .mainTit .fcWhite em:first-of-type{background:#3778f9;}
.main .mainTitWrap .mainTit .fcWhite em:last-of-type{margin-right:16px;}
.main .mainMc, .main .mainCe{overflow:hidden;position:relative;width:50%;height:100%;}
.main .mainCe{position:absolute;top:0;left:50%;background:#fff;}
.main .imgWrap{position:absolute;top:297px;display:inline-block;width:317px;height:640px;border-radius:50px;box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3);}
.main .imgWrap.imgApp{top:817px;width:100px;height:100px;border-radius:22px;opacity:0;}
.main .imgWrap.imgApp img{width:100%;}
.main .bgImgRound{opacity:0;transition:transform 1s ease-out;}
.main .mainMc .imgWrap:not(.imgApp){right:160px;transform:translateX(200%);}
.main .mainMc .imgWrap.imgApp{right:577px;transform:translateX(200%);}
.main .mainMc .bgImgRound{position:absolute;top:208px;right:602px;width:175px;height:175px;background:url(images/bg_round01.png) 0 0 no-repeat;}
.main .mainCe .imgWrap:not(.imgApp){left:160px;transform:translateX(-200%);}
.main .mainCe .imgWrap.imgApp{left:577px;transform:translateX(-200%);}
.main .mainCe [class*="bgImgRound"]{position:absolute;display:inline-block;background:#3778f9;border-radius:100%;opacity:0;}
.main .mainCe .bgImgRound01{top:491px;left:703px;width:97px;height:97px;transition:transform 1.5s ease-out .1s;}
.main .mainCe .bgImgRound02{top:462px;left:800px;width:24px;height:24px;transition:transform 2s ease-out .3s;}

/* overview */
.overViewWrap{min-height:700px;background:#174bb1;}
.overViewWrap .categoryTit{font-size:30px;color:#8fecff;}
.overViewWrap .subTit{display:block;margin:100px 0 66px;font-size:70px;color:#fff;line-height:1.2;}
.overViewWrap .txt{font-weight:300;color:#fff;line-height:2.2;}

/* strategy */
.strategyWrap{background:#f4f7fb;}
.strategyWrap > .inner{background:#f4f7fb;}
.strategyWrap .categoryTit{font-size:30px;font-weight:500;color:#3778f9;}
.strategyWrap .subTit{display:block;margin:40px 0 25px;font-size:38px;font-weight:500;color:#111;line-height:1.4;}
.strategyWrap .subTit em{display:inline-block;margin-top:10px;font-size:70px;font-weight:500;line-height:1.2;}
.strategyWrap .subTit + .txt{color:#555;line-height:1.7;}
.strategyWrap .txt strong{font-weight:700;}
.strategyList{width:100%;max-width:1366px;margin:96px auto 25px;font-size:0;text-align:center;}
.strategyList .listItem{display:inline-block;margin:0 84px;opacity:0;transform:translateY(50px);}
.strategyList .listItem:first-of-type{margin-left:0;}
.strategyList .listItem:last-of-type{margin-right:0;}
.strategyList .listItem:before{content:'';display:block;width:205px;height:205px;margin:0 auto 42px;background-position:0 0;background-repeat:no-repeat;background-size:100%;}
.strategyList .listItem:nth-child(1):before{background-image:url(images/icon_strategy_list01.png);}
.strategyList .listItem:nth-child(2):before{background-image:url(images/icon_strategy_list02.png);}
.strategyList .listItem:nth-child(3):before{background-image:url(images/icon_strategy_list03.png);}
.strategyList .listItem .num{font-size:26px;font-weight:700;color:#111;}
.strategyList .listItem .txt{margin-top:20px;font-size:26px;font-weight:400;color:#111;line-height:1.3;}
/* strategy contents */
.strategyCont [class*="item"]{position:relative;background:#fff;}
.strategyCont [class*="item"]:nth-child(even){background:#f4f7fb;}
.strategyCont [class*="item"] .inner{padding:0 0 150px;}
.strategyCont .titWrap{position:relative;padding-top:34px;z-index:1;}
.strategyCont .titWrap .num{display:inline-block;font-size:110px;font-weight:700;color:#111;letter-spacing:-2.75px;}
.strategyCont .titWrap .tit{display:block;margin-top:36px;font-size:50px;font-weight:700;line-height:1.2;letter-spacing:-1.25px;}
.strategyCont .titWrap .tit em{font-size:56px;font-weight:500;}
.strategyCont .titWrap .txt{margin-top:22px;font-size:24px;color:#111;letter-spacing:-0.6px;line-height:2;}
.strategyCont .bgRound{position:absolute;top:-50px;left:-133px;width:300px;height:300px;background:#3778f9;border-radius:100%;z-index:-1;transform:scale(0.8);}
.strategyCont .bgRound .iconWrap{position:absolute;top:0;right:50%;display:inline-block;transition:transform 1s ease-out;}
.strategyCont .contItem{margin-top:100px;}
.strategyCont .contItem + .contItem{margin-top:150px;}
.strategyCont .contItem .tit{font-size:38px;font-weight:500;color:#3778f9;}
.strategyCont .contItem .txt{margin-top:20px;font-size:20px;color:#111;line-height:2;letter-spacing:-.5px;}
.strategyCont .contItem .infoWrap{margin-top:72px;}
.strategyCont .item01 .contItem:nth-child(2) .infoWrap{margin-top:0;}
.strategyCont .item03 .contItem:nth-child(1) .infoWrap{box-sizing:border-box;padding-left:66px;}
/* conItem : basic(가로형)*/
.strategyCont .contItem .infoList{font-size:0;text-align:center;}
.strategyCont .contItem .infoList > li{display:inline-block;opacity:0;transform:translateY(50px);}
.strategyCont .item01 .contItem .infoList > li{margin-left:179px;}
.strategyCont .item02 .contItem .infoList > li{margin-left:58px;}
.strategyCont [class*="item"] .contItem .infoList > li:first-of-type{margin-left:0;}
.strategyCont [class*="item"] .contItem .infoList > li:last-of-type{margin-right:0;}
.strategyCont .item01 .contItem .infoList > li:nth-child(odd),
.strategyCont .item02 .contItem .infoList > li:nth-child(even){margin-top:70px;}
.strategyCont .contItem .bgPhone{display:inline-block;box-sizing:border-box;padding:8px;background:#333;border-radius:38px;box-shadow:0 0 40px 0 rgba(0, 0, 0, 0.25);}
.strategyCont .item01 .contItem .bgPhone{width:336px;height:586px;}
.strategyCont .item02 .contItem .bgPhone{width:296px;height:514.5px;}
.strategyCont .contItem .infoTxt{display:block;margin-top:24px;font-size:20px;color:#555;letter-spacing:-0.5px;}
/* conItem : basic(세로형)*/
.strategyCont .contItem.col{overflow:hidden;min-height:639px;}
.strategyCont .contItem + .contItem.col{margin-top:90px;}
.strategyCont .contItem.col .contTitWrap{float:left;}
.strategyCont .contItem.col .contTitWrap:first-of-type{margin-top:50px;}
.strategyCont .contItem.col .infoWrap{position:absolute;right:0;width:53.5%;margin-top:0;}

@media screen and (max-width: 767px) {
	#wrap {min-width:0;}
	.inner {box-sizing:border-box;max-width:100%;padding-right:20px;padding-left:20px;}
	.main {height:844px;}
	.main .mainTitWrap {top:70px;left:0;width:100%;margin-left:0;}
	.main .mainTitWrap .projectTit > span {font-size:14px;}
	.main .mainTitWrap .mainTit {display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;}
	.main .mainTitWrap .mainTit > span {position:static;overflow:visible;font-size:30px;line-height:1.25;white-space:nowrap;}
	.main .mainTitWrap .mainTit .fcWhite strong {position:static;left:auto;}
	.main .mainTitWrap .mainTit .fcWhite em {width:auto;height:auto;margin:0;background:transparent;}
	.main .mainMc .imgWrap:not(.imgApp) {top:270px;right:15px;width:145px;height:auto;border-radius:24px;}
	.main .mainCe .imgWrap:not(.imgApp) {top:270px;left:15px;width:145px;height:auto;border-radius:24px;}
	.main .mainMc .imgWrap.imgApp {top:690px;right:130px;width:56px;height:56px;border-radius:14px;}
	.main .mainCe .imgWrap.imgApp {top:690px;left:130px;width:56px;height:56px;border-radius:14px;}
	.main .mainMc .bgImgRound,.main .mainCe [class*="bgImgRound"] {display:none;}
	.overViewWrap > .inner,.strategyWrap > .inner {padding:60px 20px;}
	.strategyList .listItem {display:block;margin:40px auto 0;}
	.strategyCont [class*="item"] .inner {padding:0 20px 80px;}
	.strategyCont .contItem .infoList > li {max-width:100%;margin-right:auto!important;margin-left:auto!important;}
	.strategyCont .contItem.col {min-height:0;}
	.strategyCont .contItem.col .contTitWrap {float:none;}
	.strategyCont .contItem.col .infoWrap {position:relative;width:100%;}
	.personalUiSwiper,.focusSwiper,.easyUxSwiper {box-sizing:border-box;max-width:100%;}
	img,video {max-width:100%;height:auto;}
}
/* conItem : swiper */
.swiper-wrapper{font-size:0;text-align:center;white-space:nowrap;}
.swiper-slide{display:inline-block;}
.personalUiSwiper{overflow:hidden;position:relative;width:976px;margin:0 auto;padding-top:80px;background:url(images/bg_item01_swiper.png) 50% 80px no-repeat;z-index:1;}
.personalUiSwiper:before{content:'';position:absolute;top:72px;left:50%;box-sizing:border-box;display:inline-block;width:336px;height:586px;border:8px solid #333;border-radius:38px;box-shadow:0 0 40px 0 rgba(0, 0, 0, 0.25);z-index:1;transform:translateX(-50%);}
.personalUiSwiper .swiper-slide{width:320px;opacity:0.5;}
.personalUiSwiper .swiper-slide.swiper-slide-active{opacity:1;}
.personalUiSwiper .swiper-slide .imgWrap{display:inline-block;box-sizing:border-box;width:100%;height:100%;}
.personalUiSwiper .txtWrap{margin-top:32px;text-align:center;opacity:0;transition:opacity .2s linear .2s;}
.personalUiSwiper .swiper-slide.swiper-slide-active .txtWrap{opacity:1;}
.personalUiSwiper .txtWrap .pageTit{display:block;font-size:20px;color:#555;}
.personalUiSwiper .txtWrap .pageInfoTxt{display:block;min-height:40px;margin-top:10px;font-size:16px;color:#999;line-height:1.3;}
.easyUxSwiper{overflow:hidden;padding:60px 0;}
.easyUxSwiper .swiper-wrapper{text-align:left;}
.easyUxSwiper .swiper-slide{position:relative;min-width:484px;opacity:0 !important;}
.easyUxSwiper .swiper-slide.swiper-slide-active{opacity:1 !important;}
.easyUxSwiper .swiper-slide [class*="img"]{display:inline-block;width:100%;}
.easyUxSwiper .swiper-slide .imgWrap{max-width:350px;margin:0 67px;border-radius:30px;box-shadow:0 0 40px 0 rgba(0, 0, 0, 0.25);}
.easyUxSwiper .swiper-slide .imgStep, .easyUxSwiper .swiper-slide .imgBtn{position:absolute;left:0;display:inline-block;width:100%;max-width:484px;text-align:center;z-index:1;opacity:0;transform:scale(0.73);}
.easyUxSwiper .swiper-slide .imgStep{top:48px;}
.easyUxSwiper .swiper-slide .imgBtn{bottom:-12px;}
.easyUxSwiper .swiper-slide [class*="txt"]{position:absolute;top:564px;left:242px;padding-left:292px;font-size:16px;color:#555;opacity:0;}
.easyUxSwiper .swiper-slide [class*="txt"]:before{content:'';position:absolute;left:0;top:50%;display:inline-block;width:280px;height:2px;background:#333;}
.easyUxSwiper .swiper-slide [class*="txt"].txtStep{top:57px;}
.easyUxSwiper .swiper-slide [class*="txt"] .tit{display:inline-block;margin-bottom:12px;font-size:22px;font-weight:500;color:#111;}
.focusSwiper{overflow:hidden;height:639px;margin-top:60px;border-radius:30px 0 0 0;}
.focusSwiper:before, .focusSwiper:after{content:'';position:absolute;top:52px;left:58px;box-sizing:border-box;display:inline-block;width:366px;height:639px;border-radius:38px;}
.focusSwiper:before{background:url(images/bg_item03_swiper.png) 50% 8px no-repeat;box-shadow:0 0 40px 0 rgba(0, 0, 0, 0.25);}
.focusSwiper:after{border:8px solid #333;z-index:1;}
.focusSwiper .swiper-slide{position:relative;margin-right:60px;}
.focusSwiper .swiper-slide .imgWrap{overflow:hidden;display:inline-block;width:100%;height:100%;background:#2099c0;border-radius:30px;transition:all .5s;}
.focusSwiper .swiper-slide.swiper-slide-active .imgWrap{border-radius:30px 30px 0 0;}
/* iconlist */
.iconList{position:relative;height:440px;}
.iconList:before, .iconList:after{content:'';position:absolute;right:-100%;bottom:16.4px;left:0;display:inline-block;border:1px solid #333;}
.iconList:before{bottom:auto;top:158px;}
.iconList .icon{position:absolute;display:inline-block;z-index:1;opacity:0;}
.iconList .icon:nth-child(-n+4){bottom:264px;}
.iconList .icon:nth-child(n+5){bottom:0;}