@charset "utf-8";

input { font-family: 'IBKIDreamWeb', sans-serif;}

html { height:100%;}
body.scrollLock { overflow:hidden; }

body { overflow-y:auto; min-width:1200px; font: 17px "IBKIDreamWeb", sans-serif; }
/* common  */
#headerWrap { position:fixed; top:0; left:0; z-index:10; width:100%;min-width:1200px; height:auto; background:rgba(255,255,255,0.7); transition:background .3s ease .6s}
#headerWrap .headerInner {position: relative; width: 100%; display: table; height: 100px;}
#headerWrap .logo { position:absolute; top:30px; left:70px; width:104px; height:60px; font-size:0; background:url('/ui/static/login2020/images/logo.png') no-repeat; transition:left .3s ease;}
#headerWrap .headerLink { float:right; padding-top:20px; margin-right:70px; transition:margin-right .3s ease;}
#headerWrap .headerLink ul { float:left; margin-right:50px;}
#headerWrap .headerLink ul li { float:left; margin-left:50px;}
#headerWrap .headerLink ul li a { display:block; height:100%; font-size:17px; color:#333333; font-weight:bold; line-height:60px; transition:all .3s ease .6s}
#headerWrap .headerLink .btnAll { display:block; float:left; position:relative; width:40px; height:40px; margin-top:10px; font-size:0;}
#headerWrap .headerLink .btnAll span { position:absolute; top:50%; left:0px; width:30px; height:4px; background:#333333; transform:translateY(-50%); transition:all .3s ease, background .3s ease .6s;}
#headerWrap .headerLink .btnAll span:before { content:''; display:block; position:absolute; top:-12px; left:0px; width:40px; height:4px; background:#333333; transition:all .3s ease, background .3s ease .6s;}
#headerWrap .headerLink .btnAll span:after { content:''; display:block; position:absolute; top:12px; left:0px; width:40px; height:4px; background:#333333; transition:all .3s ease, background .3s ease .6s;}
#headerWrap .headerLink .btnAll:hover span { width:40px;}
#headerWrap .headerLink .btnAll:hover span:before { top:-10px;}
#headerWrap .headerLink .btnAll:hover span:after { top:10px;}

#headerWrap .headerLink .btnAll.on span { width:37px; transition:all .3s ease;}
#headerWrap .headerLink .btnAll.on span:before { top:-12px; left:27px; width:18px; transform-origin:0% 50%; transform:rotate(45deg); transition:all .3s ease;}
#headerWrap .headerLink .btnAll.on span:after { top:12px; left:27px; width:18px; transform-origin:0% 50%; transform:rotate(-45deg); transition:all .3s ease;}

#headerWrap.bgWhite { background:none; transition:background .3s ease;}
#headerWrap.bgWhite .headerLink ul li a { color:#fff; transition:all .3s ease;}
#headerWrap.bgWhite .headerLink .btnAll span,
#headerWrap.bgWhite .headerLink .btnAll span:before,
#headerWrap.bgWhite .headerLink .btnAll span:after { background:#fff; transition:all .3s ease;}

#headerWrap.on { background:#fff;}
#headerWrap.on ul { display:none;}

#mainWrap #headerWrap.on { background:#fff; transition:background .3s ease;}
#mainWrap #headerWrap.on .headerLink .btnAll span,
#mainWrap #headerWrap.on .headerLink .btnAll span:before,
#mainWrap #headerWrap.on .headerLink .btnAll span:after { background:#333;}

/* headerTnb */
#headerTnb {width: 100%; background: #fff; position:reative; z-index:10; width: 100%; height: 50px; background-color: #F6F6F6;}
#headerWrap.bgWhite #headerTnb {display: table; transition:all .3s ease;}
#headerWrap #headerTnb {display: none; transition:all .3s ease;}
#headerTnb .tnbInner {width: calc(100% - 140px); height: 50px; margin: 0 auto; display: table;}
#headerTnb .leftInfo {float: left; /*width: 670px;*/ padding-left: 0;}
#headerTnb .leftInfo ul {width: 100%; display: table; padding: 11px 0;}
#headerTnb .leftInfo ul li {float: left; height: 28px;}
#headerTnb .leftInfo ul li .bar {position: relative;  padding:0 15px; height: 15px; display: inline-block;}
#headerTnb .leftInfo ul li .bar:after {content:''; display:block; position:absolute; top: 2px; left: 50%; width:1px; height:15px; background-color:#C5C5C5;}
#headerTnb .leftInfo ul li a {font-size: 15px; color: #666; font-weight:500;}
#headerTnb .rightInfo {float: right; padding-right: 0; position: relative;}
#headerTnb .rightInfo ul {width: 100%; display: table; padding: 11px 0;}
#headerTnb .rightInfo ul li {float: left;}
#headerTnb .rightInfo ul li .bar {position: relative;  padding:0 12px; height: 12px; display: inline-block;}
#headerTnb .rightInfo ul li .bar:after {content:''; display:block; position:absolute; top: 2px; left: 50%; width:1px; height:12px; background-color:#C5C5C5;}
#headerTnb .rightInfo ul li:last-child .bar {padding:0; display: none;}
#headerTnb .rightInfo ul li a {font-size: 12px; color: #888; font-weight:500;}
#headerTnb .rightInfo ul li.headerAlertWrap a.btnAlert.on .newAlert {display:inline-block; width:16px;}
#headerTnb .rightInfo ul li.headerAlertWrap a.btnAlert .newAlert {display:none;}
#headerTnb .rightInfo ul li.headerAlertWrap a.btnAlert .newAlert img {width:100%;}
#headerTnb .rightInfo ul li.headerAlertWrap a.btnAlert { position:relative; transition:all .3s ease; }
#headerTnb .rightInfo ul li.headerAlertWrap a.btnAlert .count { position:absolute; top:0px; left:13px; height:3px; width:3px;  border-radius:50%; line-height:14px; text-align:center; color:#ffffff; font-size:10px; background:#ff5b72; }
/* //headerTnb */

.menuAllMenu { display:none; overflow-y:auto; position:fixed; top:100px; left:0; bottom:0; z-index:5; width:100%; background:#fff;}
.menuAllMenu .menuBox { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);}
.menuAllMenu .menu { overflow:hidden; width:100%; min-width:1200px; max-width:1600px; margin:20px auto 80px; padding-left:10.5%;}
.menuAllMenu .menu h2 { float:left; width:300px; font-size:30px; color:#333;}
.menuAllMenu .menu ul { float:left; width:900px; font-size:0;}
.menuAllMenu .menu li { display:inline-block; margin:7px 0; font-size:0; width:225px;}
.menuAllMenu .menu li a { display:inline-block; position:relative; font-size:20px; color:#333;}
.menuAllMenu .menu li a:after { content:''; display:block; position:absolute; bottom:0; left:0; width:0%; height:3px; background:#ffa028; transition:all .3s ease;}
.menuAllMenu .menu li a:hover { color:#ffa028;}
.menuAllMenu .menu li a:hover:after { width:100%;}

#footerWrap { padding:35px 0; border-top:1px solid #dbdbdb;}
#footerWrap .footerLink {}
#footerWrap .footerLink li {display:inline-block; margin-right:25px; font-size:0;}
#footerWrap .footerLink li a { font-size:15px; color:#333; /*font-weight:bold;*/}
#footerWrap .footerLink li a span { font-weight:400;}

#footerWrap .copy { margin-top:12px; font-size:13px; color:#888888;}
#footerWrap .address { margin-top:6px;}
#footerWrap .address dt { display:inline-block; font-size:13px; color:#333; font-weight:bold;}
#footerWrap .address dd { display:inline-block; margin-right:20px; font-size:13px; color:#333; font-weight:normal;}

/* main  */

.progressBar { display:flex; position:absolute; top:0; left:0; right:0; z-index:11; height:5px; background:rgba(0,0,0,0.3);}
.progressBar .bar { position:absolute; top:0; left:0; width:0%; height:5px; background:#1c9bd7; transition:all .3s ease;}
.progressBar a { flex:1 1 auto; position:relative; border-left:1px solid rgba(255,255,255,0.8);}
.progressBar a:first-child { border-left:0;}
.progressBar a span { position:absolute; top:8px; left:50%; border-radius:3px; transform:translateX(-50%) translateY(-10px); opacity:0; color:#fff; font-size:13px; transition:all .3s ease;}
.progressBar a:hover span { padding:5px 10px; transform:translateX(-50%) translateY(0); opacity:1; background:#1c9bd7;}

#mainWrap { overflow:hidden;overflow-x:auto; height:100%;}
#wrap { overflow:hidden; width:100%; height:100%;}
#wrap > [class*=mainSec] { overflow:hidden; position:relative; height:100%; background:#fff;}
#wrap > [class*=mainSec] .innerBox { height:100%;}

.mainSec01 {}
/*
.mainSec01 .video { position:absolute; top:0; left:0; bottom:0; right:0;}
.mainSec01 .video:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.mainSec01 .video video { position:absolute; top:50%; left:50%; width:1920px; height:auto; transform:translate(-50%,-50%);}
*/
.mainSec01 h1 { position:absolute; top:50%; left:200px; z-index:2; color:#fff; font-size:50px; text-shadow:2px 2px 3px rgba(0,0,0,0.8); transform:translateY(-50%);}
.mainSec01 h1 span { display:inline-block; font-weight:300;}
.mainSec01 h1 strong { display:block; font-weight:bold;}
.mainSec01 h1 strong span { font-weight:bold;}

.mainSec01 .visualBox {}
.mainSec01 .visualBox .img { visibility:hidden; opacity:0.5; position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(1.05); transition:all 1.5s ease;}
.mainSec01 .visualBox .img.on { visibility:visible; opacity:1; z-index:1; transform:scale(1);}
.mainSec01 .visualBox .img span {display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.mainSec01 .visualBox .img.on span { animation:visualM 4.5s linear infinite alternate;}

@keyframes visualM{
	0% { transform:scale(1.02);}
	100% { transform:scale(1);}
}

.mainSec02 .imgBox { position:absolute; top:0px; right:50%; height:660px; margin-right:-400px;}
.mainSec02 .imgBox .cover { opacity:0; overflow:hidden; position:absolute; top:147px; left:570px; width:598px; height:336px;}
.mainSec02 .phone { position:absolute; bottom:0px; right:50%; z-index:1; width:274px; margin-right:-467px; transition:all .3s ease;}
.mainSec02 .phone img { width:100%;}
.mainSec02 .phone .alert { opacity:0; position:absolute; top:160px; left:56px; width:156px; height:59px; background:url('/ui/static/login2020/images/main/img_sec02_2_3_reverse.png') no-repeat; background-size:100%; transition:all .3s ease;}
.mainSec02 .phone .cover { opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/ui/static/login2020/images/main/img_sec02_2_2_reverse.png') no-repeat; background-size:100%}
 
.mainSec03 .imgBox { position:absolute; top:120px; left:50%; margin-left:-400px; font-size:0; transition:all .3s ease;}
.mainSec03 .imgBox > p { position:relative; display:inline-block; width:290px; height:600px; font-size:0; vertical-align:top; transition:all .3s ease; background-repeat:no-repeat; background-size:cover; background-position:center center; transition:all .3s ease;}
.mainSec03 .imgBox span { position:absolute; bottom:35px; left:30px; font-size:25px; color:#fff; font-weight:bold; transition:all .3s ease;}
.mainSec03 .imgBox span:after { content:''; display:block; position:absolute; top:-28px; left:-30px; width:50px; height:5px; background:#fff; transition:all .3s ease;}
.mainSec03 .imgBox .item2 { margin-top:80px;}
.mainSec03 .imgBox .item4 { margin-top:80px;}

.mainSec04 .imgBox { position:absolute; top:0px; left:50%; margin-left:-1000px; transition:all .3s ease;}
.mainSec04 .itemBox { position:absolute; bottom:0px; left:50%; margin-left:-675px; transition:all .3s ease;}
.mainSec04 .itemBox .item1 { position:relative; width:766px; height:681px; transition:all .3s ease;}
.mainSec04 .itemBox .item1 .img1 { position:absolute; top:0; left:0; width:100%; height:100%; background:url('/ui/static/login2020/images/main/img_sec04_2_1.png') no-repeat; background-size:100%;}
.mainSec04 .itemBox .item1 .img2 { opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/ui/static/login2020/images/main/img_sec04_2_2.png') no-repeat; background-size:100%;}
.mainSec04 .itemBox .item2 { overflow:hidden; position:absolute; top:41px; left:32px; width:702px; height:435px; transition:all .3s ease;}
.mainSec04 .itemBox .item2 .img1 { opacity:0; position:absolute; top:0; left:100%; width:100%; height:100%; background:url('/ui/static/login2020/images/main/img_sec04_3_1.png') no-repeat; background-size:100%;}
.mainSec04 .itemBox .item2 .img2 { opacity:0; position:absolute; top:0; left:100%; width:100%; height:100%; background:url('/ui/static/login2020/images/main/img_sec04_3_2.png') no-repeat; background-size:100%;}

.mainSec05 .imgBox { position:absolute; top:0px; left:50%; margin-left:-400px; transition:all .3s ease;}
.mainSec05 .itemBox { position:absolute; bottom:0; left:50%; width:766px; height:680px; margin-left:-90px; transition:all .3s ease;}
.mainSec05 .itemBox .item1,
.mainSec05 .itemBox .item2 { position:absolute; top:0; left:0; transition:all .3s ease;}
.mainSec05 .itemBox .item1 img,
.mainSec05 .itemBox .item2 img { width:100%; transition:all .3s ease;}
.mainSec05 .itemBox .item1 { display:block;}
.mainSec05 .itemBox .pointer { position:absolute; top:70px; left:101px; width:50px; height:60px; background:url('/ui/static/login2020/images/main/img_pointer1.png') no-repeat; background-size:100%;}
.mainSec05 .itemBox .pointer:after { content:''; opacity:0; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/ui/static/login2020/images/main/img_pointer2.png') no-repeat; background-size:100%;}

.mainSec06 .imgBox { position:absolute; top:0px; left:50%; margin-left:-1000px; transition:all .3s ease;}
.mainSec06 .imgBox .item0 { position:absolute; top:194px; left:461px; z-index:3; width:196px; height:374px; background:url('/ui/static/login2020/images/main/img_sec06_0_1.png') no-repeat; background-size:100%; transition:all .3s ease;}
.mainSec06 .imgBox .item0:before { opacity:0; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/ui/static/login2020/images/main/img_sec06_0_2.png') no-repeat; background-size:100%;}
.mainSec06 .imgBox .item0:after { opacity:0; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/ui/static/login2020/images/main/img_sec06_0_3.png') no-repeat; background-size:100%;}
.mainSec06 .imgBox .item1 { position:absolute; top:194px; left:657px; z-index:2; transition:all .3s ease;}
.mainSec06 .imgBox .item2 { position:absolute; top:194px; left:757px; z-index:1; transition:all .3s ease;}
.mainSec06 .itemBox { position:absolute; bottom:0;; left:50%; margin-left:156px; transition:all .3s ease;}
.mainSec06 .imgBox > img { transition:all .3s ease;}
.mainSec06 .itemBox .item1 { position:relative; z-index:1;}

.mainSec07 .imgBox { position:absolute; top:0; left:50%; margin-left:-1000px; transition:all .3s ease;}
.mainSec07 .itemBox .item1 {position:absolute; bottom:0; left:50%; z-index:1; margin-left:-523px; transition:all .3s ease;}
.mainSec07 .itemBox .item1:before { opacity:0; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/ui/static/login2020/images/main/img_sec07_2_2.png') no-repeat; background-size:100%;}
.mainSec07 .itemBox .item1 .touch { position:absolute; top:173px; left:59px; width:71px; height:80px;}
.mainSec07 .itemBox .item1 .touch:after { opacity:0; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/ui/static/login2020/images/main/icon_mobile_touch.png') no-repeat; background-size:100%;}
.mainSec07 .itemBox .item1 .touch:before { opacity:0; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/ui/static/login2020/images/main/icon_mobile_touch2.png') no-repeat; background-size:100%;}
.mainSec07 .itemBox .item2 {position:absolute; bottom:0; left:50%; margin-left:-333px; transition:all .3s ease;}
.mainSec07 .itemBox .item2:before { opacity:0; content:''; position:absolute; top:41px; left:32px; width:702px; height:435px; background:url('/ui/static/login2020/images/main/img_sec07_3_2.png') no-repeat center center; background-size:100%;}
.mainSec07 .itemBox .item2:after { opacity:0; content:''; position:absolute; top:41px; left:32px; width:702px; height:435px; background:url('/ui/static/login2020/images/main/img_sec07_3_3.png') no-repeat center center; background-size:100%;}
.mainSec07 .itemBox img { max-width:100%; transition:all .3s ease;}

.mainSec08 .imgBox { position:absolute; top:0; left:50%; margin-left:-400px; transition:all .3s ease;}
.mainSec08 .imgBox span { opacity:0; position:absolute; top:172px; left:767px; width:188px; height:89px; background:url('/ui/static/login2020/images/main/img_scan.png') no-repeat;}
.mainSec08 .itemBox { }
.mainSec08 .itemBox .item1 {position:absolute; bottom:0; left:50%; margin-left:-559px; transition:all .3s ease;}
.mainSec08 .itemBox .item1:before { opacity:1; content:''; position:absolute; top:37px; left:120px; width:640px; height:406px; background:url('/ui/static/login2020/images/main/img_sec08_2_1.png') no-repeat center center; background-size:100%;}
.mainSec08 .itemBox .item1:after { opacity:0; content:''; position:absolute; top:37px; left:120px; width:640px; height:406px; background:url('/ui/static/login2020/images/main/img_sec08_2_2.png') no-repeat center center; background-size:100%;}
.mainSec08 .itemBox .item2 {position:absolute; bottom:450px; left:50%; margin-left:-2px; transition:all .3s ease;}
.mainSec08 .itemBox img { max-width:100%; transition:all .3s ease;}

.mainSec09 .imgBox { position:absolute; top:0; left:50%; margin-left:-1000px; transition:all .3s ease;}
.mainSec09 .itemBox { }
.mainSec09 .itemBox .item1 { opacity:0; position:absolute; top:50%; left:50%; width:340px; height:659px; margin-left:-379px; transform:translateY(-50%); background:url(/ui/static/login2020/images/main/img_sec09_2_1.png) no-repeat; background-size:100%;}
.mainSec09 .itemBox .item1 .imem1_1 { opacity:0; content:''; position:absolute; top:0%; left:0%; width:100%; height:100%; background:url('/ui/static/login2020/images/main/img_sec09_2_2.png') no-repeat; background-size:100%;}
.mainSec09 .itemBox .item2 { opacity:0; position:absolute; top:50%; left:50%; margin-left:31px; transform:translateY(-50%);}
.mainSec09 .itemBox img { max-width:100%; transition:all .3s ease;}

.mainSec09 .itemBox .loding-act { visibility:hidden; position:relative; margin-top:190px; transition:all .3s ease; text-align:center;}
.mainSec09 .itemBox .loding-act.on { visibility:visible; opacity:1;}
.mainSec09 .itemBox .loding-act:before { content:''; display:block; position:absolute; top:0; left:50%; width:204px; height:204px; border-radius:50%; border-radius:50%; margin-left:-10px; box-shadow:3px 3px 3px -3px rgba(0,0,0,0.3) inset; transform:translateX(-50%);}
.mainSec09 .itemBox .loding-act canvas { width:204px; height:204px; margin-left:-20px;}
.mainSec09 .itemBox .loding-txt { margin-top:-134px; margin-left:-20px; font-size:16px;}
.mainSec09 .itemBox .loding-txt span { font-weight:800; font-size:25px; color:#1c9bd7;}

.mainSec10 .imgBox { position:absolute; top:0; right:50%; margin-right:-1000px; transition:all .3s ease;}
.mainSec10 .itemBox { }
.mainSec10 .itemBox .item1 { opacity:0; position:absolute; bottom:0; left:50%; width:770px; height:650px; margin-left:-300px; transition:all .3s ease;}
.mainSec10 .itemBox .item2 { opacity:0; position:absolute; top:50%; left:50%; margin-top:-135px; margin-left:-210px; transition:all .3s ease;}
.mainSec10 .itemBox .item3 { opacity:0; position:absolute; top:50%; left:50%; margin-top:-135px; margin-left:60px; transition:all .3s ease;}
.mainSec10 .itemBox .item4 { opacity:0; position:absolute; top:50%; left:50%; margin-top:-135px; margin-left:330px; transition:all .3s ease;}
.mainSec10 .itemBox img { max-width:100%; transition:all .3s ease;}

.mainSec11 .innerBox { height: auto; margin:50vh auto 0; transform:translateY(-50%); min-height:1000px;}
.mainSec11 .itemBox {position: absolute; top:210px;  }
.mainSec11 .itemBox.swipeWrap {width:100%; height:390px; position: relative; overflow: hidden; }
.mainSec11 .itemBox.swipeWrap .swiper-container {overflow: hidden; width:98%; margin: 0 auto;}
.mainSec11 .itemBox.swipeWrap .swipePrev {position: absolute; left:0px; top:50%; margin-top:-22.5px; display: block; z-index: 2; }
.mainSec11 .itemBox.swipeWrap .swipeNext {position: absolute; right:0px; top:50%; margin-top:-22.5px; display: block; z-index: 2;}
.mainSec11 .itemBox.swipeWrap .swipePrev:focus , .mainSec11 .itemBox.swipeWrap .swipeNext:focus{outline: 0;}
.mainSec11 .itemBox.swipeWrap .swiper-wrapper { display: flex; position: absolute;     min-height:390px; display:-ms-inline-flexbox; display:-ms-flexbox;}
.mainSec11 .itemBox .itemList .swiper-slide { opacity:1; transition:all .3s ease;      width:calc(25% - 30px); margin-right:40px; display:inline-block; flex:1 0 auto; flex-grow:1;  }
.mainSec11 .itemBox .itemList .swiper-slide  a{ padding:40px; background: #fff; width:95%; display: inline-block;}
.mainSec11 .itemBox .itemList .swiper-slide  a:hover { box-shadow:10px 10px 8px rgba(0,0,0,0.1); }
.mainSec11 .itemBox .itemList .subTitle { font-size: 12px; color:#0c91e5; font-weight: 800; margin-bottom:15px;} 
.mainSec11 .itemBox .itemList h1 { height:100px; font-size:24px; /* font-family: 'NotoSans'; */ font-weight:bolder; color:#333; margin-bottom:25px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; }
.mainSec11 .itemBox .itemList .itemText { height:65px; font-size:15px; color:#333; margin-bottom:55px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; }
.mainSec11 .itemBox .itemList .itemDate { font-size:12px; color:#888888;}

.mainSec12 .imgBox { position:absolute; top:0px; left:50%; height:660px; margin-left:-400px;}
.mainSec12 .imgBox .cover { opacity:1; overflow:hidden; position:absolute; top:160px; left:175px; width:522px; height:436px;}
.mainSec12 .imgBox .cover span {color: #000; font-weight: 800; text-align: center; display: block; padding-top: 110px; font-size: 20px;}
.mainSec12 .imgBox .cover .item1 {position: absolute; top: 300px; left: 0; background-repeat: no-repeat; width: 100px; height: 145px; }
.mainSec12 .imgBox .cover .item2 {position: absolute; top: 260px; left: 36px; background-repeat: no-repeat; width: 29px; height: 28px; }
.mainSec12 .imgBox .cover .item3 {position: absolute; top: 113px; left: 44px; background-repeat: no-repeat; width: 192px; height: 136px; }
.mainSec12 .imgBox .cover .item4 {position: absolute; top: 180px; left: 194px; background-repeat: no-repeat; width: 100px; height: 145px; }
.mainSec12 .imgBox .cover .item5 {position: absolute; top: 143px; left: 229px; background-repeat: no-repeat; width: 29px; height: 28px; }
.mainSec12 .imgBox .cover .item6 {position: absolute; top: 5px; left: 246px; background-repeat: no-repeat; width: 192px; height: 136px; }
.mainSec12 .imgBox .cover .item7 {position: absolute; top: 56px; left: 406px; background-repeat: no-repeat; width: 110px; height: 145px; background-position: top center;}
.mainSec12 .imgBox .cover .item8 {position: absolute; top: 15px; left: 440px; background-repeat: no-repeat; width: 29px; height: 28px; }

.mainSec13 .imgBox { position:absolute; top:0px; left:50%; margin-left:-1000px; transition:all .3s ease;}
.mainSec13 .imgBox .cover { opacity:1; overflow:hidden; position:absolute; top:100px; left:200px; width:1200px; height:700px;}
.mainSec13 .imgBox .cover .item1 {z-index: 10; position: absolute; bottom: 0px; left: 402px; background-repeat: no-repeat; width: 373px; height: 700px; background:url('/ui/static/login2020/images/main/img_sec13_phone_01.png') no-repeat; }
.mainSec13 .imgBox .cover .item2 {z-index: 10; position: absolute; top: 59px; left: 452px; background-repeat: no-repeat; width: 258px; height: 558px; overflow: hidden; border-radius: 17px; }
.mainSec13 .imgBox .cover .item2 .img1  {z-index: 10; position: absolute; top: 0px; left: 0px; background-repeat: no-repeat; width: 258px; height: 558px; background:url('/ui/static/login2020/images/main/img_sec13_phone_04.png') no-repeat; }
.mainSec13 .imgBox .cover .item3 {z-index: 1; position: absolute; top: 197px; left: 744px; background-repeat: no-repeat; width: 460px; height: 320px; background:url('/ui/static/login2020/images/main/img_sec13_card.png') no-repeat; }

#mainWrap .textBox { position:absolute; top:160px; left:20px; z-index:2; transition:all .3s ease;}
#mainWrap .textBox .subTit { font-size:20px; color:#333; font-weight:800; transition:all .3s ease;}
#mainWrap .textBox h2 { margin-top:5px; font-size:30px; color:#333; font-weight:normal; transition:all .3s ease;}
#mainWrap .textBox .btnMore { display:inline-block; margin-top:30px; font-size:15px; color:#666;  transition:all .3s ease;}
#mainWrap .textBox .btnMore:after { content:''; display:inline-block; width:32px; height:12px; margin-left:10px; background:url('/ui/static/login2020/images/main/btn_arrow.png') no-repeat;}

#mainWrap .textBox.type2 { position:absolute; left:auto; right:20px; text-align:right;}
#mainWrap .textBox.type2 .btnMore {}
#mainWrap .textBox.type2 .btnMore:after { display:none;}
#mainWrap .textBox.type2 .btnMore:before { content:''; display:inline-block; width:32px; height:12px; margin-right:10px; background:url('/ui/static/login2020/images/main/btn_arrow2.png') no-repeat;}

#mainWrap .mainSec11 { background: #f5f6f8;}
#mainWrap .mainSec11 .textBox { top: 170px; left:0;}
#mainWrap .textBox.type3 {text-align: center; position: relative; }
#mainWrap .textBox.type3 h2 { font-size:30px; font-weight:800; text-align: center; color:#333; margin: 0;}
#mainWrap .textBox.type3 .subTit { font-size:15px; font-weight:normal; text-align: center; color:#333; margin-top:5px;} 
#mainWrap .textBox.type3 .btnMore2 { font-size:13px; font-weight:bold; text-align: center; color:#666666; border:1px solid #dbdbdb; display: inline-block; width:150px; height:40px; line-height: 40px; margin-top:25px;}

.btnMainTop { display:none; position:absolute; bottom:70px; right:125px; width:55px; height:55px; font-size:0; background:url('/ui/static/login2020/images/main/btn_top.png') no-repeat; background-size:cover;}
.btnMainTop a { display:block; height:100%;}

.scrollDown { position:absolute; bottom:40px; left:70px; z-index:2;}
.scrollDown .secNum { float:left;}
.scrollDown .secNum span { display:block; width:48px; padding-bottom:5px; font-size:17px; color:#000; text-align:center; transition:font-size .3s ease;}
.scrollDown .secNum span + span { border-top:1px solid #000; padding-bottom:0px; padding-top:5px;}
.scrollDown .text { float:left; margin-top:15px; padding-left:20px; font-size:20px; color:#000; transition:font-size .3s ease;}
.scrollDown .text:after { content:''; display:inline-block; width:10px; height:20px; margin-left:10px; vertical-align:middle; background:url('/ui/static/login2020/images/main/icon_scroll_arrow_b.png') no-repeat; animation:aniScrollDown 3s ease infinite;}

.scrollDown.bgWhite { display:none;}
.scrollDown.bgWhite .secNum span { color:#fff;}
.scrollDown.bgWhite .secNum span + span { border-top-color:#fff;}
.scrollDown.bgWhite .text { color:#fff;}
.scrollDown.bgWhite .text:after {background-image:url('/ui/static/login2020/images/main/icon_scroll_arrow.png');}

.scrollDownCenter { display:none; position:absolute; bottom:50px; left:50%; z-index:1; text-align:center; transform:translateX(-50%);}
.scrollDownCenter .text { font-size:20px; color:#ffffff;}
.scrollDownCenter .scrollDownM { position:relative; display:block; width:26px; height:40px; margin:0 auto 15px; border:2px solid #fff; border-radius:20px;}
.scrollDownCenter .scrollDownM > span { position:absolute; top:50%; left:50%; display:inline-block; width:10px; height:20px; margin:-12px 0 0 -5px; vertical-align:middle; background:url('/ui/static/login2020/images/main/icon_scroll_arrow.png') no-repeat; animation:aniScrollDown 1.5s linear infinite;}
.scrollDownCenter.bgWhite { display:block;}

@keyframes aniScrollDown{
	50% { transform:translateY(5px)}
}

/* 모션 animation */
#mainWrap .active .textBox { opacity:0; animation:textBoxM .6s ease .7s both;}
#mainWrap .mainSec02.active .phone { opacity:0; animation:sec02_1M .6s ease 1s both;}
#mainWrap .mainSec02.active .phone .alert { opacity:0; animation:bounceIn .6s ease 1.6s both;}
#mainWrap .mainSec02.active .phone .cover { opacity:0; animation:fadeIn .6s ease 2.8s both;}
#mainWrap .mainSec02.active .imgBox > img { opacity:0; animation:fadeInLeft .6s ease .8s both;}
#mainWrap .mainSec02.active .imgBox .cover { opacity:0; animation:fadeIn .6s ease 2.8s both;}
#mainWrap .mainSec02.active .imgBox .cover img { animation:sec02_2M 4s linear 3s infinite alternate;}

#mainWrap .mainSec03.active .imgBox .item1 { opacity:0; animation:fadeInUp .6s ease .7s both, sec03_1M 6s ease 2s infinite;}
#mainWrap .mainSec03.active .imgBox .item2 { opacity:0; animation:fadeInDown .6s ease .9s both, sec03_2M 6s ease 2s infinite;}
#mainWrap .mainSec03.active .imgBox .item3 { opacity:0; animation:fadeInUp .6s ease 1.1s both, sec03_1M 6s ease 2s infinite;}
#mainWrap .mainSec03.active .imgBox .item4 { opacity:0; animation:fadeInDown .6s ease 1.3s both, sec03_2M 6s ease 2s infinite;}

#mainWrap .mainSec04.active .imgBox img { opacity:0; animation:fadeInLeft .6s ease .9s both;}
#mainWrap .mainSec04.active .itemBox .item1 { opacity:0; animation:fadeIn .6s ease .7s forwards;}
#mainWrap .mainSec04.active .itemBox .item2 .img1 { animation:sec04_1M .6s ease 2s forwards;}
#mainWrap .mainSec04.active .itemBox .item2 .img2 { animation:sec04_1M .6s ease 4s forwards;}

#mainWrap .mainSec05.active .imgBox img { opacity:0; animation:fadeInRight .6s ease .9s both;}
#mainWrap .mainSec05.active .itemBox .item1 { opacity:0; animation:fadeIn .6s ease .7s forwards;}
#mainWrap .mainSec05.active .itemBox .item2 { opacity:0; animation:fadeIn .6s ease 2.4s forwards;}
#mainWrap .mainSec05.active .itemBox .pointer { opacity:0; animation:fadeInRight .6s ease 1.5s forwards;}
#mainWrap .mainSec05.active .itemBox .pointer:after { opacity:0; animation:flash .3s ease 2.1s forwards;}

#mainWrap .mainSec06.active .imgBox { opacity:0; animation:fadeInLeft .6s ease .9s both;}
#mainWrap .mainSec06.active .imgBox .item0:before { animation:fadeIn .6s ease 3s forwards; }
#mainWrap .mainSec06.active .imgBox .item0:after { animation:fadeIn .6s ease 4.5s forwards; }
#mainWrap .mainSec06.active .imgBox .item1 { opacity:0; animation:fadeInLeft .6s ease 1.6s both, sec06_1M .6s ease 3s forwards;}
#mainWrap .mainSec06.active .imgBox .item2 { opacity:0; animation:fadeInLeft .6s ease 1.8s both, sec06_2M .6s ease 3s forwards, sec06_3M .6s ease 4.5s forwards;}
#mainWrap .mainSec06.active .itemBox .item1 { opacity:0; animation:fadeIn .6s ease .7s forwards;}

#mainWrap .mainSec07.active .imgBox img { opacity:0; animation:fadeInLeft .6s ease .7s both;}
#mainWrap .mainSec07.active .itemBox .item1 { opacity:0; animation:fadeInUp .6s ease 1s forwards;}
#mainWrap .mainSec07.active .itemBox .item1:before { opacity:0; animation:fadeIn .6s ease 4.3s forwards;}
#mainWrap .mainSec07.active .itemBox .item1 .touch { animation:fadeOut .3s ease 4.3s forwards;}
#mainWrap .mainSec07.active .itemBox .item1 .touch:after { opacity:0; animation:fadeInRight .6s ease 3.1s forwards;}
#mainWrap .mainSec07.active .itemBox .item1 .touch:before { opacity:0; animation:scaleIn .6s ease 3.7s forwards;}
#mainWrap .mainSec07.active .itemBox .item2 { opacity:0; animation:fadeInRight .6s ease 1.3s forwards;}
#mainWrap .mainSec07.active .itemBox .item2:before { opacity:0; animation:fadeIn .6s ease 2.5s forwards;}
#mainWrap .mainSec07.active .itemBox .item2:after { opacity:0; animation:fadeIn .6s ease 4.3s forwards;}

#mainWrap .mainSec08.active .imgBox img { opacity:0; animation:fadeInRight .6s ease .7s both;}
#mainWrap .mainSec08.active .imgBox span { opacity:0; animation:fadeIn .5s ease 1.3s forwards, sec08_1M .6s linear 1.8s forwards alternate 2, fadeOut .6s linear 3s forwards;}
#mainWrap .mainSec08.active .itemBox .item1 { opacity:0; animation:fadeIn .6s ease .9s forwards;}
#mainWrap .mainSec08.active .itemBox .item1:before { opacity:0; animation:sec07_1M .6s ease 3.6s forwards;}
#mainWrap .mainSec08.active .itemBox .item1:after { opacity:0; animation:fadeIn .6s ease 3s forwards;}
#mainWrap .mainSec08.active .itemBox .item2 { opacity:0; animation:fadeInDown .6s ease 3.6s forwards,sec08_2M 10s linear 4.2s forwards infinite;}

#mainWrap .mainSec09.active .imgBox img { opacity:0; animation:fadeInLeft .6s ease .7s forwards;}
#mainWrap .mainSec09.active .itemBox .item1 { opacity:0; animation:sec09_1M .6s ease .9s forwards;}
#mainWrap .mainSec09.active .itemBox .item1 .imem1_1 { opacity:0; animation:fadeIn .6s ease 2.9s forwards;}
#mainWrap .mainSec09.active .itemBox .item2 { opacity:0; animation:sec09_2M .6s ease 1.1s forwards, sec09_3M .6s linear 2s forwards, fadeOut .3s linear 2.9s forwards;}

#mainWrap .mainSec10.active .imgBox img { opacity:0; animation:fadeInRight .6s ease .7s forwards;}
#mainWrap .mainSec10.active .itemBox .item1 { opacity:0; animation:fadeIn .6s ease .9s forwards;}
#mainWrap .mainSec10.active .itemBox .item2 { opacity:0; animation:fadeInLeft .9s ease 1.1s forwards;}
#mainWrap .mainSec10.active .itemBox .item3 { opacity:0; animation:fadeInLeft 1.2s ease 1.4s forwards;}
#mainWrap .mainSec10.active .itemBox .item4 { opacity:0; animation:fadeInLeft 1.5s ease 1.7s forwards;}

#mainWrap .mainSec11.active .itemBox .itemList .swiper-slide:nth-child(1){ opacity:0; animation:fadeInUp .6s ease 1.2s forwards;}
#mainWrap .mainSec11.active .itemBox .itemList .swiper-slide:nth-child(2){ opacity:0; animation:fadeInUp .8s ease 1.4s forwards;}
#mainWrap .mainSec11.active .itemBox .itemList .swiper-slide:nth-child(3){ opacity:0; animation:fadeInUp 1.0s ease 1.6s forwards;}
#mainWrap .mainSec11.active .itemBox .itemList .swiper-slide:nth-child(4){ opacity:0; animation:fadeInUp 1.2s ease 1.8s forwards;}

#mainWrap .mainSec12.active .imgBox { opacity:0; animation:fadeInRight .6s ease .9s both;}
#mainWrap .mainSec12.active .imgBox .cover .item1 {opacity:0; animation:fadeInUp .6s ease 1.2s forwards; }
#mainWrap .mainSec12.active .imgBox .cover .item2 {opacity:0; animation:fadeIn .7s ease 1.5s forwards; }
#mainWrap .mainSec12.active .imgBox .cover .item3 {opacity:0; animation:fadeIn 1.1s ease 2.4s forwards; }
#mainWrap .mainSec12.active .imgBox .cover .item4 {opacity:0; animation:fadeInUp .8s ease 1.8s forwards; }
#mainWrap .mainSec12.active .imgBox .cover .item5 {opacity:0; animation:fadeIn .9s ease 2.1s forwards;}
#mainWrap .mainSec12.active .imgBox .cover .item6 {opacity:0; animation:fadeIn 1.4s ease 3.4s forwards;}
#mainWrap .mainSec12.active .imgBox .cover .item7 {opacity:0; animation:fadeInUp 1.2s ease 2.7s forwards;}
#mainWrap .mainSec12.active .imgBox .cover .item8 {opacity:0; animation:fadeIn 1.3s ease 3.0s forwards;}

#mainWrap .mainSec13.active .imgBox { opacity:0; animation:fadeInLeft .6s ease .7s forwards; }
#mainWrap .mainSec13.active .imgBox .cover .item1 {opacity:0; animation:fadeIn .9s ease 1.2s forwards; }
#mainWrap .mainSec13.active .imgBox .cover .item2 .img1 {opacity:0; animation:sec13_2M 1.0s ease 3.0s forwards; }
#mainWrap .mainSec13.active .imgBox .cover .item3 {opacity:0; animation:sec13_1M 1.6s ease 2.2s forwards; }


@keyframes textBoxM{
	0% { opacity:0; transform:translateY(-20px); }
	100% { opacity:1; transform:translateY(0px); }
}
@keyframes sec02_1M{
	0% { opacity:0; transform:translateX(20px); }
	100% { opacity:1; transform:translateX(0px); }
}
@keyframes sec02_2M{
	20% { transform:translateY(0px); }
	80%,100% { transform:translateY(-50%); }
}
@keyframes sec03_1M{
	0%,25%,75%,100% { margin-top:0px;}
	37.5%,62.5% { margin-top:80px;}
}
@keyframes sec03_2M{
	0%,25%,75%,100% { margin-top:80px;}
	37.5%,62.5% { margin-top:0px;}
}
@keyframes sec04_1M{
	0% { opacity:1; left:100%;}
	100% { opacity:1; left:0%;}
}

@keyframes sec06_1M{
	0% { opacity:1; transform:translateX(0px); }
	100% { opacity:1; transform:translateX(-104px); }
}
@keyframes sec06_2M{
	0% { opacity:1; transform:translateX(0px); }
	100% { opacity:1; transform:translateX(-104px); }
}
@keyframes sec06_3M{
	0% { opacity:1; transform:translateX(-104px); }
	100% { opacity:1; transform:translateX(-208px); }
}
@keyframes sec07_1M{
	0% { opacity:1; background-size:100%; }
	100% { opacity:0; background-size:150%;}
}
@keyframes sec08_1M{
	0% { transform: translate(0px,0px);}
	100% { transform: translate(-28px,72px);}
}
@keyframes sec08_2M{
	0% { transform: translateX(0);}
	25% { transform: translateX(15px);}
	50% { transform: translateX(0px);}
	75% { transform: translateX(-15px);}
	100% { transform: translateX(0px);}
}
@keyframes sec09_1M{
	0% { opacity:0; margin-top:20px}
	100% { opacity:1; margin-top:0}
}
@keyframes sec09_2M{
	0% {opacity:0; margin-left:71px}
	100% {opacity:1; margin-left:31px}
}
@keyframes sec09_3M{
	0% { transform:translateY(-50%) scale(1) translateX(0%)}
	100% {transform:translateY(-50%) scale(0.5) translateX(-212%)}
}
@keyframes scaleIn{
	0% { opacity:0; transform:scale(1); }
	80% { opacity:1; transform:scale(0.6); }
	90% { opacity:1; transform:scale(0.8); }
	100% { opacity:1; transform:scale(1); }
}

@keyframes sec13_1M{
	0% {opacity:0; left: 744px;}
	20% {opacity:1; left: 744px;}
	50% { opacity:1; left: 744px;}
	90% { opacity:1; left: 230px;}
	100% {opacity:1; left: 233px;}
}
@keyframes sec13_2M{
	0% {opacity:0; top:558px;}
	50% { opacity:1; top:558px;}
	90% { opacity:1; top: 0px;}
	100% {opacity:1; top: 0px;}
}


/* 로그인 전 개별 페이지 */
#container { margin-top:130px;}
.subHeader { position:relative; width:100%; min-width:1200px; max-width:1640px; padding:0 20px; margin:0 auto 80px;}
.subHeader h1 { padding-top:33px; font-weight:200; font-size:40px; color:#333333; line-height:1.25;}
.subHeader h1 .subTit { display:block; margin-bottom:10px; font-size:20px; color:#333; font-weight:bold}
.subHeader h1 strong { font-weight:bold;}
.subHeader h1 .color { font-weight:bold; color:#3d5199;}
.subHeader .link { display:inline-block; margin-top:20px; font-size:17px; color:#333;}
.subHeader .link:after { content:''; display:inline-block; width:31px; height:17px; margin-left:10px; margin-top:-2px; vertical-align:middle; background:url('/ui/static/login2020/images/icon_arrow.png') no-repeat; transition:all .3s ease;}
.subHeader .link:hover:after { margin-left:20px;}
.subHeader .icons { position:absolute; top:86px; right:40px;}
.subHeader .icons li { float:left; margin-left:70px; text-align:center;}
.subHeader .icons li img { margin-bottom:15px;}
.subHeader .icons li p { color:#333; font-weight:bold; font-size:17px;}

.innerBox { position:relative; width:100%; min-width:1200px; max-width:1640px; padding:0 20px; margin:0 auto;}

.subSecBox { overflow:hidden; position:relative; height:430px; margin-bottom:100px;}
.subSecBox .textBox { position:absolute; top:20px; left:20px; width:600px; height:300px; padding-left:70px; padding-top:45px; background:#3d5199; transition:all .3s ease; -webkit-font-smoothing: subpixel-antialiased;}
.subSecBox .textBox h2 { font-size:30px; color:#fff; font-weight:bold;} 
.subSecBox .textBox p { margin-top:40px; font-size:17px; color:#fff;}
.subSecBox .textBox p span { display:block; margin-top:3px; font-size:15px; color:#fff; line-height:2;}
.subSecBox .img { overflow:hidden; position:absolute; top:0; right:20px; left:50%; height:430px; margin-left:-300px;}
.subSecBox .img p { height:430px; background-repeat:no-repeat; background-size:contain; background-position:center center; animation:scaleM 8s ease infinite;}

.subSecBox.type2 .textBox { left:auto; right:0; padding-left:0; padding-right:70px; text-align:right;}
.subSecBox.type2 .img { left:0; right:50%; margin-left:0; margin-right:-300px;}

.fadeInLeftC2 { animation-name:fadeInLeftC2;}
.fadeInRightC2 { animation-name:fadeInRightC2;}

/* 정책자(PB) */
.PBBox .subSecBox .textBox { background: #06a2b4;}
.PBBox .subHeader h1 .color{ color: #06a2b4;}

/* 메인박스(MBox) */
.MBox .subSecBox .textBox { background: #1c9bd7;}
.MBox .subHeader h1 .color{ color: #1c9bd7;}

/* box 투데이 */
.TBBox .subSecBox .textBox { background: #1c9bd7;}
.TBBox .subHeader h1 .color{ color: #1c9bd7;}

/* 전자어박스(EBox) */
.EBox .subSecBox .textBox { background: #0f77a2;}
.EBox .subHeader h1 .color{ color: #0f77a2;}

/* 혁신기업투자(IBox) */
.IBox .subSecBox .textBox { background: #ffad00;}
.IBox .subHeader h1 .color{ color: #ffa200;}
.IBox .subSecBox .textBox h2 { color:#000;} 
.IBox .subSecBox .textBox p {color:#000;}

/* 박스포스(MPBox) */
.MPBox .subSecBox .textBox { background: #6075ff;}
.MPBox .subHeader h1 .color{ color: #6075ff;}

/* 미디어 */
.inpbox { display:flex;display:-ms-flex;}
.inpbox input { flex:1 1 auto; width:100%; height:50px; padding:0 0 0 20px; border:1px solid #dbdbdb; border-radius:4px; line-height:50px; box-sizing:border-box;}
.inpbox input[readonly] { color:#888888; background:#f2f2f2;}
.inpbox * + * { margin-left:10px;}
.inpbox button { flex: 0 0 100px; width:100px; height:50px; border-radius:5px;}
.inpbox.error { position:relative;}
.inpbox.error input { border:1px solid #fbb9c4; color:#f86464;}
.inpbox.error:after { content: '';display: block;position: absolute;top: 50%;right: 10px;width: 24px;height: 24px;margin-top: -12px;background: url(../images/common/icon_error.png) no-repeat;}

.btn {display:inline-block; min-width: 150px; height: 50px; padding:0 10px; border: 0; border-radius: 5px; color: #fff; font-size: 17px; font-weight:bold; cursor:pointer; outline:0;}
.btn:hover {transition: background-color .5s;webkit-transition: background-color .5s;}
.btnBlue {color: #fff;background: #1c9bd7;}
.btnBlue:hover {background: #115d81;}

.selectbox { position:relative;}
.selectbox select { display:none;}
.selectbox .selectBtn { position:relative; width:100%; height:50px; border:1px solid #dbdbdb; padding-left:20px; border-radius:4px; text-align:left; background:#fff;}
.selectbox .selectBtn:after { content:''; display:block; position:absolute; top:50%; right:20px; width:12px; height:7px; margin-top:-3.5px; background:url('../images/common/icon_select_arrow.png') no-repeat;}
.selectbox .optionList { display:none; position:absolute; top:49px; left:0; z-index:1; width:100%; border:1px solid #31a6dd; border-top:0; background:#fff;}
.selectbox .optionList ul {}
.selectbox .optionList ul li {}
.selectbox .optionList ul li a { display:block; padding:13px 0 13px 20px; color:#333333; width:200px;}
.selectbox .optionList ul li a:hover,
.selectbox .optionList ul li a:focus { color:#fff; background:#1c9bd7;}
.selectbox .selectBtn.active { border:1px solid #31a6dd; border-bottom:0; border-radius:0; background:#f1f3f4;}
.selectbox .selectBtn.active ~ .optionList { display:block; animation:selectM .3s ease both;}

.subHeader .search { position:absolute; top:86px; right:40px;}
.subHeader .search li { float:left;}
.subHeader .search .selectbox { width:200px; margin-right:10px;}
.subHeader .search .inpbox input { width:300px;}

.PRBox .subSecBox.itemBox { width:100%; background: #f5f6f8; height: 100%; padding:80px 0 100px 0; margin-bottom: 0;}
.PRBox .subSecBox.itemBox .txtBox {min-width:1200px; max-width:1640px; margin: 0 auto; font-size:15px; margin-bottom: 25px;}
.PRBox .subSecBox.itemBox .txtBox .color {color:#0c91e5; font-weight:800;}
.PRBox .subSecBox.itemBox .itemList{ display: flex; flex-wrap:wrap; min-width:1200px; max-width:1640px; margin: 0 auto; align-content: center;}
.PRBox .subSecBox.itemBox .itemCont { background: #fff; width:355px; height: 375px; margin: 0 60px 50px 0;}
.PRBox .subSecBox.itemBox .itemCont:nth-child(4n){margin-right: 0;}
.PRBox .subSecBox.itemBox .itemList a{ width:100%; height:100%; padding:40px; background: #fff;   display: inline-block;}
.PRBox .subSecBox.itemBox .itemList a:hover { box-shadow:10px 10px 8px rgba(0,0,0,0.1); }
.PRBox .subSecBox.itemBox .itemList .subTitle { font-size: 12px; color:#0c91e5; font-weight: 800; margin-bottom:15px;} 
.PRBox .subSecBox.itemBox .itemList h1 { height:100px; font-size:24px; font-weight:bolder; color:#333; margin-bottom:25px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word;}
.PRBox .subSecBox.itemBox .itemList .itemText { height:65px; font-size:15px; color:#333; margin-bottom:55px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word;}
.PRBox .subSecBox.itemBox .itemList .itemDate { font-size:12px; color:#888888;}

.PRBox .subSecBox {height: 100%;}
.PRBox .subSecBox .titleWrap { border-top: 2px solid #666666; border-bottom:1px solid #dbdbdb; padding: 30px 20px;}
.PRBox .subSecBox .titleWrap .title { font-size:35px; font-weight: bolder; color: #333333; margin-bottom:10px; }
.PRBox .subSecBox .titleWrap .subTit { font-size:14px; font-weight: 800; color:#0c91e5; margin-right: 15px;}
.PRBox .subSecBox .titleWrap .date { font-size:14px; color:#888888;}
.PRBox .subSecBox .article { padding:50px; font-size: 15px; color:#333;  word-break:keep-all; border-bottom:1px solid #dbdbdb; }
.PRBox .txtBox .txtLink { text-decoration: underline; color:#0c91e5; font-weight: 800;}
.PRBox .txtBox { margin-top:45px; font-size:15px; color:#333;}

.pageNation { text-align: center;}
.pageNation li { width:30px; height:30px; display: inline-block; text-align: center; line-height: 30px; font-size:15px; cursor:pointer; margin-right: 5px;}
.pageNation li.on { background: #1c9bd7; color:#fff; font-weight: 800; font-size:15px;}

/* 다음 이전 버튼 */
.btnGrp{width:100%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 50px;}
.btnGrp li{width:33.33%}
.btnList{text-align:center;}
.btnNext {display:block; width:auto; text-align:right;  padding-right:40px; position:relative; overflow:visible; color:#333; font-weight:800; font-size:15px; transition:all .3s ease;}
.btnNext:after { content:''; display:block; position:absolute;  right:0px; top:7px; width:30px; height:10px; background:url('../images/common/icon_arrow_next.png') no-repeat 0 0;}
.btnNext:hover { color:#1c9bd7; font-weight: 800;}
.btnNext:hover:after {background:url('../images/common/icon_arrow_next.png') no-repeat 0 -15px;}
.btnNext .btnTxt{color:#666666;	overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word;}
.btnPrev { display:block; width:auto !important; margin-left:50px; position:relative; overflow:visible; color:#333333; font-weight:800; font-size:15px; transition:all .3s ease;}
.btnPrev:before {content:''; position:absolute; left:-40px; top:7px; width:30px; height:10px; background:url('../images/common/icon_arrow_prev.png') no-repeat 0 0;}
.btnPrev:hover { color:#1c9bd7; font-weight: 800; }
.btnPrev:hover:before { background:url('../images/common/icon_arrow_prev.png') no-repeat 0 -15px;}
.btnPrev .btnTxt{color:#666666; /*text-align: right;*/ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; }

.noneBox { position: relative; width:100%; text-align: center; padding-top:100px; color:#666; font-size:17px;  margin-top: 70px; margin-bottom: 50px;}
.noneBox:before { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 80px; height: 80px; margin-left: -40px; background: url(/ui/static/login2020/images/icon_table_none80.png) no-repeat;}

@keyframes scaleM{
	50% { transform:scale(1.03) rotate(0.0001deg);}
}

@keyframes fadeInLeftC2{
	0% { opacity:0; transform:translateX(-20%) skewX(10deg); filter: blur(3px);}
	100% { opacity:1; transform:translateX(0%) skewX(0deg); filter: blur(0px);}
}

@keyframes fadeInRightC2{
	0% { opacity:0; transform:translateX(20%) skewX(-10deg); filter: blur(3px);}
	100% { opacity:1; transform:translateX(0%) skewX(0deg); filter: blur(0px);}
}

/* 2022-08-17 css변경 */
.fixedBanner {position:fixed; right:70px; bottom: 5.3%; z-index:3;}
.fixedBanner1 {bottom: 5.3%;}
.fixedBanner2 {bottom: calc(27.345vh + 2.8%);}
.fixedBanner3 {bottom: calc(53.345vh + 2.3%);}
.fixedBanner img {width:21.345vh; max-width:200px;}
.fixedBanner .btnClose {position:absolute; top:0; right:0; width: 3.203vh; height: 3.203vh; max-width:30px; max-height:30px; font-size:0; background:url('/ui/static/login2020/images/main/btn_pop_close.png') no-repeat; background-size: 100%;}
/* //2022-08-17 css변경 */

@media screen and (max-width:1500px){
	.menuAllMenu .menu { display:flex; padding:0 20px;}
	.menuAllMenu .menu h2 { float:none; flex:1 1 auto;}
	.menuAllMenu .menu ul { float:none; display: flex; flex:1 1 auto; flex-wrap: wrap;}
	.menuAllMenu .menu li { width:33.333%;}
	.subSecBox .textBox { width:500px; padding-left:45px;}
	.subSecBox .textBox h2 { font-size:25px; color:#fff; font-weight:bold;} 
	.subSecBox .textBox p { margin-top:25px; font-size:15px; color:#fff;}
	.subSecBox .textBox p span { display:block; margin-top:3px; font-size:15px; color:#fff; line-height:2;}
	.subSecBox.type2 .textBox { padding-right: 45px;}
}

/* 가로버전 체크 */
@media screen and (max-width:1600px){
	#headerWrap .logo { left:20px;}
	#headerWrap .headerLink { margin-right:20px;}
	#headerTnb .tnbInner {width: calc(100% - 30px);}
	
	#mainWrap .textBox .subTit { font-size:18px;}
	#mainWrap .textBox h2 { font-size:25px;}
	#mainWrap .textBox .btnMore { font-size:13px;}
	
	.mainSec02 .phone { margin-left:-450px}
	
	.scrollDown { left:30px;}
	.scrollDown .secNum span {font-size:15px;}
	.scrollDown .text { font-size:17px;}
	
	.PRBox .subSecBox.itemBox .itemCont { background: #fff; width:350px; height: 375px; margin: 0 30px 50px 0;}
}

@media screen and (max-width:1500px){
	.mainSec03 .imgBox > p { width:250px;}
	.mainSec04 .itemBox .item1 { width:700px; height:622px;}
	.mainSec04 .itemBox .item1 img { max-width:100%;}
	.mainSec04 .itemBox .item2 { top:37px; left:29px; width:642px; height:398px;}
	.mainSec04 .itemBox .item2 img { width:638px;}
	
	.mainSec05 .imgBox {margin-left:-350px;}
	.mainSec05 .itemBox { width:700px; height:622.1px; margin-left: -400px;}
	.mainSec05 .itemBox .pointer {top: 65px; left: 84px; width: 40px;}
	
	.mainSec06 .imgBox { overflow:hidden;}
	.mainSec06 .imgBox > img { margin-left:-65px;}
	.mainSec06 .imgBox .item0 { margin-left:-65px;}
	.mainSec06 .imgBox .item1 { position:absolute; top:194px; left:592px;}
	.mainSec06 .imgBox .item2 { position:absolute; top:194px; left:695px;}
	.mainSec06 .itemBox { margin-left:-300px;}
	
	.mainSec07 .imgBox {margin-left:-1105px;}
	.mainSec07 .itemBox { }
	.mainSec07 .itemBox .item1 { width:210px; margin-left:-450px;}
	.mainSec07 .itemBox .item2 { width:700px;}
	.mainSec07 .itemBox .item2:after { top:39px; left:29px;width: 642px;height: 395px;}
	.mainSec07 .itemBox .item2:before { top:39px; left:29px;width: 642px;height: 395px;}
	.mainSec07 .itemBox .item1 .touch { top: 155px; left: 54px; width: 51px;}
		
	.mainSec08 .imgBox { overflow:hidden; margin-left:-350px;}
	.mainSec08 .imgBox img { margin-left:-60px;}
	.mainSec08 .imgBox span { margin-left:-60px;}
	.mainSec08 .itemBox { }
	.mainSec08 .itemBox .item1 { width:780px; margin-left:-449px;}
	.mainSec08 .itemBox .item1:after,
	.mainSec08 .itemBox .item1:before {top: 34px;left: 107px;width: 567px;height: 358px;}
	.mainSec08 .itemBox .item2 { width: 260px; margin-left: 54px; transform: translateY(45px);}
	
	.PRBox .subSecBox.itemBox .itemCont { background: #fff; width:30%; height: 375px; margin: 0 3.3% 50px 0;}
	.PRBox .subSecBox.itemBox .itemCont:nth-child(3n){margin-right: 0;}
	.PRBox .subSecBox.itemBox .itemCont:nth-child(4n){margin-right: 3.3%;}
	
}

@media screen and (max-width:1300px){
	#mainWrap .textBox { padding-right:20px; background:rgba(255,255,255,0.6);}
	#mainWrap .textBox.type2 { padding-right:0px; padding-left:20px;}
	#mainWrap .mainSec11 .textBox {background: none;}
	.PRBox .subHeader .search li { float: inherit; }
	.PRBox .subHeader .search .selectbox { margin-bottom: 10px; }
}


/* 세로버전 체크 */
@media screen and (max-height:800px){
	.mainSec02 .phone { bottom:auto; top:305px; width:230px;}
	.mainSec02 .phone .alert { top: 133px; left: 50px; width: 123px;}
	
	.mainSec03 .imgBox > p { overflow:hidden; height:500px;}
	
	.mainSec04 .itemBox { bottom:auto; top:180px;}
	
	.mainSec05 .itemBox { bottom:auto; top:180px;}
	
	.mainSec06 .itemBox { bottom:auto;  top:243px;}
	
	.mainSec07 .itemBox .item1 { bottom:auto;  top:230px;}
	.mainSec07 .itemBox .item2 { bottom:auto;  top:120px;}
	
	.mainSec08 .itemBox .item1 { bottom:auto; top:290px;}
	.mainSec08 .itemBox .item2 { bottom:auto; top:195px;}
}
@media screen and (max-height:600px){
	.menuAllMenu .menuBox { position:static; transform:none;}
}