@charset "UTF-8";
@import url(https://chempold.keiti.re.kr/safCnfTrgt/css/oneFont.css);
/* ======================== 공통 영역 ========================  */
 * {padding-top: calc(100% * 9/16);  margin:0; padding:0;  line-height:1.3; }
 ul {list-style:none;}
 table {border-spacing: 0px;border-collapse:collapse}
 body {height: 100%; margin: 0; padding: 0; font-family: 'Noto Sans Korean', sans-serif; word-break: keep-all; letter-spacing: -0.06em; color: #555555;}
 a, a:link, a:hover{color:black;}
.title {font-family:"gmarketSans";}
.mnl {position: relative; z-index: 9999;}


/* ======================== swiper 영역 ========================  */
.swiper {width: 100%;height: 350px;margin:20px auto;}
.swiper-wrapper {width:70%}
.swiper-slide {width:170px !important;margin-left:10px; background: #fff url('../img/data/img-bg4.png') no-repeat;border:3px solid #a49f9f;border-radius:30px;display: flex;justify-content: center;align-items: center;font-size:18px;color:#444545;font-weight:500;padding:56px 20px 30px 35px;}
.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.swiper-slide div.slide-num {position:absolute;top:55px;width:100%;left:4px;color:#fff}
.swiper-slide div.slide-btn {position:absolute;bottom:-40px;width:100%;left:0}
.swiper-slide div.slide-btn a{display:inline-block;text-align:center;width:43%;background:#a7a7a7;font-size:18px;color:#fff;font-weight:500;padding:5px 0px;border-radius:10px;opacity:0.7;;text-align:center;}
.swiper-slide div.slide-btn a:hover {background:#86a0c9}
.swiper-button-next{top: 320px !important; right: 70px !important; color: #819cd1;}
.swiper-button-prev{top: 320px !important; color: #819cd1;}
.swiper-pagination{position: initial !important; top: 545px; left: -40px;}
.swiper-pagination-bullet{margin:3px;}


/* ======================== body 영역 ========================  */
.d-warp {width:100%}
.data1 {background: url('../img/data/top-bg.png') no-repeat center center; height:605px;width:100%;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.data1{height:750px important!;}
.data1-in {width:1500px;margin:0 auto;position:relative}
.dt1 {font-size:48px;color:#383532;font-weight:300;padding:115px 0 0 0; font-family: "gmarketSans";}
.dt1 > h2{font-family: "gmarketSans"; font-size: 70px; font-weight: 500; line-height: 75px; letter-spacing: -0.06em; color: #424795;}
.dt2 {background: url('../img/data/icon-1.png') no-repeat 0 27px;padding: 0 0 0 20px;color:#827a72;}
.dt3 {padding:80px 0 0 0}
.dt3-2 {padding-top:25px}
.dt4 {position:absolute;right:0;top:120px;border:1px solid #bdbec6;background:rgba(255,255,255, 0.7);border-radius:30px;padding:30px;width:580px;box-shadow: 0 0px 8px -0px rgb(0 0 0 / 10%);}

a.d-btn1 {background:#283342;font-size:25px;color:#fff;font-weight:500;padding:15px 100px;border-radius:40px;box-shadow: 0 4px 20px -0px rgb(0 0 0 / 40%);}
a.d-btn3 {background:#fff;font-size:16px;color:#2e8c74;font-weight:500;padding:4px 0px;border-radius:20px;border:1px solid #46b194;width:100px;display:inline-block;text-align:center; position: relative; z-index: 9999;}
a.dt3-in-btn {box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.35); background:#fff;font-size:18px;color:#383532;font-weight:600;width:100px;border-radius:5px;display:inline-block;text-align:center;padding:2px 0; margin-right:5px;}
a.dt3-in-btn:hover{margin-left:5px; margin-right:0px;}
font-gr {color: #1d7e7e;}
font-pp {color: #392e7a;}
a.d-btn4 {background:#fff;font-size:16px;color:#5a86b9;font-weight:500;padding:4px 0px;border-radius:20px;border:1px solid #6e99c9;width:100px;display:inline-block;text-align:center; position: relative; z-index: 9999;}

.dt3-in-box1 {position:relative;background: linear-gradient(to right bottom, rgb(85, 199, 167, 0.589), rgb(37, 160, 163, 0.924)  ) ; box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75); width:330px;height:126px;border-radius:30px;color:#fff;font-size:22px;padding:30px 20px;float:left;margin-right:20px}
.dt3-in-box1 span {color:#fff;font-size:30px;font-weight:600}
.dt3-in-box1 img {position:absolute;right:20px;bottom:20px}
.dt3-in-box2 {position:relative;background: linear-gradient(to right, #667eea, #764ba2);box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);width:330px;height:126px;border-radius:30px;color:#fff;font-size:22px;padding:30px 20px;float:left}
.dt3-in-box2 span {color:#fff;font-size:30px;font-weight:600}
.dt3-in-box2 img {position:absolute;right:20px;bottom:30px}

.b1-title {font-size:24px;color:#5079bd;font-weight:600;border-bottom:1px solid #d3cec8;padding:0 0 15px 0}
.b1-title span {font-size:24px;color:#686f7c;font-weight:400}
.b1-title a {float:right}
.b1-sub {border-bottom:1px dashed #d3cec8;padding:5px 0 10px 0;font-size:15px;color:#5d5d5d;font-weight:400}
.b1-sub > span {font-size:15px;color:#5278ae;line-height:30px}
.b1-sub div {float:right;color:#827f7c;font-weight:400}
.b1-sub div span {padding:0 10px 0  0}
.b1-sub div span:after{display:inline-block;content:"";width:1px;height:15px;background:#d3cec8;margin:5px 0 -2px 12px}

.data2 {background:#f5f6f8;padding:40px 0;}
.data2-in {width:1440px;margin:0 auto;position:relative;height:1070px;overflow-y:hidden;padding:0 60px 40px 0;}

.box2-dt1 {font-size:16px;color:#827a72;font-weight:400;padding:0 0 40px 0;text-align:center;line-height:50px}
.box2-dt1 span {font-size:48px;font-weight:600;color:#383532}
.box2-dt2 ul{display: flex;}
.box2-dt2 ul li {position:relative;width:25%;border:3px solid #a49f9f;border-radius:30px;background: url('../img/data/img-bg1.png') no-repeat;margin-right:50px;font-size:24px;color:#444545;font-weight:500;padding:45px 20px 30px 20px;height:220px}
.box2-dt2 ul li div {position:absolute;bottom:30px;width:calc(100% - 40px)}
.box2-dt2 ul li div a{display:block;margin-top:15px;text-align:center;width:100%;background:#a7a7a7;font-size:18px;color:#fff;font-weight:500;padding:9px 0px;border-radius:20px;opacity:0.7;;text-align:center;}
.box2-dt2 ul li div a:hover {background:#86a0c9; transition:all .35s; }
.box2-dt2 ul li:hover {background: url('../img/data/img-bg2.png') no-repeat;border:3px solid #92a6c6;color:#395f9c}
.box2-dt2 ul li:last-child {margin-right:0}
.box2-dt3 {padding-top:40px}

/*분할ver.추가*/
.box2-dt3-1 {width:700px;height:400px;padding: 0 10px 0 0;float:left}
.box2-dt3-1 ul li ul {overflow-y:scroll;height:500px; }
.box2-dt3-1-tit {background:#426595;color:#fff;font-weight:600;font-size:24px;text-align:center;border-radius:10px;padding:20px 0; cursor:pointer;}
.dt3-table-cont {color:#656463;font-weight:400;font-size:16px;border-radius:10px;padding:20px 30px 20px 5px;letter-spacing:-1px;border-bottom:1px dashed #d3cec8}
.dt3-table-cont div {float:right}

.box2-dt3-2 {width:700px;height:400px;padding: 0 10px 0 0;float:right}
.box2-dt3-2 ul li ul {overflow-y:scroll;height:500px; }
.box2-dt3-2-tit {background:#424795;color:#fff;font-weight:600;font-size:24px;text-align:center;border-radius:10px;padding:20px 0; cursor:pointer;}

.data3 {background:#f8f7f5;padding:40px 0;margin-top:5px}
.data3-in {width:1440px;margin:0 auto;position:relative;height:500px;padding:0 60px 40px 0;}
.box3-dt1 {font-size:48px;font-weight:600;color:#383532;text-align:center;padding:30px 0 0px 0;}
.box3-dt2 > ul{display: flex;margin-top:60px;padding-left:5px}
.box3-dt2 > ul > li {position:relative;width:25%;margin-right:55px;background:#fff;border-radius:10px;box-shadow: 0 0px 10px -0px rgb(0 0 0 / 10%);}
.box3-dt2 > ul > li:last-child {margin-right:0 }

/*추가e*/
.dt3-table ul li.dt3-table-tit ul{display:flex;width:100%;}
.dt3-table ul li.dt3-table-tit ul li {width:50%;margin-right:20px;background:#426595;color:#fff;font-weight:600;font-size:24px;text-align:center;border-radius:10px;padding:20px 0}
.dt3-table ul li.dt3-table-tit ul li:last-child {margin-right:0;background:#424795;}
.dt3-table-tit li a{color:#fff;font-weight:600;font-size:24px;text-align:center;}
.dt3-table-tit li:hover {cursor: pointer; opacity:0.7;}
.dt3-table ul li.dt3-table-cont ul{display:flex;width:100%;border-bottom:1px dashed #d3cec8}
.dt3-table ul li.dt3-table-cont ul li {width:50%;color:#656463;font-weight:400;font-size:17px;border-radius:10px;padding:20px 30px;letter-spacing:-1px}
.dt3-table ul li.dt3-table-cont ul li div {float:right}

.data3 {background:#f8f7f5;padding:40px 0;margin-top:5px}
.data3-in {width:1440px;margin:0 auto;position:relative;height:500px;padding:0 60px 40px 0;}
.box3-dt1 {font-size:48px;font-weight:600;color:#383532;text-align:center;padding:30px 0 0px 0;} 
.box3-dt2 > ul{display: flex;margin-top:60px;padding-left:5px}
.box3-dt2 > ul > li {position:relative;width:25%;margin-right:55px;background:#fff;border-radius:10px;box-shadow: 0 0px 10px -0px rgb(0 0 0 / 10%);}
.box3-dt2 > ul > li:last-child {margin-right:0 }

.box3-dt2 > ul > li div ul li:first-child img{border-top-left-radius:10px;border-top-right-radius:10px;width:100%}
.box3-dt2 > ul > li div ul li:first-child video{border-top-left-radius:10px;border-top-right-radius:10px;width:100%}
.box3-dt2 > ul > li div ul li:first-child video:hover{background:white;opacity:0.7;}
.box3-dt2 > ul > li div ul li.box3-dt2-cont {border-bottom:1px dashed #d3cec8;margin:15px 20px 0px 20px;height:100px;font-size:15px}
.box3-dt2 > ul > li div ul li.box3-dt2-cont p:hover{color:rgb(37, 160, 163, 0.924); font-weight:600;}
.box3-dt2 > ul > li div ul li.box3-dt2-date {color:#637ea1;font-size:14px;padding:10px 20px} 
.box3-dt2 > ul > li div ul li.box3-dt2-date span {color:#827f7c;float:right;font-size:14px;}
.box3-dt2 > ul > li div ul li.box3-dt2-null {padding:50% 20px;text-align:center;color:#c8c7c6;font-size:18px}

.data4 {background:#fff;padding:40px 0;margin-top:5px}
.data4-in {width:1440px;margin:0 auto;position:relative;padding:0 60px 40px 0;}
.box4-dt1 {font-size:48px;font-weight:600;color:#383532;text-align:center;padding:30px 0 0px 0;} 
.box4-dt2 ul{display: flex;margin-top:60px;padding-left:5px}
.box4-dt2 ul li {position:relative;width:25%;border-radius:10px;margin-right:50px;font-size:16px;color:#444545;font-weight:500;padding:0;text-align:center}
.box4-dt2 ul li:last-child {margin-right:0 }
.box4-dt2 ul li img {width:100%;border-radius:10px;border:1px solid #dedada;}
.box4-dt2 ul li img:hover{backgroun:white;opacity:0.7;}

.box5-menu {background:#f5f6f8;border:1px solid #eaedf1;margin-top:70px;border-radius:40px}
.box5-menu ul  {display: flex}
.box5-menu ul li {width:25%;}
.box5-menu ul li a {display:inline-block;font-size:24px;color:#919090;font-weight:600;text-align:center;padding:20px 0;margin-left:-5px;width:100%;border-radius:40px;transition:0.5s}
.box5-menu ul li a.on {border-radius:40px;background:#476093;color:#fff;margin-left:0}
.box5-menu ul li a.on:hover {border-radius:40px;background:#476093;color:#fff;margin-left:0}
.box5-menu ul li a:hover {border-radius:40px;background:#e4e7ed;color:#315193;margin-left:0}

.box5-cont {margin-top:30px}
.box5-cont .title{margin-top:100px;}
.box5-cont > ul  {display: flex;margin-top:30px}
.box5-cont > ul > li {width:50%;border:1px solid #eaedf1;border-radius:20px;height:185px}
.box5-cont > ul > li:first-child {margin-right:50px}
.box5-cont > ul > li > img {border-top-left-radius:20px;border-bottom-left-radius:20px;float:left}
.box5-cont > ul > li > a > video {border-top-left-radius:20px;border-bottom-left-radius:20px;float:left; width:300px; height:95%;}
.box5-cont > ul > li > a > video:hover {opacity:0.7; transition:all .35s;}
.box5-cont ul li.null {text-align:center;color:#c8c7c6;font-size:18px;height:100px;padding:85px 0 0 0;vertical-align:middle;} 

.box5-text {padding:30px 20px 30px 310px;}
.box5-text:hover{cursor:pointer;}
.box5-text ul li {padding:4px 0}
.box5-text1 {font-size:13px;color:#5278ae}
.box5-text2 {font-size:16px;color:#444545;font-weight:600; text-overflow: ellipsis}
.box5-text3 {font-size:14px;color:#838585;height:40px}
.box5-text4 {font-size:13px;color:#637ea1;margin-top:10px}
.box5-text4 span {color:#827f7c;float:right;font-size:14px;}


/* ======================== pagination ========================  */
.page {width:100%;text-align:center;padding:40px 0}
.page-nav {text-align:center;   display: inline-block;}
.page-nav li a{float: left;display: inline-block;width: 32px;height: 29px;line-height: 24px;font-size: 14px;text-align: center;color: #777;border: 1px solid #d7d7d7;margin-right: 8px;vertical-align: middle;}
.page-nav li a:hover {border: 1px solid #93a7c2;background:#f3f7fd}
.page-nav li a img {padding:7px 0 0 0}


/* ======================== foot 영역 ========================  */
.d-foot {background:#363636;text-align:center;padding:10px 0}