@charset "utf-8"; /* 제작사 : D.LOFT - http://www.dloft.net/ */ /* 작성자 : 송지수 - jisuweb@mensakorea.org */ /* 작성일 : 2019.08.14 */ /* CSS Document */ /* 프레임 */ #wrap {width:auto; margin:10px; margin-top:0;} #wrap:before {content:""; position:fixed; left:0; right:0; top:0; z-index:99999; height:10px; background-color:#fff;} #wrap:after {content:""; position:fixed; left:0; right:0; bottom:0; z-index:99999; height:10px; background-color:#fff;} /* 헤더 */ #header {display:inline-block; vertical-align:middle; position:fixed; left:10px; right:10px; top:10px; z-index:9999; height:220px; padding:0 90px; background:linear-gradient(to bottom, rgba(56, 57, 60, 0.5) 0%, rgba(56, 57, 60, 0) 100%); transition:0.3s; -webkit-transition:0.3s;} #header div {display:inline-block; vertical-align:middle; width:100%;} #header .h_wrap {position:relative; height:60px; margin:40px 0;} #header .h_logo {position:absolute; left:50%; top:0; z-index:999; width:250px; height:60px; margin-left:-125px; transition:0.2s; -webkit-transition:0.2s;} #header .h_logo a {display:inline-block; vertical-align:middle; position:relative; width:100%; height:100%; background-image:url("../images/common/logo_w.png"); background-image:url("../images/ie/logo_w.png")\9; background-repeat:no-repeat; background-position:center; background-size:100% auto; transition:0.2s; -webkit-transition:0.2s;} #header .h_familysite {display:none; position:absolute; left:0; top:10px; z-index:2; width:auto; height:36px; margin:2px 0; transition:0.2s; -webkit-transition:0.2s;} #header .h_familysite .hf_btn {display:inline-block; vertical-align:middle; position:relative; width:140px; height:36px; padding-left:20px; border:rgba(255, 255, 255, 0.3) solid 1px; border-radius:20px; font-size:12px; font-weight:400; color:#fff; line-height:34px; letter-spacing:-0.5px; text-align:left; outline:none; transition:0.2s; -webkit-transition:0.2s;} #header .h_familysite .hf_btn i {display:inline-block; vertical-align:middle; position:absolute; right:23px; top:11px; width:1px; height:7px;} #header .h_familysite .hf_btn i:before {content:""; position:absolute; right:-2px; top:50%; width:100%; height:100%; border-radius:1px; background-color:currentColor; transform:rotate(45deg); -ms-transform:rotate(45deg);} #header .h_familysite .hf_btn i:after {content:""; position:absolute; left:-2px; top:50%; width:100%; height:100%; border-radius:1px; background-color:currentColor; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #header .h_familysite:hover .hf_btn, #header .h_familysite.on .hf_btn {border-color:#fff; background-color:#fff; font-weight:700; color:#38393c;} #header .h_familysite .hf_list {display:none; vertical-align:middle; position:absolute; left:0; right:0; top:38px; z-index:1; width:auto; padding:10px; border:rgba(255, 255, 255, 0.3) solid 1px; border-radius:18px; background-color:#fff; transition:0.2s; -webkit-transition:0.2s;} #header .h_familysite .hf_list ul {display:inline-block; vertical-align:middle; width:100%;} #header .h_familysite .hf_list li {display:inline-block; vertical-align:middle; float:left; width:100%; text-align:left;} #header .h_familysite .hf_list a {display:inline-block; vertical-align:middle; width:100%; font-size:12px; color:#38393c; line-height:30px; text-indent:10px;} #header .h_familysite .hf_list a:hover {border-radius:10px; background-color:#1b4792; color:#fff;} #header .h_familysite.on .hf_list {display:inline-block;} #header .h_familysite.on .hf_btn i:before {transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #header .h_familysite.on .hf_btn i:after {transform:rotate(45deg); -ms-transform:rotate(45deg);} #header.on .h_familysite.on .hf_list {display:none;} #header .h_familysite {display:none; position:absolute; left:0; top:10px; z-index:2; width:auto; height:36px; margin:2px 0; transition:0.2s; -webkit-transition:0.2s;} #header .h_familysite .hf_btn {display:inline-block; vertical-align:middle; position:relative; width:140px; height:36px; padding-left:20px; border:rgba(255, 255, 255, 0.3) solid 1px; border-radius:20px; font-size:12px; font-weight:400; color:#fff; line-height:34px; letter-spacing:-0.5px; text-align:left; outline:none; transition:0.2s; -webkit-transition:0.2s;} #header .h_familysite .hf_btn i {display:inline-block; vertical-align:middle; position:absolute; right:23px; top:11px; width:1px; height:7px;} #header .h_familysite .hf_btn i:before {content:""; position:absolute; right:-2px; top:50%; width:100%; height:100%; border-radius:1px; background-color:currentColor; transform:rotate(45deg); -ms-transform:rotate(45deg);} #header .h_familysite .hf_btn i:after {content:""; position:absolute; left:-2px; top:50%; width:100%; height:100%; border-radius:1px; background-color:currentColor; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #header .h_familysite:hover .hf_btn, #header .h_familysite.on .hf_btn {border-color:#fff; background-color:#fff; font-weight:700; color:#38393c;} #header .h_familysite .hf_list {display:none; vertical-align:middle; position:absolute; left:0; right:0; top:38px; z-index:1; width:auto; padding:10px; border:rgba(255, 255, 255, 0.3) solid 1px; border-radius:18px; background-color:#fff; transition:0.2s; -webkit-transition:0.2s;} #header .h_familysite .hf_list ul {display:inline-block; vertical-align:middle; width:100%;} #header .h_familysite .hf_list li {display:inline-block; vertical-align:middle; float:left; width:100%; text-align:left;} #header .h_familysite .hf_list a {display:inline-block; vertical-align:middle; width:100%; font-size:12px; color:#38393c; line-height:30px; text-indent:10px;} #header .h_familysite .hf_list a:hover {border-radius:10px; background-color:#1b4792; color:#fff;} #header .h_familysite.on .hf_list {display:inline-block;} #header .h_familysite.on .hf_btn i:before {transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #header .h_familysite.on .hf_btn i:after {transform:rotate(45deg); -ms-transform:rotate(45deg);} #header.on .h_familysite.on .hf_list {display:none;} #header .h_language {display:none; position:absolute; right:0; top:10px; z-index:2; width:auto; height:40px; transition:0.2s; -webkit-transition:0.2s;} #header .h_language ul {display:inline-block; vertical-align:middle;} #header .h_language li {display:inline-block; vertical-align:middle; float:left; margin-left:6px;} #header .h_language li:first-child {margin-left:0;} #header .h_language a {display:inline-block; vertical-align:middle; box-sizing:border-box; width:36px; height:36px; margin:2px; border:rgba(255, 255, 255, 0.3) solid 1px; border-radius:20px; font-size:12px; font-weight:400; color:#fff; line-height:34px; letter-spacing:-0.5px; transition:0.2s; -webkit-transition:0.2s;} #header .h_language a:hover {border-color:#fff; background-color:rgba(255, 255, 255, 0.1);} #header .h_language a.on {border-color:#fff; background-color:#fff; font-weight:700; color:#38393c;} #header .h_sns {position:absolute; right:70px; top:10px; z-index:2; width:auto; height:40px; transition:0.2s; -webkit-transition:0.2s;} #header .h_sns ul {display:inline-block; vertical-align:middle;} #header .h_sns li {display:inline-block; vertical-align:middle; float:left;} #header .h_sns a {display:inline-block; vertical-align:middle; width:36px; height:36px; margin:2px; border-radius:20px; background-image:url("../images/common/icon_sns.png"); background-image:url("../images/ie/icon_sns.png")\9; background-repeat:no-repeat; background-size:300% auto; opacity:0.6; transition:0.2s; -webkit-transition:0.2s;} #header .h_sns a:hover {opacity:1;} #header .h_sns li.youtube a {background-position:left 0;} #header .h_sns li.instagram a {background-position:left 33.3333%;} #header .h_sns li.facebook a {background-position:left 66.6666%;} #header .h_sns li.naverblog a {background-position:left 100%;} #header .h_gnb {position:relative; height:80px; text-align:center; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb:before {content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background-color:rgba(255, 255, 255, 0.1);} #header .h_gnb .hg_btn {display:inline-block; vertical-align:middle; position:fixed; right:100px; top:50px; z-index:2; width:60px; height:60px; outline:none; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_btn i {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:20px; height:2px; margin-left:-10px; border-radius:2px; background-color:#fff; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_btn i:before {content:""; position:absolute; left:0; top:-6px; width:100%; height:100%; border-radius:1px; background-color:#fff; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_btn i:after {content:""; position:absolute; left:0; bottom:-6px; width:100%; height:100%; border-radius:1px; background-color:#fff; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_main {display:inline-block; vertical-align:middle; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_main > li {display:inline-block; vertical-align:middle; position:relative; float:left; margin-left:80px; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_main > li:first-child {margin-left:0;} #header .h_gnb .hg_main strong {display:inline-block; vertical-align:middle; position:relative; font-size:18px; font-weight:700; color:#fff; line-height:80px; cursor:pointer;} #header .h_gnb .hg_main strong:before {content:""; position:absolute; left:0; right:100%; top:-1px; height:1px; border-radius:1px; background-color:transparent; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_main .on strong:before, #header .h_gnb .hg_main strong:hover:before {right:0; background:#fff;} #header .h_gnb .hg_main strong span {display:inline-block; vertical-align:middle; float:left; position:relative;} #header .h_gnb .hg_main strong a {display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; width:100%; height:100%;} #header .h_gnb .hg_sub {display:none; vertical-align:middle; position:absolute; left:0; top:70px; box-sizing:border-box; width:160px; padding:15px 20px; border-radius:18px; background-color:#fff; box-shadow:0 20px 40px rgba(0, 0, 0, 0.2);} #header .h_gnb li:hover .hg_sub {display:inline-block;} #header .h_gnb .hg_sub li {display:inline-block; vertical-align:middle; position:relative; float:left; width:100%; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_sub a {display:inline-block; vertical-align:middle; width:100%; padding:9px 0; font-size:15px; color:#38393c; line-height:18px; text-align:left; word-wrap:normal; word-break:keep-all;} #header .h_gnb .hg_sub a:hover {font-weight:700; color:#1b4792; text-decoration:underline; text-decoration-color:rgba(27, 71, 146, 0.3);} #header.on {background:#fff;} #header.on {margin-top:-140px;} #header.on .h_logo {left:0; top:120px; width:167px; height:40px; margin-left:0;} #header.on .h_logo a {background-image:url("../images/common/logo.png"); background-image:url("../images/ie/logo.png")\9;} #header.on .h_language {top:120px;} #header.on .h_language ul {display:inline-block; vertical-align:middle;} #header.on .h_language li {display:inline-block; vertical-align:middle; float:left; margin-left:6px;} #header.on .h_language li:first-child {margin-left:0;} #header.on .h_language a {border-color:#e4e6ee; color:#999ca7;} #header.on .h_language a:hover {border-color:#999ca7; background-color:#f5f6f9; color:#38393c;} #header.on .h_language a.on {border-color:#1b4792; background-color:#1b4792; font-weight:700; color:#fff;} #header.on .h_sns {top:120px;} #header.on .h_sns a {opacity:1;} #header.on .h_sns li.youtube a {background-position:center 0;} #header.on .h_sns li.instagram a {background-position:center 33.3333%;} #header.on .h_sns li.facebook a {background-position:center 66.6666%;} #header.on .h_sns li.naverblog a {background-position:center 100%;} #header.on .h_sns li.youtube a:hover {background-position:right 0;} #header.on .h_sns li.instagram a:hover {background-position:right 33.3333%;} #header.on .h_sns li.facebook a:hover {background-position:right 66.6666%;} #header.on .h_sns li.naverblog a:hover {background-position:right 100%;} #header.on .h_gnb .hg_btn {top:20px;} #header.on .h_gnb .hg_btn i {background-color:#999ca7;} #header.on .h_gnb .hg_btn i:before {background-color:#999ca7;} #header.on .h_gnb .hg_btn i:after {background-color:#999ca7;} #header.on .h_gnb .hg_btn:hover i {background-color:#202024;} #header.on .h_gnb .hg_btn:hover i:before {background-color:#202024;} #header.on .h_gnb .hg_btn:hover i:after {background-color:#202024;} #header.on .h_gnb .hg_main > li {margin-left:50px;} #header.on .h_gnb .hg_main strong {font-size:16px; color:#191b1e !important;} #header.on .h_gnb .hg_main strong:before {top:1px;} #header.on .h_gnb .hg_main .on strong:before, #header.on .h_gnb .hg_main strong:hover:before {background:#1b4792;} #header.on .h_gnb .hg_sub {background-color:#999ca7;} #header.on .h_gnb .hg_sub a {color:#fff !important;} #header.on .h_gnb .hg_sub a:hover {text-decoration-color:rgba(255, 255, 255, 0.3);} #header.open {overflow:hidden; height:440px; background:#fff;} #header.open .h_logo a {background-image:url("../images/common/logo.png"); background-image:url("../images/ie/logo.png")\9;} #header.open .h_familysite .hf_btn {border-color:rgba(56, 57, 60, 0.3); color:#38393c;} #header.open .h_familysite:hover .hf_btn, #header.open .h_familysite.on .hf_btn {border-color:#1b4792; background-color:#1b4792; color:#fff;} #header.open .h_familysite .hf_list {border-color:rgba(56, 57, 60, 0.3); background-color:#fff;} #header.open .h_familysite .hf_list a {color:#38393c;} #header.open .h_familysite .hf_list a:hover {background-color:#1b4792; color:#fff;} #header.open .h_sns a {opacity:1;} #header.open .h_sns li.youtube a {background-position:center 0;} #header.open .h_sns li.instagram a {background-position:center 33.3333%;} #header.open .h_sns li.facebook a {background-position:center 66.6666%;} #header.open .h_sns li.naverblog a {background-position:center 99.9999%;} #header.open .h_sns li.youtube a:hover {background-position:right 0;} #header.open .h_sns li.instagram a:hover {background-position:right 33.3333%;} #header.open .h_sns li.facebook a:hover {background-position:right 66.6666%;} #header.open .h_sns li.naverblog a:hover {background-position:right 99.9999%;} #header.open .h_gnb:before {background-color:rgba(56, 57, 60, 0.15);} #header.open .h_gnb .hg_btn i {background-color:transparent !important;} #header.open .h_gnb .hg_btn i:before {top:0; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #header.open .h_gnb .hg_btn i:after {bottom:0; transform:rotate(45deg); -ms-transform:rotate(45deg);} #header.open .h_gnb .hg_btn i {background-color:#999ca7;} #header.open .h_gnb .hg_btn i:before {background-color:#999ca7;} #header.open .h_gnb .hg_btn i:after {background-color:#999ca7;} #header.open .h_gnb .hg_btn:hover i {background-color:#202024;} #header.open .h_gnb .hg_btn:hover i:before {background-color:#202024;} #header.open .h_gnb .hg_btn:hover i:after {background-color:#202024;} #header.open .h_gnb .hg_main strong {color:#191b1e;} #header.open .h_gnb .hg_main .on strong:before, #header.open .h_gnb .hg_main strong:hover:before {background:#1b4792;} #header.open .h_gnb .hg_sub {display:inline-block; padding:15px 0; width:auto !important; min-width:90px !important; background:none; box-shadow:none;} #header.open .h_gnb .hg_sub a {color:#999ca7;} #header.open .h_gnb li:last-child .hg_sub {width:90px;} #header.open .h_gnb li:last-child .hg_sub a {text-align:right;} #header.on.open .h_gnb .hg_sub a {color:#999ca7 !important;} #header.open .h_gnb .hg_sub a:hover {color:#1b4792 !important; text-decoration-color:rgba(27, 71, 146, 0.3) !important;} #header.on.open .h_gnb .hg_sub a:hover {color:#1b4792 !important; text-decoration-color:rgba(27, 71, 146, 0.3) !important;} #header.on.open .h_gnb li:last-child .hg_sub {display:none;} /* 컨텐츠 */ #contents {display:inline-block; vertical-align:middle; position:relative; width:100%;} /* 메인 */ #contents.c_main .cm_hero {display:inline-block; vertical-align:middle; position:relative; z-index:2; width:100%; height:900px; background-color:#191b1e;} #contents.c_main .cm_hero .cmh_slide {position:relative; width:100%; height:100%;} #contents.c_main .cm_hero .cmh_slide .cmh_txt {display:inline-block; vertical-align:middle; position:absolute; left:10%; right:10%; top:45%; z-index:3; text-align:center;} #contents.c_main .cm_hero .cmh_slide .cmh_txt h2 {display:inline-block; vertical-align:middle; width:100%; font-size:50px; font-weight:800; color:#fff; line-height:60px;} #contents.c_main .cm_hero .cmh_slide .cmh_txt p {display:inline-block; vertical-align:middle; width:100%; padding:3px 0; margin-top:20px; font-size:20px; font-weight:200; color:#fff; line-height:40px; letter-spacing:5px; opacity:0.6;} #contents.c_main .cm_hero .cmh_slide .active .cmh_txt h2 {margin-left:0; opacity:1; transition:0.2s; -webkit-transition:0.2s; animation-name:cmh_txt1; animation-duration:1s; animation-iteration-count:1; animation-timing-function:linear;} @keyframes cmh_txt1 {from {margin-left:20px; opacity:0;} 20% {margin-left:20px; opacity:0;} 40% {margin-left:0; opacity:1;}} #contents.c_main .cm_hero .cmh_slide .active .cmh_txt p {margin-left:0; opacity:0.6; transition:0.2s; -webkit-transition:0.2s; animation-name:cmh_txt2; animation-duration:1s; animation-iteration-count:1; animation-timing-function:linear;} @keyframes cmh_txt2 {from {margin-left:20px; opacity:0;} 40% {margin-left:20px; opacity:0;} 60% {margin-left:0; opacity:0.6;}} #contents.c_main .cm_hero .cmh_slide .item {height:900px; background-repeat:no-repeat; background-position:center;} #contents.c_main .cm_hero .cmh_slide .owl-nav {display:inline-block; vertical-align:middle; position:absolute; right:90px; bottom:55px; z-index:3;} #contents.c_main .cm_hero .cmh_slide .owl-nav div {display:inline-block; vertical-align:middle; position:relative; float:left; width:40px; height:40px; margin-left:10px; border-radius:50px; font-size:0; line-height:0; text-indent:-9999px; transition:0.2s; -webkit-transition:0.2s;} #contents.c_main .cm_hero .cmh_slide .owl-nav div:hover {background-color:#fff; box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);} #contents.c_main .cm_hero .cmh_slide .owl-nav div:before {content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; margin-top:-7px; color:#fff; border-top:solid 3px currentColor; border-right:solid 3px currentColor; transition:0.2s; -webkit-transition:0.2s;} #contents.c_main .cm_hero .cmh_slide .owl-nav div:hover:before {color:#1b4792;} #contents.c_main .cm_hero .cmh_slide .owl-nav .owl-prev:before {margin-left:-4px; transform:rotate(-135deg); -ms-transform:rotate(-135deg);} #contents.c_main .cm_hero .cmh_slide .owl-nav .owl-next:before {margin-left:-10px; transform:rotate(45deg); -ms-transform:rotate(45deg);} #contents.c_main .cm_hero .cmh_slide .owl-dots {display:inline-block; vertical-align:middle; position:absolute; left:90px; bottom:60px; z-index:3;} #contents.c_main .cm_hero .cmh_slide .owl-dot {display:inline-block; vertical-align:middle; overflow:hidden; position:relative; zoom:1; width:60px; height:30px; margin-right:10px; outline:none; box-shadow:inset 0 -2px 0 rgba(255, 255, 255, 0.2); transition:0.2s; -webkit-transition:0.2s;} #contents.c_main .cm_hero .cmh_slide .owl-dot:before {display:inline-block; position:absolute; left:0; top:30px; width:100%; height:20px; font-size:16px; font-weight:900; color:#fff; line-height:20px; letter-spacing:-0.5px; transition:0.2s; -webkit-transition:0.2s;} #contents.c_main .cm_hero .cmh_slide .owl-dot:nth-child(1):before {content:"01";} #contents.c_main .cm_hero .cmh_slide .owl-dot:nth-child(2):before {content:"02";} #contents.c_main .cm_hero .cmh_slide .owl-dot:nth-child(3):before {content:"03";} #contents.c_main .cm_hero .cmh_slide .owl-dot.active:before, #contents.c_main .cm_hero .cmh_slide .owl-dot:hover:before {top:0;} #contents.c_main .cm_hero .cmh_slide .owl-dot.active:after {content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background-color:#fff; animation-name:owl-dot-bar; animation-duration:4s; animation-iteration-count:1; animation-timing-function:linear;} @keyframes owl-dot-bar {from {right:100%;} to {right:0;}} #contents.c_main .cm_hero .cmh_slide .owl-dot span {display:block;} #contents.c_main .cm_hero .cmh_bg {display:inline-block; vertical-align:middle; position:relative; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; box-shadow:inset 0 -10px 0 #fff;} #contents.c_main .cm_hero .cmh_bg.t1 {background-image:url("../images/common/bg_hero_t1.jpg");} #contents.c_main .cm_hero .cmh_bg.t2 {background-image:url("../images/common/bg_hero_t2.jpg");} #contents.c_main .cm_hero .cmh_bg.t3 {background-image:url("../images/common/bg_hero_t3.jpg");} #contents.c_main .cm_hero .cmh_bg:before {content:""; position:absolute; left:0; right:0; top:0; bottom:10px; z-index:2; background:linear-gradient(to bottom, rgba(27, 71, 146, 0) 40%, rgba(27, 71, 146, 0.6) 100%);} #contents.c_main .cm_hero .cmh_bg:after {content:""; position:absolute; left:0; right:0; top:0; bottom:10px; z-index:1; background-color:rgba(25, 27, 30, 0.6);} #contents.c_main .cm_hero .cmh_scroll {display:inline-block; vertical-align:middle; position:absolute; left:50%; bottom:130px; z-index:4; width:58px; height:58px; margin-left:-30px; border:rgba(255, 255, 255, 0.3) solid 1px; border-radius:30px; transition:0.2s; -webkit-transition:0.2s;} #contents.c_main .cm_hero .cmh_scroll a {display:inline-block; vertical-align:middle; width:100%; height:100%;} #contents.c_main .cm_hero .cmh_scroll i {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:2px; height:16px; margin-top:-8px; margin-left:-1px; color:#fff; transition:0.2s; -webkit-transition:0.2s; animation-name:cmhc_scroll; animation-duration:1s; animation-iteration-count:infinite; animation-timing-function:linear;} @keyframes cmhc_scroll {from {margin-top:-12px;} 50% {margin-top:0;} 100% {margin-top:-12px;}} #contents.c_main .cm_hero .cmh_scroll i:before {content:""; position:absolute; right:-5px; top:0; width:100%; height:100%; border-radius:2px; background-color:currentColor; transform:rotate(45deg); -ms-transform:rotate(45deg);} #contents.c_main .cm_hero .cmh_scroll i:after {content:""; position:absolute; left:-5px; top:0; width:100%; height:100%; border-radius:2px; background-color:currentColor; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #contents.c_main .cm_hero .cmh_scroll:hover {border-color:rgba(255, 255, 255, 1); background-color:#fff;} #contents.c_main .cm_hero .cmh_scroll:hover i {color:#1b4792;} #contents.c_main .cm_wrap {position:relative; z-index:1; padding:120px 0;} #contents.c_main .cm_head {display:inline-block; vertical-align:middle; width:100%; margin-bottom:50px;} #contents.c_main .cm_head p {margin-top:20px;} #contents.c_main .cm_head a {display:inline-block; vertical-align:middle; position:relative; width:100%; width:58px; height:58px; margin-top:45px; border:rgba(56, 57, 70, 0.3) solid 1px; border-radius:30px; transition:0.2s; -webkit-transition:0.2s;} #contents.c_main .cm_head a i {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:2px; height:16px; margin-top:-8px; margin-left:0; color:#38393c; transform:rotate(-90deg); -ms-transform:rotate(-90deg); transition:0.2s; -webkit-transition:0.2s;} #contents.c_main .cm_head a i:before {content:""; position:absolute; right:-5px; top:0; width:100%; height:100%; border-radius:2px; background-color:currentColor; transform:rotate(45deg); -ms-transform:rotate(45deg);} #contents.c_main .cm_head a i:after {content:""; position:absolute; left:-5px; top:0; width:100%; height:100%; border-radius:2px; background-color:currentColor; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #contents.c_main .cm_head a:hover {border-color:#1b4792; background-color:#1b4792;} #contents.c_main .cm_head a:hover i {color:#fff;} #contents.c_main .cm_body {display:inline-block; vertical-align:middle; width:100%;} #contents.c_main .cm_program {margin-top:-80px; padding-top:200px; background-color:#fff;} #contents.c_main .cm_program ul {display:inline-block; vertical-align:middle; width:100%;} #contents.c_main .cm_program li {display:inline-block; vertical-align:middle; float:left; width:20%; height:480px;} #contents.c_main .cm_program .cmp_pic {display:inline-block; vertical-align:middle; position:relative; width:180px; height:180px; border-radius:150px; background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:cover; box-shadow:30px 30px 60px rgba(0, 0, 0, 0.25); transition:0.3s; -webkit-transition:0.3s;} #contents.c_main .cm_program .cc2uc .cmp_pic {background-image:url("../images/common/pic_brand_cc2uc.jpg");} #contents.c_main .cm_program .hi2uc .cmp_pic {background-image:url("../images/common/pic_brand_hi2uc.jpg");} #contents.c_main .cm_program .calinstitute .cmp_pic {background-image:url("../images/common/pic_brand_cal_institute.jpg");} #contents.c_main .cm_program .calkorea .cmp_pic {background-image:url("../images/common/pic_brand_cal_korea.jpg");} #contents.c_main .cm_program .calopt .cmp_pic {background-image:url("../images/common/pic_brand_cal_opt.jpg");} #contents.c_main .cm_program .cmp_pic a {display:inline-block; vertical-align:middle; width:100%; height:100%;} #contents.c_main .cm_program .cmp_pic i {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; z-index:1; width:60px; height:40px; margin-top:-20px; margin-left:-30px; transition:0.3s; -webkit-transition:0.3s;} #contents.c_main .cm_program .cmp_pic i:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:0; right:0; bottom:15px; height:1px; border-radius:1px; background-color:#fff; transition:0.3s; -webkit-transition:0.3s;} #contents.c_main .cm_program .cmp_pic i:after {content:""; display:inline-block; vertical-align:middle; position:absolute; bottom:20px; right:-1px; width:13px; height:1px; border-radius:1px; background-color:#fff; transform:rotate(45deg); -ms-transform:rotate(45deg);} #contents.c_main .cm_program .cmp_pic:hover i {width:80px; margin-left:-40px;} #contents.c_main .cm_program li:hover .cmp_pic {transform:scale(1.2);} #contents.c_main .cm_program .cmp_brand {display:inline-block; vertical-align:middle; position:relative; width:200px; height:30px; margin:30px 0; background-image:url("../images/common/logo_brand.png"); background-image:url("../images/ie/logo_brand.png")\9; background-repeat:no-repeat; background-size:100% auto; transition:0.3s; -webkit-transition:0.3s;} #contents.c_main .cm_program .cc2uc .cmp_brand {background-position:left 0;} #contents.c_main .cm_program .hi2uc .cmp_brand {background-position:left -30px;} #contents.c_main .cm_program .calinstitute .cmp_brand {background-position:left -60px;} #contents.c_main .cm_program .calkorea .cmp_brand {background-position:left -90px;} #contents.c_main .cm_program .calopt .cmp_brand {background-position:left -120px;} #contents.c_main .cm_program li:hover .cmp_brand {transform:scale(1.2);} #contents.c_main .cm_program .cm_body strong:before {content:""; position:absolute; left:50%; top:-40px; width:40px; height:1px; margin-left:-20px; background-color:#d3d6e3;} #contents.c_main .cm_program .cm_body strong {display:inline-block; vertical-align:middle; position:relative; width:100%; margin-top:40px; font-weight:800; font-size:18px; color:#38393c; line-height:20px; letter-spacing:-0.5px; transition:0.3s; -webkit-transition:0.3s;} #contents.c_main .cm_program .cm_body strong > span {display:block;} #contents.c_main .cm_program .cm_body p {margin-top:20px; font-weight:300; font-size:13px; color:#999ca7; line-height:20px; letter-spacing:-0.5px; word-break:keep-all; transition:0.3s; -webkit-transition:0.3s;} #contents.c_main .cm_program .cm_body p > span {display:block;} #contents.c_main .cm_media {background-color:#f5f6f9;} #contents.c_main .cm_media .cm_head {position:absolute; left:0; top:0; width:25%;} #contents.c_main .cm_media .cmm_success {display:inline-block; vertical-align:middle; position:absolute; left:25%; right:25%; top:0;} #contents.c_main .cm_media .cmm_success .cmms_wrap {width:auto; height:270px; margin:0 10px; border-radius:10px; background-image:url("../images/common/bg_success.jpg"); background-repeat:no-repeat; background-position:center bottom; background-size:cover; text-shadow:0 1px 3px rgba(0, 0, 0, 0.15);} #contents.c_main .cm_media .cmm_success .cms_display {display:inline-block; vertical-align:middle; overflow:hidden; width:100%; width:calc(100% - 60px); height:200px; margin:20px 30px; font-size:15px; color:#fff; line-height:32px; text-align:left; text-shadow:0 1px 3px rgba(4, 34, 92, 0.7);} #contents.c_main .cm_media .cmm_success .cms_display li {margin-bottom:6px;} #contents.c_main .cm_media .cmm_success .cms_display .cmsd_wrap {height:32px; padding:0 15px; border:rgba(108, 111, 123, 0.7) solid 1px; border-radius:5px; background:linear-gradient(to bottom, rgba(95, 98, 110, 0.5) 0%, rgba(95, 98, 110, 0.7) 50%, rgba(124, 127, 139, 0.9) 50%, rgba(95, 98, 110, 0.5) 100%); box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);} #contents.c_main .cm_media .cmm_success .cms_display strong {display:inline-block; vertical-align:middle; float:left; width:95px; font-weight:600;} #contents.c_main .cm_media .cmm_success .cms_display span {display:inline-block; vertical-align:middle; float:left; width:75px; font-weight:600;} #contents.c_main .cm_media .cmm_success .cms_display p {margin-left:170px; color:#ffd200; overflow:hidden; font-weight:600; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;} #contents.c_main .cm_media .cmm_success div.text {margin:0 30px; margin-top:60px; padding-top:30px; background-image:url("../images/common/icon_success.png"); background-repeat:no-repeat; background-size:30px; background-position:center top;} #contents.c_main .cm_media .cmm_success p.text {position:relative; margin:0 30px; margin-top:10px; padding-top:15px;} #contents.c_main .cm_media .cmm_success p.text:before {content:""; position:absolute; left:50%; top:0; width:30px; height:2px; margin-left:-15px; background-color:#fff; opacity:0.3;} #contents.c_main .cm_media .cmm_success .owl-nav {display:inline-block; vertical-align:middle; position:absolute; left:20px; right:20px; top:50%; z-index:3; margin-top:-15px;} #contents.c_main .cm_media .cmm_success .owl-nav div {display:inline-block; vertical-align:middle; position:relative; float:left; width:28px; height:28px; border:rgba(56, 57, 70, 0.3) solid 1px; border-radius:50px; font-size:0; line-height:0; text-indent:-9999px; transition:0.2s; -webkit-transition:0.2s;} #contents.c_main .cm_media .cmm_success .owl-nav div:hover {border-color:#fff; background-color:#fff; box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);} #contents.c_main .cm_media .cmm_success .owl-nav div:before {content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin-top:-5px; color:#38393c; border-top:solid 2px currentColor; border-right:solid 2px currentColor; transition:0.2s; -webkit-transition:0.2s;} #contents.c_main .cm_media .cmm_success .owl-nav div:hover:before {color:#1b4792;} #contents.c_main .cm_media .cmm_success .owl-nav .owl-prev {float:left;} #contents.c_main .cm_media .cmm_success .owl-nav .owl-prev:before {margin-left:-3px; transform:rotate(-135deg); -ms-transform:rotate(-135deg);} #contents.c_main .cm_media .cmm_success .owl-nav .owl-next {float:right;} #contents.c_main .cm_media .cmm_success .owl-nav .owl-next:before {margin-left:-7px; transform:rotate(45deg); -ms-transform:rotate(45deg);} #contents.c_main .cm_media .cmm_success .owl-dots {display:none;} #contents.c_main .cm_media .cmm_list {display:inline-block; vertical-align:middle; width:100%;} #contents.c_main .cm_media .cmm_list > ul > li {display:inline-block; vertical-align:middle; float:left; width:25%;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(1) {margin-left:75%; text-align:right;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(2) {text-align:left;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(3) {text-align:left;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(4) {text-align:right;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(5) {text-align:right;} #contents.c_main .cm_media .cmm_list .cmml_box {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:270px; height:270px; margin-top:40px; padding:35px 40px; border:#d3d6e3 solid 1px; border-radius:10px; text-align:left;} #contents.c_main .cm_media .cmm_list .cmml_box.shadow {box-shadow:0 20px 40px rgba(0, 0, 0, 0.1);} #contents.c_main .cm_media .cmm_list .cmml_box > a {position:absolute; left:40px; right:40px; bottom:35px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;} #contents.c_main .cm_media .cmm_list .cmml_box > a:hover {text-decoration:underline;} #contents.c_main .cm_media .cmm_list .cmml_box > a.cw:hover {text-decoration-color:rgba(255, 255, 255, 0.3);} #contents.c_main .cm_media .cmm_list .cmml_box > a.cb:hover {text-decoration-color:rgba(27, 71, 146, 0.3);} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(1) .cmml_box {margin-top:0; border:none; background-color:#1b4792;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(2) .cmml_box {border:none; background-color:#38393c;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(3) .cmml_box {margin-left:10px;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(4) .cmml_box {margin-right:10px;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(5) .cmml_box {border:none; background-color:#fff;} #contents.c_main .cm_media .cmm_list .cmml_box ul {display:inline-block; vertical-align:middle; position:absolute; left:45px; right:45px; bottom:35px; width:180px;} #contents.c_main .cm_media .cmm_list .cmml_box li {display:inline-block; vertical-align:middle; float:left; margin:0 6px;} #contents.c_main .cm_media .cmm_list .cmml_box li > a {display:inline-block; vertical-align:middle; width:36px; height:36px; margin:0; border-radius:20px; background-color:#cbcdd7; background-image:url("../images/common/icon_sns.png"); background-image:url("../images/ie/icon_sns.png")\9; background-repeat:no-repeat; background-size:300% auto; transition:0.2s; -webkit-transition:0.2s;} #contents.c_main .cm_media .cmm_list .cmml_box li.youtube > a {background-position:left 0;} #contents.c_main .cm_media .cmm_list .cmml_box li.instagram > a {background-position:left 33.3%;} #contents.c_main .cm_media .cmm_list .cmml_box li.facebook > a {background-position:left 66.6%;} #contents.c_main .cm_media .cmm_list .cmml_box li.naverblog > a {background-position:left 99.9%;} #contents.c_main .cm_media .cmm_list .cmml_box li.youtube > a:hover {background-color:#ff0000;} #contents.c_main .cm_media .cmm_list .cmml_box li.instagram > a:hover {background-color:#c83491;} #contents.c_main .cm_media .cmm_list .cmml_box li.facebook > a:hover {background-color:#3d5a99;} #contents.c_main .cm_media .cmm_list .cmml_box li.naverblog > a:hover {background-color:#06bd34;} #contents.c_main .cm_media .cmm_list .cmml_box li:first-child {margin-left:0;} #contents.c_main .cm_media .cmm_list .cmml_box li:last-child {margin-right:0;} /* 서브 */ #contents {background-color:#f5f6f9;} #contents .c_sub .cs_hero {display:inline-block; vertical-align:middle; position:relative; overflow:hidden; width:100%; height:550px; background:#43484b; background-repeat:no-repeat; background-position:center; background-size:cover;} #contents .c_sub.about .cs_hero {background-image:url("../images/common/bg_hero_about.jpg");} #contents .c_sub.success .cs_hero {background-image:url("../images/common/bg_hero_success.jpg");} #contents .c_sub.program .cs_hero {background-image:url("../images/common/bg_hero_program.jpg");} #contents .c_sub.student .cs_hero {background-image:url("../images/common/bg_hero_student.jpg");} #contents .c_sub.media .cs_hero {background-image:url("../images/common/bg_hero_media.jpg");} #contents .c_sub.contact .cs_hero {background-image:url("../images/common/bg_hero_contact.jpg");} #contents .c_sub.other .cs_hero {background-image:url("../images/common/bg_hero_other.jpg");} #contents .c_sub .cs_hero .csh_slogan {display:inline-block; vertical-align:middle; position:absolute; left:0; top:300px; z-index:3; width:100%; text-align:center;} #contents .c_sub .cs_hero .csh_slogan h3 {display:inline-block; vertical-align:middle; position:relative; width:100%; font-size:40px; font-weight:900; color:#fff; line-height:50px;} #contents .c_sub .cs_hero .csh_slogan h3:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; bottom:-15px; width:50px; height:5px; margin-left:-25px; background:#20438f;} #contents .c_sub .cs_hero .csh_slogan p {display:inline-block; vertical-align:middle; width:100%; margin-top:25px; font-size:15px; font-weight:300; color:#fff; line-height:30px; letter-spacing:5px; opacity:0.6;} #contents .c_sub .cs_hero .csh_effect {display:inline-block; vertical-align:middle; position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; background-color:rgba(25, 27, 30, 0.6);} #contents .c_sub .cs_hero .csh_effect:after {content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:2; background:linear-gradient(to bottom, rgba(27, 71, 146, 0) 40%, rgba(27, 71, 146, 0.6) 100%);} #contents .c_sub .cs_wrap {position:relative; z-index:4;} #contents .c_sub .cs_wrap > .wrap {position:relative; margin-top:-30px;} #contents .c_sub .cs_menu {position:relative; margin-bottom:15px; background-color:#fff; box-shadow:0 0 20px rgba(0, 0, 0, 0.1);} #contents .c_sub .cs_menu ul {display:inline-block; vertical-align:middle; width:100%;} #contents .c_sub .cs_menu li {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; height:60px;} #contents .c_sub .cs_menu li:before {content:""; position:absolute; left:0; top:0; bottom:0; z-index:1; width:1px; background:#ecf0f3;} #contents .c_sub .cs_menu li:first-child:before {display:none;} #contents .c_sub .cs_menu a {display:inline-block; vertical-align:middle; position:relative; width:100%; height:100%; font-size:16px; color:#222222; line-height:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all; transition:0.2s; -webkit-transition:0.2s;} #contents .c_sub .cs_menu a:hover {color:#20438f; background:linear-gradient(to bottom, #fff 0%, #f3f6f9 100%);} #contents .c_sub .cs_menu a:before {content:""; position:absolute; left:30%; right:30%; bottom:0; height:1px; background:#20438f; opacity:0; transition:0.2s; -webkit-transition:0.2s;} #contents .c_sub .cs_menu a:hover:before {left:0; right:0; opacity:1;} #contents .c_sub .cs_menu .on a {background:#20438f; font-weight:900; color:#fff;} #contents .c_sub .cs_menu .div2 li {width:50%;} #contents .c_sub .cs_menu .div3 li {width:33.333333%;} #contents .c_sub .cs_menu .div4 li {width:25%;} #contents .c_sub .cs_menu .div5 li {width:20%;} #contents .c_sub .cs_page {margin-bottom:15px; padding:100px; background-color:#fff; box-shadow:0 0 20px rgba(0, 0, 0, 0.1);} #contents .c_sub .cs_head {display:inline-block; vertical-align:middle; width:100%; margin-bottom:40px;} #contents .c_sub .cs_body {display:inline-block; vertical-align:middle; width:100%;} #contents .c_sub .cs_body .csb_left {display:inline-block; vertical-align:middle; float:left; width:calc(50% - 20px);} #contents .c_sub .cs_body .csb_right {display:inline-block; vertical-align:middle; float:right; width:calc(50% - 20px);} #contents .c_sub .cs_history {display:inline-block; vertical-align:middle; width:100%;} #contents .c_sub .cs_history .csh_title {display:inline-block; vertical-align:middle; float:left; position:relative; width:500px;} #contents .c_sub .cs_history .csh_title.high {float:none; position:fixed; left:50%; top:255px; margin-left:-500px;} #contents .c_sub .cs_history .csh_title .csht_img {display:inline-block; vertical-align:middle; float:right; position:relative; overflow:hidden; width:400px; height:225px; margin-right:90px; border-radius:10px; box-shadow:0 20px 60px rgba(0, 0, 0, 0.15);} #contents .c_sub .cs_history .csh_title .csht_img img {position:absolute; left:0; top:0; transition:0.5s; opacity:0; width:100%;} #contents .c_sub .cs_history .csh_title .csht_img .on {opacity:1;} #contents .c_sub .cs_history .csh_title .csht_bg {display:inline-block; vertical-align:middle; position:absolute; right:100px; top:180px; z-index:1; font-size:90px; font-weight:900; color:#f8f8f8; letter-spacing:-2px; line-height:90px; text-align:right;} #contents .c_sub .cs_history .csh_list {display:inline-block; vertical-align:middle; float:right; position:relative; width:500px; text-align:left;} #contents .c_sub .cs_history .csh_list dt {position:relative; z-index:1 !important; padding-left:60px;} #contents .c_sub .cs_history .csh_list dt:before {content:""; position:absolute; left:0; top:50%; z-index:1; width:7px; height:7px; margin-top:-8px; margin-left:-8px; border:#fff solid 5px; border-radius:50%; background-color:#adadad; transition:0.2s;} #contents .c_sub .cs_history .csh_list dt.on:before {width:11px; height:11px; border-color:#20438f; border-width:3px; background-color:#fff;} #contents .c_sub .cs_history .csh_list dt:after {content:""; position:absolute; left:0; top:50%; width:45px; height:1px; background-color:#ecf0f3;} #contents .c_sub .cs_history .csh_list dd {position:relative; padding:5px 0 60px 60px;} #contents .c_sub .cs_history .csh_list dd:before {content:""; position:absolute; left:0; top:-20px; bottom:-20px; width:1px; background-color:#ecf0f3;} #contents .c_sub .cs_history .csh_list dd:last-child:before {display:none;} #contents .c_sub .cs_history .csh_list dd:after {content:""; position:absolute; left:0; top:-20px; bottom:100%; width:1px; background-color:#20438f; opacity:0; transition:0.2s;} #contents .c_sub .cs_history .csh_list dd.on:after {bottom:-20px; opacity:1;} #contents .c_sub .cs_history .csh_list dd:last-child:after {display:none;} #contents .c_sub .cs_history .csh_list dd i.tiny {display:inline-block; vertical-align:top;} #contents .c_sub .cs_staff {margin-top:20px; padding:50px 10px; border-radius:20px; background-image:url("../images/about/staff_bg.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; text-align:center;} #contents .c_sub .cs_staff li {padding:15px;} #contents .c_sub .cs_staff span {opacity:0.5;} #contents .c_sub .cs_overview {padding:30px 15px; border:#20438f solid 0px; border-left-width:10px; border-right-width:10px; border-radius:50px; text-align:center;} #contents .c_sub .cs_overview li {display:inline-block; vertical-align:middle; width:100%; padding:10px 0;} #contents .c_sub .cs_overview strong, #contents .c_sub .cs_overview span {display:inline-block; vertical-align:middle; width:100%;} #contents .c_sub .cs_success {display:inline-block; vertical-align:middle; width:100%; border-top:#20438f solid 1px;} #contents .c_sub .cs_success > ul > li {border-bottom:#ecf0f3 solid 1px; } #contents .c_sub .cs_success .css_head {display:block; position:relative; padding:30px 35px; cursor:pointer;} #contents .c_sub .cs_success .css_head:before {content:""; position:absolute; right:40px; top:50%; width:10px; height:10px; margin-top:-7px; color:#787f84; border-bottom:solid 1px currentColor; border-right:solid 1px currentColor; transform:rotate(45deg); -ms-transform:rotate(45deg);} #contents .c_sub .cs_success .css_head.on:before {margin-top:0; transform:rotate(-135deg); -ms-transform:rotate(-135deg);} #contents .c_sub .cs_success .css_head.giant {font-size:35px;} #contents .c_sub .cs_success .css_head > span {display:inline-block; vertical-align:middle; position:relative;} #contents .c_sub .cs_success .css_head.on > span:before {content:""; position:absolute; left:-5px; right:-5px; bottom:-2px; height:15px; background:#ffff53;} #contents .c_sub .cs_success .css_head > span > span {position:relative; z-index:1;} #contents .c_sub .cs_success .css_body {display:none; vertical-align:middle; box-sizing:border-box; width:100%; padding:30px; background-color:#f3f6f9;} #contents .c_sub .cs_success .css_body.on {display:inline-block;} #contents .c_sub .cs_success .css_body > li {display:inline-block; vertical-align:middle; float:left; width:50%;} #contents .c_sub .cs_success .css_body .css_wrap {overflow:hidden; position:relative; margin:10px; border-radius:10px; background:#fff; box-shadow:0 20px 60px rgba(0, 0, 0, 0.1);} #contents .c_sub .cs_success .css_body .css_pic {position:absolute; left:0; top:0; bottom:0; width:150px; background-color:#787f84; background-repeat:no-repeat; background-position:center; background-size:cover;} #contents .c_sub .cs_success .css_body .css_info {padding:10px 15px 10px 165px;} #contents .c_sub .cs_success .css_body .css_info li {display:inline-block; vertical-align:middle; position:relative; width:100%; padding:4px 0; border-bottom:#ecf0f3 dashed 1px;} #contents .c_sub .cs_success .css_body .css_info li:last-child {border-bottom:none;} #contents .c_sub .cs_success .css_body .css_info .cssi_icon {display:inline-block; vertical-align:middle; float:left; width:20px; height:20px; margin-top:2px; margin-right:2px; background-image:url("../images/success/icon_student.png"); background-image:url("../images/ie/icon_student.png")\9; background-repeat:no-repeat; background-size:100% auto;} #contents .c_sub .cs_success .css_body .css_info .cssi_icon.t1 {background-position:left 0;} #contents .c_sub .cs_success .css_body .css_info .cssi_icon.t2 {background-position:left -20px;} #contents .c_sub .cs_success .css_body .css_info .cssi_icon.t3 {background-position:left -40px;} #contents .c_sub .cs_success .css_body .css_info .cssi_icon.t4 {background-position:left -60px;} #contents .c_sub .cs_success .css_body .css_info .cssi_icon.t5 {background-position:left -80px;} #contents .c_sub .cs_success .css_body .css_info strong {position:absolute; left:0; top:4px;} #contents .c_sub .cs_success .css_body .css_info span {display:block; margin-left:65px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;} #contents .c_sub .cs_process {margin:50px 30px 80px 30px;} #contents .c_sub .cs_process ol {display:inline-block; vertical-align:middle; width:100%;} #contents .c_sub .cs_process li {display:inline-block; vertical-align:middle; position:relative; float:left; width:180px; margin-left:-20px;} #contents .c_sub .cs_process li:first-child {margin-left:0;} #contents .c_sub .cs_process li:last-child {float:right; margin-left:0;} #contents .c_sub .cs_process li:last-child:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:-80px; top:90px; width:60px; height:1px; background:#222;} #contents .c_sub .cs_process li:last-child:after {content:""; display:inline-block; vertical-align:middle; position:absolute; left:-29px; top:86.5px; width:10px; height:1px; background:#222; transform:rotate(45deg); -ms-transform:rotate(45deg);} #contents .c_sub .cs_process i {display:inline-block; vertical-align:middle; position:relative; width:180px; height:180px; border-radius:90px; background-color:currentColor;} #contents .c_sub .cs_process li:nth-child(1) i {color:#a6acb0;} #contents .c_sub .cs_process li:nth-child(2) i {color:#787f84;} #contents .c_sub .cs_process li:nth-child(3) i {color:#43484b;} #contents .c_sub .cs_process li:nth-child(4) i {color:#222;} #contents .c_sub .cs_process li:nth-child(5) i {color:#20438f;} #contents .c_sub .cs_process i:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:50px; height:50px; margin-top:-15px; margin-left:-25px; background-image:url("../images/admissions/icon_process.png"); background-image:url("../images/ie/icon_process.png")\9; background-repeat:no-repeat; background-size:100% auto;} #contents .c_sub .cs_process li:nth-child(1) i:before {background-position:center 0;} #contents .c_sub .cs_process li:nth-child(2) i:before {background-position:center -50px;} #contents .c_sub .cs_process li:nth-child(3) i:before {background-position:center -150px;} #contents .c_sub .cs_process li:nth-child(4) i:before {background-position:center -100px;} #contents .c_sub .cs_process li:nth-child(5) i:before {background-position:center -200px;} #contents .c_sub .cs_process i:after {content:""; display:inline-block; vertical-align:middle; position:absolute; left:0; top:25px; width:100%; height:20px; font-size:12px; font-weight:900; color:#fff; line-height:20px; text-align:center;} #contents .c_sub .cs_process li:nth-child(1) i:after {content:"1단계";} #contents .c_sub .cs_process li:nth-child(2) i:after {content:"2단계";} #contents .c_sub .cs_process li:nth-child(3) i:after {content:"3단계";} #contents .c_sub .cs_process li:nth-child(4) i:after {content:"4단계";} #contents .c_sub .cs_process li:nth-child(5) i:after {content:"5단계";} #contents .c_sub .cs_process span {display:inline-block; vertical-align:middle; width:100%; height:30px; margin-top:10px; text-align:center;} #contents .c_sub .cs_process li:nth-child(1) span {color:#a6acb0;} #contents .c_sub .cs_process li:nth-child(2) span {color:#787f84;} #contents .c_sub .cs_process li:nth-child(3) span {color:#43484b;} #contents .c_sub .cs_process li:nth-child(4) span {color:#222;} #contents .c_sub .cs_process li:nth-child(5) span {color:#20438f;} #contents .c_sub .cs_process span mark {color:#20438f;} #contents .c_sub .cs_faq {display:inline-block; vertical-align:middle; width:100%; margin-bottom:100px; border-top:#20438f solid 1px;} #contents .c_sub .cs_faq > ul > li {border-bottom:#ecf0f3 solid 1px; } #contents .c_sub .cs_faq .csf_head {display:block; position:relative; padding:20px 70px 20px 25px; cursor:pointer;} #contents .c_sub .cs_faq .csf_head:before {content:""; position:absolute; right:30px; top:50%; width:10px; height:10px; margin-top:-7px; color:#787f84; border-bottom:solid 1px currentColor; border-right:solid 1px currentColor; transform:rotate(45deg); -ms-transform:rotate(45deg);} #contents .c_sub .cs_faq .csf_head:hover {background:#20438f; color:#fff !important;} #contents .c_sub .cs_faq .csf_head:hover mark {color:#ffd200 !important;} #contents .c_sub .cs_faq .csf_head:hover:before {color:#fff;} #contents .c_sub .cs_faq .csf_head.on {background:#787f84; color:#fff !important;} #contents .c_sub .cs_faq .csf_head.on mark {color:#fff !important;} #contents .c_sub .cs_faq .csf_head.on:before {margin-top:0; color:#fff; transform:rotate(-135deg); -ms-transform:rotate(-135deg);} #contents .c_sub .cs_faq .csf_head mark {margin-right:10px;} #contents .c_sub .cs_faq .csf_body {display:none; vertical-align:middle; box-sizing:border-box; width:100%; padding:20px 30px; background-color:#f3f6f9;} #contents .c_sub .cs_faq .csf_body.on {display:inline-block;} #contents .c_sub .cs_program {display:inline-block; vertical-align:middle; width:100%;} #contents .c_sub .cs_program .csp_wrap {display:inline-block; vertical-align:middle; width:100%;} #contents .c_sub .cs_program p {display:inline-block; vertical-align:middle; float:left; line-height:50px;} #contents .c_sub .cs_program a {display:inline-block; vertical-align:middle; float:right;} #contents .c_sub .cs_contact .csc_map {display:inline-block; vertical-align:middle; width:100%; height:400px; margin:10px 0;} #contents .c_sub .cs_contact .csc_sns {display:inline-block; vertical-align:middle; float:left; width:30px; height:30px; margin-right:5px; background-image:url("../images/common/icon_sns.png"); background-image:url("../images/ie/icon_sns.png")\9; background-repeat:no-repeat; background-size:200% auto;} #contents .c_sub .cs_contact .csc_sns.instagram {background-position:left top;} #contents .c_sub .cs_contact .csc_sns.facebook {background-position:left center;} #contents .c_sub .cs_contact .csc_sns.youtube {background-position:left bottom;} #contents .c_sub .cs_contact a:hover .csc_sns.instagram {background-position:right top;} #contents .c_sub .cs_contact a:hover .csc_sns.facebook {background-position:right center;} #contents .c_sub .cs_contact a:hover .csc_sns.youtube {background-position:right bottom;} #contents .c_sub .cs_contact .form {display:inline-block; vertical-align:middle; width:100%; max-width:800px; text-align:left;} #contents .c_sub .cs_contact .btn_wrap {margin-top:30px;} #contents .c_sub .cs_facebook .fb-page {width:100% !important; height:620px !important; margin-top:2%; margin-bottom:3px;} #contents .c_sub .cs_facebook .fb-page > span {display:block !important; width:100% !important; height:620px !important;} #contents .c_sub .cs_facebook .fb-page > span > iframe {width:100% !important; height:620px !important;} #contents .c_sub .cs_instagram {display:inline-block; vertical-align:middle; width:100%;} #contents .c_sub .cs_instagram img {display:inline-block; vertical-align:middle; float:left; width:29.333%; margin:2%;} #contents .c_sub .cs_youtube {display:inline-block; vertical-align:middle; position:relative; width:100%; max-width:560px;} #contents .c_sub .cs_youtube .csy_video {display:inline-block; vertical-align:middle; position:relative; width:100%;} #contents .c_sub .cs_youtube .csy_video iframe {position:absolute; left:0; top:0; width:100%; height:100%;} #contents .c_sub .cs_youtube .csy_video img {width:100%;} #contents .c_sub .cs_youtube .button {margin-top:10px !important;} /* 게시판 */ #board {display:inline-block; vertical-align:middle; width:100%; text-align:left;} #board .btn_wrap {margin-top:30px;} #board .b_category {margin-bottom:20px; padding:5px; border:#ecf0f3 solid 1px; border-radius:5px; background:#f3f6f9; text-align:center;} #board .b_category ul {display:inline-block; vertical-align:middle;} #board .b_category li {display:inline-block; vertical-align:middle; float:left; margin:0 5px;} #board .b_category a {display:inline-block; vertical-align:middle; min-width:100px; padding:0 20px; border:#fff solid 1px; border-radius:2px; background:#fff; font-size:15px; font-weight:500; color:#20438f; line-height:40px; box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);} #board .b_category a:hover {border-color:#20438f;} #board .b_category a#bo_cate_on {border-color:#20438f; background:#20438f; color:#fff;} #board .b_info {display:inline-block; vertical-align:middle; width:100%;} #board .b_info .bi_count {display:inline-block; vertical-align:middle; float:left; font-size:13px; color:#666; line-height:36px;} #board .b_info .bi_count strong {color:#20438f;} #board .b_list {display:inline-block; vertical-align:middle; width:100%;} #board .b_list .bl_wrap {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; border-top:#20438f solid 1px;} #board .b_list .bl_head {display:inline-block; vertical-align:middle; position:relative; width:100%; padding:12px 0; border-bottom:#ecf0f3 solid 1px; background-color:#f3f6f9; font-size:14px; color:#666; line-height:30px; text-align:center;} #board .b_list .bl_head a {color:#666;} #board .b_list .bl_head .blh_wrap {display:inline-block; vertical-align:middle; width:100%;} #board .b_list .bl_head .blh_wrap div {display:inline-block; vertical-align:middle; position:absolute; top:12px;} #board .b_list .bl_head .blh_checkbox {left:0; width:40px;} #board .b_list .bl_head .blh_no {left:0; width:100px;} #board .b_list .bl_head .blh_no.checkbox {left:40px;} #board .b_list .bl_head .blh_subject {display:block !important; position:relative !important; top:0 !important; margin-left:100px; margin-right:290px;} #board .b_list .bl_head .blh_subject.checkbox {margin-left:140px;} #board .b_list .bl_head .blh_name {right:160px; width:130px;} #board .b_list .bl_head .blh_date {right:80px; width:80px;} #board .b_list .bl_head .blh_hit {right:0; width:80px;} #board .b_list .bl_body ul {display:inline-block; vertical-align:middle; width:100%;} #board .b_list .bl_body li {display:block; position:relative; padding:12px 0; border-bottom:#ecf0f3 solid 1px; font-size:13px; color:#666; line-height:30px; text-align:center;} #board .b_list .bl_body li.notice {background-color:#f3f6f9;} #board .b_list .bl_body .blb_wrap {display:inline-block; vertical-align:middle; width:100%;} #board .b_list .bl_body .blb_wrap div {display:inline-block; vertical-align:middle; position:absolute; top:12px;} #board .b_list .bl_body .blb_checkbox {left:0; width:40px;} #board .b_list .bl_body .blb_no {left:0; width:100px;} #board .b_list .bl_body .blb_no.checkbox {left:40px;} #board .b_list .bl_body .notice .blb_no {font-weight:normal; color:#20438f;} #board .b_list .bl_body .blb_subject {display:block !important; position:relative !important; top:0 !important; margin-left:100px; margin-right:290px; font-size:15px;} #board .b_list .bl_body .blb_subject.checkbox {margin-left:140px;} #board .b_list .bl_body .blb_subject a {display:inline-block; vertical-align:middle; float:left; color:#666; text-align:left;} #board .b_list .bl_body .notice .blb_subject {font-weight:500;} #board .b_list .bl_body .blb_subject:hover a {color:#20438f; text-decoration:underline;} #board .b_list .bl_body .blb_subject .cnt_cmt {display:inline-block; vertical-align:middle; width:auto; height:18px; margin:0 4px; padding:0 6px; border-radius:5px; background-color:#20438f; font-size:11px; color:#fff; line-height:18px; text-align:center;} #board .b_list .bl_body .blb_subject:hover .cnt_cmt {background-color:#20438f;} #board .b_list .bl_body .blb_name {right:160px; width:130px;} #board .b_list .bl_body .blb_name span {color:#20438f;} #board .b_list .bl_body .blb_name .sv_wrap {display:inline-block; vertical-align:middle; position:relative;} #board .b_list .bl_body .blb_name .sv_member {font-size:13px; font-weight:500; color:#20438f; line-height:22px;} #board .b_list .bl_body .blb_name .sv_member img {display:inline-block; vertical-align:middle; width:22px; height:22px;} #board .b_list .bl_body .blb_name .sv {display:none; vertical-align:middle; position:absolute; right:0; top:0; width:100px;} #board .b_list .bl_body .blb_name .sv.sv_on {display:none;} #board .b_list .bl_body .blb_date {right:80px; width:80px;} #board .b_list .bl_body .blb_hit {right:0; width:80px;} #board .b_list .bl_photo ul {display:inline-block; vertical-align:middle; width:100%;} #board .b_list .bl_photo li {display:inline; float:left; position:relative; width:23%; margin:20px 1%; font-size:13px; color:#666; line-height:30px; text-align:center;} #board .b_list .bl_photo .blb_wrap {display:inline-block; vertical-align:middle; width:100%;} #board .b_list .bl_photo .blb_wrap div {display:inline-block; vertical-align:middle;} #board .b_list .bl_photo .blb_img {display:block !important; width:auto !important;} #board .b_list .bl_photo .blb_img img {width:100%; height:auto; border-radius:20px;} #board .b_list .bl_photo .notice .blb_img img {border:#20438f solid 10px; box-sizing:border-box;} #board .b_list .bl_photo .blb_checkbox {float:left; margin-right:10px;} #board .b_list .bl_photo .blb_checkbox input {display:inline-block; vertical-align:middle;} #board .b_list .bl_photo .blb_no {float:left;} #board .b_list .bl_photo .notice .blb_no {font-weight:normal; color:#20438f;} #board .b_list .bl_photo .blb_date {float:right;} #board .b_list .bl_photo .blb_subject {width:100%; font-size:14px; text-align:left;} #board .b_list .bl_photo .blb_subject a {display:inline-block; vertical-align:middle; width:100%; color:#222; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;} #board .b_list .bl_photo .notice .blb_subject {font-weight:500;} #board .b_list .bl_photo .blb_subject:hover a {color:#20438f;} #board .b_list .bl_photo .blb_subject .cnt_cmt {display:inline-block; vertical-align:middle; width:auto; height:18px; margin:0 4px; padding:0 6px; border-radius:5px; background-color:#20438f; font-size:11px; color:#fff; line-height:18px; text-align:center;} #board .b_list .bl_photo .blb_subject:hover .cnt_cmt {background-color:#20438f;} #board .b_list .bl_photo .blb_name {float:left;} #board .b_list .bl_photo .blb_name span {color:#20438f;} #board .b_list .bl_photo .blb_name .sv_wrap {display:inline-block; vertical-align:middle; position:relative;} #board .b_list .bl_photo .blb_name .sv_member {font-size:13px; font-weight:500; color:#20438f; line-height:22px;} #board .b_list .bl_photo .blb_name .sv_member img {display:inline-block; vertical-align:middle; width:22px; height:22px;} #board .b_list .bl_photo .blb_name .sv {display:none; vertical-align:middle; position:absolute; right:0; top:0; width:100px;} #board .b_list .bl_photo .blb_name .sv.sv_on {display:none;} #board .b_list .bl_photo .blb_hit {float:right;} #board .b_view {display:inline-block; vertical-align:middle; width:100%; margin-bottom:40px;} #board .b_view .bv_subject {display:inline-block; vertical-align:middle; width:100%; margin-bottom:10px; text-align:left; font-size:20px; font-weight:500; color:#222; line-height:30px;} #board .b_view .bv_info {display:inline-block; vertical-align:middle; width:100%; padding:20px 0; border-top:#20438f solid 1px; border-bottom:#ecf0f3 solid 1px;} #board .b_view .bv_info ul {display:inline-block; vertical-align:middle; position:relative; width:100%;} #board .b_view .bv_info li {display:inline; float:left; font-size:12px; color:#666; line-height:22px;} #board .b_view .bv_info li span {font-weight:500; color:#20438f;} #board .b_view .bv_info .bvi_name {margin-left:5px; font-size:15px;} #board .b_view .bv_info .bvi_name .sv_wrap {display:inline-block; vertical-align:middle; position:relative;} #board .b_view .bv_info .bvi_name .sv_member {font-size:15px; color:#20438f; line-height:22px;} #board .b_view .bv_info .bvi_name .sv_member img {display:inline-block; vertical-align:middle; width:22px; height:22px;} #board .b_view .bv_info .bvi_name .sv {display:none; vertical-align:middle; position:absolute; right:0; top:0; width:100px;} #board .b_view .bv_info .bvi_name .sv.sv_on {display:none;} #board .b_view .bv_info .bvi_date {margin-left:20px; font-size:15px;} #board .b_view .bv_info .bvi_hit {position:absolute; right:5px; top:0;} #board .b_view .bv_info .bvi_comment {position:absolute; right:90px; top:0;} #board .b_view .bv_op li {display:block; position:relative; margin-top:6px; padding:8px 60px; border:#f1f1f1 solid 1px; border-radius:10px; font-size:12px; color:#666; line-height:30px; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.08);} #board .b_view .bv_op strong {display:inline-block; vertical-align:middle; position:absolute; left:15px; top:8px; color:#394242;} #board .b_view .bv_op span {display:inline-block; vertical-align:middle; position:absolute; right:15px; top:8px; text-align:right;} #board .b_view .bv_op mark {color:#20438f;} #board .b_view .bv_op a {color:#20438f;} #board .b_view .bv_op a:hover {color:#20438f; text-decoration:underline;} #board .b_view .bv_atc {padding:0 10px 30px; border-bottom:#ecf0f3 solid 1px;} #board .b_view .bv_atc #bo_v_img {margin-bottom:30px; text-align:center;} #board .b_comment {display:none;} #board .b_view .bv_atc #bo_v_img img {margin-top:30px;} #board .b_comment {display:none;} #board .b_comment .bc_list {display:inline-block; vertical-align:middle; width:100%;} #board .b_comment .bc_list .bcl_box {display:block; position:relative; margin-bottom:6px; padding:10px 15px; border:#f1f1f1 solid 1px; border-radius:10px; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.08);} #board .b_comment .bc_list .bcl_head {display:inline-block; vertical-align:middle; width:100%; padding-top:3px; padding-bottom:10px; border-bottom:#f1f1f1 solid 1px;} #board .b_comment .bc_list .bcl_info {display:inline-block; vertical-align:middle; float:left; font-size:11px; color:#666; line-height:25px;} #board .b_comment .bc_list .bcl_info .member {font-size:13px; color:#20438f;} #board .b_comment .bc_list .bcl_info .sv_wrap {display:inline-block; vertical-align:middle; position:relative;} #board .b_comment .bc_list .bcl_info .sv_member {font-size:13px; font-weight:500; color:#20438f; line-height:22px;} #board .b_comment .bc_list .bcl_info .sv_member img {display:inline-block; vertical-align:middle; width:22px; height:22px;} #board .b_comment .bc_list .bcl_info .sv {display:none; vertical-align:middle; position:absolute; right:0; top:0; width:100px;} #board .b_comment .bc_list .bcl_info .sv.sv_on {display:none;} #board .b_comment .bc_list .bcl_info ul {display:inline-block; vertical-align:middle;} #board .b_comment .bc_list .bcl_info li {float:left; display:inline; margin-right:10px;} #board .b_comment .bc_list .bcl_btn {display:inline-block; vertical-align:middle; float:right; margin:0; padding:0;} #board .b_comment .bc_list .bcl_btn ul {display:inline-block; vertical-align:middle; float:right; margin:0; padding:0;} #board .b_comment .bc_list .bcl_btn li {float:left; display:inline; margin:0 2px;} #board .b_comment .bc_list .bcl_body {display:inline-block; vertical-align:middle; width:100%; padding:10px 0 5px 0;} #board .b_comment .bc_write {display:inline-block; vertical-align:middle; position:relative; width:100%; height:80px; margin-top:4px;} #board .b_comment .bc_write .bcw_form {margin-right:110px;} #board .b_comment .bc_write .bcw_form .textarea {height:80px;} #board .b_comment .bc_write .bcw_btn {display:inline-block; vertical-align:middle; position:absolute; right:0; top:0;} #board .b_comment .bc_write .bcw_btn .btn {width:100px; height:80px;} #board .b_write {display:block; max-width:800px; margin:0 auto;} #board .b_write .cke_sc {display:none;} #board .b_list .bl_foot {display:inline-block; vertical-align:middle; width:100%; text-align:center;} #board .b_search {display:inline-block; vertical-align:middle; margin-top:30px;} #board .b_search .bs_op {display:inline-block; vertical-align:middle; float:left; width:100px;} #board .b_search .bs_op .select {height:40px; border-radius:0; line-height:38px;} #board .b_search .bs_input {display:inline-block; vertical-align:middle; float:left; width:200px; margin-left:5px;} #board .b_search .bs_input .input {height:40px; border-radius:0; line-height:40px;} #board .b_search .bs_btn {display:inline-block; vertical-align:middle; float:left; width:70px; margin-left:5px;} #board .b_search .bs_btn .button {min-width:auto; width:100%; padding:0;} #board .b_calendar {display:inline-block; vertical-align:middle; width:100%; text-align:center;} #board .b_calendar .bc_title {display:inline-block; vertical-align:middle; width:100%;} #board .b_calendar .bc_title ul {display:inline-block; vertical-align:middle;} #board .b_calendar .bc_title li {display:inline-block; vertical-align:middle; float:left; margin:0 2px;} #board .b_calendar .bc_title li.focus {margin:0 15px;} #board .b_calendar .bc_list {display:inline-block; vertical-align:middle; width:100%; margin-top:30px; border-top:#20438f solid 1px;} #board .b_calendar .bc_list table {width:100%;} #board .b_calendar .bc_list table th {border:#ecf0f3 solid 1px; background-color:#f3f6f9; font-size:14px; color:#666; line-height:40px; text-align:center;} #board .b_calendar .bc_list table td {padding:6px 10px; border:#ecf0f3 solid 1px; font-size:14px; color:#666; line-height:25px; text-align:left;} #board .b_calendar .bc_list .bcl_day {display:inline-block; vertical-align:middle; padding:0 10px; border-radius:20px; background:#f3f6f9;} #board .b_calendar .bc_list a .bcl_day:hover {background:#20438f; color:#fff;} #board .b_calendar .bc_list .bcl_link {display:block; margin:5px 0; padding:5px 10px; border:#ecf0f3 solid 1px; background-color:#f3f6f9; font-size:13px; color:#666; line-height:20px; text-align:left;} #board .b_calendar .bc_list .bcl_link:hover {border-color:#20438f; background-color:#20438f; color:#fff;} /* 카카오톡 */ #kakaotalk {display:inline-block; vertical-align:middle; position:fixed; right:100px; bottom:180px; z-index:9; overflow:hidden; width:60px; height:60px; border-radius:30px; background-color:#f9e000; box-shadow:0 3px 9px rgba(0, 0, 0, 0.08); white-space:nowrap; opacity:0; transition:0.2s; -webkit-transition:0.2s;} #kakaotalk.on {opacity:1;} #kakaotalk i {display:inline-block; vertical-align:middle; float:left; width:60px; height:60px; border-radius:30px; background-image:url("../images/common/icon_kakao.png"); background-image:url("../images/ie/icon_kakao.png")\9; background-repeat:no-repeat; background-size:100% auto;} #kakaotalk span {display:none; vertical-align:middle; width:150px; height:60px; font-size:14px; color:#3b1e1e; line-height:60px; text-align:left; letter-spacing:-0.5px;} #kakaotalk:hover {width:210px; box-shadow:0 5px 15px rgba(0, 0, 0, 0.1);} #kakaotalk:hover span {display:inline-block;} /* 푸터 */ #footer {display:inline-block; vertical-align:middle; position:relative; z-index:5; width:100%;} #footer .f_top {display:inline-block; vertical-align:middle; position:fixed; right:100px; bottom:100px; z-index:1; width:60px; height:60px; border-radius:50px; background-color:#1b4792; box-shadow:0 3px 9px rgba(0, 0, 0, 0.08); opacity:0; transition:0.2s; -webkit-transition:0.2s;} #footer .f_top.on {opacity:1;} #footer .f_top:before {content:""; display:inline-block; vertical-align:middle; position:absolute; top:20px; left:50%; width:13px; height:3px; margin-left:-10px; border-radius:2px; background-color:#fff; transform:rotate(-45deg); -ms-transform:rotate(-45deg); transition:0.2s; -webkit-transition:0.2s;} #footer .f_top:after {content:""; display:inline-block; vertical-align:middle; position:absolute; top:20px; right:50%; width:13px; height:3px; margin-right:-10px; border-radius:2px; background-color:#fff; transform:rotate(45deg); -ms-transform:rotate(45deg); transition:0.2s; -webkit-transition:0.2s;} #footer .f_top span {display:inline-block; vertical-align:middle; position:absolute; left:0; bottom:15px; width:100%; height:10px; font-size:9px; font-weight:700; color:#fff; line-height:10px; transition:0.2s; -webkit-transition:0.2s;} #footer .f_top:hover {background-color:#fff; box-shadow:0 5px 15px rgba(0, 0, 0, 0.1);} #footer .f_top:hover:before {background-color:#1b4792;} #footer .f_top:hover:after {background-color:#1b4792;} #footer .f_top:hover span {color:#1b4792;} #footer .f_wrap {background-color:#38393c; transition:0.3s; -webkit-transition:0.3s;} #footer .f_group {display:inline-block; vertical-align:middle; position:relative; width:100%; padding:35px 0;} #footer .f_group:first-child {padding:10px 0;} #footer .f_group:first-child:before {content:""; position:absolute; left:90px; right:90px; bottom:0; height:1px; background-color:#353539;} #footer .f_menu {display:inline-block; vertical-align:middle; float:left; height:40px; transition:0.2s; -webkit-transition:0.2s;} #footer .f_menu ul {display:inline-block; vertical-align:middle;} #footer .f_menu li {display:inline-block; vertical-align:middle; float:left; position:relative; padding:0 25px;} #footer .f_menu li:before {content:""; position:absolute; left:0; top:50%; width:1px; height:10px; margin-top:-5px; background-color:rgba(255, 255, 255, 0.1);} #footer .f_menu li:first-child {padding-left:0;} #footer .f_menu li:first-child:before {display:none;} #footer .f_menu li:last-child {padding-right:0;} #footer .f_menu a {display:inline-block; vertical-align:middle; width:100%; height:100%; font-size:13px; font-weight:700; color:#fff; line-height:40px; text-decoration-color:rgba(255, 255, 255, 0.1); transition:0.2s; -webkit-transition:0.2s;} #footer .f_menu a:hover {color:#fff; text-decoration:underline; text-decoration-color:rgba(255, 255, 255, 0.3);} #footer .f_info {display:inline-block; vertical-align:middle; width:100%;} #footer .f_info li {display:inline-block; vertical-align:middle; float:left; position:relative; padding:0 15px; font-size:13px; color:#999ca7; line-height:30px; text-align:left;} #footer .f_info li:before {content:""; position:absolute; left:0; top:50%; width:1px; height:10px; margin-top:-5px; background-color:rgba(255, 255, 255, 0.1);} #footer .f_info li:first-child {padding-left:0;} #footer .f_info li:first-child:before {display:none;} #footer .f_info li:nth-child(2) {width:650px;} #footer .f_info li:nth-child(3) {padding-left:0;} #footer .f_info li:nth-child(3):before {display:none;} #footer .f_info a {color:#82828a;} #footer .f_info a:hover {color:#fff;} #footer .f_copyright {display:inline-block; vertical-align:middle; width:100%; margin-top:20px; font-size:9px; font-weight:700; color:#fff; line-height:30px; text-align:left;} #footer .f_copyright mark {color:#299466;} #footer .f_company {display:inline-block; vertical-align:middle; position:absolute; right:0; top:0;} #footer .f_company ul {display:inline-block; vertical-align:middle;} #footer .f_company li {display:inline-block; vertical-align:middle; position:relative; float:left; width:138px; height:68px; margin-left:10px; border:rgba(255, 255, 255, 0.2) solid 1px; border-radius:5px;} #footer .f_company li:before {content:""; position:absolute; left:50%; top:12px; width:90px; height:20px; margin-left:-45px; background-image:url("../images/common/logo_esllab.png"); background-image:url("../images/ie/logo_esllab.png")\9; background-repeat:no-repeat; background-size:100% auto;} #footer .f_company li.eng:before {background-position:center top;} #footer .f_company li.kor:before {background-position:center bottom;} #footer .f_company span {position:absolute; left:0; right:0; bottom:0; height:23px; background-color:rgba(255, 255, 255, 0.1); font-size:11px; font-weight:700; color:#fff; line-height:23px;} @media all and (max-width:1600px) { /* 헤더 */ #header {padding:0 50px;} #header .h_gnb .hg_btn {right:60px;} /* 메인 */ #contents.c_main .cm_hero .cmh_slide .owl-nav {right:50px; bottom:45px;} #contents.c_main .cm_hero .cmh_slide .owl-dots {left:50px; bottom:50px;} #contents.c_main .cm_hero .cmh_scroll {bottom:110px;} /* 카카오톡 */ #kakaotalk {right:60px; bottom:160px;} /* 푸터 */ #footer .f_top {right:60px; bottom:80px;} #footer .f_group:first-child:before {left:50px; right:50px;} } @media all and (max-width:1480px) { /* 헤더 */ #header {height:190px; padding:0 40px;} #header .h_wrap {margin:30px 0;} #header .h_gnb {height:70px;} #header .h_gnb .hg_btn {right:50px; top:40px;} #header .h_gnb .hg_main > li {margin-left:80px;} #header .h_gnb .hg_main strong {font-size:18px; line-height:70px;} #header .h_gnb .hg_sub {top:60px;} #header.on {margin-top:-120px;} #header.on .h_logo {top:105px;} #header.on .h_language {top:105px;} #header.on .h_sns {top:105px;} #header.on .h_sns a {margin:2px 0;} #header.on .h_gnb .hg_btn {top:15px;} #header.on .h_gnb .hg_main > li {margin-left:40px;} #header.on .h_gnb .hg_main > li:first-child {margin-left:0;} #header.on .h_gnb .hg_main strong {font-size:14px;} #header.open {height:410px;} /* 메인 */ #contents.c_main .cm_hero {height:800px;} #contents.c_main .cm_hero .cmh_slide .cmh_txt h2 {font-size:40px; line-height:50px;} #contents.c_main .cm_hero .cmh_slide .cmh_txt p {margin-top:15px; font-size:16px; line-height:30px; letter-spacing:4px;} #contents.c_main .cm_hero .cmh_slide .item {height:800px;} #contents.c_main .cm_hero .cmh_slide .owl-nav {right:40px; bottom:40px;} #contents.c_main .cm_hero .cmh_slide .owl-dots {left:40px; bottom:45px;} #contents.c_main .cm_hero .cmh_scroll {bottom:90px;} #contents.c_main .cm_wrap {padding:100px 0;} #contents.c_main .cm_head {margin-bottom:40px;} #contents.c_main .cm_head p {margin-top:15px;} #contents.c_main .cm_head a {margin-top:35px;} #contents.c_main .cm_program {margin-top:-50px; padding-top:150px;} /* 카카오톡 */ #kakaotalk {right:50px; bottom:120px; width:50px; height:50px;} #kakaotalk i {width:50px; height:50px;} #kakaotalk span {width:140px; height:50px; font-size:14px; line-height:50px;} #kakaotalk:hover {width:200px;} /* 푸터 */ #footer .f_top {right:50px; bottom:60px; width:50px; height:50px;} #footer .f_top:before {top:15px; width:10px; height:2px; margin-left:-8px;} #footer .f_top:after {top:15px; width:10px; height:2px; margin-right:-8px;} #footer .f_top span {bottom:12px;} #footer .f_group {padding:25px 0;} #footer .f_group:first-child {padding:10px 0;} #footer .f_group:first-child:before {left:40px; right:40px;} #footer .f_menu li {padding:0 20px;} #footer .f_info li {font-size:12px;} #footer .f_copyright {margin-top:15px;} } @media all and (max-width:1240px) { /* 헤더 */ #header {height:160px; padding:0 30px;} #header .h_wrap {margin:20px 0;} #header .h_logo {top:5px; width:208px; height:50px; margin-left:-104px;} #header .h_familysite {height:30px; margin:5px 0;} #header .h_familysite .hf_btn {width:120px; height:30px; padding-left:15px; font-size:11px; line-height:28px;} #header .h_familysite .hf_btn i {right:18px; top:8px; height:6px;} #header .h_familysite .hf_list {top:32px; padding:5px; border-radius:15px;} #header .h_familysite .hf_list a {font-size:11px; line-height:25px;} #header .h_language li {margin-left:0;} #header .h_language a {width:32px; height:32px; margin:5px; font-size:11px; line-height:30px;} #header .h_sns {right:60px;} #header .h_sns a {margin:2px 0;} #header .h_gnb {height:60px;} #header .h_gnb .hg_btn {right:40px; top:30px;} #header .h_gnb .hg_main > li {margin-left:60px;} #header .h_gnb .hg_main strong {font-size:16px; line-height:60px;} #header .h_gnb .hg_sub {top:50px; border-radius:15px;} #header .h_gnb .hg_sub a {padding:8px 0; font-size:14px; line-height:16px;} #header.on {margin-top:-100px;} #header.on .h_logo {top:93px; width:150px; height:36px;} #header.on .h_language {top:90px;} #header.on .h_language li {margin-left:0;} #header.on .h_sns {top:90px;} #header.on .h_gnb .hg_btn {top:10px;} #header.on .h_gnb .hg_main {margin-left:-20px;} #header.on .h_gnb .hg_main > li {margin-left:25px;} #header.on .h_gnb .hg_main > li:first-child {margin-left:0;} #header.on .h_gnb .hg_main strong {font-size:13px;} #header.open {height:330px;} /* 메인 */ #contents.c_main .cm_hero {height:700px;} #contents.c_main .cm_hero .cmh_slide .cmh_txt h2 {font-size:35px; line-height:45px;} #contents.c_main .cm_hero .cmh_slide .cmh_txt p {font-size:15px; line-height:25px;} #contents.c_main .cm_hero .cmh_slide .item {height:700px;} #contents.c_main .cm_hero .cmh_slide .owl-nav {right:30px; bottom:30px;} #contents.c_main .cm_hero .cmh_slide .owl-dots {left:30px; bottom:35px;} #contents.c_main .cm_hero .cmh_scroll {bottom:80px; width:48px; height:48px; margin-left:-25px;} #contents.c_main .cm_hero .cmh_scroll i {height:12px; margin-top:-7px;} @keyframes cmhc_scroll {from {margin-top:-10px;} 50% {margin-top:0;} 100% {margin-top:-10px;}} #contents.c_main .cm_hero .cmh_scroll i:before {right:-4px;} #contents.c_main .cm_hero .cmh_scroll i:after {left:-4px} #contents.c_main .cm_wrap {padding:80px 0;} #contents.c_main .cm_program {margin-top:-30px; padding-top:130px;} #contents.c_main .cm_program li {height:480px;} #contents.c_main .cm_program .cmp_pic {width:160px; height:160px;} #contents.c_main .cm_program .cmp_pic i {width:50px; margin-left:-25px;} #contents.c_main .cm_program .cmp_brand {width:160px; height:24px; margin:25px 0;} #contents.c_main .cm_program .cc2uc .cmp_brand {background-position:left 0;} #contents.c_main .cm_program .hi2uc .cmp_brand {background-position:left -24px;} #contents.c_main .cm_program .calinstitute .cmp_brand {background-position:left -48px;} #contents.c_main .cm_program .calkorea .cmp_brand {background-position:left -72px;} #contents.c_main .cm_program .calopt .cmp_brand {background-position:left -96px;} #contents.c_main .cm_program .cm_body strong:before {top:-25px;} #contents.c_main .cm_program .cm_body strong {margin-top:25px; font-size:16px;} #contents.c_main .cm_program .cm_body p {margin-top:15px; font-size:12px; letter-spacing:-1px;} #contents.c_main .cm_media .cmm_success .cmms_wrap {height:235px;} #contents.c_main .cm_media .cmm_success .cms_display {height:181px; margin:20px 30px 0; font-size:14px; color:#fff; line-height:26px;} #contents.c_main .cm_media .cmm_success .cms_display li {margin-bottom:5px;} #contents.c_main .cm_media .cmm_success .cms_display .cmsd_wrap {height:auto; padding:0 15px;} #contents.c_main .cm_media .cmm_success .cms_display p {display:inline-block; vertical-align:middle; width:100%; margin:0;} #contents.c_main .cm_media .cmm_success .cmms_slide {height:235px; margin:0 5px;} #contents.c_main .cm_media .cmm_success div.text {margin-top:40px;} #contents.c_main .cm_media .cmm_list .cmml_box {width:235px; height:235px; margin-top:20px; padding:25px 30px;} #contents.c_main .cm_media .cmm_list .cmml_box > a {left:30px; right:30px; bottom:25px;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(3) .cmml_box {margin-left:5px;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(4) .cmml_box {margin-right:5px;} #contents.c_main .cm_media .cmm_list .cmml_box ul {left:30px; right:30px; bottom:25px;} #contents.c_main .cm_media .cmm_list .cmml_box li {margin:0 5px;} /* 서브 */ #contents .c_sub .cs_hero .csh_slogan h3 {font-size:35px; line-height:45px;} #contents .c_sub .cs_hero .csh_slogan p {font-size:14px;} #contents .c_sub .cs_menu a {font-size:15px;} #contents .c_sub .cs_page {padding:80px;} #contents .c_sub .cs_history .csh_title {width:415px;} #contents .c_sub .cs_history .csh_title.high {top:235px; margin-left:-420px;} #contents .c_sub .cs_history .csh_title .csht_img {width:320px; height:180px;} #contents .c_sub .cs_history .csh_title .csht_bg {right:100px; top:150px; font-size:70px; line-height:70px;} #contents .c_sub .cs_history .csh_list {width:415px;} #contents .c_sub .cs_process {margin:30px 0 50px 0;} #contents .c_sub .cs_process li {width:160px;} #contents .c_sub .cs_process li:last-child:before {left:-70px; top:80px; width:50px;} #contents .c_sub .cs_process li:last-child:after {top:76px;} #contents .c_sub .cs_process i {width:160px; height:160px;} #contents .c_sub .cs_contact .cm_body {padding:10px 0 20px;} #contents .c_sub .cs_contact .csc_input label {width:24%; font-size:14px;} #contents .c_sub .cs_contact .csc_input input {width:76%; font-size:14px;} #contents .c_sub .cs_contact .csc_textarea label {width:24%; font-size:14px;} #contents .c_sub .cs_contact .csc_textarea textarea {width:73%; padding:10px 3% 10px 0; font-size:14px;} #contents .c_sub .cs_contact .csc_check label span {font-size:14px;} #contents .c_sub .cs_facebook .fb-page {height:515px !important;} #contents .c_sub .cs_facebook .fb-page > span {height:515px !important;} #contents .c_sub .cs_facebook .fb-page > span > iframe {height:515px !important;} #contents .c_sub .cs_instagram {height:533px;} /* 카카오톡 */ #kakaotalk {right:40px; bottom:100px; width:40px; height:40px;} #kakaotalk i {width:40px; height:40px;} #kakaotalk span {width:120px; height:40px; font-size:13px; line-height:40px;} #kakaotalk:hover {width:180px;} /* 푸터 */ #footer .f_top {right:40px; bottom:50px; width:40px; height:40px;} #footer .f_top:before {top:17px;} #footer .f_top:after {top:17px;} #footer .f_top span {opacity:0;} #footer .f_group {padding:20px 0;} #footer .f_group:first-child {padding:5px 0;} #footer .f_group:first-child:before {left:30px; right:30px;} #footer .f_menu li {padding:0 15px;} #footer .f_info li:nth-child(2) {width:450px;} #footer .f_copyright {margin-top:10px;} #footer .f_company {right:0; top:auto; bottom:5px;} #footer .f_company li {width:128px; height:58px; margin-left:5px;} #footer .f_company li:before {top:7px;} } @media all and (max-width:1100px) { /* 헤더 */ #header {height:90px; padding:0 20px;} #header:before {content:""; position:absolute; left:20px; right:20px; bottom:0; height:1px; background-color:rgba(255, 255, 255, 0.1);} #header .h_wrap {margin:15px 0;} #header .h_logo {top:8px; width:184px; height:44px; margin-left:-94px;} #header .h_language {right:60px;} #header .h_sns {display:none;} #header .h_gnb {position:absolute; right:20px; top:15px; width:60px; height:60px;} #header .h_gnb:before {position:fixed;} #header .h_gnb .hg_btn {display:inline-block; vertical-align:middle; position:absolute; right:0; top:0 !important; z-index:2; width:60px; height:60px; outline:none;} #header .h_gnb .hg_btn i {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:20px; height:2px; margin-left:-10px; border-radius:2px; background-color:#fff; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_btn i:before {content:""; position:absolute; left:0; top:-6px; width:100%; height:100%; border-radius:1px; background-color:#fff; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_btn i:after {content:""; position:absolute; left:0; bottom:-6px; width:100%; height:100%; border-radius:1px; background-color:#fff; transition:0.2s; -webkit-transition:0.2s;} #header .h_gnb .hg_wrap {display:none; transition:0.2s; -webkit-transition:0.2s;} #header.on {height:60px; padding:0 10px; margin-top:0;} #header.on .h_wrap {margin:0;} #header.on .h_logo {left:0; top:12px; width:150px; height:36px;} #header.on .h_familysite {top:-90px;} #header.on .h_language {right:50px; top:10px;} #header.on .h_gnb {right:0; top:0; width:60px; height:60px;} #header.on .h_gnb .hg_btn i {background-color:#999ca7 !important;} #header.on .h_gnb .hg_btn i:before {background-color:#999ca7 !important;} #header.on .h_gnb .hg_btn i:after {background-color:#999ca7 !important;} #header.on .h_gnb .hg_btn:hover i {background-color:#202024 !important;} #header.on .h_gnb .hg_btn:hover i:before {background-color:#202024 !important;} #header.on .h_gnb .hg_btn:hover i:after {background-color:#202024 !important;} #header.open {overflow:visible; height:auto; background:none;} #header.open .h_logo a {background-image:url("../images/common/logo_w.png"); background-image:url("../images/ie/logo_w.png")\9;} #header.on.open .h_logo a {background-image:url("../images/common/logo.png"); background-image:url("../images/ie/logo.png")\9;} #header.open .h_sns {display:inline-block; right:50%; top:100px; width:144px; margin-right:-72px; transform:scale(1); transition:0.2s; -webkit-transition:0.2s; animation-name:h_sns; animation-duration:0.2s; animation-iteration-count:1; animation-timing-function:linear;} @keyframes h_sns {from {transform:scale(0.6); opacity:0;} 100% {transform:scale(1); opacity:1;}} #header.open .h_gnb .hg_wrap {display:block; position:fixed; left:20px; right:20px; top:20px; bottom:20px; overflow:auto; width:auto; padding:160px 0 120px; background-color:rgba(27, 71, 146, 0.95); transform:scale(1); transition:0.2s; -webkit-transition:0.2s; animation-name:hg_wrap; animation-duration:0.2s; animation-iteration-count:1; animation-timing-function:linear;} @keyframes hg_wrap {from {transform:scale(0.6); opacity:0;} 100% {transform:scale(1); opacity:1;}} #header.open .h_familysite .hf_btn {border-color:rgba(255, 255, 255, 0.3); color:#fff;} #header.open .h_familysite:hover .hf_btn, #header.open .h_familysite.on .hf_btn {border-color:#fff; background-color:#fff; color:#38393c;} #header.open .h_familysite .hf_list {border-color:rgba(255, 255, 255, 0.3);} #header.open .h_familysite .hf_list a {color:#38393c;} #header.open .h_familysite .hf_list a:hover {background-color:#1b4792; color:#fff;} #header.open .h_gnb li:last-child .hg_sub a {text-align:left;} #header.open .h_gnb .hg_btn i, #header.on.open .h_gnb .hg_btn i {background-color:transparent !important;} #header.open .h_gnb .hg_btn i:before {top:0; background-color:#fff; transform:rotate(-45deg); -ms-transform:rotate(-45deg);} #header.open .h_gnb .hg_btn i:after {bottom:0; background-color:#fff; transform:rotate(45deg); -ms-transform:rotate(45deg);} #header.open .h_gnb .hg_btn:hover i:before {background-color:#fff;} #header.open .h_gnb .hg_btn:hover i:after {background-color:#fff;} #header.open .h_gnb .hg_main {width:60%; max-width:360px; margin:0 auto;} #header.open .h_gnb .hg_main > li {width:100%; margin:0; padding:10px 0; text-align:left;} #header.open .h_gnb .hg_main strong {width:100%; font-size:18px; color:#fff; line-height:40px; opacity:0.7;} #header.open .h_gnb .hg_main strong:before {content:""; position:absolute; left:auto; right:5px !important; top:50%; width:2px; height:12px !important; margin-top:-6px; border-radius:1px; background:#fff; opacity:0.3; transition:0.3s; -webkit-transition:0.3s;} #header.open .h_gnb .hg_main strong:after {content:""; position:absolute; left:auto; right:0px; bottom:50%; width:12px; height:2px; margin-bottom:-1px; border-radius:1px; background:#fff; opacity:0.3; transition:0.3s; -webkit-transition:0.3s;} #header.open .h_gnb .hg_main strong:hover, #header.open .h_gnb .hg_main strong.open {opacity:1;} #header.open .h_gnb .hg_main strong:hover:before {opacity:1;} #header.open .h_gnb .hg_main strong:hover:after {opacity:1;} #header.open .h_gnb .hg_main strong.open:before {transform:rotate(90deg); -ms-transform:rotate(90deg);} #header.open .h_gnb .hg_main strong.open:after {opacity:0; transform:rotate(90deg); -ms-transform:rotate(90deg);} #header.open .h_gnb .hg_main strong span {display:inline-block; vertical-align:middle; float:left; position:relative;} #header.open .h_gnb .hg_main strong a {display:none;} #header.open .h_gnb .hg_main .nosub strong:before, #header.open .h_gnb .hg_main .nosub strong:after {display:none;} #header.open .h_gnb .hg_main .nosub strong a {display:inline-block;} #header.open .h_gnb .hg_sub {display:inline-block; position:relative; left:auto; top:auto; width:100%; height:1px; overflow:hidden; margin-top:-1px; padding:0; border-radius:0; background:none; box-shadow:none; transition:0.2s; -webkit-transition:0.2s;} #header.open .h_gnb .hg_sub.open {display:inline-block !important; height:108px; margin-top:10px;} #header.open .h_gnb .hg_sub.open.menu2 {height:auto;} #header.open .h_gnb .hg_sub li {display:inline-block; vertical-align:middle; position:relative; float:left; width:100%; transition:0.2s; -webkit-transition:0.2s;} #header.open .h_gnb .hg_sub a {display:inline-block; vertical-align:middle; width:100%; padding:9px 20px; font-size:15px; color:#fff; line-height:18px; text-align:left; word-wrap:normal; word-break:keep-all; opacity:0.4;} #header.open .h_gnb .hg_sub a:hover {color:#fff !important; text-decoration:underline; text-decoration-color:rgba(255, 255, 255, 0.3) !important; opacity:1;} #header.open .h_gnb .hg_main .on strong {opacity:1;} #header.open.on .h_gnb .hg_wrap {left:0; right:0; top:0; bottom:0; background-color:#fff;} #header.open.on .h_gnb .hg_btn i:before {background-color:#202024;} #header.open.on .h_gnb .hg_btn i:after {background-color:#202024;} #header.open.on .h_gnb .hg_main strong { opacity:1;} #header.open.on .h_gnb .hg_main strong:before {background:#1b4792;} #header.open.on .h_gnb .hg_main strong:after {background:#1b4792;} #header.open.on .h_gnb .hg_main .on strong {color:#1b4792;} #header.open.on .h_gnb .hg_sub a {color:#38393c; opacity:1;} #header.open.on .h_gnb .hg_sub a:hover {color:#1b4792; text-decoration:underline; text-decoration-color:rgba(27, 71, 146, 0.3); opacity:1;} /* 메인 */ #contents.c_main .cm_hero {height:650px;} #contents.c_main .cm_hero .cmh_slide .cmh_txt h2 {font-size:32px; line-height:42px;} #contents.c_main .cm_hero .cmh_slide .cmh_txt p {font-size:14px; line-height:24px;} #contents.c_main .cm_hero .cmh_slide .item {height:650px;} #contents.c_main .cm_hero .cmh_slide .owl-nav {right:20px; bottom:30px;} #contents.c_main .cm_hero .cmh_slide .owl-dots {left:20px; bottom:35px;} #contents.c_main .cm_hero .cmh_scroll {bottom:70px;} #contents.c_main .cm_wrap {padding:70px 0;} #contents.c_main .cm_head {margin-bottom:30px;} #contents.c_main .cm_body {display:block; width:auto; padding:0 20px;} #contents.c_main .cm_program {margin-top:0; padding-top:80px;} #contents.c_main .cm_program ul {width:80%; max-width:650px;} #contents.c_main .cm_program li {position:relative; width:100%; height:auto; min-height:160px; margin-top:40px;} #contents.c_main .cm_program li:first-child {margin-top:0;} #contents.c_main .cm_program .cmp_pic {position:absolute; left:0; top:0;} #contents.c_main .cm_program li:hover .cmp_pic {transform:scale(1);} #contents.c_main .cm_program .cmp_txt {padding-left:210px; text-align:left;} #contents.c_main .cm_program .cmp_brand {margin:10px 0 15px;} #contents.c_main .cm_program .cc2uc .cmp_brand {margin-left:-37px;} #contents.c_main .cm_program .hi2uc .cmp_brand {margin-left:-40px;} #contents.c_main .cm_program .calkorea .cmp_brand {margin-left:-16px;} #contents.c_main .cm_program .calopt .cmp_brand {margin-left:-29px;} #contents.c_main .cm_program li:hover .cmp_brand {transform:scale(1);} #contents.c_main .cm_program .cm_body strong:before {left:0; top:-15px; margin-left:0} #contents.c_main .cm_program .cm_body strong > span {display:inline;} #contents.c_main .cm_program .cm_body p > span {display:inline;} #contents.c_main .cm_media .cm_head {position:relative; left:auto; top:auto; width:100%; text-align:center !important;} #contents.c_main .cm_media .cm_head .title.bar:before {left:50%; margin-left:-20px;} #contents.c_main .cm_media .cm_head .text span {width:auto;} #contents.c_main .cm_media .cm_head a {display:none;} #contents.c_main .cm_media .cmm_success {display:block; position:relative; left:auto; right:auto; top:auto; width:80%; max-width:650px; margin:0 auto 5px;} #contents.c_main .cm_media .cmm_list {display:block; width:80%; max-width:650px; margin:0 auto;} #contents.c_main .cm_media .cmm_list .cmml_box {display:block; width:auto; height:200px; margin:5px !important; padding:25px 30px;} #contents.c_main .cm_media .cmm_list .cmml_box > a {left:30px; right:30px; bottom:25px;} #contents.c_main .cm_media .cmm_list > ul {display:inline-block; vertical-align:middle; width:100%;} #contents.c_main .cm_media .cmm_list > ul > li {width:50%; margin:0 !important;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(5) {width:100%; } #contents.c_main .cm_media .cmm_list > ul > li:nth-child(5) .cmml_box {height:100px;} #contents.c_main .cm_media .cmm_list .cmml_box ul {left:auto; right:25px; top:32px; bottom:auto;} #contents.c_main .cm_media .cmm_list .cmml_box li {margin:0 5px;} /* 서브 */ #contents .c_sub .cs_hero {height:400px;} #contents .c_sub .cs_hero .csh_slogan {top:190px;} #contents .c_sub .cs_hero .csh_slogan h3 {font-size:30px; line-height:40px;} #contents .c_sub .cs_hero .csh_slogan p {margin-top:25px; font-size:13px; line-height:25px;} #contents .c_sub .cs_wrap > .wrap {margin-top:-25px;} #contents .c_sub .cs_menu li {height:50px;} #contents .c_sub .cs_menu a {line-height:50px;} #contents .c_sub .cs_history .csh_title {display:none;} #contents .c_sub .cs_history .csh_list {float:none; width:100%; max-width:600px;} #contents .c_sub .cs_history .csh_list dt {padding-left:40px;} #contents .c_sub .cs_history .csh_list dt:after {width:30px;} #contents .c_sub .cs_history .csh_list dd {padding:5px 0 50px 40px;} #contents .c_sub .cs_success .css_head {padding:15px 20px;} #contents .c_sub .cs_success .css_head:before {right:30px;} #contents .c_sub .cs_success .css_head.giant {font-size:25px;} #contents .c_sub .cs_success .css_head.on > span:before {bottom:2px; height:10px;} #contents .c_sub .cs_success .css_body {padding:15px;} #contents .c_sub .cs_success .css_body > li {width:100%;} #contents .c_sub .cs_success .css_body .css_wrap {margin:5px;} #contents .c_sub .cs_process {margin:30px 30px 30px 30px;} #contents .c_sub .cs_process li {width:100%; margin-top:-20px; margin-left:0; text-align:center;} #contents .c_sub .cs_process li:last-child:before {display:none;} #contents .c_sub .cs_process li:last-child:after {display:none;} #contents .c_sub .cs_process i {width:180px; height:180px;} #contents .c_sub .cs_process i:before {margin-top:-30px;} #contents .c_sub .cs_process span {position:absolute; left:0; bottom:30px; margin-top:0; font-size:15px !important; color:#fff !important;} #contents .c_sub .cs_process span mark {display:none;} #contents .c_sub .cs_program .csp_wrap {text-align:center;} #contents .c_sub .cs_program p {width:100%; line-height:30px;} #contents .c_sub .cs_program a {float:none; margin-top:20px;} #contents .c_sub .cs_contact .csc_map {height:250px;} /* 게시판 */ #board {display:block; width:auto;} #board .b_category ul {width:100%;} #board .b_category li {width:calc(33.3333% - 10px); margin:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;} #board .b_category a {display:block; min-width:auto; box-sizing:border-box; padding:0 15px; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;} #board .b_calendar .bc_title li {margin:0 1px;} #board .b_calendar .bc_title li.focus {margin:0 10px;} #board .b_calendar .bc_list {margin-top:15px;} #board .b_calendar .bc_list table th {display:none;} #board .b_calendar .bc_list table td {display:block; width:auto; height:auto; margin:2px 0;} #board .b_calendar .bc_list .bcl_day {display:inline-block; vertical-align:middle; padding:0 10px; border-radius:20px; background:#f3f6f9;} #board .b_calendar .bc_list a .bcl_day:hover {background:#20438f; color:#fff;} #board .b_calendar .bc_list .bcl_link {display:block; margin:5px 0; padding:5px 10px; border:#ecf0f3 solid 1px; background-color:#f3f6f9; font-size:13px; color:#666; line-height:20px; text-align:left;} #board .b_calendar .bc_list .bcl_link:hover {border-color:#20438f; background-color:#20438f; color:#fff;} #board .b_calendar .bc_list .bcl_blank {display:none;} /* 푸터 */ #footer .f_group {padding:15px 0;} #footer .f_group:first-child:before {left:20px; right:20px;} #footer .f_menu li {padding:0 15px;} #footer .f_info li {width:100% !important; padding:0;} #footer .f_info li:before {display:none;} #footer .f_company {position:relative; right:auto; bottom:auto; width:100%; margin-top:10px;} #footer .f_company ul {float:left;} #footer .f_company li {width:128px; height:58px; margin-left:5px;} #footer .f_company li:before {top:7px;} } @media all and (max-width:768px) { /* 프레임 */ #wrap {width:auto; margin:5px; margin-top:0;} #wrap:before {content:""; position:fixed; left:0; right:0; top:0; z-index:99999; height:5px; background-color:#fff;} #wrap:after {content:""; position:fixed; left:0; right:0; bottom:0; z-index:99999; height:5px; background-color:#fff;} /* 헤더 */ #header {left:5px; right:5px; top:5px; height:80px; padding:0 15px;} #header:before {left:15px; right:15px;} #header .h_wrap {margin:10px 0;} #header .h_logo {left:0; top:12px; width:150px; height:36px; margin-left:0;} #header .h_familysite {left:auto; right:60px;} #header .h_familysite .hf_btn {width:110px; padding-left:10px; font-size:10px; letter-spacing:0;} #header .h_familysite .hf_btn i {right:13px;} #header .h_familysite .hf_list {padding:3px;} #header .h_familysite .hf_list a {font-size:10px; text-indent:7px;} #header .h_language {display:none;} #header .h_gnb {right:15px; top:10px;} #header.open .h_sns {top:80px; margin-right:-25px;} #header.open .h_language {display:inline-block; right:50%; top:79px; width:84px; margin-right:-119px; transform:scale(1); transition:0.2s; -webkit-transition:0.2s; animation-name:h_language; animation-duration:0.2s; animation-iteration-count:1; animation-timing-function:linear;} @keyframes h_language {from {transform:scale(0.6); opacity:0;} 100% {transform:scale(1); opacity:1;}} #header.open .h_gnb .hg_wrap {left:10px; right:10px; top:10px; bottom:10px; padding:140px 0 100px;} /* 메인 */ #contents.c_main .cm_hero {height:640px;} #contents.c_main .cm_hero .cmh_slide .cmh_txt {top:35%;} #contents.c_main .cm_hero .cmh_slide .cmh_txt h2 {font-size:30px; line-height:40px;} #contents.c_main .cm_hero .cmh_slide .cmh_txt p {font-size:13px; line-height:23px; letter-spacing:1px;} #contents.c_main .cm_hero .cmh_slide .item {height:640px;} #contents.c_main .cm_hero .cmh_slide .owl-nav {right:15px; bottom:20px;} #contents.c_main .cm_hero .cmh_slide .owl-dots {left:15px; bottom:25px;} #contents.c_main .cm_hero .cmh_slide .owl-dot {width:40px; height:25px;} #contents.c_main .cm_hero .cmh_slide .owl-dot:before {font-size:12px;} #contents.c_main .cm_hero .cmh_bg {box-shadow:inset 0 -5px 0 #fff;} #contents.c_main .cm_hero .cmh_bg:before {bottom:5px;} #contents.c_main .cm_hero .cmh_bg:after {bottom:5px;} #contents.c_main .cm_hero .cmh_scroll {bottom:30%;} #contents.c_main .cm_wrap {padding:50px 0;} #contents.c_main .cm_body {padding:0 10px;} #contents.c_main .cm_program ul {width:100%; max-width:100%;} #contents.c_main .cm_program li {min-height:120px;} #contents.c_main .cm_program .cmp_pic {width:120px; height:120px;} #contents.c_main .cm_program .cmp_txt {padding-left:150px;} #contents.c_main .cm_program .cmp_brand {margin:5px 0 10px;} #contents.c_main .cm_program .cm_body strong:before {top:-10px;} #contents.c_main .cm_program .cm_body strong {margin-top:15px; font-size:15px;} #contents.c_main .cm_media .cmm_success {width:100%; max-width:100%;} #contents.c_main .cm_media .cmm_list {width:100%; max-width:100%;} #contents.c_main .cm_media .cmm_list .cmml_box {height:180px; padding:15px 20px;} #contents.c_main .cm_media .cmm_list .cmml_box > a {left:20px; right:20px; bottom:15px;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(5) .cmml_box {height:80px;} #contents.c_main .cm_media .cmm_list .cmml_box ul {right:15px; top:20px;} /* 서브 */ #contents .c_sub .cs_hero {height:300px;} #contents .c_sub .cs_hero .csh_slogan {top:150px;} #contents .c_sub .cs_hero .csh_slogan h3 {font-size:25px; line-height:35px;} #contents .c_sub .cs_hero .csh_slogan p {font-size:12px; line-height:20px; letter-spacing:0px;} #contents .c_sub .cs_wrap > .wrap {margin-top:15px;} #contents .c_sub .cs_menu li {width:100% !important; height:40px;} #contents .c_sub .cs_menu li:before {right:0; bottom:auto; width:auto; height:1px;} #contents .c_sub .cs_menu a {font-size:14px; line-height:40px;} #contents .c_sub .cs_page {padding:20px;} #contents .c_sub .cs_body .csb_left {width:calc(100%);} #contents .c_sub .cs_body .csb_right {width:calc(100%); margin-top:20px;} #contents .c_sub .cs_success .css_head {padding:10px 15px;} #contents .c_sub .cs_success .css_head:before {right:20px;} #contents .c_sub .cs_success .css_head.giant {font-size:20px;} #contents .c_sub .cs_success .css_head.on > span:before {bottom:5px; height:8px;} #contents .c_sub .cs_success .css_body {padding:10px;} #contents .c_sub .cs_success .css_body > li {width:100%;} #contents .c_sub .cs_success .css_body .css_pic {position:relative; left:auto; top:auto; bottom:auto; width:150px; height:150px; margin:20px auto 5px; border-radius:80px; background-position:center top;} #contents .c_sub .cs_success .css_body .css_info {padding:10px 15px;} #contents .c_sub .cs_faq {margin-bottom:50px;} #contents .c_sub .cs_faq .csf_head {padding:15px 60px 15px 20px;} #contents .c_sub .cs_faq .csf_head:before {right:20px;} #contents .c_sub .cs_faq .csf_body {padding:15px 20px;} #contents .c_sub .cs_instagram {height:auto;} #contents .c_sub .cs_youtube {max-width:100%;} /* 게시판 */ #board .b_category {margin-bottom:15px;} #board .b_category ul {width:100%; max-width:400px;} #board .b_category li {float:left; width:50%; margin:0;} #board .b_category a {margin:5px;} #board .b_info .bi_count {float:none; width:100%;} #board .b_info .bi_search {float:none; width:100%;} #board .b_info .bi_search form {width:260px; margin:0 auto;} #board .b_info .bi_search select {width:80px;} #board .b_info .bi_search input {width:120px;} #board .b_info .bi_search button {width:50px;} #board .b_list .bl_head {display:none;} #board .b_list .bl_body li {padding:10px 10px 6px 10px; font-size:10px; line-height:14px; text-align:left;} #board .b_list .bl_body .blb_wrap div {position:relative; top:0;} #board .b_list .bl_body .blb_checkbox {float:left; width:24px;} #board .b_list .bl_body .blb_no {float:left; left:0; width:100px;} #board .b_list .bl_body .blb_no.checkbox {left:0;} #board .b_list .bl_body .blb_subject {display:inline-block !important; width:100%; margin:0; font-size:13px; line-height:22px;} #board .b_list .bl_body .blb_subject.checkbox {margin-left:0;} #board .b_list .bl_body .blb_subject a {width:100%; padding:7px 0;} #board .b_list .bl_body .blb_subject:hover a {color:#20438f;} #board .b_list .bl_body .blb_subject .cnt_cmt {display:inline-block; vertical-align:middle; width:auto; height:16px; margin:0 4px; padding:0 5px; border-radius:5px; background-color:#20438f; font-size:11px; color:#fff; line-height:16px; text-align:center;} #board .b_list .bl_body .blb_subject:hover .cnt_cmt {background-color:#20438f;} #board .b_list .bl_body .blb_name {float:left; right:0; width:110px;} #board .b_list .bl_body .blb_name .sv_member {font-size:12px;} #board .b_list .bl_body .blb_name .sv_member img {width:11px; height:11px;} #board .b_list .bl_body .blb_date {float:right; right:0; width:45px; margin-top:5px; text-align:right;} #board .b_list .bl_body .blb_hit {float:right; right:0; width:auto; margin-top:5px; text-align:right;} #board .b_list .bl_photo li {width:46%; margin:10px 2%; font-size:10px; line-height:20px;} #board .b_list .bl_photo .blb_checkbox {margin-right:6px;} #board .b_list .bl_photo .blb_subject {font-size:13px; line-height:22px;} #board .b_list .bl_photo .blb_subject .cnt_cmt {display:inline-block; vertical-align:middle; width:auto; height:16px; margin:0 4px; padding:0 5px; border-radius:5px; background-color:#20438f; font-size:11px; color:#fff; line-height:16px; text-align:center;} #board .b_list .bl_photo .blb_name .sv_member {font-size:12px;} #board .b_list .bl_photo .blb_name .sv_member img {width:11px; height:11px;} #board .b_list .bl_photo .blb_name .sv {display:none; vertical-align:middle; position:absolute; right:0; top:0; width:100px;} #board .b_view {margin-bottom:20px;} #board .b_view .bv_subject {font-size:16px; line-height:26px;} #board .b_view .bv_info {padding:10px 0;} #board .b_view .bv_info li {font-size:11px;} #board .b_view .bv_info .bvi_date {margin-left:5px; font-size:11px;} #board .b_view .bv_info .bvi_name {width:100%; box-sizing:border-box; margin:0 5px; font-size:0;} #board .b_view .bv_info .bvi_name .sv_member {font-size:13px;} #board .b_view .bv_info .bvi_name .sv_member img {width:11px; height:11px;} #board .b_view .bv_info .bvi_hit {position:absolute; right:5px; top:27px;} #board .b_view .bv_info .bvi_comment {right:5px; top:0;} #board .b_view .bv_op li {margin-top:5px; padding:5px 50px 5px 40px; font-size:11px;} #board .b_view .bv_op strong {left:12px; top:5px;} #board .b_view .bv_op span {right:12px; top:5px;} #board .b_view .bv_atc {padding:20px 0;} #board .b_comment .bc_list .bcl_box {margin-bottom:5px; padding:5px 10px;} #board .b_comment .bc_list .bcl_head {padding-top:3px; padding-bottom:5px;} #board .b_comment .bc_list .bcl_info {font-size:10px; line-height:20px;} #board .b_comment .bc_list .bcl_info .member {font-size:11px;} #board .b_comment .bc_list .bcl_info .sv_member {font-size:11px; line-height:20px;} #board .b_comment .bc_list .bcl_info .sv_member img {width:11px; height:11px;} #board .b_comment .bc_list .bcl_info li {margin-right:6px;} #board .b_comment .bc_list .bcl_btn li {margin:0 1px;} #board .b_comment .bc_list .bcl_body {padding:6px 0 3px 0;} #board .b_comment .bc_write {margin-top:6px;} #board .b_comment .bc_write .bcw_form {margin-right:90px;} #board .b_comment .bc_write .bcw_btn .btn {width:80px;} #board .b_write {display:inline-block; vertical-align:middle; width:100%; padding-top:0;} #board .b_btn {margin-top:10px; margin-bottom:10px;} #board .b_btn ul {width:100%;} #board .b_btn li {display:inline-block; vertical-align:middle; float:none; width:100%; margin:2px 0;} #board .b_btn .bb_left {float:left; width:auto; margin-left:-2px;} #board .b_btn .bb_left li {float:left; display:inline; width:auto; margin:2px;} #board .b_btn .bb_right {float:right; width:auto; margin-right:-2px;} #board .b_btn .bb_right li {float:left; display:inline; width:auto; margin:2px;} #board .b_search .bs_op {width:45px;} #board .b_search .bs_op .select {height:30px; font-size:12px; line-height:30px;} #board .b_search .bs_input {width:100px; margin-left:2px;} #board .b_search .bs_input .input {height:30px; font-size:12px; line-height:30px;} #board .b_search .bs_btn {width:50px; margin-left:2px;} #board .b_search .bs_btn .btn {font-size:12px;} /* 카카오톡 */ #kakaotalk {right:30px; bottom:80px;} /* 푸터 */ #footer .f_top {right:30px; bottom:30px;} #footer .f_group .wrap {padding:0 20px;} #footer .f_group:first-child {padding:0;} #footer .f_group:first-child .wrap {padding:0;} #footer .f_menu {float:none; width:100%; height:auto;} #footer .f_menu ul {width:100%;} #footer .f_menu li {width:50%; padding:0;} #footer .f_menu li:before {display:none;} #footer .f_menu a {text-align:left; text-indent:20px; border-bottom:#353539 solid 1px;} #footer .f_menu li:nth-child(2) a, #footer .f_menu li:nth-child(4) a {border-right:#353539 solid 1px;} #footer .f_company {position:relative; right:auto; bottom:auto; width:100%; margin-top:10px;} #footer .f_company ul {width:100%;} #footer .f_company li {box-sizing:border-box; width:calc(50% - 5px); margin-left:0;} #footer .f_company li:nth-child(1) {float:left;} #footer .f_company li:nth-child(2) {float:right;} } @media all and (max-width:480px) { /* 헤더 */ #header .h_top .ht_menu {display:none;} /* 서브 */ #contents .c_sub .cs_hero {height:250px;} #contents .c_sub .cs_hero .csh_slogan {top:130px;} #contents .c_sub .cs_success .css_body .css_pic {width:130px; height:130px;} #contents .c_sub .cs_success .css_body .css_info strong {display:block; position:relative; left:auto; top:auto; margin-bottom:3px;} #contents .c_sub .cs_success .css_body .css_info span {display:block; margin:0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;} #contents.c_main .cm_media .cmm_list > ul > li:nth-child(5) .cmml_box {height:130px;} #contents.c_main .cm_media .cmm_list .cmml_box ul {left:20px; right:auto; top:auto; bottom:20px;} }