@charset "UTF-8";
/* CSS Document */

*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Font */
@import url("http://fonts.googleapis.com/earlyaccess/notosanskr.css");

/* Reset */
html,body{width:100%;height:100%}
html{overflow-y:scroll}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button,img,iframe,legend,input,textarea,button,select{margin:0; padding:0}
body,h1,h2,h3,h4,div,p,a,input,textarea,button,select{font-family: "Noto Sans KR", sans-serif;}
body{background-color:#ffffff;*word-break:break-all;-ms-word-break:break-all}
li{list-style:none}
img,fieldset,form{border:0 none}
input,select,button{vertical-align:middle}
button{cursor:pointer}
a:focus{outline:none}
input:focus{outline:none}
a{border:none; outline:none; text-decoration:none !important; color:#464646;}
a:hover{color:#369;text-decoration:underline}
a img{border:0 none}
hr{display:none}
table{border-collapse:collapse;border-spacing:0}
form {border:0 none; background:none; margin:0; padding:0}
legend {display:none}

/* HTML5 */
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object {display:block}

/* Layout */
.wrap {width: 100%; min-width: 1240px}
.header {width: 100%; margin: 0 auto; font-size: 0; position: fixed; z-index: 100; }
.gnb {width: 1180px; text-align: center; line-height: 95px; margin: 0 auto}
.min {line-height: 50px !important; z-index: 999; margin-top:-215px;}
.gnb li {width: 191px; height: 100%; margin-right: 1px;  display: inline-block; background: #cccccc;
    position: relative; vertical-align: top}
.gnb li:first-child {width:220px;}
.gnb li:last-child {width: 191px; margin-right: 0 !important;}
.gnb li li:first-child {width:auto !important;}
.gnb li a {width: 100%; height: 100%; color: #FFF; font-size: 16px; font-weight: 600; display: block;
    position:relative; z-index:1; text-transform:uppercase;
	-webkit-transition:padding 0.4s; -moz-transition:padding 0.4s;
	-o-transition:padding 0.4s; transition:padding 0.4s; background:#cccccc;}
.gnb li a img {margin-top:-6px;}
.gnb li a:hover {border-color:transparent #F8C22Etransparent transparent;}
.gnb li a:after {content:''; position:absolute; left:0; top:0; width:100%; height:100%;
    background: #F8C22E; z-index:-1;
    -webkit-transform:scale(0); -moz-transform:scale(0);
	-ms-transform:scale(0); -o-transform:scale(0); transform:scale(0);
	-webkit-transition:0.4s; -moz-transition:0.4s;
	-o-transition:0.4s; transition:0.4s;}
.gnb li a:hover, .gnb li.sfHover a { background:none; color:#333 !important; transition:all .5s; }
.gnb li a:hover:after, .gnb li.sfHover a:after {
	-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1);
	-o-transform:scale(1); transform:scale(1);}
.gnb .submenu {display: none}
.gnb .submenu li {display: block; line-height: 50px; background: #abb5b5 !important;}
.gnb .submenu li a {background:#cdcdcd; font-size: 14px}
.gnb .submenu li a:hover {background:#bdbdbd;}
.gnb .submenu li a:after {background:#bdbdbd;}
.wrapper {}
.container {width: 1180px; margin: 0 auto; position: relative;}
.container.mid {clear: both; overflow: hidden; min-height: 600px; padding: 100px 0 120px 0}
.container .submenu {margin-bottom: 20px; font-size: 0; float:right;}
.container .submenu li {display: inline-block; width:100%; background: url(../images/submenu_sp.png) no-repeat 0 23px}
.container .submenu li a {padding: 0 30px 0 37px; color: #828282; line-height: 60px; display: block; font-size: 20px}
.container .submenu li a:hover {color: #e5345b}
.container .submenu li:first-child {background: none}
.container .submenu li:first-child a {padding: 0 27px 0 0}
.container .h3 {color: #e5345b; font-size: 33px; font-weight: normal; line-height: 70px; border-top: 2px solid #e5345b; margin: 50px 0 27px 0}
.container .h3 .eng {font-weight: 600; display: inline-block; margin: -5px 0 0 0; vertical-align: middle; font-size: 36px}
.footer {width: 100%; height: 294px; background: #4a494b; clear: both; overflow: hidden;}
.footer_container {width: 1180px; margin: 0 auto}
.footer_logo, .footer_info {display: inline-block; vertical-align: top}
.footer_logo {width: 450px;}
.footer_logo img {margin: 109px 0 65px 0}
.footer_logo p {color: #b0b0b0; opacity: 0.5}
.footer_info {color: #ccc; width: 310px; margin: 45px 0 0 50px; line-height: 18px}
.footer_info .title {font-size: 19px; line-height: 50px}
.footer_info img {margin: 0 0 21px 0}
.footer_info p {margin: 0 0 15px 0; clear: both; font-size: 13px; color: #939393}
.footer_info p span {display: inline-block; vertical-align: top;}
.footer_info p span:first-child {width: 60px}

/* Sub Visual */
.sub_visual {background: url(/images/main_bg1.jpg) no-repeat 50% 0 fixed; height: 290px; text-align: center}
.sub_visual .chromach_logo {margin: 0 auto; width: 100%}
.sub_visual .chromach_logo img {margin: 117px 0 0 0}
.sub_visual .title {width: 1180px; height: 110px; background: #4f4f4f; z-index: 50; position: absolute; top: 230px; left: 50%; margin-left: -590px; color: #e5345b; font-size: 13px; line-height: 27px}
.sub_visual .title h2 {font-size: 20px; color: #e5345b; font-weight: normal; margin-top: 28px}

/* Main Menu Active 
body.chromach .chromach, body.service .service, body.customer .customer, body.login .login
    {background: #414042 !important}
body.chromach .chromach .menu:after, body.company .company .menu:after, body.service .service .menu:after, body.customer .customer .menu:after, body.login .login .menu:after
    {background: #414042 !important}*/

.logoback, .logoback:hover, .logoback:after
{background: #414042 !important}

/* Sub Menu Active */
.container.csm1 a.csm1, .container.csm2 a.csm2, .container.csm3 a.csm3, .container.csm4 a.csm4 {color: #e5345b}

/* Body BG */
body.login {background-color: #f7f7f7}

.ingblock {width: 100%; text-align: center; padding: 70px 0 0 0; color: #cdcac4; font-size: 50px}


/* add 171114 */
#subback {width:100%; height:270px; background:#000; color:#fff; text-align:center; padding-top:150px; line-height:20px; background:url(../images/main_bg1.jpg) no-repeat 50% 10% fixed;}
#subback1 {width:100%; height:270px; background:#000; color:#fff; text-align:center; padding-top:150px; line-height:20px; background:url(../images/monu_bg1.jpg) no-repeat 50% 0% fixed;}
#subback2 {width:100%; height:270px; background:#000; color:#fff; text-align:center; padding-top:150px; line-height:20px; background:url(../images/monu_bg2.jpg) no-repeat 50% 0% fixed;}
#subback3 {width:100%; height:270px; background:#000; color:#fff; text-align:center; padding-top:150px; line-height:20px; background:url(../images/monu_bg3.jpg) no-repeat 50% -15% fixed;}
#subback4 {width:100%; height:270px; background:#000; color:#fff; text-align:center; padding-top:150px; line-height:20px; background:url(../images/monu_bg4.jpg) no-repeat 50% -15% fixed;}

#subback1 h1 {color:#fff; font-size:2rem;}
#subback1 h3 {color:#ccc; font-size:1.4rem;}
#subback2 h1 {color:#fff; font-size:2rem;}
#subback2 h3 {color:#ccc; font-size:1.4rem;}
#subback3 h1 {color:#fff; font-size:2rem;}
#subback3 h3 {color:#ccc; font-size:1.4rem;}
#subback4 h1 {color:#fff; font-size:2rem;}
#subback4 h3 {color:#ccc; font-size:1.4rem;}

#subback h1 {color:#fff; font-size:2rem;}
#subback h3 {color:#ccc; font-size:1.4rem;}
#subcont {width:100%; padding:120px 0 0 0;}
.service1_3col {width:100%; border-spacing: 10px 5px;}
.service1_3col td {background:url('/images/service1_3col_transparent.png'); text-align:center; width:30%; /* height:545px;*/ height:475px;}
.service1_3col td.blank {width:3%; background:none;}
.service1_2col {width:100%;}
.service1_2col td {height:500px;}
.service1_2col td.left {text-align:left; padding-left:150px;}
.service1_2col td.right {text-align:right; padding-right:150px;}
.service1_2col .pd {background:#f7f7f7;}
.service1_2col .gray {background:#414042;}
.service1_2col .orange {background:#f8c22e;}

.service4 {float:left; background:#fafafa; border-radius:10px; width:100%; padding:60px 120px;}
.service4 .left {float:left; width:50%; border-right:0px solid #ccc; padding-right:40px;}
.service4 .right {float:left; width:50%; padding-left:40px; border-left:1px solid #ccc;}
.service4 .left .sbj {font-size:28px; font-weight:500;}
.service4 .right .sbj2 {font-size:20px; color:#8d8d8d;}
.service4 .infor {font-size:16px; width:100%;}
.service4 .infor .width40 a {font-size:16px;}
.service4 .infor .width30 {width:30%; padding:10px 0 20px 0; border-bottom:1px solid #ddd;}
.service4 .infor .width40 {width:40%; padding:10px 0 20px 0; border-bottom:1px solid #ddd; text-align:center;}
.service4 .infor .plus {border:1px solid #424242; color:#fff; font-size:12px; padding:0px 6px; border-radius:20px; margin-left:20px;background:#646464}
.service4 .infor .width40 a:hover {color:#e8180c}
.service4 .infor .width40 a:hover .plus {background:#e8180c; border:1px solid #e8180c;}
.service4 .infor .logout {background:#646464; color:#fff; padding:5px 10px;}
.service4 .infor .logout:hover {background:#e8180c;}
.service4 .bigbtn {color:#fff; height:50px; color:#fff; padding:10px 20px; font-size:18px; background:#fac32e url(/images/btn_bul_arr.png) no-repeat 350px 16px; border-radius:10px;}
.service4 .bigbtn a{color:#fff; font-size:18px;}
.service4 .bigbtn:hover {background:#767676 url(/images/btn_bul_arr.png) no-repeat 350px 16px;}
.service4 .bigbtn:hover a {color:#fac32e;}
.service4 .bigbtn2 {color:#fff; height:50px; color:#fff; padding:10px 20px; font-size:18px; background:#767676 url(/images/btn_bul_arr.png) no-repeat 350px 16px; border-radius:10px;}
.service4 .bigbtn2 a{color:#fac32e; font-size:18px;}
.service4 .bigbtn2:hover {background:#fac32e url(/images/btn_bul_arr.png) no-repeat 350px 16px;}
.service4 .bigbtn2:hover a {color:#fff;}

.bigbtn_sqr {float:left; width:49%; background:#767676; font-size:1.2rem; font-weight:500; border-radius:1rem; text-align:center; color:#FAC32E; padding:20px;}
.bigbtn_sqr a {color:#FAC32E;}
.bigbtn_sqr:hover a {color:#fff;}
.bigbtn_sqr:hover {background:#FAC32E;}