@charset "utf-8";

.area_subvisual{position:relative; width:100%; height:300px; background:url(../images/content/bg_subvisual.jpg) no-repeat 50%; background-size:cover;}

.area_subvisual .inr{position:relative; max-width:1500px; height:100%; margin:0 auto; text-align:center;}
.area_subvisual h2{padding-top:90px; font-size:55px; color:#fff; font-weight:400;}
.area_subvisual p{margin-top:15px; font-size:18px; color:rgba(255, 255, 255, 0.6); font-weight:200; word-break:keep-all;}

#content{padding:50px 0; min-height:500px; overflow:hidden;}
#content .inr,
.inr{max-width:1500px; margin:0 auto;}
.inr2{max-width:1200px; margin:0 auto;}
.tit{position:relative; margin-top:20px; margin-bottom:40px; text-align:center;}
.tit span{display:block; color:#94a7e0; font-family:'Raleway'; font-size:16px; font-weight:700; letter-spacing:1px; word-break:break-word;}
.tit h3{margin-top:5px; color:#222; font-family:'Noto Sans KR'; font-size:45px; font-weight:400; word-break:keep-all;}
.tit p{margin-top:25px; padding:0 20px; color:#555; font-family:'Noto Sans KR'; font-size:18px; font-weight:300; box-sizing:border-box; word-break:keep-all;}
em.img{display:block; background-repeat:no-repeat;}
.mt30{margin-top:30px; padding-bottom:50px;}
.tab_menu{margin-bottom:40px; text-align:center;}
.tab_menu li{position:relative; display:inline-block;}
.tab_menu li a{display:block; padding:8px 15px; font-weight:300; color:#bbb; font-size:16px;}
.tab_menu li a.on{color:#1d3b95;}
.tab_menu li:before{content:''; display:block; position:absolute; top:50%; right:-4px; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#ccc;}
.tab_menu li:last-child:before{display:none;}

/* 인사말 */
.greeting{position:relative; margin-top:30px; padding-bottom:80px;}
.greeting p{color:#555; font-family:'Noto Sans KR'; font-size:18px; font-weight:300; line-height:1.8em; word-break:keep-all;}
.greeting .top{position:relative;}
.greeting .top:before{content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:80%; background:#f9f9f9; z-index:-1;}
.greeting .top .img{height:290px; background-image:url(../images/content/bg_greeting.jpg); background-position:50%;}
.greeting .top .txt{margin-top:50px; padding-bottom:40px; border-bottom:1px solid #aaa;}
.greeting .top .txt h4{color:#333; font-size:35px; font-weight:200; word-break:keep-all;}
.greeting .top .txt h4 > span{font-weight:400;}
.greeting .top .txt h4 > em{color:#174fa1; font-size:42px; font-weight:400;}
.greeting .top .txt p{padding:20px 200px 0 0;}
.greeting .bottom{margin-top:50px;}
.greeting .bottom .con{margin-top:50px;}
.greeting .bottom .txt{float:left; width:calc(100% - 850px);}
.greeting .bottom .txt h4{margin-top:10px; color:#84b3d2; font-family:'Noto Sans KR'; font-size:30px; font-weight:300; word-break:keep-all;}
.greeting .bottom .txt h4 > span{font-weight:400;}
.greeting .bottom .txt h4 > span i{color:#457ea4;}
.greeting .bottom .txt p{margin-top:50px;}
.greeting .bottom .img{float:right; width:645px; height:739px; background-image:url(../images/content/bg_greeting01.jpg);}
.greeting .bottom .ceo span{display:inline-block; margin-left:5px; color:#333; font-family:'Nanum Pen Script'; font-size:48px; font-weight:300;}
.greeting .top .txt:after,
.greeting .bottom .con:after{content:''; display:block; clear:both;}

/* 연혁 */
.history{margin-top:30px;}
.history:after{content:''; display:block; clear:both;}
.history ul{float:left; width:calc(100% - 600px);}
.history ul li{padding:30px 0; border-bottom:1px solid #aaa;}
.history ul li span{display:inline-block; padding-top:5px; padding-right:60px; vertical-align:top; font-size:18px; color:#174fa1;}
.history ul li p{display:inline-block; vertical-align:top;}
.history ul li p em{position:relative; display:block; line-height:2;}
.history .img{float:right; width:540px; height:620px; margin-top:30px; background:url(/images/content/bg_greeting01.jpg)no-repeat 50% 50%; background-size:cover;}

.overview{margin:80px 0;}

/* 찾아오시는길 */
.location{position:relative; margin-top:30px; padding-bottom:50px;}
.location:before{content:''; display:block; position:absolute; left:0; bottom:0; width:100%; height:70%; background:#f9f9f9; z-index:-1;}
.location .map + .txt{margin-top:50px;}
.location h4{color:#333; font-size:35px; font-weight:200; word-break:keep-all;}
.location h4 > span{font-weight:400;}
.location h4 > em{color:#11b5ff; font-weight:400;}
.location ul{margin-top:40px;}
.location li{float:left; width:23%; margin:0 1%;}
.location li.add{margin-left:0;}
.location li.mail{margin-right:0;}
.location li div{padding:30px 10px; border:1px solid #dedede; background:#fff; text-align:center; box-sizing:border-box;}
.location li p{display:inline-block; position:relative; padding-left:25px; color:#333; font-size:18px; font-weight:500; letter-spacing:1px;}
.location li p:before{content:''; display:block; position:absolute; left:0; top:0; width:22px; height:19px; background-repeat:no-repeat;}
.location li.add p:before{background-image:url(/images/content/icon_add.png);}
.location li.tel p:before{background-image:url(/images/content/icon_tel2.png);}
.location li.fax p:before{background-image:url(/images/content/ico_fax.png);}
.location li.mail p:before{background-image:url(/images/content/icon_mail.png);}
.location li span,
.location li a{display:block; margin-top:10px; color:#555; font-family:'Roboto'; font-size:24px; font-weight:400;}
.location li.add span{font-family:'Noto Sans KR'; font-size:18px; font-weight:300;}
.location ul:after{content:''; display:block; clear:both;}
.location .root_daum_roughmap{margin-top:10px; width:100% !important; padding:0; border:0;}

/* 이벤트 */
.event{margin-top:20px;}
.event li{float:left; position:relative; width:23%; margin:30px 1% 0;}
.event li:nth-child(4n + 1){margin-left:0;}
.event li:nth-child(4n + 4){margin-right:0;}
.event li a{display:block; width:100%; border:1px solid #ddd; box-sizing:border-box;}
.event li em.img{width:100%; height:240px; background:#fff url(../images/board/no_image.gif) no-repeat 50% 50%; text-align:center; transition:opacity 0.5s ease-out 0s; overflow:hidden;}
.event li em.img img{height:100%; margin-left:-100%; margin-right:-100%;}
.event li span{display:block; padding:10px; color:#333; font-family:'Noto Sans KR'; font-size:16px; font-weight:400; text-align:center; border-top:1px dashed #ddd; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.event div[class^="state_"]{position:absolute; left:10px; top:10px; width:60px; height:60px; background:#aaa; border-radius:50%;}
.event div.state_ing{background:#f05b6e;}
.event div[class^="state_"] p{padding-top:20px; color:#fff; font-family:'Noto Sans KR'; font-size:15px; font-weight:300; text-align:center; box-sizing:border-box;}
.event ul:after{content:''; display:block; clear:both;}
.search_bbs{padding-bottom:50px;}

/* 자동차종합관리 */
.busi{margin-top:30px; padding:20px 0 80px; background:#f9f9f9;}
.busi li{position:relative; float:left; width:30.66667%; margin:50px 4% 0 0;}
.busi li .img{height:310px; background-position:50%;}
.busi li.busi01 .img{background-image:url(../images/content/img_busi01.jpg);}
.busi li.busi02 .img{background-image:url(../images/content/img_busi02.jpg);}
.busi li.busi03 .img{background-image:url(../images/content/img_busi03.jpg);}
.busi li.busi04 .img{background-image:url(../images/content/img_busi04.jpg);}
.busi li.busi05 .img{background-image:url(../images/content/img_busi05.jpg);}
.busi li.busi06 .img{background-image:url(../images/content/img_busi06.jpg);}
.busi li .txt{background:#fff; padding:30px; box-sizing:border-box; text-align:center;}
.busi li .txt h4{color:#333; font-size:20px; font-weight:400;}
.busi li .txt p{margin-top:15px; color:#555; font-family:'Noto Sans KR'; font-size:16px; font-weight:300; line-height:1.8em; word-break:keep-all;}
.busi li:nth-child(3n){margin-right:0;}
.busi ul:after{content:''; display:block; clear:both;}
.busi li:after{content:''; display:block; position:absolute; top:50%; right:-40px; width:25px; height:16px; background:url(/images/content/icon_arrow.png)no-repeat 50% 50%; transform:translateY(-50%);}
.busi li:nth-child(3n):after{display:none;}

/* 회원서비스 */
div[class^="service0"]{margin-top:50px; padding-bottom:80px;}
div[class^="service0"] .img{height:500px;}
div.service01 .img{background-image:url(../images/content/bg_service01.jpg);}
div.service02 .img{background-image:url(../images/content/bg_service02.jpg);}
div.service03 .img{background-image:url(../images/content/bg_service03.jpg);}
div.service04 .img{background-image:url(../images/content/bg_service04.jpg);}
div[class^="service0"] p{position:relative; margin-top:50px; padding-top:100px; color:#555; font-size:20px; font-weight:300; line-height:1.8em; text-align:center; word-break:keep-all;}
div[class^="service0"] p:before{content:''; display:block; position:absolute; left:50%; top:0; width:72px; height:80px; margin-left:-36px; background-repeat:no-repeat; background-position:0;}
div.service01 p:before{background-image:url(../images/content/ico_service01.png);}
div.service02 p:before{background-image:url(../images/content/ico_service02.png);}
div.service03 p:before{background-image:url(../images/content/ico_service03.png);}
div.service04 p:before{background-image:url(../images/content/ico_service04.png);}

/* 문의사항 */
.question{margin-top:30px;}
.question .top{height:218px; padding:50px 20px; background:url(../images/content/bg_question.jpg) no-repeat 50%; text-align:center; box-sizing:border-box;}
.question .top p{color:#fff; font-size:26px; font-weight:400; }
.question .top p > span{font-family:'Roboto'; font-size:27px; font-weight:700; letter-spacing:2px;}
.question .top em{display:block; margin-top:10px; color:rgba(255, 255, 255, 0.8); font-size:16px; font-weight:300; word-break:keep-all;}
.question .top a{display:inline-block; position:relative; margin-top:25px; padding-left:25px; color:#11b5ff; font-family:'Roboto'; font-size:27px; font-weight:700; letter-spacing:2px;}
.question .top a:before{content:''; display:block; position:absolute; left:0; top:50%; width:11px; height:26px; margin-top:-13px; background:url(../images/content/ico_question.png) no-repeat;}
.question .bottom{margin-top:50px; padding:50px 0 80px; background:#f9f9f9;}
.question .bottom li{float:left; width:49%; min-height:210px; margin:20px 1% 0; padding:30px; background:#fff; box-sizing:border-box;}
.question .bottom li:nth-child(odd){margin-left:0;}
.question .bottom li:nth-child(even){float:right; margin-right:0;}
.question .bottom .ico{float:left; display:block; position:relative; width:115px; height:115px; border-radius:50%; background:#7ab1ff;}
.question .bottom .ico:before{content:''; display:block; position:absolute; left:50%; top:50%; width:69px; height:56px; margin-left:-34.5px; margin-top:-28px; background-repeat:no-repeat; background-position:0;}
.question .bottom li.ques01 .ico:before{background-image:url(../images/content/ico_ques01.png);}
.question .bottom li.ques02 .ico:before{background-image:url(../images/content/ico_ques02.png);}
.question .bottom li.ques03 .ico:before{background-image:url(../images/content/ico_ques03.png);}
.question .bottom li.ques04 .ico:before{background-image:url(../images/content/ico_ques04.png);}
.question .bottom li.ques05 .ico:before{background-image:url(../images/content/ico_ques05.png);}
.question .bottom li.ques06 .ico:before{background-image:url(../images/content/ico_ques06.png);}
.question .bottom li:nth-child(3n + 2) .ico{background:#d2b491;}
.question .bottom li:nth-child(3n + 3) .ico{background:#a2cba8;}
.question .bottom .txt{float:right; width:calc(100% - 150px);}
.question .bottom .txt em{display:block; color:rgba(122, 177, 255, 0.8); font-family:'Tomorrow'; font-size:13px; font-weight:400; letter-spacing:1px;}
.question .bottom li:nth-child(3n + 2) .txt em{color:rgba(210, 180, 145, 0.8);}
.question .bottom li:nth-child(3n + 3) .txt em{color:rgba(162, 203, 168, 0.8);}
.question .bottom .txt p{margin-top:10px; color:#333; font-size:20px; font-weight:400;}
.question .bottom .txt span{display:block; margin-top:10px; color:#555; font-family:'Noto Sans KR'; font-size:16px; font-weight:300; line-height:1.8em; word-break:keep-all;}
.question .bottom ul:after,
.question .bottom li:after{content:''; display:block; clear:both;}

/* 로그인 */
.login_box{margin-top:30px; padding-bottom:50px;}

/* 상세보기 */
.img_box{text-align:center;}
.title_txt{margin:40px 0 20px; font-size:26px; text-align:center;}
.conts .title.is3{margin-top:40px; font-size:26px; color:#333;}
.conts .title .eng{display:inline-block; font-size:1rem; color:#1d3b95;}
.div_wrap{margin:20px 0 0;}
.div_table{padding:20px; background-color:#f5f5f5; border:1px solid #ddd; box-sizing:border-box;}
.bullet_dot{position:relative; padding-left:11px; line-height:1.7; font-size:1rem;}
.bullet_dot:before{content:""; display:block; position:absolute; top:10px; left:0; width:3px; height:3px; background-color:#767676;}

.btn_wrap{margin:30px 0; text-align:center;}
.btn_text{display:inline-block; overflow:hidden; position:relative; min-width:174px; box-sizing:border-box; padding:16px 20px; border:1px solid #333; text-align:center;}
.btn_text span{position:relative; z-index:2; transition:color 300ms; font-size:15px; font-weight:400;}
.btn_text:after{content:''; display:block; position:absolute; left:0; top:0; width:120%; height:100%; transform-origin:right top; transform:translateX(-101%) skewX(-17.62deg); transition:transform 1s cubic-bezier(.165, .84, .44, 1); backface-visibility:hidden; background:#333;}
.btn_text:hover{border-color:#333;}
.btn_text:hover span{color:#fff;}
.btn_text:hover:after{transform:translateX(0) skewX(-17.62deg);}

@media all and (max-width:1600px){
	.area_subvisual{height:100%;}
	.area_subvisual .inr{max-width:100%; padding:80px 20px; box-sizing:border-box;}
	.area_subvisual h2{padding-top:0;}
	#content .inr{max-width:100%; padding:0 30px; box-sizing:border-box;}
	.greeting .top .img{width:100%; background-size:cover;}
	.greeting .bottom .txt p br{display:none;}
	div[class^="service0"] .img{background-size:cover;}
}

@media all and (max-width:1500px){
	.area_subvisual h2{font-size:50px;}
	.area_subvisual p{font-size:16px;}
	.tit{margin-top:0;}
	.tit span{font-size:15px;}
	.tit h3{font-size:40px;}
	.tit p{margin-top:15px; font-size:17px;}
	.greeting .top .txt h4{font-size:30px;}
	.greeting .top .txt h4 > em{font-size:40px;}
	.greeting p{font-size:17px;}
	.greeting .top .txt p br,
	.greeting .bottom .line br{display:none;}
	.greeting .bottom .txt{width:calc(100% - 50%);}
	.greeting .bottom .txt h4{font-size:28px;}
	.greeting .bottom .img{width:45%; background-size:cover;}
	.location h4{font-size:30px;}
	.location li p{font-size:17px;}
	.location li.add span{font-size:16px;}
	.location li span,
	.location li a{font-size:20px;}
	.busi li .txt h4{font-size:18px;}
	.busi li .txt p{margin-top:10px; font-size:15px;}
	div[class^="service0"] .img{height:100%; padding-top:33%;}
	div[class^="service0"] p{font-size:18px;}
	.question .top p{font-size:24px;}
	.question .top p > span{font-size:25px;}
	.question .top em{font-size:15px;}
	.question .top a{font-size:25px;}
	.question .bottom .txt p{font-size:18px;}
	.question .bottom .txt span{font-size:15px;}
	.event li span{font-size:15px;}
}

@media all and (max-width:1200px){
	.area_subvisual h2{font-size:45px;}
	.area_subvisual p{font-size:15px;}
	.busi li{width:48%; margin:50px 4% 0 0 !important;}
    .busi li:after{right:-30px;}
    .busi li:nth-child(2n):after,
    .busi li:last-child:after{display:none;}
    .busi li:nth-child(3):after{display:block;}
	.busi li:nth-child(odd){margin-left:0 !important;}
	.busi li:nth-child(even){margin-right:0 !important;}
	.busi li .img{width:100%; background-size:cover;}
	.event li em.img{height:210px;}
	.event div[class^="state_"]{width:45px; height:45px;}
	.event div[class^="state_"] p{padding-top:12px; font-size:14px;}
}

@media all and (max-width:1024px){
	.area_subvisual .inr{padding:60px 20px;}
	.area_subvisual h2{font-size:40px;}
	.area_subvisual p{font-size:14px;}
	.tit span{font-size:14px;}
	.tit h3{font-size:35px;}
	.tit p{font-size:15px;}
	.greeting .top .txt{margin-top:30px;}
	.greeting .top .txt h4{float:none; font-size:25px;}
	.greeting .top .txt h4 > em{font-size:35px;}
	.greeting .top .txt h4 br{display:none;}
	.greeting p{font-size:15px;}
	.greeting .top .txt p{float:none; width:100%; margin-top:20px;}
	.greeting .bottom .txt h4{font-size:25px;}
	.greeting .bottom .txt p{margin-top:30px;}
	.greeting .bottom .img{height:579px;}
	.location h4{font-size:25px;}
	.location li p{font-size:16px;}
	.location li.add span{font-size:15px;}
	.location li span,
	.location li a{font-size:18px;}
	.busi li .txt h4{font-size:17px;}
	.busi li .txt p{font-size:14px;}
	div[class^="service0"]{margin-top:30px;}
	div[class^="service0"] p{margin-top:30px; font-size:16px;}
	.question .top p{font-size:22px;}
	.question .top p > span{font-size:23px;}
	.question .top em{font-size:14px;}
	.question .top a{font-size:22px;}
	.question .bottom{padding:30px 0 50px;}
	.question .bottom .txt em{font-size:12px;}
	.question .bottom .txt p{font-size:16px;}
	.question .bottom .txt span{font-size:14px;}
	.event{margin-top:0;}
	.event li{width:32%;}
	.event li:nth-child(4n + 1){margin-left:1%;}
	.event li:nth-child(4n + 4){margin-right:1%;}
	.event li:nth-child(3n + 1){margin-left:0}
	.event li:nth-child(3n + 3){margin-right:0}
	.event li{width:32%;}
	.event li span{font-size:14px;}
    
    .history ul{width:50%;}
    .history .img{width:45%; height:500px;}
}

@media all and (max-width:900px){
	.tit span{font-size:13px;}
	.tit h3{font-size:30px;}
	.tit p{margin-top:10px; font-size:14px;}
	.greeting .top .img{height:220px;}
	.greeting .top .txt h4{font-size:22px;}
	.greeting .top .txt h4 > em{font-size:30px;}
	.greeting p{font-size:14px;}
	.greeting .bottom .txt h4{font-size:22px;}
	.greeting .bottom .ceo span{font-size:45px;}
	.location h4{font-size:22px;}
	.location li.add{width:49%; margin:0 2% 20px 0;}
	.location li.tel,
    .location li.mail{width:49%; margin-right:0; margin:0;}
	.location li.fax{width:49%;margin:0 2% 0px 0;}
	.location li p{font-size:15px;}
	.busi li .img{height:270px;}
	.busi li .txt h4{font-size:16px;}
	div[class^="service0"] p{font-size:15px;}
	.question .bottom li{float:none !important; width:100%; min-height:100%; margin:20px 0 0 !important;}
    .tab_menu li a{padding:8px 10px; font-size:15px;}
}

@media all and (max-width:768px){
	.area_subvisual h2{font-size:35px;}
	.greeting .bottom{margin-top:30px;}
	.greeting .bottom .txt{float:none; width:100%;}
	.greeting .bottom .line{padding-bottom:20px;}
	.greeting .bottom .con{margin-top:30px;}
	.greeting .bottom .img{float:none; width:100%; height:100%; margin-top:30px; padding-top:100%;}
	.busi li{float:none; width:100%; margin:30px 0 60px !important;}
    .busi li:after{right:50%; top:inherit; bottom:-30px; margin-right:-8px; transform:rotate(90deg);}
	.busi li .txt{min-height:100%; padding:15px;}
	div[class^="service0"] p br{display:none;}
	.event li em.img{height:180px;}
    .history ul{width:100%; float:none;}
    .history .img{display:none;}
    
    .img_box{position:relative; padding:50% 0 0 0; box-sizing:border-box; overflow:hidden;}
    .img_box img{position:absolute; top:50%; left:50%; max-width:none; height:auto; transform:translate(-50%, -50%);}
    .conts .title.is3{font-size:20px;}
    .bbsView td.conts{}
}

@media all and (max-width:650px){
	.event li{width:49%; margin:20px 1% 0 !important;}
	.event li:nth-child(odd){margin-left:0 !important;}
	.event li:nth-child(even){margin-right:0 !important;}
    .location li.add,
	.location li.tel,
    .location li.mail,
	.location li.fax{width:100%; margin:0 0 20px 0;}
}

@media all and (max-width:500px){
	.area_subvisual h2{font-size:30px;}
	.greeting .top .txt h4{font-size:20px;}
	.greeting .top .txt h4 > em{font-size:25px;}
	.greeting .bottom .txt h4{font-size:18px;}
	.greeting .bottom .ceo span{font-size:40px;}
	.location{padding-bottom:50px;}
	.location h4{font-size:20px; text-align:center;}
	.location li{float:none; width:100% !important; margin:0 0 10px !important;}
	.location li p{font-size:14px;}
	.location li span,
	.location li a{font-size:16px;}
	.busi li .img{height:100%; padding-top:65%;}
	.question .top{height:100%; padding:30px 20px;}
	.question .top p,
	.question .top p > span,
	.question .top a{font-size:20px;}
	.question .bottom .ico{float:none; margin:0 auto;}
	.question .bottom .txt{float:none; width:100%; margin-top:20px; text-align:center;}
}

@media all and (max-width:460px){
	.event li{float:none; width:100%; margin:20px 0 0 !impprtant;}
    .img_box{padding:65% 0 0 0;}
}

@media all and (max-width:400px){
	.location h4 br{display:none;}
}