@charset "utf-8";

/* CSS Document */
html,
body {
    font-size: 14px;
	
}

.m_hidden {display:none !important;}

#wrap #header .t_menu_wrap {
    height: 58px;
	padding: 8px 0;
}
#wrap #header .t_menu_wrap .t_menu { 
	width: 90%;
	
}
#wrap #header .t_menu_wrap .t_menu ul li {
	margin: 0 0 0 0px;
	display: none; 
}
#wrap #header .t_menu_wrap .t_menu ul li:last-child { display: block !important;}

.nav {
	height: 110px;
}
.nav .logo { 
	width: auto; 
	font-size: 1.3rem;
}
#gnb .sub_nav {
	top: 108px;
}
.btn_ham_menu img { width: 24px;}

.search_group1 input#schText { 
	width: calc(500px - 64px);
	padding: 0 0px 0 15px; 
}
.search_group1 input#board_search {
    background: url(../images/common/ic_search.png) left center no-repeat;
    width: 30px;
}

#header nav #gnb { 
	width: 90%; 
	justify-content:center;
}
#header nav #gnb li { 
	width: 33%;
}

#gnb > li:hover .sub_nav {
    display: flex;
    width: 100vw;
}

#m_visual { 
	min-width: 100%;
	height: 480px;
}
#m_visual .main_copy { 
	width: 96%;
	top: 200px;
	left: 0;
	margin-left: 0;
}
#m_visual .main_copy .txt01 {
	font-size: 38px;
	line-height: 1.0em;
	margin-bottom: 10px;
}
#m_visual .main_copy .txt02 {
	font-size: 16px;
}

.slide { height:520px;  }
.slide_ul > li { height:520px; }
.m_img1 { background-size: 1300px; }
.m_img2 { background-size: 1300px; }
.m_img3 { background-size: 1300px; }
.m_img4 { background-size: 1300px; }
.show { display:block; }

.search_form2 {
	width: 90%;
    top: 290px;
	left: 5%;
	margin-left: 0;

}
.search_group2 input#schText {
	width: calc(100% - 44px);
    padding: 0 0px 0 10px;

}
.list_wrap { 
	width: 100%;
    margin: 0px auto;

}
.footer_wrap #footer .footer_menu {
	width: 96%;
}
.footer_wrap #footer .footer_menu a {
	font-size: 14px;
}
.footer_wrap #footer .info {
	width: 96%;
	padding: 15px 0;
}
.footer_wrap #footer .info span {
	width: 5px;
}

.subContainer {
	width: 100%;
	padding: 110px 0 0 0;
}
.pd_list_con {
	width: 100%;
}
.pd_list_con .pd_view {
	width: 110px;
	
}

#container{
	width:100%;
	margin:0 auto 25px;
	padding-bottom: 10px;
}
.subContainer .contents { width: 90%; margin: 20px auto 50px;  }

h2 { 
	font-size: 2rem;
	margin: 0px 0 1.875rem 0;
}
h2.mem { 
	font-size: 2rem;
	margin: 0px 0 1.875rem 0;
}
#gnb>li:hover .sub_nav { 
	width: auto;
	padding: 0 1em;
}
.directions {
	width: 96%;
	/*left: 2% !important;*/
}
.directions .detail_wrap {
    display: block;

}

.directions .detail_wrap .img_wrap{
	width: 100%;
}
.directions .detail_wrap .info_wrap {
	width: 100%;
}
.directions .relative_wrap {
	    padding: 20px;

}
.directions .pop_close{


}
/* hamburgerMenu */

.offcanvas {
    height: 100%;
    width: 480px;
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
}

.offcanvas .menu_wrapper {
    -ms-overflow-style: none;
}
.offcanvas .menu_login .wrapper a{
	display: inline-block; 
	margin-right: 10px;
}

.offcanvas .menu_wrapper::-webkit-scrollbar {
    display: none;
}

#offcanvas::-webkit-scrollbar {
    display: none;
}

#offcanvas {
	margin-right:-480px;
	transition: 0.5s;
	/*transition: margin-right .5s;*/
	-ms-overflow-style: none;
	
}
#offcanvas.open{
	margin-right:0;
}

/* Style the tab */
.offcanvas .tab {
	float: left;
	background-color: #33c5be;
	width: 160px;
	height:100%;
	color: #fff;
	padding-top:58px;
	position:relative;
}

.offcanvas .tab .fixed_wrapper{
	position:fixed;
	background-color: #33c5be;
	height:100%;
	width:160px;
}

.offcanvas .h_tablinks {
	display: block;
	background-color: inherit;
	color: #fff;
	padding: 0 20px;
	width: 100%;
	border: none;
	outline: none;
	text-align: left;
	cursor: pointer;
	font-size: 16px;
	height: 53px;
	line-height: 53px;
}
.offcanvas .h_tablinks.point {
    background: #570012;
}

.offcanvas .h_tablinks:hover {
	background-color: #6e0118;
}

.offcanvas .h_tablinks.active {
  background-color: #fff;
  color: #111;
}

/* Style the tab content */
.offcanvas .menu_wrapper {
    width: calc(100% - 160px);
    float: left;
}

.offcanvas .h_tabcontent {
	display: none;
	margin-top:58px;
}


.offcanvas .h_tabcontent .sub_nav > li > a {
    height: 52px;
    line-height: 52px;
    font-size: 16px;
    color: #333;
    padding: 0 30px;
    border-bottom: 1px solid #e1e1e1;
	display:block;
}

.offcanvas .menu_login {
    background-color: #404040;
    height: 58px;
    line-height: 58px;
    font-size: 16px;
    color: #fff;
    padding: 0 30px;
	position: absolute;
	top:0;
	width: calc(100% - 160px);
	z-index:999;
}
.offcanvas .menu_login .wrapper{
	position:relative;
	width:280px;
	height:100%;
	font-size:16px;
}
.offcanvas .menu_login a,.menu_login a:hover {
	color:#fff;
}

.offcanvas .right_p {
	position:absolute;
	right:0px;
	top:0;
}
.offcanvas .btn_close {
    width: 30px;
    height: 30px;
    position: relative;
    text-indent: -9999px;
    top: 0;
    right: 0;
}
.offcanvas .btn_close:before,.btn_close:after{
  content:'';
  width:30px;
  height:1px;
  position:absolute;
  left: 50%;
  top: 50%;
  border-radius:4px;
  background:#fff;
}
.offcanvas .btn_close:before{
  transform:translate(-50%,-50%) rotate(-45deg)
}
.offcanvas .btn_close:after{
  transform:translate(-50%,-50%) rotate(45deg)
}
.offcanvas .h_tabcontent .depth3 {
	display: none;
	border-bottom: 1px solid #ddd;
	padding:20px 32px;
}
.offcanvas .h_tabcontent .depth3 .menu3 {
    font-size: 15px;
    line-height: 32px;
    color: #111;
}

.offcanvas .h_tabcontent .depth3 .menu3:before {
    content: "";
    width: 4px;
    height: 4px;
    background: #ddd;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
    margin-bottom: 4px;
}

.offcanvas .h_tabcontent .depth3 .menu3 a {
    color: #111;
}

.offcanvas .h_tabcontent .depth3 .menu3 a:hover {
    text-decoration: underline;
}
.offcanvas .h_tabcontent .menu2_link { 
    position:relative; 
}

.offcanvas .h_tabcontent .menu2_link.active {
	color:#1d249f !important;
	font-weight:500;
    transition: 0.5s;
}
#header .sub_nav.on .link:after {
    content: url(/images/common/ic_external_sm_on.png);
    font-weight: 600;
    margin-left: 8px;
    font-size:13px;
}     

#header .sub_nav .link:after {
    content: url(/images/common/ic_external_sm.png);
    font-weight: 600;
    margin-left: 5px;
    font-size:13px;
}

#offcanvas .sub_nav .link:after {
    content: url(/images/common/ic_external_sm.png);
    font-weight: 600;
    margin-left: 8px;
    font-size:13px;
}
.sub_menu .link:after {
    content: url(/images/common/ic_external_sm.png);
    font-weight: 600;
    margin-left: 8px;
    font-size:13px;
}

/*.offcanvas .h_tabcontent .menu2_link:after {
  content:'';
  display:inline-block;
  width:9px;
  height:9px;
  margin:-5px 12px auto auto;
  vertical-align:middle;
  border-right:2px solid #aaa;
  border-top:2px solid #aaa;
  transform:rotate(135deg);
  position:absolute;
  top:25px;
  right:20px;
  transition: 0.5s;
}
.offcanvas .h_tabcontent .menu2_link.active:after {
  content:'';
  display:inline-block;
  width:9px;
  height:9px;
  margin:-5px 12px auto auto;
  vertical-align:middle;
  border-right:2px solid #aaa;
  border-top:2px solid #aaa;
  transform:rotate(-45deg);
  position:absolute;
  top:30px;
  right:20px;
  transition: 0.5s;
}
*/
/* Clear floats after the tab */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}	


/* gnb 슬라이드
#wrap #header .gnb_wrap {width:100%; height: 42px; margin: 0 auto 0; border-top: 1px #dfdfdf solid;border-bottom: 1px #dfdfdf solid; background: #fff;}
#wrap #header .gnb_wrap #gnb { width:100%; height: 42px; margin: 0 auto; position:relative; overflow:hidden; }
#wrap #header .gnb_wrap #gnb ul { width:100%; float:left; display:block; font-size:0; white-space:nowrap; position:relative; }
#wrap #header .gnb_wrap #gnb li {-webkit-box-sizing:border-box; box-sizing:border-box; display:inline-block; }
#wrap #header .gnb_wrap #gnb .dep1{ float:left;width:auto; margin: 0 1.7%; text-align:center;}
#wrap #header .gnb_wrap #gnb .dep1:first-child { margin-left:20px; }
#wrap #header .gnb_wrap #gnb .dep1_menu a { display:inline-block;width:auto;height:42px;font-size:14px;font-weight:500;line-height: 42px; text-align:center; color: #505050; }
#wrap #header .gnb_wrap #gnb .dep1_menu a:hover { color: #000;}
#wrap #header .gnb_wrap.pc_hidden.menu_fixed { position: fixed; top: 0; z-index: 9999; border-bottom: 1px solid #ddd; }
*/
#container .grid { width: 33%; }

.login_wrap { width: 100%;}
.join_wrap  { width: 100%;}
.agree_div h4 {    font-size: 1.25rem;}
div#daumRoughmapContainer1635916719727 {
    width: 100% !Important;
}
.downlist_wrap ul.my_list li { width: 49%; margin-right: 1%; margin-bottom: 10px;}
.downlist_wrap ul.my_list li img { max-height:180px; max-width: 100%; }

/*intro */
.intro_wrap .medical  .con { width: 80%; min-width: 300px; height: 400px; padding: 50px; }
.intro_wrap .medical  .tit { font-size: 2.5rem; font-weight: 600; margin-bottom: 30px; line-height: 1em;}
.intro_wrap .medical  .tit span {font-size: 1.125rem; }
.intro_wrap .medical  p { font-size: 1rem; margin-bottom: 20px; }
.intro_wrap .medical .btn { font-size: 1.125rem; bottom: 50px; width: calc(100% - 100px); height: 40px; line-height: 40px;  }

.medical_bg_l { background-size: 50%; }
.medical_bg_r { background-size: 50%; }

.intro_wrap .others  .con { width: 80%; min-width: 300px; height: 400px; padding: 50px; }
.intro_wrap .others  .tit { font-size: 2.5rem; margin-bottom: 25px;}
.intro_wrap .others  .tit span {font-size: 1.125rem; margin-top: 10px; }
.intro_wrap .others  p {font-size: 1rem; margin-bottom: 20px; }
.intro_wrap .others .btn { font-size: 1.125rem; bottom: 50px; width: calc(100% - 100px); height: 40px; line-height: 40px; }

.path_container {    
    border-bottom: none;
	display: block;
}
.path_container.on {top: 64px;}

.sub_visual .path_container.on {
	top: 50px;}
	/* path */

	.path {  height: auto; /*overflow: hidden;*/ position:relative; z-index:1000; }
	.path::after { display: block; content: ''; clear: both; }
	.path .home { width: 44px; height: 44px; line-height: 44px; background: #3b78bd;}
	.path .depth_btn { padding-left: 5%;line-height: 44px; font-size: 14px; height: auto; /*background: #3b78bd;*/ min-width:100%; border-right: none;}
	.path .depth_btn:before { height: 44px; }
	.path .depth_btn i {right: 5%;}
	.path>div.depth1, .path>div.depth2 { width: 100%; }
	.path>div.depth3 { border-top: 1px solid #ddd; width: 100%; }
	.path>div.depth3 .depth_btn:before { display: none; }
	.path [class^="depth"] ul { top: 44px; }
	.path [class^="depth"] ul li { height: 32px; font-size: 12px; line-height: 32px; padding: 0px 5%;}
	.path>div.depth.user { width: calc(100% - 44px); }
	.path .depth_btn.depth_wide { min-width: 100%; height: 44px; overflow:hidden; }
	.product_wrap .product .order_option .download_wrap { display: block; }
	.product_wrap .product .order_option .download_wrap .btn_download { margin-left:0px; }

@media screen and (max-width:1000px) {
.mypage_wrap { width:100%; justify-content: inherit;flex-wrap: wrap; } 
.mypage_info {width:100%; }
.mypage_state {width:100%; margin-top:1.25rem; padding: 1.5rem 0; }
.mypage_state .state .circle01 { width: 4.25rem; height: 4.25rem; line-height: 4.25rem; border-radius: 3.125rem; font-size: 2.5rem; background-size: 30px;}
.mypage_state .state .circle02 { width: 4.25rem; height: 4.25rem; line-height: 4.25rem; border-radius: 3.125rem; font-size: 2.5rem; background-size: 30px;}
.mypage_state .state .circle03 { width: 4.25rem; height: 4.25rem; line-height: 4.25rem; border-radius: 3.125rem; font-size: 2.5rem; background-size: 30px;}
.mypage_state .state .circle04 { width: 4.25rem; height: 4.25rem; line-height: 4.25rem; border-radius: 3.125rem; font-size: 2.5rem; background-size: 30px;}
.mypage_state .state .circle05 { width: 4.25rem; height: 4.25rem; line-height: 4.25rem; border-radius: 3.125rem; font-size: 2.5rem; background-size: 30px;}

}

@media screen and (max-width:800px) {
.search_group1 input#schText { width: calc(330px - 64px); }
.slide { height:480px;  }
.slide_ul > li { height:480px; }
.m_img1 { background-size: 1200px; }
.m_img2 { background-size: 1200px; }
.m_img3 { background-size: 1200px; }
.m_img4 { background-size: 1200px; }	

#container .grid {width: calc(100% - 2px) !important;left:50% !important;transform: translateX(-50%) !important;}
.product_wrap .product .info_wrap { width: calc(100% - 102px); float: none; padding: 0px 0 0 1.0rem;}	
.product_wrap .product .info_wrap .price { width: auto; text-align: left; display: block; float: left;    font-size: 1.2rem; }
.product_wrap .product .info_wrap .code {    font-size: 1.25rem;}
.product_wrap .product .info_wrap .cate { margin: 0.25rem 0 0.25rem; }
.product_wrap .product .sel_option { width: 100%; float: none; }	
.product_wrap .product .order_option { width: 100%; float: none; padding: 0;}	
.product_wrap .product .option li {    margin-bottom: 0;}
.product_wrap .product .option li span { width: auto; margin-right: 5px;}
.product_wrap .product .sel_price { display: none; }
.total_wrap {    padding: 1.0rem;}
.total_wrap .i_box { line-height: inherit; }
	
.btn_area a:first-child { margin-bottom: 10px;}
a.btn_add_m { width: 100%; height: 45px; line-height: 44px; box-sizing: border-box;}
a.btn_confirm_m {width: 100%; height: 45px; line-height: 44px; box-sizing: border-box;}
a.btn_cancel_m {width: 100%; height: 45px; line-height: 44px; box-sizing: border-box;}
a.btn_move_top { bottom: 15px; right: 15px; }
.pd_list_con .pd_category {    font-size: 1.25rem;}
.form_table th { width: 100%; display: block;    padding: 10px;}
.form_table td { width: 100%; display: block;}
	.block { display: block; }
	.txt_box_s { width:60px; }
	.orderlist_wrap { padding: 0.625rem;}
	.form_table .sub_tit {    display: block;}
	.downlist_wrap ul.my_list { flex-wrap: wrap;}
	
	
.intro_body  {min-height: 650px; }
.intro_wrap { flex-wrap: wrap; }
.intro_wrap .medical {width: 100%; height: 50%;  }
.intro_wrap .others {width: 100%; height: 50%; }
.medical_bg_l { background-size: 25%; }
.medical_bg_r { background-size: 25%; }
	
.intro_wrap .medical .con { width: calc(100% - 60px); max-width: 300px; height: auto; min-height: 250px; padding: 30px; }
.intro_wrap .others .con { width: calc(100% - 60px); max-width: 300px; height: auto; min-height: 250px; padding: 30px; }
.intro_wrap .medical .tit { font-size: 2rem; margin-bottom: 15px; }
.intro_wrap .others .tit { font-size: 2rem; margin-bottom: 15px; }
.intro_wrap .medical .btn {width: calc(100% - 60px);bottom: 30px; }
.intro_wrap .others .btn {width: calc(100% - 60px);bottom: 30px; }
.intro_wrap .medical .con p.eng { display: none; }
.intro_wrap .others .con p.eng { display: none; }	

	
}
@media screen and (max-width:640px) {
	/*.offcanvas .btn_close { top: 14px; } */
	#offcanvas {margin-right: -100%;}
	.offcanvas { width: 100%; margin-right: -100%; }
	.offcanvas .tab { width: 130px; padding-top: 54px; }
	.offcanvas .tab .fixed_wrapper { width: 130px; }
	.offcanvas .h_tablinks { height: 55px; line-height: 55px; font-size: 14px; padding: 0 12px; }
	.offcanvas .menu_wrapper { width: calc(100% - 130px); }
	.offcanvas .menu_login .wrapper { width:90%; }
	.offcanvas .menu_login {width: calc(100% - 130px);height: 54px;line-height: 54px;font-size: 15px;padding: 0 20px;}
	.offcanvas .h_tabcontent { margin-top: 54px; }
	.offcanvas .h_tabcontent .sub_nav>li>a { height: 54px; line-height: 54px; font-size: 15px; padding: 0 20px; }
	.offcanvas .h_tabcontent .menu2_link:after { top: 24px; right: 12px; }
	.offcanvas .h_tabcontent .menu2_link.active:after { top: 30px; right: 12px; }
	.offcanvas .h_tabcontent .depth3 { padding: 18px; }
	.offcanvas .h_tabcontent .depth3 .menu3 { font-size: 14px; line-height: 24px; }
	
	.search_group1 input#schText { width: calc(200px - 64px);	}
	
	.directions {width: 100%;overflow-x: hidden;/*left: 0 !important;*/}
	
	.downlist_wrap ul.my_list li { width: 100%; margin-right: 0; margin-bottom: 10px;}
	.downlist_wrap ul.my_list li .jg-caption { display: block;}

	.path .depth_btn i {right: 10%;}
	.path .depth_btn { padding-left: 10%;}
	.path [class^="depth"] ul li { padding: 0px 10%;}
}
@media screen and (max-width:380px) {
	#wrap #header .t_menu_wrap .t_menu { 
	width: 94%;
	
}
	
.subContainer .contents { width: 94%; }
	.search_group1 input#schText { width: calc(200px - 64px);	}
}
