@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face { font-family: 'NanumBarunGothic'; font-style: normal; font-weight: 400; src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot'); src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype'); }
@font-face { font-family: 'InfinitySans-BoldA1'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/InfinitySans-BoldA1.woff') format('woff'); font-style: normal; }
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');

/*  */
.h-100{ height: 100% !important; }
.align-items-center{ -webkit-box-align: center !important; align-items: center !important;}
.mx-auto{margin-left: auto !important; margin-right: auto !important;}
.container {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto; }
 .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -20px;
  margin-left: -20px;
  }

/* Common Start */
body, p, ul{margin:0; padding:0; line-height:1.5}
body{font-family:'NanumBarunGothic'}
div.header{height:70px; position:relative; z-index:3}
p.logo{position:absolute; top:50%; left:4%; margin-top:-25px; height:50px}
p.logo img{height:100%}
ul.menu_btn{position:absolute; top:0; left:50%; margin-left:-18.5%}
ul.menu_btn li{list-style:none; float:left; padding:21.5px 25px; font-size:16px; font-weight:bold; position:relative}
ul.menu_btn li:last-child{border-bottom:0}
ul.menu_btn a{color:#142849; text-decoration:none}
.activepage{color:#2982b7 !important}
.submenu_btn{position:absolute; top:100%; left:0; width:200px; visibility:hidden}
.submenu_btn li{float:none !important; padding: 0 !important; border-bottom:solid 1px #e9eaec}
.submenu_btn li a{background:#fff; display:block; height:45px; line-height:45px; text-align:center}
ul.menu_btn li:hover ul.submenu_btn{visibility:visible}
p.login_btn{position:absolute; top:50%; right:4%; margin-top:-17.5px; cursor:pointer; height:35px}
p.login_btn img{height:100%}
a.login_area{position:absolute; top:50%; right:4%; margin-top:-17.5px; cursor:pointer; height:35px}
a.login_area img{height:100%}
div.submenu_title_wrap{height:130px; text-align:center; line-height:140px}
p.submenu_title{font-size:1.8em; display:inline-block; color:#ffffff; font-weight:bold; font-family:'InfinitySans-BoldA1'}
p.content_title{font-size:1.6em; font-weight:bold; margin-bottom:25px; color:#142849; font-family:'InfinitySans-BoldA1'}
.pop{background:#fff; width:571px}
.pop_top{padding:23px 20px; overflow:hidden}
.pop_top h4{margin: 0; float:left; color:#ffffff}
.pop_con{clear:both; overflow:hidden; box-sizing:border-box; padding:0 48px 40px}
.pop_bottom{padding: 20px 20px 45px; overflow:hidden; position:relative}
.popup_close{float:right; width:18px; cursor:pointer; position: fixed; right: 3%}
.popup_close img{width:100%}
div.popupwrap{width:475px; min-height:100px}
p.logintitle{font-size:30px; border-bottom:solid 2px #000; width:35%; margin:0 auto 25px; text-align:center}
div.logininputwrap{position:relative; margin-bottom:25px}
div.logininputwrap input{height:50px; width:100%; border:solid 1px #000; font-size:18px; padding-left:100px; box-sizing:border-box}
p.logininputtxt{position:absolute; top:50%; left:15px; font-size:18px; color:#000; margin-bottom:0; margin-top:-13.5px}
a.loginbtn{width:100%; height:50px; line-height:50px; display:inline-block; text-align:center; font-size:18px; margin-bottom:25px; cursor:pointer; background:#000; color:#fff}
p.loginleftbtn{float:left; font-size:15px; cursor:pointer}
p.loginleftbtn input{width:15px; height:15px !important; margin:0 5px 0 0; vertical-align:-1.5px}
a.loginright1{float:right; font-size:15px}
a.loginright1:link{color:#000 !important; text-decoration:none}
a.loginright1:visited{color:#000 !important; text-decoration:none}
a.loginright2{float:right; font-size:15px; margin-right:15px}
a.loginright2:link{color:#000 !important; text-decoration:none}
a.loginright2:visited{color:#000 !important; text-decoration:none}
div.footerwrapwrap{background:#222634}
div.footerwrap{width:92%; margin:0px auto; padding:25px}	/* 2022-05-04 푸터 이미지 css 수정 */
p.footertxt1{font-size:13px; color:rgba(255,255,255,.7);; margin-bottom:8px}
p.footertxt1 .blue{color:#2982b7}
p.footertxt2{font-size:12px; text-align:center; color:rgba(255,255,255,.7);}
.menubtn{position:absolute; top:50%; right:calc(4%); margin-top:-13.5px; display:none; height:27px}
.menubtn img{height:100%}
.dimmed{position:fixed; top:0; right:0; bottom:0; left:0; background:#000; opacity:0.8; z-index:3; display:none}
.sidenav{height:100%; width:0; position:fixed; z-index:3; top:0; right:0; background:#ffffff}
.sidenavwrap{padding-left:0; margin-bottom:0}
.sidenavdepth1{list-style:none; border-bottom:solid 1px #e9eaec; font-size:18px; color:#142849; text-align:center; font-weight:bold}
.sidenavdepth1:nth-child(1){overflow:hidden; padding:25px 25px}
.sidenavdepth1 a{cursor:pointer; display:block; padding:25px 25px; text-decoration:none; color:#000}
.sidenavdepth1 span{float:right; cursor:pointer}
.sidenavdepth1 span img{height:18px}
.sidenavdepth2{list-style:none; font-size:18px; padding-bottom:25px; display:none; text-align:center; font-weight:normal}
.sidenavdepth2 a{color:#000; padding:0; display:inline-block; text-decoration:none}
/* Common End */

/* Home Start */
div.slider{height:495px}
.swiper-container{height:100%}
.slidetxtwrap{width:75.4%; height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 12.3%}
.slidetxt1{font-size:40px; line-height:42px; font-weight:bold; transition:all 1.5s; transform:translate3d(-20%, 0, 0); opacity:0; margin-bottom:20px; color:#ffffff; font-family: 'Noto Sans KR', sans-serif }
.swiper-slide-active .slidetxt1{transform:translate3d(0, 0, 0); opacity: 1}
.slidetxt2{ font-size:30px; line-height:40px; margin-bottom:0; transition:all 1.5s; transition-delay:1.3s; transform:translateY(30px); opacity:0; color:#bafcff; font-family: 'Noto Sans KR', sans-serif; word-break: keep-all}
.swiper-slide-active .slidetxt2{transform:translateY(0); opacity:1}
div.content{padding:50px 0; width:1340px; margin:0 auto;}
div.icon_content{padding:5px 0 30px; width:1340px; margin:0 auto; text-align:center}
div.guide_wrap{margin-top:50px; display:flex}
div.guide_img{width:calc(35% - 25px); background:#0099ff; margin-right:25px}
div.guide_txt_wrap{word-break:keep-all; text-align:left; width:calc(65% - 25px); margin-left:25px; font-size:18px}
.guide_title{font-size:28px; font-weight:bold}
.guide_small_title{font-weight:bold}
p#guide_info{font-size:18px; font-weight:bold}
p#guide_info span{color:#FF0000}
p#define_img{margin-bottom:25px}
p#define_txt{font-size:18px}
p#define_txt span{font-weight:bold}
div.guidemenu_wrap1{overflow:hidden; display:block}
div.guidemenu_wrap2{display:none}
p#guidemenu_main_title{font-size:18px; font-weight:bold}
div.guidemenu{width:calc((100% - 250px)/5); min-height:100px; float:left; margin:0 25px}	/* 2022-05-04 메인 메뉴 아이콘 갯수 수정 */
.guidemenu_pic{width:130px; margin:25px auto; display:block}
.guidemenu_pic img{width:100%}
.guidemenu_title{font-size:18px; margin-bottom:10px; font-weight:bold; color:#092344; font-family:'InfinitySans-BoldA1'; display:block; text-decoration:none}
.guidemenu_txt{font-size:15px; color:#333333; word-break: keep-all; display:block; text-decoration:none}
.guidemenu_circle {border-radius: 50%; -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 rgba(90, 153, 212, 0.7); transform: translate3d(0, 0, 0); }
.guidemenu_circle:hover {background: #e9f4ff; animation: circle 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1); }
@keyframes circle {
  to {
    box-shadow: 0 0 0 12px transparent, 0 0 0 24px rgba(90, 153, 212, 0);
  }
}
/* Home End */

/* Model Start */
p.datamodel_txt{font-size:0.85em}
.back_blue{background:#3D6AB4}
.curve{color:#fff; border-radius:6px; border:none; font-size:16px; padding:10px; text-decoration:none; word-break:break-all}
.curve p:nth-child(1){/*float:right;*/ min-height:40px}
.curve p:nth-child(1) img{height:100%}
.curve p:nth-child(2){float:left}
.f_bold{font-weight:700 !important}
.f_black{color:#000 !important}
.model_first{width:100%; display:flex; margin-top:20px}
.model_first_title{width:200px; box-sizing:border-box}
.model_first_con{width:85%; padding:0 15px; box-sizing:border-box; font-size:1em; display:table}
.model_first_con p{display:table-cell; vertical-align:middle; text-align: left; font-weight: bold }
.model_tb_wrap{overflow:hidden}
.model_tb{table-layout:fixed; border-collapse:collapse; width:calc(33.3% - 13.3px); border-top:solid 1px #e4e9eb; border-bottom:solid 1px #e4e9eb; float:left; margin-top:20px; margin-left:10px; margin-right:10px}
.model_tb:nth-child(3n+1){clear:both; margin-left:0; margin-right:10px}
.model_tb:nth-child(3n){margin-left:10px; margin-right:0px}
.model_tb th, .model_tb td{padding:8px 15px; border:solid 1px #e4e9eb; color:#5c7a86; font-size:0.85em; word-break:keep-all}
.model_tb th{text-align:center; font-weight:normal}
.model_tb td{text-align:left}
.m_t{background-color: #e4e9eb; width: 10%}
.changelog_tb_wrap{max-height:290px; overflow-y:auto; border-top:solid 1px #e4e9eb}
.changelog_tb{table-layout:fixed; border-collapse:collapse; width:100%}
.changelog_tb th, .changelog_tb td{padding:15px 20px; color:#000; font-size:0.95em; border-bottom:solid 1px #e4e9eb}
.changelog_tb tr:nth-child(even) th, .changelog_tb tr:nth-child(even) td{background:#f2f2f2}
#chart-container { text-align: center }
.gotop{ position:fixed; width:3em; height:3em; background:#183850; bottom:2em; right:3em; display:flex; justify-content:center;
  align-items:center; text-decoration:none; color:white; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); opacity: .8;
}
.gotop:hover { opacity: 1 }
.model_chart_img { text-align: center }
.model_chart_img img { max-width: 700px; width: 100% }

.down_btn{height:15px; width:20px; display:inline-block; margin:0 5%; cursor:pointer}
.down_btn img{height:100%}
/* Model End */

/* Browser Start */
.browsersrc_pc_wrap, .browsersrc_mobile_wrap{background:#fff; box-sizing:border-box; z-index:1}
div.browser_wrap:nth-child(1){width:calc(15% - 15px); margin-right:15px}
div.browsersrc_wrap{overflow:hidden; margin-bottom:35px}
.browsersrc_input{float:left; height:47px; width:calc(100% - 80px); text-indent:10px; box-sizing:border-box; font-size:14px; background: #f9f9f9; border: #b7b7b7 solid 1px; border-radius: 3px; box-shadow: 0 0 3px #ccc;}
.browsersrc_input::placeholder{color:#000}
a.browsersrc_btn{float:left; width:80px; height:47px; background:#3D6AB4; line-height:47px; font-size:13px; color:#fff; cursor:pointer; text-align:center; background: linear-gradient(#2070bf, #3d6ab4); border-radius: 0 3px 3px 0;}
.browsercate_wrap li{list-style:none}
.browsercate_wrap a{padding:15px 10px; display:block; box-sizing:border-box; cursor:pointer}
.browsermaincate a{font-size:15px; background:#f2f2f2; border-bottom:solid 1px #084a8d; color:#084a8d; font-weight:bold}
.browsersubcate{display:none}
.browsersubcate a{font-size: 13px; background:transparent; border-bottom:solid 1px #084a8d; color:#084a8d; font-weight:normal}
div.browser_wrap{float:left}
div.browser_wrap:nth-child(2){width:calc(85% - 15px); margin-left:15px}
.browser_tb{table-layout:fixed; border-collapse:collapse; width:100%}
.browser_tb:last-child{border-bottom:solid 1px #e9e9e9}
.browser_tb th, .browser_tb td{padding:12px; color:#000; font-size:13px; word-break:keep-all; text-align:left; border:solid 1px #e9e9e9; border-bottom:0}
.browser_tb .darkblueback{background:#084a8d; color:#fff}
.browser_tb th:not(.darkblueback){background:#f9f9f9}
.browser_m, .browser_j, .browser_f, .kostom, .loinc, .snomed, .samsung, .apple, .google, .ieee, .question, .relation{display:none}
.browser_m_btn, .browser_j_btn, .browser_f_btn{cursor:pointer}
.browser_f td:nth-child(1){text-align:left; padding:15px}
.browser_f .seconddepth{padding-left:15px}
.browser_f .thirddepth{padding-left:30px}
.browser_j td{padding:20px}
.browser_tb .clear_left{border-left:0}
.browser_tb .clear_right{border-right:0}
.browser_tb .clear_top{border-top:0}
.browser_tb .clear_bottom{border-bottom:0}
.browser_tb .text_left{text-align:left}
.browser_tb .text_right{text-align:right}
.browser_tb .text_top{text-align:top}
.browser_tb .text_bottom{text-align:bottom}

.browser1 th, .browser1 td{padding:8px !important; font-size:11px !important;}
.browser2 th, .browser2 td{padding:8px !important; font-size:11px !important;}
.browser3 th, .browser3 td{padding:8px !important; font-size:11px !important;}
.browser4 th, .browser4 td{padding:8px !important; font-size:11px !important;}
.browser5 th, .browser5 td{padding:8px !important; font-size:11px !important;}
.browser6 th, .browser6 td{padding:8px !important; font-size:11px !important;}
.browser7 th, .browser7 td{padding:8px !important; font-size:11px !important;}

.pc_ver{display:block}
.mobile_ver{display:none}
.browsercheck_ic{width:40px; display:inline-block}
.browsercheck_ic img{width:100%}
.browser_img img{width:100%}
.mapping_btn{height:20px; width:20px; display:inline-block; margin:0 7px 0 0; cursor:pointer}
.mapping_btn:first-child{vertical-align:middle}
.mapping_btn:last-child{line-height:20px; color:#3D6AB4; text-align:center; text-decoration:none; font-size: 14px}
.mapping_btn img{height:100%}
.browsersrc_select{width:100%; height:47px; padding-left:10px; font-size:15px}
.browsersrc_wrap [type="radio"]:checked, .browsersrc_wrap [type="radio"]:not(:checked){position:absolute; left:-9999px}
.browsersrc_wrap [type="radio"]:checked + label, .browsersrc_wrap [type="radio"]:not(:checked) + label{position:relative; padding-left:28px; cursor:pointer; line-height:22.5px; display:inline-block; margin:13px 10px 13px 0}
.browsersrc_wrap [type="radio"]:first-child + label{margin-right:10px}
.browsersrc_wrap [type="radio"]:checked + label:before, .browsersrc_wrap [type="radio"]:not(:checked) + label:before{content:''; position:absolute; left:0; top:0; width:18px; height:18px; border:1px solid #000; border-radius:100%; background:#fff}
.browsersrc_wrap [type="radio"]:checked + label:after, .browsersrc_wrap [type="radio"]:not(:checked) + label:after{content:''; width:12px; height:12px; background:#000; position:absolute; top:4px; left:4px; border-radius:100%}
.browsersrc_wrap [type="radio"]:not(:checked) + label:after{opacity:0; transform:scale(0)}
.browsersrc_wrap [type="radio"]:checked + label:after{opacity:1; transform:scale(1)}
.browser_item{overflow:hidden}
.browser_item li{list-style:none; display:inline-block; position:relative; padding:0 15px 0 12px; margin:5px 0}
.browser_item li:first-child{padding-left:0}
.browser_item li:last-child{padding-right:0}
.browser_item li:not(:last-child):after{content:""; position:absolute; right:0; top:0; height:1.5rem; border-left:1px solid #d8d8d8}
.browser_Property{overflow:hidden}
.browser_Property li{list-style:none; display:inline-block; position:relative; padding:0 15px}
.browser_Property li:first-child{padding-left:0}
.browser_Property li:last-child{padding-right:0}
.browser_Property li:not(:last-child):after{content:""; position:absolute; right:0; top:0; height:1.5rem; border-left:1px solid #d8d8d8}
.browser_m_btn, .browser_j_btn, .browser_f_btn{cursor:pointer; background:#3D6AB4; height:30px; width:5em; display:inline-block; line-height:30px; margin:10px 5px; color:#fff; border-radius:5px; text-align: center}

.select-css { display: block; color: #444; line-height: 1.3; padding: 0.6em 1.4em 0.5em 0.8em; box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); border-radius: 3px 0 0 3px; -moz-appearance: none; -webkit-appearance: none;
  appearance: none; background-color: #fff; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); background-repeat: no-repeat, repeat; background-position: right 0.7em top 50%, 0 0; background-size: 0.65em auto, 100%;
}

/* Browser End */

/* Resources Start */
div.notice_txt{font-size:0.85em}
p#resources_txt{font-size:18px}
.resources_select{width:100%; font-size:18px; padding:15px 20px; margin-top:50px}
.resources_tb{table-layout:fixed; border-collapse:collapse; width:100%; border-top:1px solid #AEB7C0; margin-top:50px}
.resources_tb:first-child{margin-top:0}
.resources_tb th, .resources_tb td{padding:10px 20px; border-bottom: solid 1px #D2D8DD; color:#000; font-size:18px; text-align:center}
.resources_tb th{background:#F6F7F9}
.resources_tb th:nth-child(1), .resources_tb td:nth-child(1){width:15%; border-right: solid 1px #D2D8DD}
.resources_tb th:nth-child(2), .resources_tb td:nth-child(2){width:85%}
.resources_tb td:nth-child(2){text-align:left}
div.resourcesinfo_wrap{margin-top:50px}
p.resourcesinfo_title{font-size:25px; font-weight:bold; margin-bottom:25px}
.tab{overflow:hidden; border:1px solid #ccc; background-color: #f1f1f1}
.tab button {background-color:inherit; float:left; border:none; outline:none; cursor:pointer; padding:14px 16px; transition:0.3s; font-size:18px}
.tab button:hover{background-color:#ddd}
.tab button.tab_active{background-color:#ccc}
.tabcontent{display:none; padding:20px; border:1px solid #ccc; border-top:none; height:250px; overflow-y:auto; background:#fff}
p.resourcesinfo_tb_title{font-size:25px; font-weight:bold; margin-bottom:25px}
p.resourcesinfo_tb_txt{font-size:18px}
.card_wrap{width:100%; height:auto}
.card{overflow:hidden; border-top:solid 1px #D2D8DD; margin-top:50px;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
}
.card li{float:left; border-bottom:solid 1px #D2D8DD; border-left:solid 1px #D2D8DD; width:33.3%; height:68px; position:relative; list-style:none; box-sizing:border-box}
/* .card li:nth-child(3n){border-right:solid 1px #D2D8DD} */
.card li:nth-of-type(3n){border-right:solid 1px #D2D8DD}
.card li:last-child{border-right:solid 1px #D2D8DD}
.card li:hover{cursor:pointer}
.card li:hover .card-front{-moz-transform:rotateX(50deg); -ms-transform:rotateX(50deg); -webkit-transform:rotateX(50deg); transform:rotateX(50deg); -moz-transform:perspective(1000) rotateX(50deg); -webkit-transform:perspective(1000) rotateX(50deg); transform:perspective(1000) rotateX(50deg)}
.card li:hover .card-back{z-index:950; -moz-transform:rotateX(0deg); -ms-transform:rotateX(0deg); -webkit-transform:rotateX(0deg); transform:rotateX(0deg); -moz-transform:perspective(1000) rotateX(0deg); -webkit-transform:perspective(1000) rotateX(0deg); transform:perspective(1000) rotateX(0deg); background:#183850; color:#fff}
.card .card-front, .card .card-back{text-align:right; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transition:-moz-transform 400ms; -o-transition:-o-transform 400ms; -webkit-transition:-webkit-transform 400ms; transition:transform 400ms; display:block; height:100%; position:absolute; width:100%}
.card .card-front{-moz-transform:perspective(1000) rotateX(0); -webkit-transform:perspective(1000) rotateX(0); transform:perspective(1000) rotateX(0); z-index:900}
.card .card-back{-moz-transform:rotateX(-180deg); -webkit-transform:rotateX(-180deg); transform:rotateX(-180deg); z-index:800}
.card .card-name{font-size:0.85em; margin:20px 20px 10px; word-break:break-all; width:calc(100% - 40px); float:right}
.card .card-level{font-size:14px; margin-right:20px; float:right}
.close{cursor:pointer; position:absolute; right:0; top:0; background:#fff; color:#111; text-decoration:none; font-size:18px; padding:10px 20px}
.active{width:100% !important; height:100% !important}
.active .all-content{width:calc(100% - 50px); padding:100px 25px 50px}
.animated{-webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -moz-animation-duration:1s; -ms-animation-duration:1s; -o-animation-duration:1s; animation-duration:1s}
.animated.hinge{-webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-duration:2s}

@-webkit-keyframes bounceIn {
  0% {opacity:0; -webkit-transform:scale(0.3)}
  50% {opacity:1; -webkit-transform: scale(1.05)}
  70% {-webkit-transform:scale(0.9)}
  100% {-webkit-transform:scale(1)}
}

@-moz-keyframes bounceIn {
  0% {opacity:0; -moz-transform:scale(0.3)}
  50% {opacity:1; -moz-transform:scale(1.05)}
  70% {-moz-transform:scale(0.9)}
  100% {-moz-transform: scale(1)}
}

@-o-keyframes bounceIn {
  0% {opacity:0; -o-transform:scale(0.3)}
  50% {opacity:1; -o-transform:scale(1.05)}
  70% {-o-transform:scale(0.9)}
  100% {-o-transform:scale(1)}
}

@keyframes bounceIn {
  0% {opacity:0; transform:scale(0.3)}
  50% {opacity:1; transform:scale(1.05)}
  70% {transform:scale(0.9)}
  100% {transform:scale(1)}
}

.bounceIn{-webkit-animation-name:bounceIn; -moz-animation-name:bounceIn; -o-animation-name:bounceIn; animation-name:bounceIn}

@-webkit-keyframes bounceInUp {
  0% {opacity:0; -webkit-transform:translateY(2000px)}
  60% {opacity:1;-webkit-transform:translateY(-30px)}
  80% {-webkit-transform:translateY(10px)}
  100% {-webkit-transform: translateY(0)}
}

@-moz-keyframes bounceInUp {
  0% {opacity:0; -moz-transform:translateY(2000px)}
  60% {opacity:1;-moz-transform:translateY(-30px)}
  80% {-moz-transform:translateY(10px)}
  100% {-moz-transform: translateY(0)}
}

@-o-keyframes bounceInUp {
  0% {opacity:0; -o-transform:translateY(2000px)}
  60% {opacity:1; -o-transform:translateY(-30px)}
  80% {-o-transform:translateY(10px)}
  100% {-o-transform:translateY(0)}
}

@keyframes bounceInUp {
  0% {opacity:0; transform:translateY(2000px)}
  60% {opacity:1; transform:translateY(-30px)}
  80% {transform:translateY(10px)}
  100% {transform:translateY(0)}
}

.bounceInUp{-webkit-animation-name:bounceInUp; -moz-animation-name:bounceInUp; -o-animation-name:bounceInUp; animation-name:bounceInUp}

@-webkit-keyframes bounceInDown {
  0% {opacity:0; -webkit-transform:translateY(-2000px)}
  60% {opacity:1; -webkit-transform: translateY(30px)}
  80% {-webkit-transform:translateY(-10px)}
  100% {-webkit-transform:translateY(0)}
}

@-moz-keyframes bounceInDown {
  0% {opacity:0; -moz-transform:translateY(-2000px)}
  60% {opacity:1; -moz-transform:translateY(30px)}
  80% {-moz-transform:translateY(-10px)}
  100% {-moz-transform:translateY(0)}
}

@-o-keyframes bounceInDown {
  0% {opacity:0; -o-transform:translateY(-2000px)}
  60% {opacity:1; -o-transform:translateY(30px)}
  80% {-o-transform:translateY(-10px)}
  100% {-o-transform:translateY(0)}
}

@keyframes bounceInDown {
  0% {opacity:0; transform:translateY(-2000px)}
  60% {opacity:1; transform:translateY(30px)}
  80% {transform:translateY(-10px)}
  100% {transform:translateY(0)}
}

.bounceInDown{-webkit-animation-name:bounceInDown; -moz-animation-name:bounceInDown; -o-animation-name:bounceInDown; animation-name:bounceInDown}

@-webkit-keyframes bounceInLeft {
  0% {opacity:0; -webkit-transform:translateX(-2000px)}
  60% {opacity:1; -webkit-transform:translateX(30px)}
  80% {-webkit-transform:translateX(-10px)}
  100% {-webkit-transform:translateX(0)}
}

@-moz-keyframes bounceInLeft {
  0% {opacity:0; -moz-transform:translateX(-2000px)}
  60% {opacity:1; -moz-transform:translateX(30px)}
  80% {-moz-transform:translateX(-10px)}
  100% {-moz-transform:translateX(0)}
}

@-o-keyframes bounceInLeft {
  0% {opacity:0; -o-transform:translateX(-2000px)}
  60% {opacity:1; -o-transform:translateX(30px)}
  80% {-o-transform:translateX(-10px)}
  100% {-o-transform:translateX(0)}
}

@keyframes bounceInLeft {
  0% {opacity:0; transform:translateX(-2000px)}
  60% {opacity:1; transform:translateX(30px)}
  80% {transform:translateX(-10px)}
  100% {transform:translateX(0)}
}

.bounceInLeft{-webkit-animation-name:bounceInLeft; -moz-animation-name:bounceInLeft; -o-animation-name:bounceInLeft; animation-name:bounceInLeft}

@-webkit-keyframes bounceInRight {
  0% {opacity:0; -webkit-transform:translateX(2000px)}
  60% {opacity:1; -webkit-transform:translateX(-30px)}
  80% {-webkit-transform:translateX(10px)}
  100% {-webkit-transform: translateX(0)}
}

@-moz-keyframes bounceInRight {
  0% {opacity:0; -moz-transform:translateX(2000px)}
  60% {opacity:1; -moz-transform:translateX(-30px)}
  80% {-moz-transform:translateX(10px)}
  100% {-moz-transform:translateX(0)}
}

@-o-keyframes bounceInRight {
  0% {opacity:0; -o-transform:translateX(2000px)}
  60% {opacity:1; -o-transform:translateX(-30px)}
  80% {-o-transform:translateX(10px)}
  100% {-o-transform:translateX(0)}
}

@keyframes bounceInRight {
  0% {opacity:0; transform:translateX(2000px)}
  60% {opacity:1; transform:translateX(-30px)}
  80% {transform:translateX(10px)}
  100% {transform:translateX(0)}
}

.bounceInRight{-webkit-animation-name:bounceInRight; -moz-animation-name:bounceInRight; -o-animation-name:bounceInRight; animation-name:bounceInRight}

@-webkit-keyframes rotateIn {
  0% {-webkit-transform-origin:center center; -webkit-transform:rotate(-200deg); opacity:0}
  100% {-webkit-transform-origin:center center; -webkit-transform:rotate(0); opacity:1}
}

@-moz-keyframes rotateIn {
  0% {-moz-transform-origin:center center; -moz-transform:rotate(-200deg); opacity:0}
  100% {-moz-transform-origin:center center; -moz-transform:rotate(0); opacity:1}
}

@-o-keyframes rotateIn {
  0% {-o-transform-origin:center center; -o-transform:rotate(-200deg); opacity:0}
  100% {-o-transform-origin:center center; -o-transform:rotate(0); opacity:1}
}

@keyframes rotateIn {
  0% {transform-origin:center center; transform:rotate(-200deg); opacity:0}
  100% {transform-origin:center center; transform:rotate(0); opacity:1}
}

.rotateIn{-webkit-animation-name:rotateIn; -moz-animation-name:rotateIn; -o-animation-name:rotateIn; animation-name:rotateIn}

@-webkit-keyframes rotateInUpLeft {
  0% {-webkit-transform-origin:left bottom; -webkit-transform:rotate(90deg); opacity:0}
  100% {-webkit-transform-origin:left bottom; -webkit-transform:rotate(0); opacity:1}
}

@-moz-keyframes rotateInUpLeft {
  0% {-moz-transform-origin:left bottom; -moz-transform:rotate(90deg); opacity:0}
  100% {-moz-transform-origin:left bottom; -moz-transform:rotate(0); opacity:1}
}

@-o-keyframes rotateInUpLeft {
  0% {-o-transform-origin:left bottom; -o-transform:rotate(90deg); opacity:0}
  100% {-o-transform-origin:left bottom; -o-transform:rotate(0); opacity:1}
}

@keyframes rotateInUpLeft {
  0% {transform-origin:left bottom; transform:rotate(90deg); opacity:0}
  100% {transform-origin:left bottom; transform:rotate(0); opacity:1}
}

.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft; -moz-animation-name:rotateInUpLeft; -o-animation-name:rotateInUpLeft; animation-name:rotateInUpLeft}

@-webkit-keyframes rotateInDownLeft {
  0% {-webkit-transform-origin:left bottom; -webkit-transform:rotate(-90deg); opacity:0}
  100% {-webkit-transform-origin:left bottom; -webkit-transform:rotate(0); opacity:1}
}

@-moz-keyframes rotateInDownLeft {
  0% {-moz-transform-origin:left bottom; -moz-transform:rotate(-90deg); opacity:0}
  100% {-moz-transform-origin:left bottom; -moz-transform:rotate(0); opacity:1}
}

@-o-keyframes rotateInDownLeft {
  0% {-o-transform-origin:left bottom; -o-transform:rotate(-90deg); opacity:0}
  100% {-o-transform-origin:left bottom; -o-transform:rotate(0); opacity:1}
}

@keyframes rotateInDownLeft {
  0% {transform-origin:left bottom; transform:rotate(-90deg); opacity:0}
  100% {transform-origin:left bottom; transform:rotate(0); opacity:1}
}

.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft; -moz-animation-name:rotateInDownLeft; -o-animation-name:rotateInDownLeft; animation-name:rotateInDownLeft}

@-webkit-keyframes rotateInUpRight {
  0% {-webkit-transform-origin:right bottom; -webkit-transform:rotate(-90deg); opacity:0}
  100% {-webkit-transform-origin:right bottom; -webkit-transform:rotate(0); opacity:1}
}

@-moz-keyframes rotateInUpRight {
  0% {-moz-transform-origin:right bottom; -moz-transform:rotate(-90deg); opacity:0}
  100% {-moz-transform-origin:right bottom; -moz-transform:rotate(0); opacity:1}
}

@-o-keyframes rotateInUpRight {
  0% {-o-transform-origin:right bottom; -o-transform:rotate(-90deg); opacity:0}
  100% {-o-transform-origin:right bottom; -o-transform:rotate(0); opacity:1}
}

@keyframes rotateInUpRight {
  0% {transform-origin:right bottom; transform:rotate(-90deg); opacity:0}
  100% {transform-origin:right bottom; transform:rotate(0); opacity:1}
}

.rotateInUpRight{-webkit-animation-name:rotateInUpRight; -moz-animation-name:rotateInUpRight; -o-animation-name:rotateInUpRight; animation-name:rotateInUpRight}

@-webkit-keyframes rotateInDownRight {
  0% {-webkit-transform-origin:right bottom; -webkit-transform:rotate(90deg); opacity:0}
  100% {-webkit-transform-origin:right bottom; -webkit-transform:rotate(0); opacity:1}
}

@-moz-keyframes rotateInDownRight {
  0% {-moz-transform-origin:right bottom; -moz-transform:rotate(90deg); opacity:0}
  100% {-moz-transform-origin:right bottom; -moz-transform:rotate(0); opacity:1}
}

@-o-keyframes rotateInDownRight {
  0% {-o-transform-origin:right bottom; -o-transform:rotate(90deg); opacity:0}
  100% {-o-transform-origin:right bottom; -o-transform:rotate(0); opacity:1}
}

@keyframes rotateInDownRight {
  0% {transform-origin:right bottom; transform:rotate(90deg); opacity:0}
  100% {transform-origin:right bottom; transform:rotate(0); opacity:1}
}

.rotateInDownRight{-webkit-animation-name:rotateInDownRight; -moz-animation-name:rotateInDownRight; -o-animation-name:rotateInDownRight; animation-name:rotateInDownRight}
/* Resources End */

/* Security Start */
div.securitystep_wrap{display:flex}
div.securitystep_wrap:last-child{margin-top:30px;}
div.securitystep{flex-grow:1; margin:0 15px; flex-basis:165px}
div.securitystep:first-child{margin-left:0}
div.securitystep:last-child{margin-right:0}
div.securitystep_step{height:42px; margin-bottom:15px; font-size:15px; line-height:42px; color:#fff; text-align: center; border-radius: 5px}
div.securitystep:nth-child(1) .securitystep_step{background:#595959}
div.securitystep:nth-child(2) .securitystep_step{background:#13405d}
div.securitystep:nth-child(3) .securitystep_step{background:#3D6AB4}
div.securitystep:nth-child(4) .securitystep_step{background:#15417e}
div.securitystep:nth-child(5) .securitystep_step{background:#489a96}
div.securitystep:nth-child(6) .securitystep_step{background:#5c7a86}
div.securitystep:nth-child(7) .securitystep_step{background:#1c5278}
div.securitystep_item{height:calc(100% - 65px); width:100%; border-radius:15px; border:solid 1px #000; display:table}
div.securitystep_item p{display:table-cell; vertical-align:middle; font-size:18px; writing-mode:vertical-lr; text-align: center;}
div.securitystep_detail_wrap{margin-bottom:15px; cursor:pointer; position:relative; border-radius: 3px}
div.securitystep_detail_wrap:last-child{margin-bottom:0}
div.securitystep:nth-child(2) .securitystep_detail_wrap{border:solid 1px #13405d}
div.securitystep:nth-child(3) .securitystep_detail_wrap{border:solid 1px #3d6ab4}
div.securitystep:nth-child(4) .securitystep_detail_wrap{border:solid 1px #15417e}
div.securitystep:nth-child(5) .securitystep_detail_wrap{border:solid 1px #297875}
div.securitystep:nth-child(6) .securitystep_detail_wrap{border:solid 1px #5c7a86}
div.securitystep:nth-child(7) .securitystep_detail_wrap{border:solid 1px #1c5278}
div.securitystep_detail_header{adding: 2px 0; text-align: center; font-size: 0.7em;}
div.securitystep:nth-child(2) .securitystep_detail_header{background:#e2eef5; border-bottom:solid 1px #13405d}
div.securitystep:nth-child(3) .securitystep_detail_header{background:#ecf3ff; border-bottom:solid 1px #3d6ab4}
div.securitystep:nth-child(4) .securitystep_detail_header{background:#d8dfe9; border-bottom:solid 1px #15417e}
div.securitystep:nth-child(5) .securitystep_detail_header{background:#e0eeed; border-bottom:solid 1px #297875}
div.securitystep:nth-child(6) .securitystep_detail_header{background:#e4e9eb; border-bottom:solid 1px #5c7a86}
div.securitystep:nth-child(7) .securitystep_detail_header{background:#cedee9; border-bottom:solid 1px #471A13}
div.securitystep_detail_con{ padding: 5px; font-size:0.7em; word-break: keep-all; text-align: center;}
div.tocfilelist_wrap{height:250px; margin-bottom:50px; font-size:18px; border:solid 1px #000; overflow-y:auto}
ul.tocfilelist li, ul.tocfilesublist li, ul.tocfilethirdlist li{text-align:left; margin:20px; list-style:none}
ul.tocfilelist p{display:inline-block; cursor:pointer}
div.toctxt_wrap{height:500px; padding:20px; font-size:0.95em; border:solid 1px #a3a3a3; overflow-y:auto}
div.securitystep_tooltip{width: 450px; position:absolute; left:50%; top:calc(100% + 5px); margin-left:-225px; border-radius:10px; cursor:default; z-index:1; padding:15px; background:#fff; display:none}
div.securitystep_tooltip::after{border-top:0px solid transparent; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom: 10px solid red; content:""; position:absolute; top:-10px; left:233px}
div.securitystep:nth-child(2) .securitystep_tooltip{border:solid 2px #faae26}
div.securitystep:nth-child(3) .securitystep_tooltip{border:solid 2px #a46c71}
div.securitystep:nth-child(4) .securitystep_tooltip{border:solid 2px #15417e}
div.securitystep:nth-child(5) .securitystep_tooltip{border:solid 2px #489a96}
div.securitystep:nth-child(6) .securitystep_tooltip{border:solid 2px #5c7a86}
div.securitystep:nth-child(7) .securitystep_tooltip{border:solid 2px #471A13}
div.securitystep:nth-child(2) .securitystep_tooltip::after{border-bottom:10px solid #faae26}
div.securitystep:nth-child(3) .securitystep_tooltip::after{border-bottom:10px solid #a46c71}
div.securitystep:nth-child(4) .securitystep_tooltip::after{border-bottom:10px solid #15417e}
div.securitystep:nth-child(5) .securitystep_tooltip::after{border-bottom:10px solid #489a96}
div.securitystep:nth-child(6) .securitystep_tooltip::after{border-bottom:10px solid #5c7a86}
div.securitystep:nth-child(7) .securitystep_tooltip::after{border-bottom:10px solid #471A13}
.securitystep_tooltip_tb{table-layout:fixed; border-collapse:collapse; width:100%; border-top:solid 1px #000; border-bottom:solid 1px #000; margin-bottom:15px}
.securitystep_tooltip_tb th, .securitystep_tooltip_tb td{padding:15px 10px; border:solid 1px #000; color:#000; font-size:13px}
.securitystep_tooltip_tb th{text-align:center}
.securitystep_tooltip_tb td{text-align:left}
p.securitystep_tooltip_detailtitle{font-size:15px; font-weight:bold; margin-bottom:15px}
p.securitystep_tooltip_detailtxt{font-size:13px; text-align:left}
/* Security End */

/* Admin Start */
div.setting_btn_wrap{margin-bottom:30px; text-align:right; float: right;}
.setting_btn{font-size:13px; background:black; display:inline-block; border-radius:8px; padding:10px; color:#fff; margin:0 4px; text-decoration:none; cursor:pointer}
.admin_list_tb{table-layout:fixed; border-collapse:collapse; width:100%; border-top:solid 1px #000}
.admin_list_tb th, .admin_list_tb td{border-bottom:solid 1px #000; color:#000; text-align:center; font-size:14px}
.admin_list_tb th{padding:10px 10px}
.admin_list_tb td{padding:2px 4px}
.admin_list_tb .title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; width:100%}
.admin_list_tb .table_btn{font-size:13px; background:black; display:inline-block; border-radius:8px; padding:7px 13px; color:#fff; margin:4px; text-decoration:none; cursor:pointer}
.admin_write_tb{table-layout:fixed; border-collapse:collapse; width:100%}
.admin_write_tb th, .admin_write_tb td{padding:15px; color:#000; font-size:18px; border:solid 1px #000}
.admin_write_tb td{text-align:left}
.admin_write_tb input[type="text"], .admin_write_tb input[type="password"]{height:40px; width:100%; font-size:16px; text-indent:10px; box-sizing:border-box; border:solid 1px #000}
.admin_write_tb [type="radio"]:checked, .admin_write_tb [type="radio"]:not(:checked){position:absolute; left:-9999px}
.admin_write_tb [type="radio"]:checked + label, .admin_write_tb [type="radio"]:not(:checked) + label{position:relative; padding-left:28px; cursor:pointer; line-height:22.5px; display:inline-block}
.admin_write_tb [type="radio"]:first-child + label{margin-right:10px}
.admin_write_tb [type="radio"]:checked + label:before, .admin_write_tb [type="radio"]:not(:checked) + label:before{content:''; position:absolute; left:0; top:0; width:18px; height:18px; border:1px solid #000; border-radius:100%; background:#fff}
.admin_write_tb [type="radio"]:checked + label:after, .admin_write_tb [type="radio"]:not(:checked) + label:after{content:''; width:12px; height:12px; background:#000; position:absolute; top:4px; left:4px; border-radius:100%}
.admin_write_tb [type="radio"]:not(:checked) + label:after{opacity:0; transform:scale(0)}
.admin_write_tb [type="radio"]:checked + label:after{opacity:1; transform:scale(1)}
.admin_write_tb textarea{height:120px; width:100%; font-size:16px; box-sizing:border-box; resize:none; padding:10px; border:solid 1px #000}
.admin_write_tb select{width:50%; font-size:16px; padding:10px; border:solid 1px #000}
.admin_write_tb .filebox{display:inline-block; width:calc(100% - 60px)}
.admin_write_tb .filebox .upload-name{display:inline-block; height:40px; padding:0 10px; vertical-align:middle; border:1px solid #000; width: calc(100% - 92px); font-size:16px; box-sizing:border-box}
.admin_write_tb .filebox label{display:inline-block; padding:8px 10px; color:#fff; vertical-align:middle; background:#000; cursor:pointer; font-size:16px; margin-left:5px; border-radius:5px}
.admin_write_tb .filebox input[type="file"]{position:absolute; width:0; height:0; padding:0; overflow:hidden; border:0}
.admin_write_tb .filedelete_btn{display: inline-block; padding:8px 10px; color:#fff; vertical-align:middle; background:#000; cursor:pointer; font-size:16px; border-radius:5px}
.admin_send_btn_wrap{margin-top:50px}
.admin_send_btn{font-size:16px; height:55px; width:130px; line-height:55px; display:inline-block; background:#000; border-radius:10px; color:#fff; cursor:pointer; text-decoration:none}
.admin_send_btn:not(:last-child) { margin-right: 20px; }
.dynamicinput{margin-bottom:15px}
.dynamicinput:last-child{margin-bottom:0}
.admin_write_tb .dynamicinput input[type="text"]{width:calc((100% - 60px)/2); height:40px; font-size:16px; text-indent:10px; box-sizing:border-box; border:solid 1px #000; float:left; margin-right:10px}
.dynamicinputadd_btn{display:inline-block; width:40px; height:40px; line-height:40px; text-align:center; color:#fff; vertical-align:middle; background:#000; cursor:pointer; font-size:16px; border-radius:5px; margin-bottom:15px}
.dynamicinputremove_btn{display:inline-block; width:40px; height:40px; line-height:40px; text-align:center; color:#fff; vertical-align:middle; background:#000; cursor:pointer; font-size:16px; border-radius:5px}
.imgpreview{height:120px; margin-bottom:15px; display:none}
.imgpreview img{height:100%}
.admin_write_btn{font-size:13px; background:black; display:inline-block; border-radius:8px; padding:10px 15px; color:#fff; text-decoration:none; cursor:pointer}
p.changepwtitle{font-size:30px; border-bottom:solid 2px #000; width:63%; margin:0 auto 25px; text-align:center}
div.changepwinputwrap{position:relative; margin-bottom:25px}
div.changepwinputwrap input{height:50px; width:100%; border:solid 1px #000; font-size:18px; padding-left:168px; box-sizing:border-box}
p.changepwinputtxt{position:absolute; top:50%; left:15px; font-size:18px; color:#000; margin-bottom:0; margin-top:-13.5px}
a.changepwbtn{width:100%; height:50px; line-height:50px; display:inline-block; text-align:center; font-size:18px; cursor:pointer; background:#000; color:#fff}
/* Admin End */

 /* footer img */
 /* 2022-05-04 푸터 이미지 css 수정 */
div.footerwrap { display: inline-block; }
div.footerwrapwrap .image { margin-top: -50px }
div.footerwrapwrap .footerimg1 { width: 10% }
div.footerwrapwrap .footerimg2 { width: 8.5% }

@media screen and (max-width:1440px) {
  ul.menu_btn{margin-left: -30%; }
  ul.menu_btn li { font-size: 14px }
  div.content{width:93%}
  div.icon_content{width:93%; padding: 0px 0 30px !important }
  
  div.securitystep_wrap{flex-direction:column}
  div.securitystep{margin:0 0 50px}
  div.securitystep:last-child{margin:0}
  div.securitystep_detail_wrapwrap{display:flex; flex-wrap:wrap}
  div.securitystep_detail_wrap{flex-basis:calc(50% - 9.5px)}
  div.securitystep_detail_wrap:nth-child(odd){margin-right:7.5px}
  div.securitystep_detail_wrap:nth-child(even){margin-left:7.5px}
  div.securitystep_detail_wrap:last-child{margin-bottom:auto}
  div.securitystep_tooltip{width:calc(100% - 30px); margin-left:0; left:0}
  div.securitystep_tooltip::after{left:calc(50% - 5px)}
  div.securitystep_item{height:110px; border-radius:0}
  div.securitystep_item p{writing-mode:horizontal-tb}

  /* div.browser_wrap:nth-child(1){width:calc(22% - 15px)}
  div.browser_wrap:nth-child(2){width:calc(78% - 15px)} */
  div.browsersrc_wrap:nth-child(1){float:none; width:50%; margin-bottom: 15px }
  div.browsersrc_wrap:nth-child(2){float:none; width:100%; text-align:left}
  .browsersrc_wrap [type="radio"]:checked + label, .browsersrc_wrap [type="radio"]:not(:checked) + label{margin:0 13px 0 0}
  
   /* footer img */
   /* 2022-05-04 푸터 이미지 css 수정 */
   div.footerwrapwrap .image { margin-top: -40px }
}

@media screen and (max-width:1000px) {
  ul.menu_btn{display:none}
  div.guidemenu{width:calc((100% - 150px)/3); margin:60px 25px}
  .menubtn{display:block}
  .login_area{display:none!important}

  div.guidemenu_wrap1{display:none}
  div.guidemenu_wrap2{display:block}
  
  .pc_ver{display:none}
  .mobile_ver{display:block}
  .browser_f td:nth-child(1){text-align:center; padding:10px}
  .browser_tb{margin-bottom:35px}
    .browser_tb th, .browser_tb td{padding:10px; border-bottom:solid 1px #e9e9e9}
  .browsersrc_select{width:calc(50% - 5px); height:40px; float:left; font-size:13px}
  .browsersrc_select:nth-child(1){margin-right:5px}
  .browsersrc_select:nth-child(2){margin-left:5px}
  .browsersrc_input{height:40px; font-size:13px}
  a.browsersrc_btn{height:40px; line-height:40px}
  .model_tb{width:calc(50% - 10px)}
  .model_tb:nth-child(3n+1){clear:none; margin-left:auto; margin-right:auto}
  .model_tb:nth-child(2n+1){clear:both; margin-left:0; margin-right:10px}
  .model_tb:nth-child(2n){margin-left:10px; margin-right:0}
  div.browsersrc_wrap:nth-child(1){width:100%}
  .browsersrc_wrap [type="radio"]:checked + label, .browsersrc_wrap [type="radio"]:not(:checked) + label{margin: 5px 10px 5px 0;font-size:14px}
  .mapping_btn { margin: 0 1px; }
  
  /* footer img */
  /* 2022-05-04 푸터 이미지 css 수정 */
  div.footerwrapwrap .image { margin-top: -40px }
  div.footerwrapwrap .footerimg1 { width: 17% }
  div.footerwrapwrap .footerimg2 { width: 15% }
}

@media screen and (max-width:900px) {
  div.slider{height:370px}
  p#define_img{height:190px; margin-bottom:20px}
  p#define_img img{height:100%}
  .slidetxtwrap{width:88%; padding:0 6%}
  .slidetxt1{font-size:28px; line-height:30px; margin-bottom:15px}
  .slidetxt2{font-size:24px; line-height:26px}
  div.content{padding:50px 0}
  p#guide_info{font-size:16px}
    p.content_title{font-size:27px; margin-bottom:20px}
  div.guidemenu{width:calc((100% - 100px)/2); margin:30px 25px}
  .guidemenu_pic{margin:20px auto 20px}
  .guidemenu_title{margin-bottom:20px}
  p#define_txt{font-size:16px}

  div.submenu_title_wrap{height:140px; line-height:140px}
  p.submenu_title{font-size:28px}
  p.datamodel_txt{font-size:16px}
  .curve{font-size:14px; width:98px; padding:5px; word-break: keep-all; }
  .model_first_con{font-size:0.85em; width:82%}
  .model_tb th, .model_tb td{font-size:0.85em; padding:12px 17px}

  div.notice_txt{font-size:0.85em}
  p#resources_txt{font-size:0.85em}
  .resources_tb{margin-top:30px}
  .resources_tb th, .resources_tb td{font-size:0.85em; padding:12px 17px}
  .resources_select{margin-top:30px; font-size:0.85em; padding:12px 17px}
  div.resourcesinfo_wrap{margin-top:30px}
  p.resourcesinfo_title{font-size:23px}
  .tab button{font-size:16px}
  p.resourcesinfo_tb_title{font-size:23px; margin-bottom:20px}
  p.resourcesinfo_tb_txt{font-size:16px}
  div.securitystep{margin:0 0 30px}
  div.securitystep_item p{font-size:16px}
  .card li{width:50%; height:90px}
/*   .card li:nth-child(3n){border-right:0} */
/*   .card li:nth-child(2n){border-right:solid 1px #D2D8DD} */
  .card li:nth-of-type(3n){border-right:0}
  .card li:nth-of-type(2n){border-right:solid 1px #D2D8DD}
  .card .card-name{font-size:0.85em}
  .card .card-level{font-size:12px}
  .close{font-size:16px}

  .pop{width:450px}
  div.popupwrap{width:100%}
  .pop_top{padding:19px 20px}
  .pop_con{padding:0 8% 40px}
  p.logintitle{font-size:28px; margin:0 auto 23px}
  div.logininputwrap{margin-bottom:23px}
  div.logininputwrap input{height:43px; font-size:16px; padding-left:94px}
  p.logininputtxt{font-size:16px; margin-top:-12px}
  a.loginbtn{height:45px; line-height:45px; font-size:16px; margin-bottom:23px}
  p.loginleftbtn, a.loginright1, a.loginright2{font-size:14px}
  p.loginleftbtn input{line-height:-2px}

  div.footerwrap{padding:23px}	/* 2022-05-04 푸터 이미지 css 수정 */
  p.footertxt1{font-size:12px; margin-bottom:16.5px}
  p.footertxt2{font-size:12px}

  .sidenavdepth1{font-size:16px}
  .sidenavdepth1 a{padding:20px 25px}
  .sidenavdepth2{font-size:16px; padding-bottom:20px}
  .sidenavdepth2 a{padding:0}

  div.setting_btn_wrap{margin-bottom:25px}
  .setting_btn{font-size:12px; margin:0 2px}
  .admin_list_tb th, .admin_list_tb td{font-size:16px}
  .admin_list_tb th{padding:13px 10px}
  .admin_list_tb td{padding:5px 10px}
  .admin_list_tb .table_btn{font-size:12px}
  .admin_write_tb th, .admin_write_tb td{padding:13px; font-size:16px}
  .admin_write_tb input[type="text"], .admin_write_tb input[type="password"]{height:38px; font-size:14px}
  .admin_write_tb textarea{font-size:14px}
  .admin_write_tb select{font-size:14px}
  .admin_write_tb .filebox{width:calc(100% - 55px)}
  .admin_write_tb .filebox .upload-name{height:38px; font-size:14px; width:calc(100% - 80px)}
  .admin_write_tb .filebox label{font-size:14px}
  .admin_write_tb .filedelete_btn{font-size:14px}
  .admin_send_btn_wrap{margin-top:40px}
  .admin_send_btn{font-size:14px; height:50px; width:115px; line-height:50px}
  .dynamicinput{margin-bottom:13px}
  .admin_write_tb .dynamicinput input[type="text"]{height:38px; font-size:14px; width:calc((100% - 58px)/2)}
  .dynamicinputadd_btn{width:38px; height:38px; line-height:38px; font-size:14px; margin-bottom:13px}
  .dynamicinputremove_btn{width:38px; height:38px; line-height:38px; font-size:14px}
  .imgpreview{height:105px; margin-bottom:13px}
  .admin_write_btn{font-size:12px}
  div.changepwinputwrap{margin-bottom:23px}
  div.changepwinputwrap input{height:43px; font-size:16px; padding-left:153px}
  p.changepwinputtxt{font-size:16px; margin-top:-12px}
  a.changepwbtn{height:45px; line-height:45px; font-size:16px}
  p.changepwtitle{font-size:28px; margin:0 auto 23px}
  
  /* footer img */
  /* 2022-05-04 푸터 이미지 css 수정 */
  div.footerwrapwrap .image { margin-top: 0 }
  div.footerwrapwrap .footerimg1 { width: 25%; float: left }
  div.footerwrapwrap .footerimg2 { width: 22%; float: left }
}

@media screen and (max-width:690px) {
  .model_tb{float:none; width:100%}
  .model_tb:nth-child(2n+1){clear:none; margin-left:0; margin-right:0}
  .model_tb:nth-child(2n){margin-left:0; margin-right:0}
  
  /* footer img */
  /* 2022-05-04 푸터 이미지 css 수정 */
  div.footerwrapwrap .image { margin-top: 0 }
  div.footerwrapwrap .footerimg1 { width: 40%; float: left }
  div.footerwrapwrap .footerimg2 { width: 35%; float: left }
}

@media screen and (max-width:480px) {
  div.slider{height:165px}
  p#define_img{height:150px}
  .slidetxtwrap{width:92%; padding:0 4%}
  .slidetxt1{font-size:19px; line-height:21px; margin-bottom:11px}
  .slidetxt2{font-size:16px; line-height:18px}
  div.content{padding:40px 0}
  p#guide_info{font-size:14px}
  p.content_title{font-size:24px; margin-bottom:15px}
  p#define_txt{font-size:14px; margin-bottom:15px}
  div.guidemenu{width:100%; float:none; margin:30px 0}
  div.guidemenu:first-child{margin-top:0}
  .guidemenu_pic{margin: 0 auto 15px}
  .guidemenu_title{font-size:14px; margin-bottom:15px}
  .guidemenu_txt{font-size:14px}

  div.submenu_title_wrap{height:105px; line-height:105px}
  p.submenu_title{font-size:25px}
  p.datamodel_txt{font-size:14px}
  .changelog_tb th, .changelog_tb td{font-size:14px; padding:10px 15px}
  .model_first_title{font-size:12px; width:20%}
  .model_first_con{font-size:14px; width:80%}
  .model_tb th, .model_tb td{font-size:14px; padding:10px 15px}

  div.notice_txt{font-size:14px; word-break:break-all}
  p#resources_txt{font-size:14px}
  .resources_tb{margin-top:25px}
  .resources_tb th, .resources_tb td{font-size:14px; padding:10px 15px; word-break:break-all}
  .resources_tb th:nth-child(1), .resources_tb td:nth-child(1){width:25%}
  .resources_tb th:nth-child(2), .resources_tb td:nth-child(2){width:75%}
  .resources_select{margin-top:25px; font-size:14px; padding:10px 15px}
  div.resourcesinfo_wrap{margin-top:25px}
  p.resourcesinfo_title{font-size:20px; margin-bottom:20px}
  .tab button{font-size:14px; padding:14px 0; width:50%}
  p.resourcesinfo_tb_title{font-size:20px}
  p.resourcesinfo_tb_txt{font-size:14px}
  .card .card-name{font-size:14px}
  .card .card-level{font-size:10px}
  .close{font-size:14px}

  div.tocfilelist_wrap{font-size:15px; margin-bottom:25px}
  ul.tocfilelist li, ul.tocfilesublist li, ul.tocfilethirdlist li{margin:15px 10px}
  div.toctxt_wrap{font-size:15px; padding:15px 10px}
  div.securitystep{margin:0 0 25px}
  div.securitystep_item p{font-size:15px}

  .browser_tb{margin-bottom:25px}
  div.browsersrc_wrap{margin-bottom:25px}

  .pop{width:335px}
  p.logintitle{font-size:23px; margin:0 auto 20px}
  div.logininputwrap{margin-bottom:20px}
  div.logininputwrap input{height:35px; font-size:14px; padding-left:85px}
  p.logininputtxt{font-size:14px; margin-top:-10.5px}
  a.loginbtn{height:40px; line-height:40px; font-size:14px; margin-bottom:20px}
  p.loginleftbtn, a.loginright1, a.loginright2{font-size:13px}
  p.loginleftbtn input{line-height:-2.5px}
  .pop_top{padding:15px 20px}

  div.footerwrap{padding:21px 0}
  p.footertxt1{font-size:11px; margin-bottom:15px}
  p.footertxt2{font-size:10px}

  .sidenavdepth1{font-size:14px}
  .sidenavdepth1 a{padding:15px 25px}
  .sidenavdepth2{font-size:14px; padding-bottom:15px}
  .sidenavdepth2 a{padding:0}

  div.setting_btn_wrap{margin-bottom:18px}
  .setting_btn{font-size:10px; margin:0}
  .admin_list_tb th, .admin_list_tb td{font-size:13px}
  .admin_list_tb th{padding:10px 5px}
  .admin_list_tb td{padding:5px}
  .admin_list_tb .table_btn{font-size:10px}
  .admin_write_tb th, .admin_write_tb td{padding:10px; font-size:14px}
  .admin_write_tb input[type="text"], .admin_write_tb input[type="password"]{height:35px; font-size:12px}
  .admin_write_tb textarea{font-size:12px}
  .admin_write_tb select{font-size:12px}
  .admin_write_tb .filebox{width:calc(100% - 50px)}
  .admin_write_tb .filebox .upload-name{height:35px; font-size:12px; width:calc(100% - 75px)}
  .admin_write_tb .filebox label{font-size:12px}
  .admin_write_tb .filedelete_btn{font-size:12px}
  .admin_send_btn_wrap{margin-top:25px}
  .admin_send_btn{font-size:12px; height:45px; width:105px; line-height:45px}
  .dynamicinput{margin-bottom:10px}
  .admin_write_tb .dynamicinput input[type="text"]{height:35px; font-size:12px; width:calc((100% - 55px)/2)}
  .dynamicinputadd_btn{width:35px; height:35px; line-height:35px; font-size:12px; margin-bottom:10px}
  .dynamicinputremove_btn{width:35px; height:35px; line-height:35px; font-size:12px}
  .imgpreview{height:85px; margin-bottom:10px}
  .admin_write_btn{font-size:10px}
  div.changepwinputwrap{margin-bottom:20px}
  div.changepwinputwrap input{height:35px; font-size:14px; padding-left:137px}
  p.changepwinputtxt{font-size:14px; margin-top:-10.5px}
  a.changepwbtn{height:40px; line-height:40px; font-size:14px}
  p.changepwtitle{font-size:23px; margin:0 auto 20px}
}