@charset "utf-8";

#wrap{overflow:hidden; position:relative; z-index:1;}

/*main*/
#area_visual{position:relative; height:100vh; background-size:cover; background-position: 50% 50%; overflow:hidden; background:url(../images/main/main_bg.jpg)no-repeat 100% 100%;}
#area_visual .text{position:absolute; top:40%; left:50%; z-index:10; margin-left:-317px; text-align:center; line-height:77px; color:#fff;}
#area_visual .text h2{font-size:43px; font-weight:100;}
#area_visual .text h3{font-size:80px; font-family:'changa', Sans-serif; font-weight:600; letter-spacing:2.5px;}
#area_visual .text h3 .dot{font-size:70px; color:#00a5db;}
.title{text-align:center;}
.title span{display:inline-block; width:50px; height:3px; background:#222;}
.title h3{padding: 7px 0 0 0; font-size:40px; font-weight:500; color:#222;}
.title p{padding: 5px 0 0; font-size:15px; line-height:20px; color:#666;}
.btn_main_call{display:inline-block; position:relative; margin:10px 0 0 0; padding: 5px 30px; background: linear-gradient(to right, #7474bf 0%, #348ac7 100%); border-radius: 30px 0 30px 0;}
.btn_main_call a{color:#fff;}
.icon_main_call{display:inline-block; position:absolute; top:19px; left:9%; width:32px; height:auto;}
.btn_main_call p{margin:0 0 0 40px; font-size:38px; font-weight:400; line-height:57px;}

/* #area_visual video {position:absolute; top:50%; left:50%; z-index:-100; width:auto; height:auto; min-width:100%; min-height:100%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%);} */
#area_visual video {position:absolute; left:0px; bottom:0px; top:0px; min-width:100%; min-height:100%; width:auto; height:auto; background:url(../images/main/main_bg.jpg) no-repeat 100% 100%; background-size:cover;}
.area_visual_layer{position: absolute; z-index:1; width:100%; height:100%; background:#000; opacity:0.6;}

/*scroll*/
.area_scroll_down{position:absolute; left:50%; bottom:30px; z-index:2; margin-left:-41px;}
a.scroll{display:inline-block;}
a.scroll > span{font-size:13px; font-weight:100; color:#fff;}
.scroll_text{font-size:13px; font-weight:100; color:#fff; /*animation: bounce 2.5s infinite;*/}
span.scroll_line{display:block; position:relative; width:1px; height:42px; margin:0 auto; margin-bottom:10px; background:#fff;}
a.scroll > span.scroll_line:after{content:""; position:absolute; top:0; left:0; width:1px; height:42px; background:#00a5db; -webkit-animation: line 2s cubic-bezier(0.77, 0, 0.175, 1) infinite; -moz-animation: line 2s cubic-bezier(0.77, 0, 0.175, 1) infinite; animation: line 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;}

/* service */
#area_service ul{padding: 60px 0 0; height:100%;}
#area_service ul:after{content:''; display:block; clear:both;}
#area_service ul > li{float:left; position:relative; margin:0 2% 2% 0; width:23.5%; height:260px;}
#area_service ul li:last-child{margin:0 0 2% 0;}
#area_service ul > li:nth-child(1){background:#fff url(../images/main/icon01.svg) no-repeat center 27%; background-size:20%;}
#area_service ul > li:nth-child(2){background:#fff url(../images/main/icon02.svg) no-repeat center 27%; background-size:20%;}
#area_service ul > li:nth-child(4){background:#fff url(../images/main/icon04.svg) no-repeat center 27%; background-size:20%;}
#area_service ul > li:nth-child(3){background:#fff url(../images/main/icon03.svg) no-repeat center 27%; background-size:20%;}
#area_service ul > li .area_icon{display:block; overflow:hidden; position:relative; margin:0 auto; padding:120px 20px 0; height:260px; box-sizing:border-box; text-align:center; word-break:keep-all; transition:all 0.4s ease 0s;}
#area_service ul > li .area_icon span{font-size:18px; color:#222; font-weight:600;}
#area_service ul > li .area_icon p{padding:4px 0 0; font-size:14px; color:#666; line-height:21px;}
#area_service ul > li .area_icon:before,
#area_service ul > li .area_icon:after{content:''; display:block; width:100%; height:260px; box-sizing:border-box; position:absolute; transition:all 0.3s ease 0s;}
#area_service ul > li .area_icon:before{top:0px; left:0px; border:1px solid #eee;}
#area_service ul > li .area_icon:after{top:0px; left:0px; border-width:6px; border-style: solid; border-image:linear-gradient(to right, #7474bf 0%, #348ac7 100%); border-image-slice:1; transform:scale(1.1,1.1); transition:all 0.3s ease-out 0s;}
#area_service ul > li .area_icon:hover:after{transform:scale(1,1);}

/* board */
#area_board{position:relative;  background:#eee; z-index:1;}
.bg_blue{position:absolute; top:0; left:50%; bottom:0;  z-index:-1; width:100%; background:#34498c;}
#area_board h3{font-size:23px; color:#222;}
#area_board .inr{width: 1200px; margin: 0 auto; padding: 80px 0;}
#area_board .inr:after{content:''; display:block; clear:both;}
#area_board .area_consulting{position:relative; float:left; width:50%;}
#area_board .area_consulting ul{padding:0 70px 0 0; max-width:100%;}
#area_board .area_consulting ul:after{content:''; display:block; clear:both;}
#area_board .area_consulting ul li{position:relative; padding:16px 0; width:100%; border-bottom:1px solid #e3e3e3;}
#area_board .area_consulting ul li a{display:inline-block; width:100%;}
#area_board .area_consulting ul li em.new{display:inline-block; margin-right:5px; padding:4px 10px; border-radius:50px; background:linear-gradient(to right, #7474bf 0%, #348ac7 100%); font-size:12px; font-weight:100; color:#fff;}
.neon{color:#fff; font-size:12px; line-height:12px; text-shadow: 0 0 1px #fff;}
.neon{animation:neon 1.5s ease infinite; -moz-animation:neon 1.5s ease infinite; -webkit-animation:neon 1.5s ease infinite;}
#area_board .area_consulting ul p{display:inline-block; width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top; line-height:22px; color:#666;}
#area_board .area_consulting ul span{position:absolute; top:19px; right:0; color:#666; font-weight:200;}
#area_board .area_consulting ul span.answer{background:linear-gradient(to right, #7474bf 0%, #348ac7 100%); color:#fff;}
#area_board .area_consulting .area_title{max-width:100%; margin:0 70px 0 0; padding:0 0 16px 0; border-bottom:2px solid #222;}
#area_board .area_title > a{position:absolute; top:5px; right:70px; width:22px; height:22px;}
#area_board .area_title a{transition:all 0.8s ease-out 0s;}
#area_board .area_title a:hover{transform: rotate(180deg);}
#area_board .area_title a > span > i:nth-child(1){display:inline-block; position:absolute; top:50%; margin-top:-10px; left:50%; width:2px; height:22px; background:#222;}
#area_board .area_title a > span > i:nth-child(2){display:inline-block; position:absolute; top:50%; left:50%; margin-left:-10px; width:22px; height:2px; background:#222;}
#area_board .area_status{position:relative; float:left; width:50%;}
#area_board .area_status h3{color:#fff;}
#area_board .area_status .area_title > a{position:absolute; top:5px; right:0; width:22px; height:22px;}
#area_board .area_status .area_title{max-width:100%; margin:0 0 0 70px; padding:0 0 16px 0; border-bottom:2px solid #fff;}
#area_board .area_status ul{padding:0 0 0 70px; max-width:100%;}
#area_board .area_status ul:after{content:''; display:block; clear:both;}
#area_board .area_status ul li{position:relative; padding:16px 0; width:100%; border-bottom:1px solid #465995;}
#area_board .area_status ul li a{display:inline-block; width:100%;}
#area_board .area_status ul li em.new{display:inline-block; margin-right:5px; padding:4px 10px; border-radius:50px; background:linear-gradient(to right, #f6bb36 0%, #ff6363 100%); font-size:12px; font-weight:100; color:#fff;}
.neon02{color:#fff; font-size:12px; line-height:12px; text-shadow:0 0 0px #fff;}
.neon02{animation:neon02 1.5s ease infinite; -moz-animation:neon02 1.5s ease infinite; -webkit-animation: neon02 1.5s ease infinite;}
#area_board .area_status ul p{display:inline-block; width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:22px; vertical-align:top; color:#eee;}
#area_board .area_status ul span{position:absolute; top:19px; right:0; color:#eee; font-weight:200;}
#area_board .area_status a > span > i{transition:all 0.2s ease-out 0s;}
#area_board .area_status a > span > i:nth-child(1){background:#fff;}
#area_board .area_status a > span > i:nth-child(2){background:#fff;}

/* PORTFOLIO */
#area_portfolio{}
.btn_more{position:absolute; top:170px; right:0; padding:6px 12px; border:1px solid #348ac7; background:#fff; border-radius:1px;}
.btn_more:hover{background: linear-gradient(to right, #7474bf 0%, #348ac7 100%); border:1px solid transparent;}
.btn_more:hover p{color:#fff;}
.btn_more p{font-size:14px; color:#348ac7;}
#area_portfolio ul{width:100%; padding:60px 0 0;}
#area_portfolio ul:after{content:''; display:block; clear:both;}
#area_portfolio ul li{float:left; width:33.33%;}
#area_portfolio ul li a{position:relative; display:block; overflow:hidden;}
#area_portfolio ul li a:after,
#area_portfolio ul li a:before{content:''; display:block; opacity:0; position:absolute; top:0px; left:0px; width:100%; height:100%; transition:all 0.6s ease 0s;}
#area_portfolio ul li a:after{z-index:2; background:rgba(0,0,0,0.6);}
#area_portfolio ul li a:after{z-index:2; background:rgba(0,0,0,0.6);}
#area_portfolio ul li .img img{transform:scale(1); transition:all 0.6s ease-in 0s;}
#area_portfolio ul li img{overflow:hidden; width:100%; text-align:center;}
#area_portfolio ul li .text{position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; padding-top:33%; text-align:center; color:#fff; opacity:0; }
#area_portfolio ul li .text span{font-size:25px;font-weight:300;}
#area_portfolio ul li .text p{font-size:15px;font-weight:300;color:#fdfdfd;line-height:24px;}
#area_portfolio ul li a:hover:after{opacity:1;}
#area_portfolio ul li a:hover .img img{transform:scale(1.05,1.05);}
#area_portfolio ul li a:hover .text{opacity:1; transform:translateY(50); transition:all 0.6s ease 0s;}

/* CONTACT */
#area_contact{padding:44px 0; background:url(../images/main/bg_contact.jpg) repeat;}
#area_contact .inr{padding:0; width:1100px;}
.title02{text-align:left;}
.title02 span{display:inline-block; width:50px; height:3px; background:#fff;}
.title02 h3{padding: 11px 0 5px; font-size:40px; font-weight:500; color:#fff;}
.title02 p{display:block; padding: 5px 0 0; width:100%; font-size:14px; color:#fff; font-weight:100; line-height:22px; word-break:keep-all;}
#area_contact article{width:100%;}
#area_contact article:after{content:''; display:block; clear:both;}
#area_contact .left{width:35%; float:left;}
#area_contact .left ul{width:100%; margin:25px 0 0 0;}
#area_contact .left ul:after{content:''; display:block; clear:both;}
#area_contact .left ul li{padding:13px 10px; border-top:1px solid #303030; border-bottom:1px solid #303030;}
#area_contact .left ul li:last-child{border-top:0;}
#area_contact .left ul li .icon{float:left; width:50px; height:47px; padding:23px 40px;}
#area_contact .left ul li .icon img{width:100%;}
#area_contact .left ul li .icon:after{content:''; display:block; clear:both;}
#area_contact .left ul li .text{padding:0; color:#fff;}
#area_contact .left ul li .text span{font-size:16px; line-height:27px;}
#area_contact .left ul li .text span.tel_color01{font-size:25px; color:#9dd6ff; font-weight:400;}
#area_contact .left ul li .text span.tel_color02{font-size:25px; color:#9598e2; font-weight:400;}
#area_contact .left ul li .text p{line-height:23px;}
#area_contact .left ul li .text span.fax_title{letter-spacing:-0.8px;}
#area_contact .left ul li .text p.time{font-size:16px; font-weight:500;}
#area_contact .left ul li .text p.holiday{font-size:14px; font-weight:300;}
#area_contact .left ul li .text p.info{font-size:13px; font-weight:200;}
#area_contact .right{float:left; margin:10px 0 0; width:65%;}
#area_contact .right .area_form{margin:0 0 0 80px;}
#area_contact .right form{display:inline-block; padding:50px 40px; background:#fff; border-radius:5px;}
#area_contact .request_list .req_tit h3{font-size:20px; margin-bottom:13px; font-weight:600; color:#222;}
#area_contact .request_box li{float:left; margin:0 2% 2% 0; width:49%;}
#area_contact .request_box li.box_phone{margin:0 0 2% 0; width:100%;}
#area_contact .request_box li.box_phone input[type="text"]{width:calc(33% - 6px);}
#area_contact .request_box li:nth-child(2n){margin:0 0 2% 0;}
#area_contact .request_box li:last-child{margin:0 0 0 0; width:100%;}
#area_contact .request_box .box01, .request_box .inputFull{width:100%; height:40px; box-shadow:none; border-radius:2px; border:1px solid #eee; background-color:#fafafa;}
#area_contact .area_form input[type="submit"]{height:40px; border:none; background:linear-gradient(to right, #7474bf 0%, #348ac7 100%); color:#fff;}
::-webkit-input-placeholder { /* 크롬 4–56 */color:#666; font-size:13px;}
:-moz-placeholder { /* 파이어폭스 4–18 */color:#666; font-size:13px;}
::-moz-placeholder { /* 파이어폭스 19–50 */color:#666; font-size:13px;}
:-ms-input-placeholder { /* 인터넷 익스플로러 10+ */color:#666; font-size:13px;}
::placeholder { /* 파이어폭스 51+, 크롬 57+ */color:#666; font-size:13px;}
#area_contact .request_list{width:100%;margin-bottom:1.111rem;display:inline-block;}
#area_contact .request_list .req_form ul{width:100%;}
#area_contact .request_list .req_form li{float:left;}
#area_contact .request_box{width:100%;position:relative;clear:both}
#area_contact .req_form ul{position:relative; display:inline-block;}
#area_contact .req_form input[type=radio]{position:absolute; top:3px; opacity:0; cursor: pointer;}
#area_contact .req_form input[type=radio] + label{padding-left:15px; background: url(../images/main/checkbox_off.png) no-repeat 1px 6px; cursor: pointer;}
#area_contact .req_form input[type=radio]:checked + label{padding-left:15px; background: url(../images/main/checkbox_on.png) no-repeat 1px 6px; color:#358ac7;}
#area_contact input[type=checkbox] + label, input[type=radio] + label{margin-right:10px;}
#area_contact input[type="submit"]{margin-top:2%; width:100%;}

/*오른쪽메뉴*/
nav.area_aside{position:absolute; top:0; right:0; bottom:0; z-index:99; width:98px;}
nav.area_aside:before{content:""; position:fixed; top:0; right:98px; display:block; width:1px; height:355px; margin-left:-.5px; background-color:rgba(188,188,188,0.3);}
nav.area_aside:after{content: ""; position:fixed; bottom:0; right:98px; display:block; width:1px; height:355px; margin-left:-.5px; background-color:rgba(188,188,188,0.3);}
nav.area_aside ul{position:fixed; top:40.5%; right:0; width:101px;}
nav.area_aside ul li{margin:14px 0; }
nav.area_aside ul li a{display:block; text-align:left;} 
nav.area_aside ul li p{display:none; font-size:12px; vertical-align:middle; color:rgba(188,188,188,0.3);}
nav.area_aside ul li .dot{display:inline-block; margin-right:5px; width:6px; height:6px; border-radius:50px; background:#dbdbdb;}
nav.area_aside ul li.active .dot{background:#00a5db;}
nav.area_aside ul li.active p{display:inline-block;}
.btn_contact{display:inline-block; position:fixed; right:50px; top:100px; z-index: 1;animation:bounce2 2s infinite;}
.btn_contact .area_icon_contact{box-sizing:border-box; width:85px; height:85px; background:#ffa500;  border-radius:100px; }
.area_icon_contact.kakaoch{margin-bottom:10px; background:#e55531;}
.area_icon_contact.call{margin-top:10px; background:#fd7958;}
.area_icon_contact.kakao{margin-top:10px; background:#fae300;}
.area_icon_contact.kakao p{color:#391b1b; font-weight:bold;}
.area_icon_contact{text-align:center; padding:10px; position: relative; }
.area_icon_contact img{width:30px; margin-top:8px;}
.area_icon_contact p{padding: 4px 0 0; font-size:12px; color:#fff; font-weight:300;}

@media (width >= 1280px) {
	.area_icon_contact.call {
		&::before {
			position: absolute;
			inset: 0;
			align-content: center;
			padding: 10px;
			text-align: center;
			color: #fff;
			background: #fd7958;
			border-radius: 50%;
			backface-visibility: hidden;
			content: "070-8633-6193";
			pointer-events: none;
		}
	}
}

@media (width < 1280px) {
	.hidden-lg{
		display: none;
	}
}
@media (width >= 1280px) {
	.visible-lg{
		display: none;
	}
}

/*모바일메뉴*/
.btn_open_menu{position:fixed; top:0; right:0; z-index:9999; width:35px; height:30px; margin:2rem; cursor:pointer;}
.btn_open_menu .btn_open_menu__line{position:relative; width:100%; height:1px; background:#fff; transition: 1s ease;}
.btn_open_menu .btn_open_menu__line:nth-of-type(2) {margin:0.5rem 0;}
.btn_open_menu .btn_open_menu__line--1{position:absolute;  top:13px; transform:rotate(45deg);}
.btn_open_menu .btn_open_menu__line--2 {display:none;}
.btn_open_menu .btn_open_menu__line--3 {position:absolute; top:13px; transform:rotate(135deg);}
.mobile_gnb{display:block; position:fixed; z-index:9998; top:0; right:-100%; width:100%; height:100vh; background: #348ac7; background: -moz-linear-gradient(-45deg, #348ac7 0%, #7474bf 100%); background:-webkit-linear-gradient(-45deg, #348ac7 0%,#7474bf 100%); background: linear-gradient(135deg, #348ac7 0%,#7474bf 100%); transition:0.6s ease; opacity: 0;}
.mobile_gnb ul{display:inline-block; position:relative; top:50%; padding:0; transform:translateY(-50%);}
.mobile_gnb ul li{list-style: none;}
.mobile_gnb ul li a{display:block; position:relative; width:100%; margin:0 auto; padding:18px; font-size:50px; font-weight:bold; text-align:center; text-decoration:none; color:#fff; overflow:hidden; box-sizing:border-box;}
.mobile_gnb ul li a:hover{color:#fff;}
.mobile_gnb ul li a:after{content: ""; display:block; position:absolute; left:0; bottom: 18px; z-index:-1; width:100%; height:2vh; background-color:#feca3e; -webkit-transition: transform .5s; transition: transform .5s; transform-origin: 0; -webkit-transform: scaleX(0); transform: scaleX(0);}
.mobile_gnb ul li a:hover:after{-webkit-transform:scaleX(1); transform: scaleX(1);}
.mobile_gnb img{display:block; position:absolute; top:3rem; left:50%; width:150px;  padding:0; text-align:center; transform:translatex(-50%);}
.mobile_gnb--open{right:0; opacity:1;}

/* layer pop */
.layerPop{position:absolute; z-index:999;}
.layerPop a{display:block;}
.layerPop a img{width:100%}
.layerPop .btn{padding:3px 10px; background:#292b42; text-align:right;}
.layerPop .btn button{display:inline-block; margin-left:15px; background:none; color:#fff; font-size:12px;}

@-webkit-keyframes line
{
0%{opacity:1;-webkit-transform:scale3d(1, 0, 1);-webkit-transform-origin:center top}
49%{opacity:1;-webkit-transform:scale3d(1, 1, 1);-webkit-transform-origin:center top}
50%{opacity:1;-webkit-transform:scale3d(1, 1, 1);-webkit-transform-origin:center bottom}
99%{opacity:1;-webkit-transform:scale3d(1, 0, 1);-webkit-transform-origin:center bottom}
100%{opacity:0;-webkit-transform:scale3d(1, 0, 1);-webkit-transform-origin:center bottom}
}
@-moz-keyframes line{
0%{opacity:1;-moz-transform:scale3d(1, 0, 1);-moz-transform-origin:center top}
49%{opacity:1;-moz-transform:scale3d(1, 1, 1);-moz-transform-origin:center top}
50%{opacity:1;-moz-transform:scale3d(1, 1, 1);-moz-transform-origin:center bottom}
99%{opacity:1;-moz-transform:scale3d(1, 0, 1);-moz-transform-origin:center bottom}
100%{opacity:0;-moz-transform:scale3d(1, 0, 1);-moz-transform-origin:center bottom}
}
@keyframes line{
0%{opacity:1;-webkit-transform:scale3d(1, 0, 1);-moz-transform:scale3d(1, 0, 1);-ms-transform:scale3d(1, 0, 1);-o-transform:scale3d(1, 0, 1);transform:scale3d(1, 0, 1);-webkit-transform-origin:center top;-moz-transform-origin:center top;-ms-transform-origin:center top;-o-transform-origin:center top;transform-origin:center top}
49%{opacity:1;-webkit-transform:scale3d(1, 1, 1);-moz-transform:scale3d(1, 1, 1);-ms-transform:scale3d(1, 1, 1);-o-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);-webkit-transform-origin:center top;-moz-transform-origin:center top;-ms-transform-origin:center top;-o-transform-origin:center top;transform-origin:center top}
50%{opacity:1;-webkit-transform:scale3d(1, 1, 1);-moz-transform:scale3d(1, 1, 1);-ms-transform:scale3d(1, 1, 1);-o-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;transform-origin:center bottom}
99%{opacity:1;-webkit-transform:scale3d(1, 0, 1);-moz-transform:scale3d(1, 0, 1);-ms-transform:scale3d(1, 0, 1);-o-transform:scale3d(1, 0, 1);transform:scale3d(1, 0, 1);-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;transform-origin:center bottom}
100%{opacity:0;-webkit-transform:scale3d(1, 0, 1);-moz-transform:scale3d(1, 0, 1);-ms-transform:scale3d(1, 0, 1);-o-transform:scale3d(1, 0, 1);transform:scale3d(1, 0, 1);-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;transform-origin:center bottom}
}
@keyframes bounce{0%, 15%, 38%, 60%, 75% {transform: translateY(0);}30%{transform: translateY(10px);}45%{transform: translateY(5px);}}
@keyframes bounce2{0%, 60% {transform: translateY(0);}20%, 80%{transform: translateY(4px);} 40%, 100%{transform: translateY(-2px);}}
@keyframes neon{0%,100% {text-shadow:0 0 3px #fff; transition:all 1.2s; color:#fff; background:#7474bf;} 50%{text-shadow:0 0 3px #fff778; color:#fff778;background:#348ac7;}}
@keyframes neon02{0%,100%{text-shadow:0 0 3px #fff; transition:all 1.2s; color:#fff; background:#ff6363;} 50%{text-shadow: 0 0 3px #fff; color:#fff; background:#f6bb36;}}


@media all and (max-width:1650px){
	nav.area_aside:before, nav.area_aside:after, nav.area_aside ul{display:none;}
	.btn_contact{right:20px;}
	.area_icon_contact{padding:15px 10px;}
	#area_board .area_consulting .area_title{margin:0 5% 0 0;}
	#area_board .area_status .area_title{margin:0 0 0 5%;}
	#area_board .area_consulting ul{padding:0 5% 0 0;}
	#area_board .area_status ul{padding:0 0 0 5%;}
	#area_board .area_title > a{right:5%;}
}
@media all and (max-width:1250px){
	#area_board .inr{width:90%;}
	#area_contact .right .area_form{margin:0 0 0 40px;}
	#area_service ul > li:nth-child(1), #area_service ul > li:nth-child(2), #area_service ul > li:nth-child(3), #area_service ul > li:nth-child(4), #area_service ul > li:nth-child(5){background-position:50% 23%;}
	#area_service ul > li .area_icon{padding:110px 20px 0;}
}
@media all and (max-width:1200px){
	.title02 p br{display:none;}
	#area_contact .left ul li .icon{padding:23px 30px 23px 20px;}
}
@media all and (max-width:1100px){
	#area_contact .left{width:38%;}
	#area_contact .right{width:62%;}
	.req_form input[type=radio] + label{font-size:14px;}
}
@media all and (max-width:1150px){
	#area_portfolio ul li .text{padding-top:31%;}
}
@media all and (max-width:1050px){
	#area_service ul > li:nth-child(1), #area_service ul > li:nth-child(2), #area_service ul > li:nth-child(3), #area_service ul > li:nth-child(4), #area_service ul > li:nth-child(5){background-position:50% 20%;}
	#area_service ul > li .area_icon{padding: 87px 20px 0;}
	#area_service ul > li{height:210px;}
	#area_service ul > li .area_icon{height:210px;}
	#area_service ul > li .area_icon:before, #area_service ul > li .area_icon:after{height:210px;}
	#area_board .area_consulting ul p, #area_board .area_status ul p{width:78%;}
	#area_contact .request_box li.box_phone input[type="text"]{width:calc(33% - 6.5px);}
}
@media all and (max-width:1024px){
	#area_visual .text{top:34%;}
	.btn_contact{top:unset; right:20px; bottom:20px;}
	.area_icon_contact{padding:8px;}
	.area_icon_contact.call{display:block;}
	.btn_contact .area_icon_contact{width:78px; height:78px}
	.area_icon_contact img{margin-top:6px;}
}
@media all and (max-width:1000px){
	#area_board .inr{padding: 60px 0;}
	.btn_more{top:175px;}
}
@media all and (max-width:960px){
	#area_service ul > li:nth-child(1), #area_service ul > li:nth-child(2), #area_service ul > li:nth-child(3), #area_service ul > li:nth-child(4), #area_service ul > li:nth-child(5){background-position:50% 19%;}
	#area_service ul > li .area_icon{padding: 82px 10px 0;}
	#area_service ul > li{height:200px;}
	#area_service ul > li .area_icon{height:200px;}
	#area_service ul > li .area_icon:before, #area_service ul > li .area_icon:after{height:200px;}
	#area_service ul > li .area_icon p{line-height:19px;}
	#area_service ul > li .area_icon{padding:74px 10px 0;}
	#area_contact .left ul{margin:20px 0 0 0;}
}
@media all and (max-width:920px){
	#area_contact .left ul li .icon{padding: 23px 25px 23px 20px;}	
}
@media all and (max-width:900px){
	#area_board .area_consulting ul p, #area_board .area_status ul p{font-size:14px;}
	#area_board .area_consulting ul span{top:13px; padding:5px 13px; font-size:14px;}
	#area_board .area_status ul span{font-size:14px;}
	#area_portfolio ul li .text{padding-top:30%;}
	#area_contact .left ul li .icon{padding: 23px 15px 23px 10px;}	

}
@media all and (max-width:850px){
	#area_contact .left{width:40%;}
	#area_contact .right{width:60%;}
	#area_contact .left ul li .icon{padding: 23px 15px 23px 0;}
	#area_contact .left ul li .text span.tel_color01, #area_contact .left ul li .text span.tel_color02{font-size:24px;}
	#area_contact .right form{padding:50px 25px;}
	#area_contact .right .area_form{margin:0 0 0 30px;}
}
@media all and (max-width:835px){
	#area_visual .text{margin-left:-280px;}
	#area_visual .text h2{font-size:38px;}
	#area_service ul > li:nth-child(1), #area_service ul > li:nth-child(2), #area_service ul > li:nth-child(3), #area_service ul > li:nth-child(4), #area_service ul > li:nth-child(5){background-position:50% 12%;}
	#area_service ul > li .area_icon{padding: 56px 10px 0;}
	#area_service ul > li{height:180px;}
	#area_service ul > li .area_icon{height:180px;}
	#area_service ul > li .area_icon:before, #area_service ul > li .area_icon:after{height:180px;}
	#area_portfolio ul li .text{padding-top:29%;}
	#area_contact .left ul li .text p.info{font-size:12px;}
	#area_contact .left ul li .text p{line-height:22px;}
}
@media all and (max-width:767px){
	.mobile_gnb ul li a{font-size:45px;}
	#area_visual{background:#000 url(../images/main/main_img.jpg)center 0;}
	.area_video{display:none;}
	#area_service ul > li{width:49%; height:245px;}
	#area_service ul > li:nth-child(1), #area_service ul > li:nth-child(2), #area_service ul > li:nth-child(3), #area_service ul > li:nth-child(4), #area_service ul > li:nth-child(5){background-position: 50% 26%;}
	#area_service ul > li .area_icon{padding:111px 20px 0; height:245px;}
	#area_service ul > li .area_icon:before, #area_service ul > li .area_icon:after{height:245px;}
	#area_service ul > li:nth-child(2n){margin:0 0 2% 0;}
	
	.bg_blue{top:50%; left:0; right:0; bottom:0;}
	#area_board .inr{padding:40px 0;}
	#area_board .area_consulting{width:100%;}
	#area_board .area_status{width:100%; background: #34498c;}
	#area_board .area_consulting{margin:0 0 80px 0;}
	#area_board .area_consulting ul{padding:0;}
	#area_board .area_consulting .area_title{margin:0;}
	#area_board .area_status .area_title{margin:0;}
	#area_board .area_status ul{padding:0}
	#area_portfolio ul li{width:50%;}
	#area_contact .left{width:100%;}
	#area_contact .right{width:100%;}
	#area_contact .right .area_form{margin:0;}
	.title02{text-align:center;}
	.title02 p{}
	.title02 p br{display:block;}
	#area_contact .left ul li{width:50%; float:left; box-sizing:border-box;}
	#area_contact .left ul{border-top:1px solid #303030; border-bottom:1px solid #303030;}
	#area_contact .left ul li{border-top:0; border-bottom:0;}
	#area_contact .left ul li:last-child{border-left:1px dashed #303030;}
	#area_contact .left ul li .icon{padding:5px 0 0 0; width:100%; text-align:center;}
	#area_contact .left ul li .icon img{width:15%;}
	#area_contact .left ul li .text{width:100%;}
	#area_contact .left ul li .text{display:inline-block; padding:10px 0 0 0; text-align:center;}
	#area_contact .left ul li .text span.tel_color01, #area_contact .left ul li .text span.tel_color02{font-size:25px;}
	#area_contact .left ul li .text span.tel_color01{line-height: 30px;}
	#area_contact .right{margin: 30px 0 0;}
	#area_contact .right form{padding:35px 25px;}
	.btn_more{padding:10px 40px; top:170px; right:50%; margin-right:-65px;}
	#area_portfolio ul{padding:95px 0 0;}
	#area_contact .request_box li.box_phone input[type="text"]{width:calc(33% - 6px);}
	
	.area_icon_contact{padding:5px;}
	.btn_contact{right:15px; bottom:15px;}
	.btn_contact .area_icon_contact{width:65px; height:65px}
	.area_icon_contact img{width:25px; margin-top:5px;}
	.area_icon_contact p{font-size:11px;}

}

@media all and (max-width:650px){
	#area_visual .text{margin-left:-258px;}
	#area_visual .text h2{font-size:35px;}
	#area_contact .left ul li .icon img{width:18%;}
    
    .layerPop{left:50% !important; transform:translateX(-50%) !important; width:90% !important;}
}

@media all and (max-width:580px){
	.mobile_gnb ul li a{font-size:40px;}
	.title p{font-size:14px;}
	#area_visual .text h2{font-size:30px; line-height: 36px;}
	#area_visual .text h3{font-size:75px;}
	#area_visual .text{margin-left:-221px;}
	.title h3, .title02 h3{font-size:38px;}
	#area_service ul > li:nth-child(1), #area_service ul > li:nth-child(2), #area_service ul > li:nth-child(3), #area_service ul > li:nth-child(4), #area_service ul > li:nth-child(5){background-position: 50% 24%;}
	#area_service ul > li .area_icon{padding: 94px 20px 0;}
	#area_service ul > li{height:215px;}
	#area_service ul > li .area_icon{height:215px;}
	#area_service ul > li .area_icon:before, #area_service ul > li .area_icon:after{height:215px;}
	#area_portfolio ul li .text span{font-size:22px;}
	#area_portfolio ul li .text p{font-size:14px;}
	#area_contact .left ul li .icon img{width:19%;}
	.btn_more{margin-right:-52px; padding:8px 26px; top:169px;}
	#area_portfolio ul{padding:90px 0 0;}
	#area_contact .request_box li.box_phone input[type="text"]{width:calc(33% - 6.5px);}
	.btn_main_call{margin:13px 0 0 0; padding:2px 25px; border-radius: 25px 0 25px 0;}
	.btn_main_call p{margin: 0 0 0 34px; font-size:33px; line-height:48px;}
	.icon_main_call{top:14px; left:9%; width:28px;}
}

@media all and (max-width:550px){
	.btn_contact{right:10px; bottom:10px;}
	.btn_contact .area_icon_contact{width:60px; height:60px;}
	.area_icon_contact img{width:22px; margin-top:5px;}
	.area_icon_contact p{padding:3px 0 0; font-size:10px;}
}
@media all and (max-width:480px){
	.mobile_gnb ul li a{font-size:35px;}
	#area_visual .text h2{font-size:25px;}
	#area_visual .text h3{font-size:70px;}
	#area_visual .text{margin-left:-184px;}
	#area_service ul > li .area_icon span{font-size:17px;}
	#area_service ul > li:nth-child(1), #area_service ul > li:nth-child(2), #area_service ul > li:nth-child(3), #area_service ul > li:nth-child(4), #area_service ul > li:nth-child(5){background-position: 50% 17%;}
	#area_service ul > li .area_icon{padding: 74px 20px 0;}
	#area_service ul > li{height:190px;}
	#area_service ul > li .area_icon{height:190px;}
	#area_service ul > li .area_icon:before, #area_service ul > li .area_icon:after{height:190px;}
	#area_board .area_consulting ul p, #area_board .area_status ul p{width:75%;}
	#area_portfolio ul li .text span{font-size:20px;}
	#area_contact .left ul li{width:100%;}
	#area_contact .left ul li:last-child{border-top:1px dashed #303030; border-left:0;}
	#area_contact .left ul li .icon img{width:12%;}
	.btn_main_call p{margin: 0 0 0 30px; font-size:30px;}
	.icon_main_call{top:15px; width:24px;}
}
@media all and (max-width:420px){
	#area_contact .request_box li.box_phone input[type="text"]{width:calc(33% - 7px);}
}
@media all and (max-width:414px){
	#area_visual .text h2{font-size:20px;}
	#area_visual .text{margin-left:-147px;}
	#area_service ul > li{width:100%;}
	#area_service ul > li:nth-child(2n){margin:0 0 2% 0;}
	#area_service ul > li{height:220px;}
	#area_service ul > li .area_icon{padding: 117px 40px 0; height:220px;}
	#area_service ul > li .area_icon:before, #area_service ul > li .area_icon:after{height:220px;}
	#area_service ul > li:nth-child(1), #area_service ul > li:nth-child(2), #area_service ul > li:nth-child(3), #area_service ul > li:nth-child(4), #area_service ul > li:nth-child(5){background-position: 50% 23%;}
	#area_board .area_consulting ul p, #area_board .area_status ul p{width:70%;}
	#area_portfolio ul li{width:100%;}
	.title02 p br{display:none;}
	#area_contact .right form{padding:25px;}
	.request_box li{margin:0 0 2% 0; width:100%;}
	.btn_main_call p{margin:0 0 0 28px; font-size:28px; line-height:44px;}
	.icon_main_call{top:15px; width:22px;}

}

@media all and (max-width:375px){
	.mobile_gnb ul li a{font-size:30px;}
	.title h3, .title02 h3{font-size:35px;}
	.title p{padding:0;}
	#area_service ul > li:nth-child(1), #area_service ul > li:nth-child(2), #area_service ul > li:nth-child(3), #area_service ul > li:nth-child(4), #area_service ul > li:nth-child(5){background-position: 50% 25%;}
}

@media all and (max-width:340px){
	#area_service ul > li .area_icon{padding: 108px 40px 0;}
}

@media all and (max-width:320px){
	#area_visual .text h2{font-size:18px;}
	#area_visual .text{margin-left:-132px;}
	.title h3, .title02 h3{font-size:32px;}

}