@charset "UTF-8";

/* login */
#login { position: relative; width: 100vw; min-width: 1100px; height: 100vh; background: linear-gradient(90deg, rgba(55,100,245,1) 0%, rgba(125,200,225,1) 100%); overflow-y:hidden;}
#login .loginSet { width: 900px; height: 587px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border-radius:22px; text-align: center; }
#login .loginSet  > h1 {width: 241px; height: 78px; background: url('../images/logo_b.png') no-repeat; margin: 62px auto 38px;}
#login .loginSet  > p {font-size:25px; font-weight: 500; }
#login .loginSet  > p > span {color: #3764F5; }
#login .btm-logo { position: fixed; bottom:42px; left: 50%; margin-left:-69px; display: block; width: 137px; height: 23px; background: url('../images/btm_logo.png') no-repeat;}

.input-form { width: 460px; margin: 40px auto 0; }
.input-form > span { display: block; }
.input-form > span > input { width: 100%; line-height: 50px; border:1px solid #C2C2C2; border-radius: 5px; margin-bottom: 8px; height: 50px; background-position: left 15px top 13px; background-repeat: no-repeat; padding-left: 40px; }
.input-form > span:first-of-type > input { background-image: url('../images/ico_id.png'); }
.input-form > span:last-of-type > input { background-image: url('../images/ico_pw.png'); }

.input-etc { width: 460px; margin: 0 auto 29px; display: flex; align-items: center; justify-content: space-between;}
.input-etc .alarm-text { font-size: 14px; color: #FF0000;}
.input-etc > label { font-size:15px; color: #555; }
.input-etc > label > input { vertical-align: middle; margin-right: 3px; }

.loginSet .btn { width: 19.4%; }
.loginSet .link {width: 153px; margin: 50px auto 0; }
.loginSet .link a { display: block; width: 100%; background: url('../images/ico_service.png') no-repeat; background-position: left center; padding-left: 15px; font-size: 15px; color: #3764F5; }

/* header */
html,body { width: 100%; height: 100%; }
#wrap { position: relative; width: 100%; height: 100vh; min-width: 1440px; }
#header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; width: 100%; height: 145px;; min-width: 1440px; background: #fff; padding:0 34px; border-bottom: 1px solid #C2C2C2; }
#header > h1 { margin-top:28px; }
#header > h1 > a {display: block; width: 139px; height: 46px;background: url('../images/logo_s.png') no-repeat; }
#header #nav { width: 20%;  }
#header #nav.new_nav { width: calc(100% - 500px); }
#header #nav.new_nav .nav__main{ width: 25%;margin: 0 auto; }
#header #nav.chief { width: 60%; }
#header #nav .nav__main ul,
#header #nav .nav__sub ul{ display: flex; align-items: center; justify-content:center;}
#header #nav .nav__main ul { margin-top: 20px; width: 100%; }
#header #nav .nav__main ul li { flex:1; }
#header #nav .nav__main ul li a { display: block; border:1px solid #C2C2C2;  text-align: center; padding:12px 0 14px; color: #646464; }
#header #nav .nav__main ul li a:hover,
#header #nav .nav__main ul li.on a {background: #2D71C4; color:#fff;}
#header #nav .nav__main ul li:not(:last-child) a {border-right: 0;}
#header #nav .nav__main ul li:first-child a {border-radius: 5px 0 0 5px;}
#header #nav .nav__main ul li:last-child a {border-radius: 0 5px 5px 0;}

#header #nav .nav__sub { position: absolute; left:50%; bottom:0; transform:translateX(-50%);}
#header #nav .nav__sub ul li{ min-width: 180px; }
#header #nav .nav__sub ul li.wide{ min-width: 230px; }
#header #nav .nav__sub ul > li > a {display: block; position: relative; width: 100%;  font-size: 18px; padding:22px 0 24px 33px;  font-weight: 500; color: #646464; border-bottom:2px solid transparent; text-align: center; }
#header #nav .nav__sub ul > li > a:before {content: ""; width: 24px; height: 24px; background-repeat: no-repeat; background-position:center center; position: absolute; top: 24px;}
#header #nav .nav__sub ul > li > a:hover,
#header #nav .nav__sub ul > li.on > a { color: #2D71C4; border-bottom:2px solid #2D71C4;}

#header #nav .nav__sub ul > li:first-child > a:before {background-image: url('../images/ico_nav01.png');left:42px; }
#header #nav .nav__sub ul > li:nth-child(2) > a:before {background-image: url('../images/ico_nav02.png');left:55px; }
#header #nav .nav__sub ul > li:last-child > a:before {background-image: url('../images/ico_nav03.png'); left:36px; }

#header #nav .nav__sub ul > li:first-child:hover > a:before,
#header #nav .nav__sub ul > li:first-child.on > a:before {background-image: url('../images/ico_nav01_on.png');}
#header #nav .nav__sub ul > li:nth-child(2):hover > a:before,
#header #nav .nav__sub ul > li:nth-child(2).on > a:before {background-image: url('../images/ico_nav02_on.png');}
#header #nav .nav__sub ul > li:last-child:hover > a:before,
#header #nav .nav__sub ul > li:last-child.on > a:before {background-image: url('../images/ico_nav03_on.png');}

#header #nav .nav__sub_seo { margin: 0 auto; width: 1200px; }
#header #nav .nav__sub_seo > ul li a{ padding-right: 30px; }
#header #nav .nav__sub_seo > ul > li > a {display: block; position: relative; width: 100%;  font-size: 18px; padding:22px 32px 24px 30px;  font-weight: 500; color: #646464; border-bottom:2px solid transparent; text-align: center; letter-spacing: -0.5px}
#header #nav .nav__sub_seo > ul > li > a:before {display: none;}
#header #nav .nav__sub_seo > ul > li > a:hover,
#header #nav .nav__sub_seo > ul > li.on > a { color: #2D71C4; border-bottom:2px solid #2D71C4;}
#header #nav .nav__sub_seo > a {position: absolute; display: block; top: 0; }
#header #nav .nav__sub_seo > a.prev {left:0}
#header #nav .nav__sub_seo > a.next {right:0}
#header #nav .nav__sub_seo ul.part2 {  display: flex; align-items: flex-end; justify-content: flex-start;}
#header #nav .nav__sub_seo ul.part2 > li { width: auto; }
#header #nav .nav__sub_seo ul.part2 > li > a {display: flex; align-content: center;  }
#header #nav .nav__sub_seo ul.part2 > li > a > span { display: block; white-space:nowrap;}
#header #nav .nav__sub_seo ul.part2 > li > a i.icon { display: block; width: 21px; height: 27px; background-repeat: no-repeat; background-position: center center; margin-right: 5px;}
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav1 { background-image:url('../images/ico_nav0201.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav2 { background-image:url('../images/ico_nav0202.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav3 { background-image:url('../images/ico_nav0203.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav4 { background-image:url('../images/ico_nav0204.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav5 { background-image:url('../images/ico_nav0205.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav6 { background-image:url('../images/ico_nav0206.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav7 { background-image:url('../images/ico_nav0207.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav8 { background-image:url('../images/ico_nav0208.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav9 { background-image:url('../images/ico_nav0209.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav10 { background-image:url('../images/ico_nav0210.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav11 { background-image:url('../images/ico_nav0211.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav12 { background-image:url('../images/ico_nav0212.png') }
#header #nav .nav__sub_seo ul.part2 > li > a i.icon.nav13 { background-image:url('../images/ico_nav0213.png') }
#header #nav .nav__sub_seo ul.part2 > li.on > a i.icon.nav1,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav1 { background-image:url('../images/ico_nav0201_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav2,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav2 { background-image:url('../images/ico_nav0202_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav3,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav3 { background-image:url('../images/ico_nav0203_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav4,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav4 { background-image:url('../images/ico_nav0204_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav5,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav5 { background-image:url('../images/ico_nav0205_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav6,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav6 { background-image:url('../images/ico_nav0206_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav7,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav7 { background-image:url('../images/ico_nav0207_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav8,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav8 { background-image:url('../images/ico_nav0208_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav9,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav9 { background-image:url('../images/ico_nav0209_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav10,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav10 { background-image:url('../images/ico_nav0210_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav11,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav11 { background-image:url('../images/ico_nav0211_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav12,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav12 { background-image:url('../images/ico_nav0212_on.png') }
#header #nav .nav__sub_seo ul.part2 > li.on  > a i.icon.nav13,
#header #nav .nav__sub_seo ul.part2 > li:hover > a i.icon.nav13 { background-image:url('../images/ico_nav0213_on.png') }

/* depth2 */
#header #nav .nav__sub_seo ul.part2 > li { position: relative;}
#header #nav .nav__sub_seo ul.part2 > li ul.depth2 { position: absolute; z-index: 10; background: #fff;  display: none; background: #eaf1fa; border-radius: 0 0 8px 8px; text-align: center; padding: 10px; top: 73px; border: 1px solid #ddd; border-top:0;left:0; }
#header #nav .nav__sub_seo ul.part2 > li:nth-child(1) ul.depth2 { width: 487px; }
#header #nav .nav__sub_seo ul.part2 > li:nth-child(2) ul.depth2 { width: 617px; }
#header #nav .nav__sub_seo ul.depth2 li { float: left;}
#header #nav .nav__sub_seo ul.depth2 li a { float: left; text-align: center; background: #fff; padding: 10px 20px; margin-left: 10px; border: 2px solid transparent; }
#header #nav .nav__sub_seo ul.depth2 li.on a,
#header #nav .nav__sub_seo ul.depth2 li a:hover {border: 2px solid #2D71C4; color: #2D71C4; }

#header #nav .nav__sub_seo ul.part2 > li.on ul.depth2 { display: block; }

/* scroll menu */
.nav_arrow { position: absolute; right: calc(50% - 650px); bottom:26px;  display: none; background-position: center center; background-repeat: no-repeat; width: 26px; height: 26px; text-indent: -999999em;}
.nav_arrow.on { display: block;}
.nav_arrow.prev_arrow { background-image: url('../images/ico_prev_arrow.png')}
.nav_arrow.next_arrow { background-image: url('../images/ico_next_arrow.png')}

#header #nav .nav__sub ul.part3 { display: flex; align-items: flex-end; justify-content: flex-start;}
#header #nav .nav__sub ul.part3 > li { width: auto; }
#header #nav .nav__sub ul.part3 > li > a { display: flex; align-content: center;  }
#header #nav .nav__sub ul.part3 > li > a:hover,
#header #nav .nav__sub ul.part3 > li.on > a { color: #2D71C4; border-bottom:2px solid #2D71C4;}
#header #nav .nav__sub ul.part3 > li > a:before {display: none;}
#header #nav .nav__sub ul.part3 > li > a { position: relative; width: 100%;  font-size: 18px; padding:22px 50px 24px 33px;  font-weight: 400; color: #646464; border-bottom:2px solid transparent; text-align: center; }
#header #nav .nav__sub ul.part3 > li > a i.icon { display: block; width: 21px; height: 27px; background-repeat: no-repeat; background-position: center center; margin-right: 5px;}
#header #nav .nav__sub ul.part3 > li > a i.icon.nav1 { background-image:url('../images/ico_nav0301.png') }
#header #nav .nav__sub ul.part3 > li > a i.icon.nav2 { background-image:url('../images/ico_nav0302.png') }
#header #nav .nav__sub ul.part3 > li > a i.icon.nav3 { background-image:url('../images/ico_nav0303.png') }
#header #nav .nav__sub ul.part3 > li > a i.icon.nav4 { background-image:url('../images/ico_nav0401.png') }
#header #nav .nav__sub ul.part3 > li > a i.icon.nav5 { background-image:url('../images/ico_nav0201.png') }
#header #nav .nav__sub ul.part3 > li.on > a i.icon.nav1,
#header #nav .nav__sub ul.part3 > li:hover > a i.icon.nav1 { background-image:url('../images/ico_nav0301_on.png') }
#header #nav .nav__sub ul.part3 > li.on  > a i.icon.nav2,
#header #nav .nav__sub ul.part3 > li:hover > a i.icon.nav2 { background-image:url('../images/ico_nav0302_on.png') }
#header #nav .nav__sub ul.part3 > li.on  > a i.icon.nav3,
#header #nav .nav__sub ul.part3 > li:hover > a i.icon.nav3 { background-image:url('../images/ico_nav0303_on.png') }
#header #nav .nav__sub ul.part3 > li.on  > a i.icon.nav4,
#header #nav .nav__sub ul.part3 > li:hover > a i.icon.nav4 { background-image:url('../images/ico_nav0401_on.png') }
#header #nav .nav__sub ul.part3 > li.on  > a i.icon.nav5,
#header #nav .nav__sub ul.part3 > li:hover > a i.icon.nav5 { background-image:url('../images/ico_nav0201_on.png') }


#header .tmenu { display: flex; align-items: center; justify-content: flex-end; margin-top: 30px; }
#header .tmenu li {position: relative;}
#header .tmenu li.manager:after { content: ""; position: absolute; right:15px; top:0; width: 1px; height:24px; background: #C2C2C2; }
#header .tmenu li a { display: block; font-size: 14px; color: #646464; padding: 0 30px 0 20px; background-position: left center; background-repeat: no-repeat; text-align: left; line-height: 24px; white-space: nowrap;}
#header .tmenu li.manager a { background-image: url('../images/ico_manager.png')}
#header .tmenu li.logout a { background-image: url('../images/ico_logout.png'); }


/* container */
#container { position: relative; display: flex; align-items: flex-start; justify-content: stretch; min-width: 1440px; }
#asdie { position: relative;  width: 16%;  background: #768392; overflow-y:auto; overflow-x:hidden; min-height:calc(100% - 154px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.5) #768392; }
#asdie .lnb li a{display: block; padding: 19px 0 19px 50px; color: #fff;}
#asdie .lnb li.on a,
#asdie .lnb li a:hover { background: #45566A url('../images/ico_lnb_arrow.png') no-repeat; background-position: right 27px center; }

#asdie::-webkit-scrollbar { width: 10px; }
#asdie::-webkit-scrollbar-thumb { background-color: #fff; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; }
#asdie::-webkit-scrollbar-track { background-color: #768392; border-radius: 10px; box-shadow: inset 0px 0px 5px #768392; }

#asdie.aside_photo {  width: 512px !important;  background: #f1f2f4 !important;padding: 30px 50px  }
#asdie.aside_nameplate {  width: 512px !important;  background: #f1f2f4 !important;padding: 30px 38px  }
#asdie.aside_depth {  width: 552px !important; display: flex; align-items: stretch; justify-content: flex-start; background: #fff; }
#asdie.aside_depth.has_depth1 { width: 275px !important; }
#asdie.aside_depth > div { width: 276px; border-right:1px solid #C2C2C2; min-height: calc(100vh - 145px)}
#asdie.aside_depth > div ul li a:first-of-type { display: block; padding: 12px 17px 14px 20px; letter-spacing: -1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#asdie.aside_depth > div ul li.on a,
#asdie.aside_depth > div ul li a:hover {background: rgba(45, 113, 196, 0.1);}
#asdie.aside_depth .lnb_title  {display: flex; align-items: center; justify-content: space-between;}
#asdie.aside_depth .lnb_title h2{ font-size: 18px;  color: #fff; padding: 17px; font-weight: 500;}
#asdie.aside_depth .lnb_title p {display: flex; align-items: center; justify-content: flex-end;}
#asdie.aside_depth .lnb_title p a {display: block; width: 24px; height: 24px; background-position: center center; background-repeat: no-repeat; margin-right: 10px; }
#asdie.aside_depth .lnb_title p a.add_lnb__btn { background-image: url('../images/myfamilie/ico_plus.png');}
#asdie.aside_depth .lnb_title p a.del_lnb__btn { background-image: url('../images/ico_del.png');}
#asdie.aside_depth > div.lnb_depth1 .lnb_title { background: #768392; }
#asdie.aside_depth > div.lnb_depth2 .lnb_title{ background: #647282; }
.no_use { position: absolute; left: 110px; top: -32px; background: #eaeaea; padding: 5px 10px; border-radius: 8px 8px 0 0;}
.lnb_box {position: absolute; width: 276px !important; height: calc(100vh - 206px); background: rgba(0,0,0,.5); left: 0; top: 0;}

/* content */
#content { position: relative; width: 84%; padding: 30px 35px; background: #fff; }
#content.photo_zone_wrap { width: calc(100% - 512px); ;}
#content.depth2_cont { width: calc(100% - 552px); ;}
#content.depth1_cont { width: calc(100% - 275px); ;}
.path__button,
.path__button .path { display: flex; align-items: center; }
.path__button {justify-content: space-between; margin-bottom: 15px;}
.path__button .path {justify-content: flex-start; letter-spacing: -4%; color: #646464}
.path__button .path .current > a {color: #2D71C4;}
.path__button > button { min-width: 187px;}

.h3__title {border-bottom: 1px solid #2D71C4; padding-bottom: 17px;}
.h3__title > h3 { font-size: 22px; color: #2D71C4; display: flex; align-items: center; margin-bottom: 7px; font-weight: 400;}
.h3__title > h3 > span { font-size:15px; color: #646464; letter-spacing: 2px; font-weight: 500; margin-left: 10px;}
.h3__title > h3 > span { font-size:15px; color: #646464; letter-spacing: 2px; font-weight: 500; margin-left: 10px;}
.h3__title.no-line {border-bottom: 0 !important; padding: 0 !important}
.h3__title.no-line > h3 {margin: 0 0 3px 0; }

#logoutPop { width: 400px;}