html, body{ font-family: inherit;  position:relative;   letter-spacing: -1px;    overflow-x: hidden;}
table {font-family: inherit;} 

.modal2 { z-index: 100;background: #fff;  width: 100%;height: 100%; margin: 0; padding: 0; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); top: 100%; position: fixed; left: 0%;  text-align: left; overflow-y: scroll; box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px, rgb(0 0 0 / 6%) 0px 0px 0px 1px;} 
.container2.modal-open2 .modal2 {  top: 0;}

#sitemap2 {display: block;   position: relative; height: 50px;    width: 90%; margin: 0 auto;}
#sitemap2 > a > span::before{    content: ''; position: absolute; top: -11px;right: 0;width: 30px; height: 1px; background-color: #000;}
#sitemap2 > a > span{position: absolute;display: inline-block;  top: 50%;right:-7px;width:30px;  height: 1px; font-size: 0;  background-color: #000;  border: none; transform: translate(-50%,-50%);}
#sitemap2 > a > span::after{content: ''; position: absolute; top: 11px; left: 0; width: 20px; height: 1px; background-color: #000;}

ul.main_list {margin-top:20px; padding-left: 20px;}
ul.main_list > li {    line-height: 50px;}
 ul.main_list > li > a {  font-size: 15px; font-weight: bold;}

#sitemap_close2 {    position: absolute;display: inline-block; right: 0; top: 4px; width: 50px; height: 50px; z-index:20;}
#sitemap_close2 > a {display: block;width:100%;height: 100%;text-indent: -99999px;cursor: pointer;}
#sitemap_close2 > a > span::before{content: '';  position: absolute;  top: 24px; left: 0; width: 33px; height: 1px;  background-color: #000;  border-radius: 20px;transform: rotate(45deg);}
#sitemap_close2 > a > span::after{content: ''; position: absolute; top:24px; left: 0;  width: 33px; height: 1px; background-color: #000; border-radius: 20px;transform: rotate(-45deg);}

.sitemap_body2 {width: 100%; margin: 0 auto; padding: 3% 0;}
.sitemap_body2 > div > p {position: relative; padding-bottom: 16px;padding-left: 20px; text-align: left;  font-size: 25px;font-weight: bold;  color: #000;}
.sitemap_body2 > p::after {content:''; position: absolute; bottom:0; left:0; width:100%; height:1px;  background: #000;}
.main_list_title {font-size: 20px;font-weight: bold;  color: #000;    padding-top: 20px;padding-bottom: 20px;}
.main_list_title {margin-top:40px;}
.margin_none {margin-top:0;}


.sitemap_body2 ul li {     position: relative;line-height: 50px;    font-size: 16px;    }
.sitemap_body2 ul li::after {content:''; position: absolute; bottom:0;     left: -20px; width: 100vw; height:1px;  background: #E9E9E9;}
.sitemap_body2 ul li::before {content:''; position: absolute;top: 50%;  left: -12px; width: 4px; height:4px;  background: #000;    border-radius: 50%; transform: translate(0, -50%);}

.sitemap_cont2 { border-bottom: 1px solid #ddd; padding: 20px 10px; }
.sitemap_cont2 > p {display: inline-block;     height: 100%; margin-right: 20px; font-size: 18px; font-weight: bold;}
.sitemap_cont2 ul > li {    display: inline-block; margin: 10px; font-weight: bold; border-radius: 20px;    background: #fff;}
.sitemap_cont2 ul > li > a {     display: block; padding: 10px 30px;  cursor: pointer;  font-size: 15px;}

.sitemap_cont2 th > a { display: inline-block; height: 100%;  margin-right: 20px; font-size: 18px;  font-weight: bold; color:#fff; }
.sitemap_cont2 td {   display: inline-block; margin-right: 10px;   background: #fff; border-radius: 20px;}
.sitemap_cont2 td > a {   display: block; padding: 10px 30px;  cursor: pointer;  font-size: 15px; font-weight: bold; }

/*로그인 헤더*/
.header_login {position: relative; width:90%;     height: 100%;margin:0 auto;  z-index: 10;}
.header_login > div > ul {    float: right;}
.header_login ul > li {display:inline-block; margin-right: 10px;} 

/*메인*/
.mainbg { border: 0; padding: 0; width: 100%; background:url(../images/edu_main_bg_M.png) no-repeat fixed center top;     background-size: cover;background-position: center;  text-align: center;background-attachment: fixed;}
.mainbg_in { border: 0; padding: 0;width: 100%; height:100%;  background-position: center; background-size: cover; top: 0; right: 0;  bottom: 0;  left: 0; text-align: center;  background: rgba(0,0,0,.4);  }
/*.mainbg_in span {    position: absolute;  display: block; width: 100%; height: 100%; text-indent: -99999px;  cursor: pointer;}*/
.mainbg_cont {width:80%; margin:0 auto;    font-size: 40px;   line-height: 80px; padding: 200px 0 200px 0;} 
.mainbg_in a  { color:#fff;}
#m00 {display: none;  z-index: 10; color:#fff;}
#m01 { display: block;color:#fff; z-index: 10;}
#m02 { display: block;color:#fff; z-index: 10;}
#m03 { display: block;color:#fff; z-index: 10;}
#m04{ display: block;color:#fff; z-index: 10;}
#m04 > a {width:100%; height:100%; display:block;}
#m05 { display: block;color:#fff; z-index: 10;}
#m06{ display: block;color:#fff; z-index: 10;}
#m07 { display: block;color:#fff; z-index: 10;}


/*메인_LIST*/
#wrap { margin: 0 auto; margin-top:100px;}
.wrap_in {width: 100%;}
a.home{  padding: 10px 20px; display: inline-block; border: 1px solid #BD0008; border-radius: 3px; box-shadow: 0px 6px 9px #0000000f;}
a.home:hover{	background:#BD0008; color:#fff; font-weight: bold;}
.list_wrap {position: relative;width:100%;	}
.list_wrap > ul { width: 90%; margin: 0 auto;     text-align: center;margin-bottom:50px}
 li.kategorie {    display: inline-block; width:200px; margin-right: 1%; text-align: center; padding: 10px 20px; border: 1px solid #016cba; border-radius: 3px; cursor: pointer;box-shadow: 0px 6px 9px #0000000f;}
 li.kategorie > a  {color: #000;}
 li.kategorie:last-child {margin:0;}

 li.kategorie1 {float: left; margin-right: 7%; text-align: center; padding: 10px 20px; border: 1px solid #016cba; border-radius: 3px; cursor: pointer;box-shadow: 0px 6px 9px #0000000f;}
 li.kategorie1 > a  {color: #000;}

div.kategorie_in {width: 100%;display:none;}

li.kategorie.on {display:inline-block;    background: #016cba;}
li.kategorie.on > a { color:#fff;    font-weight: bold;}
li.kategorie:hover {background: #016cba;transition: 0.5s;}
li.kategorie:hover > a { color:#fff;    font-weight: bold;}
div.kategorie_in.on {display:block; }

.js-click-modal2_T {   position: relative;   color: #000;font-size: 16px;float: right;    padding-right: 50px;}
.js-click-modal2_T:hover {color:#000;}

.thumb {font-size:20px;    width: 90%; margin: 0 auto; margin-bottom: 40px;}

.thumb ul li {display:block;  width: 100%; margin: 0 auto;}
.thumb h3 {    font-size: 20px;}
.thumb h3:nth-child(n+2){ margin-top:70px; }
.video {display: block; width: 100%;   margin-top: 20px; margin-right: 12px;      border-radius: 3px;  /*background: #ddd;*/ cursor:pointer; border: 1px solid #dbdbdb;}
.video a {    font-size: 18px;
    margin: 20px 0;
    display: block;
    color: #000;
    padding-left: 20px;}
	.video a:hover {color: #000;}

.academy_video {width: 300px;}
/*소독세척룸*/
.sodok_room {height: 100%;}
.left_gnb{display: none; vertical-align: top; width: 300px;}
.left_gnb > p { font-weight: bold; font-size: 18px;    margin-bottom: 20px;}
.sodok_room_img  { width: 80%;   z-index: 10;  display: inline-block; }
.sodok_room2{background-image: url(../images/edu_video_clean_nor.jpg)}

#sodok_room01 {  display: inline-block; width: 80%;   z-index: 10;cursor:pointer;padding: 10px;background: rgba(10,111,185,.9);box-shadow: 0px 9px 13px #00000059; border: 2px solid #fff; border-radius: 5px;      position: absolute; top: 50%;  left: 50%; transform: translate(-50%, -50%);}
.sodok_room01  {display: block;  color: #fff;  font-weight: bold; font-size: 18px; text-align: center;}
#sodok_room02 {  display: inline-block; width: 80%;   z-index: 10;cursor:pointer;padding: 10px;background: rgba(9,61,184,.9);box-shadow: 0px 9px 13px #00000059; border: 2px solid #fff; border-radius: 5px;  position: absolute; top: 50%;  left: 50%; transform: translate(-50%, -50%);}
.sodok_room02  {display: block;  color: #fff;  font-weight: bold; font-size: 18px; text-align: center;}
#sodok_room03 {  display: inline-block; width: 80%;  z-index: 10;cursor:pointer;padding: 10px;background: rgba(71,8,183,.9);box-shadow: 0px 9px 13px #00000059; border: 2px solid #fff; border-radius: 5px;  position: absolute; top: 50%;  left: 50%; transform: translate(-50%, -50%);}
.sodok_room03  {display: block;  color: #fff;  font-weight: bold; font-size: 18px; text-align: center;}

/*위내시경*/
.human_stomach {height: 100%;}
.left_gnb{display: none; vertical-align: top; width: 300px;}
.left_gnb > p { font-weight: bold; font-size: 18px;    margin-bottom: 20px;}
.human_stomach_img  { width: 80%;   z-index: 10;  display: inline-block;    position: absolute; top: 50%;  left: 50%; transform: translate(-50%, -50%);}
.stomachimg2 {background-image: url(../images/edu_video_bodymap_01.jpg)}

#stomach01 {  display: inline-block; width: 100%;     margin-bottom: 100px;  z-index: 10;cursor:pointer;padding: 10px;background: rgba(1,56,186,.9);box-shadow: 0px 9px 13px #00000059;  border: 2px solid #fff; border-radius: 5px;}
#stomach02 {  display: inline-block; width: 100%;      margin-bottom: 100px; z-index: 10;cursor:pointer;padding: 10px; background: rgba(1,56,186,.9); box-shadow: 0px 9px 13px #00000059;border: 2px solid #fff; border-radius: 5px;}
#stomach03{  display: inline-block; width: 100%;  z-index: 10;cursor:pointer;padding: 10px;background: rgba(1,56,186,.9);box-shadow: 0px 9px 13px #00000059; border: 2px solid #fff; border-radius: 5px;}

.human_stomach_img span { display:block; color: #fff; font-weight: bold; text-align: center;  font-size: 16px;}




/*대장내시경*/
.human_large_intestine {height: 100%;}
.left_gnb{display: none; vertical-align: top; width: 300px;}
.left_gnb > p { font-weight: bold; font-size: 18px;    margin-bottom: 20px;}
.human_large_intestine_img { width: 80%;   z-index: 10;  display: inline-block;    position: absolute; top: 50%;  left: 50%; transform: translate(-50%, -50%);}
.large_intestine2{background-image: url(../images/edu_video_bodymap_02.jpg)}

#large_intestine01 {  display: inline-block; width: 100%;     margin-bottom:50px;  z-index: 10;cursor:pointer;padding: 10px;background: rgba(1,56,186,.9);box-shadow: 0px 9px 13px #00000059;box-shadow: 0px 9px 13px #00000059; border: 2px solid #fff; border-radius: 5px;}
#large_intestine02 {  display: inline-block; width: 100%;     margin-bottom:50px;  z-index: 10;cursor:pointer;padding: 10px;background: rgba(1,56,186,.9);box-shadow: 0px 9px 13px #00000059; border: 2px solid #fff; border-radius: 5px;}
#large_intestine03 {  display: inline-block; width: 100%;     margin-bottom:50px;  z-index: 10;cursor:pointer;padding: 10px;background: rgba(1,56,186,.9);box-shadow: 0px 9px 13px #00000059; border: 2px solid #fff; border-radius: 5px;}
#large_intestine04{  display: inline-block; width: 100%;     margin-bottom:50px;  z-index: 10;cursor:pointer;padding: 10px;background: rgba(1,56,186,.9);box-shadow: 0px 9px 13px #00000059; border: 2px solid #fff; border-radius: 5px;}
#large_intestine05 {  display: inline-block; width: 100%;    z-index: 10;cursor:pointer;padding: 10px;background: rgba(1,56,186,.9); box-shadow: 0px 9px 13px #00000059;border: 2px solid #fff; border-radius: 5px;}

.human_large_intestine_img span { display:block; color: #fff; font-weight: bold; text-align: center;  font-size: 16px;}





/*메인_PLAY*/
.play {text-align: center;}
.play h1 {padding:20px 0;}
.play  p {padding-bottom:20px;}
.palyer {width: 100%; height: 675px; margin:40px 0; background: #ddd;}
.play_cont {margin-bottom:50px;    width: 90%;
    margin: 0 auto;}
.keywords {padding-top: 40px; border-top: 1px solid #ddd;}
.keywords > ul {display: block;
    text-align: left;
    height: 100%;
    margin: 0 auto;
    width: 90%;}
.keywords > ul > li {   display: inline-block;
    text-align: center;
    /* width: 18.3%; */
    /* margin: 0.4%; */
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding: 3px;
    margin-bottom: 0.4%;}

input::placeholder {
  color: #787878;
    font-weight: bold;
}
input[type=text] {
border:none;
border-bottom: 1px solid #747373;
background: #fff;
border-radius: none;
}

input[type=password] {
border:none;
border-bottom: 1px solid #747373;
background: #fff;
}

input[type=button] {
    border: none;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: bold;
    background: #016cba;
    padding: 0 30px;
    line-height: 41px;
	cursor: pointer;
}

/*foot*/
#foot {padding: 40px 10px; background: #09102c;  color:#ddd;   text-align: center; line-height: 50px;  clear: both;}
#foot > div.bottom_logo {width: 230px; margin: 10px auto;}
#foot > div.bottom_logo > img {width:100%;}

#foot ul > li {display: inline-block;  margin-right: 1%; cursor:pointer;}
#foot ul > li > a {display: block; color: #fff; height: 100%; background:  #182149;border-radius: 5px;font-weight: bold; padding:3px 15px;}
#foot ul > li.foot_icon {    position: relative;display: inline-block;  width: 44px; margin-right: 1%; margin-top:20px;}
#foot ul > li.foot_icon > a {text-indent: -999999px; background:#dfa200; padding:3px; }
#foot ul > li.foot_icon > a img{}
#foot ul > li.foot_icon::after {content: ''; position: absolute; top: 50%; left: 50%;width: 24px; height: 24px;    transform: translate(-50%, -50%);}
#foot ul > li.foot_icon:nth-child(1)::after {background: url(../images/icon_foot_call.png);background-size: cover;}
#foot ul > li.foot_icon:nth-child(2)::after {background: url(../images/icon_foot_mail.png);background-size: cover;}

/*@media*/

@media only screen and (max-width: 800px) { 
#foot {line-height: inherit;}
#foot ul > li {    margin-bottom:10px;}
#foot ul > li.foot_icon > a{  margin-bottom:0px; }

}

@media only screen and (max-width: 820px) { 

.sitemap_body2 > div > p {font-size: 20px;}
.main_list_title {    font-size: 19px;}
.mainbg_cont {padding: 100px 0 100px 0;}
}

@media only screen and (max-width: 460px) { 
#foot ul > li > a {  margin-bottom:10px;}
#foot ul > li.foot_icon > a{  margin-bottom:0px;}
#large_intestine01 {margin-bottom: 5%;}
#large_intestine02 {margin-bottom: 5%;}
#large_intestine03 {margin-bottom: 5%;}
#large_intestine04 {margin-bottom: 5%;}
#large_intestine05 {margin-bottom: 5%;}
li.kategorie {  margin-right: 0; width: 48%;}
.mainbg_cont {font-size: 25px;}
}

@media only screen and (max-width: 400px) {


#foot { line-height: 30px;}
#foot ul > li > a {    margin-bottom: 10px;}

}

@media only screen and (max-width: 350px) {
.modal {    width: 100%;     left: 0;}
#stomach01 {    margin-bottom: 50px;}
#stomach02 {    margin-bottom: 50px;}
.human_stomach_img span {font-size: 14px;}
.sitemap_body2 > div > p {    padding-left: 10px;font-size: 17px;}
.main_list_title {font-size: 15px;}
.sitemap_body2 ul li {font-size: 14px;}
.human_large_intestine_img span {font-size: 14px;}
}