@charset "utf-8";

/*common*/

html.of_hide{height:100%;}
html.of_hide body{overflow:hidden;position:absolute;width:100%; /* margin-right: 17px; */}
html.of_hide #wrap{overflow:hidden;}
html.of_hide2 body{overflow:hidden;}
/*html.of_hide #wrap{height:100%;overflow:hidden;}*/

html.of_hide_b{height:100%;}
html.of_hide_b body{overflow:hidden;height:100%;}
html.of_hide_b #wrap {height: 100%;}
html.of_hide_b #footer{display: none;}

html.naviOn #m_navi > span{background-color:transparent;}
html.naviOn #m_navi > span:before, html.naviOn #m_navi > span:after{border-radius:2px;}
html.naviOn #m_navi > span:before{top:0;bottom:0;
    ms-transform: rotate(45deg); /* IE 9 */    -webkit-transform: rotate(45deg); /* Safari */    transform: rotate(45deg);
}
html.naviOn #m_navi > span:after{top:0;bottom:0;
    ms-transform: rotate(135deg); /* IE 9 */    -webkit-transform: rotate(135deg); /* Safari */    transform: rotate(135deg);
}
#container{}

.hide{opacity:0;}
#wrap{position: relative;min-height:100%;}
.ov_h{overflow:hidden;}
input.ipt { box-sizing: border-box; font-size: 0.875em; height: 2.5833em;border: 1px solid #CFCFCF; background: #fff; border-radius: 0.3em; padding: 0px 0.5em; -webkit-appearance: none; box-shadow: none; }
.media_mobile, .mobile540{display: none;}
input.ipt.w100pc{width:100%;}
input.ipt.w400{width:400px;}
input.ipt.w440{width:440px;}
input.ipt.w160{width:160px;}

textarea.txa{box-sizing: border-box; font-size: 1.5em ; border: 1px solid #CFCFCF; background: #fff; line-height: 1.5em; border-radius: 3px; padding: 0.5em;box-shadow:none;min-height:7.1em;-webkit-appearance:none;}
textarea.txa.w100pc{width:100%;}

/*icutter*/
.h100p{height:100% !important; width:auto !important;}
.w100p{width:100% !important; height:auto !important;}

/*header*/

#header{box-shadow:0px 1px 5px rgba(0,0,0,0.5);z-index:10;position: fixed;width:100%;left:0;top:0;height:3.5em;
    -webkit-transition: .5s ease-in-out;  -moz-transition: .5s ease-in-out;  -o-transition: .5s ease-in-out;  transition: .5s ease-in-out;
    -webkit-transition-property: height;
    -moz-transition-property: height;
    transition-property: height;
}
#header h1{position: absolute;height:100%;font-size: 1em;margin:0 1.5em;}
#header h1 > a{vertical-align: middle;display: inline-block;height:2.2em;}
#header h1 img{max-height:100%;}
#header > .inner{height:100%;position: relative;
    background-color:rgb(0,0,0);
    background-color:rgba(0,0,0,0.7);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);
    zoom: 1;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    -webkit-transition-property: height, background-color;
    -moz-transition-property: height, background-color;
    transition-property: height, background-color;
}
#header > .inner:nth-child(n) { filter: none; }
#header > .inner > *{height:3.5em;}
#header .area_lnb{}
#header .area_lnb:after{content:'';clear:both;display: block;}
#header .m_area{display: none;position: absolute;top:0;width:4em;}

#m_navi{position: absolute;right:0; top:0;bottom:0;left:0;margin:auto;width:2.5em;height:2.5em;font-size:1em;}
#m_navi > span{position: relative;display: block;width:100%;height:3px;background-color: #898989; border-radius:3px;margin:0 auto;
	-webkit-transition: .3s ease-in-out;  -moz-transition: .3s ease-in-out;  transition: .3s ease-in-out;
	-webkit-transition-property: background-color;
	-moz-transition-property: background-color;
	transition-property: background-color;
}
#m_navi > span:before, #m_navi > span:after{
    position: absolute;display: block;width:100%;height:3px;background-color: #898989; border-radius:3px;content:"";
    -webkit-transition: .3s ease-in-out;  -moz-transition: .3s ease-in-out;  -o-transition: .3s ease-in-out;  transition: .3s ease-in-out;
    -webkit-transition-property: top, bottom, -webkit-transform;
    -moz-transition-property: top, bottom, -moz-transform;
    transition-property: top, bottom, transform;
}
#m_navi > span:before{top:-10px;left:0;}
#m_navi > span:after{bottom:-10px;left:0;}

/*lnb*/
#lnb{height:100%;}
.top_menu > ul > li{display: inline-block;height:100%;vertical-align: middle;}
.top_menu > ul > li:first-child{}
.top_menu > ul > li > a{display:block;padding:1.125em 1.25em;font-size:1em;color:#fff;
-webkit-transition: .15s linear;  -moz-transition: .15s linear; transition: .15s linear;
-webkit-transition-property: color; -moz-transition-property: color; transition-property: color;}
.top_menu > ul > li:hover > a{color:#00a1ef;}
.top_menu > ul > li.on > a{ color:#00a1ef;}
#lnb > ul{height:100%;text-align: center;}



/*gnb*/
.area_gnb{height:100%;position: absolute;right:0;top:0;}
.area_gnb::after{content:'';clear:both;display: block;}
.area_gnb p{float:left;font-size:1.125em;font-weight: 400;color:#666;margin-right:1em;padding:1em 0;}
.area_gnb #gnb{float:left;height:100%;}
#gnb ul{height:100%;}
#gnb ul::after{content:'';clear:both;display: block;}

.bg_full{position: absolute;top:0;bottom:0;left:0;right:0;overflow: hidden;}

#area_main{position: relative;}
#area_main > section{position: relative;overflow: hidden;}
/*#area_main #sect01{background-color: #ffffff;}
#area_main #sect02{background-color: #dddddd;}
#area_main #sect03{background-color: #aaaaaa;}
#area_main #sect04{background-color: #999999;}
#area_main #sect05{background-color: #666666;}
#area_main #sect06{background-color: #333333;}*/

body{
	-webkit-transition:background-color .8s linear;
	-moz-transition:background-color .8s linear;
	-ms-transition:background-color .8s linear;
	-o-transition:background-color .8s linear;
	transition:background-color .8s linear;
}
#area_main #sect2{background-color: #00a1ef;}
#area_main #sect3{background-color: #e5e5e5;}
#area_main #sect4{background-color: #e5e5e5;}
#area_main #sect5{background-color: #fff;}
#area_main #sect6{background-color: #fff;}

/* 레이어 팝업 창 */
#pop_common{
    position: absolute;width: 100%; height: 100%;  left: 0; top: 0; z-index: 30;background-color: rgba(0, 0, 0, 0.7); display:none;visibility:hidden;opacity:0;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)";
}
#pop_common.on{visibility:visible;opacity:1;}


.owen_sect > .cont{max-width:1500px;margin-left:auto; margin-right:auto;position: relative;}

.ico_down{position: absolute;bottom:10px;width:100%;text-align: center;opacity: 0.5}
.ico_down img{width:25px;}
.ico_down span{font-size: 0.75em;color:#999;}

#area_main #sect1 .cont{position: relative;text-align: center;top:50%;}
#area_main #sect1 .cont h2{font-size: 3em;font-weight: 300;margin-top:-1.5em;display: inline-block;
	-webkit-transition:color 1s linear 1s;
	-moz-transition:color 1s linear 1s;
	-ms-transition:color 1s linear 1s;
	-o-transition:color 1s linear 1s;
	transition:color 1s linear 1s;
}
#area_main #sect1 .cont h2.white{color: #fff;}
#area_main #sect1 .bg, #area_main #sect1 .ico_down{opacity:0;
	-webkit-transition:opacity 1s linear 1s;
	-moz-transition:opacity 1s linear 1s;
	-ms-transition:opacity 1s linear 1s;
	-o-transition:opacity 1s linear 1s;
	transition:opacity 1s linear 1s;
}





#area_main #sect1 .bg.on{opacity: 1;}
#area_main #sect1 .ico_down.on{opacity: 0.5;}
#area_main #sect1 .bg.video .cover{position: absolute;top:0;bottom:0;left:0;right:0;background-color: rgba(0,0,0,0.8);}
#area_main #sect1 .bg.video video{min-width:110%;position: absolute;}

/*메인 섹션2*/
#area_main #sect2 .fx_tit{top:80px;position: fixed;opacity:0;left:0;right:20px;max-width:1500px;margin:auto;text-align: right;
	-webkit-transition:opacity 1s linear; -moz-transition:opacity 1s linear; -ms-transition:opacity 1s linear; -o-transition:opacity 1s linear; transition:opacity 1s linear;
}
#area_main #sect2 .fx_tit.on{opacity:1}
#area_main #sect2 .fx_tit h2{font-size: 1.25em;font-weight: 400;}
#area_main #sect2 .cont{margin-top:10%;text-align: center;margin-bottom:6em}
#area_main #sect2 .cont > h2{font-size: 3em;font-weight: 300;color: #fff;letter-spacing:1px;}
#area_main #sect2 .cont > h3{font-size: 1.125em;font-weight: 400;color: #fff;margin-top:0.5em;}
#area_main #sect2 .cont > .list_type1{margin-top:3%;}
#area_main #sect2 .bot{position: absolute;width: 100%;bottom:0;background-color: #fff;}
#area_main #sect2 .bot > dl{padding:1em 0em;}
#area_main #sect2 .bot > dl > dt{width:40%;float:left;line-height:2.1em;font-size: 1.25em;}
#area_main #sect2 .bot > dl > dd{width:60%;float:right;max-width:600px;}
#area_main #sect2 .bot ul{margin:auto;}
#area_main #sect2 .bot ul > li{width:33.33%;float:left;}
#area_main #sect2 .bot ul > li > a{display: block;margin-left:1em;font-size: 0.875em;line-height: 3em;border-radius:1.5em;background-color: #00a1ef;color: #fff;text-align: center;}

#area_main #sect2 .pagination{margin-top:2em;}
.swiper-visible-switch{background-color: #fff;}

/*메인 섹션3*/
#area_main #sect3 .bg:after{position: absolute;top:0;bottom:0;left:0;right:0;background-color: rgba(0,0,0,0.5);content: '';}
#area_main #sect3 .cont{margin-top:17%;color: #fff;}
#area_main #sect3 .cont > dl{position: relative;}
#area_main #sect3 .cont > dl > dt{float: left;width: 30%;text-align: right;}
#area_main #sect3 .cont > dl > dt > p{margin-right:2em;font-weight: 300;}
#area_main #sect3 .cont > dl > dt > p > span{font-size: 3em;line-height:1.2;}
#area_main #sect3 .cont > dl > dt > p > span.big{font-size: 5em;line-height:1.2;}
#area_main #sect3 .cont > dl > dt > p > span.small{font-size: 2em;line-height:1.5;}
#area_main #sect3 .cont > dl > dd{float: right;width: 70%;}
#area_main #sect3 .cont > dl > dd .line{position: absolute;top:0;bottom:0;border-left:1px solid #fff;float:left;height:0;margin:auto;
    -ms-transform:height 0.8s cubic-bezier(.45,.32,.55,1.53); -webkit-transition:height 0.8s cubic-bezier(.45,.32,.55,1.53);
    -moz-transition:height 0.8s cubic-bezier(.45,.32,.55,1.53); -o-transition:height 0.8s cubic-bezier(.45,.32,.55,1.53); transition:height 0.8s cubic-bezier(.45,.32,.55,1.53);
}
#area_main #sect3 .cont > dl > dd .line.show{height:100%;}
#area_main #sect3 .cont ul{margin-left:1em;}
#area_main #sect3 .cont ul > li{position: relative;font-weight: 300;font-size: 1.125em;margin:0.625em 0;padding-left:1em;line-height: 1.5;}
#area_main #sect3 .cont ul > li:after{width:2px;height:2px;content: '';position: absolute;left:0.4em;top:0.7em;background-color: #fff;}
#area_main #sect3 .cont ul > li strong{}
#area_main #sect3 .bot_btns{margin:2em 0; position: relative;text-align: center;}

/*메인 섹션4*/
#area_main #sect4 .cont{margin-top:8%;text-align: center;}
#area_main #sect4 .cont > h2{font-size: 3em;font-weight: 300;color: #333;letter-spacing:1px;}
#area_main #sect4 .cont > .list_type2{margin-top:3%;}
#area_main #sect4 .bot_btns{margin:2em 0 2em; position: relative;}

/*메인 섹션5*/
#area_main #sect5 .bg.video{}
#area_main #sect5 .bg.video .cover{position: absolute;top:0;bottom:0;left:0;right:0;background-color: rgba(0,0,0,0.8);}
#area_main #sect5 .bg.video video{width:110%;left:-5%;position: absolute;}
#area_main #sect5 .cont{top:30%;text-align: center;}
#area_main #sect5 .cont > h2{font-size: 3em;font-weight: 300;color: #fff;letter-spacing:1px;margin-top:1em;}
#area_main #sect5 .cont > h3{font-size: 1.25em;font-weight: 400;color: #fff;margin-top:0.5em;}
#area_main #sect5 .cont > .list_type2{margin-top:3%;}
#area_main #sect5 .bot_btns{margin:2em 0;position: relative;}

#area_main #sect6{margin-bottom:6em;}


/*메인 뉴스*/
#sec_news{height:100%;}
#sec_news .inner{height:100%;}
#sec_news .inner > div{height:50%;position: relative;overflow: hidden}
#sec_news .inner > div > ul{position: relative;}
#sec_news .inner > div > ul > li{position: relative;}
#sec_news .inner dl{padding-top:0.5em;background-color: #fff;box-sizing:border-box;height:100%;width:100%;}
#sec_news .inner dl:after{content:"";display: block;clear: both;}
#sec_news .inner dl > dt{position: absolute;height:100%;}
#sec_news .inner dl > dd{margin-left: 5.25em;margin-right:1.25em;}
#sec_news .inner dt h2{text-align: center;font-size: 1em;height:100%;top:0;left:0;bottom:0;width:5em;color: #888888;}
#sec_news .inner dt h2 > span{display: inline-block;vertical-align: middle;line-height:1.5em;}
#sec_news .inner dt h2 strong{font-weight: 300;font-size: 2.1875em; color: #f7961d;}
#sec_news .inner dt .img{width:6.125em;height:6.125em;margin-left:5.375em;overflow:hidden;}
#sec_news .inner dt .img img{width:100%;}
#sec_news .inner dd h3{font-size: 0.8125em;font-weight: 400;color: #888888;border-bottom:1px solid #E5E5E5;line-height:2em;margin:0.1em 0;}
#sec_news .inner dd h3 .tag{}
#sec_news .inner dd h3 .line {margin: 0 0.4em;}
#sec_news .inner dd h3 .comment{}
#sec_news .inner dd .con{}
#sec_news .inner dd .con h4{font-size: 0.875em;overflow:hidden; white-space:nowrap; text-overflow: ellipsis;height:2em;line-height:2;margin:0.2em 0 0.1em;    -ms-transform:-ms-transform 0.5s ease-out;
    -webkit-transition:color 0.3s linear;
    -moz-transition:color 0.3s linear;
    -o-transition:color 0.3s linear;
    transition:color 0.3s linear;
}
#sec_news .inner > div > ul > li:hover .con h4{color:#1e4283;}
#sec_news .inner dd .con p{font-size: 0.8125em;height:3em;line-height:1.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;}

#sec_news .inner dd h3 .tag.video{color:#a200ff;}
#sec_news .inner dd h3 .tag.pet_school{color:#00a2ff;}
#sec_news .inner dd h3 .tag.cardnews{color:#00974b;}
#sec_news .inner dd h3 .tag.pet_story{color:#ff2572;}


.area_contact{overflow: hidden}
.area_contact > .out_box > h2{text-align: center;margin-top:2.5em;position: relative;margin-bottom:1.5em;font-size: 2.5em;font-weight: 300;}
.area_contact .list_type3{}





/*one to all 시작*/
#content_body .onetoall .tit_t1{color:#2D5078;}
#content_body .onetoall .tit_t2{color:#23A393A;}
#content_body .onetoall .tit_s{color:#6B736B;}

#onetoall_tit{position: relative;margin-bottom:1.25em;}
#onetoall_tit:after{content: '';display: block;clear: both;}
#onetoall_tit > dt{padding:0.5em 1em;background-color: #FF61A0;color: #fff;font-size: 1.125em;float:left;margin-right:0.5em;}
#onetoall_tit > dd{display: table;font-size: 0.9325em;}
#onetoall_tit > dd:after{content: '';display: block;clear: both;}

#onetoall_gra{
	max-width:1000px;text-align: left;margin:20px auto 0;
}
#onetoall_gra>div{
	position:relative;
	padding:15px 30px;border-radius:10px;background:#f8f8f8;box-shadow:0 2px 10px -3px rgba(0,0,0,0.7);
}

#onetoall_gra .img_box{position:relative;background-color:#fff;padding:15px;height:360px;border-radius: 10px;overflow: hidden;}
#onetoall_gra .img_box:after{
	display:block;content:"";clear:both;
}

#onetoall_gra .img_box>.img_left, #onetoall_gra .img_box>.img_right{
	position:relative;float:left;width:50%;height:100%;box-sizing:border-box;overflow:hidden;
}

#onetoall_gra .img_box>.img_left{border-right:1px solid #b7b7b7;}

#term_box{	position:absolute;box-sizing:border-box;left:50%;width:50%;padding-top:0px;padding:10px 0px 10px 10px;font-size: 0.75em;}

#term_box>div{
	font-size:1.2em;line-height:1.7em;text-decoration:underline;color:#686868;
}

#onetoall_gra .ota_navi{padding:10px 0px;text-align: right;}
#onetoall_gra .ota_navi>div{display: inline-block;vertical-align: middle;}
#onetoall_gra .ota_navi>div>div{float:left;background:#a6a6a6;width:16px;height:16px;border-radius:50%;margin-left:10px;cursor:pointer;}
#onetoall_gra .ota_navi>div>div.on{background:#ff664d;}

#ota_main_pro{position:absolute;}
#term_def, #type_desc{position:absolute;top:0px;left:0px;height:100%;width:100%;box-sizing:border-box;}
#term_def>div{margin:0px 0px 0px 10px;}
#term_def .term_ti1{display:inline-block;background:#002354;color:#b2bec9;font-size:0.9em;padding:4px 7px;}
#term_def .term_ti2{display:inline-block;color:#002354;padding-left:10px;}
#term_def .rel_terms{position:absolute;bottom:3px;width:100%;}

#type_desc>div{line-height:1.5em;margin-top:10px;margin-left:15px;}

#ver_pro2{width:100%;text-align:center;border-top:0px solid #b7b7b7;}
#ver_pro3,#ver_pro4{position:absolute;bottom:0px;background:#fff;width:100%;height:50%;text-align:center;box-sizing:border-box;border-top:1px solid #b7b7b7;padding-top:20px;}

@media (max-width:768px) {
	#onetoall_gra>div{padding:25px 10px;}
	#onetoall_gra .img_box{height:auto;}
	#onetoall_gra .img_box>.img_left, #onetoall_gra .img_box>.img_right{
		position:relative;float:none;width:100%;height:50%;box-sizing:border-box;overflow:hidden;
	}
	#onetoall_gra .img_box>.img_left{
		border-right:0px solid #b7b7b7;
	}
	#term_box{
		position:relative;left:0%;width:100%;font-size:0.9em;background-color:#f5f5f5;
	}
	#term_def>div{margin:10px 0px 10px 10px;}
	#ota_main_pro{position:relative;}
	#term_def, #type_desc{position:relative;}
	#term_def .rel_terms{position:relative;}

	#type_desc>div{margin-left:0px;}
	#ver_pro2{border-top:1px solid #b7b7b7;}
	#ver_pro3,#ver_pro4{position:relative;}
}
/*one to all 끝*/

/*안심노트 시작*/
#sec_note_gra{ position:relative; }
#sec_note_gra:after{display:block;content:"";clear:both;}
#sec_note_gra>.mobile_box{ position:relative;float:left;width:62%;z-index:1;text-align:center; }
#sec_note_gra>.mobile_box > div{position: relative;display: inline-block;}
#sec_note_gra .scope, #sec_note_gra .teach, #sec_note_gra .rnote{position:absolute;display:inline-block;cursor:pointer;}
#sec_note_gra .scope>img, #sec_note_gra .teach>img, #sec_note_gra .rnote>img{max-width:100%;}
#sec_note_gra .scope{top:16%;left:25%;}
#sec_note_gra .teach{top:-3%;right:17%;}
#sec_note_gra .rnote{top:20%;right:17%;}
#sec_note_gra .note_bg{ position:relative;float:right;width:38%;z-index:0; max-width:400px;margin:auto;}
#sec_note_gra .note_bg>div>div:first-child{ position:relative;background:#e6e8e9;border-radius:10px;padding:30px 10px 10px 10px;text-align:center;z-index:1; }
#sec_note_gra .sec_note_dec{ position:relative;width:60%;text-align:center;color:#f2c513;font-size:1.4em;z-index:0;display:none;margin-top:20px; }
@media (max-width:768px) {
	#sec_note_gra>.mobile_box{float:none;width:100%;}
	#sec_note_gra .note_bg{float:none;width:100%;box-sizing:border-box;padding:0px 20px;}
	#sec_note_gra .sec_note_dec{width:100%;}
}
@media (max-width:480px) {
	#sec_note_gra .scope, #sec_note_gra .teach, #sec_note_gra .rnote{width:40px;}
}
/*안심노트 끝*/

/*footer*/
#footer .totop > a{position: relative;;display: block;font-size:1.625em; color:#949494; padding:1.4em 0px 0.6em;text-align:center;border-top:1px solid #D5D7D8;display:none;}
#footer .totop > a:after{position: absolute; left:0;right:0;height:0px;width:0px;bottom:2.2em;border-bottom:0.3462em solid #727272;border-right:0.3462em solid transparent;border-left:0.3462em solid transparent;content:'';margin:auto;}
#footer{background-color: #414141;padding:2em 0;}
#footer dl > dt{float:left;clear:left;width:10em;}
#footer dl > dt img{max-width:100%;}
#footer dl > dd{margin-left:12em;overflow:hidden;}
#footer dl > dd > ul{margin-left:-32px;}
#footer dl > dd > ul >li{position: relative;font-size: 0.875em; color: #999999;line-height: 1.5714;display:inline-block;margin-left:16px;padding-left:16px;}
#footer dl > dd > ul >li::before{position: absolute;height:10px;width:1px;background-color: #525252;top:0;bottom:0;margin:auto;left:-1px;content:'';}
#footer dl > dd > ul >li.copyright{color: #666666;margin-top:0.4em;display:block;}
#footer dl > dd a.company_no{display:inline-block;position:relative;color:#999999;font-size:1em;line-height: 1.8571;margin-left:0.5em;border:1px solid #999999;padding:0 0.7em;border-radius:3px;}
#footer .div.family{}

/*분석수학 소개*/

#area_brand_intro .area_spot .cont{color: #fff;}
#area_brand_intro .area_spot .bg .cover{top:0;bottom:0;left:0;right:0;position: absolute;background-color: rgba(0,0,0,0.5);}

#intro_sect1 .cont{margin-top:3em;}
#intro_sect1 .cont > h3{font-size: 2.25em;margin-bottom:1em;text-align: center;font-weight: 300;}
#intro_sect1 .bx_study_process{}
#intro_sect1 .bx_study_process > ul{position: relative;z-index: 2;}
#intro_sect1 .bx_study_process > ul:after{content: '';display: block;clear: both;}
#intro_sect1 .bx_study_process > ul > li{position: relative;}
#intro_sect1 .bx_study_process > ul > li.ready{width: 20%;float: left;}
#intro_sect1 .bx_study_process > ul > li.smart{width: 80%;float: left;}
#intro_sect1 .bx_study_process > ul > li > h4{text-align: center;margin-bottom:0.5em;position: relative;}
#intro_sect1 .bx_study_process > ul > li > h4:after{content: '';bottom:50%;left:0.5em;right:0.5em;border-bottom:1px solid #ccc;position: absolute;font-size: 1em;}
#intro_sect1 .bx_study_process > ul > li > h4 > span{display: inline-block;background-color: #fff;padding:0.5em;position: relative;z-index: 1;font-size: 1.125em;font-weight: 400;white-space: nowrap;}
#intro_sect1 .bx_study_process > ul > li .box{width:8em;height:8em;text-align: center;margin:auto;border-radius:1em;
    -webkit-transition:border-radius .3s ease-in-out, background-color .3s ease-in-out;
    -moz-transition:border-radius .3s ease-in-out, background-color .3s ease-in-out;
    -o-transition:border-radius .3s ease-in-out, background-color .3s ease-in-out;
    transition:border-radius .3s ease-in-out, background-color .3s ease-in-out;}
#intro_sect1 .bx_study_process > ul > li .box span{vertical-align: middle;display: inline-block;font-size: 0.9325em;}
#intro_sect1 .bx_study_process > ul > li.ready .box{background-color: #ccc;color: #fff;}
#intro_sect1 .bx_study_process > ul > li.smart .box{background-color: #00A2D9;color: #fff;}
#intro_sect1 .bx_study_process > ul > li .disc{position: absolute;padding-top:2em;left:0;right:0;visibility: hidden;opacity: 0;z-index:2;
    -webkit-transition:visibility .3s ease-in-out, opacity .3s ease-in-out, padding-top 0s ease-in-out .3s;
    -moz-transition:visibility .3s ease-in-out, opacity .3s ease-in-out, padding-top 0s ease-in-out .3s;
    -o-transition:visibility .3s ease-in-out, opacity .3s ease-in-out, padding-top 0s ease-in-out .3s;
    transition:visibility .3s ease-in-out, opacity .3s ease-in-out, padding-top 0s ease-in-out .3s;
}
#intro_sect1 .bx_study_process > ul > li .disc > .inner{padding:1em;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.8);position: relative;}
#intro_sect1 .bx_study_process > ul > li .disc > .inner:after{content: ' ';width:0;height:0;border-bottom:10px solid rgba(0,0,0,0.8);border-left:8px solid transparent; border-right:8px solid transparent;
	position: absolute;left:0;right:0;margin:auto;bottom:100%;}
#intro_sect1 .bx_study_process > ul > li .disc p{color: #fff;}

#intro_sect1 .bx_study_process .smart > ul{}
#intro_sect1 .bx_study_process .smart > ul:after{content: '';display: block;clear: both;}
#intro_sect1 .bx_study_process .smart > ul > li{position: relative;width: 25%;float: left;}

#intro_sect1 .bx_study_process > ul > li > ul{position: relative;padding:0.5em 0 2em;}
/*#intro_sect1 .bx_study_process > ul > li > ul:before{content: '';bottom:0;left:0.5em;right:0.5em;border-bottom:1px solid #ccc;position: absolute;font-size: 1em;}*/
#intro_sect1 .bx_study_process > ul > li > ul > li{text-align: center;}
#intro_sect1 .bx_study_process > ul > li > ul > li a{display: inline-block;}
#intro_sect1 .bx_study_process > ul > li > ul > li a:hover .box{border-radius:50%;background-color: #f7961d;}
#intro_sect1 .bx_study_process > ul > li > ul > li a:hover .disc{visibility: visible;opacity: 1;padding-top:1em;
    -webkit-transition:visibility .3s ease-in-out, opacity .3s ease-in-out, padding-top .3s ease-in-out;
    -moz-transition:visibility .3s ease-in-out, opacity .3s ease-in-out, padding-top .3s ease-in-out;
    -o-transition:visibility .3s ease-in-out, opacity .3s ease-in-out, padding-top .3s ease-in-out;
    transition:visibility .3s ease-in-out, opacity .3s ease-in-out, padding-top .3s ease-in-out;
}

#intro_sect1 .assist{}
#intro_sect1 .assist > h4{text-align: center;margin-bottom:0.5em;position: relative;}
#intro_sect1 .assist > h4:after{content: '';bottom:50%;left:0.5em;right:0.5em;border-bottom:1px solid #ccc;position: absolute;font-size: 1em;}
#intro_sect1 .assist > h4 > span{display: inline-block;background-color: #fff;padding:0.5em;position: relative;z-index: 1;font-size: 1.125em;font-weight: 400;}
#intro_sect1 .assist > ul{padding:2em 0;border-bottom:1px solid #ccc}
#intro_sect1 .assist > ul:after{content: '';display: block;clear: both;}
#intro_sect1 .assist > ul > li{float: left;width: 50%;text-align: center;}
#intro_sect1 .assist > ul > li > a{display: inline-block;}
#intro_sect1 .assist > ul > li > a > dl{width:18em;height:8em;text-align: center;margin:auto;border-radius:1em;background-color: #E62F78;border:0.25em solid #E62F78;position: relative;overflow: hidden;z-index: 1;
	-webkit-transition:width .3s ease-in-out .3s; -moz-transition:width .3s ease-in-out .3s; -o-transition:width .3s ease-in-out .3s; transition:width .3s ease-in-out .3s;
}
#intro_sect1 .assist > ul > li > a > dl > dt{position: absolute;top:0;bottom:0;height:100%;width: 100%;
    -webkit-transition:width .3s ease-in-out .3s; -moz-transition:width .3s ease-in-out .3s; -o-transition:width .3s ease-in-out .3s; transition:width .3s ease-in-out .3s; }
#intro_sect1 .assist > ul > li > a > dl > dt > span{color: #fff;display: inline-block;vertical-align: middle;}
#intro_sect1 .assist > ul > li > a > dl > dd{background-color: #fff;margin-left:8em;height:100%;padding:0.5em;box-sizing:border-box;text-align: left;overflow: hidden;visibility: hidden;opacity: 0;
    -webkit-transition:visibility .3s ease-in-out, opacity .3s ease-in-out; -moz-transition:visibility .3s ease-in-out, opacity .3s ease-in-out; -o-transition:visibility .3s ease-in-out, opacity .3s ease-in-out; transition:visibility .3s ease-in-out, opacity .3s ease-in-out;}
#intro_sect1 .assist > ul > li > a > dl > dd > p{font-size: 1em;}
#intro_sect1 .assist > ul > li > a > dl > dd > p button{color: #E62F78;text-decoration: underline;}
#intro_sect1 .assist > ul > li > a:hover > dl{width:90%;
	-webkit-transition:width .3s ease-in-out; -moz-transition:width .3s ease-in-out; -o-transition:width .3s ease-in-out; transition:width .3s ease-in-out;
}
#intro_sect1 .assist > ul > li > a:hover > dl > dt{width:8em; -webkit-transition:width .3s ease-in-out; -moz-transition:width .3s ease-in-out; -o-transition:width .3s ease-in-out; transition:width .3s ease-in-out; }
#intro_sect1 .assist > ul > li > a:hover > dl > dd{visibility:visible;opacity: 1;
    -webkit-transition:visibility .3s ease-in-out .3s, opacity .3s ease-in-out .3s;
    -moz-transition:visibility .3s ease-in-out .3s, opacity .3s ease-in-out .3s;
    -o-transition:visibility .3s ease-in-out .3s, opacity .3s ease-in-out .3s;
    transition:visibility .3s ease-in-out .3s, opacity .3s ease-in-out .3s;
}

#intro_sect1 .assist > ul > li.bx1472{}
#intro_sect1 .assist > ul > li.mynote{}

.sect_mybrary{background-color: #68B5E6;overflow: hidden;;}
.sect_mybrary .cont{margin-top:3em;}
.sect_mybrary .cont > h3{font-size: 2.5em;margin-bottom:0.5em;text-align: center;font-weight: 300;color: #fff;}
.sect_mybrary .bx_intro{text-align: center;}
.sect_mybrary .bx_intro > h4{font-size: 1.5em;font-weight: 400;color: #10729D;margin-bottom:0.5em;}
.sect_mybrary .bx_intro > h4 small{font-size: 0.75em;color: #4f4f4f;}
.sect_mybrary .bx_intro > p{color: #fff;}
.sect_mybrary .bx_intro .img{text-align: center;margin-bottom:2em;}
.sect_mybrary .bx_intro .img img{max-width:100%;}

.sect_1472{background-color: #e5e5e5;overflow: hidden;}
.sect_1472 .cont{margin-top:3em;margin-bottom:3em;}
.sect_1472 .cont > h3{font-size: 2.5em;margin-bottom:0.5em;text-align: center;font-weight: 300;color: #E62F78;}
.sect_1472 .bx_intro{text-align: center;}
.sect_1472 .bx_intro > h4{font-size: 1.5em;font-weight: 400;color: #333;margin-bottom:0.5em;}
.sect_1472 .bx_intro > h4 small{font-size: 0.75em;color: #333;}
.sect_1472 .bx_intro > p{color: #666;}

.sect_mynote{background-color: #838383;overflow: hidden;}
.sect_mynote .cont{margin-top:3em;margin-bottom:5em;}
.sect_mynote .cont > h3{font-size: 2.5em;margin-bottom:0.5em;text-align: center;font-weight: 300;color: #F2E012;}
.sect_mynote .bx_intro{text-align: center;}
.sect_mynote .bx_intro > h4{font-size: 1.5em;font-weight: 400;color: #fff;margin-bottom:0.5em;}
.sect_mynote .bx_intro > h4 small{font-size: 0.75em;color: #fff;}
.sect_mynote .bx_intro > p{color: #fff;margin-bottom:4em;}

/*커뮤니티 - 우수자 사례*/

#area_winner .area_spot .cont{color: #fff;}

#area_winner .cate{margin-top:5em;background-color: #fff;}
#area_winner .list_type4{padding-top:2em;}

/*고객센터 - 문의하기*/
#area_contact .left_area{float:left;width:70%;position: relative;}
#area_contact .left_area:after{position: absolute;right:0;top:0;bottom:0;border-right: 1px solid #ccc;content: '';}
#area_contact .left_area #bx_write{margin-right:1em;}
#area_contact .right_area{float:right;width:30%;position: relative;}
#area_contact .bx_contact_info{margin:auto;max-width:300px;padding-left:1em;}
#area_contact .bx_contact_info h3{margin-top:1em;}
#area_contact .bx_contact_info dl{}
#area_contact .bx_contact_info dl > dt{margin-top:2em;}
#area_contact .bx_contact_info dl > dd{color:#666;font-size: 0.9375em;margin:0.5em 0;}
#area_contact .bx_contact_info dl > dd .email{font-size: 1.25em;font-weight: 300;color: #00a1ef;}
#area_contact .bx_contact_info dl > dd .tel{font-size: 1.5em;font-weight: 300;color: #00a1ef;}
#area_contact .bx_contact_info .btns{margin-top:2em;}
#area_contact .bx_contact_info .btns button.btn_pack{font-size: 0.875em;margin-bottom:0.5em;}


/*원격지원*/

#area_remote{}
#remote_sect1{overflow: hidden;position: relative;}
#remote_sect1 .bg .cover{background-color: rgba(255,255,255, 0.5);position: absolute;top:0;bottom:0;right:0;left:0;}
#remote_sect1 .cont{margin-top:15%;}
#remote_sect1 .cont > h3{text-align: center;font-size: 2.5em;font-weight: 300;margin-bottom:0.5em;}
#remote_sect1 .cont > p{text-align: center;font-size: 1.25em;line-height: 1.5;}
#remote_sect1 .cont > p .tel{font-size: 1.25em;color:#00a1ef;font-weight: 300;}
#remote_sect1 .list_remote{margin:4em 10% 0;}
.list_remote > ul{margin-left:-5%;}
.list_remote > ul > li{width:33.333%;float:left;margin-bottom:5%;}
.list_remote > ul > li > a{display: block;margin-left:15%;text-align: center;background-color: rgba(255,255,255,0.5);padding:1.5em;}
.list_remote .img{width:7.5em;height:7.5em;margin:auto;}
.list_remote .img img{max-width:100%;max-height:100%;}
.list_remote p{margin-top:2em;}

/*faq*/

.list_faq{padding:2em 0;}
.list_faq > ul > li{background-color:#fff;padding:2.1em 1.8em;overflow:hidden;border-bottom:1px solid #ccc;}
.list_faq > ul > li:first-child{border-top:2px solid #666}
.list_faq > ul > li{padding:0;position:relative;}
.list_faq > ul > li{
	-webkit-transition:opacity 0.5s linear; -moz-transition:opacity 0.5s linear; -ms-transition:opacity 0.5s linear; -o-transition:opacity 0.5s linear; transition:opacity 0.5s linear;
}
.list_faq a.inner{display:block; position: relative;padding:1em;}
.list_faq .con{display:block;}
.list_faq .con .cate{display:block; color: #999; margin-bottom:0.3em;font-size: 0.875em;}
.list_faq .con .que{color:#000000;}
.list_faq .con .que > b{position:absolute;}
.list_faq .con .que > span{display:block;margin-left:1.75em;line-height:1.5em;margin-right:3em;}
.list_faq .ans{display:none;overflow:hidden;}
.list_faq .ans > div {position:relative; margin:0 1em;padding:0.5em 0;border-top:1px solid #DDDFDE;}
.list_faq .ans > div > b{position:absolute;line-height:1.6667em;color:#E62F78;}
.list_faq .ans > div > p{display:block;margin-left:1.75em;line-height:1.6667em;font-size: 0.875em;}

.list_faq .stats{display:block;position: absolute;right:1.2727em;top:0;bottom:0;margin:auto; height:100%;font-size:1.375em;height:1.9091em;line-height:1.9091;}
.list_faq .stats .ico_toggle{position: relative;display:inline-block; height:1.375em; width:1.375em;border:1px solid #00A2D9;border-radius:50%;background-color: #fff;margin-left:0.4em; vertical-align:middle; box-sizing: border-box;}
.list_faq .stats .ico_toggle::before, .list_faq .stats .ico_toggle::after{display:block;position: absolute; content:"";top:5%;bottom:0;right:0;left:0;background-color: #00A2D9; width:2px;height:42.5%;margin:auto;}
.list_faq .stats .ico_toggle::before{ms-transform: rotate(45deg); /* IE 9 */    -webkit-transform: rotate(45deg); /* Safari */    transform: rotate(45deg); right:-27.6%;}
.list_faq .stats .ico_toggle::after{ms-transform: rotate(-45deg); /* IE 9 */    -webkit-transform: rotate(-45deg); /* Safari */    transform: rotate(-45deg); left:-27.6%;}
.list_faq > ul > li.on .con .que{color:#E62F78;}
.list_faq > ul > li.on .stats .ico_toggle{background-color: #00A2D9;}
.list_faq > ul > li.on .stats .ico_toggle::before, .list_faq > ul > li.on .stats .ico_toggle::after{background-color: #fff;top:-5%;}
.list_faq > ul > li.on .stats .ico_toggle::before{ms-transform: rotate(135deg); /* IE 9 */    -webkit-transform: rotate(135deg); /* Safari */    transform: rotate(135deg);}
.list_faq > ul > li.on .stats .ico_toggle::after{ms-transform: rotate(-135deg); /* IE 9 */    -webkit-transform: rotate(-135deg); /* Safari */    transform: rotate(-135deg);}




/*로그인*/
#pop_login{position:fixed;left:0;right:0;z-index:31;width:30.5em;min-height:31.25em;top:0px; margin:auto; background-color: #fff;display:none;visibility:hidden;opacity:0;}
#pop_login.on{visibility:visible;opacity:1;}
#pop_login > .inner{margin:2.5em;position:relative;overflow:hidden;}
#pop_login .login_by_sns > ul{margin-top:2em;}
#pop_login .login_by_sns > ul > li > a{
	height: 2.5833em; line-height: 2.5833em;  display: inline-block; *display: inline; *zoom: 1; position: relative; color: #fff;font-size: 0.875em;width:100%;border-radius:0.3em;text-align: center;margin-bottom:1em;
}

/*회사소개*/

#company_sect1{overflow: hidden;position: relative;}
#company_sect1 .bg .cover{background-color: rgba(0,0,0, 0.3);position: absolute;top:0;bottom:0;right:0;left:0;}
#company_sect1 .cont{margin-top:17%;}
#company_sect1 .cont > h3{text-align: center;font-size: 3em;font-weight: 300;margin-bottom:0.5em;color: #fff;}
#company_sect1 .cont > h4{font-size: 2em;text-align: center;font-weight: 400;margin-bottom:5%;color: #fff;}
#company_sect1 .cont .bx_p{text-align: center;}
#company_sect1 .cont .bx_p p{font-size: 1.125em;line-height: 1.5;margin:0.75em 0;color: #fff;}

/*가맹학원 찾기*/

#branch_sect1{position: absolute;top:3.5em;bottom:0;left:0;right:0;}

#area_map{position:absolute;right:770px;left:0;top:0;/*bottom:5.6875em;*/bottom:0;overflow: hidden;}
#map_canvas{width:100%;height:100%;}
#area_petf_search > h2{display: none;}
#area_petf_list{position:absolute;width:770px;right:0;overflow-y:auto;background-color: #f0f0f0;top:0;/*bottom:5.6875em;*/bottom:0;z-index: 2;box-shadow: -1px 0 10px #a1a1a1;}
#area_petf_list .bx_btn_more{display: none;}
#area_petf_search{padding:2.125em 2.125em 0.5em; background-color: #fff;}
#area_petf_search > dl > dt{float:left;clear:both;width:5.3333em; font-size: 0.9375em;line-height:2.4;}
#area_petf_search > dl > dd{margin-bottom:1em;line-height:2.125;margin-left:5.5em;position: relative;}
#area_petf_search > dl > dd .btns{display: inline-block;margin-left:0.5em;}
#area_petf_search > dl > dd button.btn_search{line-height:2em;padding:0 1.25em;background-color: #00a1ef;color: #fff;box-sizing:content-box;border:1px solid #00a1ef;border-radius:0.2em;}
#area_petf_search > dl > dd label select{min-width:11.7692em;}
#area_petf_search > dl > dd .lst_check{line-height: 1em;overflow: visible;}
#area_petf_search > dl > dd .lst_check > span{margin-bottom:0.2em;padding:0 0.2em}
#area_petf_search > dl > dd .lst_check > span > label{line-height:2.2667;font-size:0.9375em;min-width:4.9333em;}
#area_petf_search .add_opt{display: none;}
#care_location.off, #care_location +dd.off{display: none;}
#care_option.off, #care_option +dd.off{display: none;}
#pet_common_btn{display: none;}

#box_branch_list{padding:1em;}
.branch_list{}
.branch_list > ul{margin-left:-1em;}
.branch_list > ul:after{content: "";clear: both;display: block;}
.branch_list > ul > li{width:33.333%;margin-bottom:1em;float: left;}
.branch_list > ul > li > .inner{margin-left:1em;background-color: #fff;box-shadow:1px 1px 8px -2px rgba(0,0,0,0.7)}
.branch_list > ul > li .img{height:0;padding-bottom:65%;position: relative;overflow: hidden;}
.branch_list > ul > li .img > a{position: absolute;top:0;bottom:0;left:0;right:0;}
.branch_list > ul > li .img > a img{width:100%;}
.branch_list > ul > li .con{padding:0.5em;}
.branch_list > ul > li .con h3{font-size: 1em;line-height:1.5;}
.branch_list > ul > li .con h3 > a{display: block;}
.branch_list > ul > li .con h4{font-size: 0.875em;line-height:1.5;height:3em;overflow: hidden;-ms-text-overflow: ellipsis;font-weight: 400;}
.branch_list > ul > li .con h4 > a{display: block;}
.branch_list > ul > li .con p.tel{}
.branch_list > ul > li .con p.tel a{font-size: 1.25em;font-weight: 300;color: #00a1ef;}

#aside_nav{}
#aside_nav > nav{position: fixed;height:192px;right: 2%;top: 0;bottom: 0;margin: auto;z-index: 5;}
#aside_nav > nav > ul{height: 100%;text-align: right;}
#aside_nav > nav > ul > li{height:16.666%;}
#aside_nav > nav > ul > li.blank{display: none;}
#aside_nav > nav > ul > li > a{text-align: right;display: inline-block;font-size: 0.875em;position: relative;height:100%;color:rgba(50,50,50,.7);}
#aside_nav .tit{vertical-align: middle;white-space: nowrap;padding-right:15px; position: absolute;right: 13px;top: 0;bottom: 0;height:1em;line-height: 1em;margin: auto;
	-webkit-transition: color .3s linear;
	-o-transition: color .3s linear;
	transition: color .3s linear;
}
#aside_nav .ico{display: inline-block;vertical-align: middle;width: 14px;height: 14px;position: relative;}
#aside_nav .ico > span{width: 0;height: 0;border:4px solid #464646;margin: auto;position: absolute;border-radius:50%;top: 0;bottom: 0;left: 0;right: 0;
	-webkit-transition:  width .2s linear, height .2s linear, border-width .2s linear, color .3s linear;
	-o-transition:  width .2s linear, height .2s linear, border-width .2s linear, color .3s linear;
	transition:  width .2s linear, height .2s linear, border-width .2s linear, color .3s linear;
}
#aside_nav > nav > ul > li.on .ico > span{width: 10px;height: 10px;border-width:2px;}
html.bd_bg0 #aside_nav > nav > ul > li > a,
html.bd_bg2 #aside_nav > nav > ul > li > a,
html.bd_bg4 #aside_nav > nav > ul > li > a{color:#aaa;}
html.bd_bg0 #aside_nav > nav .ico > span,
html.bd_bg2 #aside_nav > nav .ico > span,
html.bd_bg4 #aside_nav > nav .ico > span{border-color:#ccc;}
