#containar{position:relative;} .con-area{margin-top:110px; margin-bottom:110px;} .blind {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);} #spot{margin-top:130px;} #spot .img-box{height: 410px;padding-top:135px;background-image: url('../images/sub/sub.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;} #spot .img-box.sub01{background-image: url('../images/sub/01/sub01.jpg');} #spot .img-box.sub02{background-image: url('../images/sub/02/sub02.jpg');} #spot .img-box.sub03{background-image: url('../images/sub/03/sub03.jpg');} #spot .img-box.sub04{background-image: url('../images/sub/04/sub04.jpg');} #spot .img-box.sub05{background-image: url('../images/sub/05/sub05.jpg');} #spot .img-box.sub06{background-image: url('../images/sub/06/sub06.jpg');} #spot .img-box .spot-box{text-align: center;} #spot .img-box .spot-box .tit{display: block;margin-bottom:35px;font-size:55px;color:#fff;font-weight: 700;} #spot .img-box .spot-box .txt{font-size:20px;color:#fff;font-weight: 400;} #spot #snb{position: relative;margin-top:-70px;} #spot #snb .nav{max-width:1500px;width:100%;margin:0 auto;background:rgba(41,41,41,.7);} #spot #snb .nav:after{content: '';display: block;clear: both;} #spot #snb .nav > li{float:left;position:relative;width:320px;} #spot #snb .nav > li:after{content:'';position: absolute;top:25px;right:0;width:1px;height:20px;background:rgba(255,255,255,.3);} #spot #snb .nav > li:first-child:after{display:none;} #spot #snb .nav > li.home{width:70px;height:70px;background:#07348c;} #spot #snb .nav > li.home > a{display: block;position:relative;width: 100%;height: 100%;padding-top:27px;text-align: center;} #spot #snb .nav > li.home > a:after{content:'';position: absolute;top:27px;left:50%;transform: translateX(-50%);width:10px;height:11px;background: url('../images/sub/home.png') no-repeat;} #spot #snb .nav > li > p{position: relative;height:70px;padding-left:40px;font-size:17px;color:#fff;line-height: 70px;cursor: pointer;transition: all .5s ease-out;} #spot #snb .nav > li > p .icon{display:block;position: absolute;top:29px;right:30px;width:12px;height:12px;} #spot #snb .nav > li > p .icon:after{content:'';position: absolute;top:0;right:5px;width:2px;height:12px;background: #fff;} #spot #snb .nav > li > p .icon:before{content:'';position: absolute;top:5px;right:0;width:12px;height:2px;background: #fff;} #spot #snb .nav > li:hover > p{background:#004a96;} #spot #snb .nav > li:hover > p .icon:after{transform: rotate(90deg);} #spot #snb .nav > li .nav-02{display:none;position: absolute;top:100%;left:0;z-index:10;width:100%;transition:none;} #spot #snb .nav > li .nav-02 > li{width:100%;} #spot #snb .nav > li .nav-02 > li > a{display:block;height:50px;padding-left:40px;font-size:17px;color:#fff;line-height: 50px;background:#004a96;} #spot #snb .nav > li .nav-02 > li > a:hover, #spot #snb .nav > li .nav-02 > li > a.active{background:#003b78;} @media screen and (max-width:1500px){ .con-area{padding:0 20px;} } @media screen and (max-width:1200px){ #spot{margin-top:71px;} #spot .img-box{height:300px;padding-top:110px;} #spot .img-box .spot-box .tit{margin-bottom:30px;font-size:45px;} #spot .img-box .spot-box .txt{font-size:17px;} #spot #snb{display: none;} } @media screen and (max-width:1000px){ .con-area{margin-top: 70px; margin-bottom:50px;} } @media screen and (max-width:800px){ #spot .img-box{height:280px;padding-top:90px;} } @media screen and (max-width:600px){ .con-area{margin-top: 50px;} #spot .img-box{height:230px;padding:70px 20px 0;} #spot .img-box .spot-box .tit{margin-bottom:20px;font-size:35px;} #spot .img-box .spot-box .tx{font-size:15px;} } #con .lang-btn{margin-top:50px;text-align: right;} #con .lang-btn .lang-list{display:inline-block;width:165px;} #con .lang-btn .lang-list:after{content:'';display: block;clear: both;} #con .lang-btn .lang-list > li{float:left;width:50%;} #con .lang-btn .lang-list > li > a{display:block;height:35px;border:1px solid #d6dae1;font-size:17px;color:#292929;font-weight:500;text-align:center;line-height:35px;background:#fff;} #con .lang-btn .lang-list > li:first-child{border-right:none;} #con .lang-btn .lang-list > li > a.active{border:none;color:#fff;background:#8193a5;} #con .tit-box{margin:40px 0 90px;text-align: center;} #con .tit-box.boards{margin:130px 0 0;} #con .tit-box.professor{margin:130px 0 90px;} #con .tit-box .tit{display:block;position:relative;padding-bottom:30px;font-size:55px;color:#000;font-weight: 900;} #con .tit-box .tit:after{content:'';position: absolute;bottom:0;left:50%;transform: translateX(-50%);width:20px;height:3px;background: #000;} #con .tit-box .tit > br{display:none;} #con .tit-box .tit > span{color:#004a96;} #con .txt-01{font-size:19px;color:#8f8f8f;line-height: 1.3;} #con .txt-02{font-size:22px;color:#0c0c0c;font-weight: 500;line-height: 1.8;} #con .con-tit-01{display:block;margin-bottom:30px;font-size:30px;line-height:1.3;color:#0c0c0c;font-weight: bold;} #con .con-tit-02{display:block;margin-bottom:25px;font-size:25px;color:#111;font-weight:500;} @media screen and (max-width:1500px){ #con .tit-box{margin:40px 0 50px;} } @media screen and (max-width:1200px){ #con .lang-btn{margin-top:20px;} #con .tit-box .tit{padding-bottom:20px;font-size:40px;} #con .tit-box.boards, #con .tit-box.professor{margin:40px 0 50px;} #con .tit-box .tit > br{display:block;} #con .txt-01{font-size:13px;} #con .txt-02{font-size:17px;} #con .con-tit-01{font-size:25px;} #con .con-tit-02{font-size:22px;} } @media screen and (max-width:600px){ #con .lang-btn .lang-list{width:100%;} #con .lang-btn .lang-list > li > a{font-size:15px;} #con .tit-box, #con .tit-box.boards, #con .tit-box.professor{margin:40px 0 30px;} #con .tit-box .tit{padding-bottom:15px;font-size:30px;} #con .txt-01{font-size:13px;} #con .txt-02{font-size:15px;} #con .con-tit-01{font-size:22px;} #con .con-tit-02{font-size:19px;} } #con .sub0101{} #con .sub0101 .txt-02{margin-bottom:35px;text-align: center;} #con .sub0101 .img-wrap{margin-top:80px;} #con .sub0101 .img-wrap:after{content:'';display: block;clear: both;} #con .sub0101 .img-wrap .img-01{z-index:1;width:750px;height:500px;background-image: url('../images/sub/01/sub_01_01.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;} #con .sub0101 .img-wrap .img-02{position:relative;float:right;margin-top:-420px;z-index:-1;width:1300px;height:500px;background-image: url('../images/sub/01/sub_01_02.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;} #con .sub0101 .vm-box{} #con .sub0101 .vm-box > li{margin-top:100px;} #con .sub0101 .vm-box > li:after{content:'';display: block;clear: both;} #con .sub0101 .vm-box > li .tit-box{float:left;width:30%;margin:0;} #con .sub0101 .vm-box > li .tit-box > strong{display:block;font-size:50px;color:#000;font-weight: 900;text-align: left;} #con .sub0101 .vm-box > li .tit-box > strong > span{color:#004a96;} #con .sub0101 .vm-box > li:last-child .tit-box > strong > span{color:#4f56b7;} #con .sub0101 .vm-box > li .txt-box{overflow: hidden;text-align: left;} #con .sub0101 .vm-box > li .txt-box .list-01 > li > span{color:#000;font-weight: 500;} #con .list-01{} #con .list-01 > li{position:relative;padding-left:15px;margin-bottom:25px;} #con .list-01 > li:last-child{margin-bottom:0;} #con .list-01 > li:before{content:'';position: absolute;top:10px;left:0;width:1px;height:20px;background:#35b5b1;transform: rotate(45deg);} @media screen and (max-width:1500px){ #con .sub0101 .img-wrap{margin-top:50px;} #con .sub0101 .img-wrap .img-01{width:550px;height:400px;} #con .sub0101 .img-wrap .img-02{width:1000px;height:400px;margin-top: -350px;;} } @media screen and (max-width:1200px){ #con .sub0101 .img-wrap .img-02{width:800px;} #con .sub0101 .vm-box > li{margin-top:50px;} #con .sub0101 .vm-box > li .tit-box > strong{font-size:40px;} #con .list-01 > li{margin-bottom:15px;} } @media screen and (max-width:1000px){ #con .sub0101 .txt-01 > br, #con .sub0101 .txt-02 > br{display:none;} #con .sub0101 .img-wrap{margin-top:30px;} #con .sub0101 .img-wrap .img-01{display:none;} #con .sub0101 .img-wrap .img-02{position: inherit;float:none;width:100%;margin-top:0;z-index:1;} } @media screen and (max-width:800px){ #con .sub0101 .vm-box > li{margin-top:30px;} #con .sub0101 .vm-box > li .tit-box{float:none;margin-bottom:15px;} #con .sub0101 .vm-box > li .tit-box > strong{font-size:30px;} } @media screen and (max-width:600px){ #con .sub0101 .txt-02{margin-bottom:20px;} #con .sub0101 .img-wrap .img-02{height:300px;} } #con .map-area{width:100%;height:530px;} #con .map-area .root_daum_roughmap .wrap_map{height:100%;} #con .info-wrap{height:100px;background:#004a96;} #con .info-wrap:after{content:'';display:block;clear: both;} #con .info-wrap .info-box{float:left;height:100%;padding:25px 0 0 110px;background-image: url('../images/sub/01/add.png');background-repeat: no-repeat;background-position: 30px 25px;} #con .info-wrap .info-box > strong{display:block;margin-bottom:10px;color:#fff;font-size:17px;font-weight: 700;} #con .info-wrap .info-box .txt{color:#fff;font-size:17px;font-weight: 300;} #con .info-wrap .link-btn{display:block;position:relative;float: right;width:200px;height:100px;padding:40px 0 0 65px;color:#fff;font-size:15px;font-weight: 700;background: #003b78;} #con .info-wrap .link-btn:before{content: '';position: absolute;top:40px;left:30px;width:19px;height:19px;background-image: url('../images/sub/01/link.png');} @media screen and (max-width:1400px){ #con .info-wrap{height: auto;} #con .info-wrap .info-box{float:none;padding:25px 0 25px 110px;} #con .info-wrap .link-btn{width:100%;height: 50px;padding:17px 0 0 100px;} #con .info-wrap .link-btn:before{top:15px;left:40px;} } @media screen and (max-width:1200px){ #con .info-wrap .link-btn{height: auto;padding:15px 50px 15px 100px;font-size:15px;} #con .info-wrap .info-box > strong, #con .info-wrap .info-box .txt{font-size:15px;} } @media screen and (max-width:800px){ #con .map-area{height:300px;} } @media screen and (max-width:600px){ #con .info-wrap .info-box{padding:15px 20px;background-image:none;} #con .info-wrap .link-btn{padding:15px 0 15px 50px;} #con .info-wrap .link-btn:before{left:20px;} } #con .sub0103{max-width: 1150px;margin:0 auto;} #con .sub0103 .down-box{} #con .sub0103 .down-box:after{content:'';display: block;clear: both;} #con .sub0103 .down-box .img-wrap{float:left;margin-right:130px;} #con .sub0103 .down-box .txt-wrap{overflow: hidden;} #con .sub0103 .down-box .txt-wrap > strong{display:block;margin-bottom:50px;font-size:30px;color:#000;font-weight: 700;} #con .sub0103 .down-box .txt-wrap .down-list{margin-top:100px;} #con .sub0103 .down-box .txt-wrap .down-list:after{content:'';display: block;clear: both;} #con .sub0103 .down-box .txt-wrap .down-list > li{float:left;margin-right:10px;} #con .sub0103 .down-box .txt-wrap .down-list > li .down-btn{display:block;width:250px;height:55px;border:1px solid #d6dae1;line-height:55px;font-weight:500;text-align:center;font-size:16px;color:#000;background:#fff;} #con .sub0103 .down-box .txt-wrap .down-list > li .down-btn:hover{border-color:#004a96;color:#fff;background:#004a96;} #con .sub0103 .down-box .txt-wrap .down-list > li .down-btn > img{padding:15px 10px 0 0;vertical-align: top;} @media screen and (max-width:1200px){ #con .sub0103 .down-box .img-wrap{margin-right:50px;} #con .sub0103 .down-box .txt-wrap > strong{margin-bottom:20px;} #con .sub0103 .down-box .txt-wrap .down-list{margin-top:50px;} #con .sub0103 .down-box .txt-wrap .down-list > li .down-btn{font-size:15px;} } @media screen and (max-width:1000px){ #con .sub0103 .down-box .img-wrap{float:none;margin-right:0;text-align: center;} #con .sub0103 .down-box .txt-wrap{margin-top:50px;text-align: center;} #con .sub0103 .down-box .txt-wrap .down-list{display: inline-block;} } @media screen and (max-width:600px){ #con .sub0103 .down-box .txt-wrap{margin-top:30px;} #con .sub0103 .down-box .txt-wrap > strong{font-size:20px;} #con .sub0103 .down-box .txt-wrap > strong > br{display:none;} #con .sub0103 .down-box .txt-wrap .down-list{width:100%;} #con .sub0103 .down-box .txt-wrap .down-list > li{float:none;margin-bottom:10px;} #con .sub0103 .down-box .txt-wrap .down-list > li .down-btn{width:100%;} } #con .tit-02{display:block;position:relative;padding-left:40px;font-size:30px;color:#0c0c0c;font-weight: 700;} #con .tit-02:before{content:'';position: absolute;top:7px;left:0;width:19px;height:19px;background:url('../images/sub/01/tit.jpg') no-repeat;} #con .sub0102{} /* #con .sub0102 .txt-01{margin-top:30px;} */ /* #con .sub0102 .banner-wrap{position:relative;max-width:1300px;height:350px;margin:150px auto 0;padding-top:145px;text-align: center;background-image: url('../images/sub/01/sub_01_02_02.png');background-position: center;background-repeat: no-repeat;background-size: cover;} */ /* sub01_02 (CBE at KAIST) 시작*/ #con .con-area .sub0102 .banner-wrap{position: relative; max-width: 1300px; height: 350px; margin: 100px auto 0; padding-top: 145px; text-align: center; background-image: url('../images/sub/01/sub_01_02_02.png'); background-position: center; background-repeat: no-repeat; background-size: cover;} #con .con-area .sub0102 .txt-01.v2{margin-top: 100px;} /* sub01_02 (CBE at KAIST) 끝*/ #con .con-area .sub0102 .banner-wrap:after{content:'';position: absolute;top:-55px;left:-100px;z-index:-1;width:270px;height:270px;background:#f0f0f0;} #con .con-area .sub0102 .banner-wrap:before{content: '';position: absolute;top:130px;right:-100px;z-index:-1;width:500px;height:275px;background:#e5ecf5;} #con .con-area .sub0102 .banner-wrap > strong{display:block;margin-bottom:30px;font-size:31px;color:#fff;font-weight: 700;} #con .con-area .sub0102 .banner-wrap .txt{font-size:21px;color:#fff;font-weight: 300;} #con .graph-wrap{width:100%;margin-bottom:100px;padding:70px 0 100px;text-align: center;background:url('../images/sub/01/sub01_02.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;} #con .graph-wrap .con-area{margin-bottom:0;} #con .graph-wrap .graph-tit{display: block;margin-bottom:40px;font-size:31px;color:#fff;font-weight: 700;} #con .graph-wrap .img{width:100%;margin-bottom:100px;} #con .graph-wrap .img:last-child{margin-bottom:0;} #con .con-area .sub0102 .graph-list-wrap{width:100%;} #con .con-area .sub0102 .graph-list{display:table;width:100%;margin:50px 0 120px;} #con .con-area .sub0102 .graph-list:after{content:'';display: block;clear: both;} #con .con-area .sub0102 .graph-list > li{display:table-cell;padding:0 10px;text-align: center;table-layout: fixed;} #con .list-box{margin:30px -10px 0 0;} #con .list-box:after{content:'';display: block;clear: both;} #con .list-box > li{float:left;width:20%;} #con .list-box > li .list-con{height:120px;margin-right:10px;padding-top:30px;border:1px solid #d6dae1;text-align: center;box-shadow: 0 3px #f2f2f2;background:#fff;} #con .list-box > li .list-con .year{display: block;margin-bottom:5px;font-size:20px;color:#292929;} #con .list-box > li .list-con .txt-01{margin:0;} @media screen and (max-width:1500px){ #con .con-area .sub0102 .banner-wrap{margin:50px auto 0;} #con .con-area .sub0102 .banner-wrap:after, #con .con-area .sub0102 .banner-wrap:before{display: none;} #con .con-area .sub0102 .txt-01.v2 {margin-top: 0;} } @media screen and (max-width:1200px){ #con .tit-02{padding-lefT:25px;font-size:25px;} #con .tit-02:before{top:3px;} #con .con-area .sub0102 .banner-wrap{height:280px;padding-top:100px;} #con .con-area .sub0102 .banner-wrap > strong{margin-bottom:15px;font-size: 25px;} #con .con-area .sub0102 .banner-wrap .txt{font-size:17px;} #con .graph-wrap{margin-bottom:50px;} #con .graph-wrap .graph-tit{font-size:25px;} #con .list-box{margin:20px -10px 0 0;} #con .list-box > li{width:33.3%;margin-bottom:10px;} } @media screen and (max-width:1000px){ #con .graph-wrap{padding:50px 0;} #con .graph-wrap .img{margin-bottom:50px;} #con .con-area .sub0102 .graph-list{margin:30px 0 50px;} } @media screen and (max-width:800px){ #con .con-area .sub0102 .banner-wrap{height:200px;padding:80px 10px 0;} #con .con-area .sub0102 .graph-list-wrap{overflow-x: scroll;} #con .con-area .sub0102 .graph-list{width:800px;} #con .list-box > li{width:50%;} } @media screen and (max-width:600px){ #con .graph-wrap{padding:50px 0;} #con .con-area .sub0102 .banner-wrap{height:150px;margin:20px auto 30px; padding:60px 10px 0;} #con .con-area .sub0102 .banner-wrap > strong{margin-bottom:10px;font-size: 20px;} #con .con-area .sub0102 .banner-wrap .txt{font-size:15px;} #con .graph-wrap .graph-tit{font-size:20px;} #con .graph-wrap{margin-bottom:30px;} #con .graph-wrap .img{overflow-x: scroll;} #con .graph-wrap .img-wrap{width:600px;} #con .list-box{margin:20px 0 0 0;} #con .list-box > li{float:none;width:100%;} #con .list-box > li:last-child{margin-bottom:0;} #con .list-box > li .list-con{height:80px;margin-right:0;padding-top:15px;} #con .list-box > li .list-con .year{font-size:17px;} } @media screen and (max-width:400px){ #con .con-area .sub0102 .banner-wrap{height:100px;} } #con .sub0201{} #con .sub0201 .txt-01{margin-bottom:40px;} #con .sub0201 .txt-01:last-child{margin-bottom:0;} #con .sub0201 .link-list {margin-top:100px;margin-right:-20px;} #con .sub0201 .link-list:after{content:'';display: block;clear: both;} #con .sub0201 .link-list > li{float:left;width:20%;} #con .sub0201 .link-list > li > .item{display:block;position:relative;height:270px;margin-right:20px;text-align: center;} #con .sub0201 .link-list > li > .item .veiw-box{overflow:hidden;display:table;position:relative;width:100%;height:100%;padding:0 5px;background-position: center;background-repeat: no-repeat;background-size: cover;} #con .sub0201 .link-list > li > .item .veiw-box:before{content:'';position: absolute;top:0;left:0;z-index:1;width:100%;height:100%;background:rgba(80,158,239,0.95);opacity:0;transition: all .3s;} #con .sub0201 .link-list > li > .item .veiw-box:after{content:'';position: absolute;bottom:50px;left:-50px;transform: translateX(-50%);z-index:1;width:59px;height:31px;background:url('../images/sub/02/link_i.png') no-repeat;transition: all .3s;} #con .sub0201 .link-list > li > .item .veiw-box .txt-con{display: table-cell;} #con .sub0201 .link-list > li > .item .veiw-box .txt-con > strong{display:inline-block;margin-top:70px;font-size:21px;color:#fff;font-weight: 700;} #con .sub0201 .link-list > li > .item .veiw-box .txt-con> img{position:absolute;bottom:70px;left:50%;transform: translateX(-50%);opacity:0.3;transition: all .3s;} #con .sub0201 .link-list > li > .item .veiw-box:hover:before{opacity: 1;} #con .sub0201 .link-list > li > .item .veiw-box:hover:after{left:50%;} #con .sub0201 .link-list > li > .item .veiw-box:hover .txt-con{vertical-align: middle;} #con .sub0201 .link-list > li > .item .veiw-box:hover .txt-con > img{opacity: 0;} #con .sub0201 .link-list > li > .item .veiw-box:hover .txt-con > strong{position:relative;z-index:10;margin-top:0;font-size:25px;} #con .sub0201 .link-list > li:nth-child(1) > .item .veiw-box{background-image: url('../images/sub/02/sub_02_01_01.jpg');} #con .sub0201 .link-list > li:nth-child(2) > .item .veiw-box{background-image: url('../images/sub/02/sub_02_01_02.jpg');} #con .sub0201 .link-list > li:nth-child(3) > .item .veiw-box{background-image: url('../images/sub/02/sub_02_01_03.jpg');} #con .sub0201 .link-list > li:nth-child(4) > .item .veiw-box{background-image: url('../images/sub/02/sub_02_01_04.jpg');} #con .sub0201 .link-list > li:nth-child(5) > .item .veiw-box{background-image: url('../images/sub/02/sub_02_01_05.jpg');} @media screen and (max-width:1500px){ #con .sub0201 .link-list{margin-right:-10px;} #con .sub0201 .link-list > li > .item{height: 230px;margin-right:10px;} #con .sub0201 .link-list > li > .item .veiw-box .txt-con> img{bottom:40px;} #con .sub0201 .link-list > li > .item .veiw-box:hover .txt-con > strong{font-size:20px;} } @media screen and (max-width:1200px){ #con .sub0201 .txt-01{margin-bottom:20px;} #con .sub0201 .link-list{margin-top:50px;} #con .sub0201 .link-list > li > .item .veiw-box .txt-con > strong{margin-top:50px;font-size:17px;} #con .sub0201 .link-list > li > .item .veiw-box .txt-con > img{opacity: 1;} #con .sub0201 .link-list > li > .item .veiw-box:before, #con .sub0201 .link-list > li > .item .veiw-box:after{display:none;} #con .sub0201 .link-list > li > .item .veiw-box:hover .txt-con{vertical-align: inherit;} #con .sub0201 .link-list > li > .item .veiw-box:hover .txt-con > img{opacity: 1;} #con .sub0201 .link-list > li > .item .veiw-box:hover .txt-con > strong{margin-top:50px;font-size:17px;} } @media screen and (max-width:1000px){ #con .sub0201 .link-list{margin-top:30px;} #con .sub0201 .link-list > li{width:33.3%;margin-bottom:10px;} #con .sub0201 .link-list > li:nth-child(4), #con .sub0201 .link-list > li:nth-child(5){width: 50%;} #con .sub0201 .link-list > li > .item{height: 210px;} } @media screen and (max-width:800px){ #con .sub0201 .link-list > li{width:50%;} #con .sub0201 .link-list > li:nth-child(5){width: 100%;} } @media screen and (max-width:600px){ #con .sub0201 .link-list{margin-right:0;} #con .sub0201 .link-list > li{float:none;width:100%;} #con .sub0201 .link-list > li:nth-child(4){width:100%;} #con .sub0201 .link-list > li > .item{height:180px;margin-right:0;} #con .sub0201 .link-list > li > .item .veiw-box .txt-con > strong, #con .sub0201 .link-list > li > .item .veiw-box:hover .txt-con > strong{font-size:15px;} #con .sub0201 .link-list > li > .item .veiw-box .txt-con > strong > br{display: none;} } #con .research-box{margin-bottom:50px;} #con .research-box:after{content:'';display: block;clear: both;} #con .research-box .txt-box{} #con .research-box .txt-box > strong{display:block;margin-bottom:10px;font-size:40px;color:#0c0c0c;font-weight: 900;} #con .research-box .txt-box .txt-01{margin-bottom:30px;} #con .research-box .img-box{margin-top:20px;margin-right:-30px;} #con .research-box .img-box:after{content:'';display: block;clear: both;} #con .research-box .img-box > li{float:left;width:50%;} #con .research-box .img-box > li > div{margin-right:30px;} @media screen and (max-width:1500px){ #con .research-box .txt-box .txt-01{margin-bottom:20px;} } @media screen and (max-width:1200px){ #con .research-box .txt-box{float:none;width:100%;} #con .research-box .txt-box > strong{margin-bottom:10px;font-size:30px;} #con .research-box .img-box{margin-right:-10px;} #con .research-box .img-box > li > div{margin-right:10px;} } @media screen and (max-width:1000px){ #con .research-box{margin-bottom:30px;} } @media screen and (max-width:600px){ #con .research-box .txt-box > strong{font-size:25px;} #con .research-box .txt-box .txt-01{margin-bottom:10px;} #con .research-box .img-box .img-wrap{height:200px;} #con .research-box .img-box{margin-right:0;} #con .research-box .img-box > li{float:none;width:100%;margin-bottom:10px;} #con .research-box .img-box > li > div{margin-right:0;} } #con .pro-list{display: flex; margin: 30px -15px 0; flex-wrap:wrap} #con .pro-list > li{width:33.3%; padding: 0 15px; margin-bottom:30px;} #con .pro-list > li .con-wrap{display:flex; height: 100%; padding: 30px 10px; border:1px solid #d6dae1; text-align: center; box-shadow: 0 4px #f2f2f2; flex-direction:column; justify-content:space-between} #con .pro-list > li .con-wrap .txt-wrap{margin-bottom:20px;} #con .pro-list > li .con-wrap .txt-wrap > strong{display: block;margin-bottom:10px;font-size:20px;color:#292929;} #con .pro-list > li .con-wrap .txt-wrap .txt-01{font-size: 18px; cursor: default;} #con .pro-list > li .con-wrap .link-btn{display:block; width:120px ;height:35px; line-height: 35px; font-size:15px; color:#fff; font-weight: 500; background:#004a96;} @media screen and (max-width:1400px){ #con .pro-list {margin: 30px -10px;} #con .pro-list > li{padding: 0 10px; margin-bottom: 20px;} } @media screen and (max-width:1200px){ #con .pro-list > li .con-wrap{padding: 20px 10px;} #con .pro-list > li .con-wrap .txt-wrap > strong{font-size: 18px;} } @media screen and (max-width:1024px){ #con .pro-list > li{width: 50%;} #con .pro-list > li .con-wrap .txt-wrap .txt-01{font-size: 16px;} } @media screen and (max-width:800px){ #con .pro-list > li .con-wrap .btn-link {width: 100px;} } @media screen and (max-width:700px){ #con .pro-list > li{float:none;width:100%} } @media screen and (max-width:600px){ #con .pro-list > li .con-wrap{height:auto;padding:20px 15px;} #con .pro-list > li .con-wrap .txt-01{padding: 10px 0;} #con .pro-list > li .con-wrap > strong{font-size:17px;} #con .pro-list > li .con-wrap .link-btn{position:inherit;bottom:0;margin-top:10px;font-size:13px;} } #con .con-wrap{padding-top:90px;} #con .con-wrap.f-con-wrap{padding-top:0;} #con .con-wrap:nth-child(2n){padding-bottom:90px;background: #fafafa;} #con .con-wrap:nth-child(2n) .con-area{margin-bottom:0;} #con .con-wrap .txt-02{margin-bottom:30px;} #con .con-wrap .list-box{margin:40px 0;} #con .con-wrap .list-box > li{margin-bottom:10px;} #con .con-wrap .list-box > li .list-con .txt-01{line-height: 1;} #con .con-wrap .img-box{text-align: center;} @media screen and (max-width:1000px){ #con .con-wrap{padding-top:50px;} #con .con-wrap:nth-child(2n){padding-bottom:50px;} #con .con-wrap .txt-02{margin-bottom:20px;} #con .con-wrap .list-box{margin:20px 0;} } #con .summary-box{height:700px;margin-bottom:80px;padding-top:150px;background-position: center;background-repeat: no-repeat;background-size: cover;} #con .summary-box.v2{padding-top: 40px;} #con .summary-box .con-area{margin-bottom:0;} #con .summary-box .s-tit{display:block;margin-bottom:40px;font-size:40px;color:#fff;font-weight: 900;text-shadow:1px 1px #626060;} #con .summary-box .txt{font-size:18px;color:#fff;line-height: 2;margin-bottom:30px;text-shadow:1px 1px #626060;} #con .summary-box .txt:last-child{margin-bottom: 0;} #con .summary-box.sub04{background-image: url('../images/sub/04/sub_04_01.jpg');} #con .summary-box.sub05{background-image: url('../images/sub/05/sub_05_01.jpg');} #con .img-list{margin-top:35px;margin-right:-20px;} #con .img-list:after{content:'';display: block;clear: both;} #con .img-list > li{float:left;width:33.3%;} #con .img-list > li > div{margin-right:20px;background-position: right;background-repeat: no-repeat;background-size: cover;} #con .sub04 .tit-02{margin-bottom:15px;} #con .sub05 .txt-01{margin:15px 0 30px;} @media screen and (max-width:1500px){ #con .summary-box{height:650px;padding-top:60px;} } @media screen and (max-width:1200px){ #con .summary-box{height:auto;padding:50px 0;} #con .summary-box .s-tit{margin-bottom:20px;font-size:35px;} #con .summary-box .txt{font-size:15px;} #con .img-list{margin-right:-10px;} #con .img-list > li > div{margin-right:10px;} } @media screen and (max-width:1000px){ #con .summary-box{margin-bottom:50px;} #con .img-list{margin-top:20px;} #con .summary-box .txt > br{display: none;} } @media screen and (max-width:800px){ #con .summary-box .s-tit{margin-bottom:10px;font-size:30px;} } @media screen and (max-width:600px){ #con .img-list{margin-right:0;} #con .img-list > li{float:none;width:100%;margin-bottom:10px;} #con .img-list > li:last-child{margin-bottom:0;} } #con .btn-wrap{margin-bottom:35px;text-align: right;} #con .btn-wrap .down-btn{display:inline-block;position:relative;width:300px;height:50px;padding-left:30px;line-height:50px;text-align:left;font-weight:500;font-size:15px;color:#fff;background:#004a96;} #con .btn-wrap .down-btn:before{content: '';position: absolute;top:0;right:0;width:50px;height:50px;background:#003b78;} #con .btn-wrap .down-btn:after{content:'';position: absolute;top:17px;right:17px;width:16px;height:16px;background: url('../images/sub/down_i.png') no-repeat;} #con .table-wrap{width:100%;} #con .table-wrap .table-01{width:100%;} #con .table-wrap .table-01 th{position:relative;padding:12px 5px;border:1px solid #bcc4d0;font-size:17px;color:#fff;font-weight:500;background:#bcc4d0;} #con .table-wrap .table-01 th:after{content:'';position: absolute;top:50%;right:0;width:1px;height:10px;margin-top:-5px;background:#fff;} #con .table-wrap .table-01 th:last-child:after{display:none;} #con .table-wrap .table-01 td{padding:25px 0;border-width:0 0 1px 1px;border-style:solid;border-color:#d6dae1;font-size:15px;color:#8f8f8f;text-align: center;} #con .table-wrap .table-01 td:last-child{border-width:0 1px 1px 1px;} #con .table-wrap .table-01 td.left{padding-left:45px;} #con .table-wrap .table-02{width:100%;} #con .table-wrap .table-02 th{border-width:0 0 1px 1px;border-style:solid;border-color:#d6dae1;padding:12px 5px;font-size:17px;color:#fff;font-weight:500;background:#bcc4d0;} #con .table-wrap .table-02 td{padding:25px 0;border-width:0 0 1px 1px;border-style:solid;border-color:#d6dae1;font-size:15px;color:#8f8f8f;text-align: center;} #con .table-wrap .table-02 td:last-child{border-width:0 1px 1px 1px;} #con .table-wrap .table-02 td.left{padding-left:45px;} #con .notes-wrap{height:45px;margin-top:25px;padding:13px 0 0 45px;background:#59af26;} #con .notes-wrap > strong{display:block;float:left;margin-right:20px;font-size:15px;color:#fff;} #con .notes-wrap .txt{overflow: hidden;font-size:15px;color:#fff;} @media screen and (max-width:1200px){ #con .btn-wrap{margin-bottom:20px;} #con .table-wrap .table-01 th:after{top:17px;} #con .table-wrap .table-01 th, #con .table-wrap .table-01 td{padding:15px 0;font-size:13px;} #con .table-wrap .table-02 th:after{top:17px;} #con .table-wrap .table-02 th, #con .table-wrap .table-02 td{padding:15px 0;font-size:13px;} #con .notes-wrap{height:auto;padding:10px;} #con .notes-wrap > strong{float:none;margin-bottom:10px;} } @media screen and (max-width:1000px){ #con .table-wrap{overflow-x: auto;} #con .table-wrap .table-01{width:1000px;} #con .table-wrap .table-02{width:1000px;} } @media screen and (max-width:600px){ #con .btn-wrap{margin-top:20px;} #con .btn-wrap .down-btn{width:100%;padding:0;text-align: center;} #con .btn-wrap .down-btn:before, #con .btn-wrap .down-btn:after{display:none;} #con .notes-wrap > strong, #con .notes-wrap .txt{font-size:13px;} } #con .graph-wrap-02{margin-top:40px;padding:80px 100px 35px 120px;border:1px dashed #bcc4d0;text-align:center;background:#fafafa;} #con .graph-wrap-02:after{content:'';display: block;clear: both;} #con .graph-wrap-02 .img-wrap-01{float:left;} #con .graph-wrap-02 .img-wrap-02{float:right;} @media screen and (max-width:1500px){ #con .graph-wrap-02{padding:30px 15px;} } @media screen and (max-width:1200px){ #con .graph-wrap-02 .img-wrap-01{float:none;width:100%;margin-bottom:40px;} #con .graph-wrap-02 .img-wrap-02{float:none;width:100%;} } /* people */ #con .tit-i-01{display:block;margin-bottom:15px;padding-left:30px;font-size:23px;color:#0c0c0c;font-weight:500;line-height: 1.1;background-image:url('../images/custom/tit_i_arrow.png');background-repeat: no-repeat;background-position:top 3px left;} @media screen and (max-width:1200px){ #con .tit-i-01{font-size:21px;} } @media screen and (max-width:600px){ #con .tit-i-01{font-size:19px;background-position:top 0px left;} } #con .list-i-01{margin-bottom:30px;} #con .list-i-01 > li{margin-bottom:10px;padding-left:20px;font-size:17px;color:#8f8f8f;font-weight:300;background-image:url('../images/custom/list_i_01.png');background-repeat:no-repeat;background-position:top 6px left 2px;} #con .list-i-01 > li:last-child{margin-bottom:0;} #con .people-list{margin:0 -10px;font-size:0;} #con .people-list > li{display:inline-block;vertical-align:top;width:10%;margin-bottom:20px;padding:0 10px;} #con .people-list > li > .con-box{display:block;position:relative;} #con .people-list > li > .con-box > .img-con img{display:block;} #con .people-list > li > .con-box > .con-txt{min-height:90px;padding:10px;background-color:#f7f8f9;} #con .people-list > li > .con-box > .con-txt .tit{display:block;margin-bottom:5px;font-size:15px;font-weight:500;line-height:1.3;color:#292929;} #con .people-list > li > .con-box > .con-txt p{font-size:13px;color:#8f8f8f;} #con .people-list > li > .con-box > .mask{display: table;position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(80,158,239,.95);opacity: 0;} #con .people-list > li > .con-box > .mask > .mask-con{display:table-cell;width:100%;vertical-align: middle;padding:0 20px;text-align: center;} #con .people-list > li > .con-box > .mask > .mask-con .tit{display:block;margin-bottom:5px;font-size:20px;color:#ffffff;} #con .people-list > li > .con-box > .mask > .mask-con p{margin-bottom:45px;font-size:15px;color:#ffffff;} #con .people-list > li > .con-box > .mask > .mask-con span{display:inline-block;width:59px;height:31px;margin-left: -30px;background-image:url(../images/sub/people_link.png);background-repeat: no-repeat;} #con .people-list > li > .con-box:hover > .mask{opacity: 1;} #con .people-view{} #con .people-view .con-h{margin-bottom:40px;} #con .people-view .con-h:after{content:"";display:block;clear: both;} #con .people-view .con-h .img-con{float:left;width:132px;} #con .people-view .con-h .con-con{overflow: hidden;padding:0px 0 0 50px;} #con .people-view .con-h .con-con .tit{display:inline-block;margin-right:10px;margin-bottom:20px;font-size:35px;color:#292929;} #con .people-view .con-h .con-con .ex_01{display:inline-block;margin-bottom:20px;font-size:20px;color:#8f8f8f;} #con .people-view .con-h .con-con .list{margin:20px 0;} #con .people-view .con-h .con-con .list:after{content:"";display:block;clear: both;} #con .people-view .con-h .con-con .list > li{margin:0 25px 25px 0;} #con .people-view .con-h .con-con .list > li:last-child{margin-right:0;} #con .people-view .con-h .con-con .list > li .item-con{display:table;width:100%;} #con .people-view .con-h .con-con .list > li .item-con .cap-col{display:table-cell;width:1%;vertical-align:middle;} #con .people-view .con-h .con-con .list > li .icon{display:inline-block;vertical-align:middle;width:35px;height:35px;background-image:url('../images/sub/people_view_i.png');background-repeat: no-repeat;} #con .people-view .con-h .con-con .list > li .icon.li01{background-position: 10px 7px;;background-color:#004a96;} #con .people-view .con-h .con-con .list > li .icon.li02{background-position: 9px -101px;;background-color:#006396;} #con .people-view .con-h .con-con .list > li .icon.li03{background-position: 9px -219px;;background-color:#1572fe;} #con .people-view .con-h .con-con .list > li .icon.li04{background-position: 9px -338px;;background-color:#15b9fe;} #con .people-view .con-h .con-con .list > li p{display:table-cell;vertical-align:middle;padding:0px 0 0 15px;font-size:17px;color:#8f8f8f;} #con .people-view .con-h .con-con .list > li p a{color:#8f8f8f;} #con .people-view .people-view-con{font-size: 17px;color: #8f8f8f;font-weight: 300;} #con .people-view .people-view-con .p-tit-01{display:block;margin-bottom:20px;font-size:23px;font-weight:500;} #con .people-view .people-view-con .line-box-01{margin:30px 0;padding:30px;border:1px dotted #bcc4d0;background-color:#fafafa;} #con .people-view .people-view-con .s-tit-01{display:block;margin-bottom:15px;font-size:20px;color:#111;font-weight:500;} @media screen and (max-width:1400px){ #con .people-list > li{width:12.5%;} } @media screen and (max-width:1200px){ #con .people-view .con-h .con-con{padding:0 0 0 30px;} #con .people-list{margin:0 -7px;} #con .people-list > li{margin-bottom:14px;padding:0 7px;} #con .people-list > li > .con-box > .con-txt .tit{font-size:13px;} #con .people-list > li > .con-box > .con-txt p{font-size:11px;} } @media screen and (max-width:1024px){ #con .people-list > li{width:14.2%;} } @media screen and (max-width:800px){ #con .people-list{margin:0;} #con .people-list > li{width:20%;} #con .people-view .con-h .con-con .list{margin:25px 0;} #con .people-view .con-h .con-con .list > li{width:100%;} #con .people-list > li > .con-box > .con-txt{padding:5px;} } @media screen and (max-width:600px){ #con .people-list > li{width:25%;} #con .people-view{margin-top:50px;} #con .people-view .con-h .img-con{float:none;width:100%;margin-bottom:25px;text-align: center;} #con .people-view .con-h .con-con{padding:0;} #con .people-view .con-h .con-con .tit{display:block;font-size:25px;text-align:center;} #con .people-view .con-h .con-con .ex_01{display:block;font-size:18px;text-align:center;} #con .people-view .people-view-con .line-box-01{padding:15px;} } @media screen and (max-width:500px){ #con .people-list > li{width:33.3%;} } @media screen and (max-width:400px){ #con .people-list > li{width:50%;} } /* search 검색 */ #con .sub-search-box{padding-top:100px;} #con .search-wrap{} #con .search-wrap .list-tit{margin-top:60px;} #con .search-wrap .list-tit:before{border:4px solid #000;} #con .search-wrap .em{color:#ed7b00;} #con .search-wrap .search-box{display:table;margin-bottom:40px;border:4px solid #444;} #con .search-wrap .search-box:after{content:'';display: block;clear: both;} #con .search-wrap .search-box .text-wrap{position:relative;} #con .search-wrap .search-box .text-wrap:before{content:'';position: absolute;top:15px;left:20px;width:17px;height:17px;background: url('../images/sub/sub07/search.png') no-repeat;} #con .search-wrap .search-box .text-wrap .search-txt{width:100%;height:45px;padding:0 50px;text-align:left;font-size:13px;color:#7b7b7b;} #con .search-wrap .search-box .text-wrap .search-txt:focus{outline: none;} #con .search-wrap .search-box .btn-wrap{display:table-cell;width:1%;vertical-align: middle;} #con .search-wrap .search-box .btn-wrap .search-b-btn{display:block;width:110px;height:45px;padding:0 0px 0 0px;line-height:45px;text-align:center;font-size:15px;color:#fff;font-weight: 500;background:#444444;} #con .search-wrap .search-list{margin-top:15px;margin-bottom:25px;border-top:1px solid #000;} #con .search-wrap .search-list > li{border-bottom:1px solid #e0e0e0;} #con .search-wrap .search-list > li a{display:block;padding:27px 0;} #con .search-wrap .search-list > li a:after{content:'';display: block;clear: both;} #con .search-wrap .search-list > li a .search-tit{display:inline-block;margin-bottom:10px;font-size:17px;color:#111;font-weight: 500;font-family: 'Noto Sans KR';} #con .search-wrap .search-list > li a .volume{font-size:17px;color:#bbb;font-family: 'Noto Sans KR';} #con .search-wrap .search-list > li a .search-txt{font-size:15px;color:#888;font-weight: 500;font-family: 'Noto Sans KR';} #con .search-wrap .search-list > li a .img-wrap{float:left;margin-right:20px;} #con .search-wrap .search-list > li a .con-wrap{overflow: hidden;} #con .search-wrap .search-list > li a .date{position:relative;margin-top:10px;padding-left:25px;font-size:14px;color:#aaa;font-weight: 500;font-family: 'Noto Sans KR';} #con .search-wrap .search-list > li a .date:before{content:'';position: absolute;top:1px;left:0;width:17px;height:17px;background:url('../images/sub/date.png') no-repeat;} @media(max-width:600px){ #con .search-wrap .list-tit{margin-top:30px;} #con .search-wrap .search-box .btn-wrap .search-btn{width:80px;} #con .search-wrap .search-list > li a{padding:15px 0;} #con .search-wrap .search-list > li a .img-wrap{float:none;margin-bottom:10px;} #con .search-wrap .search-list > li a .search-tit{font-size:15px;} #con .search-wrap .search-list > li a .search-txt{font-size:13px;} #con .search-wrap .search-list > li a .date{padding-left:0;font-size:11px;} #con .search-wrap .search-list > li a .date:before{display: none;} } #footer{background-color:#343434;} #footer .foot-area{position:relative;width:100%;max-width:1500px;margin:0 auto;padding:40px 350px 40px 45px;} #footer .foot-area:after{content:"";display:block;clear:both;} #footer .foot-area .foot-logo{margin-bottom:20px;} #footer .foot-area .foot-txt{margin-bottom:10px;font-weight:500;font-size:15px;color:#8a8a8a;} #footer .foot-area .address{margin-bottom:10px;font-size:15px;color:#8a8a8a;} #footer .foot-area .copyright{font-size:15px;color:#8a8a8a;} #footer .foot-area .bk21{position:absolute;top:50%;right:0;margin-top:-25px;} @media screen and (max-width:1500px){ #footer .foot-area{padding:25px 250px 25px 25px;} #footer .foot-area .bk21{right:15px;} } @media screen and (max-width:800px){ #footer .foot-area{padding:20px;} #footer .foot-area .bk21{display:block;position:static;margin-top:25px;} } @media screen and (max-width:600px){ #footer .foot-area .foot-txt{font-size:14px;} #footer .foot-area .address{font-size:14px;} #footer .foot-area .copyright{font-size:14px;} } /* PEOPLE */ #con .tabs-wrap{margin-bottom:20px;} #con .tabs-wrap .tab-list{display:table;width:100%;table-layout:fixed;} #con .tabs-wrap .tab-list > li{display:table-cell;border-width:1px 1px 1px 0;border-style:solid;border-color:#d6dae1;} #con .tabs-wrap .tab-list > li:first-child{border-left:1px solid #d6dae1;} #con .tabs-wrap .tab-list > li > a{display:block;height:70px;font-size:18px;color:#292929;text-align:center;font-weight:500;line-height:70px;background:#fff;} #con .tabs-wrap .tab-list > li.active{border-color:#8193a5;} #con .tabs-wrap .tab-list > li.active > a{color:#fff;background:#8193a5;} @media screen and (max-width:1200px){ #con .tabs-wrap .tab-list > li > a{height:50px;line-height:50px;font-size:15px;} } @media screen and (max-width:800px){ #con .tabs-wrap{position:relative;height:50px;} #con .tabs-wrap:after{content:'';position:absolute;top:25px;right:50px;z-index:100;border-bottom:5px solid none;border-top:5px solid #fff;border-left:5px solid transparent;border-right:5px solid transparent;} #con .tabs-wrap .tab-list{overflow:hidden;display:block;position:relative;z-index:99;height:50px;} #con .tabs-wrap .tab-list > li{display:block;width:100%;border-width:0 1px 1px 1px;visibility:hidden;} #con .tabs-wrap .tab-list > li.active {position:absolute;top:0;left:0;width:100%;visibility:visible;} #con .tabs-wrap.on .tab-list{height:auto;padding-top:50px;} #con .tabs-wrap.on .tab-list > li{visibility:visible;} } /* 로그인 */ #con .login-form{text-align:center;} #con .login-box{max-width:800px;margin:30px auto 0;padding:50px 0;border-top:2px solid #292929;border-bottom:1px solid #d6dae1;} #con .login-box .login-list{max-width:350px;margin:0 auto;} #con .login-box .login-list > li{margin-bottom:20px;} #con .login-box .login-list > li:last-child{margin-bottom:0;} #con .login-box .login-list > li .id-wrap{position:relative;} #con .login-box .login-list > li .id-wrap:after{content:'';position:absolute;top:14px;left:30px;width:18px;height:20px;background:url('../images/sub/id_i.png') no-repeat;} #con .login-box .login-list > li .pw-wrap{position:relative;} #con .login-box .login-list > li .pw-wrap:after{content:'';position:absolute;top:14px;left:30px;width:19px;height:29px;background:url('../images/sub/pw_i.png') no-repeat;} #con .login-box .login-list > li input{width:100%;height:50px;padding:0 20px 0 90px;border:1px solid #d6dae1;background-color:#fff;} #con .login-box .login-list > li input::placeholder{font-size:17px;color:#e4e4e4;font-weight:900;} #con .login-btn{display:block;max-width:350px;width:100%;height:50px;margin:40px auto 0;border:none;color:#fff;font-size:17px;font-weight:900;text-align:center;background-color:#004a96;cursor:pointer;} #con .login-form .login-txt{padding:30px 0;text-align:center;font-size:17px;color:#000;} #con .login-form .login-txt span{color:#ff8800;} #con .login-form .login-btn-list{display:block;width:465px;margin:0 auto;padding-top:20px;} #con .login-form .login-btn-list:after{display:block;content:"";clear:both;} #con .login-form .login-btn-list > li{float:left;width:50%;text-align:center;} #con .login-form .login-btn-list > li a{display:inline-block;width:90%;padding:10px 0px;border:1px solid #ccc;border-radius:20px;} @media(max-width:600px){ #con .login-box{margin:20px auto 0;padding:30px 0;} #con .login-btn{margin:20px auto 0;} } /* 사이트맵 */ #con .menu-01{} #con .menu-01 > li{padding:30px 50px;border-bottom:1px solid #d6dae1;} #con .menu-01 > li:last-child{margin-bottom:0;border-bottom:none;} #con .menu-01 > li:after{content:'';display: block;clear: both;} #con .menu-01 > li .m-tit{display:block;float:left;width:25%;font-size:30px;color:#292929;font-weight: 900;} #con .menu-01 > li .menu-02{overflow: hidden;} #con .menu-01 > li .menu-02:after{content:'';display: block;clear: both;} #con .menu-01 > li .menu-02 > li{float:left;width:25%;} #con .menu-01 > li:first-child .menu-02 > li{margin-bottom:20px;} /* #con .menu-01 > li:nth-child(4) .menu-02 > li{margin-bottom:20px;} */ #con .menu-01 > li:last-child .menu-02 > li{margin-bottom:20px;} #con .menu-01 > li .menu-02 > li > a{display:inline-block;font-size:17px;color:#8f8f8f;font-weight:500;} #con .menu-01 > li .menu-02 > li .menu-03{margin-top:20px;} #con .menu-01 > li .menu-02 > li .menu-03 > li{position:relative;margin-bottom:20px;padding-left:10px;} #con .menu-01 > li .menu-02 > li .menu-03 > li:last-child{margin-bottom:0;} #con .menu-01 > li .menu-02 > li .menu-03 > li:before{content:'';position: absolute;top:10px;left:0;width:5px;height:1px;background:#8f8f8f;} #con .menu-01 > li .menu-02 > li .menu-03 > li > a{display:inline-block;color:#8f8f8f;font-size:16px;} @media(max-width:1500px){ #con .menu-01 > li .m-tit{font-size:25px;} #con .menu-01 > li .menu-02 > li > a{font-size:15px;} #con .menu-01 > li .menu-02 > li .menu-03 > li > a{font-size:14px;} } /* donation */ #con .box-con{margin-top:100px;} #con .box-con:after{content:'';display:block;clear:both;} #con .box-con .txt-wrap{float:left;width:calc(100% - 470px);padding-right:50px;} #con .box-con .txt-wrap > .txt-01{margin-bottom:50px;} #con .box-con .txt-wrap .tit-02{} #con .box-con .txt-wrap .btn-wrap{position: relative;margin-top:-50px;;} #con .box-con .txt-wrap .box-list{margin-right:-20px;} #con .box-con .txt-wrap .box-list:after{content:'';display:block;clear:both;} #con .box-con .txt-wrap .box-list > li{float:left;width:50%;} #con .box-con .txt-wrap .box-list > li > div{height:300px;margin-right:20px;padding:35px 30px;border:1px solid #d6dae1;box-shadow: 0 3px #f2f2f2;} #con .box-con .txt-wrap .box-list > li > div > strong{display:block;font-size:20px;color:#292929;} #con .box-con .txt-wrap .list-02{margin-top:25px;} #con .box-con .img-wrap{overflow: hidden;width:470px;height:555px;background-image: url('../images/sub/sub_donation.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;} #con .box-con-02{margin-top:70px;} #con .box-con-02:after{content:'';display:block;clear:both;} #con .box-con-02 .tit-02{float:left;margin-right:120px;} #con .box-con-02 .list-03{overflow: hidden;} #con .box-con-02 .list-03 > li{margin-bottom:30px;} #con .box-con-02 .list-03 > li:last-child{margin-bottom:0;} #con .box-con-02 .list-03 > li > strong{display:block;margin-bottom:10px;font-size:20px;color:#292929;} #con .box-con-02 .list-03 > li .txt-01 > span{color:#000;font-weight:700;} #con .list-02{} #con .list-02 > li{position:relative;padding-left:13px;} #con .list-02 > li:before{content:'';position: absolute;top:16px;left:0;width:7px;height:2px;background:#989898;} #con .list-02 > li > a{color:#8f8f8f;} @media(max-width:1500px){ #con .box-con .txt-wrap{padding-right:20px;} #con .box-con .txt-wrap .box-list{margin-right:-10px;} #con .box-con .txt-wrap .box-list > li > div{margin-right:10px;padding:25px 20px;} #con .box-con .txt-wrap .list-02{margin-top:15px;} } @media(max-width:1300px){ #con .box-con{margin-top:50px;} #con .box-con .txt-wrap{float:none;width:100%;padding-right:0;} #con .box-con .txt-wrap > .txt-01 > br{display:none;} #con .box-con .txt-wrap .box-list > li > div{height:250px;} #con .box-con .txt-wrap .box-list > li > div > strong{font-size:17px;} #con .box-con .img-wrap{display:none;} } @media(max-width:1200px){ #con .box-con-02 .tit-02{margin-right:50px;} #con .list-02 > li:before{top:12px;} #con .box-con-02 .list-03 > li > strong{font-size:17px;} } @media(max-width:1000px){ #con .box-con-02{margin-top:50px;} #con .box-con-02 .tit-02{float:none;margin-right:0;margin-bottom:30px;} #con .box-con-02 .list-03 > li{margin-bottom:20px;} #con .box-con-02 .list-03 > li > strong{margin-bottom:5px;} } @media(max-width:800px){ #con .box-con .txt-wrap .box-list{margin-right:0;} #con .box-con .txt-wrap .box-list > li{float:none;width:100%;margin-bottom:10px;} #con .box-con .txt-wrap .box-list > li > div{height:auto;margin-right:0;padding:15px;} } @media(max-width:600px){ #con .box-con{margin-top:30px;} #con .box-con .txt-wrap > .txt-01{margin-bottom:30px;} #con .box-con .txt-wrap .btn-wrap{margin-top:20px;} } .pdfobject-container { width: 100%; height: 800px; margin: 0em 0 25px; } #con .coun-form{width:100%;max-width:800px;margin:0 auto;} #con .coun-form .con-box{padding:50px 0;border-top:2px solid #292929;} #con .coun-form .con-box .list{} #con .coun-form .con-box .list > li{margin-bottom:25px;} #con .coun-form .con-box .list > li:after{content:"";display:block;clear:both;} #con .coun-form .con-box .list > li > .tit{float:left;width:70px;padding-top:15px;font-size:17px;color:#292929;} #con .coun-form .con-box .list > li > .con-con{overflow:hidden} #con .coun-form .con-box .list > li:first-child > .con-con{padding-top:15px;} #con .coun-form .con-box .list > li > .con-con .in-txt{width:100%;height:50px;padding:0 15px;border:1px solid #d6dae1;} #con .coun-form .con-box .list > li > .con-con .textarea{width:100%;height:150px;padding:15px;border:1px solid #d6dae1;} #con .coun-form .fot-box{padding-top:50px;border-top:1px solid #d6dae1;text-align:center;} #con .coun-form .fot-box .coun-btn{width:350px;height:50px;border:0;font-size:17px;color:#ffffff;background-color:#004a96;cursor:pointer;} #content .radio-box{display:inline-block;cursor:pointer;margin:0 20px 0px 0;} #content .radio-box:last-of-type{margin-right:0px;} #content .radio-box input[type="radio"] {display: none;} #content .radio-box input[type="radio"]+label {font-size:14px;color: #292929;font-weight:bold;cursor:pointer;} #content .radio-box input[type="radio"]+label span {display: inline-block;width: 18px;height: 19px;margin: -2px 10px 0 0;vertical-align: middle;background-image: url(../images/custom/img_source.png);background-repeat:no-repeat;background-position:-92px -23px;cursor: pointer;transition: none;} #content .radio-box input[type="radio"]:checked+label span {background-position:-44px -100px;} @media(max-width:600px){ #con .coun-form .con-box{padding-bottom:0px;} #con .coun-form .fot-box{padding-top:25px;} #con .coun-form .fot-box .coun-btn{width:100%;} } #con .list-txt-01{margin-bottom:30px;} #con .list-txt-01.lp{padding-left:30px;} #con .list-txt-01 > li{font-size: 19px;color: #8f8f8f;line-height: 1.8;} #con .list-txt-01 > li.lt{position:relative;padding-left:25px;} #con .list-txt-01 > li.lt:before{content:"";position:absolute;left:0;top:10px;display: inline-block;width: 18px;height: 19px;margin: -2px 10px 0 0;vertical-align: middle;background-image: url(../images/custom/img_source.png);background-repeat:no-repeat;background-position:-44px -100px;cursor: pointer;transition: none;} #con .list-txt-01 > li strong{display:block;color:#0c0c0c;font-weight:500;} #con .list-txt-01 > li > ul li{font-size:16px;color:#8f8f8f;} @media(max-width:600px){ #con .list-txt-01.lp{padding-left:10px;} #con .list-txt-01 > li{font-size:16px;} #con .list-txt-01 > li > ul li{font-size:14px;} } #con .pop-modal{display:none;overflow:auto;position: fixed;top:0;right:0;bottom: 0;left: 0;z-index: 99999;background:rgba(0,0,0,0.5);} #con .pop-modal.fade{ opacity: 0;-webkit-transition: opacity 0.15s linear;transition: opacity 0.15s linear;} #con .pop-modal.fade.in {opacity: 1;} #con .pop-modal.fade .pop-lay{ -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } #con .pop-modal.in .pop-lay{ -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #con .pop-modal .pop-lay{z-index: 1050;top:0px;right: auto;left: 50%;width:1200px;margin-right: auto;margin-left: auto;padding-top:1%;padding-bottom: 30px;} #con .pop-modal .pop-lay.lay-01{width:775px;top:0;padding-top:10%;} #con .pop-modal .pop-lay .pop-h{position:relative;padding:12px 55px 12px 20px;color:#fff;font-size:23px;background:#1a2c51;} #con .pop-modal .pop-lay .pop-h .pop-close{position:absolute;right:5px;top:0;width:45px;height:100%;cursor:pointer;font-size:0;background-image:url(../images/sub/pop_close_i.png);background-repeat:no-repeat;background-position:center center;background-color:#1a2c51;} #con .pop-modal .pop-lay .pop-con{display:block;padding:20px;background:#fff;} #con .pop-modal .pop-lay .pop-con:after{display:block;content:"";clear:both;} @media screen and (max-width:1200px) { #con .pop-modal .pop-lay{width:100%;padding-top:80px;} #con .pop-modal .pop-lay .pop-h{font-size:17px;} } @media screen and (max-width: 600px) { #con .pop-modal .pop-lay.safety .pop-con{padding:15px;} } /*20201211*/ #con .professor-list{margin-right:-20px;} #con .professor-list:after{content:'';display:block;clear: both;} #con .professor-list > li{float:left;width:50%;margin-bottom:20px;} #con .professor-list > li > div{height:200px;margin-right:20px;padding:30px 35px;border:1px solid #d6dae1;} #con .professor-list > li > div:after{content:'';display:block;clear: both;} #con .professor-list > li > div .img-wrap{float:left;width:115px;height:115px;margin-top:10px;margin-right:50px;border-radius: 50%;background:#eee;} #con .professor-list > li > div .txt-wrap{overflow: hidden;} #con .professor-list > li > div .txt-wrap .name{display:block;font-weight: 500;font-size:20px;color:#292929; } #con .professor-list > li > div .txt-wrap .list{margin-top:10px;} #con .professor-list > li > div .txt-wrap .list > li{margin-bottom:5px;font-size:15px;color:#8f8f8f;} #con .professor-list > li > div .txt-wrap .list > li:last-child{margin-bottom:0;} @media(max-width:1400px){ #con .professor-list > li > div .img-wrap{margin-right:30px;} } @media(max-width:1200px){ #con .professor-list > li > div{padding:20px 25px;} #con .professor-list > li > div .txt-wrap .name{font-size:17px;} } @media(max-width:1000px){ #con .professor-list{margin-right:0;} #con .professor-list > li{float:none;width:100%;} #con .professor-list > li > div{height:auto;margin-right:0;} #con .professor-list > li > div .img-wrap{margin-top:0;} } @media(max-width:600px){ #con .professor-list > li > div{padding:10px 15px;} #con .professor-list > li > div .img-wrap{float:none;margin:0 auto 10px;} #con .professor-list > li > div .txt-wrap .name{font-size:15px;text-align: center;} #con .professor-list > li > div .txt-wrap .list > li{font-size:13px;text-align: center;} } /* osh 20220928*/ /* sub01_01 (What is CBE?) 시작*/ /* #con .con-area .cp-chart{display: flex; align-items: center;} #con .con-area .cp-chart .cpimg-box{flex: 1; margin-right: 100px;} #con .con-area .cp-chart .cp_table{flex: 1;} #con .con-area .cp-chart .table-wrap{width: 100%;} #con .con-area .cp-chart .table-wrap .table-01 th{background-color: #F8F8F8; border-top: 3px solid #1C2E70; color: #000;} #con .con-area .cp-chart .table-wrap .table-01 .st-table{background-color: #1C2E70;} #con .con-area .cp-chart .table-wrap .table-01 .st-table td{color: #fff;} #con .txt-03{text-align: center; font-size: .95rem; color: rgb(143, 143, 143); line-height: 1.8;} @media screen and (max-width: 1200px){ #con .con-area .cp-chart .cpimg-box{margin-right: 50px;} #con .con-area .cp-chart .cpimg-box > figure > img{height: 450px;} } @media screen and (max-width: 1024px){ } */ #con .con-area .cp-chart .table-wrap{min-width: 500px;} #con .con-area .cp-chart .table-wrap > table{width: 100%;} #con .con-area .cp-chart .table-wrap > table th{position:relative;padding:12px 5px;border:1px solid #bcc4d0;font-size:17px;color:#fff;font-weight:500;background-color: #F8F8F8; border-top: 3px solid #1C2E70; color: #000;} #con .con-area .cp-chart .table-wrap > table th:after{content:'';position: absolute;top:50%;right:0;width:1px;height:10px;margin-top:-5px;background:#fff;} #con .con-area .cp-chart .table-wrap > table th:last-child:after{display:none;} #con .con-area .cp-chart .table-wrap > table td{padding:25px 0;border-width:0 0 1px 1px;border-style:solid;border-color:#d6dae1;font-size:15px;color:#8f8f8f;text-align: center;} #con .con-area .cp-chart .table-wrap > table td:last-child{border-width:0 1px 1px 1px;} #con .con-area .cp-chart .table-wrap > table td.left{padding-left:45px;} #con .con-area .cp-chart{display: flex; align-items: center;} #con .con-area .cp-chart .cpimg-box{flex-grow: 1;} #con .con-area .cp-chart .cp_table{flex-grow: 1;} #con .con-area .cp-chart .table-wrap > table .st-table{background-color: #1C2E70;} #con .con-area .cp-chart .table-wrap > table .st-table td{color: #fff;} #con .txt-03{text-align: center; font-size: .95rem; color: rgb(143, 143, 143); line-height: 1.8;} @media screen and (max-width: 1200px){ #con .con-area .cp-chart .cpimg-box{margin-right: 50px;} #con .con-area .cp-chart .table-wrap > table td{padding: 20px 0;} } @media screen and (max-width: 1000px){ #con .con-area .cp-chart{flex-wrap: wrap; justify-content: center;} #con .con-area .cp-chart .cpimg-box{margin-right: 0; margin-bottom: 50px; flex-grow: 0;} #con .con-area .cp-chart .table-wrap{min-width: unset;} } @media screen and (max-width: 800px){ #con .con-area .cp-chart .table-wrap > table td{padding: 15px 10px;} } @media screen and (max-width: 600px){ #con .con-area .cp-chart .table-wrap > table th{font-size: 16px;} #con .con-area .cp-chart .table-wrap > table td{font-size: 14px;} } /* sub01_01 (What is CBE?) 끝*/ /* sub01_03 DEPARTMENT STATUS 시작*/ /* Department status*/ #con .con-area .st-wrap{display: flex; justify-content: space-around;} #con .con-area .st-list{display: flex; padding-left: 150px; width: 100%; flex-wrap: wrap;} #con .con-area .students-wrap .st-list{padding-left: 125px;} #con .con-area .st-list li{width: 15.8%; margin: 0 0 10px 10px; padding: 5px; border: 1px solid #E9E9E9; text-align: center;} #con .con-area .st-list li > span{display: block; padding-bottom: 30px;} #con .con-area .st-list li > strong{display: block; padding: 30px 0 15px 0; color: #004A96; font-size: 25px; font-weight: 900;} /* Career Status after Graduation*/ #con .con-area .graph-list-wrap{width: 100%; margin-bottom: 50px;} #con .con-area .graph-list-wrap .graph-list{display: table; width: 100%;} #con .con-area .graph-list-wrap .graph-list > li{display: table-cell; padding: 0 10px; text-align: center; table-layout: fixed;} #con .con-area .graph-list-wrap .graph-list > li > img{display: inline; max-width: 100%; line-height: 0;} /* QS Ranking History- PC version*/ #con .history-wrap{border:1px solid #E9E9E9;} #con .graph-box{display: flex; align-items:center;height:200px;padding-left:110px;} #con .graph-box .list{display: flex; flex: 1;height:100%;padding:30px 0;} #con .graph-box .list > li{flex:1; position:relative;height:100%;text-align: center;} #con .graph-box .list > li > span{display: inline-block;position:absolute;bottom:0;left:50%; width:50px; height:50px;border-radius: 50%;line-height:50px;text-align:center;color:#fff;background-color:#22367D;transform:translateX(-25px);} #con .graph-box .list > li > span::after{content:"";position: absolute; top: 50%; left: 100%; width: 300%; height:1px; border-top:2px dotted #8296A9;} #con .graph-box .list > li:nth-child(6) > span::after{display: none;} #con .graph-box.cbe-graph .list > li:nth-child(1) > span::after{transform: skewY(5deg);} #con .graph-box.cbe-graph .list > li:nth-child(3) > span::after{transform: translateY(-3px) skewY(-5deg);} #con .graph-box.cbe-graph .list > li:nth-child(4) > span::after{transform: skewY(2deg);} #con .graph-box.overall-graph .list > li:nth-child(1) > span::after{transform: translateY(-3px) skewY(-5deg);} #con .graph-box.overall-graph .list > li:nth-child(2) > span::after{transform: skewY(2deg);} #con .graph-box.overall-graph .list > li:nth-child(3) > span::after{transform: skewY(1deg);} #con .graph-box.overall-graph .list > li:nth-child(4) > span::after{transform: skewY(1deg);} #con .graph-box.overall-graph .list > li:nth-child(5) > span::after{transform: translateY(-3px) skewY(-2deg);} #con .graph-box.overall-graph .list > li > span{color:#000;background-color:#BDC1D1;} #con .graph-box .tits{font-weight: 800;} #con .graph-box.cbe-graph .tits{padding-top: 30px;} #con .graph-box.graph-caption{height:auto;border-top:1px solid #E9E9E9;} #con .graph-box .list-caption{display: flex;flex: 1;} #con .graph-box .list-caption > li{flex:1;padding:20px 0;text-align:center;} #con .graph-box .tits{width:250px;} #con .bt-bg{line-height: 0;} /* QS Ranking History- mobile version */ #con .history-wrap.mb{display: none;} #con .history-wrap.mb .graph-box .list > li > span{color: #000; text-decoration: 50px underline #22367D; background-color: unset;} #con .history-wrap.mb .graph-box.overall-graph .list > li > span{text-decoration: 50px underline #BDC1D1; background-color: unset;} #con .history-wrap.mb .graph-box .list > li > span:after{display: none;} @media screen and (max-width:1024px){ #con .con-area .st-wrap{display: block;} #con .con-area .st-list{padding-left: 0;} #con .con-area .students-wrap .st-list{padding-left: 0;} #con .con-area .st-list li{width: 48%;} #con .graph-box .list > li > span::after{width: 100%;} } @media screen and (max-width:800px){ #con .con-area .graph-list-wrap{overflow-x: scroll;} #con .con-area .graph-list-wrap .graph-list{width: 800px;} #con .history-wrap.pc{display: none;} #con .history-wrap.mb{display: block;} #con .history-wrap.mb .graph-box{width: 100%; display: flex;align-items:center;height:200px;padding-left:110px;} #con .history-wrap.mb .graph-box .list{padding-top: 0px;} #con .history-wrap.mb .graph-box .list > li{height: 100%; padding: 0 15px;} #con .history-wrap.mb .tits{width:100px; margin: 30px 0 0 30px; font-size: 15px; font-weight: 500;} #con .history-wrap.mb .graph-box{height: 120px; padding-left: 20px;} #con .history-wrap.mb .graph-box .list-caption > li{padding: 0 15px;} } @media screen and (max-width:600px){ #con .con-area .st-list li{width: 100%;} #con .history-wrap.mb .graph-box{padding-left: 0;} #con .history-wrap.mb .graph-box .list-caption > li{padding: 0 3px;} } /* sub01_03 (Department status) 끝*/ /* sub02_02_01 Research AREAS 시작*/ #con .pro-list > li .con-wrap .link-box{display: flex; justify-content: center;} #con .pro-list > li .con-wrap .btn-link{display: block; margin-right: 10px; width: 120px; height: 35px; line-height: 35px; font-size: 15px; color: #fff; font-weight: 500; background: #004a96; } #con .pro-list > li .con-wrap .btn-link.v2{background: #5a8ef5;} #con .pro-list > li .con-wrap .link-box .btn-link:last-child{margin-right: 0;} @media screen and (max-width:600px){ #con .pro-list > li .con-wrap .link-box{position: static; transform: translateX(0); justify-content: center;} } /* sub02_02_01 Research AREAS 끝*/ /*sub04_03 시작*/ #con .sub0404.v2 .concept_mb{display: none;} #con .sub0404.v2 .tree_mb{display: none;} @media screen and (max-width:800px){ #con .sub0404.v2 .concept_pc{display: none;} #con .sub0404.v2 .concept_mb{display: block;} #con .sub0404.v2 .tree_pc{display: none;} #con .sub0404.v2 .tree_mb{display: block;} } /*sub04_03 끝*/ /*sub04_05 시작*/ #con .s-tit{ display: block; text-align: left; font-weight:500; font-size:1.375rem; color:#424242} #con .accordion .tit-box{padding: 15px 35px 15px 15px; border: 1px solid #e3e3e3; border-top: 2px solid #414141; border-left: none; border-right: none; background-color: #fff; background-image:url('../images/sub/i_drop_01.png'); background-repeat: no-repeat; background-position: center right 15px; cursor: pointer;} #con .tit-box.v2{margin:0 0 30px;} #con .accordion .txt-wrap{display: none;} #con .accordion .txt-wrap .ls-box{display: block; margin-bottom: 10px; padding: 15px 25px; background-color:#f7f8f8;} #con .accordion .tit-box.active{background-image:url('../images/sub/i_drop.png');} #con .accordion .tit-box.active .s-tit{font-weight:600; color:#424242} #con .accordion .txt-wrap .ls-box div{display: flex; justify-content: space-between;} #con .accordion .txt-wrap .ls-box div a,p{color: #707071; cursor: pointer; transition: .1s ease-in-out;} #con .accordion .txt-wrap .ls-box div .st-b{color: #5e99d4;} #con .accordion .txt-wrap .ls-box div .num-l{font-size: 1.15rem;} #con .accordion .txt-wrap .ls-box div .num-ul{text-decoration: underline;} #con .accordion .txt-wrap .ls-box div .vd{padding-left: 25px; background-image: url('../images/sub/04/vd_i.png'); background-repeat: no-repeat; background-size: 15px; background-position: center left; } #con .accordion .txt-wrap .ls-box div:hover a{color: #424242;} #con .accordion .txt-wrap .ls-box div:hover p{color: #424242;} #con .accordion .txt-wrap .ls-box div:hover .st-b{color: rgb(2, 125, 248);} @media screen and (max-width:1024px) { #con .accordion .tit-box .tit{font-size: 1.25rem;} #con .accordion .txt-wrap .ls-box div{display: block;} #con .accordion .txt-wrap .ls-box div > p:first-child{margin-bottom: 10px;} } @media screen and (max-width:800px) { #con .accordion .txt-wrap{padding: 20px;} } @media screen and (max-width:600px) { #con .accordion .tit-box{padding: 10px 30px 10px 15px; background-position:center right 10px; background-size: 15px;} #con .accordion .txt-wrap .ls-box div .vd{padding-left: 0; background-image: none;} } /* sub04_05 끝 */ /* 05_02_ 시작*/ #con .table-wrap.v2 .table-01 th{background-color: #F8F8F8; color: #000;} #con .table-wrap.v2 .table-01 th.st-th{border-top: 3px solid #1C2E70;} #con .table-wrap.v2 .table-01 .st-table{background-color: #1C2E70;} #con .table-wrap.v2 .table-01 .st-table td{color: #fff;} @media screen and (max-width: 1024px){ #con .table-wrap.v2 .table-01{overflow-x: scroll;} } /* 05_02_ko 끝*/ /* 05_03_ 시작*/ #con .btn-wrap.v2 .link-btn{display: inline-block; padding-right: 25px; background-image: url(../images/sub/05/i-link-bf.png); background-repeat: no-repeat; background-position: center right; color: #8f8f8f;} #con .btn-wrap.v2 .link-btn:first-child{margin-right: 5px;} #con .btn-wrap.v2 {display: flex; justify-content: center; margin: 0; text-align: center;} #con .btn-wrap.v2 .link-btn:hover{color:#004a96; background-image: url(../images/sub/05/i-link-af.png);} /* 05_03_ 끝*/ /* QS Ranking History- v2 */ #con .ranking-wrap{display: flex; margin-bottom: 220px;} #con .ranking-wrap .rank-box{width: 50%; min-height: 300px; padding: 20px; text-align: center; border:1px solid #E9E9E9;} #con .ranking-wrap .cbe-box{margin-right: 20px;} #con .ranking-wrap .rank-box .tits{padding: 0px 15px 15px; font-weight: 800;} @media screen and (max-width:800px) { #con .ranking-wrap{display: block;} #con .ranking-wrap .rank-box{width: 100%;} #con .ranking-wrap .cbe-box{margin-bottom: 20px;} } /* QS Ranking History- v2 끝*/ /*------------------------------------------------------------------- 파일정의: 서브페이지 > sub_01_05 > txt-brackets 속성순서: 레이아웃 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타 -------------------------------------------------------------------*/ .txt-brackets {position: relative; width: 100%; margin-top: 100px; padding: 40px 20px; text-align: center; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box;} .txt-brackets::before, .txt-brackets::after {position: absolute; top: 0; content: ''; width: 40px; height: 100%; border-top: 10px solid #004a96; border-bottom: 10px solid #004a96; -webkit-box-sizing: border-box; box-sizing: border-box;} .txt-brackets::before {left: 0; border-left: 10px solid #004a96;} .txt-brackets::after {right: 0; border-right: 10px solid #004a96;} .txt-brackets p {display: block; font-weight: 500; line-height: 1.6 !important; color: #0c0c0c !important;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1200px) { .txt-brackets {margin-top: 50px; padding: 40px;} .txt-brackets p {font-size: 1rem !important;} } @media screen and (max-width: 1024px) { .txt-brackets {padding: 20px 20px;} .txt-brackets::before, .txt-brackets::after {width: 30px;} } @media screen and (max-width: 600px) { .txt-brackets::before, .txt-brackets::after {border-top: 8px solid #004a96; border-bottom: 8px solid #004a96;} .txt-brackets::before {border-left: 8px solid #004a96;} .txt-brackets::after {border-right: 8px solid #004a96;} .txt-brackets p {line-height: 1.4 !important;} } /*------------------------------------------------------------------- 파일정의: 서브페이지 > sub_01_05 > detail-box 속성순서: 레이아웃 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타 -------------------------------------------------------------------*/ #con .detail-box {margin-top:40px;} #con .detail-box .img-area {display: flex; margin: 0 -20px; flex-wrap: wrap;} #con .detail-box .img-area > li {width: 50%; padding:20px 20px;} #con .detail-box .img-area > li > .img-wrap {display: block; margin-top:0;} #con .detail-box .img-area > li > .img-wrap .img-box {overflow: hidden; position: relative; background-color:#dfdfdf;} #con .detail-box .img-area > li > .img-wrap .img-box::before {content:''; display:block; padding-top:53.6986%;} #con .detail-box .img-area > li > .img-wrap .img-box img {display: block; position:absolute; top:50%; left:50%; width:100%; height:100%; transform: translate(-50%, -50%);} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width:1024px) { #con .detail-box .img-area {margin: 0 -10px;} #con .detail-box .img-area > li {padding:10px 10px;} } @media screen and (max-width:600px) { #con .detail-box .img-area {margin: 0 -5px;} #con .detail-box .img-area > li {padding:5px 5px;} } @media screen and (max-width:425px) { #con .detail-box .img-area {margin: 0;} #con .detail-box .img-area > li {width:100%; padding:5px 0;} } /*------------------------------------------------------------------- 파일정의: 서브페이지 > sub_01_05 > chat 속성순서: 레이아웃 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타 -------------------------------------------------------------------*/ #con .chat-box {display: block;} #con .chat-box .chat-list {display:flex; margin:0 -80px; flex-wrap: wrap;} #con .chat-box .chat-list > li {width: 50%; padding:50px 80px;} #con .chat-box .chat-list > li .chat {position:relative; z-index: 10; height: 100%; border-radius: 20px; box-shadow: 0px 5px 3px 2px rgba(0,0,0,0.2);} #con .chat-box .chat-list > li .chat::before {content:''; position:absolute; bottom:-20px; left: 60px;; right:auto; z-index: -1; width:40px; height:40px; background-color:#ccc; transform: translateX(-50%) rotate(45deg); box-shadow: 0px 5px 5px 2px rgba(0,0,0,0.1);} #con .chat-box .chat-list > li:nth-child(2n) .chat::before {left:auto; right: 20px;} #con .chat-box .chat-list > li .chat .tit-box {display: flex; position:absolute; top:-24px; left:0; z-index: 99; min-width:170px; min-height: 48px; margin:0; padding:8px 22px; border-radius: 50px; background-color: #004a96; align-items: center; justify-content: center;} #con .chat-box .chat-list > li:nth-child(2n) .chat .tit-box {background-color: #59af26;} #con .chat-box .chat-list > li .chat .tit-box .chat-tit {display: inline-block; font-size: 1.2rem; font-weight: 500; line-height: 1; color: #fff !important; word-break: break-word;} #con .chat-box .chat-list > li .chat .txt-box {display: flex; position:relative; z-index: 10; width: 100%; height: 100%; min-height: 140px; padding:40px; border-radius: 20px; background-color: #f2f2f2; box-shadow: 0px -15px 15px -2px rgba(0,0,0,0.1) inset; justify-content: center; align-items: center;} #con .chat-box .chat-list > li .chat .txt-box .txt {display: block; font-size: 1.2rem; font-weight: 500; line-height: 1.2; color: #000; word-break: break-word;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width:1400px){ #con .chat-box .chat-list {margin:0 -40px;} #con .chat-box .chat-list > li {padding:50px 40px;} } @media screen and (max-width:1200px){ #con .chat-box .chat-list > li .chat .txt-box .txt {font-size: 1rem;} } @media screen and (max-width:1024px){ #con .chat-box .chat-list {margin:0 -20px;} #con .chat-box .chat-list > li {padding:40px 20px;} #con .chat-box .chat-list > li .chat::before {bottom: -15px; width:30px; height:30px;} #con .chat-box .chat-list > li .chat .tit-box {min-width:140px; min-height: 40px;} #con .chat-box .chat-list > li .chat .tit-box .chat-tit {font-size: 1rem;} #con .chat-box .chat-list > li .chat .txt-box {min-height: 160px;} } @media screen and (max-width:800px){ #con .chat-box .chat-list > li .chat .txt-box {padding:20px;} } @media screen and (max-width:600px){ #con .chat-box .chat-list {display: block; margin: 0 0 80px;} #con .chat-box .chat-list > li {width: 100%; margin-top: 65px; padding:0;} #con .chat-box .chat-list > li .chat .txt-box {min-height: 140px;} } /*------------------------------------------------------------------- 파일정의: 서브페이지 > sub_02_01 > department-list 속성순서: 레이아웃 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타 -------------------------------------------------------------------*/ #con .sub0201 .department-list {display: flex; margin: 30px -10px 0; flex-wrap: wrap;} #con .sub0201 .department-list > li {width: 25%; padding: 10px;} #con .sub0201 .department-list > li .view-box {display: block;} #con .sub0201 .department-list > li .view-box .item {display: block;} #con .sub0201 .department-list > li .view-box .img-wrap .item {position: relative; padding-top: 200px;} #con .sub0201 .department-list > li:nth-child(1) .view-box .img-wrap {background: url('../images/sub/02/sub_02_01.jpg') no-repeat center/cover;} #con .sub0201 .department-list > li:nth-child(2) .view-box .img-wrap {background: url('../images/sub/02/sub_02_02.jpg') no-repeat center/cover;} #con .sub0201 .department-list > li:nth-child(3) .view-box .img-wrap {background: url('../images/sub/02/sub_02_03.jpg') no-repeat center/cover;} #con .sub0201 .department-list > li:nth-child(4) .view-box .img-wrap {background: url('../images/sub/02/sub_02_04.jpg') no-repeat center/cover;} #con .sub0201 .department-list > li:nth-child(5) .view-box .img-wrap {background: url('../images/sub/02/sub_02_05.jpg') no-repeat center/cover;} #con .sub0201 .department-list > li:nth-child(6) .view-box .img-wrap {background: url('../images/sub/02/sub_02_06.jpg') no-repeat center/cover;} #con .sub0201 .department-list > li:nth-child(7) .view-box .img-wrap {background: url('../images/sub/02/sub_02_07.jpg') no-repeat center/cover;} #con .sub0201 .department-list > li .view-box .img-wrap .item .icon-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #con .sub0201 .department-list > li .view-box .img-wrap .item .background-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2);} #con .sub0201 .department-list > li .view-box .txt-box .item {display: block; padding: 20px 5px; font-size: 1.2rem; text-align: center; color: #fff;} #con .sub0201 .department-list > li:nth-child(1) .view-box .txt-box {background-color: #03478c;} #con .sub0201 .department-list > li:nth-child(2) .view-box .txt-box {background-color: #0c284a;} #con .sub0201 .department-list > li:nth-child(3) .view-box .txt-box {background-color: #59af26;} #con .sub0201 .department-list > li:nth-child(4) .view-box .txt-box {background-color: #8193a5;} #con .sub0201 .department-list > li:nth-child(5) .view-box .txt-box {background-color: #00bfc1;} #con .sub0201 .department-list > li:nth-child(6) .view-box .txt-box {background-color: #029563;} #con .sub0201 .department-list > li:nth-child(7) .view-box .txt-box {background-color: #deaa0a;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #con .sub0201 .department-list > li .view-box .img-wrap .item .background-box {transition:background 0.2s;} #con .sub0201 .department-list > li:nth-child(1) .view-box:focus .img-wrap .item .background-box, #con .sub0201 .department-list > li:nth-child(1):hover .view-box .img-wrap .item .background-box {background-color: rgba(3,71,140,0.9);} #con .sub0201 .department-list > li:nth-child(2) .view-box:focus .img-wrap .item .background-box, #con .sub0201 .department-list > li:nth-child(2):hover .view-box .img-wrap .item .background-box {background-color: rgba(12,40,74,0.9);} #con .sub0201 .department-list > li:nth-child(3) .view-box:focus .img-wrap .item .background-box, #con .sub0201 .department-list > li:nth-child(3):hover .view-box .img-wrap .item .background-box {background-color: rgba(89,175,38,0.9);} #con .sub0201 .department-list > li:nth-child(4) .view-box:focus .img-wrap .item .background-box, #con .sub0201 .department-list > li:nth-child(4):hover .view-box .img-wrap .item .background-box {background-color: rgba(129,147,165,0.9);} #con .sub0201 .department-list > li:nth-child(5) .view-box:focus .img-wrap .item .background-box, #con .sub0201 .department-list > li:nth-child(5):hover .view-box .img-wrap .item .background-box {background-color: rgba(0,191,193,0.9);} #con .sub0201 .department-list > li:nth-child(6) .view-box:focus .img-wrap .item .background-box, #con .sub0201 .department-list > li:nth-child(6):hover .view-box .img-wrap .item .background-box {background-color: rgba(2,149,99,0.9);} #con .sub0201 .department-list > li:nth-child(7) .view-box:focus .img-wrap .item .background-box, #con .sub0201 .department-list > li:nth-child(7):hover .view-box .img-wrap .item .background-box {background-color: rgba(222,170,10,0.9);} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width:1400px){ #con .sub0201 .department-list > li .view-box .txt-box.en {display: flex; min-height: 76px; align-items: center; justify-content: center;} }@media screen and (max-width:1000px){ #con .sub0201 .department-list {margin: 30px -5px 0;} #con .sub0201 .department-list > li {width: 50%; padding: 5px;} #con .sub0201 .department-list > li .view-box .img-wrap .item {padding-top: 140px;} #con .sub0201 .department-list > li .view-box .img-wrap .item .icon-box img {transform: scale(0.8);} } @media screen and (max-width:600px){ #con .sub0201 .department-list {display: block;} #con .sub0201 .department-list > li {width: 100%;} #con .sub0201 .department-list > li .view-box .img-wrap .item {padding-top: 120px;} #con .sub0201 .department-list > li .view-box .img-wrap .item .icon-box img {transform: scale(0.6);} #con .sub0201 .department-list > li .view-box .txt-box {font-size: 1rem;} #con .sub0201 .department-list > li .view-box .txt-box.en {min-height: auto;} } /*------------------------------------------------------------------- 파일정의: 서브페이지 > people_board > view > field-box 속성순서: 레이아웃 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타 -------------------------------------------------------------------*/ .board-wrap .people-view .con-h .img-con {display: flex; width: 132px; flex-wrap: wrap;} .board-wrap .people-view .con-h .img-con img {width: 100%;} .board-wrap .people-view .con-h .img-con .field-box {display: flex; width: 132px; margin: 10px -3px 0; flex-wrap: wrap;} .board-wrap .people-view .con-h .img-con .field-box li {width: 33.3333%; padding: 3px;} .board-wrap .people-view .con-h .img-con .field-box li a {display: block; background-color: #012953;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ .board-wrap .people-view .con-h .img-con .field-box li a {transition: background 0.2s;} .board-wrap .people-view .con-h .img-con .field-box li a:focus, .board-wrap .people-view .con-h .img-con .field-box li:hover a {background-color: #5056b8;} .board-wrap .people-view .con-h .img-con .field-box li a.ver1:focus, .board-wrap .people-view .con-h .img-con .field-box li:hover a.ver1 {background-color: #03478c;} .board-wrap .people-view .con-h .img-con .field-box li a.ver2:focus, .board-wrap .people-view .con-h .img-con .field-box li:hover a.ver2 {background-color: #5056b8;} .board-wrap .people-view .con-h .img-con .field-box li a.ver3:focus, .board-wrap .people-view .con-h .img-con .field-box li:hover a.ver3 {background-color: #59af26;} .board-wrap .people-view .con-h .img-con .field-box li a.ver4:focus, .board-wrap .people-view .con-h .img-con .field-box li:hover a.ver4 {background-color: #8193a5;} .board-wrap .people-view .con-h .img-con .field-box li a.ver5:focus, .board-wrap .people-view .con-h .img-con .field-box li:hover a.ver5 {background-color: #00bfc1;} .board-wrap .people-view .con-h .img-con .field-box li a.ver6:focus, .board-wrap .people-view .con-h .img-con .field-box li:hover a.ver6 {background-color: #029563;} .board-wrap .people-view .con-h .img-con .field-box li a.ver7:focus, .board-wrap .people-view .con-h .img-con .field-box li:hover a.ver7 {background-color: #deaa0a;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width:600px){ .board-wrap .people-view .con-h .img-con .field-box {margin: 10px auto 0; justify-content: center;} } /* ------ checkbox button ------ */ .check {display: inline-block; position: relative; min-height: 20px; padding-left: 25px; line-height: 1; vertical-align: middle; cursor: pointer;} .check > input[type="checkbox"] {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);} .check > span, .check > label {display:inline-block; line-height: 20px; font-weight: 500; font-size: 1rem; vertical-align: middle; color: #141414;} .check > label {cursor: pointer;} .check > span::before, .check > label::before {content:''; position:absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1px solid #e9e9e9; background-color: #fff; box-sizing: border-box;} .check > span::after, .check > label::after {content:''; position:absolute; top: 4px; left: 4px; width: 12px; height: 9px; border-left: 3px solid #ffffff; border-bottom: 3px solid #ffffff; opacity: 0; transform: rotate(-45deg); box-sizing: border-box;} /* focused */ .check > input[type="checkbox"]:focus + span, .check > input[type="checkbox"]:focus + label {outline: 2px dashed #141414;} .check > input[type="checkbox"]:focus:not(:focus-visible) + span, .check > input[type="checkbox"]:focus:not(:focus-visible) + label {outline: none;} .check > input[type="checkbox"]:focus + span::before, .check > input[type="checkbox"]:focus + label::before {outline: 2px dashed #141414;} .check > input[type="checkbox"]:focus:not(:focus-visible) + span::before, .check > input[type="checkbox"]:focus:not(:focus-visible) + label::before {outline: none;} /* checked */ .check > input[type="checkbox"]:checked + span::before, .check > input[type="checkbox"]:checked + label::before {border-color: #4659E3; background-color: #4659E3;} .check > input[type="checkbox"]:checked + span::after, .check > input[type="checkbox"]:checked + label::after {opacity: 1;} .check > input[type="checkbox"]:checked + span, .check > input[type="checkbox"]:checked + label {color: #4659E3;} /* disabled */ .check > input[type="checkbox"]:disabled + span::before, .check > input[type="checkbox"]:disabled + label::before {border-color: #bcbcbc; background-color: #f8f8f8;} .check > input[type="checkbox"]:disabled + span, .check > input[type="checkbox"]:disabled + label {color: #bcbcbc;} .check > input[type="checkbox"]:checked:disabled + span::before, .check > input[type="checkbox"]:checked:disabled + label::before {border-color: #bcbcbc;} .check > input[type="checkbox"]:checked:disabled + span::after, .check > input[type="checkbox"]:checked:disabled + label::after {border-color: #bcbcbc;} .check-list {display: block;} .check-list > li {display: block; margin-bottom: 5px;} .check-list > li:last-child {margin-bottom: 0;}