﻿/* General Style */

/* ===================== GRID ========================== */
.conDOC {
    display: grid;
	grid-template-columns: fr fr fr fr fr fr;
	grid-template-rows: auto auto auto;
	gap: 5px 5px;

    grid-template-areas: 
"D01 D02 D03 D04 D05 D06"
"D07 D08 D09 D10 D11 D12"
"D13 D14 D15 D16 D17 D18"
}
.pic01 { grid-area: D01; }
.pic02 { grid-area: D02; }
.pic03 { grid-area: D03; }
.pic04 { grid-area: D04; }
.pic05 { grid-area: D05; }
.pic06 { grid-area: D06; }
.pic07 { grid-area: D07; }
.pic08 { grid-area: D08; }
.pic09 { grid-area: D09; }
.pic10 { grid-area: D10; }
.pic11 { grid-area: D11; }
.pic12 { grid-area: D12; }
.pic13 { grid-area: D13; }
.pic14 { grid-area: D14; }
.pic15 { grid-area: D15; }
.pic16 { grid-area: D16; }
.pic17 { grid-area: D17; }
.pic18 { grid-area: D18; }

@media (max-width: 768px) {

.conDOC {
    display: grid;
	grid-template-columns: fr fr fr;
	grid-template-rows: auto auto auto auto auto auto;
	gap: 5px 5px;

    grid-template-areas: 
"D01 D02 D03"
"D04 D05 D06"
"D07 D08 D09"
"D10 D11 D12"
"D13 D14 D15"
"D16 D17 D18"
}
}
/* ===================== END GRID ======================== */
.box1 { display: flex; flex-direction: row; width: 95vw; gap: 1px 1px; }
.txt001 { height: 50px; width: 7vw; background:#f6fdbc; text-align:center; border: 1px solid #333; line-height: 50px; }
.txt002 { height: 50px; width: 23vw; background:#f6fdbc; text-align:center; border: 1px solid #333; line-height: 50px; }
.txt003 { height: 50px; width: 15vw; background:#f6fdbc; text-align:center; border: 1px solid #333; line-height: 50px; }
.txt004 { height: 50px; width: 15vw; background:#f6fdbc; text-align:center; border: 1px solid #333; line-height: 50px; }
.txt005 { height: 50px; width: 40vw; background:#f6fdbc; text-align:center; border: 1px solid #333; line-height: 50px; }
.txt011 { width: 7vw; background:Honeydew; text-align:center; border: 1px solid #333; }
.txt012 { width: 23vw; background:Honeydew; text-align:center; border: 1px solid #333; }
.txt013 { width: 15vw; background:Honeydew; text-align:center; border: 1px solid #333; }
.txt014 { width: 15vw; background:Honeydew; text-align:center; border: 1px solid #333; }
.txt015 { width: 40vw; background:Honeydew; text-align:center; border: 1px solid #333; }
	.pic2 img:last-child{display:none}
	.pic2:hover img:first-child{display:none}
	.pic2:hover img:last-child{display:inline-block}
 a img { border: none; }
 a:hover img { border: none; }
/* ========================== END =========================== */