@charset "utf-8"; #doc-wrap{width:100%;} /* 페이지 로딩 */ #loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:5;background:rgba(255,255,255,1) url(../../images/common/ci_logo.svg) no-repeat center center;} #loading{position:absolute;left:50%;top:50%;margin:-100px 0 0 -25px;display:inline-block;width:50px;height:50px;border:3px solid rgba(0,0,0,0.3);border-radius:50%;border-top-color:var(--color-second);animation:spin 1s ease-in-out infinite;} @-webkit-keyframes spin{to{transform:rotate(360deg);}} @-moz-keyframes spin{to{transform:rotate(360deg);}} @-ms-keyframes spin{to{transform:rotate(360deg);}} @-o-keyframes spin{to{transform:rotate(360deg);}} @keyframes spin{to{transform:rotate(360deg);}} /* 스킵네비게이션 */ #skipNavi{position:relative;height:0;text-align:center;z-index:6;} #skipNavi .skipLink{position:absolute;top:-1000px;left:-1000px;overflow:hidden;} #skipNavi .skipLink:focus, #skipNavi .skipLink:active{top:0;left:0;width:100%;height:40px;line-height:40px;background-color:var(--color-second);color:#fff;} /* 레이아웃 */ #top-wrap{display:block !important;position:relative;width:100% !important;z-index:5;} #top-wrap #header-wrap{position:relative;width:100%;padding-top:10px;height:90px;background-color:var(--background-color);z-index:1;} #top-wrap .cnavi-fix{position:fixed;width:100%;left:0;top:0;background-color:rgba(52, 57, 68, .9);} #footer-wrap{position:relative;padding:20px 0;width:100%;border-top:1px solid #efefef;z-index:2;} #container-wrap{width:100%;z-index:1;} .body-slide-wr{position:relative;width:100%;height:100%;transition:margin 0.3s ease;} .body-slider-ovclick{position:fixed;width:100%;height:100%;left:-100%;top:0;background:rgba(0,0,0,0.25);transition:margin 0.3s ease;z-index:4;} /* 메뉴 */ #header-wrap .mn-bg{position:absolute;width:100%;height:100%;left:0;top:0;background-color:transparent;border-bottom:none;z-index:1;} #header-wrap .mn-bg.over{box-shadow:0 7px 10px rgba(33,33,33,0.3);} #header-wrap .mn-bar{position:absolute;left:0;top:70px;width:100%;display:block;z-index:1;background-color:#f4f4f4;background-color:rgba(243, 244, 247, .99);border-bottom:1px solid #353e50;} #header-wrap .mn-bar .caption{margin:50px 0 0 1px;} #header-wrap .mn-bar .caption span{display:block;font-size:16px;color:#666;line-height:28px} #header-wrap .mn-bar .caption strong{clear:both;font-size:29px;font-weight:bold;color:#333;line-height:36px} #header-wrap .mn-bar .caption .caption_bg{width:230px;height:292px;background:url(../../images/common/bg/bg_topmenu.png) right bottom no-repeat;} .isIE7 #header-wrap .mn-bg.over{border-bottom:1px solid #ddd;} .menu-open #header-wrap .mn-bar{display:none;border-bottom:1px solid #353e50} /* 주메뉴 */ #header{position:relative;width:100%;margin-left:auto;margin-right:auto;z-index:2;} #header #mainNavi-wrap #mainNavi .ovbar{position:absolute;border-bottom:2px solid var(--color-accent);width:auto;height:14px;top:35px;*top:38px;display:block;overflow:hidden;} #header .container{z-index:2;} #header #logo{display:block;float:left;font-size:0;z-index:2;transition:left .3s ease;} #header #logo h1{display:block;} #header #logo h1 a{display:block;line-height:70px;} #header #logo h1 a img{vertical-align:middle;height:40px;} #header #logo h1 a img.sub_logo{margin:0 0 6px 20px;} #header #subNavi-wrap{display:none;width:100%;} #header #subNavi-wrap a{display:inline-block;/* padding-left:5%;*/padding-left:15px;width:100%;line-height:70px;font-size:1.5em;color:#fff;} #header #subNavi-wrap a:focus,#header #subNavi-wrap a:active,#header #subNavi-wrap a:hover{color:#01a3e6;} #header #subNavi-wrap a i{display:inline-block;margin-right:5px;width:15px;height:15px;border-top:solid 3px currentColor;border-right:solid 3px currentColor;-webkit-transform:rotate(-135deg);transform:rotate(-135deg);} #header #mainNavi-wrap{display:block;position:relative;left:0;top:0;height:70px;overflow:hidden;z-index:1;} #header #mainNavi-wrap .m-global{display:none} #header #mainNavi-wrap #mainNavi{display:block;height:70px;background-color:transparent;} /*.isIE7 #header #mainNavi-wrap #mainNavi .ovbar{display:none !important;} .isIE7 #header #mainNavi-wrap #mainNavi .over .mn_a1{display:block;border-bottom:3px solid #0e6fb6;}*/ #header #mainNavi-wrap #mainNavi .topmenu{display:none;position:relative;margin-left:56.5px;text-align:center;} #header #mainNavi-wrap #mainNavi .topmenu:after{clear:both;content:"";display:block;} #header #mainNavi-wrap #mainNavi .topmenu li.mn_l1{float:left;position:relative;text-align:center;line-height:1.25em;} #header #mainNavi-wrap #mainNavi .topmenu li.mn_l1:last-child .mn_a1 .mn_s1:after{display:none} #header #mainNavi-wrap #mainNavi .topmenu .tgl-btn{display:none;} #header #mainNavi-wrap #mainNavi .topmenu li .mn_a1{display:block;padding:26px 24.5px;font-size:1em;color:var(--color-second);text-align:center;font-weight:bold;} #header #mainNavi-wrap #mainNavi .topmenu li .mn_a1 .mn_s1{display:block;position:relative;padding:0;line-height:100%;font-weight:bold;transition:padding .3s ease;} #header #mainNavi-wrap #mainNavi .topmenu li:first-child .mn_a1 .mn_s1{padding-left:0;background:none;} /* #header #mainNavi-wrap #mainNavi .topmenu li .mn_a1 .mn_s1:after{content:"";display:block;position:absolute;width:10px;height:10px;right:-5px;top:50%;margin:-5px 0 0 0;background:url(topmenu_dot.png) no-repeat center center} */ #header #mainNavi-wrap #mainNavi .topmenu li .mn_a1:hover .mn_s1, #header #mainNavi-wrap #mainNavi .topmenu li .mn_a1:focus .mn_s1, #header #mainNavi-wrap #mainNavi .topmenu li .mn_a1:active .mn_s1{color:var(--color-accent);} #header #mainNavi-wrap #mainNavi .topmenu li.over .mn_a1 .mn_s1{color:var(--color-accent) !important;} #header #mainNavi-wrap #mainNavi .topmenu li:last-child .depth2-wrap{border-right:0} /* depth2-wrap 위치 */ #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap{display:none;position:absolute;top:70px;*top:70px;left:0;padding:18px 0;width:100%;max-width:1000px;line-height:120%;visibility:hidden;border-right:1px solid #d7d7d7;z-index:11} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2{position:relative;width:100%;height:auto;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2:after{content:"";display:block;clear:both;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 li{position:relative;/*white-space:nowrap;*/letter-spacing:-1px;line-height:100%;text-align:left;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 a, #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 a span{display:inline-block;font-size:14px;font-weight:normal;/*white-space:nowrap;*/color:#4d4d4d;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 .blt{display:none;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 .mn_a2{padding:12px 10px;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 .mn_a2 span{cursor:pointer;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 .mn_a2 span.txt{display:block;padding:0} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 .mn_a2:hover span, #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 .mn_a2:focus span, #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 .mn_a2:active span, #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 .over .mn_a2 span{color:#5697f5;text-decoration:underline;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth2 .mn_a2:hover .blt{display:none;} /* depth3-wrap 위치 */ #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap{padding:0 20px;width:100%;max-width:1000px;line-height:120%;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3{position:relative;width:100%;height:auto;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3:after{content:"";display:block;clear:both;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 li{position:relative;white-space:nowrap;letter-spacing:-1px;line-height:100%;text-align:left;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 a, #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 a span{display:inline-block;font-size:16px;font-weight:normal;white-space:nowrap;color:#4d4d4d;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 .blt{display:none;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 .mn_a3{padding:12px 20px;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 .mn_a3 span{cursor:pointer;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 .mn_a3 span.txt{display:block;padding:0} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 .mn_a3:hover span, #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 .mn_a3:focus span, #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 .mn_a3:active span, #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 .over .mn_a3 span{color:#01a3e6;text-decoration:underline;} #header #mainNavi-wrap #mainNavi .topmenu .depth2-wrap .depth3-wrap .depth3 .mn_a3:hover .blt{display:none;} #header #mainNavi-wrap #mainNavi .topmenu-right{display:flex;float:right;margin-top:10px;padding:0 5px;justify-content:space-between;align-items:center;height:50px;background-color:var(--txt-white);border:1px solid var(--border-color-10);border-radius:25px;} #header #mainNavi-wrap #mainNavi .topmenu-right li:last-child{margin-right:15px;} #header #mainNavi-wrap #mainNavi .topmenu-right li a{position:relative;display:block;padding-left:15px;margin-left:15px;font-size:0.875em;color:var(--txt-color-20);line-height:1;} #header #mainNavi-wrap #mainNavi .topmenu-right li a::before{content:'';display:inline-block;position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:22px;background-color:var(--border-color-20);} #header #mainNavi-wrap #mainNavi .topmenu-right li a:hover, #header #mainNavi-wrap #mainNavi .topmenu-right li a:active, #header #mainNavi-wrap #mainNavi .topmenu-right li a:focus{color:var(--color-third);} #header #mainNavi-wrap #mainNavi .topmenu-right li a i{display:inline-block;margin-right:5px;width:22px;height:22px;vertical-align:middle;background-repeat:no-repeat;} #header #mainNavi-wrap #mainNavi .topmenu-right li a i.mypage{background-image:url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cg stroke='%23686868' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' clip-path='url(%23a)'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0ZM6 21v-2a4 4 0 0 1 4-4h2.5M17.001 19a2 2 0 1 0 4 0 2 2 0 0 0-4 0ZM19.001 15.5V17M19.001 21v1.5M22.032 17.25l-1.3.75M17.27 20l-1.3.75M15.97 17.25l1.3.75M20.733 20l1.3.75'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");} #header #mainNavi-wrap #mainNavi .topmenu-right li a i.logout{background-image:url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cg stroke='%23686868' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' clip-path='url(%23a)'%3E%3Cpath d='M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M9 12h12l-3-3M18 15l3-3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");} #header #mainNavi-wrap #mainNavi .topmenu-right li .user-profile{display:block;font-size:0.875em;color:var(--color-third);font-weight:500;} #header #mainNavi-wrap #mainNavi .topmenu-right li .tgl-btn{display:none;} #header #mainNavi-wrap #mainNavi .topmenu-right li .user-profile span,#header #mainNavi-wrap #mainNavi .profile-info span{position:relative;display:inline-block;margin-right:10px;width:40px;height:40px;line-height:40px;font-size:0;border-radius:50%;background:var(--border-color-10) url(../../images/common/icon/ic_user_m.png) center no-repeat;background-size:cover;vertical-align:middle;overflow:hidden;} #header #mainNavi-wrap #mainNavi .topmenu-right li .user-profile span img,#header #mainNavi-wrap #mainNavi .profile-info span img{position:absolute;top:50%;left:50%;min-width:100%;height:100%;font-size:0;vertical-align:middle;transform:translate(-50%, -50%);} #header #mainNavi-wrap #mainNavi .profile-info{position:relative;letter-spacing:0;} #header #mainNavi-wrap #mainNavi .profile-info h2{padding-right:60px;line-height:1.5em;font-size:1em;font-weight:normal;color:var(--color-second);vertical-align:middle;} #header #mainNavi-wrap #mainNavi .profile-info h2 em{margin-left:5px;padding:4px 9px 3px 8px;line-height:1.125em;font-size:.688em;font-style:normal;color:var(--color-white);border-radius:10px;background-color:var(--color-accent);vertical-align:middle;} #header #mainNavi-wrap #mainNavi .profile-info h2 p{font-size:0.813em;font-weight:normal;} #header #mainNavi-wrap #mainNavi .profile-info a{position:absolute;right:0;top:4px;line-height:3em;font-size:0.813em;color:var(--color-second)} #header #mainNavi-wrap #mainNavi .profile-info a:hover, #header #mainNavi-wrap #mainNavi .profile-info a:focus, #header #mainNavi-wrap #mainNavi .profile-info a:active{color:var(--color-accent);text-decoration:underline;} /* 메뉴 버튼 */ #util-btn-wrap{display:block;position:absolute;height:70px;right:0;top:0;z-index:1} #util-btn-wrap .bt-mnctrs-wr, #util-btn-wrap .bt-mnctrs-wr span{display:inline-block;transition:all .4s;box-sizing:border-box;} #util-btn-wrap .bt-mnctrs-wr{position:relative;margin-top:24px;margin-left:20px;margin-right:20px;width:25px;height:20px;} #util-btn-wrap .bt-mnctrs-wr span{position:absolute;left:0;width:100%;height:2px;background-color:var(--color-second);border-radius:2px;} #util-btn-wrap .bt-mnctrs-wr span.bar1{top:0;} #util-btn-wrap .bt-mnctrs-wr span.bar2{top:9px;} #util-btn-wrap .bt-mnctrs-wr span.bar3{bottom:0;} /* #util-btn-wrap .bt-mnctrs-wr.over{-webkit-transform:rotate(360deg);transform:rotate(360deg);} */ #util-btn-wrap .bt-mnctrs-wr.over span.bar1{-webkit-transform:translateY(8px) rotate(-45deg);transform:translateY(8px) rotate(-45deg);background-color:var(--color-second)} #util-btn-wrap .bt-mnctrs-wr.over span.bar2{-webkit-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg);background-color:var(--color-second);top:8px;} #util-btn-wrap .bt-mnctrs-wr.over span.bar3{opacity:0;} /* SUB */ /* 서브 타이틀 */ #container-wrap .cont-navi{float:right;margin-top:30px;} #container-wrap .cont-navi li{position:relative;padding-left:5px;float:left;} #container-wrap .cont-navi li:first-child:before{display:none;} #container-wrap .cont-navi li:before {content:'';position:absolute;left:12px;top:50%;margin-top:-1.5px;width:5px;height:5px;border-top:solid 1px currentColor;border-right:solid 1px currentColor;-webkit-transform:rotate(45deg);transform:rotate(45deg);} #container-wrap .cont-navi li a{padding:0 18px 0 23px;font-size:14px;color:#707070;} #container-wrap .cont-navi li a:last-child{padding-right:0;} #container-wrap .cont-navi li a:focus,#container-wrap .cont-navi li a:active,#container-wrap .cont-navi li a:hover{color:#5697f5;} #container-wrap .cont-navi li a.home i{display:inline-block;width:14px;height:14px;background:url('../../images/common/icon/ic_home.png') center no-repeat;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;} #container-wrap .cont-navi li a.home:focus i, #container-wrap .cont-navi li a.home:active i,#container-wrap .cont-navi li a.home:hover i{margin-bottom:3px;} #container-wrap .cont-navi li a.current{font-weight:bold;} #container-wrap .cont-top{margin-top:0;overflow:hidden;text-align:left;clear:both;} #container-wrap .cont-top h2{position:relative;} #container-wrap .cont-top h2 .h2-box{position:relative;display:inline-block;padding-right:10px;line-height:2.313em;font-size:1.5em;color:#333;font-weight:bold;letter-spacing:-0.09em;} #container-wrap #contents{margin:10px 0 20px 0;min-height:300px;position:relative;/* overflow:hidden;*/} /* 하단 */ #footer-wrap .finfo-l{float:left;} #footer-wrap .finfo-r{float:right;margin:0;} #footer-wrap .fserv-wrap{border-bottom:none;} #footer-wrap .finfo-wrap{padding:7px 0 0 0;} #footer-wrap .fin_ml{float:left} #footer-wrap .fin_mr{float:right;padding-top:13px} #footer-wrap .fin_mr a{display:inline-block;padding-left:20px;} #footer-wrap #toTop{display:none;position:fixed;_position:absolute;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;color:#fff;background-color:var(--color-third);cursor:pointer;z-index:3;} #footer-wrap #toTop:before {content:'';position:absolute;top:30%;left:50%;margin-left:-5px;width:10px;height:10px;border-top:solid 3px currentColor;border-right:solid 3px currentColor;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} #footer-wrap #toTop:hover, #footer-wrap #toTop:focus{background-color:var(--color-third-hover);} #footer-wrap #toTop span{position:absolute;top:45%;width:60px;font-size:0.7em;font-weight:500;text-align:center;letter-spacing:0.05em;} /* 바로가기 버튼 */ #footer-wrap .fserv-wrap .finfo-l-quick{display:block;float:left;} #footer-wrap .fserv-wrap .finfo-l-quick ul li{position:relative;float:left;} #footer-wrap .fserv-wrap .finfo-l-quick ul li:first-child{padding:0;margin:0;background:none;} #footer-wrap .fserv-wrap .finfo-l-quick ul li a{display:block;padding:0 10px;line-height:25px;font-size:.875em;color:var(--txt-color-10);letter-spacing:-.04em;font-weight:normal;} #footer-wrap .fserv-wrap .finfo-l-quick ul li:first-child a{padding-left:0;color:var(--color-third);font-weight:bold;} #footer-wrap .fserv-wrap .finfo-l-quick ul li a:hover, #footer-wrap .fserv-wrap .finfo-l-quick ul li a:focus, #footer-wrap .fserv-wrap .finfo-l-quick ul li a:active, #footer-wrap .fserv-wrap .finfo-l-quick ul li.over a{color:var(--color-second);} /* 패밀리사이트 */ #footer-wrap .fsitelink{display:inline-block;float:right;position:relative;margin:-32px 0 0 0;;width:174px;z-index:3;} #footer-wrap .fsitelink dt{height:100%} #footer-wrap .fsitelink dt a {display:block;position:relative;padding:0 19px;line-height:34px;border:1px solid #dbdbdb;border-radius:18px;font-size:13px;color:#303030;} #footer-wrap .fsitelink dt a i{content:"";display:block;position:absolute;right:19px;top:50%;margin-top:-2px;width:0;height:0;border-style:solid;border-width:5px 4px 0 4px;border-color:#353535 transparent transparent transparent;} #footer-wrap .fsitelink dt a.over, #footer-wrap .fsitelink dt a:hover, #footer-wrap .fsitelink dt a:focus, #footer-wrap .fsitelink dt a:active{background-color:#fff;} #footer-wrap .fsitelink dt a.over i{border-width:0 4px 5px 4px;border-color:transparent transparent #353535 transparent;} #footer-wrap .fsitelink dd {position:absolute;bottom:110%;right:0;width:100%;*width:99%;display:none;background-color:#fff;border:1px solid #dbdbdb;border-radius:18px;} #footer-wrap .fsitelink dd ul{padding:18px;overflow-y:auto;} #footer-wrap .fsitelink dd ul li:first-child{padding-top:0;} #footer-wrap .fsitelink dd ul li{padding-top:17px;} #footer-wrap .fsitelink dd li a {display:block;line-height:1.3em;font-size:13px;color:#303030;} #footer-wrap .fsitelink dd li a:hover, .fsitelink dd li a:active, .fsitelink dd li a:focus {color:#5697f5;text-decoration:underline;} #footer-wrap .fsitelink .isCloseBtn {position:absolute;top:0px;right:-1px;width:28px;height:28px;background-color:transparent;border:none;border-radius:0 18px 0 0;cursor:pointer;} #footer-wrap .fsitelink .isCloseBtn { display:none; color:#000; position:absolute; } #footer-wrap .fsitelink .isCloseBtn:before { content:''; position:absolute; left:7.5px; width:15px; height:1px; background-color:currentColor; -webkit-transform:rotate(45deg); transform:rotate(45deg); } #footer-wrap .fsitelink .isCloseBtn:after { content:''; position:absolute; left:7.5px; width:15px; height:1px; background-color:currentColor; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } #footer-wrap .fsitelink .isCloseBtn:hover, #footer-wrap .fserv-wrap .finfo-r-site .fsitelink .isCloseBtn:focus {border-color:#5697f5;} /* 사이트 정보 */ #footer-wrap .finfo-wrap .address{} #footer-wrap .finfo-wrap .address a{display:inline;padding-right:15px;color:var(--color-fourth);;} #footer-wrap .finfo-wrap .address a:hover, #footer-wrap .finfo-wrap .address a:focus, #footer-wrap .finfo-wrap .address a:active{color:var(--color-second);} #footer-wrap .finfo-wrap .copyright{color:var(--color-fourth);margin:0;clear:both;} #footer-wrap .finfo-wrap .address, #footer-wrap .finfo-wrap .copyright{font-size:.8em;line-height:1.7em;letter-spacing:0.02em !important;font-weight:normal;} #footer-wrap .finfo-wrap .address .b_f-th{padding-bottom:15px;} #footer-wrap .finfo-wrap .address .b_f-th .b_name{padding:5px 10px;background:#f5f5f5;border:1px solid #d9d9d9;color:#333;font-weight:bold} /* 에러페이지 */ .error-wrap{position:absolute;top:50%;margin-top:-266.5px;width:100%;text-align:center;font-size:0.938em;color:#555;} .error-wrap .tit{font-size:1.3em;margin:0 0 20px;letter-spacing:-2px;color:#191919;font-weight:500;} .error-wrap .tit::before{content:'';display:block;width:170px;height:160px;margin:0 auto 60px;background:url(/assets/user/images/contents/ic_error.png) no-repeat} .btn-point {display: inline-block;position: relative;width: 160px;height: 60px;border-radius: 5px;color:#fff !important;font-size: 1em;font-weight: 500;background-color: #134AA9;border: 1px solid #134AA9;text-align: center;line-height: 60px;overflow: hidden;-webkit-transition: all 0.5s;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease} /* 배너모음 */ .banner-wrap{position:relative;padding:22px 0;width:100%;height:80px;overflow:hidden;clear:both;border-top:1px solid #ccc;} .banner-wrap .banContWrap{position:relative;} .banner-wrap .banContWrap .control-box{position:relative;padding-left:140px;} .banner-wrap .banContWrap .control-box .ctr-track{position:relative;width:100%;height:100%;overflow:hidden;} .banner-wrap .banContWrap .control-box .ctr-track .ctr-item{margin:0 50px 0 0;width:auto} .banner-wrap .banContWrap .control-box .ctr-track .ctr-item a{display:inline-block;} .banner-wrap .banContWrap .control-box .ctr-track .ctr-item a img{width:auto;max-width:100%;max-height:35px;} .banner-wrap .banContWrap button{position:absolute;top:0;width:36px;height:36px;text-indent:-9999px;font-size:0;border:0;z-index:1;} .banner-wrap .banContWrap button.btn-m-prev{background-image:url(../../images/main/prev.gif);left:0} .banner-wrap .banContWrap button.btn-m-play{background-image:url(../../images/main/puase.gif);left:35px} .banner-wrap .banContWrap button.btn-m-stop{background-image:url(../../images/main/stop.gif);left:35px} .banner-wrap .banContWrap button.btn-m-next{background-image:url(../../images/main/next.gif);left:70px} .overlay-bg{position:fixed;display:none;left:0;top:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);z-index:9;} /* 공통 */ .transition{-webkit-transition:all 0.5s;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease} /* background animation */ .siteBckgr{position:fixed;top:70px;left:3%;width:94%;} .siteBckgr .svgArea{position:relative;height:100vh;} .siteBckgr .svgArea .start-color{stop-color:rgb(249,249,249);stop-opacity:1;} .siteBckgr .svgArea .center-color{stop-color:rgb(232,237,242);stop-opacity:1;} .siteBckgr .svgArea .end-color{stop-color:rgb(220,222,235);stop-opacity:1;} .siteBckgr .svgArea .circle-Rbig, .siteBckgr .svgArea .circle-Lbig{position:absolute;top:0;right:10%; -webkit-animation:gradient-fade 8s linear 1s infinite normal; -moz-animation:gradient-fade 8s linear 1s infinite normal; -o-animation:gradient-fade 8s linear 1s infinite normal; animation:gradient-fade 8s linear 1s infinite normal; } .siteBckgr .svgArea .circle-Lbig{top:auto;left:0 !important;bottom:15%;opacity:.8;} .siteBckgr .svgArea .circle-Rsmall{position:absolute;top:11%;right:5%;fill-opacity:0.9; -webkit-transform:translate(5%, 2%); -moz-transform:translate(5%, 2%); -o-transform:translate(5%, 2%); transform:translate(5%, 2%); -webkit-animation:gradient-fade-alt 4s ease-in-out 1s infinite alternate; -moz-animation:gradient-fade-alt 4s ease-in-out 1s infinite alternate; -o-animation:gradient-fade-alt 4s ease-in-out 1s infinite alternate; animation:gradient-fade-alt 4s ease-in-out 1s infinite alternate; } .siteBckgr .svgArea .circle-double{position:absolute;top:45%;right:2%;opacity:0.05;fill:none;stroke:#70a3ff; -webkit-transform:translate(-5%, 2%); -moz-transform:translate(-5%, 2%); -o-transform:translate(-5%, 2%); transform:translate(-5%, 2%); -webkit-animation:color-fade 15s ease-in .1s infinite alternate; -moz-animation:color-fade 15s ease-in .1s infinite alternate; -o-animation:color-fade 15s ease-in .1s infinite alternate; animation:color-fade 15s ease-in .1s infinite alternate; } .siteBckgr .svgArea .circle-line{position:absolute;top:17%;right:0;fill:#dddeed;opacity:0.4; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .siteBckgr .svgArea .circle-radial{position:absolute;top:-30%;left:0; -webkit-animation:radial 8s ease-in-out 1s infinite alternate; -moz-animation:radial 8s ease-in-out 1s infinite alternate; -o-animation:radial 8s ease-in-out 1s infinite alternate; animation:radial 8s ease-in-out 1s infinite alternate; } .siteBckgr .svgArea .offset0-color{stop-color:rgb(254,211,147);stop-opacity:.4} .siteBckgr .svgArea .offset100-color{stop-color:rgb(245,245,245);stop-opacity:0} .dotted-circle{position:absolute;top:-30%;left:0;opacity:0.9; -webkit-animation:rotation 38s linear infinite; -moz-animation:rotation 38s linear infinite; -o-animation:rotation 38s linear infinite; animation:rotation 38s linear infinite; } @keyframes rotation { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes gradient-fade { from{ -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } to{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes gradient-fade-alt { from{ -webkit-transform:translate(5%, 2%); -moz-transform:translate(5%, 2%); -o-transform:translate(5%, 2%); transform:translate(5%, 2%); } to{ -webkit-transform:translate(-100%, -18%); -moz-transform:translate(-100%, -18%); -o-transform:translate(-100%, -18%); transform:translate(-100%, -18%); } } @keyframes color-fade { from{ -webkit-transform:translate(-5%, 10%); -moz-transform:translate(-5%, 10%); -o-transform:translate(-5%, 10%); transform:translate(-5%, 10%); } to{ -webkit-transform:translate(-230%, 120%); -moz-transform:translate(-230%, 120%); -o-transform:translate(-230%, 120%); transform:translate(-230%, 120%); } } @keyframes radial { from{ -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -o-transform:scale(1.0); transform:scale(1.0); } to{ -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); transform:scale(1.5); } } @media screen and (max-width:1024px){ .siteBckgr{display:none;} } /* +++++++++++++++++++++ 20241206 추가 +++++++++++++++++++++ */ :root{ --brand-color: #556FF6; --brand-color-rgba: rgba(85, 111, 246, 0.1); --brand-sub-color: #162C43; --default-color: #5B6A7B; --white-color: #fff; --line-color:#ddd; --line2-color:#E8E8E8; --bg-color:#F4F5F6; --hover-color:#3E53D3; } .meet-wrap{position: relative; width: 100%; height: 100%;} .meet-inner{margin: 0 auto; padding:50px 1%; position: relative; max-width: 1023px;} .meet-inner h1{position: relative; height: 40px;} .meet-inner h1 img{max-height: 100%;} .meet-inner .meet-contents{margin-top: 20px; margin-bottom: 20px; padding: 60px; position: relative; background-color: var(--white-color, #ffffff); border-radius: 10px;} .meet-info{position: relative;} .meet-info .info-txt01 span{display: inline-block; padding: 4px 16px 3px; font-size: 1em; color: var(--brand-color, #556FF6); background-color: var(--brand-color-rgba); border-radius: 4px;} .meet-info .info-title{margin-top: 10px; margin-bottom: 10px; font-size: 1.75em; font-weight: bold; color: var(--brand-sub-color, #162C43); line-height: 1.3;} .meet-info .info-box{display: flex; justify-content: space-between; align-items: center; flex-direction: row;} .meet-info .info-box .host-l{display: flex; justify-content: flex-start; align-items: center; flex-direction: row;} .meet-info .info-box .host-l .host-date{padding-left: 10px; margin-left: 10px; position: relative;} .meet-info .info-box .host-l .host-date::before{display: inline-block; content: ''; position: absolute; left: 0; top: 9px; width: 1px; height: 15px; background-color: var(--line-color, #ddd);} .meet-info .info-box .host-l div svg, .meet-info .info-box .host-l div span{display: inline-block; vertical-align: middle;} .meet-info .info-box .host-l div svg{width: 20px; height: 20px; fill: var(--default-color, #5B6A7B);} .meet-info .info-box .host-l div span{color: var(--default-color, #5B6A7B); font-size: 1.1em; font-weight: 400; letter-spacing: 0; line-height: 1;} .meet-info .info-box .host-l div span b{display: inline-block; margin-left: 5px; font-weight: 400; color: var(--brand-color, #556FF6);} .meet-info .info-box .host-l .host-date .first{margin-right: 7px;} .meet-info .info-box .host-l .host-date .last{position: relative; padding-left: 20px; margin-left: 3px;} .meet-info .info-box .host-l .host-date .last::before{display: inline-block; content: '~'; position: absolute; left: 0; top: 0;} .meet-info .info-box .host-r a{display: inline-block; padding: 2px 13px 4px 10px; font-size: 1em; border-radius: 6px; color: var(--default-color, #5B6A7B); border: 1px solid var(--line-color, #ddd);} .meet-info .info-box .host-r a svg{display: inline-block; margin-top: 2px; width: 16px; height: 16px; vertical-align:middle;fill: var(--default-color, #5B6A7B);} .meet-info .info-box .host-r a span{vertical-align: middle;} .meet-info .info-box .host-r a:hover, .meet-info .info-box .host-r a:active, .meet-info .info-box .host-r a:focus{color: var(--white-color, #ffffff); border: 1px solid var(--default-color, #5B6A7B); background-color: var(--default-color, #5B6A7B);} .meet-info .info-box .host-r a:hover svg, .meet-info .info-box .host-r a:active svg, .meet-info .info-box .host-r a:focus svg{fill: var(--white-color, #ffffff);} .meet-time{margin-top: 30px; margin-bottom: 30px; padding-top: 35px; padding-bottom: 40px; position: relative; text-align: center; background-color: var(--bg-color, #F4F5F6); border: 1px solid var(--line2-color, #E8E8E8); border-radius: 8px;} .meet-time .timer{display: flex; justify-content: center; align-items: center; flex-wrap: nowrap;} .meet-time .timer li{padding-left: 20px; padding-right: 15px; position: relative;} .meet-time .timer li:first-child{padding-left: 0;} .meet-time .timer li:last-child{padding-right: 0;} .meet-time .timer li::before{display: inline-block; content: ':'; position: absolute; left: 0; top: 24%; font-size: 1.5em; color: var(--brand-sub-color, #162C43);} .meet-time .timer li:first-child::before{display: none;} .meet-time .timer li span{position: relative; font-size: 3em; line-height: 1.4; font-weight: bold; color: var(--brand-sub-color, #162C43);} .meet-time .timer li span::after{display: block; font-size: 11px; font-weight: 400; letter-spacing: 1px; color: var(--default-color, #5B6A7B);} .meet-time .timer li .days::after{content: 'DAYS';} .meet-time .timer li .hours::after{content: 'HOURS';} .meet-time .timer li .min::after{content: 'MIN';} .meet-time .timer li .sec::after{content: 'SEC';} .dot-loader{ width:17px; display: inline-block;height:3px;background: radial-gradient(circle closest-side,#556FF6 90%,#0000) 0 0/5px 100% space;clip-path: inset(0 100% 0 0);-webkit-animation:dot-loader 1s steps(4) infinite; animation:dot-loader 1s steps(4) infinite;} .meet-time .meet-loader {margin: 10px auto 0; width: 50px;height: 50px; fill: var(--brand-color, #556FF6); -webkit-animation: Rotation 2.6s infinite linear;animation: Rotation 2.6s infinite linear;} .meet-time p{position: relative; margin-top: 20px; font-weight: 500; color: var(--brand-color, #556FF6);} .meet-form{position: relative;} .meet-form ul{display: flex; padding-bottom: 30px; margin-bottom: 30px; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--line-color, #ddd);} .meet-form ul li{margin-bottom: 15px; width: 49%;} .meet-form ul li:last-child{width: 100%;} .meet-form ul li label{font-weight: 500; color: var(--brand-sub-color, #162C43);} .meet-form ul li input[type=text]{font-size: 1em;} .meet-form ul li.cvList{margin: 0 !important;} .meet-form ul li.cvList label{display: inline; margin-bottom: 0;word-break:break-all; font-weight: 300; font-size: 1em; color: var(--default-color, #5B6A7B);} .meet-form ul li.cvList input[type=checkbox]:checked{background-color: var(--brand-color, #556FF6); border-color: var(--brand-color, #556FF6);} .meet-btn button, .meet-btn a{display: block; margin: 0 auto; width: 260px; height: 70px; text-align: center; line-height: 69px; font-size: 1.2em; font-weight: bold; background-color: var(--brand-color, #556FF6);color: var(--white-color, #ffffff); border:1px solid var(--brand-color, #556FF6); border-radius: 8px;} .meet-btn button svg, .meet-btn a svg{width: 30px; vertical-align: middle; fill: var(--white-color, #ffffff);} .meet-btn a span{vertical-align: middle;} .meet-btn button:hover, .meet-btn button:active, .meet-btn button:focus, .meet-btn a:hover, .meet-btn a:active, .meet-btn a:focus{background-color: var(--hover-color, #3E53D3); border-color: var(--hover-color, #3E53D3);box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; -webkit-transform: translateY(-3px); transform: translateY(-3px);} .meet-inner .meet-footer{position: relative; text-align: center; color: var(--default-color, #5B6A7B); font-size: .9em; letter-spacing: 0;} @-webkit-keyframes dot-loader {to{-webkit-clip-path: inset(0 -5px 0 0)}} @keyframes dot-loader {to{clip-path: inset(0 -5px 0 0)}} @-webkit-keyframes Rotation{ to{-webkit-transform: rotate(-360deg);}} @keyframes Rotation{ to{transform: rotate(-360deg)}} /* 녹화 리스트 없음 */ .recording-no{position: relative; text-align: center;} .recording-no .record-svg{display: block; margin: 20px auto 30px; position: relative; width: 100px; height: 100px; background-color:var(--brand-color-rgba); border-radius: 50%;} .recording-no .record-svg svg{margin: 25px auto 0; width: 48px; fill: var(--brand-color, #556FF6);} .recording-no .record-txt01{margin-bottom: 10px; font-size: 1.75em; font-weight: bold;color: var(--brand-sub-color, #162C43);} .recording-no .record-txt02{margin-bottom: 30px; font-size: 1.1em;font-weight: 400;color: var(--default-color, #5B6A7B);} /* 녹화리스트 */ .recordings-box{position: relative;margin-top: 30px; margin-bottom: 30px;} .recordings-box .rd-title{padding-bottom: 10px; font-size: 1.1em; font-weight: bold; color: var(--brand-sub-color, #162C43); border-bottom: 1px solid var(--line2-color, #E8E8E8); line-height: 1;} .recordings-box .rd-search{display: flex; padding-top: 20px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;} .recordings-box .rd-search .rd-search-l{position: relative; width: 280px;} .recordings-box .rd-search .rd-search-l input{padding-right:50px;} .recordings-box .rd-search .rd-search-l button{position: absolute; top: 1px; right: 1px; width: 48px; height: 48px; border: none; overflow: hidden; background-color: transparent;} .recordings-box .rd-search .rd-search-l button:hover, .recordings-box .rd-search .rd-search-l button:active, .recordings-box .rd-search .rd-search-l button:focus{background-color: var(--line-color, #ddd);} .recordings-box .rd-search .rd-search-l button svg{fill: none; stroke: var(--brand-sub-color, #162C43); stroke-linecap: round; stroke-linejoin: round; width: 24px; height: 24px; vertical-align: middle;} .recordings-box .rd-search .rd-search-r{display: inline-block; padding: 0 20px; line-height: 49px; font-size: 1em; border: 1px solid var(--brand-color, #556FF6); background-color: var(--brand-color, #556FF6); color: var(--white-color, #ffffff); border-radius: 6px;} .recordings-box .rd-search .rd-search-r:hover, .recordings-box .rd-search .rd-search-r:active, .recordings-box .rd-search .rd-search-r:focus{background-color: var(--hover-color, #3E53D3); box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;} .recordings-box .rd-list{margin-top: 20px; position: relative; border: 1px solid var(--line-color, #ddd);} .recordings-box .rd-list table{display: table; width: 100%; table-layout: fixed;} .recordings-box .rd-list table .col01{width: 60%;} .recordings-box .rd-list table .col02{width: 20%;} .recordings-box .rd-list table .col03{width: 10%;} .recordings-box .rd-list table .col04{width: 10%;} .recordings-box .rd-list table thead tr th{padding-top: 10px; padding-bottom: 9px; color: var(--default-color, #5B6A7B);font-size: .95em; font-weight: 400; border-bottom: 1px solid var(--line-color, #ddd);} .recordings-box .rd-list table tbody tr{border-top: 1px solid var(--line-color, #ddd)} .recordings-box .rd-list table tbody tr td{padding: 10px; vertical-align: middle;} .recordings-box .rd-list table .m-time{color: var(--default-color, #5B6A7B);} .recordings-box .rd-list table .m-time span{display: none;} .recordings-box .rd-list table .m-view, .recordings-box .rd-list table .m-url{text-align: center;} .subject-name{display: flex; flex-direction: row; align-items: center;} .subject-name .s-icon{margin-right: 10px; position: relative; width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background-color: var(--brand-color-rgba);} .subject-name .s-icon svg{display: block; content: ''; margin: 11px auto 0; width: 18px; height: 18px; fill: var(--brand-color, #556FF6);} .subject-name .s-title{display: flex; flex: 1 1 auto; flex-direction: column; align-self: stretch;} .subject-name .s-title strong{font-weight: 500; line-height: 1.3; color: var(--brand-sub-color, #162C43);} .subject-name .s-title span{font-size: .95em; line-height: 1.4; color: var(--default-color, #5B6A7B, #5B6A7B); letter-spacing: 0;} .recordings-box .rd-list table button{display: inline-block; width: 40px; height: 40px; border-color: transparent; border-radius: 50%; background-color: var(--brand-color-rgba);} .recordings-box .rd-list table button span{display: none; vertical-align: middle; font-size: 1em;font-weight: bold; color: var(--brand-color, #556FF6);} .recordings-box .rd-list table button svg{margin-top: 5px; width: 20px; height: 20px; fill: var(--brand-color, #556FF6);} .recordings-box .rd-list table button:hover{background-color: var(--brand-color, #556FF6);} .recordings-box .rd-list table button:hover span{color: var(--white-color, #ffffff);} .recordings-box .rd-list table button:hover svg{fill: var(--white-color, #ffffff);} /*비밀번호 보기 버튼*/ .pwd_btn{position: absolute; top: 47px; right: 10px; border: none; background-color: transparent;} .login-wrap .pwd_btn{top: 17px;} .info-cont .pwd_btn{right: 20px;} /*홈 버튼 아이콘*/ i.home{display: block; margin: 6px 0; background: url('/assets/user/images/common/icon/ic_house.svg') no-repeat center center; width: 26px; height: 26px;} .blink { animation: blink-animation 1s steps(1, start) infinite; } @keyframes blink-animation { 50% { opacity: 0; } }