@charset 'utf-8';

/************************************ main ***********************************/
#container .container-inner{ width:1200px; margin:0 auto; }


/* main-visual */
.main-visual-wrap{ position:relative; }
.main-visual{ overflow:hidden; position:absolute; top:0; left:0; width:100%; }
.main-visual .visual-rolling{ overflow:hidden; width:100%;}
.main-visual .visual-rolling .item{ position:relative; float:left; width:100%; height:520px; min-width:1200px; background:url(../images/main01.jpg) no-repeat 50% 50%; background-size:cover; text-align:center; }

/* 2019-01-12 */
.btn-two-inline{ z-index: 10; position: absolute; top: 470px; left: 0; width: 100%; text-align: center;}
.btn-two-inline li{display:inline-block; vertical-align: top; margin:0 15px;}
.btn-two-inline li a{display:block; width:250px; padding: 15px 0; border: 1px solid #fff; border-radius: 3px; font-size: 20px; line-height: 24px; color: #fff; font-weight: bold; transition: all .3s; background-color:rgb(5,200,90)}
.btn-two-inline li ~ li a{background-color:rgb(27,70,119)}
.btn-two-inline li a:hover{border: 1px solid #3fc969; background-color: #fff; color:#3fc969;}
.btn-two-inline li ~ li a:hover{background-color:#fff; color:rgb(27,70,119); border-color:rgb(27,70,119)}
.btn-one{display:block; text-align: center; margin-top:50px; width:250px; padding: 15px 0; border: 1px solid #fff; border-radius: 3px; font-size: 20px; line-height: 24px;border: 1px solid #fff; background-color: #5c8dc6; color:#fff; font-weight: bold; transition: all .3s; }
.btn-one:hover{border: 1px solid #fff; background-color: #fff; color:#5c8dc6}

/* 2019-02-05 */
/* pricing */
.front .container-inner.services.pricing .section01{ background:rgb(226,240,246)}
.front .container-inner.services.pricing .section01 h1{color:#274674; line-height:1.2}
.front .container-inner.services.pricing .section01 .txt02.on{color:#264573; margin:15px auto 0}
.tooltip { position: relative; }
.tooltip .tooltiptext { visibility: hidden; width:400px; font-size:.8rem; font-weight:normal; line-height:1.4; background-color: rgba(0,0,0,.8); color: #fff; word-break: keep-all; text-align: center; padding: 30px; position: absolute; bottom:calc(100% + 10px); left:50%; margin-left: -200px; z-index: 1; transition:all .3s; opacity:0;}
.tooltip .tooltiptext:after{content:''; display:block; position:absolute; bottom:-10px; left:50%; margin-left:-10px; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,.8)}
.tooltip:hover .tooltiptext { visibility: visible; opacity:1;}

.tooltip2 { position: relative; }
.tooltip2 .tooltiptext { visibility: hidden; width:400px; font-size:.8rem; font-weight:normal; line-height:1.4; background-color: rgba(0,0,0,.8); color: #fff; word-break: keep-all; text-align: center; padding: 30px; position: absolute; bottom:calc(100% + 10px); left:50%; margin-left: -200px; z-index: 1; transition:all .3s; opacity:0;}
.tooltip2 .tooltiptext:after{content:''; display:block; position:absolute; bottom:-10px; left:50%; margin-left:-10px; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,.8)}
.tooltip2:hover .tooltiptext { visibility: visible; opacity:1;}

/* pricing-field area-box */
.pricing .field2{ overflow:hidden; padding:2px 2px 0 0;}
.pricing .field2 label,
.pricing .field2 button{ vertical-align:middle;}
.pricing .area-box2{ width:920px; text-align:left; margin:0 auto; padding:15px 20px 15px 10px; margin-top:20px; margin-bottom: 26px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; background-color:#fff; font-size:0.875rem; line-height:1.375rem; color:#939393; word-break:keep-all}
.pricing .area-box2 span{ display:inline-block; margin:0 10px 0 20px;}
.pricing .del{  width:13px; height:13px; background:url(../images/icons.png)  -177px -94px no-repeat; background-size:500px auto;}
.pricing .field:last-child{ margin-bottom:0;}
/* section02-pricing */
.pricing .section02--pricing{padding:0 0 70px; background:rgb(226,240,246)}
.tab-menu{text-align: center; font-size:0;}
.tab-menu li{display:inline-block; vertical-align: top; width:390px;}
.tab-menu li a{display:block; text-align: center; font-weight:bold; border:1px solid #5c8dc6; font-size:1.250rem; padding:16px 0; background:transparent; color:#5c8dc6}
.tab-menu li.on a{background:#5c8dc6; color:#fff;}
.tab-menu li.on a:before{content:''; display:inline-block; vertical-align: -3px; width:23px; height:24px; margin-right: 10px; background-image:url(../images/icon_check_w.png); background-size:cover}
.text--small{margin-top:60px; font-size:1.250rem; color:#264573; text-align: center}
/* input--box */
.input--box{margin-top:26px; font-size:0; display:block; text-align: center;}
.input--box > div{display:inline-block; vertical-align: top;}
.input--box input {width:362px; height:66px; line-height:66px; font-size:2rem; color:#264574; caret-color:#264574; border-color:#fff; border-right:none; outline:none;}
.input--box input::placeholder{color:#919191; vertical-align: middle;}
.input--box button{display:inline-block; vertical-align:top; width:136px; height:66px; font-size:1.5rem;  background:#264573; border:1px solid #fff; color:#fff; transition:all .3s; outline:none;}
.input--box button:hover{background:#5c8dc6; border-color:#5c8dc6}

/* pricing section02--pricing tooltip */
.section02--pricing .tooltip .tooltiptext {width:380px; height:100px; top:50%; margin-top:-45px; left:50%; margin-left: -600px; padding: 28px; font-size:1rem; font-weight:normal; line-height:1.4; background-color: rgb(255,255,255); border:1px solid #264574; color: #5c8dc8; word-break: keep-all; text-align: center; position: absolute; z-index: 1; transition:all .3s; opacity:0;}
.section02--pricing .tooltip .tooltiptext strong{color:#264573}
.section02--pricing .tooltip .tooltiptext:before{background:url(../images/check.gif) no-repeat; content:''; display:inline-block; width:16px; height:16px; padding-right:5px;}
.section02--pricing .tooltip .tooltiptext:after{content:''; display:block; position:absolute; top:50%; margin-top:-10px; left:calc(100% + 10.5px); width:16px; height:20px; border:none; background:url(../images/pop_arrow.png) no-repeat 0 0;}
.section02--pricing .tooltip.on .tooltiptext { visibility: visible; opacity:1;}
/*
.section02--pricing .tooltip.on + button{display:none;}
.section02--pricing .tooltip.on + button.on{display:block;}
.section02--pricing .tooltip.on ~ button.on{background-color:#264573; border-color:#fff; }
*/
/* select--jurisdiction */
.select--jurisdiction{display:block;}
.select--jurisdiction > button{display:block; width:500px; margin:40px auto 0; background:#264574; padding:18px 0; font-size:1.5rem; color:#fff; font-weight:bold; /*text-transform: uppercase; */transition:all .3s; border : 1px solid #fff; outline:none;}
.select--jurisdiction > button:hover{background:#fff; color:#264574; border-color:#264574; font-weight:bolder;}
/* pricing-policy */
.section03-1{padding:100px 0; }
.pricing--policy{font-size:0; display:block; text-align: center; max-width:1024px; margin:0 auto; width:100%;}
.pricing--policy > div{display:inline-block; vertical-align: top; width:32.3333%; margin:0 .5%; transition:all .3s;}

/* pricing--header */
.pricing--header{background:#5c8dc8; padding:40px 0;}
.col--3--1, .col--3--2{padding-top:20px;}
.col--3--3 .pricing--header{background:#264574; padding-top:60px;}
.pricing--title{color:#fff; font-size:2.75rem; font-weight: bold;}
/* .col--3--3 .pricing--title{color:#fdff64} */
.pricing--sub{height:50px; display:block; padding-top:3px; color:#fff; font-size:1rem;}
.pricing--sub em{display:inline;}
.pricing--sub strong{font-weight:bold; font-size:2rem; line-height:1;}
.pricing--sub span{display:inline;}
/* .pricing--sub em i.linethrough{font-size:1.5rem; color:#a0a0a0; display:inline-block; } */
.pricing--sub + a{display:block; width:176px; margin:0 auto; padding:10px 0; color:#fff; background:#264574; border :1px solid #fff; border-radius:2px; font-size:1.25rem;  transition: all .3s; border-radius: 3px;}
.pricing--sub + a:hover{background:#fff; color:#264574;}

.col--3--3 .pricing--sub + a{background-color:#5c8dc6; color:#fff}
.pricing--sub + a:hover{background:#fff; color:#264574; border-color:#264574}
.col--3--3 .pricing--sub + a:hover{border-color:#fff; color:#fff; background:#264574;}
/* pricing--body */
.pricing--body ul li{width:100%;  background:#e3f0f8; transition:all .5s; border:1px solid #fff; border-left:none; border-right:none;}
.pricing--body ul li span{display:block; color:#fff; height:90px; display:flex; align-content: center; justify-content: center; flex-direction: column}
.pricing--body ul li span > i{display:block;  font-style:normal; font-size:20px; line-height:.8rem; color:#5c8dc8; font-weight:800; font-family: 'Nanum Gothic'}
.pricing--body ul li i.pers{display:block; font-size:14px; font-style: normal}
.pricing--body ul li i.linethrough{font-size:14px; color:#a0a0a0; display:inline-block; vertical-align: middle;}
.pricing--body ul li span > em{display:block; font-size:14px; margin-top:8px; font-weight:bold; color:#264574; font-weight:600; font-family: 'Nanum Gothic'}
.pricing--body ul li span > em em{ display:inline-block; vertical-align: middle; margin-left:5px; color:#264574; font-size:14px;}

/* pricing--footer */
.pricing--footer .pricing--stitle{background:#5c8dc8; color:#fff; font-size:1.15rem; font-weight:bold; padding :5px 0;}
/* .pricing--footer ul{border:1px solid #fff} */
.pricing--footer ul li{height:40px; background:#e3f0f8; line-height:36px; font-size:0; transition:all .5s; border:1px solid #e3f0f8; border-top:none;}
.pricing--footer ul li ~ li {border-top:1px solid #fff}
.pricing--footer ul li span{display:inline-block; vertical-align:middle; font-size:1rem; color:#5c8dc8}
/*.pricing--footer ul li:nth-of-type(5) span{font-weight:bold;}*/
.pricing--footer ul li em{display:inline-block; vertical-align: middle; width:16px; height:16px; margin-left:5px; font-size:.8rem; color:#fff; background:#b9b9b9; line-height:16px; border-radius:50%; font-weight:bold; cursor:pointer;}
/* section03-2 */
.section03-2{background:#e2f1f6; padding:80px 20px; }
.section03-2 > div{max-width:1024px; margin:0 auto; display:flex; justify-content: space-between }
.section03-2 .tit{text-align:center; color:#264574; font-size:2.750rem; text-transform: uppercase; margin-bottom:40px;}
.qna{ width:46% }
.qna .stit{text-align: center; margin-bottom:30px; border-top:1px solid #264574; border-bottom:1px solid #264574; padding:12px 0 16px; font-weight:bold; font-size:1.750rem; color:#264574; line-height:1;}
/* .qna dl{padding-top:20px;} */
.qna dl dt{cursor:pointer;transition:all .3s;}
.qna dl dt span{color:#5c8dc8; font-size:1rem; font-weight:bold; display:inline-block; vertical-align: middle; margin-left:5px;}
.qna dl dt:before{content:''; display:inline-block; vertical-align: middle; width:10px; height:10px; background:url(../images/plus.png) no-repeat 0 center; transition:all .8s; }
.qna dl.on dt:before{background-image:url(../images/minus.png)}
.qna dl dt:hover:before{transform: rotate(360deg)}
.qna dl dd{color:#5c8dc8; font-size:.8rem;  padding-left:16px; word-break: keep-all; padding-top:10px; visibility:hidden; opacity:0; height:0; transform:translateY(-20%); transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .5s;}
.qna dl.on dd{height:auto; visibility:visible; opacity:1; transform:translateY(0); transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .5s; padding-bottom:30px;}

/* .pricing--body ul li:hover{background-color:#fff; border:1px solid #5c8dc6;  } */
/* .pricing--policy > div:hover .pricing--footer ul li{background-color:#fff; border-color:#5c8dc6}
.pricing--policy > div:hover .pricing--footer ul li ~ li{border-top:none} */

/* js-event */
.js-event{display:none;}
i.linethrough{display:inline-block; text-decoration: line-through; color:#fff; font-style: normal; /*display:none;*/}
.pricing--body ul li i.del{display:inline-block; margin-left:5px;}
.pricing--coupon__3nope .js--coupon--3nope{display:block;}
.pricing--coupon__3add .js--coupon--3add{display:block;}
.pricing--coupon__6nope .js--coupon--6nope{display:block;}
.pricing--coupon__6add .js--coupon--6add{display:block;}
.pricing--annual__nope .js--annual--nope{display:block;}
.pricing--annual__add .js--annual--add{display:block;}
/* section04--pricing */
.section04--pricing{display:block; position:relative; height:495px; background-color:#b8e2f0; overflow:hidden;}
/* .front .section04--pricing .scene{top:auto; bottom:100px;} */
.front .section04--pricing #Wecrestmarketingtools{top:15px}
.section--pricing--text{width:1024px; margin:0 auto; padding-top:90px; position: relative; z-index:2}
.section--pricing--text > div{width:540px; margin-left:auto;}
.section--pricing--text h2{margin-bottom: 20px; font-size: 2.375rem; line-height: 2.750rem; color:#232325;}
.section--pricing--text p{font-size: 1.250rem;line-height: 1.625rem;color:#232325;}
.section--pricing--text a{display:block; width:300px; height:60px; margin-top:40px; line-height:56px; font-size:1.5rem; text-align: center;  background:#264574; color:#fff; border:1px solid #fff; transition:all .3s; border-radius: 5px;}
.section--pricing--text a:hover{background-color:#fff; border-color:#264574; color:#264574}
/* section05--pricing */
.section05--pricing{background:#e6ecea; height:100px;display:flex; align-items: center; justify-content: center; font-size: 1.250rem; color:#5c8dc8}
.section05--pricing a{display:inline-block; margin-left:6px; color:#5c8dc8; text-decoration: underline; transition:all .3s;}
.section05--pricing a:hover{color:#3fc969}

/* 2019-02-16 : account 3ea */
.registration .area-box2{ width:100%; padding:15px 20px 15px 10px; margin-top:20px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; background-color:#f1f1f1; font-size:0.875rem; line-height:1.375rem; color:#939393; word-break:keep-all; display:none;}
.registration .area-box2 span{ display:inline-block; margin:0 10px 0 20px;}
.registration .del{display:inline-block; vertical-align: middle; width:13px; height:13px; background:url(../images/icons.png)  -177px -94px no-repeat; background-size:500px auto;}

.registration {background:#e6ecea;}
.registration .container-inner section{width:100%; max-width:800px; margin:0 auto; padding:50px 2% 100px;}
.registration .container-inner h1.register--logo{margin:0 auto; display:block;text-align: center;}
.register--text{text-align:center; padding-top:35px; font-size:2rem; color:#264574}
.registration .small--text{font-size:1rem; color:#264574; padding-top:20px; text-align: center;}
.registration article{display:block; margin:50px auto 0; width:100%; max-width:586px; background:#fff; color:#264574; padding:40px;}
.registration article h2{font-size:2.375rem; text-align: center; color:#6d98cb}
.registration article h3{font-size:1.9rem; text-align: center; color:#6d98cb}
.registration article .form{padding-top:15px;}
.registration article .form > div{margin-top:15px; width:100%;}
.registration article .form > div input{height:50px; width:100%; color:#264574; caret-color: #264574; outline:none;}
.registration article .form > div input:focus{border:1px solid #264574}
.registration article .form > div.field.field2 label{display:inline-block; color:#939393; font-size:1rem; padding-left:3px;}
.registration article .form > div ul{margin-top:10px;}
.registration article .form > div ul li{margin-top:3px; color:#939393;  position:relative;}
.registration article .form > div ul li strong:before{content:''; display:inline-block; width:4px; height:4px; background:#939393; vertical-align: middle; border-radius: 2px; margin-right:5px; margin-left:5px;}
.registration article .form > div ul li strong{font-weight:900; font-family: 'Nanum Gothic'; color:#939393;  display:inline-block; vertical-align: middle;}
/* .registration article .form > div ul li i{text-decoration: line-through; color:rgb(92,141,198); font-style: normal; margin-right:2px;} */
.registration article .form > div ul li i{font-style:normal; display:inline-block; vertical-align: middle;}
.registration article .form > div ul li > span{color:#264574; font-weight:800; font-family: 'Nanum Gothic'; position:absolute; right:40px; top:0;}
.registration article .form > div ul li  em{color:#939393; font-weight:normal;}

.price--total{display:block; margin-top:10px; padding-top:10px; border-top:1px solid #939393;}
.price--total > div{overflow:hidden;}
.price--total > div ~ div{margin-top:2px;}
.price--total span{display:block; float:left; color:#939393;}
.price--total em{display:block; float:right; padding-right:102px;}
.price--total div:nth-child(2) *{font-weight: bold;}
.price--total div:nth-child(2) em{color: #939393;}

.registration article .form > div ul li .discounts{text-decoration: line-through; color:#b0b0b0; margin-right:5px;}
.registration article .form > div.regi--bottom{margin-top:40px;  border-top:1px solid #939393; padding-top:10px;}
.registration article .form > div.regi--bottom label{margin-top:0;}
.registration article .form > div.regi--bottom .checkbox-1{vertical-align: middle; margin-top:0;}
.regi--bottom strong{color:#939393; font-size:.8rem; font-weight:normal; vertical-align: middle;}
.regi--bottom a{display:inline-block; text-decoration: underline;  position: relative; z-index:1; vertical-align: middle; }
.regi--bottom button{display:block; width:150px; margin-top:15px; margin-right:0; margin-left:auto; text-align: center; padding:12px 0 ; background:#6d98cb; color:#fff; font-size:1.275rem; transition:all .3s; border:1px solid #fff; border-radius:3px;}
.regi--bottom button:hover{color:rgb(92,141,198); border:1px solid rgb(92,141,198); background:#fff;}

@keyframes line--animation {
    0% {fill-rule:evenodd;clip-rule:evenodd;stroke-dasharray: 1000;
        stroke-dashoffset:1000; stroke:#fff; fill:#fff; stroke-width:2px; fill-opacity: 0;}
    100% {fill-rule:evenodd;clip-rule:evenodd; fill-opacity: 1; stroke-dashoffset:0; stroke-width:0;  fill:#fff;}
}

/*e:animation*/
#svg--email path{animation: line--animation 2s; fill:#fff; animation-delay: 1s; animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-fill-mode: both; fill-rule:evenodd;clip-rule:evenodd;stroke-dasharray: 1000;
    stroke-dashoffset:1000;}

/* regSucessModal */
#regSucessModal .modal-dialog{border : 1px solid #d9d9d9}
#regSucessModal .modal-body{padding:0;}
#regSucessModal .welcome--head{background:rgb(92,141,198); text-align: center; padding:35px 0;}
#regSucessModal .welcome--title{font-size:3rem; font-weight:normal; color:rgb(92,141,198)}
#regSucessModal .welcome--text{font-size:1rem;}
#regSucessModal .welcome--text span{font-size:1rem; margin-top:10px; display:block;}
#regSucessModal .welcome--text a{font-weight:bold; color:rgb(92,141,198); text-decoration: underline; transition:all .3s;}
#regSucessModal .welcome--text a:hover{color:#3fc969}
#regSucessModal .welcome--body{padding-top:30px; text-align: center;}
#regSucessModal .modal-footer{text-align: center; padding-bottom:30px;}

/* activeEmailModal */
#activeEmailModal .modal-dialog{border : 1px solid #d9d9d9}
#activeEmailModal .modal-body{padding:0;}
#activeEmailModal .welcome--head{background:rgb(92,141,198); text-align: center; padding:35px 0;}
#activeEmailModal .welcome--title{font-size:3rem; font-weight:normal; color:rgb(92,141,198)}
#activeEmailModal .welcome--text{font-size:1rem;}
#activeEmailModal .welcome--text span{font-size:1rem; margin-top:10px; display:block;}
#activeEmailModal .welcome--text a{font-weight:bold; color:rgb(92,141,198); text-decoration: underline; transition:all .3s;}
#activeEmailModal .welcome--text a:hover{color:#3fc969}
#activeEmailModal .welcome--body{padding-top:30px; text-align: center;}
#activeEmailModal .modal-footer{text-align: center; padding-bottom:30px;}

/* welcomeModal */
#welcomeModal .modal-dialog{border : 1px solid #d9d9d9}
#welcomeModal .modal-body{padding:0;}
#welcomeModal .welcome--head{background:rgb(92,141,198); text-align: center; padding:35px 0;}
#welcomeModal .welcome--title{font-size:3rem; font-weight:normal; color:rgb(92,141,198)}
#welcomeModal .welcome--text{font-size:1rem;}
#welcomeModal .welcome--text span{font-size:1rem; margin-top:10px; display:block;}
#welcomeModal .welcome--text a{font-weight:bold; color:rgb(92,141,198); text-decoration: underline; transition:all .3s;}
#welcomeModal .welcome--text a:hover{color:#3fc969}
#welcomeModal .welcome--body{padding-top:30px; text-align: center;}
#welcomeModal .modal-footer{text-align: center; padding-bottom:30px;}

/* 2019-02-16 edit demo page */
.js-datepicker{display:inline-block !important}
/*.button--upgrade{position: absolute; bottom:-20px; right:0; z-index:2}*/
.button--upgrade__style a{display:block; width:200px; height:30px; line-height:28px; border: 1px solid rgb(5,200,90); border-radius: 3px; font-size: .8rem; text-align: center;  color: #fff; font-weight: bold; transition: all .3s; background-color:rgb(5,200,90); transition:all .3s;}
.button--upgrade__style a:hover{color:#3fc969; background:#fff; border-color:#3fc969}
.button--upgrade__style div{display:block; width:200px; height:30px; line-height:28px; border: 1px solid rgb(5,200,90); border-radius: 3px; font-size: .8rem; text-align: center;  color: #fff; font-weight: bold; transition: all .3s; background-color:rgb(5,200,90); transition:all .3s;}
.button--upgrade__style div:hover{color:#3fc969; background:#fff; border-color:#3fc969}

.page--demo .lnb-wrap{display:none;}
.page--demo .content-wrap{padding:100px 0 !important; width:100% !important; max-width:1024px !important; margin: 0 auto !important;}

/* demo page tooltip */
/* ****** previous white tooltip commented by k(2019-02-17) ***** */
/* .page--demo .tooltip .tooltiptext {width:195px;right:50%; top:50%; margin-top:-28px; left:auto; bottom:auto;  margin-right: -300px; padding: 5px; font-size:1rem; line-height:1.2; font-weight:normal; line-height:1.4; background-color: rgb(255,255,255); border:1px solid #264574; color: #5c8dc8; word-break: keep-all; text-align: center; position: absolute; z-index: 1; transition:all .3s; opacity:0;}
.page--demo .tooltip .tooltiptext strong{color:#264573}
.page--demo .tooltip .tooltiptext:after{content:''; display:block; position:absolute; top:50%; margin-top:-10px; left:auto; right:calc(100%); width:16px; height:20px; border:none; background:url(../images/pop_arrow_l.png) no-repeat 0 0;}
.page--demo .tooltip.on .tooltiptext { visibility: visible; opacity:1;}
.button--link__upgrade{position:absolute; right: 35px; top: 30px;} */
  
.page--demo .tooltip .tooltiptext {width:195px;right:50%; top:50%; margin-top:-23px; left:auto; bottom:auto;  margin-right: -284px; padding: 5px; font-size:1rem; line-height:1.2; font-weight:normal; line-height:1.4; background-color: rgb(255,255,255); border:1px solid #264574; color: #5c8dc8; word-break: keep-all; text-align: center; position: absolute; z-index: 1; transition:all .3s; opacity:0; border:none;}
.page--demo .tooltip .tooltiptext {background:url(../images/demo_bg_right.png); height:46px;}
.page--demo .tooltip .tooltiptext strong{color:#264573}
.page--demo .tooltip .tooltiptext:after{content:''; display:block; position:absolute; top:50%; margin-top:-10px; left:auto; right:calc(100%); width:16px; height:20px; border:none;}
.page--demo .tooltip.on .tooltiptext { visibility: visible; opacity:1;}
.button--link__upgrade{position:absolute; right: 35px; top: 30px;}

.page--demo .tooltip .tooltiptext.tooltip--style__right{ color: #fff; line-height: 1.2; font-size: 14px; padding-left: 15px;}


/* 추가 */
.tooltip2 .tooltiptext {width:195px;right:50%; top:50%; margin-top:-23px; left:auto; bottom:auto;  margin-right: -284px; padding: 5px; font-size:1rem; line-height:1.2; font-weight:normal; line-height:1.4; background-color: rgb(255,255,255); border:1px solid #264574; color: #5c8dc8; word-break: keep-all; text-align: center; position: absolute; z-index: 1; transition:all .3s; opacity:0; border:none;}  
.tooltip2 .tooltiptext {background:url(../images/demo_bg_right.png); height:46px;}
.tooltip2 .tooltiptext strong{color:#264573}
.tooltip2 .tooltiptext:after{content:''; display:block; position:absolute; top:50%; margin-top:-10px; left:auto; right:calc(100%); width:16px; height:20px; border:none;}
.tooltip2.on .tooltiptext { visibility: visible; opacity:1;}

.tooltip2 .tooltiptext.tooltip--style__right{ color: #fff; line-height: 1.2; font-size: 14px; padding-left: 15px;}

/* 
 ****** previous white tooltip commented by k(2019-02-17) *****
.tooltip.tooltip--style__top .tooltiptext{left:auto; right:50%; bottom:auto; top:auto; margin-left:0; margin-top:20px; margin-bottom:0; margin-right:-98px; font-size:.8rem; padding:15px;}
.tooltip.tooltip--style__top .tooltiptext:after{background-image:url(../images/pop_arrow_top.png); top:-6px; left:50%; right:auto; bottom:auto; width:20px; height:16px; margin-left:-10px;}

.tooltip.tooltip--style__top .tooltiptext i{display:block; font-style:normal; text-align: left;  margin-top:2px;}
.tooltip.tooltip--style__top .tooltiptext a{width:100%; margin-top:10px;}
.tooltip.tooltip--style__top .tooltiptext .clo{display:block; width:28px; height:28px; background:url(../images/icons.png)  -170.1px -88px no-repeat; background-size:500px auto; position:absolute; right:-13.5px; top:-13.5px; background-color:#fff; border:1px solid #000; border-radius:50%; padding:6px; cursor:pointer;}
 */

.tooltip.tooltip--style__top .tooltiptext{left:auto; right:50%; bottom:auto; top:auto; margin-left:0; margin-top:5px; margin-bottom:0; margin-right:-98px; font-size:.8rem; padding:20px 25px; border:none;}
.tooltip.tooltip--style__top .tooltiptext{background:url(../images/demo_bg.png) no-repeat; width:195px; height:217px; background-size:195px 217px;}
.tooltip.tooltip--style__top .tooltiptext:after{background:none;}

.tooltip.tooltip--style__top .tooltiptext strong{display:block; padding-top:20px; padding-bottom:5px; font-size:20px; font-weight:bold;  color:#fff; text-align: left}
.tooltip.tooltip--style__top .tooltiptext i{display:block; font-style:normal; text-align: left;  margin-top:0px; font-size:16px; color:#fff;}
.tooltip.tooltip--style__top .tooltiptext a{width:100%; margin-top:10px;}
.tooltip.tooltip--style__top .tooltiptext .clo{display:block; width:20px; height:20px; background:url(../images/ico_x.png) no-repeat; background-size:20px 20px; position:absolute; cursor:pointer; right:7px; top:30px; transition: all .3s;}
.tooltip.tooltip--style__top .tooltiptext .clo:hover{transform: rotate(90deg)}
 
.tooltip2.tooltip--style__top .tooltiptext{left:auto; right:50%; bottom:auto; top:auto; margin-left:0; margin-top:10px; margin-bottom:0; margin-right:-98px; font-size:.8rem; padding:20px 25px; border:none;}
.tooltip2.tooltip--style__top .tooltiptext{background:url(../images/demo_bg.png) no-repeat; width:195px; height:217px; background-size:195px 217px;}
.tooltip2.tooltip--style__top .tooltiptext:after{background:none;}

.tooltip2.tooltip--style__top .tooltiptext strong{display:block; padding-top:20px; padding-bottom:5px; font-size:16px; font-weight:bold;  color:#fff; text-align: left}
.tooltip2.tooltip--style__top .tooltiptext i{display:block; font-style:normal; text-align: left;  margin-top:0px; font-size:16px; color:#fff;}
.tooltip2.tooltip--style__top .tooltiptext a{width:100%; margin-top:10px;}
.tooltip2.tooltip--style__top .tooltiptext .clo{display:block; width:20px; height:20px; background:url(../images/ico_x.png) no-repeat; background-size:20px 20px; position:absolute; cursor:pointer; right:7px; top:30px; transition: all .3s;}
.tooltip2.tooltip--style__top .tooltiptext .clo:hover{transform: rotate(90deg)}


.layer--fixed--contents{display:none; position:fixed; top:50%; left:50%; width:700px; margin-left:-350px; height:200px; background:rgb(92,141,198); border:1px solid #d9d9d9; text-align:center; padding-top:40px; font-size:1rem; color:#fff;}
.layer--fixed--contents strong{font-weight:800;}
.layer--fixed--contents > a{color:#3fc969; transition:all .3s;}
.layer--fixed--contents > a:hover{color:#fafafa;}
.layer--fixed--contents > div{padding-top:20px; text-align: center; display:table; margin:0 auto;}

.layer--fixed--contents.on{display:block;}


/*2018-08-18 : 수정 */
.main-visual .visual-rolling .item span{ position:absolute; top:50%; left:50%;  margin-top:-35px;  font-size:40px; color:#fff; text-align:left;}
.main-visual .visual-rolling .item span em{ position:absolute; margin-top:10px; font-size:16px; line-height:26px;}
.main-visual .visual-rolling .item span.top{ margin-top:-170px; margin-left:-55px; width: 625px;}
.main-visual .visual-rolling .item span.top em{ /*margin-left:20px;*/}
.main-visual .visual-rolling .item span.bottom{ margin-top:45px; margin-left:-300px;width: 625px;}
/*2018-08-18 : 수정 */
.main-visual .visual-rolling .item.main02{ background-image:url(../images/main02.jpg); }

/* main - content */
#container .content-wrap{ width:1200px; margin:100px auto 90px auto; }
#container .content-wrap .cont-box{ overflow:hidden; }
#container .content-wrap .cont-box li{ float:left; height:210px; margin:0 0.833333% 0.833333% 0;  background-color:#5c8dc6; text-align:left;  transition:all .3s;}
#container .content-wrap .cont-box li:hover{background-color:#264574}
#container .content-wrap .cont-box li a{ display:block; width:100%; height:210px; padding:25px 0 0 30px; }
#container .content-wrap .cont-box li.box01{ width:28.33333%; }
#container .content-wrap .cont-box li.box02{ width:22.5%; }
#container .content-wrap .cont-box li.box03{ width:18.333333%; }
#container .content-wrap .cont-box li.box04{ width:28.33333%; margin-right:0; }
#container .content-wrap .cont-box li.box05{ width:40%; }
#container .content-wrap .cont-box li.box06{ width:23.33333333%; }
#container .content-wrap .cont-box li.box07{ width:35%; margin-right:0;}
#container .content-wrap .cont-box li.box08{ width:33.333333%; }
#container .content-wrap .cont-box li.box09{ width:34.16666666%; }
#container .content-wrap .cont-box li.box10{ width:30.833333333%; margin-right:0;}
#container .content-wrap .cont-box li.c-01{ background-color:#b8cdd3; transition:all .3s;}
#container .content-wrap .cont-box li.c-01:hover{background-color:#5c8dc6;}

#container .content-wrap .cont-box li .num{ display:block; font-size:50px; line-height:1; font-weight:bold; color:#fff; }
#container .content-wrap .cont-box li .txt{ display:inline-block; margin-top:15px; font-size:18px; line-height:26px; color:#fff; }



/************************************ login ***********************************/
.login-wrap{ padding-top:100px; text-align:center;}
.login-wrap h2.logo{text-indent:-99999; font-size:0; }
.login-wrap .form-login{ margin-top:45px; margin-bottom:280px;}
.login-wrap .form-login ul li{}
.login-wrap .form-login ul li.id{ margin-bottom:15px;}
.login-wrap .form-login ul li.pw{ margin-bottom:32px;}
.login-wrap .form-login ul li input{ width:500px; height:52px; padding:0 20px; border:1px solid #dadada; font-size:16px;  }
.login-wrap .form-login ul li input::placeholder{ font-size:16px; color:#949494; }
.login-wrap .form-login .btn-login{ display:inline-block; width:500px; height:70px; font-size:24px; line-height:70px; color:#fefefe; font-weight:bold;  background-color:#5c8dc6;}



/************************************ Statistics ***********************************/


.statistics .search-box{ padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid #e4e4e4; }
.statistics .search-box .form-ty.row{ display:table; width:650px; }
.statistics .search-box .form-ty.row label.col-1{ display:table-cell; width:27%;}
.statistics .search-box .form-ty.row .col-2{ display:table-cell; width:42%;}
.statistics .search-box .form-ty.row .col-2 em{  display:block; margin-bottom:15px;}
.statistics .search-box .form-ty.row .col-2 em:last-child{ margin-bottom:0px;}
.statistics .search-box .form-ty.row .col-3{ display:table-cell; width:auto;}


.statistics .search-box .btn-group{ margin-top:30px;}
.statistics .search-box .btn-group button{margin-left:10px;}
.statistics .search-box .btn-group button:first-child{margin-left:0;}

.statistics .search-box .field{ margin-top:40px;}
.statistics .search-box .field label{ display:inline-block; padding-right:40px; font-size:16px; line-height:40px; color:#000; vertical-align:middle; }
.statistics .search-box .field input{ vertical-align:middle; }


.

/************************************ database ***********************************/
.database .form-ty .date.field button{ vertical-align:bottom; }




/************************************ settings ***********************************/
.settings button.btn-ty4{ height:35px; font-weight:normal;}
.settings .search-box .form-ty.row{ display:table; width:700px; margin-top: -20px;}
.settings .search-box .form-ty.row label.col-1{ display:table-cell; width:29%;}
.settings .search-box .form-ty.row .col-2{ display:table-cell; width:42%;}
.settings .search-box .form-ty.row .col-2 em{  display:block; margin-bottom:15px;}
.settings .search-box .form-ty.row .col-2 em:last-child{ margin-bottom:0px;}


/************************************ outbox ***********************************/

.outbox .tbl-ty tbody tr td button{ margin-right:3px;}
.outbox .tbl-ty tbody tr td button:last-child{ margin-right:0;}


/************************************ admin ***********************************/
.admin .search-box .tbl-ty .admin-pw-box { margin-left:5px; text-align:left;}
.admin .search-box .tbl-ty .admin-pw-box .field > *{display:block; text-align:left;}
.admin .search-box .tbl-ty .admin-pw-box input{width:200px; margin-top:10px;}
.admin .search-box .tbl-ty .admin-pw-box .btn-ty1{margin-top:15px;}
.admin .search-box .tbl-ty .arrow-btn{ display:inline-block; }
.admin .search-box .tbl-ty .checkbox-1 i{left:-10px;}
.admin .search-box .form-ty label.col-1{ display:table-cell; width:198px;}
.admin .search-box .form-ty .col-2{ display:table-cell; width:300px;}
.admin .search-box .form-ty .col-2 em{  display:block;}
.admin .search-box .form-ty .col-2 em:last-child{ margin-bottom:0px;}
.admin .search-box .form-ty .col-3{ display:table-cell; width:auto;}


/*******************************************************************************/
/************************************ front  ***********************************/
/*******************************************************************************/


/*  main  */
.front .main-visual{ overflow:hidden; position:static;}
.front #container .container-inner{ min-width:1200px; width:auto;}

/* 메인 이미지*/
.front .main-visual .visual-rolling .item{height:928px; background:url(../images/pre-main01.jpg) no-repeat 50% 50%; background-size:cover;  }
.front .main-visual .visual-rolling .item.main02{ background-image:url(../images/pre-main02.jpg); }

/* 메인 텍스트  */
.front .main-visual{ position:relative;}
.front .main-visual .txt-box{z-index:10; position:absolute; top:170px; left:0; width:100%; text-align:center; }
.front .main-visual .txt-box h1.tit{  font-size:3.750rem; color:#fff; transition:all .3s;}
.front .main-visual .txt-box h1.tit + p{font-size:1.750rem; color:#fff; margin-top:30px;}

/* section */
/* .front .front-main .container-inner.main .section01{ height:597px; background-color:#e5f4f2; text-align:center;}
.front .front-main .container-inner.main .section01 h1{ font-size:3.125rem;  padding-top:120px;}
.front .front-main .container-inner .section01 .txt01{ width:845px; margin:40px auto 0; font-size:1.110rem; line-height:1.625rem; color:#232323;}
 */
/* 19-01-19 */
.front .front-main .container-inner.main .new-section01{padding:110px 0; background-color:#e5ecea;}
.front #container.front-main .container-inner.main .new-section01 .content-wrap{margin:0 auto}
.front .front-main .container-inner.main .new-section01 h2{font-size: 2.375rem;color:#403e3e;}
.front .front-main .container-inner.main .new-section01 .txt-sm{margin-top:40px; color:#565252; line-height: 1.625rem;font-size:1.250rem}
.front .front-main .container-inner.main .new-section01 .icons{margin-top:50px; font-size:0;}
.front .front-main .container-inner.main .new-section01 .icons > li{display:inline-block; vertical-align: top; width:400px;}
.front .front-main .container-inner.main .new-section01 .icons > li i{ display: inline-block; font-size: 45px; line-height: 234px; margin: 20px; width: 234px; height: 234px; border-radius: 50%; text-align: center; position: relative; text-decoration: none; z-index: 1;
    color: #fff; background: #c0e1ed; -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s; -moz-transition: -moz-transform ease-out 0.1s, background 0.2s; transition: transform ease-out 0.1s, background 0.2s;}
.front .front-main .container-inner.main .new-section01 .icons > li i:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content:'';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.front .front-main .container-inner.main .new-section01 .icons > li i:before {
    speak: none;
    font-size: 48px;
    line-height: 90px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.front .front-main .container-inner.main .new-section01 .icons > li i:after{ top: 0; left: 0; padding: 0; z-index: -1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); opacity: 0;-webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9);}
.front .front-main .container-inner.main .new-section01 .icons > li i:hover{ background: none; -webkit-transform: scale(0.93); -moz-transform: scale(0.93); -ms-transform: scale(0.93); transform: scale(0.93); color: #fff; }
.front .front-main .container-inner.main .new-section01 .icons > li i:hover:after{ -webkit-animation: sonarEffect 1.3s ease-out 75ms; -moz-animation: sonarEffect 1.3s ease-out 75ms; animation: sonarEffect 1.3s ease-out 75ms; }

@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #c0e1ed, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #c0e1ed, 0 0 0 10px rgba(255, 255, 255, 0.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}
@-moz-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #c0e1ed, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #c0e1ed, 0 0 0 10px rgba(255, 255, 255, 0.5);
        -moz-transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #c0e1ed, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #c0e1ed, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}
.front .front-main .container-inner.main .new-section01 .icons li em{display:block; margin-top:20px; text-align: center;  line-height: 1.625rem;font-size:1.250rem; color:#2e2f30;}
.front .front-main .container-inner.main .new-section01 .icons ol{margin-top:30px;}
.front .front-main .container-inner.main .new-section01 .icons ol li{display:block; text-align: center; font-size:.9rem; color:#2e2f30; line-height:1.8rem; word-break: keep-all; max-width:340px; margin:0 auto;}
.front .front-main .container-inner.main .new-section01 .icons ol li:before{content:''; width:20px; height:15px; display:inline-block; vertical-align: -2px; margin-right:8px; background:url(../images/ico_check.png) no-repeat 0 center;}


.front .front-main .container-inner .section02{ width:100%; min-width:960px; height:600px; font-size:0; background-color:#264573; }
.front .front-main .container-inner .section02 .content{ position:relative; max-width:1500px; width:1200px; height:100%; margin:0 auto; }
.front .front-main .container-inner .section02 img{ position:absolute; top:0; left:-20.8%; }
.front .front-main .container-inner .section02 .txt-box{ float:right; width:53.3%; padding-top:60px; padding-right:20px; text-align:left; }
.front .front-main .container-inner .section02 .txt-box h2.sub-tit{ position:relative;  font-size:3.125rem; font-weight:normal;}
.front .front-main .container-inner .section02 .txt-box .txt02{  margin-top:38px; font-size:1.110rem; line-height:1.625rem;  }
.front .front-main .container-inner .section02 .line2:after{ left:0; margin-left:0; }


.front #container.front-main .container-inner .content-wrap{ margin:0 auto 150px;}
.front .front-main .container-inner .content-wrap.section03{ width:1200px;}
.front .front-main .container-inner .section03 .txt-box{  height:200px; text-align:center;}
.front .front-main .container-inner .section03 .txt-box h2{ position:relative; padding-top:80px; font-weight:normal; font-size:3.125rem; color:#222;}

.front .front-main .container-inner .section04{ height:630px; background-color:#264574; text-align:center;}
.front .front-main .container-inner .section04 h2.sub-tit{ position:relative; padding-top:130px; font-size:3.125rem; color:#fff; font-weight:normal;}
.front .front-main .container-inner .section04 .txt01{ position:relative; width:770px; margin:90px auto 0; font-size:0.875rem;  line-height:1.250rem; color:#fff; }
.front .front-main .container-inner .section04 .txt01 span{ display:block; margin-top:140px;}/* 2018-09-18 수정 */
.front .front-main .container-inner .section04 .line2:after{ left:50%; }


/* contact */
.front #container .contact .content-wrap{ width:920px; text-align:left;} 
.front #container .content-wrap .tit{ padding-bottom:15px; border-bottom:2px solid #222; font-size:3rem; line-height:3.33rem; color:#222;}
.front #container .content-wrap .form-ty{ margin-top:20px;}

.container-inner.contact .map{ font-size:0; }
.container-inner.contact .section01{ background-color:#c5e0eb; }
.container-inner.contact .section03{  height:370px; background:url(../images/contact-img.jpg) no-repeat center 0; background-size:cover; }
.front .container-inner.contact .section03 .txt-box{  width:1200px; padding-top:60px;margin:0 auto; padding-left:640px; text-align:left;}
.front .container-inner.contact .section03 .txt-box .sub-tit{ font-size: 2.375rem; line-height: 2.750rem; color:#232323; white-space:nowrap; }
.front .container-inner.contact .section03 .txt02{display:inline-block; margin-top:20px;  font-size:1.110rem; line-height:1.625rem; color:#232323; }

/* membership */
.front .container-inner.membership .section01{  background-color:#e6ecea; }
.front .container-inner.membership .section02{ width:100%; height:370px; background:url(../images/member-sec02.jpg) no-repeat; background-size:cover;  }
.front .container-inner.membership .section02 .txt-box{  position:relative; max-width:1200px; margin:0 auto; text-align:left;}
.front .container-inner.membership .section02 h2.sub-tit{ position:relative; margin-left:640px; padding-top:60px; font-size:2.375rem; color:#fff; font-weight:normal;}
.front .container-inner.membership .section02 .line2:after{ left:0; margin-left:0; bottom:-16px; }
.front .container-inner.membership .section02 .txt02{ display:block; margin:54px 0 0 640px; width:520px; font-size:1.250rem; line-height:1.375rem; }

.front #container .container-inner.membership .content-wrap{ width:920px; text-align:left;}
.front .container-inner.membership .content-wrap  .form-ty{ padding-bottom:38px;  border-bottom:1px solid #f1f1f1;}
.front .container-inner.membership .content-wrap  .field2{ overflow:hidden; padding:2px 2px 0 0;}
.front .container-inner.membership .content-wrap  .field2 label,
.front .container-inner.membership .content-wrap  .field2 button{ vertical-align:middle;}
.front .container-inner.membership .content-wrap  .area-box2{ width:920px; padding:15px 20px 15px 10px; margin-top:20px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; background-color:#f1f1f1; font-size:0.875rem; line-height:1.375rem; color:#939393; word-break:keep-all;}
.front .container-inner.membership .content-wrap  .area-box2 span{ display:inline-block; margin:0 10px 0 20px;}
.sub-page.front .form-ty .field .del{  width:13px; height:13px; background:url(../images/icons.png)  -177px -94px no-repeat; background-size:500px auto;}
.front .container-inner.membership .form-ty .field:last-child{ margin-bottom:0;}

.front .container-inner.membership .content-wrap .area-box3{ text-align:right; margin:15px 0 35px ;}
.front .container-inner.membership .content-wrap .area-box3 .checkbox-1{  margin-top:0; vertical-align:middle;}
.front .container-inner.membership .content-wrap .area-box3 input{ width:auto; margin-top:0; vertical-align:middle;}
.front .container-inner.membership .content-wrap .area-box3 span{  font-size:0.875rem; color:#939393; vertical-align:middle;}
.front .container-inner.membership .content-wrap .area-box3 i{ left: -26px; } 

/* news */
.front #container .container-inner.news .content-wrap{ width:1200px;}
.front .container-inner.news .section01{  background-color:#264574; }
.front .container-inner.news .section01 h1{ color:#fff;}
.front .container-inner.news .section01 .txt01{ color:#fff; display:none;}
.front .container-inner.news .section01 .txt01.on{display:block; word-break: keep-all; text-transform: uppercase}

/* services */
.front .container-inner.services .section01{ background-color:#264573; text-align:center;}
.front .container-inner.services .section01 h1{ color:#fff; font-weight:normal; word-break: keep-all; /*text-transform: uppercase*/}
.front .container-inner.services .section01 .txt02{ width:770px; margin:40px auto 0; display:none;}
.front .container-inner.services .section01 .txt02.on{display:block; word-break: keep-all;}


.front .container-inner.services section{ position:relative;}
.front .container-inner.services .txt-box{ width:1200px; margin:0 auto; }
.front .container-inner.services h2{ width:600px; margin-bottom:20px; font-size:2.375rem; line-height:2.750rem;  color:#232323;}
.front .container-inner.services .txt02{ font-size:1.250rem; line-height:1.625rem;}

.front .container-inner.services .txt02 a{color:red}
.front .container-inner.services .txt02 a:hover{color:#3fc969}

.front .container-inner.services .section02{ height:700px; background-color:#e3eceb;}
.front .container-inner.services .section02 .txt-box{ overflow:hidden; padding-top:265px; text-align:left; }
.front .container-inner.services .section02  h2{ float:right; }
.front .container-inner.services .section02 .txt02{ margin-left:600px; color:#232323;}

.front .container-inner.services .section03{ height:700px; background-color:#b8e2f0;}
.front .container-inner.services .section03 .txt-box{ overflow:hidden; padding-top:250px;  }
.front .container-inner.services .section03  h2{  text-align:right; }
.front .container-inner.services .section03  .txt02{ float:left; width:600px; text-align:right; color:#232323;}

.front .container-inner.services .section04{ height:700px; background-color:rgb(92,141,198);}
.front .container-inner.services .section04 .txt-box{ padding-top:205px; text-align:left; }
.front .container-inner.services .section04 h2{ float:right; color:#fff;  }
.front .container-inner.services .section04 .txt02{ margin-left:600px; color:#fff;}

.front .container-inner.services .section05{ height:760px; background-color:#e2f0f6;}
.front .container-inner.services .section05 .txt-box{  padding-top:525px; text-align:center;}
.front .container-inner.services .section05  h2{ width:1200px;}
.front .container-inner.services .section05 .txt02{ padding:0 50px; color:#232323; }

.front .container-inner.services .section06{ height:387px;  text-align:center;  background:#fff;}
.front .container-inner.services .section06 .txt02 { width:1200px; margin:0 auto; padding:95px 50px 0; color:#5c8dc6;}
.front .container-inner.services .section06 button{ margin-top:50px;}

.front a svg {display: inline-block;vertical-align: middle}
.front Graphs {position: absolute}
.front .scrollmagic-pin-spacer{position:absolute !important;}
.front .scene{visibility:hidden; position:absolute; top:0; left:50%; width:1200px; height:100%; margin-left:-600px;}
.front .scene svg{width:55%;height:auto; height:auto;}
.front #checklist{position:absolute;top:65px;left:50px; min-height:100%;}
.front #Rocket{position:absolute;top:220px;right:70px;width:35%; min-height:56%;}
.front #Wecrestmarketingtools{position:absolute;top:147px;left:70px;width:36%; min-height:50%;}
.front #madrid_notifier_jurisdictions_wecrest{position:absolute;top:15px;left:148px;width:73%; min-height:90%;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .front #checklist{}
    .front #Rocket{top:70px;}
    .front #Wecrestmarketingtools{top:0px;}
    .front #madrid_notifier_jurisdictions_wecrest{top:-50px;}
}


/************************************ 1024px이하  ***********************************/
@media screen and (max-width:1024px){

    input[type="text"], 
    input[type="password"], 
    input[type="email"], 
    input[type="date"]{ height:32px; padding-left:12px;  line-height:1rem;}
    .input--box input{height:66px; line-height:66px; font-size:1rem}
    
    /* main */
    .main-visual .visual-rolling .item{ height:416px; min-width:960px; }
    .main-visual .visual-rolling .item span{ }
    .main-visual .visual-rolling .item span em{  line-height:1.5em;}
    .main-visual .visual-rolling .item span.top{ margin-top:-136px; margin-left:-44px;}
    .main-visual .visual-rolling .item span.top em{ margin-left:16px;}
    .main-visual .visual-rolling .item span.bottom{ margin-top:36px; margin-left:-240px;}
    
    #container .container-inner{ width:960px;}
    #container .content-wrap{ width:960px; margin:80px auto 72px;}
    #container .content-wrap .cont-box li{ height:168px;}
    #container .content-wrap .cont-box li a{ height:168px; padding:20px 0 0 24px;}
    #container .content-wrap .cont-box li .num{ }
    #container .content-wrap .cont-box li .txt{ margin-top:12px;  line-height:1.25rem;}
    
    /* login */
    .login-wrap{ padding-top:80px;}
    .login-wrap h2.logo img{ width:330px;}
    .login-wrap .form-login{ margin-top:36px; margin-bottom:225px;}
    .login-wrap .form-login ul li input{ width:400px; height:41px; padding:0 16px; }
    .login-wrap .form-login ul li.id{margin-bottom:12px;}
    .login-wrap .form-login ul li.pw{ margin-bottom:26px;}
    .login-wrap .form-login .btn-login{ width:400px; height:56px;  line-height:3.5rem;}
    
    /* statistics */
    .statistics .search-box{ padding-bottom:32px; margin-bottom:32px;}
    .statistics .search-box .form-ty.row{ width:520px;}
    .statistics .search-box .form-ty.row .col-2 em{ margin-bottom:12px;}
    .statistics .search-box .btn-group{ margin-top:24px;}
    .statistics .search-box .btn-group button{ margin-left:8px;}
    .statistics .search-box .field{ margin-top:32px;}
    .statistics .search-box .field label{ padding-right:32px;  line-height:2rem;}
    
    /* settings */
    .settings button.btn-ty4{ height:28px; font-size:14px;}
    
    /* outox */
    .outbox .tbl-ty tbody tr td button{margin-right:2px; word-spacing:-2px;}
    
    /************************************ admin ***********************************/
    .admin .search-box .tbl-ty th{ word-break:break-all;}
    .admin .search-box .tbl-ty .admin-pw-box{ margin-left:10px;}
    .admin .search-box .tbl-ty .admin-pw-box .field > *{display:block; text-align:left;}
    .admin .search-box .tbl-ty .admin-pw-box input{width:158px; margin-top:10px;}
    .admin .search-box .tbl-ty .admin-pw-box .btn-ty1{margin-top:10px;}
    .admin .search-box .tbl-ty.small .checkbox-1 i{left:-10px; top:-4px;}
}

/************************************ front - 1024px이하  ***********************************/


@media screen and (max-width:1024px){
    :root{}

        
    /*  main  */
    .front #container .container-inner{ min-width:960px;}

    /* 메인 이미지*/
    .front .main-visual .visual-rolling .item{height:742px; }

    /* 메인 텍스트  */
    .front .main-visual .txt-box{ top:120px; }
    .front .main-visual .txt-box h1.tit{  }

    /* section */
    /* .front .front-main .container-inner.main .section01{ height:477px;}
    .front .front-main .container-inner .section01 .txt01{ width:676px; margin:52px auto 0;  } */
    
    .front .front-main .container-inner .section02{  height:480px;  }
    .front .front-main .container-inner .section02 .content{ max-width:1200px; width:960px; }
    .front .front-main .container-inner .section02 .content img{ height:480px;}
    .front .front-main .container-inner .section02 .txt-box{ padding-top:50px; padding-right:16px; }
    .front .front-main .container-inner .section02 .txt-box .txt02{  margin-top:46px; }
    
    .front #container.front-main .container-inner .content-wrap{ margin:0 auto 120px;}
    .front .front-main .container-inner .content-wrap.section03{ width:960px;}
    .front .front-main .container-inner .section03 .txt-box{  height:252px;}
    .front .front-main .container-inner .section03 .txt-box h2{  padding-top:93px;  }

    .front .front-main .container-inner .section04{ height:504px; }
    .front .front-main .container-inner .section04 h2.sub-tit{ padding-top:93px; }
    .front .front-main .container-inner .section04 .txt01{ width:616px; margin:73px auto 0;   line-height:1.250rem;}
    .front .front-main .container-inner .section04 .txt01 span{margin-top:80px;}/* 2018-09-18 수정 */


    /* contact */
    .front #container .contact .content-wrap{ width:736px;} 
    .front #container .content-wrap .tit{ padding-bottom:12px;  line-height:3.33rem; }
    .front #container .content-wrap .form-ty{ margin-top:16px;}

    .container-inner.contact .section03{ height:296px; }
    .front .container-inner.contact .section03 .txt-box{ width:960px; padding-top:30px; padding-left:480px; }
    .front .container-inner.contact .section03 .txt02{  line-height:1.250rem;  }

    /* membership */
    .front .container-inner.membership .section02{ height:296px;}
    .front .container-inner.membership .section02 .txt-box{ max-width:960px; }
    .front .container-inner.membership .section02 h2.sub-tit{ position:relative; margin-left:462px; padding-top:25px; font-size:38px; color:#fff; font-weight:normal;}
    .front .container-inner.membership .section02 .line2:after{ left:0; margin-left:0; bottom:-12px; }
    .front .container-inner.membership .section02 .txt02{ width:466px; margin:36px 0 0 462px; }

    .front #container .container-inner.membership .content-wrap{ width:736px;}
    .front .container-inner.membership .content-wrap  .form-ty{ padding-bottom:30px; }
    .front .container-inner.membership .content-wrap  .field2{ padding:2px 2px 0 0;}
    .front .container-inner.membership .content-wrap  .area-box2{ width:736px; padding:12px 16px 12px 8px;  line-height:1.375rem; }
    .front .container-inner.membership .content-wrap  .area-box2 span{ margin:0 8px 0 16px;}
    .sub-page.front .form-ty .field .del{  width:13px; height:13px; }

    .front .container-inner.membership .content-wrap .area-box3{ margin:12px 0 28px ;}
    .front .container-inner.membership .content-wrap .area-box3 .checkbox-1{ margin-top:-2px; }
    .front .container-inner.membership .content-wrap .area-box3 input{ margin-top:-2px;}
    .front .container-inner.membership .content-wrap .area-box3 label{   }
    .front .container-inner.membership .content-wrap .area-box3 i{ top:0; left:-26px;}

    /* news */
    .front #container .container-inner.news .content-wrap{ width:960px;}

    
    
    /* services */
    .front .container-inner.services .section01 .txt02{ width:616px; }


    .front .container-inner.services .txt-box{ width:960px; }
    .front .container-inner.services h2{ width:480px; margin-bottom:24px;}
    .front .container-inner.services .txt02{}

    .front .container-inner.services .section02{ height:560px; }
    .front .container-inner.services .section02 .txt-box{ padding-top:204px; }
    .front .container-inner.services .section02 .txt02{ margin-left:480px; }

    .front .container-inner.services .section03{ height:560px;}
    .front .container-inner.services .section03 .txt-box{ padding-top:155px;  }
    .front .container-inner.services .section03  .txt02{ width:480px; }

    .front .container-inner.services .section04{ height:560px;}
    .front .container-inner.services .section04 .txt-box{ padding-top:110px;; }
    .front .container-inner.services .section04 .txt02{ margin-left:480px;}

    .front .container-inner.services .section05{ height:658px}
    .front .container-inner.services .section05 .txt-box{  padding-top:420px;}
    .front .container-inner.services .section05 h2{ width:960px;}
    .front .container-inner.services .section05 .txt02{ padding:0 40px;  }

    .front .container-inner.services .section06{ height:310px;}
    .front .container-inner.services .section06 .txt02 { width:960px; padding:76px 40px 0;}
    .front .container-inner.services .section06 button{ margin-top:40px;}


    .front .scene{width:960px; margin-left:-480px;}
    .front .scene svg{width:55%;}
    .front #checklist{top:65px;left:40px;}
    .front #Rocket{top:170px;right:60px;width:35%;}
    .front #Wecrestmarketingtools{top:117px;left:60px;width:36%;}
    .front #madrid_notifier_jurisdictions_wecrest{top:15px;left:128px;width:73%;}

}

@media screen and (-ms-high-contrast: active) and (max-width:1024px), (-ms-high-contrast: none) and (max-width:1024px), {
    .front #checklist{}
    .front #Rocket{top:50px;}
    .front #Wecrestmarketingtools{top:0px;}
    .front #madrid_notifier_jurisdictions_wecrest{top:-50px;}
}