@import url("layout.css");

/*-------------------------------------------------
Author : sehyun oh
Create date : 2020. 10. 22.
-------------------------------------------------*/

/* ========================================== LAYOUT */

#wrap {line-height: 1; background: #ebf2fb;}
#container {position: relative;}

.main_content { padding:1rem 0 1.5rem; }

/* 이미지 정렬 */
.horzImg { width:auto; height:100%; }
.vertImg { width:100%; height:auto; }

/* ========================================== 콘텐츠 */

/* Help Desk (바로가기) */
.m_link { float:left; position:relative; width:52rem; padding-left:6.25rem; }
.m_link h2 { display:table; position:absolute; top:0; left:0; width:6.25rem; height:6rem; border-radius:0.5rem 0 0 0.5rem; background-color:#004c84; font-size:1rem; font-weight:700; line-height:1.1; color:#fff; text-align:center; }
.m_link h2 span { display:table-cell; vertical-align:middle; }
.m_link .items { border-radius:0 0.5rem 0.5rem 0; background-color:#fff; font-size:0; line-height:0; }
.m_link .item { display:inline-block; position:relative; width:20%; height:6rem; padding:0.9rem 0.3rem 0; vertical-align:top; }
.m_link .item + .item:before { content:""; display:block; position:absolute; top:0; bottom:0; left:0; width:1px; height:2.9rem; margin:auto 0; background-color:#ddd; }
.m_link .item .imgbox { width:37px; height:37px; margin:0 auto 0.6rem; }
.m_link .item .imgbox img { position:relative; top:0; width:100%; height:100%; transition:all 0.2s; }
.m_link .item:hover .imgbox img,
.m_link .item:focus .imgbox img { top:-0.3rem; }
.m_link .item .txt { overflow:hidden; max-height:1.9rem; font-size:0.8rem; line-height:1.2; color:#222; text-align:center; }
.m_link .item:hover .txt,
.m_link .item:focus .txt { text-decoration:underline; }

.m_link .slick_btns { display:none; }

/* Helpline */
.helpline { display:block; float:right; width:17rem; height:6rem; border-radius:0.5rem; background:#009da6 url("/images/web/english/main/helpline_bg.png") no-repeat 2.2rem 100%; color:#fff; }
.helpline > a { display:block; height:100%; padding:1.25rem; }
.helpline > a:hover { text-decoration:none; }
.helpline .inner { position:relative; padding-left:5.4rem; }
.helpline h2 { display:block; position:absolute; top:0; left:0; font-size:1rem; font-weight:700; }
.helpline li { position:relative; padding-left:2.25rem; font-size:1.2rem; }
.helpline li:before { content:""; display:block; position:absolute; top:0; bottom:0; left:0; width:34px; height:34px; margin:auto 0; background-repeat:no-repeat; }
.helpline li.ico01:before { background-image:url("/images/web/english/main/helpline_ico01.png"); }
.helpline li.ico02:before { background-image:url("/images/web/english/main/helpline_ico02.png"); }
.helpline li + li { margin-top:0.9rem; }

/* News */
.notice { float:left; position:relative; width:35rem; height:14rem; margin-top:1rem; padding:1rem 1.25rem; border-radius:0.5rem; border:1px solid #d4d4d4; background-color:#fff; }
.notice:before { content:""; display:block; position:absolute; top:2.4rem; left:0; right:0; width:calc(100% - 2.5rem); height:1px; margin:0 auto; background-color:#d4d4d4; }

.notice h2 { display:inline-block; min-width:4.25rem; vertical-align:top; }
.notice h2 a { display:block; position:relative; padding-bottom:0.5rem; border-bottom:3px solid #434343; font-size:1rem; line-height:0.8; color:#222; text-align:center; }
.notice h2 a:hover { text-decoration:none; }

.notice .list_box { display:none; position:absolute; top:3.05rem; left:0; width:100%; height:auto; padding:0 1.25rem; }
.notice .list_box.on { display:block; }

.notice .list_box .top { position:relative; height:3rem; padding-top:0.5rem; padding-left:4.25rem; }
.notice .list_box .top a { display:block; }
.notice .list_box .top .date { display:block; position:absolute; top:0; left:0; width:3.5rem; height:3rem; padding-top:0.5rem; background-color:#eaeaea; text-align:center; }
.notice .list_box .top .date .d { display:block; padding-bottom:0.3rem; font-size:1rem; color:#222; }
.notice .list_box .top .date .m { display:block; font-size:0.7rem; color:#686868; }
.notice .list_box .top strong { display:block; overflow:hidden; max-height:1.9rem; font-weight:400; font-size:0.8rem; line-height:1.2; color:#222; }
.notice .list_box .top a:hover strong,
.notice .list_box .top a:focus strong { text-decoration:underline; }

.notice .list_box ul { margin-top:0.75rem; padding-top:0.75rem; border-top:1px dotted #b9b9b9; }
.notice .list_box li { position:relative; padding-left:0.65rem; font-size:0.8rem; line-height:1.75; color:#333; }
.notice .list_box li:before { content:""; display:block; position:absolute; top:0; bottom:0; left:0; width:4px; height:4px; margin:auto 0; background-color:#434343; }
.notice .list_box li a { display:block; position:relative; }
.notice .list_box li a strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-right:7.75rem; font-weight:400; }
.notice .list_box li a:hover strong,
.notice .list_box li a:focus strong { text-decoration:underline; }
.notice .list_box li a .date { display:block; position:absolute; top:0; right:0; color:#515151; }

.notice .btn_more { display:block; overflow:hidden; position:absolute; top:-2.5rem; right:1.25rem; width:1.9rem; height:1.9rem; border:1px solid #d4d4d4; color:transparent; }
.notice .btn_more:before { content:""; display:block; position:absolute; top:0; bottom:0; left:0; right:0; width:21px; height:21px; margin:auto; background:url("/images/web/english/main/notice_more.png") no-repeat; transition:all 0.2s; }
.notice .btn_more:hover:before { -ms-transform:rotate(90deg); transform:rotate(90deg); }

/* 바로가기 2 */
.m_link2 { float:left; width:16rem; height:14rem; margin:1rem 0 0 1rem; }
.m_link2 li { width:100%; height:4.35rem; }
.m_link2 li + li { margin-top:0.475rem; }
.m_link2 li a { display:table; position:relative; width:100%; height:100%; padding:1rem 1.5rem; border-radius:0.5rem; background-color:#4579af; table-layout:fixed; }
.m_link2 li:nth-child(2) a { background-color:#077bac; }
.m_link2 li:nth-child(3) a { background-color:#118387; }
.m_link2 li a .inner { display:table-cell; padding-left:3.2rem; vertical-align:middle; }
.m_link2 li a .imgbox { position:absolute; top:0; bottom:0; left:1.5rem; width:41px; height:38px; margin:auto 0; }
.m_link2 li a .imgbox img { width:100%; height:100%; }
.m_link2 li a .txt { overflow:hidden; max-height:2.2rem; font-size:0.9rem; line-height:1.25; color:#fff; }
.m_link2 li a:hover .txt,
.m_link2 li a:focus .txt { text-decoration:underline; }

/* 비디오 */
.video { float:right; width:17rem; height:14rem; margin-top:1rem; }
.video a { display:block; height:100%; position:relative; }
.video a .imgbox { overflow:hidden; position:relative; height:9.7rem; border-radius:0.5rem 0.5rem 0 0; }
.video a .imgbox:before { content:""; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:1; background:rgba(0,0,0,0.5) url("/images/web/english/main/video_play.png") no-repeat 50% 50%; }
.video a .imgbox img { position:relative; top:50%; -ms-transform:translateY(-50%); transform:translateY(-50%); width:100%; height:auto; }
.video a .txt { display:block; position:absolute; bottom:0; left:0; width:100%; height:4.3rem; padding:1.05rem 1rem; border-radius:0 0 0.5rem 0.5rem; background-color:#004a8f; font-size:0.9rem; color:#fff; text-align:center; }
.video a:hover .txt,
.video a:focus .txt { text-decoration:underline; }
.video a .txt em { display:block; overflow:hidden; height:2.2rem; }
.video a .txt em > span { display:table; width:100%; height:100%; line-height:1.25; table-layout:fixed; }
.video a .txt em > span > span { display:table-cell; vertical-align:middle; }

/* Tax Forms (바로가기 3) */
.m_link3 { float:left; width:25.5rem; height:12rem; margin-top:1rem; }
.m_link3 h2 { height:2.25rem; padding-left:1.25rem; padding-right:1rem; border-radius:0.5rem 0.5rem 0 0; background:#004c84 url("/images/web/english/main/link3_bg.png") no-repeat 100% 100%; font-size:1rem; font-weight:700; line-height:2.25rem; color:#fff; }
.m_link3 ul { height:calc(100% - 2.25rem); padding:0 1rem; border:1px solid #d4d4d4; border-top:0; border-radius:0 0 0.5rem 0.5rem; background-color:#fff; }
.m_link3 li { display:table; width:100%; height:2.35rem; background:url("/images/web/english/main/link3_arr.png") no-repeat 98% 50%; table-layout:fixed; }
.m_link3 li + li { border-top:1px dotted #b9b9b9; }
.m_link3 li > div { display:table-cell; vertical-align:middle; }
.m_link3 li > div > a { display:block; overflow:hidden; padding-right:2rem; font-size:0.75rem; color:#222; line-height:1.1; }
.m_link3 li > div > a:not(:only-child) { white-space:nowrap; text-overflow:ellipsis; }
.m_link3 li > div > a:only-child { max-height:1.65rem; }
.m_link3 li > div > a:hover,
.m_link3 li > div > a:focus { text-decoration:underline; }
.m_link3 li > div > span { display:block; margin-top:0.1rem; }
.m_link3 li > div > span > a { display:inline-block; height:1.15rem; padding:0 0.35rem; border-radius:0.5rem; background-color:#d6e8f3; line-height:1.15rem; }
.m_link3 li > div > span > a:hover,
.m_link3 li > div > span > a:focus { text-decoration:underline; }

/* 2019 Year-end Tax Settlement (바로가기 4) */
.m_link4 { float:left; width:25.5rem; height:12rem; margin:1rem 0 0 1rem; }
.m_link4 h2 { height:2.25rem; padding-left:1.25rem; padding-right:1rem; border-radius:0.5rem 0.5rem 0 0; background:#1c6f91 url("/images/web/english/main/link3_bg.png") no-repeat 100% 100%; font-size:1rem; font-weight:700; line-height:2.25rem; color:#fff; }
.m_link4 ul { height:calc(100% - 2.25rem); padding:0 1rem; border:1px solid #d4d4d4; border-top:0; border-radius:0 0 0.5rem 0.5rem; background-color:#fff; }
.m_link4 li { display:table; width:100%; height:2.35rem; background:url("/images/web/english/main/link4_arr.png") no-repeat 98% 50%; table-layout:fixed; }
.m_link4 li + li { border-top:1px dotted #b9b9b9; }
.m_link4 li > div { display:table-cell; vertical-align:middle; }
.m_link4 li > div > a { display:block; overflow:hidden; padding-right:2rem; font-size:0.75rem; color:#222; line-height:1.1; }
.m_link4 li > div > a:not(:only-child) { margin-top:0.2rem; white-space:nowrap; text-overflow:ellipsis; }
.m_link4 li > div > a:only-child { max-height:1.65rem; }
.m_link4 li > div > a:hover,
.m_link4 li > div > a:focus { text-decoration:underline; }
.m_link4 li > div > span { display:block; margin-top:0.1rem; margin-bottom:0.2rem; }
.m_link4 li > div > span > a { display:inline-block; height:1.05rem; padding:0 0.35rem; border-radius:0.5rem; background-color:#d6e8f3; line-height:1.05rem; }
.m_link4 li > div > span > a:hover,
.m_link4 li > div > span > a:focus { text-decoration:underline; }

/* Home Tax service (바로가기 5) */
.m_link5 { float:right; width:17rem; height:12rem; margin-top:1rem; border-radius:0.5rem; background:#007bb7 url("/images/web/english/main/link5_bg.png") no-repeat 87% 90%; color:#fff; }
.m_link5 > a { display:block; position:relative; height:100%; padding:1.25rem; }
.m_link5 > a:hover { text-decoration:none; }
.m_link5 > a:before { content:""; display:block; position:absolute; left:1.3rem; bottom:2.2rem; width:67px; height:26px; background:url("/images/web/english/main/link5_arr.png") no-repeat; transition:all 0.2s; }
.m_link5 > a:hover:before { left:1.7rem; }
.m_link5 h2 { margin-bottom:0.75rem; font-size:1rem; font-weight:700; }
.m_link5 p { font-size:0.8rem; line-height:1.375; }

@media (max-width: 1440px) {

	/* Help Desk (바로가기) */
	.m_link { width:73%; }

	/* Helpline */
	.helpline { width:25.5%; }

	/* News */
	.notice { width:48%; }

	/* 바로가기 2 */
	.m_link2 { width:23.5%; margin-left:1.5%; }

	/* 비디오 */
	.video { width:25.5%; }

	/* Tax Forms (바로가기 3) */
	.m_link3 { width:35.5%; }

	/* 2019 Year-end Tax Settlement (바로가기 4) */
	.m_link4 { width:36%; margin-left:1.5%; }

	/* Home Tax service (바로가기 5) */
	.m_link5 { width:25.5%; }
}

@media (max-width: 1400px) {

	/* Helpline */
	.helpline { background-position-x:95%; }
	.helpline h2 { position:relative; top:auto; left:auto; margin-bottom:0.5263rem; }
	.helpline li { padding-left:1.895rem; font-size:0.8947rem; }
	.helpline li + li { margin-top:0.8421rem; }
	.helpline li:before { width:26px; height:26px; background-size:100% 100%; image-rendering:-webkit-optimize-contrast; }
	.helpline > a { padding:1rem; }
	.helpline .inner { padding-left:0; }
}

@media (max-width: 1200px) {

	/* Help Desk (바로가기) */
	.m_link { padding-left:4rem; }
	.m_link h2 { width:4rem; }

	/* 바로가기 2 */
	.m_link2 li a { padding-left:1.053rem; padding-right:1.053rem; }
	.m_link2 li a .inner { padding-left:2.368rem; }
	.m_link2 li a .imgbox { left:1.053rem; width:34px; height:32px; image-rendering:-webkit-optimize-contrast; }

	/* Home Tax service (바로가기 5) */
	.m_link5 { background-size:110px; image-rendering:-webkit-optimize-contrast; }
	.m_link5 > a:before { width:52px; height:20px; background-size:100% 100%; image-rendering:-webkit-optimize-contrast; }
}

@media (max-width: 1130px) {

	/* 비디오 */
	.video a .imgbox img { top:auto; left:50%; -ms-transform:translate(-50%, 0); transform:translate(-50%, 0); width:auto; height:100%; }
}

@media (max-width: 1024px) {

	/* Help Desk (바로가기) */
	.m_link { width:100%; padding-left:4.833rem; }
	.m_link h2 { width:4.833rem; }

	/* Helpline */
	.helpline { width:100%; height:auto; margin-top:0.7222rem; background-size:35px; background-position-x:97%; image-rendering:-webkit-optimize-contrast; }
	.helpline .inner { height:0.9444rem; padding-left:8.333rem; }
	.helpline > a { padding:0.7222rem; }
	.helpline h2 { position:absolute; top:0; left:0; margin-bottom:0; }
	.helpline ul:after { content:""; display:block; clear:both; }
	.helpline li { float:left; width:50%; padding-right:1rem; }
	.helpline li + li { margin-top:0; }

	/* News */
	.notice { width:49%; margin-top:0.7222rem; }
	.notice .list_box li a strong { margin-right:4.444rem; }

	/* 바로가기 2 */
	.m_link2 { width:49%; margin-right:0; margin-top:0.7222rem; }
	.m_link2 li a .inner { padding-left:3.056rem; }
	.m_link2 li a .imgbox { width:41px; height:38px; }
	.m_link2 li a .txt br { display:none; }

	/* 동영상 */
	.video { float:left; width:49%; height:12rem; margin-top:0.7222rem; }
	.video a .imgbox { height:calc(100% - 3.333rem); }
	.video a .imgbox img { left:auto; top:50%; -ms-transform:translate(0, -50%); transform:translate(0, -50%); width:100%; height:auto; }
	.video a .txt { height:3.389rem; padding-top:0.5556rem; padding-bottom:0.5556rem; }
	.video a .txt em > span > span br { display:none; }

	/* Tax Forms (바로가기3) */
	.m_link3 { float:right; width:49%; margin-top:0.7222rem; }

	/* 2019 Year-end Tax Settlement (바로가기4) */
	.m_link4 { float:left; width:49%; margin-left:0; margin-top:0.7222rem; }

	/* Home Tax service (바로가기 5) */
	.m_link5 { float:right; width:49%; height:12rem; margin-top:0.7222rem; background-size:auto; background-position-y:92%; }
	.m_link5 > a:before { bottom:1.111rem; width:67px; height:26px; }
}

@media (max-width: 768px) {

	/* Help Desk (바로가기) */
	.m_link { padding-left:0; }
	.m_link h2 { position:relative; top:auto; left:auto; width:100%; height:2rem; border-radius:0.5rem 0.5rem 0 0; }
	.m_link .items { border-radius:0 0 0.5rem 0.5rem; }
}

@media (max-width: 640px) {

	/* Help Desk (바로가기) */
	.m_link h2 { padding-left:1.111rem; text-align:left; }
	.m_link .items { overflow:hidden; }
	.m_link .item.slick-current:before { opacity:0; transition:opacity 0.6s; }
	.m_link .item .txt br { display:none; }

	.m_link .slick-list { overflow:hidden; }
	.m_link .slick_btns { display:block; position:absolute; top:0.2222rem; right:0.5556rem; }
	.m_link .slick_btns button { overflow:hidden; width:1.556rem; height:1.556rem; padding:0; border-radius:50%; background-color:#fff; background-repeat:no-repeat; background-position:50% 50%; background-size:10px; color:transparent; image-rendering:-webkit-optimize-contrast; }
	.m_link .slick_btns .btn_prev { background-image:url("/images/web/english/main/link_prev.png"); }
	.m_link .slick_btns .btn_next { background-image:url("/images/web/english/main/link_next.png"); }

	/* Helpline */
	.helpline { background-image:none; }
	
	/* News */
	.notice { width:100%; }

	/* 바로가기 2 */
	.m_link2 { width:100%; height:auto; margin-left:0; }
	.m_link2 li { height:auto; }
	.m_link2 li a .inner { padding-left:2.5rem; }
	.m_link2 li a .imgbox { width:34px; height:32px; }

	/* 비디오 */
	.video { width:100%; }

	/* Tax Forms (바로가기3) */
	.m_link3 { width:100%; height:auto; }
	
	/* 2019 Year-end Tax Settlement (바로가기4) */
	.m_link4 { width:100%; height:auto; }

	/* Home Tax service (바로가기 5) */
	.m_link5 { float:left; width:100%; height:auto; background-image:none; }
	.m_link5 > a:before { bottom:auto; top:0.8333rem; left:auto; right:1.667rem; }
	.m_link5 > a:hover:before,
	.m_link5 > a:focus:before { left:auto; right:1.444rem; }
	.m_link5 p br { display:none; }
}

@media (max-width: 480px) {

	/* Help Desk (바로가기) */
	.m_link .item .txt { max-height:1.778rem; font-size:0.75rem; }

	/* Helpline */
	.helpline h2 { position:relative; top:auto; left:auto; margin-bottom:0.8333rem; }
	.helpline .inner { height:auto; padding-left:0; }
}

@media (max-width: 380px) {

	/* Helpline */
	.helpline h2 { margin-bottom:0.8333rem; }
	.helpline li { float:none; width:auto; }
	.helpline li + li { margin-top:1.111rem; }

	/* News */
	.notice .list_box li a strong { margin-right:0; }
	.notice .list_box li a .date { display:none; }
}

@media (max-width: 320px) {

	/* News */
	.notice .list_box .top { padding-left:3.75rem; }
	.notice .list_box .top .date { width:3rem; }

	/* Tax Forms (바로가기3) */
	.m_link3 h2 { padding:0 0.7778rem; }
	.m_link3 ul { padding:0 0.7778rem; }
	.m_link3 li { background-position-x:100%; }

	/* 2019 Year-end Tax Settlement (바로가기4) */
	.m_link4 h2 { padding:0 0.7778rem; }
	.m_link4 ul { padding:0 0.7778rem; }
	.m_link4 li { background-position-x:100%; }

	/* Home Tax service (바로가기 5) */
	.m_link5 > a { padding:0.7778rem; }
	.m_link5 > a:before { top:0.5556rem; right:0.7778rem; width:52px; height:20px; }
	.m_link5 > a:hover:before { right:0.3889rem; }
}