@charset "utf-8";
/*header*/
.header-wrap{ position: relative; background-color:#ffffff; }

.login-wrap{text-align: right; width: 1200px; margin: 0 auto; }
.common-gnb-wrap{   width: 100%; position: relative;}

.common-gnb-wrap img.logo01{position: absolute; top:-10px; width: 110px;}
.main-banner-wrap{width: 100%; margin: 0 auto 0;}



/*로그인 row*/
.login-wrap{font-size: 15px; padding-top: 12px;}
.login-wrap span{margin:0 10px;}
.login-wrap a{color:#407BFF;}
.login-wrap a.point{color:#32A753;}
a.login-btn{display: inline-block; padding: 2px 0; background-color:#407BFF; border-radius: 4px 0 0 4px; color: white; width: 90px; text-align: center; margin-left: 10px; }
a.member-btn{display: inline-block; padding: 2px 0; background-color:#32A753; border-radius: 0 4px 4px 0; color: white;  width: 90px;text-align: center;}
/*gnb*/
.navbar{width: 1200px; margin:0 auto;overflow: hidden; background-color: #ffffff; }
.navbar a {float: left;font-size: 16px; color: #333333;text-align: center;
  padding: 14px 16px; text-decoration: none; }
.navbar a.logo{margin-right: 100px;}
.gnb-dropdown:hover .gnb-dropbtn.my-cs { border-bottom:2px solid white; }
.gnb-dropdown .my-cs{display: inline-block; transform: translateX(22px);}
.gnb-dropdown .my-cs a.my{display: inline-block; padding: 7px 10px 0; color:#407BFF; font-size: 16px; }
.gnb-dropdown .my-cs a.cs{display: inline-block; padding: 7px 10px 0; color:#32A753;font-size: 16px;}

.gnb-dropdown { float: left;font-size: 20px; display: inline-block;}
.gnb-dropdown .gnb-dropbtn {border: none;outline: none;font: inherit;margin: 0; background-color: white; padding:3px 0 3px 0; cursor:pointer;  height: 41px; border-bottom:2px solid #ffffff;}
.gnb-dropdown a {font-family:'Noto Sans KR',sans-serif;padding: 4px 22px 4px;font-size: 20px;border: none;outline: none;color: #333333;background-color: white;font: inherit; font-weight: 500;}

/*롤오버와이드메뉴*/
.gnb-dropdown-content {display: none; position: absolute; top:45px; width: 100%;background-color:rgba(255,255,255,1);  left: 0;z-index: 1000; }
.gnb-dropdown:hover .gnb-dropbtn { border-bottom:2px solid #ED1B24;  height: 41px;}
.gnb-dropdown:hover .gnb-dropdown-content { display: block; padding: 4px 0 20px 120px; margin: 0 auto; border-top:1px solid #e0e0e0;}
.gnb-dropdown:hover .row{display: flex; flex-wrap:wrap;}
.gnb-dropdown:hover .gnb-column{display: inline-block; padding: 10px 20px;  height: 100%; flex:20%; max-width: 20%;}
.gnb-dropdown:hover .gnb-column li{display: block; padding: 2px 4px;}
/*롤오버와이드메뉴 1 서브메뉴*/
/*.gnb-column h3 a{ color:#555555; font-size: 18px; text-align:left; padding: 4px 5px; width: 100%;}*/
.gnb-column h3 a{ color:#ED1B24; font-size: 18px; text-align:left; padding: 4px 5px; width: 100%;}

.gnb-column ul{display: inline-block;min-width: 200px;}
/*롤오버와이드메뉴 1-1 서브메뉴*/
.gnb-column li a { float:none; text-align: left;color: #333333;padding: 0px 6px;text-decoration: none;font-weight: 300; }

/*.gnb-column h3:hover a,.gnb-column li:hover a{background-color:rgba(220,220,220,.7);  }*/
.gnb-column:hover h3 a{background-color:#FC5F4D; color: #ffffff;}
.row{width: 1050px; margin: 0 auto;}
.gnb-column ul li:hover a{color:#FC5F4D}
.submenu_add_3{ width: 600px; height: 160px; background-image: url('../img/sub_3_1.png');background-repeat:no-repeat; background-position:10px 10px;  }
.submenu_add_6{ width: 600px; height: 160px; background-image: url('../img/sub_6_1.png');background-repeat:no-repeat; background-position:10px 10px;  }
.submenu_add_7{ width: 600px; height: 160px; background-image: url('../img/sub_7_1.png');background-repeat:no-repeat; background-position:10px 10px;  }
.submenu_add_block{margin:30px 0 0 170px; }
.submenu_add_3 p:nth-child(1),.submenu_add_6 p:nth-child(1),.submenu_add_7 p:nth-child(1){  font-size: 20px; color:#fb5d51;}
.submenu_add_3 p:nth-child(2),.submenu_add_6 p:nth-child(2),.submenu_add_7 p:nth-child(2){ font-size:16px;margin-top: 10px; color:white; background-color:#32A753;display: inline-block; border-left:8px solid #32A753;  border-right:8px solid #32A753; }


/*main-banner*/
.main-banner-back{padding: 0; margin: 0;}
.visual{position: relative;}
.visual .m-b-1{height: 500px;color:#333;  background-image: linear-gradient(to right,rgba(201,11,190,.2),rgba(240,196,181,1));}
.visual .m-b-2{height: 500px;color:#333;  background-image: linear-gradient(to right,rgba(240,196,181,1),rgba(250,195,40,0.3));}
.visual .m-b-3{height: 500px;color:#333;  background-image: linear-gradient(to right,rgba(250,195,40,0.3),rgba(194,218,249,1));}
.visual .m-b-4{height: 500px;color:#333;  background-image: linear-gradient(to right,rgba(194,218,249,1),rgba(201,11,190,.2));padding-top:0px;}
/*.banner-img{ max-height: 470px; float:right; padding-top: 20px; padding-right: 6em;}*/
.banner-img{ max-height: 470px; /* padding-top: 20px; padding-right: 6em;*/display: inline-block; transform: translate(12em,3em);}
.manin-banner-width{width: 1200px;margin:0 auto;}
.visual img{max-height: 376px; }
.banner-text{display: inline-block; transform: translate(9em,-3em); }
.banner-text h3{color:#2a2a2a;}
.visual button{position: absolute; z-index:10; top:49%; transform: translateY(-50%); width: 71px; height: 71px; border-radius: 100%; border:none; }
.visual button:before{font-family: 'xeicon'; color: #fff; font-size:45px;border:none; }
.visual button.slick-prev{left:50px;font-size: 0;color: transparent;}
.visual button.slick-prev:before{content:"\e93d"; font-family: 'xeicon'; }
.visual button.slick-next{right:50px;font-size: 0;color: transparent;}
.visual button.slick-next:before{content: "\e940";font-family: 'xeicon';}
.visual h3{font-size:50px; line-height: 58px; margin: 0.2em 0; }
.visual h4{display: inline; font-size:30px;background-color:#407BFF; color: white; width: 100%; line-height: 30px; padding: 0 20px; font-weight: 300;}
.visual h5{display: inline;font-size:26px;padding: 0 20px; font-weight: 300;color:white; background-color: #32A753; line-height: 42px;}
.main-banner-back .slick-dots li button:before{line-height: 8px; }
/*search*/
.search-wrap{min-width: 100%;  overflow: hidden;
  background-color:#eeeeee;transform: translateY(-14px); z-index: 1000}
.search-box{max-width:970px; margin: 10px auto 10px; }
.search-container { border:3px solid #ED1B24; width: 100%; border-radius: 6px;padding-left: 20px;background-color: white;}
.search-container label{position: relative; top:2px; font-weight: 600;}
.search-container input[type=text] {
  padding: 8px;font-size: 17px; border: none;width: 80%;}
.xi-search:before{font-family : xeicon;font-size: 23px;}
.search-container button {float: right; padding: 8px 10px 8px;background: #ED1B24;font-size: 17px;color:white; border: none;cursor: pointer;border-radius: 0 3px 3px 0;border-right:1px solid #ed1b24;}
.search-container button span{display: inline-block; transform: translateY(-1px);font-size: 18px;}
.search-container button i{transform: translateY(3px);}
/*section*/
.content-wrap{ transform:translateY(-94px)}
.section-wrap{background-color: #E6E0D7;width: 100%;  }
.section{width: 1200px; height: 320px; margin:80px auto 160px; position: relative;padding: 60px 0 0; }
.section-tit{text-align: center; }
.section-tit h2{font-size: 50px; font-weight: 500; color: #53442F;}
.section-tit h5{font-size: 20px; font-weight: 400; color: #53442F;}
.biz-wrap{position:relative; margin-top: 24px;}
.biz-wrap .biz-row{display: flex;flex-wrap: nowrap;}
a.biz-box{display:block; width: 264px; height: 248px;text-align: center;font-size: 30px; border-radius: 6px; color: white; transition: all 500ms ease;box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3); position: relative; }
a.biz-box:hover{transform: translateY(-20px);}
.biz-box:not(.last){margin-right: 48px;}
.biz-box i:before{display: inline-block; font-family : xeicon;font-size: 50px; margin:4px 0;}
.biz-box h4{font-size: 26px;font-weight: 500; margin: 20px 0;}
.biz-box h5{font-size: 16px; font-weight: 400; padding: 16px 0; }

.biz1{ background-color: #FC5F4D;}
.biz1 div{display: inline-block; background-color:#ED1B24; margin-top: 0px; width: 264px; border-radius: 0 0 6px 6px; position: absolute; bottom: 0; left: 0;}
.biz1 i,.biz2 i,.biz3 i{display: inline-block; width: 60px; height: 60px;background-repeat:no-repeat; background-position: center;}
.biz1 i{transform: translateY(-8px);}
.biz2 i,.biz3 i{transform: translateY(-15px);}
.biz1:nth-child(1) i{background-image:url('../img/svg/bg-i-1-1.png');}
.biz1:nth-child(2) i{background-image:url('../img/svg/bg-i-1-2.png');background-position: bottom center;}
.biz1:nth-child(3) i{background-image:url('../img/svg/bg-i-1-3.svg');}
.biz1:nth-child(4) i{background-image:url('../img/svg/bg-i-1-4.svg'); background-position: bottom center;}
.biz2:nth-child(1) i{background-image:url('../img/svg/bg-i-2-1.png');}
.biz2:nth-child(2) i{background-image:url('../img/svg/bg-i-2-2.svg');}
.biz2:nth-child(3) i{background-image:url('../img/svg/bg-i-2-3.png');}
.biz2:nth-child(4) i{background-image:url('../img/svg/bg-i-2-4.svg');}
.biz3:nth-child(1) i{background-image:url('../img/svg/bg-i-3-1.png');background-position: bottom center;}
.biz3:nth-child(2) i{background-image:url('../img/svg/bg-i-3-2.png');}
.biz3:nth-child(3) i{background-image:url('../img/svg/bg-i-3-3.png');}
.biz3:nth-child(4) i{background-image:url('../img/svg/bg-i-3-4.png');}
.biz1:nth-child(1) i img{transform: translate(-29px, 4px); transition: transform 1s;}
.biz1:nth-child(1):hover i img{transform: translate(0px, 4px);}
.biz1:nth-child(2) i img{transform:translateY(-12px) rotateY(0deg);
transition: transform 1s; }
.biz1:nth-child(2):hover i img{transform:translateY(-12px) rotateY(180deg);}
.biz1:nth-child(3) i img{transition: transform 1s; }
.biz1:nth-child(3):hover i img{ transform: rotate(180deg);}
.biz1:nth-child(4) i img{ transition: transform 1s;}
.biz1:nth-child(4):hover i img{ transform: translateY(-30px);}

.biz2:nth-child(1) i img{transform:translateY(6px); opacity: 0; transition: opacity 1s; }
.biz2:nth-child(1):hover i img{ opacity: 1;}
.biz2:nth-child(2) i img{transform: rotate(-40deg);
-webkit-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
transform-origin:bottom center;
-webkit-transform-origin:bottom center;
-ms-transform-origin:bottom center;
-moz-transform-origin:bottom center;
transition: transform 1s; }
.biz2:nth-child(2):hover i img{ transform: rotate(40deg);}

.biz2:nth-child(3) i img{transform: translateY(-10px); transition: transform 1s; }
.biz2:nth-child(3):hover i img{ transform: translateY(-30px);}
.biz2:nth-child(4) i img{transform: translate(-1px, 3px) rotate(0deg); transition: transform 1s;}
.biz2:nth-child(4):hover i img{transform: translate(-1px, 3px) rotate(180deg);}

.biz3:nth-child(1) i img{transform:translate(-28px,-16px) rotateY(0deg); transition:transform 1s; }
.biz3:nth-child(1):hover i img{transform:translate(0px,-16px) rotateY(180deg);}
.biz3:nth-child(2) i img{ opacity:0; transform: translateY(7px); transition:opacity 1s; }
.biz3:nth-child(2):hover i img{ opacity:1;}
.biz3:nth-child(3) i img{transform: translate(30px, -8px); transition: transform 1s; }
.biz3:nth-child(3):hover i img{ transform: translate(14px, -8px);}
.biz3:nth-child(4) i img{transform: translate(-20px, -20px) rotate(0deg); transition: transform 1s;}
.biz3:nth-child(4):hover i img{ transform:translate(-20px, -20px) rotate(180deg);}

.biz1 h4{line-height: 30px;}
.biz2 h4,.biz3 h4{line-height: 60px;}
.biz2{ background-color: #407BFF;}

.biz2 div{display: inline-block; background-color:#2666F5; margin-top: 0px; width: 264px; border-radius: 0 0 6px 6px;position: absolute; bottom: 0; left: 0;}
.biz3{ background-color: #32A753;}

.biz3 div{display: inline-block; background-color:#0A872D; margin-top: 0px; width: 264px; border-radius: 0 0 6px 6px;position: absolute; bottom: 0; left: 0; }
/*작은 롤링배너*/
.small-banner-wrap{ width:100%; background-color: #eeeeee; display: inline-block;  position: relative; }
.small-banner{width: 1200px; height: 580px; margin:0 auto ; position: relative; padding: 60px 0; }
.slick-prev:before, .slick-next:before{color:#AA9E8F !important;}
.s-visual{ width: 1100px; margin:40px auto 0;}
.s-visual img{padding-left: 20px;}
.s-visual .slick-track{height: 340px;}
.s-banner-text-1{position: relative; transform: translate(600px,-280px);}
.s-tit-1{background-color:#32A753; border-radius: 12px; display: inline-block; padding: 3px 12px; font-size: 12px; color: white;margin-bottom: 10px; }
.s-banner-text-1 h4{font-family: 'Noto Serif KR', serif;font-size: 30px;color:#3D2928; line-height: 32px; margin-bottom: 10px; font-weight: 500;}
.s-banner-text-1 h3{font-size: 34px;color:#32A753;}
.s-banner-text-1 h5{font-size: 22px;color:#3D2928;font-weight: 300;line-height: 26px;}
.s-banner-text-2{position: relative; transform: translate(600px,-280px);}
.s-tit-2{background-color:#407BFF; border-radius: 12px; display: inline-block; padding: 3px 12px; font-size: 12px; color: white; margin-bottom: 10px;}
.s-banner-text-2 h4{font-family: 'Noto Serif KR', serif; font-size: 30px;color:#3D2928; line-height: 32px; margin-bottom: 10px;font-weight: 500; text-decoration-line:  }
.s-banner-text-2 h3{font-size: 34px;color:#407BFF;}
.s-banner-text-2 h5{font-size: 22px;color:#3D2928;font-weight: 300;line-height: 26px;}

/*고객센터*/
.csinfo-wrap{background-color: #FFD247; padding: 60px 0; }
.csinfo{width: 1200px; margin: 20px auto 0;}
.tel{width: 597px; display: inline-block; padding-left: 210px;  padding-left: 157px;}
.ars{width: 598px; display: inline-block;padding-left: 36px; }
.csinfo-tit{font-size:32px; color: #ED1B24; display: inline-block; transform: translateY(-56px); font-weight: 500;}
.csinfo-num{display: inline-block; margin-left:10px; }
.ars-num{display: inline-block; margin-left:10px; }
.csinfo-num li{font-size: 18px; color: #53442F;font-weight: 500;margin-bottom: 6px;}
.csinfo-num li label{font-weight: 700;letter-spacing: -1px; }
.csinfo-num li:nth-of-type(1) label{margin-right: 16px;}
.csinfo-num li:nth-of-type(2) label{letter-spacing: 15px;}
.csinfo-num li:nth-of-type(3) label{letter-spacing: 1px;margin-right: 15px;}
.ars-num li{font-size: 18px; color: #53442F; }
.ars-num li label{display: inline-block; padding: 2px 8px 8px; background-color: #53442F; color: white; border-radius: 6px; font-size: 12px;transform: translateY(-4px);margin-right: 6px;}
.csinfo-button-wrap{}
.csinfo-button{margin-top: 20px;position: relative;}
.csinfo-button ul{text-align: center; }
.csinfo-button li{display: inline-block;margin: 5px;}
.csinfo-button a{display: inline-block; width:165px; background-color: white; font-size: 16px; color: #53442F; padding: 10px 0; border-radius: 6px; font-weight: 500; }
.csinfo-button a:hover{ background-color:#53442F; color: white; }

/*공지사항 네임서버*/
.board-wrap{ width: 1200px; margin: 0 auto; padding: 75px 0;}
.notice{ width: 49.8%; display: inline-block; padding: 0 30px 0 40px;}
.nameserver{width: 49.8%; display: inline-block; padding: 0 40px 0 30px;transform: translateY(-51px);}
.board-tit{position: relative; font-size: 40px; border-bottom: 1px solid #9E9E9E; text-align: center; padding-bottom: 6px; color: #53442F; font-weight: 500;}
.btn_more{position: absolute; right: 0;  text-align: right; top:20px;}
.btn_more:hover{background-color:rgba(237,27,36,.2);}
.notice-box li{border-bottom: 1px solid #ddd; padding: 8px 20px;}
.notice-box li span.board-title{width: 55%;}
.notice-box label{display: inline-block; font-weight: 300; color:#ED1B24; width: 20%;text-align: center;}
.notice-box span{display: inline-block; padding-left: 20px;}
.nameserver-box{ display: inline-block;padding-left:40px; margin-top: 16px; }
.nameserver-tit{display: inline-block; padding: 10px 20px; background-color:#ED1B24; color:white; border-radius: 6px; transform: translateY(-10px); margin-right: 10px; font-weight: 500;}
.nameserver-box ul{display: inline-block;}

/*협력사*/
.co-company-wrap{width: 1200px; margin:0px auto 45px;}

/*nav*/
.nav-wrap{width: 100%; background-color: #606060; padding: 40px 0;}
nav{width: 1200px; margin: 0 auto; }
ul.nav{display: flex;}
ul.nav li{width: 160px; margin: 4px auto;color:white; font-weight: 500;}
ul.nav li.update:after{ content: 'UPDATE'; background-color:#ED1B24;font-size: 11px; border-radius: 6px; padding: 0 7px; }
ul.nav li.new:after{ content: 'NEW'; background-color:#32A753;font-size: 11px; border-radius: 6px; padding: 0 10px; }
ul.nav li.best:after{ content: 'BEST'; background-color:#407BFF;font-size: 11px; border-radius: 6px; padding: 0 10px; }
ul.nav li a{color: white; padding:2px 6px; }
ul.nav li a:hover{background-color:rgba(237,27,36,.2);}
ul.navlist{padding-left: 10px;}
ul.navlist li a {color: white; font-size: 14px; font-weight: 300;}

/*footer*/
.footer-wrap{position: relative; width: 1200px; margin:0 auto; padding: 40px 40px; }
footer div{font-size: 14px; margin-bottom: 10px;}
.link{color:#4E4E4E;}
.add,.cominfo,.copyright{color:#a0a0a0;}
.link span{display: inline-block; margin-right:16px;}
.link span:not(.last-no):after{content: '|';font-size: 12px;color:#e0e0e0; margin-left:16px;}
.add span{display: inline-block; margin-right:16px;}
.add span:not(.last-no):after{content: '|';font-size: 12px;color:#e0e0e0; margin-left:16px;}
.cominfo span{display: inline-block; margin-right:16px;}
.cominfo span:not(.last-no):after{content: '|';font-size: 12px;color:#e0e0e0; margin-left:16px;}
.family{position: absolute; right: 0; top: 32px; width: 150px; }
.family-dropbtn {color: gray; padding: 4px 0;font-size: 16px;
background-color: white; border:1px solid #dcdcdc;min-width: 150px;}
.family-dropdown { position: relative; display: inline-block;}
.family-dropdown-content {display: none;position: absolute;
background-color: white; min-width: 150px;/*box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);*/z-index: 1;border:1px solid #dcdcdc;}
.family-dropdown-content a {color: #707070; padding: 2px 0 2px 14px; text-decoration: none;
  display: block;text-align: left; border-bottom:1px solid #eee;}
.family-dropdown-content a:hover {background-color: #ddd;}
.family-dropdown:hover .family-dropdown-content {display: block;}
.family-dropdown:hover .family-dropbtn {}


@media screen and (max-width: 1024px) {
  .section-wrap{width: 123%;}
  .main-banner-wrap{width: 123%;}
  .small-banner-wrap{width: 123%;}
  .csinfo-wrap{width: 123%;}
  .nav-wrap{width: 123%;}
}