/* 서브페이지 메인 - 공통설정 */
body {position: relative; z-index: -999;}
section h3 {font-size: 2.2rem; font-weight: 500; color: #3e8eac;}
section h2 {font-size: 4.2rem; font-weight: 700; margin-top: 10px;}
section p {font-size: 1.6rem; font-weight: 500; color: #333;}

.header_bottom {background: url(images/sub03/header_bg.png) no-repeat center / cover;}
/*  */

/* section01 - 슬로건*/
.section01 {position: relative; height: 1205px; z-index: -1;}
.section01 .bg {width: 100%; height: 100%; position: absolute; top: 0; 
    background: url(images/sub03/section01_bg.png) no-repeat center / cover;}
.slogun {width: 100%; height: 100%; text-align: center; padding-top: 480px;}
.slogun h2 {color: #fff; font-size: 7.5rem; font-weight: 500;}
.slogun h3 {color: #fff; font-size: 4.7rem; font-weight: 700;}
.slogun p {color: #fff; font-size: 2.6rem; margin: 165px 0 200px;}
.slogun .line {width: 1px; height: 64px; background: #fff; display: inline-block; animation: slogunAni 1.4s ease-in-out infinite;}
@keyframes slogunAni {
    0% {height: 0; opacity: 0;}
    100% {height: 64px; opacity: 1;}
}

/* section02 - 수출지역 */
.section02 {position: relative; height: 1172px; padding-top: 100px; z-index: -1;}
.section02 .bg {width: 100%; height: 787px; position: absolute; bottom: 0; 
    background: url(images/sub03/export_bg.png) no-repeat center / cover;}
#ExportArea {height: 850px; margin-top: 66px; position: relative;}
#ExportArea h4 {font-size: 1.4rem;}
#ExportArea p {font-size: 1.4rem; font-weight: 400;}
#ExportArea > div > ul > .img_box {width: 220px; height: 140px; box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.2); border-radius: 10px;
    background: #fff;}
#ExportArea > div > ul > .text_box {width: 220px; height: 140px; box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.2); border-radius: 10px;
    background: #fff; padding: 10px; align-content: center; justify-content: space-between;}
#ExportArea > div > button {color: #fff; font-size: 1.4rem; font-weight: 700; text-align: center; align-content: center; border: none; box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2);
width: 70px; height: 70px; background: linear-gradient(125deg, #1b4981, #020e1d); border-radius: 100%;}
#ExportArea > div > button:focus {background: #1b4981;}
#ExportArea > div > button:hover {background: #1b4981; zoom: 1.02;}

/* china */
.china {position: absolute; top: 20px; left: 298px; width: 398px; height: 410px;}
.china .card {display: none;}
.china .img_box a {width: 100%; height: 100%; background: url(images/sub03/china.png) no-repeat center / cover; border-radius: 10px;}
.china .card_Btn {position: absolute; bottom: 0; right: 0;}
.china .line {display: none; width: 0px; height: 0px; position: absolute; right: 68px; bottom: 30px; border-bottom: 2px solid #000;
     animation: chanaAni .5s ease-in-out forwards;}
@keyframes chanaAni {
    0%  {width: 0px; opacity: 0;}
    90% {width: 220px; opacity: 0.6;}
    100% {width: 220px; height: 100px; opacity: 1; border-left: 2px solid #000;}
}
/* korea */
.korea {position: absolute; top: 20px; right: 310px; width: 226px; height: 434px;}
.korea .card {display: none;}
.korea .img_box a {width: 100%; height: 100%; background: url(images/sub03/korea.png) no-repeat center / cover; border-radius: 10px;}
.korea .text_box {flex-wrap: wrap; line-height: 30px;}
.korea .text_box h4 {width: 33.333%;}
.korea .card_Btn {position: absolute; bottom: 0; right: 50%; transform: translateX(50%);}
.korea .line {display: none; width: 0px; height: 0px; position: absolute; right: 50%; transform: translateX(50%); bottom: 70px; border-bottom: 2px solid #000;
     animation: koreaAni .5s ease-in-out forwards;}
@keyframes koreaAni {
    0%  {opacity: 0;}
    100% {height: 84px; opacity: 1; border-left: 2px solid #000;}
}
/* japan */
.japan {position: absolute; right: 0; top: 216px; width: 388px; height: 286px; }
.japan .card {display: none; position: absolute; right: 0;}
.japan .img_box a {width: 100%; height: 100%; background: url(images/sub03/japan.png) no-repeat center top / cover; border-radius: 10px;}
.japan .text_box {flex-wrap: wrap;}
.japan .text_box h4 {width: 50%;}
.japan .card_Btn {position: absolute; left: 10px; top: 50%; transform: translateY(50%);}
.japan .line {display: none; width: 0px; height: 0px; position: absolute; bottom: 70px; left: 70px; border-bottom: 2px solid #000;
     animation: japanAni .5s ease-in-out forwards;}
@keyframes japanAni {
    0%  {opacity: 0;}
    100% {width: 98px; opacity: 1; border-left: 2px solid #000;}
}
/* taiwan */
.taiwan {position: absolute; bottom: 40px; right: 0; width: 494px; height: 306px; }
.taiwan .card {display: none; position: absolute; right: 0;}
.taiwan .img_box a {width: 100%; height: 100%; background: url(images/sub03/taiwan.png) no-repeat center bottom / cover; border-radius: 10px;}
.taiwan .text_box {flex-wrap: wrap; line-height: 30px;}
.taiwan .text_box h4 {width: 50%;}
.taiwan .card_Btn {position: absolute; left: 0; top: 0;}
.taiwan .line {display: none; width: 2px; height: 0px; position: absolute; top: 70px; left: 34px; border-bottom: 2px solid #000;
     animation: taiwanAni .5s ease-in-out forwards;}
@keyframes taiwanAni {
    0%  {opacity: 0;}
    50% {height: 150px; opacity: 0.5;}
    100% {height: 150px; width: 240px; opacity: 1; border-left: 2px solid #000;}
}
/* S.Easia */
.seasia {position: absolute; bottom: -50px; left: 290px; width: 454px; height: 306px; }
.seasia .card {display: none;}
.seasia .img_box a {width: 100%; height: 100%; background: url(images/sub03/SEasia.png) no-repeat center bottom / cover; border-radius: 10px;}
.seasia .text_box {flex-wrap: wrap; line-height: 30px;}
.seasia .text_box h4 {width: 50%;}
.seasia .card_Btn {position: absolute; right: 0; top: 50px;}
.seasia .line {display: none; width: 2px; height: 0px; position: absolute; right: 35px; top: 110px; border-bottom: 2px solid #000;
     animation: seasiaAni .5s ease-in-out forwards;}
@keyframes seasiaAni {
    0%  {opacity: 0;}
    50% {height: 105px; opacity: 0.5;}
    100% {height: 105px; width: 198px;  opacity: 1; border-right: 2px solid #000;}
}
/* india */
.india {position: absolute; bottom: 220px; left: 0; width: 623px; height: 306px; }
.india .card {display: none;}
.india .img_box a {width: 100%; height: 100%; background: url(images/sub03/india.png) no-repeat center bottom / cover; border-radius: 10px;}
.india .text_box {flex-wrap: wrap; line-height: 30px;}
.india .text_box h4 {width: 50%;}
.india .card_Btn {position: absolute; right: 0; bottom: 50px;}
.india .line {display: none; width: 2px; height: 0px; position: absolute; right: 70px; bottom: 82px; border-bottom: 2px solid #000;
     animation: indiaAni .5s ease-in-out forwards;}
@keyframes indiaAni {
    0%  {opacity: 0;}
    100% {width: 332px; opacity: 1; border-right: 2px solid #000;}
}
/* max-width 1400 ExportArea*/
#ExportArea { align-content: center;}
.mb_ExportArea  {display: none; text-align: center;}
.mb_ExportArea .tit {text-align: center;}
.mbExport_Btn {flex-wrap: wrap; width: 100%; height: 100%; align-content: center;}
.mbExport_Btn button {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    border: none; border-radius: 100%; padding: 20px; font-weight: 700; font-size: 1.8rem; color: #fff;
box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.2); background: linear-gradient(125deg, #1b4981, #020e1d);}
.mbExport_Btn button:focus {background: #1b4981;}
.mbExport_Btn button:hover {background: #1b4981;}
.areaList {border: 1px solid #d1d1d1; border-radius: 10px; width: 25%; height: 35%; margin: 100px 50px; padding-bottom: 10px;
    background: #fff; box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.2);}
.areaList:hover {cursor: pointer; transform: scale(1.1);}
.areaList h4 {margin-bottom: 10px;}
.areaList li {font-size: 1.4rem;}
.areaList:nth-child(2), .areaList:nth-child(3), .areaList:nth-child(4)  {margin-top: 0;}
.mb_china {background: url(images/sub03/china.png) no-repeat center / cover; width: 100%; height: 150px; display: inline-block; border-radius: 10px 10px 0 0;}
.mb_korea {background: url(images/sub03/korea.png) no-repeat center / cover; width: 100%; height: 150px; display: inline-block; border-radius: 10px 10px 0 0;}
.mb_japan {background: url(images/sub03/japan.png) no-repeat top / cover; width: 100%; height: 150px; display: inline-block; border-radius: 10px 10px 0 0;}
.mb_india {background: url(images/sub03/india.png) no-repeat top / cover; width: 100%; height: 150px; display: inline-block; border-radius: 10px 10px 0 0;}
.mb_SEasia{background: url(images/sub03/SEasia.png) no-repeat center / cover; width: 100%; height: 150px; display: inline-block; border-radius: 10px 10px 0 0;}
.mb_taiwan {background: url(images/sub03/taiwan.png) no-repeat center / cover; width: 100%; height: 150px; display: inline-block; border-radius: 10px 10px 0 0;}

/* section03 - 브로셔 */
.section03 {align-content: center; padding: 100px 0 200px 0;}
.section03 .contents {margin-top: 60px; background: url(images/sub03/brochure.png) no-repeat center / contain; width: 100%; height: 655px;}
.pdfDown {text-align: center; margin-top: 30px; }  
.pdfDown a {font-size: 1.6rem; font-weight: 700; border: 1px solid #dfdfdf; border-radius: 10px; padding: 10px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.1);}
.pdfDown a:hover {background: #f7f7f7;}
.pdfDown i {font-size: 1.8rem; color: #000; margin-left: 10px;}


/* 반응형 */
@media screen and (max-width: 1400px) {
    .section01 p {padding: 20px;}
    .section02 {padding: 100px 20px;}
    .section02 .bg {background-size: contain;}
    #ExportArea div {display: none;}
    .mb_ExportArea {display: flex;}
    .mbExport_Btn .areaList {display: none;}
    .section03 {padding: 100px 20px;}
}

@media screen and (max-width: 1300px) {
    .areaList {margin: 50px 20px !important;}
    .section03 .contents {height: 600px;}
}

@media screen and (max-width: 955px) {
    section h3 {font-size: 1.8rem;}
    section h2 {font-size: 3.2rem;}
    section p {font-size: 1.4rem;}
    .section01 {height: 1000px;}
    .slogun {padding-top: 380px;}
    .slogun h2 {font-size: 5.8rem;}
    .slogun h3 {font-size: 3.6rem;}
    .slogun p {font-size: 1.8rem; margin: 160px 0 100px 0;}
    .section03 .contents {height: 400px;}

}

@media screen and (max-width: 650px) {
    .tit_box {margin-top: 100px;}
}

@media screen and (max-width: 600px) {
    section h3 {font-size: 1.6rem;}
    section h2 {font-size: 2.6rem;}
    section p {font-size: 1.4rem;}

    .slogun h2 {font-size: 4.2rem;}
    .slogun h3 {font-size: 2.6rem;}
    .slogun p {font-size: 1.4rem;}
    .section02 .bg {background-position-y: 35%;}
    .areaList {width: 50%; height: 50%; margin: 0 !important;}
    .areaList:hover {cursor: pointer; transform: scale(1);}
    .areaList:nth-child(2) {margin: 0 0 100px 0 !important;}
    .areaList:nth-child(3) {margin: 0 0 100px 0 !important;}
    .areaList:nth-child(4) {margin-top: 100px !important;}
    .areaList:nth-child(5) {margin-top: 100px !important;}
    .areaList:nth-child(6) {display: none !important;}
    .areaList:nth-child(7) {display: none !important;}
    .section03 .contents {height: 300px;}

}