html{overflow-x:hidden;}
body{overflow-x:hidden;}
body,td,h1,h2,h3,h4,h5,div,p,li,ul,ol,dd,dt,section,input,textarea,select,button{margin:0; padding:0; font-size:15px; color:#000; line-height:1.6em; font-family:"Pretendard", "Poppins", 'Noto Sans KR', sans-serif; font-weight:400; word-break:keep-all; letter-spacing:-0.5;}
ul,ol,li{margin:0; padding:0; list-style:none;}
a, img{border:0px; vertical-align:middle;}
a{text-decoration:none;}
strong{font-weight:500;}
*,:after,:before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#header{position: fixed; top: 0px; background: #fff; width: 100%; z-index: 9999; border-bottom: 1px solid #ddd;}
.headertop{display: table; margin: 0 auto; width: 100%; max-width: 1200px; height: 60px;}
.headertop .logo{float:left; height: 60px;}
.headertop .logo a{color: #2b3456; font-weight: 900; font-size: 2em; line-height: 60px;}
.headertop h1 span{font-size: 15px; color: #5e5e5e; font-weight: 600; padding-left: 5px;}
.headertop h2{float:right; line-height: 60px; color: #5e5e5e; font-size: 1.2em;}
#headcswrap{display: block; width: 100%; position: relative; height: 70px; overflow: hidden; border-top: 1px solid #ddd;}
#headcswrap:before{content:''; position: absolute; width: 35%; background: linear-gradient(to right, #01c9bd, #2c4ad2); border-radius: 0 50px 50px 0; left: 0px; top: 0px; height: 100%; z-index: -1;}
.headcs{}
.headcs ul{display: block; width: 100%; max-width: 1200px; margin: 0 auto;}
.headcs li{float: left;}
.headcs li:nth-child(1){width: 35%;}
.headcs li:nth-child(2){width: 20%;}
.headcs li:nth-child(3){width: 33%;}
.headcs li:nth-child(4){width: 12%;}
.headcs h1{font-size: 1em; color: #fff; margin-top: 8px;}
.headcs h2{color: #fff; font-weight: 800; font-size: 2.3em; margin-top: -13px;}
.headcs h3{color: #2b3456; font-size: 1.3em; font-weight: 800; margin-top: 10px;}
.headcs p{margin-top: -3px;}
.headcs p a{color: #6b6b6b; font-size: 0.9em; padding-left: 4px; letter-spacing: -0.5px; font-weight: 600; margin-top: -2px; display: inline-block;}
.headcs li:nth-child(3) input{width: 45%; float: left; background: #f2f2f2; border-radius: 10px; margin-top: 13px;}
.headcs li:nth-child(3) input:nth-child(1){margin-right: 8px;}
.headcs li:nth-child(4) input{width: 100%; height: 40px; border-radius: 10px; background: linear-gradient(to right, #2c4ad2, #01c9bd); font-size: 1.2em; font-weight: 700; margin-top: 13px; transition:all 0.5s;}
.headcs li:nth-child(4) input:hover{transition:all 0.5s; font-size: 1.3em; }
.headcs li:nth-child(5){display:none;}
.moform{font-size: 1.3em; font-weight: 800; color: #2b3456; line-height: 70px; float: right; padding-right: 50px;}
.moform span{background-image: linear-gradient(to right, #01c9bd, #2c4ad2); -webkit-background-clip: text; color: transparent;}
#overlay_daon{}
#quick_form_daon{}
#online_daon_bt{position:fixed; left:10px; bottom:10px; z-index:9999999999; display: block; width:70px; height:70px; text-align:center; background:#C53428; border:0px; color:#fff; font-weight:bold;}
#online_daon_bt i{font-size:1.2em;}
.daon_q_form {}
.daon_q_form h1{}
.daon_q_form form {position: relative;}
.daon_q_form .btn_submit {}
.daon_q_form .btn_submit:hover {}
.daon_q_form input[type="text"], .daon_q_form select, .daon_q_form textarea {width: 100%; font-size: 1em; border: 1px solid #cccccc; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 8px 10px;}
.daon_q_form table {width: 100%; border-collapse: collapse;font-size: 1em; font-weight: 700; color: #000;}
.daon_q_form th {width: 70px; text-align: left;}
.daon_q_form td {padding: 2px 0;}
.daon_q_agree p {margin: 5px 0; text-transform:uppercase; letter-spacing: -0.04em;}
.daon_q_agree label {display: inline-block; margin: 0 5px; font-weight: 600; vertical-align: baseline;}
.daon_q_agree a {display: inline-block; padding: 3px 14px; background: #403a3a; color: #fff; font-size:0.9em;}
#menuwrap{display:block; width: 100%; padding:130px 0 30px 0; background: url(/theme/hclean/img/maintopbg.png) no-repeat #f6f6f6; background-size: 100%;}
.menu{display: table; width: 100%; max-width: 1000px; margin: 0 auto;}
.menu h1{text-align: center; font-size: 1.5em; line-height: 1.5em; font-weight: 800; color: #2b3456; letter-spacing: -0.5px; padding: 10px 0 0 0; display: flex; flex-direction: row; justify-content: center;}
.menu h1 i{line-height: 1.5em; margin-right: 5px;}
.menu ul{display: table; width: 100%;}
.menu li{width: 50%; float: left; padding: 25px 15px;}
.menu a{display: inline-block; width: 100%; height: 100%;}
.imgwrap{display: block; width: 100%; border-radius: 15px; overflow: hidden; height: 250px;}
.menu img{width: 100%; margin-top: -35px; transition:all 0.7s;}
.menu img:hover{transition:all 0.7s; transform:scale(1.2);}
.menu h2{font-size: 1.5em; color: #333; font-weight: 800; margin-top: 10px; width: 100%; position: relative;}
.menu h2 i{display: inline-block; transition: all 0.5s; opacity: 0; position: absolute; top: 8px; margin-left: 5px;}
.menu li:hover h2 i{transition:all 0.5s; opacity:1; margin-left: 10px;}
.menu p{font-size: 1.2em; color: #333; font-weight:500;}
#reasonwrap{display: inline-block; width: 100%; background: #e8faff; padding:100px 0 130px 0;}
.reason{display: table; width: 100%; max-width: 1200px; margin: 0 auto; text-align: center;}
.reason ul{display: table; width: 100%; background: #fff; margin-top: 20px; padding: 50px; border-radius: 15px; box-shadow: 0px 0px 25px rgba(131, 203, 223, 0.5);}
.reason li{width: 16.6%; float: left; cursor: pointer;}
.reason li:hover .box{border:1px solid #0a92e1; transition:all 0.5s; margin-top:-10px;}
.reason h1{color: #2b3456; position: relative; width: 100%; font-size: 2.5em; letter-spacing: -0.5px; line-height: 1.3em;}
.reason h1 img{position: absolute; left: 50%; transform: translate(-50%, 0px); top: -35px; width: 100%; max-width: 27px;}
.reason p{color: #6d6d6d; font-size: 1em; line-height: 1.3em; margin-top: 20px; font-weight: 500;}
.box{transition:all 0.5s; width: 107px; height: 107px; margin: 0 auto; box-shadow: 0px 0px 25px rgba(131, 203, 223, 0.7); border-radius: 15px; display: flex; flex-direction: column; justify-content: center; position: relative;}
.box img{width: 100%; max-height: 35px; display: block; margin: 0 auto; margin-top: -30px;}
.box h2{color: #2b3456; font-size: 1.25em; font-weight: 700; margin-top: 10px; position: absolute; left: 50%; transform: translate(-50%, 0px); width: 100%; bottom: 10px;}
#footerwrap{display: inline-block; width: 100%; background: #383940; margin-top: -8px; position: relative; z-index: 9999;}
.footermenu{width: 100%; padding: 10px 0; border-bottom: 1px solid rgba(251, 251, 251, 0.3); display: flex;}
.footermenu ul{display: table; width: 100%; max-width: 1200px; margin: 0 auto;}
.footermenu li{float: left; position: relative;}
.footermenu li:nth-child(1){padding-right: 40px;}
.footermenu li:nth-child(1):after{content: ''; background: rgba(251, 251, 251, 0.7); width: 1px; height: 12px; position: absolute; top: 7px; right: 18px;}
.footermenu a{color: rgba(251, 251, 251, 0.7); font-size: 0.9em; transition:all 0.5s;}
.footermenu a:hover{color: rgba(251, 251, 251, 1); transition:all 0.5s;}
.footer{display: flex; width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px 0;}
.footer li{width: 100%; position:relative;}
.footer span:before{content: '·'; position: absolute; left: 0px; top: -5px;}
.footer span{color: rgba(251, 251, 251, 0.7); font-size: 0.9em; padding-right: 30px; padding-left: 8px; position: relative;}
.footer .copy{color: rgba(251, 251, 251, 0.7); font-size: 0.9em; position: relative;}
.adminin{position: absolute; bottom: -1px; right: 0px; color: rgba(251, 251, 251, 0.3);}
.shwrite{position: absolute; top: -115px; right: 10px; background: linear-gradient(to right, #2c4ad2, #01c9bd); color: #fff; width: 40px; height: 40px; border-radius: 100%; display: flex; justify-content: center; flex-direction: column; text-align: center; font-size: 1.5em;}
.shwrite2{position: absolute; top: -70px; right: 10px; background: linear-gradient(to right, #2c4ad2, #01c9bd); color: #fff; width: 40px; height: 40px; border-radius: 100%; display: flex; justify-content: center; flex-direction: column; text-align: center; font-size: 1.5em;}
#subsection1wrap{display: block; width: 100%; position: relative; padding: 130px 0 0 0; background: #f1f1f1;}
#subsection1wrap .subsection1bg{position: absolute; z-index:0; top: 0px; right: 0px;}
.subsection1{display: inline-block; width: 100%; position: relative;}
.subsection1 .subtxttit{color: #2b3456; font-size: 1.3em; font-weight: 700; margin-bottom: 10px; line-height: 1.3em;}
.subsection1 .subtxttit span{color: #6d6d6d; font-weight: 400; font-size: 0.9em; position: relative; padding-left: 20px;}
.subsection1 .subtxttit span:before{content: ''; background: #2b3456; width: 3px; position: absolute; height: 19px; top: 0px; left: 9px;}
.subsection1 ul{display: table; width: 100%; max-width: 1200px; margin:15px auto;}
.subsection1 li{float: left; display: inline-block; padding-right: 50px;}
.subsection1 li strong{display: inline-block; float: left; background: #2b3456; color: #fff; padding: 3px 20px; border-radius: 5px; font-size: 1.2em; font-weight: 700;}
.subsection1 li p{display: inline-block; float: left; font-size: 1.2em; padding-left: 8px; color: #6d6d6d; margin-top: 1px;}
.comenttxt{display: inline-block; width: 100%; font-size: 1.4em; font-weight: 500; margin-bottom: 5px; line-height: 1.3em;}
.slidecon{display: inline-block; width: 100%;}
.slidecon h1{text-align: center; font-size: 1.8em; background: #2b3456; color: #fff; border-radius: 10px 10px 0 0; padding: 5px 0; font-weight: 600; margin-bottom: -5px; margin-top: 20px;}
.slidecon ul{display: inline-block; width: 100%;}
.slidecon li{width: 50%; float: left; padding:8px 0;}
.slidecon li:nth-child(odd){padding-right: 15px;}
.slidecon li:nth-child(even){padding-left: 15px;}
.slidecon img{width: 100%; border-radius: 20px;}
.slideconbox{display: inline-block; width: 99.9%; background: #f9f9f9; border: 1px solid #d7d7d7; text-align: left; padding:10px 30px 12px 30px; border-radius: 15px; margin-top: -10px; margin-bottom: 50px;}
.slideconbox h1{font-size: 1.8em; color: #333; font-weight: 800; margin-bottom: -3px;}
.slideconbox p{font-size: 1.4em; color: #333; font-weight:500; line-height: 1.3em; margin-top: 3px;}
.slideconbox p strong{position: relative; display: inline-block; width: 100%; padding-left: 10px; font-weight: 800; line-height: 1.5em;}
.slideconbox p strong:before{content: '·'; position: absolute; left: 0px; top: -2px;}
.slideconbox p strong b{font-weight: 800; float: left;}
.slideconbox p strong span{font-weight: 400; float: left; padding-left: 10px;}
.moformlist{text-align: center; padding: 0 50px; margin-bottom: 100px; display: inline-block; width: 100%;}
.moformlist h1{font-size: 2em; color: #2b3456; font-weight: 900;}
.moformlist p{font-size: 1.2em; margin: 10px 0 40px 0;}
.moformlist a{padding-left: 5px;}
.moformlist ul{display: inline-block; width: 50%;}
.moformlist li{display: inline-block; width: 100%;}
.moformlist li input{border-radius: 5px; margin-bottom: 15px;}
.moformlist .moformlistsubmit{width: 50%; font-size: 1.2em; padding: 10px 0; background: linear-gradient(to right, #01c9bd, #2c4ad2); font-weight: 600; margin-top: 30px;}
.submenu{display: inline-block; width: 100%; background: #fff; border-bottom: 1px solid #ddd; height: 60px; margin-bottom: -8px; position: fixed; z-index:9999;}
.submenu ul{display: block; width: 100%; max-width: 1200px; margin: 0 auto;}
.submenu1{width: 30%; float: left;}
.submenu1 a{color: #2b3456; font-weight: 900; font-size: 2em; line-height: 60px;}
.submenu1 span{font-size: 15px; color: #5e5e5e; font-weight: 600; padding-left: 5px;}
.submenu2{width: 70%; float: left;}
.submenu2 ul{display: inline-block; width: 100%;}
.submenu2 li{width: 16.6%; float: left; text-align: center;}
.submenu2 a{font-size: 1.2em; line-height: 60px; font-weight: 600; color: #5e5e5e; transition:all 0.5s; width: 100%; height: 100%; display: block;}
.submenu2 li:hover a{transition:all 0.5s; color:#fff;}
.submenu2 li:hover{background:#2b3456; transition:all 0.5s;}
.menu-toggle{display:none;}
.subbottomtxt{display: inline-block; width: 100%; background: #e8faff; text-align: center; padding: 80px 0; position: relative; z-index: 99;}
.subbottomtxt i{font-size: 3em; background: linear-gradient(to right, #01c9bd, #2c4ad2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.subbottomtxt h1{font-size: 1.3em; font-weight: 800; color: #2b3456;}
.subbottomtxt p{font-size: 1.2em; font-weight: 500; width: 50%; display: table; margin: 0 auto; line-height: 1.3em;}
.subbottomtxt h2{font-size:1.8em; color: #2b3456; font-weight: 600; width: 50%; display: table; margin:0 auto; line-height: 1.3em;}
.subbottomtxt h2 b{background: rgba(1, 201, 189, 0.2); font-weight: 800; padding: 0 10px; border-radius: 5px;}
.call{display:none; background: linear-gradient(to right, #01c9bd, #2c4ad2); width: 100%; text-align: center; position: fixed; bottom: 0px; z-index: 9999;}
.call a{padding-bottom: 5px; display: inline-block; width: 100%;}
.call i{font-size: 0.7em; background: #fff; border-radius: 100%; color: #2b3456; padding: 5px; width: 30px; height: 30px; margin-top: 10px;}
.call p{color: #fff; display: flex; margin: 0 auto; flex-direction: row; justify-content: center; font-weight: 900; font-size: 2em; margin-left: 8px;}
.call span{margin-left: 5px;}
.call h1{color: #fff; margin-top: -10px; margin-left: 10px;}
.shprivacy{display: inline-block; width: 100%; margin-bottom: 50px; position: relative; padding: 0 50px;}
.shprivacy ul{display: inline-block; margin: 20px 0;}
.shprivacy li{font-size: 16px; font-weight: 400; word-break: keep-all; line-height: 25px; display: inline-block; width: 100%; padding: 5px 0; color: #333; letter-spacing: -1px;}
.shprivacy img{float: left;}
.logoico{width: 100%; max-width: 30px; margin-right: 8px; margin-top: -3px;}
.shprivacy h1{font-size: 18px; font-weight: 600; color: #16487b; letter-spacing: -1px;}
.shprivacy h2{font-weight: 400; color: #333; font-size: 16px; text-align: left;}
.shprivacy p{display: inline-block; width: 100%; border: 1px solid #ddd; border-radius: 30px; padding: 20px 30px; word-break: keep-all; color: #333; font-weight: 400;}
.shprivacy span{display: inline-block; width: 100%; padding: 3px 0; word-break: keep-all; font-size: 16px;}
.emailtxt{display: inline-block; width: 100%; margin-bottom: 50px; position: relative; padding: 0 50px;}
.emailtxt ul{display: inline-block; margin: 20px 0;}
.emailtxt li{display: inline-block; width: 100%; padding: 5px 0;}
.emailtxt li:nth-child(1) p{color: #980000;}
.emailtxt p{font-size: 16px; font-weight: 400;}
.emailtxt p span:nth-child(1){float: left; width: 2%; display: inline-block;}
.emailtxt p span:nth-child(2){float: left; width: 98%; display: inline-block;}
.fadein {
opacity: 0;
transition: all 1.5s;
transform: translate(0, 100px);
}
.fadein.visible {
opacity: 1;
transform: translate(0, 0);
}
.pcview{display:block !important;}
.moview{display:none !important;}
@media all and (max-width:1200px){
.headertop{padding: 0 50px;}
#headcswrap:before{width: 50%;}
.headcs li:nth-child(2), .headcs li:nth-child(3), .headcs li:nth-child(4){display:none;}
.headcs li:nth-child(5){display:block;}
.headcs li{width: 50% !important;}
.headcs li:nth-child(1){padding-left: 50px; position: relative; z-index: 2;}
#headcswrap{background: #eaf7ff; display: none;}
#headcswrap:before{z-index: 1;}
#reasonwrap{padding:100px 50px;}
.footermenu{padding: 5px 50px;}
.footer{padding: 10px 50px;}
.subsection1{padding: 0 50px;}
.submenu ul{padding: 0 50px;}
.submenu2 ul{padding: 0px !important;}
#menuwrap{padding: 80px 0 120px 0;}
.subbottomtxt p{width: 60%;}
.subbottomtxt h2{width: 60%;}
.call{display:block}
#footerwrap{padding-bottom: 70px;}
}
@media all and (max-width:1024px){
#menuwrap{padding:50px;}
.subbottomtxt p{width: 70%;}
.subbottomtxt h2{width: 70%;}
}
@media all and (max-width:912px){
.menu li{width: 100%; padding: 25px 0px;}
.imgwrap{height: 350px;}
.reason li{width: 33.3%;}
.reason li:nth-child(1), .reason li:nth-child(2), .reason li:nth-child(3){margin-bottom:50px;}
.subsection1 li{padding-right: 0; width: 100%; margin-bottom: 8px;}
}
@media all and (max-width:768px){
#menuwrap {background-size: 200%;}
.menu-toggle {display: block; font-size: 1.4em; background: #2b3456; color: #fff; border: none; padding:5px 15px; cursor: pointer; position: absolute; top: 7px; right:50px; border-radius: 4px; z-index: 1000; }
.submenu2 {position: fixed; top: 0; right: 0; width: 230px; height: 100%; background: #333; box-shadow: -2px 0 5px rgba(0,0,0,0.1); transform: translateX(100%); transition: transform 0.3s ease; padding-top: 1.5em; margin-top: 0; }
.submenu.open .submenu2 {transform: translateX(0); }
.submenu2 li{width:100%; padding-left:30px; text-align: left; border-bottom: 1px solid rgba(251, 251, 251, 0.2);}
.submenu2 ul{margin-top: 30px;}
.submenu2 a{color:#fff;}
.submenu.open .menu-toggle{right: 20px;}
.subbottomtxt p{width: 80%;}
.subbottomtxt h2{width: 80%;}
.slideconbox{padding: 10px 15px 12px 15px;}
}
@media all and (max-width:540px){
.moform{font-size: 1.2em;}
#menuwrap {background-size: 300%;}
.imgwrap{height: 250px;}
.reason ul{padding: 50px 20px;}
.reason li{width: 50%; margin-bottom: 30px;}
.reason li:nth-child(1), .reason li:nth-child(2), .reason li:nth-child(3){margin-bottom: 30px;}
.reason li:nth-child(5), .reason li:nth-child(6){margin-bottom:0px;}
.footermenu ul{display: flex; justify-content: center;}
.footer span{font-size: 0.75em; padding-right: 10px;}
.footer li{text-align: center; margin: -3px 0; line-height: normal;}
.footer li span:last-child{padding-right:0;}
.footer span:before{left: unset; top: -1px; margin-left: -5px;}
.footer .copy{text-align: center; font-size: 0.75em; margin-top: 5px;}
.moformlist ul{width: 80%;}
.moformlist{padding: 0 20px;}
#subsection1wrap{padding: 110px 0 0 0;}
.slidecon li{width: 100%;}
.slidecon li:nth-child(odd){padding-right: 0;}
.slidecon li:nth-child(even){padding-left: 0;}
.reason h1{line-height: 1.3em;}
.pcview{display:none !important;}
.moview{display:block !important;}
.emailtxt p span:nth-child(1){width: 8%;}
.emailtxt p span:nth-child(2){width: 92%;}
}
@media all and (max-width:414px){
.headertop{padding: 0 20px; overflow: hidden;}
.headcs li:nth-child(1){padding-left: 20px;}
.moform{padding-right: 20px;}
.headertop h2{font-size: 1.1em; overflow: hidden; height: 60px; line-height: 67px;}
.headcs h1{font-size: 0.9em;}
.headcs h2{font-size: 1.9em; margin-top: -10px;}
.moform{line-height: 1.2em; text-align: right; margin-top: 13px;}
#menuwrap{padding: 50px 20px;}
.menu img{margin-top: 0;}
#reasonwrap{padding:80px 20px;}
.footermenu{padding:5px 20px;}
.footer{padding: 10px 20px;}
.subsection1{padding: 0 20px;}
.submenu ul{padding: 0 20px;}
.menu-toggle{right: 20px;}
.subbottomtxt p{width: 90%;}
.subbottomtxt h2{width: 90%; font-size: 1.8em;}
}
@media all and (max-width:393px){
.imgwrap{height: 230px;}
.moformlist ul{width: 100%;}
.reason h1{line-height: 1.3em;}
}
@media all and (max-width:375px){
.imgwrap{height: 200px;}
.reason h1{font-size: 2.3em;}
}
@media all and (max-width:360px){
.headertop .logo a{font-size: 1.7em;}
.headertop h2{font-size: 0.9em;}
.headcs h2{font-size: 1.6em; margin-top: -5px;}
.moform{font-size: 1em; margin-top: 17px;}
.menu h2{font-size: 1.3em;}
.reason li{height: 190px;}
.submenu1 a{font-size: 1.7em;}
}
@media all and (max-width:280px){
.headertop .logo a{margin-top: -6px; display: block;}
.headertop h1 span{margin-top: -40px; padding-left: 0; display: block;}
.headcs h2{font-size: 1.3em;}
.headcs h1{font-size: 0.9em; margin-top: 12px;}
.imgwrap{height: 170px;}
.reason h1{font-size: 2em;}
.reason li{width: 100%; height: auto;}
.reason li:nth-child(5){margin-bottom: 30px;}
.submenu1 a{margin-top: -6px; display: block;}
.submenu1 a span{margin-top: -40px; padding-left: 0; display: block;}
}