@_Tabletcharset "utf-8";
/*=================================================================================================
// 명    칭 : 서브화면 스타일쉬트 - 모바일
// 처리내용 : 
// 작 성 자 : 2018-11-07 김진후 
//=================================================================================================*/

.dcTextWrap{margin-bottom:30px;}
.dcTextWrap h4.dcH4Title{background: url(/en/img/exist_img/sub/title_bg_point.jpg) no-repeat 0 5px; font-size:16px; font-weight:600; color: #333; padding-left: 22px; margin-bottom: 10px; line-height: 18px; background-size: 12px;}
.dcTextWrap h5.dcH5Title{background: url(/en/img/exist_img/sub/bg_font1.jpg) no-repeat 0px 6px; font-size:14px; font-weight:400; color: #333; padding-left: 19px; margin: 0 0 10px 10px; line-height: 18px;}
.dcTextWrap h6.dcH6Title{font-size: 13px; font-weight:200; color: #777; margin-bottom: 10px; line-height: 16px;}
.dcTextWrap p.dcPTitle{position:relative; font-size:13px; font-weight:400; color: #555; padding-left: 10px; margin-left: 20px;}
.dcTextWrap p.dcPTitle::before{content:''; display:block; position:absolute; top:9px; left:0; width:4px; height:4px; background-color:#6c9acb;}
.dcTextWrap p.dcPTitle a.dcBtnView{padding: 0 10px; background-color: #185DAB; color: #fff; font-size: 12px; font-weight: 200; margin-left: 10px;}
.dcTextWrap ul.dcUlList{padding-left: 15px; margin:0 0 10px 20px;}
.dcTextWrap ul.dcUlList li{position:relative; font-size:12px; font-weight:200; color: #555; padding-left:15px; line-height: 15px;}
.dcTextWrap ul.dcUlList li::before{content:''; display:block; position:absolute; top:8px; left:0; width:6px; height:1px; background-color:#555;}
.dcTextWrap p.dcPimg{width:100%; text-align:center; margin-bottom:10px;}
.dcTextWrap p.dcPimg img{width:100%;}
.dcTextWrap p.dcPetc{text-align:right; font-size: 12px; font-weight:200; color:#555;}

.dcTextWrap .dcTableWrap{}
.dcTextWrap .dcTableHeader{margin-bottom:20px;}
.dcTextWrap .dcTableHeader .dcTopWrap{overflow:hidden; margin-bottom:5px;}
.dcTextWrap .dcTableHeader .dcTopWrap p.dcPTotal{float:left; font-size:16px; font-weight:300; color:#666; }
.dcTextWrap .dcTableHeader .dcTopWrap p.dcPTotal span{font-weight:500; color:#ba1c22; }
.dcTextWrap .dcTableHeader .dcTopWrap p.dcPPaging{float:right; font-size:16px; font-weight:300; color:#666; }
.dcTextWrap .dcTableHeader .dcSearchWrap{padding:3%; background-color:#f1f1f1; box-sizing:border-box;}
.dcTextWrap .dcTableHeader .dcSearchWrap .dcSelectWrap{margin-bottom:10px;}
.dcTextWrap .dcTableHeader .dcSearchWrap .dcSelectWrap label{display:block; width:100%; line-height:30px;font-size:16px; font-weight:300; color:#666;}
.dcTextWrap .dcTableHeader .dcSearchWrap .dcSelectWrap select{width:100%; height:30px; line-height:30px; border:solid 1px #ddd; padding:0 10px; font-size:16px; font-weight:300; color:#666;}
.dcTextWrap .dcTableHeader .dcSearchWrap .dcSelectWrap select option{font-size:16px; font-weight:300; color:#666;}
.dcTextWrap .dcTableHeader .dcSearchWrap .dcInputWrap{margin-bottom:30px; }
.dcTextWrap .dcTableHeader .dcSearchWrap .dcInputWrap label{display: block; width:100%; line-height:30px; font-size:16px; font-weight:300; color:#666;}
.dcTextWrap .dcTableHeader .dcSearchWrap .dcInputWrap input{width:100%; line-height:30px; border:solid 1px #ddd; padding:0 10px; font-size:16px; font-weight:300; color:#666;}
.dcTextWrap .dcTableHeader .dcSearchWrap button.dcBtnSearch{display:block; width:200px; line-height:30px; margin:0 auto; background-color:#003964; color:#fff;}
.dcTextWrap .dcTableBox{display:none; margin-bottom: 20px;}
.dcTextWrap .dcTableBox .dcBasicTableThin thead tr th{font-size:14px;}
.dcTextWrap .dcTableBox .dcBasicTableThin tbody tr th{font-size:14px;}
.dcTextWrap .dcTableBox .dcBasicTableThin tbody tr td{font-size:12px;}
.dcTextWrap .dcTableBox tbody tr td dl{margin-bottom:5px;}
.dcTextWrap .dcTableBox tbody tr td dl:last-child{margin-bottom:0;}
.dcTextWrap .dcTableBox tbody tr td dl dt{position:relative; font-size:14px; font-weight:500; padding-left:10px;}
.dcTextWrap .dcTableBox tbody tr td dl dt::before{content:''; display:block; position:absolute; top:9px; left:0; width:4px; height:4px; background-color:#333;}
.dcTextWrap .dcTableBox tbody tr td dl dd{font-size:14px; font-weight:200; padding-left:10px;}

.dcSatisfactionWrap{background-color:#f1f1f1;}
.dcSatisfactionWrap .dcSatisBox{padding:20px; border:solid 1px #ddd;}
.dcSatisfactionWrap .dcSatisBox h3{position:relative; font-size:14px; font-weight:500; color:#333; margin:0 0 10px 0; padding:0 0 0 15px;}
.dcSatisfactionWrap .dcSatisBox h3::before{content:''; display:block; position:absolute; top:7px; left:0; width:8px; height:8px; border-radius:50%; background-color:#6c9acb;}
.dcSatisfactionWrap .dcSatisBox h6{font-size:12px; font-weight:300; color:#fff; background-color:#658196; margin:0 0 10px 0; padding:2px 10px;}
.dcSatisfactionWrap .dcSatisBox .dcCheckWrap{border-bottom:solid 1px #aaa; padding:0 0 10px 0;}
.dcSatisfactionWrap .dcSatisBox .dcCheckWrap .dcRadioChk{margin-bottom: 10px;}
.dcSatisfactionWrap .dcSatisBox .dcCheckWrap .dcRadioChk input{}
.dcSatisfactionWrap .dcSatisBox .dcCheckWrap .dcRadioChk label{font-size:12px; font-weight:300; color:#333; margin-right:15px;}
.dcSatisfactionWrap .dcSatisBox .dcCheckWrap .dcSubmit{}
.dcSatisfactionWrap .dcSatisBox .dcCheckWrap .dcSubmit a{display:block; text-align:center; padding:2px 30px; font-size:12px; font-weight:300; color:#fff; background-color:#003964; border-radius:20px;}

.dcALinkWrap{text-align:center; margin-bottom:50px;}
.dcALinkWrap a{display: block; width:80%; margin:0 auto; text-align:center; font-size:12px; font-weight:200; color:#fff; background-color:#103a7d; padding:1% 2%;}
.dcALinkWrap a:hover{color:#fff;}

/*Introduction for conformity Assessment System*/
.dcImgBox_intro{padding: 60% 5% 5%; background: url(/en/img/sub/intro_img01.png) no-repeat 50% 10% #f6f6f6; margin: 0 0 20px 0;}
.dcImgBox_intro > p{word-break: break-word;}
.dcImgBox_intro > p.dcImgTitle{font-size:16px; font-weight:500; color:#39add4; margin-bottom:10px; line-height: 22px;}
.dcImgBox_intro > p.dcImgText{font-size:14px; font-weight:300; color:#4d7320; line-height: 20px;}

/* Publicity for Conformity Assessment System */
.dcImgBox_publicity{margin:0 0 20px 0;}
.dcImgBox_publicity > p{word-break: break-word;}
.dcImgBox_publicity > p.dcImgTitle{font-size:16px; font-weight:500; color:#3aabd3; margin-bottom:10px; line-height: 22px;}
.dcImgBox_publicity > p.dcImgText{font-size:14px; font-weight:300; color:#185dab; line-height:18px;}
.dcTextWrap .dcBasicTableThin td.faq_title{}
.dcTextWrap .dcBasicTableThin td.faq_title button.dcBtnDetailview{padding:2%; background-color:#185dab; text-align:center; font-size:12px; font-weight:300; color:#fff;}
.dcTextWrap .dcBasicTableThin tr.sub_title_bg_ct{display:none;}
.dcTextWrap .dcBasicTableThin tr.sub_title_bg_ct img{width:100%;}

/* Introduction for Designated Test Laboratory */
.dcImgBox_designat{padding:0 0 0 6%; margin:0 0 20px 0;}
.dcImgBox_designat > p{word-break: break-word;}
.dcImgBox_designat > p.dcImgTitle{font-size:13px; font-weight:200; color:#333;}
.dcImgBox_designat > p.dcImgTitle span{font-size:16px; font-weight:400; color:#47b2d7;}
.dcImgBox_designat > p.dcImgTitle span span{color:#103a7d;}

/* Greetings */
h4.dcH4Title2{font-size:20px; font-weight:400; color:#333; margin-bottom:30px; line-height: 34px;}
h4.dcH4Title2 span{font-size:25px; font-weight:500; color:#2b69b6;}
h4.dcH4Title2 span span{color:#76a53b;}
p.dcPContext{font-size:14px; font-weight:200; color:#333; }

/* Vision */
p.dcPVision{text-align:center; font-size:18px; font-weight:500; color:#333; padding:2% 5%; border:solid 2px #ddd; box-sizing:border-box;}
p.dcPVision span{color:#75a83f;}
.dcKeyValuesWrap{overflow:hidden;}
.dcKeyValuesWrap p{width:100%; text-align:center; font-size:16px; font-weight:300; color:#333; padding:2% 2%; border:solid 2px #ddd; box-sizing:border-box; margin-bottom:2%;}
.dcKeyValuesWrap p:last-child{margin-right:0;}
.dcKeyObjectivesWrap{position:relative;}
.dcKeyObjectivesWrap p.dcKeyAbsolute{display:none;}
.dcKeyObjectivesWrap ol{overflow:hidden;}
.dcKeyObjectivesWrap ol > li{width:100%; padding:5%; box-sizing:border-box; border-bottom:solid 1px #92c0f4;}
.dcKeyObjectivesWrap ol > li p.dcKeyTitle{font-size: 16px; font-weight:500; color:#333; line-height: 18px; margin-bottom:10px;}
.dcKeyObjectivesWrap ol > li p.dcKeyTitle span{font-size: 20px; color:#76a73a; margin-right:10px;}
.dcKeyObjectivesWrap ol > li ul{}
.dcKeyObjectivesWrap ol > li ul li{position:relative; font-size:14px; font-weight:200; color: #555; padding-left:9px; line-height: 20px;}
.dcKeyObjectivesWrap ol > li ul li::before{content:''; display:block; position:absolute; top:10px; left:0; width:3px; height:3px; background-color:#65942e;}

/* History */
.dcHistoryWrap{position:relative; width:100%; padding-top: 20px; }
.dcHistoryWrap::before{content:''; display:block; position:absolute; top:0; left:50%; margin-left:-11px; width:22px; height:22px; background-color:#0e3f77; border:solid 7px #ebf3f6; border-radius:50%; box-sizing:border-box;}
.dcHistoryWrap .dcHistoryList{overflow:hidden;}
.dcHistoryWrap .dcHistoryList .dcLeftList{float:left; width:50.2%; border-right:solid 1px #103f78;}
.dcHistoryWrap .dcHistoryList .dcLeftList p{position:relative; text-align:right; padding:0 10% 0 0;}
.dcHistoryWrap .dcHistoryList .dcLeftList p.dcPYears::before{content:''; display:block; position:absolute; top:50%; transform:translateY(-50%); right:0; width:10px; height:1px; background-color:#0e3f77;}
.dcHistoryWrap .dcHistoryList .dcRightList{float:right; width:50%; border-left:solid 1px #103f78;}
.dcHistoryWrap .dcHistoryList .dcRightList p{position:relative; text-align:left; padding:0 0 0 10%;}
.dcHistoryWrap .dcHistoryList .dcRightList p.dcPYears::before{content:''; display:block; position:absolute; top:50%; transform:translateY(-50%); left:0; width:10px; height:1px; background-color:#0e3f77;}
.dcHistoryWrap .dcHistoryList p.dcPYears{font-size: 20px; font-weight: 600; color: #103f78; margin-bottom: 10px; }
.dcHistoryWrap .dcHistoryList p.dcPDate{font-size: 16px; font-weight: 400; color: #393939; }
.dcHistoryWrap .dcHistoryList p.dcPText{font-size: 12px; font-weight: 200; line-height: 18px; margin-bottom: 15px; word-break: break-word;}

/* MI */
.dcMIdownWrap{text-align:center; padding:2% 5%; border:solid 2px #ddd; box-sizing:border-box;}
.dcMIdownWrap a{display:block; text-align:center; font-size:14px; font-weight:200; color:#fff; background-color:#103a7d; padding:1% 5%; margin:0 0 1% 0;}
.dcMIdownWrap a:last-child{margin:0;}
.dcMIdownWrap a:hover{color:#fff;}

/* Cyber Publicity Center */
.dcCyberPRWrap{}
.dcCyberPRWrap ul{}
.dcCyberPRWrap ul li{margin-bottom:10px;} 
.dcCyberPRWrap ul li:last-child{margin-right:0;} 
.dcCyberPRWrap ul li a{display:block; text-align:center;} 
.dcCyberPRWrap ul li p{text-align:center; font-size:14px; font-weight:400; color:#333; } 



/*조직도*/
.dcViewWrap{}
.dcViewWrap ul.dcOrganizationChart{}
.dcViewWrap ul.dcOrganizationChart>li{position: relative; padding-bottom: 30px; width: 100%;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg01{text-align: center;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg01:after{content: ""; display: block; position: absolute; bottom: 0; left: 50%; height: 30px; border-left: 1px solid #dcdcdc;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg01 p{display: inline-block; width: 180px; padding: 13px 0; background-color: #394256; text-align: center; color: #fff; font-size:14px; font-weight:400; word-break: normal;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02{}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul{position: relative; width: 100%; padding:10px; overflow: hidden; display: block; width: 100%; border: 1px solid #dcdcdc;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li{display: table; position: relative; float: left; width: 49%; margin-right:2%; margin-bottom:2%; text-align: left; }
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li:nth-child(2n){margin-right:0;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li>.dcDivTDrow{display:table-row;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li>.dcDivTDrowHeight{height:5px;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li>.dcDivTDrow>p{display:table-cell; width: 100%;  height:80px; padding:0 5%; vertical-align:middle; background-color: #6e8294; text-align: center; color: #fff; font-size:13px; font-weight:400; margin-bottom:10px; line-height: 17px; word-break: normal;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li>.dcDivTDrow>p{}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li>.dcDivTDrow>ul{display:table-cell; height: 250px; border:solid 3px #ddd; padding:10px; margin-bottom:20px;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li>.dcDivTDrow>ul>li{position: relative; padding-left:10px; margin:0 0 10px 0;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li>.dcDivTDrow>ul>li::before{content: ""; display: block; position: absolute; top:7px;  left: 0; width:4px; height:4px; background-color:#3c7cb5; border-radius:50%;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li>.dcDivTDrow>ul>li:last-child{margin:0;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li>.dcDivTDrow>ul>li>p{font-size:12px; font-weight:300; color:#333; line-height: 15px; word-break: normal;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg02>ul>li>.dcDivTDrow>ul>li>p:hover{text-decoration:underline;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg03{text-align: center; padding-bottom: 20px;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg03>p{display: inline-block; width: 180px; padding: 13px 0; background-color:#5b7838; text-align: center; color: #fff; font-size:14px; font-weight:400;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg03>p:after{content: ""; display: block; position: absolute; bottom:0; left: 50%; height:20px; border-left: 1px solid #dcdcdc;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04{}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul{position: relative; width: 100%; padding:10px; overflow: hidden; display: block; border: 1px solid #dcdcdc; margin:0 auto;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li{display: table; position: relative; float: left; width: 49%; margin-right:2%; text-align: left;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li:last-child{margin:0;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow{display:table-row;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrowHeight{height:5px;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>p{display:table-cell; width: 100%; height:80px; padding:0 5%; vertical-align:middle;  background-color:#a5c480; text-align: center; color: #fff; font-size:14px; font-weight:400; margin-bottom:10px; line-height: 17px; word-break: normal;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul{display:table-cell; border:solid 3px #ddd; padding:10px;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul>li{margin-bottom:10px;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul>li>p,
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul>li>a{font-size:13px; font-weight:400; color:#5b783b; word-break: normal; margin-bottom:10px; line-height: 17px;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul>li>a:hover,
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul>li>p:hover{text-decoration:underline;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul>li>ul{padding-left: 10px;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul>li>ul>li{position: relative; padding-left:10px;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul>li>ul>li::before{content: ""; display: block; position: absolute; top:7px;  left: 0; width:4px; height:4px; background-color:#5b783b; border-radius:50%;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul>li>ul>li>p{font-size:12px; font-weight:300; color:#333; line-height: 17px; word-break: normal;}
.dcViewWrap ul.dcOrganizationChart li.dcOrg04>ul>li>.dcDivTDrow>ul>li>ul>li>p:hover{text-decoration:underline;}

/* RESET STYLES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --level-1: #5582c6;
  --level-2: #5582c6;
  --level-3: #5582c6;
  --black: #5582c6;
}

.container {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  font-family: "Noto Sans Korean", sans-serif;
}

.container ol {
  list-style: none;
}

.container {
  max-width: 800px;
  padding: 0 0px;
  margin: 0 auto;
}

.rectangle {
  position: relative;
  text-align: center;
  padding: 0px;
}


/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
  font-size: 20px;
  color: #fff;
  width: 200px;
  margin: 0 auto 10px;
  background: var(--level-1);
  padding: 5px;
}

.level-1_1 {
  font-size: 20px;
  color: #fff;
  width: 200px;
  margin: 0 auto 40px;
  padding: 16px;
  background: var(--level-1);
}

.level-1_1::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 49.5%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--black);
}

/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
  font-size: 9px;
  color: #fff;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.level-2-wrapper p {color:#000; font-size:24px; text-align: center;}

.level-2-wrapper::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 16.6%;
  width: 66.8%;
  height: 2px;
  background: var(--black);
}

.level-2-wrapper li {
  position: relative;
}

.level-2-wrapper > li::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--black);
}

.level-2 {
  width: 256px;
  margin: 0 auto 10px;
  padding: 10px;
  background: var(--level-2);
}

.level-2_2 {
  width: 256px;
  margin: 0 auto 10px;
  padding: 19px;
  background: var(--level-2);
}


/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-3-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.level-3 {
  font-size: 13px;
  width: 123px;
  margin: 0 auto 40px;
  padding: 20px 0;
  background: var(--level-2);
}


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 767px) {

      

    .container {
        max-width: 320px;
      }

/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
  font-size: 14px;
  width: 120px;
  margin: 0 auto 5px;
}

.level-1_1 {
  font-size: 14px;
  width: 120px;
}

.level-1_1::before {
  left: 50%;
}

/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
  font-size: 6px;
}

.level-2-wrapper p {color:#000; font-size:18px;}

.level-2-wrapper::before {
  top: -20px;
  left: 16.6%;
  width: 66.8%;
}

.level-2-wrapper li {
  position: relative;
}

.level-2-wrapper > li::before {
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
}

.level-2 {
  width: 102px;
  margin: 0 auto 5px;
  padding: 10px 0;
  background: var(--level-2);
}

.level-2_2 {
  width: 102px;
  margin: 0 auto 5px;
  padding: 10px;
  background: var(--level-2);
}
  
  
/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.level-3 {
    font-size: 6px;
    width: 49px;
    margin: 0 auto 40px;
    padding: 10px 0;
    background: var(--level-2);
  }