/* 공통 */ body{width: 100%; overflow: hidden;} #sWrap {padding:120px 0 150px; position: relative; font-family:'Pretendard', sans-serif;} .rtTxt p {font-size:18px; line-height: 1.35;} /* sVisual */ .sVisual{position:relative; height:460px; background-size:cover; display:flex; align-items:center; justify-content:center; z-index:1; margin-top:150px; overflow: hidden;} .sVisual::before{position:absolute; content:''; display:block; width:100%; height:1px; background:#ededed; left:0; top:-50px;} .sVisual::after{position:absolute; content:''; display:block; width:100%; height:calc(100% + 170px); background:#fff; left:0; top:-150px; z-index:-1;} .s_visual_bg{position:absolute; width:94%; height:100%; margin:0 auto; overflow:hidden; background:#000;} .s_visual_bg img{width: 100%; opacity:.4;} .subTitle{position:absolute; left:15%; top:50%; width:92%; transform: translateY(-50%); animation: blur 3s both;} .subTitle .sTit{color: #fff; font-weight:500; font-size:23px; line-height:1; margin-bottom:20px;} .subTitle .bTit{color: #fff; font-weight:800; font-size:53px; line-height:1.15;} #sloca{position:absolute; right:0; bottom:0; padding: 25px 75px 15px 0; background:#fff; z-index:1; animation: up 1s 1s both;} #sloca::before{position:absolute; content:''; display:block; width:100px; height:100%; background:#fff; left:-50px; top:0; transform: skewX(-30deg);} #sloca .loc{position:relative; display:flex; color:#261f21; align-items:center;} #sloca .loc > li{position:relative; display:flex; align-items:center;} #sloca .loc > li:not(:first-child) i{font-size:15px; margin:0 25px;} #sloca .loc > li a{color:#261f21;} #sloca .loc > li a i{padding-right: 2.5px;} #sloca .loc > li span{font-size:16px; line-height:1; letter-spacing:-0.025em;} /* sVisual-흰배경 수정 */ .sVisual{height:280px; margin-top:100px;} .sVisual span.point-bar{position:absolute; display:block; content:''; bottom:0; left:-50px; width:1800px; height:4px; background:url("/images/sub/sTop_bar.jpg") no-repeat; z-index:1; animation: up 1s 1s both;} .sVisual::before{top:0; z-index: 5;} .sVisual::after{position:absolute; content:''; display:block; width:100%; height:calc(100% + 170px); background:#fff; left:0; top:-150px; z-index:-1;} .s_visual_bg{background:#fff; overflow: inherit; width: 100%;} .s_visual_bg img{opacity:0; display:none} .subTitle{position:relative; left:0;max-width:1600px; top:0; transform: inherit;} .subTitle .sTit{color: #333; font-size:22px; margin-bottom:15px;} .subTitle .bTit{color: #222; font-weight:600; font-size:48px; line-height:1.08;} #sloca{background:#004da3; padding:20px 75px 20px 0;} #sloca::before{background:#004da3;} #sloca::after{position:absolute; content:''; display:block; width:100%; height:100%; background:#004da3; right:-50%; top:0; z-index:-1;} #sloca .loc{color:#f3f5fb;} #sloca .loc > li a{color:#f3f5fb;} /* 모션 */ .sVisual.ani .s_visual_bg img{transform:scale(1.15);} .sVisual.ani.in-view .s_visual_bg img{transform:scale(1); transition:all 2.5s;} @keyframes up{ 0%{bottom: -30px; opacity: 0;} 100%{bottom: 0%; opacity: 1;} } @keyframes blur{ 0%{filter:blur(15px); opacity: 0;} 100%{filter:blur(0); opacity: 1;} } @media (max-width: 1500px){ #sWrap {padding:160px 0;} .stit{margin-bottom:80px;} .stit p.sCont-stitle{font-size:19px; margin-bottom:20px;} .stit h2.sCont-title{font-size:42px;} } @media (max-width: 1200px){ #sWrap {padding:120px 0;} .sVisual{height:260px;} .subTitle .bTit {font-size:32px;} .stit{margin-bottom:60px;} .stit p.sCont-stitle{font-size:18px; margin-bottom:15px;} .stit h2.sCont-title{font-size:38px;} } @media (max-width: 960px){ #sWrap {padding:100px 0;} .stit{margin-bottom:50px;} .stit p.sCont-stitle{font-size:18px; margin-bottom:15px;} .stit h2.sCont-title{font-size:35px;} .sVisual{height:220px; margin-top:80px;} .s_visual_bg img{height:100%;} .subTitle .bTit {font-size:28px;} #sloca{padding:12px 35px 12px 0;} #sloca::before{width:100px; left:-22px;} #sloca .loc > li:not(:first-child) i{font-size:12px; margin:0 15px;} #sloca .loc > li a i{padding-right: 2.5px;} #sloca .loc > li span{font-size:14px;} } @media (max-width: 560px){ #sWrap {padding:80px 0;} .sVisual{height:220px; margin-top:70px;} .subTitle{bottom:70px;} .subTitle .bTit {font-size:26px;} .stit{margin-bottom:40px;} .stit p.sCont-stitle{font-size:17px; margin-bottom:10px;} .stit h2.sCont-title{font-size:32px;} } @media (max-width: 480px){ .sVisual, .s_visual_bg{height:240px;} .subTitle{bottom:70px;} } /* 서브 네비게이션 */ .sub_menu{position:absolute;width:90%; max-width: 1400px; z-index:10; box-shadow: 0 16px 16px rgb(0 0 0 / 3%); border-radius: 60px;height:70px;background:rgb(255 255 255 / 30%); left: 50%; transform: translateX(-50%); bottom: 15px;} .sub_menu .vNav{height: 100%;} .sub_menu .vNav ul{text-align:center;margin:0 auto;display:flex;align-items:center;justify-content:center;height: 100%; padding:6px;} .sub_menu .vNav ul li{position:relative; height:100%;} .sub_menu .vNav ul li a{ padding:0px 35px; line-height:1; display:flex; align-items:center; justify-content:center; font-size:19px; position:relative; font-weight:400; word-break:keep-all; color:#fff; height:100%; } .sub_menu .vNav ul li a i{margin:0 0 3px 5px;} .sub_menu .vNav ul li > a{transition:all ease .3s;} .sub_menu .line{opacity:0; display:inline-block; z-index:1; position:absolute; left:0; top:-1px; width:100px; height:2px; background:none;} .sub_menu .m_sub_menu{position:relative; z-index:990;} .sub_menu .m_sub_menu .btn_s_menu{border:0; width:100%; height:40px; background:rgba(0,0,0,0.4);} .sub_menu .m_sub_menu .btn_s_menu > span{color:#fff;} .sub_menu .m_sub_menu .s_menu{display:none; padding:2%; box-shadow:0px 40px 40px 0px rgb(0 0 0 / 15%); background:#fff; opacity:0.95;} .sub_menu .m_sub_menu .s_menu li{} .sub_menu .m_sub_menu .s_menu li a{display:block; padding:1.5%; width:100%; text-align:center; font-size:15px; color:#000;} .sub_menu .m_sub_menu i{color:#fff;} .sub_menu #page{display:none;} .sub_menu .vNav ul li.active{background:#d00065; border-radius:60px;} .sub_menu .vNav ul li.active a{color:#fff; font-weight:600;} .sub_menu .vNav ul li:hover > a{color:#fff; text-decoration: underline;} @keyframes strach { 0% {transform:scaleX(0);} 100% {transform:scaleX(1);} } @media (max-width: 1024px){ .sub_menu{height:70px;} .sub_menu .vNav ul li a{padding:0px 20px; font-size:17px;} .sub_menu .vNav ul li > a:after{width:5px; height:5px; top:30px;} .sub_menu .vNav ul li:hover > a:after{top:20px;} } @media (max-width: 767px){ .sub_menu{height:50px;} .sCont .sCont-title{padding-bottom:30px; font-size:28px;} .sCont{padding:40px 0;} .sub_menu{display:none;} } @media (min-width:641px){ /*.sub_menu .m_sub_menu{display:none;}*/ } @media (max-width: 640px){ /*.sub_menu .vNav{display:none!important;} .sub_menu{top:calc(100% - 40px);}*/ } /* 서브공통 */ .contTit + .contTit-s, .contTit + .contTit-ss{margin-top:0;} .cont-sec{position:relative;} .cont-sec + .cont-sec{margin-top:100px;} .cont-sec:nth-child(1){padding:0;} .cont-sec .s-cont{position:relative;} .sub-con{position:relative;} .sub-con + .sub-con{margin-top:100px;} .cont-sec.bod-top{padding-top:100px; border-top:1px solid #ddd;} .img_wrap{position:relative; display:block; overflow:hidden; margin:0 auto;} .img_wrap img{width:100%;} .con-tit{position:relative; margin-bottom:30px; margin-top:10px;} .con-tit p.tit{line-height:1;} .con-tit.center{text-align:center;} #main_top { position:fixed ;bottom:20px; right:20px; width:50px; height:50px; border-radius:50%; border:1px solid #2f1812; background:rgba(255,255,255,0.5); font-size:17px; font-weight:600; color:#2f1812; line-height:50px; text-align:center; z-index:90;} #main_top:hover{border:none; background:#2f1812; color:#fff;} .txt-fleft .tf-con{display:flex; justify-content:space-between;} .txt-fleft .tf-con + .tf-con{margin-top:50px; padding-top:50px;} .txt-fleft .tf-con .tf-left{width:20%;} .txt-fleft .tf-con .tf-right{width:60%;} .txt-fleft .tf-con .tf-left h2{font-size:42px; font-weight:700; color:#222; word-break:keep-all;} .txt-fleft .tf-con .f18{font-size:18px; font-weight:400; color:#333;} .txt-fleft .tf-con .Valu-chart{margin-top:15px;} .txt-fleft .tf-con .tf-left.ani{transform:translateX(20%); opacity:0;} .txt-fleft .tf-con .tf-left.ani.in-view{opacity:1; transform: unset;} .s-tit{position:relative; color:#111; margin-bottom:30px;} .s-tit.s-tit-cen{text-align:center; margin-bottom:35px;} .s-tit h2{position:relative; font-size:38px; font-weight:700; letter-spacing:-0.025em; line-height:1;} .s-tit p{position:relative; font-size:19px; font-weight:400; letter-spacing:-0.025em; line-height:1.45; margin-top:15px;} .s-tit p.txt-p{margin-top:30px;} .s-tit p.txt-color{position:relative; font-size:25px; font-weight:600; color:#004da3; letter-spacing:-0.025em; line-height:1.45; margin-top:15px; padding-top:10px; } .s-tit p.txt-color::before{position:absolute; content:''; display:block; width:40px; height:2px; top:0; left:0; background:#ddd;} .s-tit p.txt-p b{} .s-tit p{} .s-tit.st-flex{display: flex; justify-items: flex-start; justify-content: space-between;} .s-tit.st-flex h2{width:30%; line-height:1.2;} .s-tit.st-flex p{width:50%; margin-top:0;} @media (max-width: 1600px){ .s-tit h2{font-size:34px;} .s-tit p{font-size:19px; margin-top:15px;} .s-tit p.txt-p{margin-top:30px;} .s-tit p.txt-color{font-size:25px; margin-top:15px; padding-top:10px; } .s-tit.st-flex h2{width:30%;} .s-tit.st-flex p{width:50%;} } @media (max-width: 1340px){ } @media (max-width: 1080px){ .sub-con + .sub-con{margin-top:70px;} .s-tit h2{font-size:28px;} .s-tit p{font-size:17px; margin-top:15px;} .s-tit p.txt-p{margin-top:25px;} .s-tit p.txt-color{font-size:22px; margin-top:15px; padding-top:10px; } .s-tit.st-flex h2{width:30%;} .s-tit.st-flex p{width:50%;} } @media (max-width: 960px){ } @media (max-width: 860px){ .sub-con + .sub-con{margin-top:50px;} .s-tit{margin-bottom:20px;} .s-tit.s-tit-cen{margin-bottom:25px;} .s-tit p.txt-p{margin-top:15px;} .s-tit.st-flex{flex-direction: column;} .s-tit.st-flex h2{width:100%;} .s-tit.st-flex p{width:100%;} } @media (max-width: 560px){ } @media (max-width: 440px){ } /* 테이블 */ table{width:100%; border-collapse:collapse; border-spacing:0;} .table{position:relative; width:100%; background-color:#fff; border-top:2px solid #555; line-height:1.6;} .table:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#F7F7F7;} .table.fixed{table-layout:fixed;} .table .caption{display:none;} .table.text_center tbody tr td{text-align:center;} .table.text_left tbody tr td{text-align:left;} .table.text_left tbody tr th,.table.text_left thead tr th{text-align:center;} .table.break tbody td,.table.break thead th,.table.break tbody td,.table.break tbody th{word-break:break-all;} .table thead th{padding:17px 15px; border:1px solid #cdcdcd; border-bottom:1px solid #cdcdcd; background-color:#f6f6f6; color:#333; font-weight:500; text-align:center;} .table tbody th strong{font-size:17px; font-weight:600;} .table thead th:first-child{border-left:none;} .table thead th:last-child{border-right:none;} .table tbody th, .table tfoot th{background-color:#fafafa; font-weight:500; color:#555;} .table tbody th, .table tbody td, .table tfoot th, .table tfoot td{padding:17px 20px; border-bottom:1px solid #e9e9e9; border-right:1px solid #e9e9e9; font-weight:400; color:#555; word-break:keep-all;} .table tbody th{/*font-size:16px;*/ color:#333; font-weight:400;} .table tbody td{/*font-size:16px;*/} .table tbody td.left{text-align:left; padding-left:25px;} .table tfoot td:first-child{border-left:none;} .table tbody tr th:last-child{border-right:none;} .table td:last-child{border-right:none;} .table td[rowspan]:first-child{border-right:1px solid #e0e1e3;} .table tbody th + td, .table tbody td + td, .table tfoot td{border-left:1px solid #d5d8dd;} .table tbody td, .table tfoot td{text-align:center;} .table td.color-1{background:#f1f7fd;} .table td.color-2{background:#edfbf2;} .tb-tit{font-size:18px; font-weight:500; color:#444;} .table td.txt-center{text-align:center;} .table td.txt-left{text-align:left;} .table tbody td p{position:relative; padding-left:10px;} .table tbody td p::before{position:absolute; content:''; display:block; width:4px; height:4px; background:#ddd; border-radius:50%; left:0; top:12px;} /* 반응형 박스 */ .respo-table .m-block{display:none;} @media (max-width: 767px){ .table.respo-table{border-top:0;} .respo-table thead{display:none;} .respo-table .m-clear{display:none;} .respo-table .m-top-th{display:none;} .respo-table .m-block{display:block;} .respo-table .m-tit{display:block; background:#133051; color:#fff; font-size:14px; padding:6px;} .respo-table .m-tit br{display:none;} .respo-table .m-block br{display:none;} .respo-table tbody tr{display:block; margin:0 0 0.7em 0;} .respo-table tbody tr td{text-align:left; display:block; padding:0.8em; font-size:14px; line-height:1.5; border-top:0;} .respo-table tbody tr td br{display:none;} } /*모바일 가로 스크롤*/ .table_wrap{position:relative;} .table_wrap .table_prev_mo{display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:95;} .table_wrap .table_prev_mo ul{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} .table_wrap .table_prev_mo ul:after{content: ''; display:block; clear:both;} .table_wrap .table_prev_mo ul li{float:left;} .table_wrap .table_prev_mo ul li p{font-size:20px; font-weight:700; color:#fff; padding:0!important;} .table_wrap .table_prev_mo ul li i{margin-top:4px; font-size:12px; color:#fff; animation:prevarrow .5s ease-in infinite alternate; padding-left:10px;} p.mo_hide{display:none; color:#888; text-align:center; margin-top:10px;} .table_wrap + .list-point{margin-top:20px;} @media (max-width:1000px){ .dbstg{display: block;} } @media (max-width:767px){ .table_wrap{width:100%; overflow-x:auto; white-space:nowrap; padding-bottom:20px;} /*.table_con_wrap table{width:100%; max-width:767px; border-top:2px solid #333; border-bottom:1px solid #333;}*/ .table_wrap .table_prev_mo{display:block;} p.mo_hide{display:block;} } @media (max-width:420px){ .table_wrap .table_prev_mo ul li p{font-size:18px;} } /* ------------------------------ sub1_1 : 인사말 ------------------------------ */ #Greet{position:relative;} #Greet .Gtop{position:relative; overflow:hidden; display:flex; justify-content: flex-start; gap:80px; padding:0 50px;} #Greet .Gtop .bg{width:600px;} #Greet .Gtop .bg img{width:100%;} #Greet .Gtop .txt{ position:relative; padding-top:110px;} #Greet .Gtop .txt h2{ position:relative; font-size:48px; line-height:1.3; color:#111; letter-spacing:-0.02em;} #Greet .Gtop .txt h2 b{font-weight:900; color:#004da3;} #Greet .Gtop .txt h2 img{display:block; height:50px; margin-bottom:10px;} #Greet .Gtop .ceo{position:relative; font-size:26px; margin-top:40px; color:#333;} #Greet .Gtop .ceo small{display:block; font-size:20px; margin-bottom:5px;} #Greet .Gtop .ceo b{padding-left:10px; font-size:36px; font-weight:700; letter-spacing:0.2em; color:#111; } #Greet .Gbot{position:relative; padding:70px 100px; margin:-80px auto 0; box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1); background:#fff; } #Greet .Gbot .txt{font-size:20px; line-height:1.5; color:#111; font-weight:400; letter-spacing:-0.02em;} #Greet .Gbot .sign{margin-top:40px; font-size:20px; line-height:1;} #Greet .Gbot .sign span{font-family: 'KCCImkwontaek'; font-size:1.5em;} /* 모션 */ #Greet .Gtop.ani .bg{transform:scale(0.92); opacity:0;} #Greet .Gtop.ani.in-view .bg{transform:scale(1); opacity:1; transition:all 1s;} @media (max-width: 1600px){ #Greet .Gtop{gap:60px; padding:0 30px;} #Greet .Gtop .bg{width:500px;} #Greet .Gtop .txt{padding-top:90px;} #Greet .Gtop .txt h2{font-size:42px;} #Greet .Gtop .txt h2 img{height:46px; margin-bottom:8px;} #Greet .Gtop .ceo{font-size:23px; margin-top:35px;} #Greet .Gtop .ceo small{font-size:20px;} #Greet .Gtop .ceo b{font-size:32px;} } @media (max-width: 1340px){ #Greet .Gtop{gap:40px; padding:0 30px;} #Greet .Gtop .bg{width:400px;} #Greet .Gtop .txt{padding-top:50px;} #Greet .Gtop .txt h2{font-size:34px;} #Greet .Gtop .txt h2 img{height:40px; margin-bottom:5px;} #Greet .Gtop .ceo{font-size:21px; margin-top:30px;} #Greet .Gtop .ceo small{font-size:19px;} #Greet .Gtop .ceo b{font-size:27px;} #Greet .Gbot{padding:50px 70px; margin:-50px auto 0;} #Greet .Gbot .txt{font-size:18px;} #Greet .Gbot .sign{margin-top:30px; font-size:18px;} } @media (max-width: 1080px){ #Greet .Gtop{gap:25px; padding:0 15px;} #Greet .Gtop .bg{width:320px;} #Greet .Gtop .txt{padding-top:30px;} #Greet .Gtop .txt h2{font-size:28px;} #Greet .Gtop .txt h2 img{height:36px; margin-bottom:5px;} #Greet .Gtop .ceo{font-size:18px; margin-top:30px;} #Greet .Gtop .ceo small{font-size:18px;} #Greet .Gtop .ceo b{font-size:25px;} #Greet .Gbot{padding:35px 50px; margin:-30px auto 0;} #Greet .Gbot .txt{font-size:17px;} #Greet .Gbot .sign{margin-top:20px; font-size:17px;} } @media (max-width: 960px){ } @media (max-width: 760px){ #Greet .Gtop{flex-direction: column-reverse; align-items: center;} #Greet .Gtop .bg{width:280px;} #Greet .Gtop .txt{text-align:center;padding-top:30px;} #Greet .Gtop .txt h2{font-size:24px;} #Greet .Gtop .txt h2 img{height:32px; margin:0 auto;} #Greet .Gbot .sign span{display: block; margin-top:4px;} } @media (max-width: 560px){ } @media (max-width: 440px){ } /* ------------------------------ sub1_2 : 줄기세포 소개 ------------------------------ */ #Int .vdo_wr{position:relative; width:100%; height:680px; overflow:hidden;} #Int .vdo_wr .video{width:100%;} #Int ul.Int-list {display: flex; justify-content: space-between; flex-wrap: wrap;} #Int ul.Int-list li{position:relative; width: calc((100% - 100px) / 3);} #Int ul.Int-list li:nth-child(2){margin-top:180px;} #Int ul.Int-list li .img-box{position:relative; width:100%; overflow:hidden;} #Int ul.Int-list li .img-box img{width:100%;} #Int ul.Int-list li .Itxt{position:relative; margin-top:25px; color:#333; letter-spacing:-0.01em; line-height:1.25;} #Int ul.Int-list li .Itxt big{display:block; font-size:26px; font-weight:700;} #Int ul.Int-list li .Itxt small{display:block; font-size:18px; font-weight:400; margin-top:10px;} #Int ul.Irch-list {display: flex; flex-wrap: wrap; justify-content: space-between; gap:50px;} #Int ul.Irch-list li {position: relative; padding:45px 10px; width: calc((100% - 50px) / 2);} #Int ul.Irch-list li a{position:absolute; width:100%; height:100%; left:0; top:0; z-index:1;} #Int ul.Irch-list li::before{position:absolute; content:''; display:block; width:100%; height:1px; background:#ccc; left:0; top:0;} #Int ul.Irch-list li::after{position:absolute; content:''; display:block; width:0; height:2px; background:#004da3; left:0; top:0; z-index:1; transition: all .3s;} #Int ul.Irch-list li .ico-box{width:95px; height:95px; overflow:hidden;} #Int ul.Irch-list li .ico-box img{width:100%;} #Int ul.Irch-list li .Irtxt{position:relative; width:100%; margin-top:25px; color:#333; letter-spacing:-0.01em; line-height:1.25;} #Int ul.Irch-list li .Irtxt big{display:block; font-size:26px; font-weight:700;} #Int ul.Irch-list li .Irtxt big span{font-size:28px; font-family:'Frank Ruhl Libre';} #Int ul.Irch-list li .Irtxt small{display:block; font-size:20px; font-weight:400; margin-top:10px;} #Int ul.Irch-list li .Ir-btn{position:absolute; right: 10px; bottom: 0; font-size:18px; font-weight:500; color:#333; padding-right:30px; font-family:'Frank Ruhl Libre'; transition: all .3s;} #Int ul.Irch-list li .Ir-btn i{position:absolute; right:5px; top:2px; transition: all .3s;} /* 모션 및 hover */ #Int .vdo_wr.ani::before{position:absolute; content:''; display:block; width:50%; height:100%; background:#fff; left:0; top:0; z-index:1;} #Int .vdo_wr.ani::after{position:absolute; content:''; display:block; width:50%; height:100%; background:#fff; right:0; top:0; z-index:1;} #Int .vdo_wr.ani.in-view::before{width:0; opacity:.8; transition: all 1.6s;} #Int .vdo_wr.ani.in-view::after{width:0; opacity:.8; transition: all 1.6s;} #Int ul.Int-list.ani li .img-box::before{position:absolute; content:''; display:block; width:100%; height:100%; background:#fff; left:0; bottom:0; z-index:1;} #Int ul.Int-list.ani.in-view li .img-box::before{height:0; transition: all .8s;} #Int ul.Int-list.ani.in-view li:nth-child(2) .img-box::before{transition-delay:.4s;} #Int ul.Int-list.ani.in-view li:nth-child(3) .img-box::before{transition-delay:.8s;} #Int ul.Irch-list li:hover::after{width:100%; transition: all .3s;} #Int ul.Irch-list li:hover .Ir-btn{color:#004da3; transition: all .3s;} #Int ul.Irch-list li:hover .Ir-btn i{right:0; transition: all .3s;} @media (max-width: 1600px){ #Int .vdo_wr{height:640px;} } @media (max-width: 1340px){ #Int .vdo_wr{height:600px;} #Int ul.Int-list li{width: calc((100% - 70px) / 3);} #Int ul.Int-list li:nth-child(2){margin-top:150px;} #Int ul.Int-list li .Itxt{margin-top:25px;} #Int ul.Int-list li .Itxt big{font-size:26px;} #Int ul.Int-list li .Itxt small{font-size:18px; margin-top:10px;} #Int ul.Irch-list {gap:50px;} #Int ul.Irch-list li {padding:45px 10px; width: calc((100% - 50px) / 2);} #Int ul.Irch-list li .ico-box{width:85px; height:85px;} #Int ul.Irch-list li .Irtxt{margin-top:25px;} #Int ul.Irch-list li .Irtxt big{font-size:24px;} #Int ul.Irch-list li .Irtxt big span{font-size:23px;} #Int ul.Irch-list li .Irtxt small{font-size:20px; margin-top:10px;} #Int ul.Irch-list li .Ir-btn{font-size:18px; padding-right:30px;} } @media (max-width: 1080px){ #Int .vdo_wr{height:480px;} #Int ul.Int-list li{width: calc((100% - 70px) / 3);} #Int ul.Int-list li:nth-child(2){margin-top:150px;} #Int ul.Int-list li .Itxt{margin-top:20px;} #Int ul.Int-list li .Itxt big{font-size:23px;} #Int ul.Int-list li .Itxt small{font-size:17px; margin-top:8px;} #Int ul.Irch-list {gap:30px;} #Int ul.Irch-list li {padding:35px 10px; width: calc((100% - 30px) / 2);} #Int ul.Irch-list li .ico-box{width:75px; height:75px;} #Int ul.Irch-list li .Irtxt{margin-top:25px;} #Int ul.Irch-list li .Irtxt big{font-size:24px;} #Int ul.Irch-list li .Irtxt big span{font-size:22px;} #Int ul.Irch-list li .Irtxt small{font-size:19px; margin-top:10px;} #Int ul.Irch-list li .Ir-btn{font-size:18px; padding-right:30px;} } @media (max-width: 960px){ #Int .vdo_wr{height:380px;} #Int ul.Int-list li{width:100%; display: flex; justify-content: flex-start;} #Int ul.Int-list li:nth-child(2){margin-top:20px; margin-bottom:20px; flex-direction: row-reverse;} #Int ul.Int-list li .img-box{width:315px;} #Int ul.Int-list li .Itxt{margin-top:40px; width:calc(100% - 315px); padding:0 35px;} #Int ul.Int-list li .Itxt big{font-size:23px;} #Int ul.Int-list li .Itxt small{font-size:17px; margin-top:8px;} #Int ul.Irch-list {gap:30px;} #Int ul.Irch-list li {padding:35px 10px; width:100%;} #Int ul.Irch-list li .ico-box{width:75px; height:75px;} #Int ul.Irch-list li .Irtxt{margin-top:25px;} #Int ul.Irch-list li .Irtxt big{font-size:24px;} #Int ul.Irch-list li .Irtxt big span{font-size:22px;} #Int ul.Irch-list li .Irtxt small{font-size:19px; margin-top:10px;} #Int ul.Irch-list li .Ir-btn{font-size:18px; padding-right:30px;} } @media (max-width: 760px){ #Int .vdo_wr{height:320px;} #Int ul.Int-list li .img-box{width:260px;} #Int ul.Int-list li .Itxt{margin-top:30px; width:calc(100% - 260px);} #Int ul.Int-list li .Itxt big{font-size:21px;} #Int ul.Int-list li .Itxt small{font-size:16px;} #Int ul.Irch-list li {padding:30px 10px;} #Int ul.Irch-list li .ico-box{width:60px; height:60px;} #Int ul.Irch-list li .Irtxt{margin-top:20px;} #Int ul.Irch-list li .Irtxt big{font-size:23px;} #Int ul.Irch-list li .Irtxt big span{font-size:21px;} #Int ul.Irch-list li .Irtxt small{font-size:18px; margin-top:10px;} #Int ul.Irch-list li .Ir-btn{font-size:17px; padding-right:25px;} } @media (max-width: 560px){ #Int .vdo_wr{height:280px;} #Int ul.Int-list li .img-box{width:180px;} #Int ul.Int-list li .Itxt{margin-top:15px; width:calc(100% - 180px); padding:0 8px;} #Int ul.Int-list li .Itxt big{font-size:21px;} #Int ul.Int-list li .Itxt small{font-size:16px;} } @media (max-width: 440px){ #Int .vdo_wr{height:260px;} } /* ------------------------------ sub1_3 : 오시는길 ------------------------------ */ #Map{position:relative;} #Map .map-wrap{overflow:hidden;box-shadow:0 10px 20px rgba(98,97,108,0.2);z-index:0;position: relative;} #Map .map-wrap .map{overflow:hidden; position:relative;} #Map .map-info{z-index: 5; position:relative;padding:45px 70px;background: #fff;text-align:left;backdrop-filter: blur(10px);border-top:0;margin-top:-1px;} #Map .map-info .map-tit{margin-bottom:40px;} #Map .map-info .map-tit h2{font-size:28px; color:#111; font-weight:700; position:relative; line-height:1.1;} #Map .map-info .map-txt{position:relative;} #Map .map-info .map-txt dl{display:inline-flex; align-items:flex-start; margin-right:65px;} #Map .map-info .map-txt dl:first-child{width:100%; margin-right:0; margin-bottom:15px;} #Map .map-info .map-txt dt{box-sizing:border-box;width:95px;font-size:18px;color: #212121;font-weight: 500;display:flex;word-break:keep-all;align-items:center;} #Map .map-info .map-txt dt i{margin-right:5px;} #Map .map-info .map-txt dd{width:calc(100% - 95px);font-size:17px;font-weight: 400;color: #212121;} #Map .map-info .map-txt dd a{color:#555;} #Map .map-info .map-btn{ position:absolute; right:60px; top:50px; padding:20px 30px 20px 35px; width:240px; background:#004da3; font-size:17px; font-weight:normal; color:#fff; letter-spacing:0.2px; line-height:1; display:inline-flex; justify-content:space-between; align-items:center; box-shadow:0 10px 15px rgba(0,0,0,0.05); cursor:pointer; transition:.3s; } #Map .map-info .map-btn:hover{background:#0f355f; padding:20px 35px 20px 35px;} @media (max-width: 767px){ #Map .map-wrap .map{height:300px;} #Map .map-info{margin-bottom:20px; padding:20px;} #Map .map-info .map-tit{margin-bottom:20px;} #Map .map-info .map-tit big{width:240px;} #Map .map-info .map-txt dt{width:70px; font-size:16px;} #Map .map-info .map-txt dd{width:calc(100% - 70px); font-size:15px; line-height:1.4;} #Map .map-info .map-btn{position:relative; right:auto; top:auto; padding:15px 25px; width:100%; font-size:16px; display:flex; margin-top:20px;} } /* ------------------------------ sub3_1~4 : 연구분야 ------------------------------ */ #Rch{position:relative;} #Rch .s-tit h2 i{font-size:0.85em; font-weight:500; color: #004da3; padding-right:5px; transform: translateY(-3px); display: inline-block;} #Rch .Rch-img{position:relative; width:100%;} #Rch .Rch-img img{width:100%;} #Rch .Rch-con{position:relative; margin-top:60px;} #Rch .Rch-con dl{position:relative; padding:30px 5px 60px; border-top:1px solid #ddd; display:flex; flex-wrap: wrap; justify-content: space-between;} #Rch .Rch-con dl dt{position:relative; width:55%; font-size:32px; font-weight:600; color:#111;} #Rch .Rch-con dl dt em{font-family:'Frank Ruhl Libre'; font-weight:700; font-size:52px; line-height: 1; letter-spacing:-0.02em; opacity:.1; padding-right:8px;} #Rch .Rch-con dl dt img{width:60px; padding-right:8px; filter: invert(19%) sepia(91%) saturate(1735%) hue-rotate(197deg) brightness(97%) contrast(105%);} #Rch .Rch-con dl dd{position:relative; width:45%; font-size:18px; font-weight:400; color:#111; line-height:1.45;} #Rch .Rch-card{position:relative; display:flex; flex-wrap: wrap; justify-content: space-between; } #Rch .Rch-card li{position:relative; width:49%; border: 1px solid #ddd; overflow:hidden; transition: 0.3s; margin-bottom:2%;} #Rch .Rch-card li::before{position:absolute; content:''; display:block; width:100%; height:100%; background: no-repeat url('/images/sub/prof_rch_bg.png') 45% 0%; z-index: -2; background-size: cover; opacity: .05;} #Rch .Rch-card li .inner{position:relative; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding:20px 20px 0 20px;} #Rch .Rch-card li a{position:absolute; width:100%; height:100%; display:block; left:0; top:0; z-index:5;} #Rch .Rch-card li .img-box{position:relative; width:230px; overflow:hidden; background:#ddd; z-index:1;} #Rch .Rch-card li .img-box img{width:100%; transition: 0.3s;} #Rch .Rch-card li .right{position:relative; width:calc(100% - 230px); padding:15px;} #Rch .Rch-card li .right .r-top{position:relative;} #Rch .Rch-card li .right .r-top .rt-txt{position:relative; padding-left:10px; transition: 0.3s;} #Rch .Rch-card li .right .r-top .rt-txt h2{font-size:36px; font-weight:700; color:#111; line-height: 1;} #Rch .Rch-card li .right .r-top .rt-txt h2 small{position:relative; font-weight:500; font-size:20px; opacity:.8;} #Rch .Rch-card li .right .r-top .rt-txt h2.name-eng{font-family:'Frank Ruhl Libre'; font-weight:500; font-size:27px; margin-top:5px; opacity:.9;} #Rch .Rch-card li .right .r-bot{position: relative; display:block; margin-top:20px; padding-top:15px; padding-left:10px; border-top:1px dashed #ddd;} #Rch .Rch-card li .right .r-bot dl{position:relative;} #Rch .Rch-card li .right .r-bot dl dd{position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap:6px; row-gap:0; padding-left:25px;} #Rch .Rch-card li .right .r-bot dl dd i{position:absolute; text-align:right; left:0; top:1px; font-size:20px; color:#004da3;} #Rch .Rch-card li .right .r-bot dl dd span{font-size:17px; font-weight:400; color:#111; line-height:1.35; opacity:.9;} #Rch .Rch-card li .right .r-bot dl dd + dd{margin-top:5px;} #Rch .Rch-card li .right .r-bot dl dd.r-rch{display:none;} #Rch .Rch-card li .under{position:relative; width:100%; } #Rch .Rch-card li .under .ico-list{position:relative; display:flex; justify-content: flex-end; gap: 8px; z-index:2; padding:0 20px 20px 0;} #Rch .Rch-card li .under .ico-list::before{position:absolute; content:''; display:block; width:100%; height:28px; right:0; bottom:-1px; background:#004da3; z-index:-1;} #Rch .Rch-card li .under .ico-list::after{position:absolute; content:''; display:block; width:32%; height:65px; right:-5px; bottom:0; background:#004da3; transform: skewX(-30deg); z-index:-1;} #Rch .Rch-card li .under .ico-list.dep1::after{width:13%;} #Rch .Rch-card li .under .ico-list.dep2::after{width:18.5%;} #Rch .Rch-card li .under .ico-list.dep3::after{width:24%;} #Rch .Rch-card li .under .ico-list.dep4::after{width:29%;} #Rch .Rch-card li .under .ico-list p{position: relative; display: flex; justify-content: center; align-items: center; width:30px; height:30px; font-size:15px; border:1px solid rgb(255 255 255 / 30%); border-radius: 50%; color: #fff;} #Rch .Rch-card li .under .ico-list p.m1{background: #396fc1;} #Rch .Rch-card li .under .ico-list p.m2{background: #574cbb;} #Rch .Rch-card li .under .ico-list p.m3{background: #ef814d;} #Rch .Rch-card li .under .ico-list p.m4{background: #69b568;} #Rch .Rch-card li .under .ico-list i{} /* 모션 */ #Rch .Rch-img::before{position:absolute; display:block; content:''; width:100%; height:100%; background: #fff;right:0; bottom:0; transition: .8s; z-index: 2;} #Rch .Rch-img.in-view::before{width: 0;} @media (min-width: 980px) { #Rch .Rch-card li:hover .right .r-top .rt-txt{padding-left:0; transition: 0.3s;} #Rch .Rch-card li:hover{box-shadow: 0px 0px 20px 0px #ddd; transition: 0.3s;} #Rch .Rch-card li:hover .img-box img{transform:scale(1.1); transition: 0.3s;} } @media (max-width: 1600px){ #Rch .Rch-card li .img-box{width:210px;} #Rch .Rch-card li .right{width:calc(100% - 210px);} #Rch .Rch-card li .right .r-top .rt-txt h2{font-size:32px;} #Rch .Rch-card li .right .r-top .rt-txt h2 small{font-size:20px;} #Rch .Rch-card li .right .r-top .rt-txt h2.name-eng{font-size:25px;} #Rch .Rch-card li .right .r-bot dl dd{padding-left:25px;} #Rch .Rch-card li .right .r-bot dl dd i{top:1px; font-size:18px;} #Rch .Rch-card li .right .r-bot dl dd span{font-size:16px;} #Rch .Rch-card li .under .ico-list{padding:0 20px 20px 0;} #Rch .Rch-card li .under .ico-list::before{height:25px;} #Rch .Rch-card li .under .ico-list::after{ height:65px; right:-5px;} #Rch .Rch-card li .under .ico-list.dep1::after{width:14%;} #Rch .Rch-card li .under .ico-list.dep2::after{width:19.5%;} #Rch .Rch-card li .under .ico-list.dep3::after{width:25%;} #Rch .Rch-card li .under .ico-list.dep4::after{width:30%;} #Rch .Rch-card li .under .ico-list p{width:30px; height:30px; font-size:15px;} } @media (max-width: 1340px){ #Rch .Rch-con{margin-top:40px;} #Rch .Rch-con dl{padding:25px 5px 50px;} #Rch .Rch-con dl dt{width:45%; font-size:26px;} #Rch .Rch-con dl dt em{font-size:42px;} #Rch .Rch-con dl dt img{width:50px;} #Rch .Rch-con dl dd{width:55%; font-size:18px;} #Rch .Rch-card li .img-box{width:190px;} #Rch .Rch-card li .right{width:calc(100% - 190px);} #Rch .Rch-card li .right .r-top .rt-txt h2{font-size:28px;} #Rch .Rch-card li .right .r-top .rt-txt h2 small{font-size:18px;} #Rch .Rch-card li .right .r-top .rt-txt h2.name-eng{font-size:22px;} #Rch .Rch-card li .right .r-bot dl dd{padding-left:20px;} #Rch .Rch-card li .right .r-bot dl dd i{top:1px; font-size:17px;} #Rch .Rch-card li .right .r-bot dl dd span{font-size:15px;} #Rch .Rch-card li .under .ico-list{padding:0 20px 20px 0;} #Rch .Rch-card li .under .ico-list::before{height:20px;} #Rch .Rch-card li .under .ico-list::after{height:57px; right:-5px;} #Rch .Rch-card li .under .ico-list.dep1::after{width:16%;} #Rch .Rch-card li .under .ico-list.dep2::after{width:22%;} #Rch .Rch-card li .under .ico-list.dep3::after{width:28%;} #Rch .Rch-card li .under .ico-list.dep4::after{width:35%;} #Rch .Rch-card li .under .ico-list p{width:26px; height:26px; font-size:14px;} } @media (max-width: 1080px){ #Rch .Rch-con{margin-top:40px;} #Rch .Rch-con dl{padding:25px 5px 50px;} #Rch .Rch-con dl dt{width:45%; font-size:26px;} #Rch .Rch-con dl dt em{font-size:42px;} #Rch .Rch-con dl dt img{width:50px;} #Rch .Rch-con dl dd{width:55%; font-size:18px;} #Rch .Rch-card li{width:100%;} #Rch .Rch-card li .under .ico-list{padding:0 20px 20px 0;} #Rch .Rch-card li .under .ico-list::before{height:20px;} #Rch .Rch-card li .under .ico-list::after{height:57px; right:-5px; width:22% !important;} #Rch .Rch-card li .under .ico-list p{width:26px; height:26px; font-size:14px;} } @media (max-width: 760px){ #Rch .Rch-con{margin-top:40px;} #Rch .Rch-con dl{padding:25px 5px 50px;} #Rch .Rch-con dl dt{width:30%; font-size:24px;} #Rch .Rch-con dl dt em{font-size:30px;} #Rch .Rch-con dl dt img{width:40px;} #Rch .Rch-con dl dd{width:70%; font-size:16px;} #Rch .Rch-card li{width:100%;} #Rch .Rch-card li .img-box{width:190px;} #Rch .Rch-card li .right{width:calc(100% - 190px);} #Rch .Rch-card li .right .r-top .rt-txt h2{font-size:28px;} #Rch .Rch-card li .right .r-top .rt-txt h2 small{font-size:18px;} #Rch .Rch-card li .right .r-top .rt-txt h2.name-eng{font-size:22px;} #Rch .Rch-card li .right .r-bot dl dd{padding-left:20px;} #Rch .Rch-card li .right .r-bot dl dd i{top:1px; font-size:17px;} #Rch .Rch-card li .right .r-bot dl dd span{font-size:15px;} #Rch .Rch-card li .under .ico-list{padding:0 20px 20px 0;} #Rch .Rch-card li .under .ico-list::before{height:20px;} #Rch .Rch-card li .under .ico-list::after{height:57px; right:-5px; width:40% !important;} #Rch .Rch-card li .under .ico-list p{width:26px; height:26px; font-size:14px;} } @media (max-width: 560px){ #Rch .Rch-con dl dt{width:100%; margin-bottom:10px;} #Rch .Rch-con dl dd{width:100%;} #Rch .Rch-card li .img-box{width:100%;} #Rch .Rch-card li .right{width:100%; padding:25px 15px 15px 5px;} #Rch .Rch-card li .right .r-top .rt-txt h2{font-size:28px;} #Rch .Rch-card li .right .r-top .rt-txt h2 small{font-size:18px;} #Rch .Rch-card li .right .r-top .rt-txt h2.name-eng{font-size:22px;} } /* ------------------------------ sub4_1 : 교육과정 ------------------------------ */ /* 다이어그램1 */ #Edu ul.Ed-box{position:relative; display:flex; flex-wrap:wrap; justify-content: space-between; align-items: stretch; margin:20px 0 40px;} #Edu ul.Ed-box li{position:relative; width:49%; padding:40px 60px 60px 40px; border:1px solid #eee; border-top:3px solid #004da3;} #Edu ul.Ed-box li dl dt{font-size:23px; font-weight:700; color:#222; line-height:1.3; margin-bottom:20px; word-break: keep-all;} #Edu ul.Ed-box li dl dd{position:relative; font-size:17px; font-weight:400; color:#555; line-height:1.3; word-break: keep-all; padding-left:10px;} #Edu ul.Ed-box li dl dd + dd{margin-top:8px;} #Edu ul.Ed-box li dl dd::before{position:absolute; content:''; display:block; width:4px; height:4px; border-radius:50%; background:#aaa; top:8px; left:0;} /* 다이어그램2 */ #Edu ul.Ed-list{width:100%; max-width:100%; margin:0 auto; margin-top:20px;} #Edu ul.Ed-list > li {position: relative; display: flex; align-items: center; border-bottom:1px dashed #eee; padding:45px 65px; margin: 0 60px; transition:all 0.4s ease-in-out;} #Edu ul.Ed-list > li:before{position: absolute; content: ""; width: 100%; height: 100%; border: 4px solid #004da3; box-shadow: 0px 3px 20px rgb(0 77 163 / 15%); box-sizing: border-box; top: 0; left: 0; opacity: 0; transition: all 0.4s;} #Edu ul.Ed-list .tit-box{display: flex; align-items: center; width:380px; gap:20px;} #Edu ul.Ed-list .tit-box .num {display:inline-block; width:90px; font-family:'Frank Ruhl Libre', sans-serif; font-size:80px; color:#eee; font-weight: 700; line-height:1; white-space:nowrap;} #Edu ul.Ed-list .tit-box h4{font-size:28px; letter-spacing:-0.06em; color: #222; font-weight: 700;} #Edu ul.Ed-list .con-box {width:calc(100% - 380px);} #Edu ul.Ed-list .con-box > p{display: flex; font-size:19px; font-weight:400; line-height: 1.3; color:#aaa; word-break: keep-all;} #Edu ul.Ed-list .con-box > p + p{margin-top:10px;} #Edu ul.Ed-list .con-box > p i {font-size:27px; margin-right:5px; position: relative;top:-2px;} #Edu ul.Ed-list > li.active {background: #fff; border-bottom: 0; margin: 0;} #Edu ul.Ed-list > li.active:before {opacity: 1;} #Edu ul.Ed-list > li.active .con-box > p {color:#555; font-weight:500;} #Edu ul.Ed-list > li.active .con-box > p i {color:#004da3;} @media (max-width: 1340px){ /* 다이어그램1 */ #Edu ul.Ed-box li dl dt{font-size:23px; margin-bottom:20px;} #Edu ul.Ed-box li dl dd{font-size:17px; padding-left:10px;} #Edu ul.Ed-box li dl dd + dd{margin-top:8px;} /* 다이어그램2 */ #Edu ul.Ed-list > li {padding:45px 65px; margin: 0 60px;} #Edu ul.Ed-list .tit-box{width:300px; gap:20px;} #Edu ul.Ed-list .tit-box .num {width:80px; font-size:70px;} #Edu ul.Ed-list .tit-box h4{font-size:26px;} #Edu ul.Ed-list .con-box {width:calc(100% - 300px);} #Edu ul.Ed-list .con-box > p{font-size:19px;} #Edu ul.Ed-list .con-box > p + p{margin-top:10px;} #Edu ul.Ed-list .con-box > p i {font-size:27px;} } @media (max-width: 960px){ /* 다이어그램1 */ #Edu ul.Ed-box{margin:10px 0 20px;} #Edu ul.Ed-box li{padding:25px 40px 40px 30px;} #Edu ul.Ed-box li dl dt{font-size:20px; margin-bottom:18px;} #Edu ul.Ed-box li dl dd{font-size:16px; padding-left:10px;} #Edu ul.Ed-box li dl dd + dd{margin-top:8px;} /* 다이어그램2 */ #Edu ul.Ed-list > li {padding:50px 45px; margin: 0 40px;} #Edu ul.Ed-list .tit-box{width:200px; gap:12px;} #Edu ul.Ed-list .tit-box .num {width:50px; font-size:44px;} #Edu ul.Ed-list .tit-box h4{font-size:24px;} #Edu ul.Ed-list .con-box {width:calc(100% - 200px);} #Edu ul.Ed-list .con-box > p{font-size:17px;} #Edu ul.Ed-list .con-box > p + p{margin-top:10px;} #Edu ul.Ed-list .con-box > p i {font-size:22px;} } @media (max-width: 760px){ /* 다이어그램1 */ #Edu ul.Ed-box li{width:100%;} #Edu ul.Ed-box li + li{margin-top:10px;} /* 다이어그램2 */ #Edu ul.Ed-list > li {padding:40px 35px; margin: 0 40px; gap:10px;} #Edu ul.Ed-list .tit-box{width:130px; gap:0; flex-direction: column;} #Edu ul.Ed-list .tit-box .num {width:40px; font-size:36px;} #Edu ul.Ed-list .tit-box h4{font-size:22px;} #Edu ul.Ed-list .con-box {width:calc(100% - 140px);} #Edu ul.Ed-list .con-box > p{font-size:16px;} #Edu ul.Ed-list .con-box > p + p{margin-top:10px;} #Edu ul.Ed-list .con-box > p i {font-size:20px;} } @media (max-width: 560px){ /* 다이어그램2 */ #Edu ul.Ed-list > li {padding:25px 35px 35px; gap:20px; flex-direction: column;} #Edu ul.Ed-list .con-box {width:100%;} } @media (max-width: 440px){ } /* ------------------------------ sub4_3 : 입학안내 ------------------------------ */ #Adms{} #Adms .Ad-list{} #Adms .Ad-list .Ad-cont{counter-increment:item; margin-bottom:110px;} #Adms .Ad-list .Ad-cont::before{display:block; content:counter(item); left:5px; font-size:19px; font-weight:500; color:#222; font-family: 'Frank Ruhl Libre';} #Adms .Ad-list .Ad-cont dl{position:relative; display:flex; flex-wrap:wrap; padding:30px 5px 0 5px; margin-top:10px;} #Adms .Ad-list .Ad-cont dl::before{position:absolute; content:''; display:block; height:1px; width:0; left:0; top:0; background:#111;} #Adms .Ad-list .Ad-cont.in-view dl::before{width:100%; transition: all 1s;} #Adms .Ad-list .Ad-cont dl dt{position:relative; width:30%;} #Adms .Ad-list .Ad-cont dl dt h4{font-size:32px; font-weight:600; color:#222;} #Adms .Ad-list .Ad-cont dl dd{position:relative; width:70%;} #Adms .Ad-list .Ad-cont dl dd p{position:relative; font-size: 21px; color:#111; font-weight: 400;} #Adms .Ad-list .Ad-cont dl dd p.dot{font-size:18px;} #Adms .Ad-list .Ad-cont dl dd p.dot b{color:#004da3; font-weight:600; font-size: 21px; padding-right:5px;} #Adms .Ad-list .Ad-cont dl dd p.dot i{color:#aaa; font-weight:500; padding-right:4px;} #Adms .Ad-list .Ad-cont dl dd p.dot + p.dot{margin-top:8px;} #Adms .Ad-list .Ad-cont .btns{position:relative; display:flex; flex-wrap:wrap; gap:15px; margin-top:30px;} #Adms .Ad-list .Ad-cont .btns a{position:relative; display:inline-block; line-height:70px; border:1px solid #555; text-align:center; padding:0 40px; min-width:180px; font-size:17px; font-weight:600; color:#111; transition: .2s linear;} #Adms .Ad-list .Ad-cont .btns a::before{position:absolute; content:''; display:block; height:100%; width:0; left:0; top:0; background:#004da3; transition:all 0.3s;} #Adms .Ad-list .Ad-cont .btns a span{position:relative; display:flex; align-items:center; justify-content:center; z-index: 1;} #Adms .Ad-list .Ad-cont .btns a span i{font-size:1.15em;} #Adms .Ad-list .Ad-cont .btns a:hover{border-color: #004da3; color:#fff; } #Adms .Ad-list .Ad-cont .btns a:hover::before{width: 100%;} #Adms .Ad-list .Ad-cont ul.ico-list{position:relative; display:flex; justify-content:space-between; text-align:center;} #Adms .Ad-list .Ad-cont ul.ico-list li{display:flex; flex-direction:column; justify-content:center; align-items:center;} #Adms .Ad-list .Ad-cont ul.ico-list li .icon{position:relative; width:150px; height:150px; background:no-repeat #fff 50% 50%; background-size:80px; border-radius:50%; box-shadow:rgba(0, 0, 0, .09) 0 3px 30px;} #Adms .Ad-list .Ad-cont ul.ico-list li:nth-child(1) .icon{background-image:url('../images/sub/ad_ico01.png');} #Adms .Ad-list .Ad-cont ul.ico-list li:nth-child(2) .icon{background-image:url('../images/sub/ad_ico02.png');} #Adms .Ad-list .Ad-cont ul.ico-list li:nth-child(3) .icon{background-image:url('../images/sub/ad_ico03.png');} #Adms .Ad-list .Ad-cont ul.ico-list li:nth-child(4) .icon{background-image:url('../images/sub/ad_ico04.png');} #Adms .Ad-list .Ad-cont ul.ico-list li:nth-child(5) .icon{background-image:url('../images/sub/ad_ico05.png');} #Adms .Ad-list .Ad-cont ul.ico-list li .icon i{ font-style:normal; font-family: 'Frank Ruhl Libre'; position:absolute; font-size:18px; color:#fff; font-weight:600; line-height:45px; height:45px; width:45px; background:#004da3; border-radius:50%; bottom:-7px; right:-3px; } #Adms .Ad-list .Ad-cont ul.ico-list li .icon img{width:110px;} #Adms .Ad-list .Ad-cont ul.ico-list li .cont{position: relative; margin-top:40px; font-size:19px; font-weight:500;} @media (max-width: 1340px){ #Adms .Ad-list .Ad-cont{margin-bottom:90px;} #Adms .Ad-list .Ad-cont::before{font-size:19px;} #Adms .Ad-list .Ad-cont dl{padding:30px 5px 0 5px; margin-top:10px;} #Adms .Ad-list .Ad-cont dl dt{width:30%;} #Adms .Ad-list .Ad-cont dl dt h4{font-size:28px;} #Adms .Ad-list .Ad-cont dl dd{width:70%;} #Adms .Ad-list .Ad-cont dl dd p{font-size: 19px;} #Adms .Ad-list .Ad-cont dl dd p.dot{font-size:17px;} #Adms .Ad-list .Ad-cont dl dd p.dot b{font-size:19px; padding-right:5px;} #Adms .Ad-list .Ad-cont .btns{gap:15px; margin-top:30px;} #Adms .Ad-list .Ad-cont .btns a{line-height:64px; padding:0 35px; min-width:170px; font-size:16px;} #Adms .Ad-list .Ad-cont ul.ico-list li .icon{width:130px; height:130px; background-size:68px;} #Adms .Ad-list .Ad-cont ul.ico-list li .icon i{font-size:17px; line-height:42px; height:42px; width:42px; bottom:-7px; right:-3px;} #Adms .Ad-list .Ad-cont ul.ico-list li .icon img{width:100px;} #Adms .Ad-list .Ad-cont ul.ico-list li .cont{margin-top:30px; font-size:17px;} } @media (max-width: 1080px){ #Adms .Ad-list .Ad-cont{margin-bottom:90px;} #Adms .Ad-list .Ad-cont::before{font-size:18px;} #Adms .Ad-list .Ad-cont dl{padding:25px 5px 0 5px; margin-top:10px;} #Adms .Ad-list .Ad-cont dl dt{width:30%;} #Adms .Ad-list .Ad-cont dl dt h4{font-size:24px;} #Adms .Ad-list .Ad-cont dl dd{width:70%;} #Adms .Ad-list .Ad-cont dl dd p{font-size:17px;} #Adms .Ad-list .Ad-cont dl dd p.dot{font-size:17px;} #Adms .Ad-list .Ad-cont dl dd p.dot b{font-size:18px; padding-right:5px;} #Adms .Ad-list .Ad-cont .btns{gap:10px; margin-top:22px;} #Adms .Ad-list .Ad-cont .btns a{line-height:60px; padding:0 32px; min-width:160px; font-size:16px;} #Adms .Ad-list .Ad-cont ul.ico-list li .icon{width:120px; height:120px; background-size:65px;} #Adms .Ad-list .Ad-cont ul.ico-list li .icon i{font-size:16px; line-height:37px; height:37px; width:37px; bottom:-7px; right:-3px;} #Adms .Ad-list .Ad-cont ul.ico-list li .icon img{width:90px;} #Adms .Ad-list .Ad-cont ul.ico-list li .cont{margin-top:30px; font-size:17px;} } @media (max-width: 960px){ #Adms .Ad-list .Ad-cont{margin-bottom:90px;} #Adms .Ad-list .Ad-cont::before{font-size:18px;} #Adms .Ad-list .Ad-cont dl{padding:17px 5px 0 5px; margin-top:5px;} #Adms .Ad-list .Ad-cont dl dt{width:100%; margin-bottom:10px;} #Adms .Ad-list .Ad-cont dl dt h4{font-size:24px;} #Adms .Ad-list .Ad-cont dl dd{width:100%;} #Adms .Ad-list .Ad-cont ul.ico-list{flex-wrap: wrap; justify-content:flex-start; gap: 15px; row-gap: 30px;} #Adms .Ad-list .Ad-cont ul.ico-list li .icon{width:120px; height:120px; background-size:65px;} #Adms .Ad-list .Ad-cont ul.ico-list li .icon i{font-size:16px; line-height:37px; height:37px; width:37px; bottom:-7px; right:-3px;} #Adms .Ad-list .Ad-cont ul.ico-list li .icon img{width:90px;} #Adms .Ad-list .Ad-cont ul.ico-list li .cont{margin-top:20px; font-size:17px;} } @media (max-width: 760px){ } @media (max-width: 560px){ } @media (max-width: 440px){ } /* ------------------------------ 스킨 검색바 커스텀 디자인 ------------------------------ */ .cust-sch{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;} .cust-sch .sch_select{display:inline-block;} .cust-sch .sch_select select{ width: 180px; font-size: 18px; border: 3px solid #ca0464; height: 54px; line-height:49px; overflow:hidden; padding-left: 20px; border-radius:50px; background: url('/images/ico_select.png') no-repeat right 20px center; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .cust-sch .sch_select select:focus{outline: none !important;} .cust-sch input[type="text"]{width: 500px; font-size: 18px; border: 3px solid #ca0464; height: 54px; line-height:49px; overflow:hidden; padding-left: 20px; color:#333; border-radius:50px; margin-left: 5px;} .cust-sch input[type="submit"]{ height: 54px; width: 54px; background: url('/images/btn_search.png') no-repeat center center #ca0464; border-radius:50%; text-indent:-9999px; cursor:pointer; border:none; outline:none; margin-left: 5px; } @media (max-width: 1240px){ .cust-sch .sch_select select{width: 140px; font-size: 16px; height: 45px; line-height:40px; padding-left: 15px;} .cust-sch input[type="text"]{width: 360px; font-size: 16px; line-height:40px; height: 45px; padding-left: 15px;} .cust-sch input[type="submit"]{height: 45px; width: 45px; background-size:50%;} } @media (max-width: 640px){ .cust-sch .sch_select select{width: 110px;} .cust-sch input[type="text"]{width: 240px;} } @media (max-width: 480px){ .cust-sch{display:block;} .cust-sch .sch_select{display:block; width: 100%; margin-bottom: 5px;} .cust-sch .sch_select select{width: 100%; display:block;} .cust-sch input[type="text"]{width: 240px;} .cust-sch input[type="text"]{width: calc(100% - 55px); margin-left: 0; } } /* ------------------------------ 스킨 리스트 팝업창 ------------------------------ */ .overlay{position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.6); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index: 900;} .overlay:target{visibility: visible; opacity: 1;} .overlay .popup{ position: fixed; width: 50%; padding: 60px; max-width: 1200px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; max-height: 720px; overflow-y:scroll; border-radius:30px 5px 5px 30px; -webkit-transition: opacity .5s, visibility 0s linear .5s; transition: opacity .5s, visibility 0s linear .5s; z-index: 1;} .overlay .popup:target{visibility: visible; opacity: 1; /* cancel visibility transition delay */ -webkit-transition-delay: 0s; transition-delay: 0s;} .overlay .popup::-webkit-scrollbar{width: 5px; background-color: #ddd; border-radius:5px;} .overlay .popup::-webkit-scrollbar-thumb{width: 5px; background-color: #666; border-radius:5px;} .overlay .popup .close{position: absolute; right:60px; top:60px; z-index: 90;} .overlay .popup .close i{color: #ca0464; font-size:35px;} .overlay .popup .lineup_box{position: relative; flex-grow: inherit; padding: 0;} .overlay .popup .lineup_box .list{padding-bottom:60px;} @media (max-width:880px){ .overlay .popup{width:90%; padding:30px; max-height: 720px; overflow-y:scroll; border-radius:30px 5px 5px 30px;} .overlay .popup .close{right:30px; top:30px;} .overlay .popup .close i{font-size:30px;} .overlay .popup .lineup_box .list{padding-bottom:60px;} } /* ------------------------------ 준비중 ------------------------------ */ .ui-comming{position:relative; overflow:hidden; background-color:#fff; box-shadow: 8px 6px 20px 0 rgba(0, 0, 0, 0.1);} .ui-comming .inner{position:relative; text-align:center; padding: 60px;} .ui-comming .tit{} .ui-comming .tit big{display:block; width:74px; height:74px; margin:0 auto 25px; background:#004da3; border-radius:50%; font-size:30px; line-height:74px; color:#fff;} .ui-comming .tit small{display:block; margin:20px 0 15px; font-weight:700; font-size:28px; color:#333; letter-spacing:-.8px; line-height:1.2;} .ui-comming .tit small strong{color:#004da3; font-weight:700;} .ui-comming .tit p{font-size:17px; color:#666;}