@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* CSS Document */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}

body,input,textarea,select,button,table{font-family:'Roboto Condensed', Nanum Gothic, nanumgothic, arial, sans-serif, AppleGothic; font-size:12px; word-break:keep-all;}

a:link, a:visited, a:hover, a:active, a:focus { text-decoration:none; color:inherit; cursor:pointer; }

.material-icons {font-family: 'Material Icons'; font-weight: normal; font-style: normal; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}



img,fieldset{border:0}

img{width:auto; height:100%}

*{transition:all 150ms ease 0s}

.hidden{opacity:0; transition:all 600ms ease 0s}
.view{opacity:1; transition:all 600ms ease 0s}
#mobile_content{display:none;}

.material-icons.md-18{font-size:18px; padding-right:5px;}
.material-icons.md-24{font-size:24px; vertical-align:bottom; transition:none;}
.material-icons.md-36{font-size:36px; vertical-align:bottom;}

/*  float   */
.floatR{float:right !important;}
.floatL{float:left !important;}

/* margin */
.margT10{margin-top:10px !important;}
.margT15{margin-top:15px !important;}
.margT20{margin-top:20px !important;}
.margT25{margin-top:25px !important;}
.margT30{margin-top:30px !important;}
.margT50{margin-top:50px !important;}
.margT100{margin-top:100px !important;}

.margB20{margin-bottom:20px !important;}
.margB30{margin-bottom:30px !important;}
.margB50{margin-bottom:50px !important;}
.margB100{margin-bottom:100px !important;}

/* padding */
.padT10{padding-top:10px !important;}
.padT15{padding-top:15px !important;}
.padT20{padding-top:20px !important;}
.padT30{padding-top:30px !important;}
.padT35{padding-top:35px !important;}
.padT50{padding-top:50px !important;}

.padB80{padding-bottom:80px !important;}

/*font*/
.font12{font-size:12px !important; line-height:18px;font-style:normal; color:#888; font-weight:300}
.font14{font-size:14px !important; line-height:24px;font-style:normal; color:#888; font-weight:300}
.font16{font-size:16px !important; line-height:32px;font-style:normal; color:#888; font-weight:300}
.font18{font-size:18px !important; line-height:32px;font-style:normal; color:#666; font-weight:300}
.font24{font-size:24px !important; line-height:38px;font-style:normal; color:#666; font-weight:300}
.font30{font-size:30px !important; font-weight:500; line-height:60px;font-style:normal; color:#333}
.font32{font-size:32px !important; font-weight:500; line-height:60px;font-style:normal; color:#333}
.font36{font-size:36px !important; font-weight:500; line-height:60px;font-style:normal; color:#333}
.font48{font-size:48px !important; font-weight:500; line-height:60px;font-style:normal; color:#333}
.font60{font-size:60px !important; font-weight:bold; line-height:72px;font-style:normal}

.Cfont14{font-size:14px !important; line-height:24px; color:#999 !important; text-shadow:0 0 3px #333}

.Wfont14{font-size:14px !important; line-height:24px; color:#fff !important; text-shadow:0 0 3px #333}
.Wfont18{font-size:18px !important; line-height:32px; color:#fff !important; text-shadow:0 0 3px #333}
.Wfont24{font-size:24px !important; line-height:42px; color:#fff !important; text-shadow:0 0 5px #333}
.Wfont30{font-size:30px !important; line-height:48px; font-weight:500; color:#fff !important; text-shadow:0 0 5px #333}
.Wfont36{font-size:36px !important; line-height:48px; font-weight:500; color:#fff !important; text-shadow:0 0 5px #333}
.Wfont48{font-size:48px !important; line-height:72px; font-weight:500; color:#fff !important; text-shadow:0 0 5px #333}

.Bfont30{font-size:24px !important; font-weight:500; line-height:48px;font-style:normal; color:#566b92}
.Bfont48{font-size:48px !important; font-weight:500; line-height:60px;font-style:normal; color:#566b92}

.text_under{text-decoration:underline;}
.textLeft{text-align:left}
.textTop{vertical-align:top}
.textMid{vertical-align:middle}
.letter-1{letter-spacing:-1px;}
.listS{list-style:none !important;}


body{margin:0; padding:0; background:#e5e5e5; letter-spacing:-1px;}


/******** Header Style ***********/

header{overflow:hidden; width:100%; height:90vh; margin:0;padding:0;background-position:center center; background-size:cover; background-image:url(../images/main_visual.jpg);}
.top_area{position:fixed; width:100%; height:80px; z-index:9999}
.top_box{position:fixed; width:100%; box-shadow:0 0 20px #333; background:#FFF;}
.logo{position:absolute; display:block; width:320px; height:54px; left:50px; top:15px; background-image:url(../images/logo_w.png); font-size:0px;}
.normal_logo{background-image:url(../images/logo.png);}


/******** Navigation Style ***********/
nav{float:right; width:auto;margin-right:5vw; margin-top:20px; z-index:9999; letter-spacing:0px;}
nav:after{content:""; clear:both;}
nav ul{list-style:none}
nav ul li{display:inline-block; padding:10px 0px 10px 40px; margin-right:40px; font-size:20px; color:#FFF; font-weight:400; text-shadow:0 0 5px #333;}
nav ul li:last-child{margin-right:0px; }
nav ul li:hover, nav ul li.action{color:#1481e6; text-shadow:none; cursor:pointer; transition:none !important; text-decoration:underline;}
nav ul li.action{text-decoration:none;}
nav ul li.action:hover{text-decoration:underline;}

nav .sub_menu_area{position: absolute; left:0; top:80px; width:100%; height:0; opacity: 0; visibility: hidden; background:rgba(0,0,0,0.7);
	
	                /* ----- sub menu animation ------*/
	                
					-webkit-transition:all .25s ease .1s;
					-moz-transition: all .25s ease .1s;
					-o-transition: all .25s ease .1s;
					-ms-transition: all .25s ease .1s;
					transition: all .25s ease .1s;
					
					 /* ----- sub menu animation  End ------*/
					}
.nav_menu:hover > .sub_menu_area{opacity: 1; visibility:visible; height:60px; }
.sub_menu{width:1000px; margin:auto; z-index:99999;}
.sub_menu ul{margin-left:250px; font-size:14px; line-height:40px}
.sub_menu ul li{color:#FFF; margin-right:30px;}

.nav_w{color:#666; text-shadow:none}

.icon01{background:url(../images/icon_menu01.png) no-repeat left center;}
.icon01:hover, .icon01_on{background:url(../images/icon_menu01_on.png) no-repeat left center; }
.icon02{background:url(../images/icon_menu02.png) no-repeat left center; }
.icon02:hover, .icon02_on{background:url(../images/icon_menu02_on.png) no-repeat left center; }
.icon03{background:url(../images/icon_menu03.png) no-repeat left center; }
.icon03:hover, .icon03_on{background:url(../images/icon_menu03_on.png) no-repeat left center; }
.icon04{background:url(../images/icon_menu04.png) no-repeat left center; }
.icon04:hover, .icon04_on{background:url(../images/icon_menu04_on.png) no-repeat left center; }


section{width:auto; height:100%; padding:0 20px; text-align:center;   }
article{margin:-100px auto 0; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius:5px 5px 0px 0px;}

.none_box{padding:100px 0px}
.bg_box{background:#f1f4f7; padding:100px 0px}

.main_visual{width:97%; height:430px; margin:25vh auto 0px; text-align:center; background-color:transparent; background:none; }
.main_title{font-size:48px !important; line-height:72px; font-weight:500; color:#fff !important; text-shadow:0 0 5px #333;}
.main_subtitle{font-size:24px !important; line-height:42px; color:#fff !important; text-shadow:0 0 5px #333; margin-top:10px;}
.quick_link{width:60vw; margin:50px auto 0; padding:20px 20px; background:RGBA(0, 0, 0, 0.5); border-radius:10px; border:1px solid #000;}

.sub_biz{height:65vh;background-image:url(../images/sub_biz.jpg);}
.sub_company{height:65vh;background-image:url(../images/sub_company.jpg);}
.sub_title{width:90%; padding:20px 0; margin:170px auto 0px; text-align:center; background-color:transparent; background:none;}


.title_area{font-size:36px; font-weight:500; line-height:48px; color:#333;}
.title_area p{ border-top:1px solid #333; border-bottom:1px solid #333; display:inline-block;  padding:10px 0;}
.title_area_b{font-size:36px; font-weight:500; line-height:48px; color:#566b92}
.title_area_b p{ border-top:1px solid #566b92; border-bottom:1px solid #566b92; display:inline-block;  padding:10px 0;}
.title_area_W{font-size:36px; font-weight:500; line-height:48px; color:#FFF}
.title_area_W p{ border-top:1px solid #FFF; border-bottom:1px solid #FFF; display:inline-block;  padding:10px 0; text-shadow:0 0 5px #333;}

.sub_text{font-size:24px; line-height:48px; color:#333;}
.sub_text em{font-style:normal; color:#566b92; font-weight:bold}
.sub_text2{font-size:24px; line-height:48px; color:#566b92;}


.quick_btn{height:200px; margin:80px auto 80px;}
.quick_btn ul{list-style:none; text-align:center; }
.quick_btn ul li{display:inline-block; width:10%; height:170px; font-size:16px; line-height:38px; background:url(../images/btn_quick.png) no-repeat bottom 20px center; padding:30px 10px; margin:0 30px;}
.quick_btn ul li:hover{background:url(../images/btn_quick_on.png) no-repeat bottom 30px center; color:#4c93cf; font-weight:bold; text-decoration:underline; box-shadow:0 0 8px rgba(0,0,0,0.5); border-radius:8px}
.quick_btn ul li img{width:80px; height:80px;}

.quick_img01{background-image:url(../images/btn_asp.png)}
.quick_img01:hover{background-image:url(../images/btn_asp_on.png)}

.mini_box{width:60%; border:15px solid rgba(0,0,0,0.05); margin:50px auto 0px;; padding:30px;}
.box_area{margin:0 auto; padding:0;}
.three_box{width:43%; margin-right:8%; display:inline-block; border:8px solid #566b92; box-shadow:2px 2px 10px #777; padding:0 0 50px;}
.three_box:last-child{margin-right:0;}
.three_top{width:100%; background:#566b92; font-size:36px; font-weight:bold; line-height:48px; color:#FFF; padding:15px 0;}
.three_title{ margin-top:30px; color:#566b92;}

.box_left{display:inline-block; width:50%;}
.box_left img{width:100%; height:540px; margin:0px;}
.box_right{display:inline-block; width:45%; margin-left:2%; padding:10px; font-size:18px; line-height:36px}

.n_bus{padding:2px 5px; font-style:normal; background:#390; font-size:12px; border-radius:2px}
.g_bus{padding:2px 5px; font-style:normal; background:#de4242; font-size:12px; border-radius:2px}
.b_bus{padding:2px 5px; font-style:normal; background:#06F; font-size:12px; border-radius:2px}

.history_box{width:100%;}
.his_yy{width:100px; height:65px; border-radius:60px; background-color:rgba(20,129,230,0.8); margin:auto; font-size:24px; color:#FFF; font-weight:bold; padding-top:35px; border:10px solid rgba(255,255,255, 0.8);}
.his_last{width:20px; height:20px; border-radius:10px; background-color:rgba(20,129,230,0.8); margin:auto; font-size:0px;}
.his_text{width:50%; height:100%;}
.his_R{border-left:2px dotted #e6e6e6; text-align:left; margin-left:50%; font-size:14px; color:#777; line-height:24px;}
.his_L{border-right:2px dotted #e6e6e6; text-align:right; font-size:14px; color:#777; line-height:24px;}
.his_R p, .his_L p{letter-spacing:1.5px}
.his_R p{background:url(../images/his_icon.png) no-repeat left top 54px; padding:50px 0 30px 35px; margin-left:-9px;}
.his_L p{background:url(../images/his_icon.png) no-repeat right top 54px; padding:50px 35px 30px 0px; margin-right:-9px;}

.list_box{width:940px; height:156px; margin:10px auto; padding-top:35px;}
.list_box p{width:20%; display:inline-block; font-size:24px; line-height:42px; font-weight:bold; text-align:left; margin-left:15%; color:#FFF}
.list_text{width:45%; display:inline-block; margin-left:5%; vertical-align:top}
.list_text ul {list-style:disc;}
.list_text ul li{text-align:left; font-size:16px; line-height:28px; color:#566b92}
.list_01{background:url(../images/asp_list01.png) no-repeat center top;}
.list_02{background:url(../images/asp_list02.png) no-repeat center top;}
.list_03{background:url(../images/asp_list03.png) no-repeat center top;}
.list_04{background:url(../images/asp_list04.png) no-repeat center top;}

.biz_img{width:90vw; height:800px; margin:20px auto 0px;  font-size:0px;}
.biz_customer{width:90vw; height:300px; margin:100px auto 50px;  font-size:0px;}

.asp_img01{background:url(../images/asp_img01.png) no-repeat; background-position:center; background-size:contain; }
.asp_img02{background:url(../images/asp_img02.jpg) no-repeat; background-position:center;}
.asp_img03{background:url(../images/asp_img03.png) no-repeat; background-position:center; background-size:contain; }

.ops_img01{background:url(../images/ops_img01.png) no-repeat; background-position:center; background-size:contain; }
.ops_img02{background:url(../images/ops_img02.png) no-repeat; background-position:center;}
.ops_img03{background:url(../images/ops_img03.png) no-repeat; background-position:center; }

.rks_img01{background:url(../images/rks_img01.png) no-repeat; background-position:center; background-size:contain; }
.rks_img02{background:url(../images/rks_img02.png) no-repeat; background-position:center;}
.rks_img03{background:url(../images/rks_img03.png) no-repeat; background-position:center; }

.si_img{background:url(../images/si_img.png) no-repeat; background-position:center; }
.ito_img{background:url(../images/ito_img.png) no-repeat; background-position:center; background-size:contain;  width:584px; height:540px; margin:100px auto; }

.ops_info{width:940px; background:url(../images/ops_img00.png) no-repeat center center; background-size:contain; height:271px; margin:100px auto 0;}
.ops_info:after{clear:both; content:"";}
.ops_left{float:left; margin-top:30px; padding-left:55px}
.ops_left ul{list-style:none; text-decoration:}
.ops_left ul li{font-size:20px; font-weight:bold; color:#566b92; line-height:42px; border-bottom:1px solid #D6E2ED}
.ops_right{float:right; margin-top:30px; padding-right:55px}
.ops_right ul{list-style:none}
.ops_right ul li{font-size:20px; font-weight:bold; color:#566b92; line-height:42px; border-bottom:1px solid #D6E2ED}

.rks_list{width:100%; margin:50px auto 0;}
.rks_list ul{list-style:none}
.rks_list ul li{width:300px; margin-right:100px; display:inline-block; font-size:18px; line-height:30px; padding-top:150px;}
.rks_list ul li:last-child{margin-right:0px;}
.rks_icon01{background:url(../images/icon_R01.png) no-repeat center top 30px;}
.rks_icon02{background:url(../images/icon_R02.png) no-repeat center top 30px;}
.rks_icon03{background:url(../images/icon_R03.png) no-repeat center top 30px;}
.rks_icon04{background:url(../images/icon_R04.png) no-repeat center top 30px;}
.rks_icon05{background:url(../images/icon_R05.png) no-repeat center top 30px;}
.rks_icon06{background:url(../images/icon_R06.png) no-repeat center top 30px;}

.si_box{width:100%; height:750px; margin-top:50px; text-align:left }
.si_box p{margin-left:20%}
.ito_box{width:100%; height:450px; margin-top:50px; padding-top:250px;}



/******** table Style ***********/

.tbl_type{max-width:1000px; margin:auto;}
.tbl_type,.tbl_type th,.tbl_type td{border:0;}
.tbl_type{width:100%;border-bottom:2px solid #2953a5;border-top:1px solid #2953a5;font-size:14px;text-align:center; line-height:40px}
.tbl_type caption{font-size:0px;}
.tbl_type th{padding:7px 0 4px;border-top:1px solid #adc2ec;background-color:#3379bd;color:#FFF;font-size:16px;font-weight:bold}
.tbl_type th.none{border-top:0px none #adc2ec;}
.tbl_type td{padding:6px 0 4px;border-top:1px solid #2953a5; color:#333; font-weight:bold; text-align:left; padding-left:20px; background:rgba(255,255,255,0.5)}

.double_text{line-height:32px;}

footer{width:100%; height:150px; margin:auto; background:#e6eaef; border-top:1px solid #A9AFBC;}
.footer_area{position:relative; margin:20px auto; padding-top:20px; color:#777; text-align:center;}
.footer_area p{font-size:12px; line-height:20px; padding-left:150px}
.small_logo{position:absolute; top:28px; right:65vw;}


@media only screen and (max-width:980px){
	#home_content{display:none;}
	#mobile_content{display:block;}
	header{height:400px;}
	section{padding:0px;}
	article{border-radius:unset; box-shadow:none;}

	.top_area_mobile{position:fixed; width:100%; height:60px; }

	.home_btn{position:absolute; top:15px; left:15px;}
	.home_btn img{width:30px;}

	.mobile_title{background:linear-gradient(#3476bb, #2953a5); box-shadow:0 0 10px #000; text-align:center; font-size:21px; font-weight:500; color:#FFF; padding:17px 0; display:block;}
	.mobile_title em{background:url(../images/arrow_btn.png) 100% 50% no-repeat; background-size:10px auto; display:inline; width:15px; padding:0 0 0 20px;}
	.moblie_nav{width:100%; position:absolute; top:-500px; left:0px; background:RGBA(0, 0, 0, 0.9); }
	.moblie_nav ul{list-style:none;}
	.moblie_nav ul li{text-align:center; font-size:18px; font-weight:500; line-height:24px; padding: 10px 0; border-bottom:1px dotted #555; color:#FFF; }

	.nav_active{top:60px;}

	nav{display:none;}
	.top_area{height:60px;}
	.logo{position:relative; background:url(../images/logo_sw.png) no-repeat center; background-size:145px; margin:auto; left:0px; top:3px;}
	.normal_logo{background:url(../images/logo_img.png) no-repeat center; background-size:145px; }

	.sub_biz{height:320px;}

	.main_visual{margin:95px auto 0px;}
	.main_subtitle{font-size:24px !important; font-weight:500; line-height:36px;}
	.quick_link{width:70%; font-size:18px !important; margin:20px auto 0;}
	.title_area, .title_area_b, .title_area_W{font-size:18px; line-height:24px; font-weight:500;}
	
	.none_box, .bg_box{padding: 40px 15px;}

	.font12{font-size:12px !important; line-height:18px;font-style:normal; color:#888; font-weight:normal;}
	.font14{font-size:12px !important; line-height:18px;font-style:normal; color:#888; font-weight:normal;}
	.font16{font-size:12px !important; line-height:18px;font-style:normal; color:#888; font-weight:normal;}
	.font18{font-size:14px !important; line-height:24px;font-style:normal; color:#666; font-weight:normal;}
	.font24{font-size:16px !important; line-height:24px;font-style:normal; color:#666; font-weight:normal;}
	.font30{font-size:18px !important; font-weight:500; line-height:30px;font-style:normal; color:#333;}
	.font32{font-size:18px !important; font-weight:500; line-height:30px;font-style:normal; color:#333;}
	.font36{font-size:24px !important; font-weight:500; line-height:32px;font-style:normal; color:#333;}
	.font48{font-size:24px !important; font-weight:500; line-height:32px;font-style:normal; color:#333;}
	.font60{font-size:font-size:24px !important; font-weight:500; line-height:32px;font-style:normal; color:#333;font-style:normal;}

	.Cfont14{font-size:12px !important; line-height:18px; color:#999 !important; text-shadow:0 0 3px #333}

	.Wfont14{font-size:12px !important; line-height:18px; color:#fff !important; text-shadow:0 0 3px #333}
	.Wfont18{font-size:14px !important; line-height:24px; color:#fff !important; text-shadow:0 0 3px #333; font-style:normal;}
	.Wfont24{font-size:16px !important; line-height:24px; color:#fff !important; text-shadow:0 0 5px #333}
	.Wfont30{font-size:18px !important; line-height:30px; font-weight:500; color:#fff !important; text-shadow:0 0 5px #333}
	.Wfont36{font-size:24px !important; line-height:32px; font-weight:500; color:#fff !important; text-shadow:0 0 5px #333}
	.Wfont48{font-size:24px !important; line-height:32px; font-weight:500; color:#fff !important; text-shadow:0 0 5px #333}

	.Bfont30{font-size:16px !important; font-weight:500; line-height:18px;font-style:normal; color:#566b92}
	.Bfont48{font-size:24px !important; font-weight:500; line-height:32px;font-style:normal; color:#566b92}	

	.sub_text{margin:0px auto; font-size:14px; line-height:24px;}

	.quick_btn{margin:40px auto 40px;}
	.quick_btn ul{list-style:none; text-align:center;}
	.quick_btn ul li{display:inline-block; width:25%; height:70px; font-size:14px; line-height:24px; background:none; padding:15px 8px 8px; margin:10px 3px; border:1px solid #e6e6e6; border-radius:8px; box-shadow:3px 3px 0px #e6e6e6}
	.quick_btn ul li:hover{color:#4c93cf; font-weight:bold; text-decoration:underline; box-shadow:0 0 8px rgba(0,0,0,0.5); border-radius:8px; background:none;}
	.quick_btn ul li img{width:40px; height:40px;}
	.mini_box{width:auto; margin:25px auto 0px; padding:15px; border:10px solid rgba(0, 0, 0, 0.05);}

	.three_box{width:80%; padding:0 0 25px;}
	.three_top{font-size:21px; padding:0px;}

	.box_left{display:none;}
	.box_right{width:100%; margin:0; padding:0; }

	.sub_title{width:80%; margin:90px auto 0px;}
	.list_box{width:100%; height:auto; margin:0px; padding-top:20px; }
	.list_box p{display:block; width:auto; font-size:16px; line-height:32px; font-weight:400; padding-left:10px; margin:5px 0px; background:#566b92;}
	.list_text{width:90%; margin-left:20px;}
	.list_text ul li{font-size:14px; line-height:24px;}
	
	.biz_img{width:350px; height:300px; margin:20px auto 0px; background-size:contain; }
	.biz_customer{width:350px; height:100px; margin:40px auto 0px;  background-size:contain;}
	.asp_img01{background-size:cover; }
	.asp_img02{background-size:contain;}

	.ops_info{background:none; margin:0px; width:100%; height:160px;}
	.ops_left{padding-left:15px; text-align:left;}
	.ops_right{text-align:left; padding-right:15px;}
	.ops_left ul, .ops_right ul{list-style:disc}
	.ops_left ul li, .ops_right ul li{font-size:14px; line-height:24px;}
	
	.rks_list{width:auto; text-align:left; margin-left:10vw;}
	.rks_list ul li{width:auto; height:65px; display:block; padding-left:20vw; padding-top:15px; font-size:14px; line-height:24px; margin-right:0px; background-size:60px; background-position: left;}

	.si_img{background-size:contain;}
	.si_box{ height:400px; background-size:cover;}
	.si_box p{margin-left:0px; line-height:36px; color:#FFF;}
	.si_con{padding:120px 0px; text-align:center;}

	.ito_box{ height:250px; background-size:cover; padding-top:130px;}

 	.footer_area{text-align:left; padding-top:0px;}
	.footer_area p{padding-left:15px;}
}