@charset "utf-8"; /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Visit Boryeong 2022 > 2022 Visit Boryeong Year 연관단어 : #sub_01_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_01_01{} #sub_01_01>h5{margin-top: 2.5em;} #sub_01_01>[data-visual-box="1"][data-bg="2"]{background-image: url(../../images/eng/content/boryeong_city_img.jpg);} #sub_01_01>[data-visual-box="1"][data-bg="2"]>.title_box{width: auto;} #sub_01_01>[data-box="3"]>ul>.in>[data-img="1"]{background-image: url(../../images/eng/content/logo_boryeong_01.png);} #sub_01_01>[data-box="3"]>ul>.in>[data-img="2"]{background-image: url(../../images/eng/content/logo_boryeong_02.png);} #sub_01_01>[data-box="3"]>ul>.in>[data-img="3"]{background-image: url(../../images/eng/content/logo_boryeong_03.png);} #sub_01_01>[data-box="3"][data-box='3']>ul>li>.img_box{height: 12.37em;background-size: auto;} #sub_01_01>[data-box="3"][data-box='3']>ul>li:nth-child(1){width: 42.5%;} #sub_01_01>[data-box="3"][data-box='3']>ul>li:nth-child(2){width: 31.1%;} #sub_01_01>[data-box="3"][data-box='3']>ul>li:nth-child(3){width: 19.7%;} #sub_01_01>[data-box='3']>ul>li>.txt_box>strong::after{display: none;} #sub_01_01>.txt_box{background-color: #F3F8FE;border-radius: 0px 0px 40px 0px;padding: 1.5em 2em;margin: 2.5em 0;} #sub_01_01>.txt_box>p>strong{color:#1074E4;font-weight: 500;} @media screen and (max-width:1024px){ #sub_01_01>[data-box="3"][data-box='3']>ul>li:nth-child(1)>.img_box{background-size: 90%;} #sub_01_01>[data-box="3"][data-box='3']>ul>li:nth-child(2)>.img_box{background-size: 68%;} #sub_01_01>[data-box="3"][data-box='3']>ul>li:nth-child(3)>.img_box{background-size: 61%;} } @media screen and (max-width:640px){ #sub_01_01>[data-visual-box="1"][data-bg="2"]>.title_box{width: 20em;} #sub_01_01>[data-box="3"][data-box='3']>ul{flex-wrap: wrap;} #sub_01_01>[data-box="3"][data-box='3']>ul>li{width: 100% !important;} #sub_01_01>[data-box="3"][data-box='3']>ul>li:nth-child(1)>.img_box{background-size:25em;} #sub_01_01>[data-box="3"][data-box='3']>ul>li:nth-child(2)>.img_box, #sub_01_01>[data-box="3"][data-box='3']>ul>li:nth-child(3)>.img_box{background-size: auto;} } @media screen and (max-width:420px){ #sub_01_01>[data-visual-box="1"][data-bg="2"]>.title_box{width: 15em; min-width: 13em;} #sub_01_01>[data-box="3"][data-box='3']>ul>li:nth-child(1)>.img_box{background-size:contain;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Visit Boryeong 2022 > Introduction 연관단어 : #sub_01_02 ////////////////////////////////////////////////////////////////////////////// */ #sub_01_02{} #sub_01_02>.programs_box{background-color:#F3F8FE;border-radius: 20px 0px;padding: 5em 2.5em;box-sizing: border-box;} #sub_01_02>.programs_box>.in>.title_box{text-align: center;margin: 0 auto; position: relative;} #sub_01_02>.programs_box>.in>.title_box::after {content: "";position: absolute; top: 50%; right: 0; width: 6em; height: 6em; background-image: url(../../images/eng/main/cont_icon_01.svg); background-repeat: no-repeat;background-size: contain; opacity: 1;transition:all 0.2s ease; -webkit-transition:all 0.2s ease;} #sub_01_02>.programs_box>.in>.title_box>strong{display: block; font-family: 'Montserrat';font-size: 2.1em;color: #1074E4;text-transform: uppercase;} #sub_01_02>.programs_box>.in>.title_box>strong>p{display: inline-block; color: #333;} #sub_01_02>.programs_box>.in>.title_box>strong>.bottom_icon {position: relative;} #sub_01_02>.programs_box>.in>.title_box>strong>.bottom_icon::after {content: "";position: absolute;background-image: url(../../images/eng/main/gnb_th1_hover.svg); background-repeat: no-repeat; background-position: center;background-size: contain; top: calc(100% + 5px); left: 0; right: 0; margin: 0 auto; width: 3em; height: 8px;} #sub_01_02>.programs_box>.in>.title_box>span {display: block; font-size: 1.125em; color: #333; margin-top: 1.2em;} #sub_01_02>.programs_box>.in>.programs_list{display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;margin-top: 4.3em;} #sub_01_02>.programs_box>.in>.programs_list>li{ width: calc(100% / 4);padding: 0 0.5em; box-sizing: border-box; margin-bottom: 3.75em; border-radius: 8px;overflow: hidden;transition:all 0.2s ease; -webkit-transition:all 0.2s ease;} #sub_01_02>.programs_box>.in>.programs_list>li>a {display: block;transition:all 0.2s ease; -webkit-transition:all 0.2s ease;} #sub_01_02>.programs_box>.in>.programs_list>li>a>.img_box{position: relative; border-radius: 8px; background-position: top center;background-repeat: no-repeat;background-size: cover; height: 12.5em; overflow: hidden; transition:all 0.2s ease; -webkit-transition:all 0.2s ease;} #sub_01_02>.programs_box>.in>.programs_list>li>a>.img_box::before{content: "";position: absolute;background: inherit;transition: inherit;top: 0;left: 0;right: 0;bottom: 0;} #sub_01_02>.programs_box>.in>.programs_list>li>a:hover>.img_box::before{transform: scale(1.2);} #sub_01_02>.programs_box>.in>.programs_list>li>a>.img_box>span{position: absolute;top: 0;right: 0;width: 2.31em;height:2em;background-color:#1074E4;border-radius: 0 8px;display: flex;justify-content: center;align-items: center;} #sub_01_02>.programs_box>.in>.programs_list>li>a>.img_box>span>em{color: #fff;font-size: 1em;font-weight: bold;font-family: 'Montserrat';} #sub_01_02>.programs_box>.in>.programs_list>li[data-bg="1"]>a>.img_box{background-image: url(../../images/eng/content/Introduction_img_01.png);} #sub_01_02>.programs_box>.in>.programs_list>li[data-bg="2"]>a>.img_box{background-image: url(../../images/eng/content/Introduction_img_02.png);} #sub_01_02>.programs_box>.in>.programs_list>li[data-bg="3"]>a>.img_box{background-image: url(../../images/eng/content/Introduction_img_03.png);} #sub_01_02>.programs_box>.in>.programs_list>li[data-bg="4"]>a>.img_box{background-image: url(../../images/eng/content/Introduction_img_04.png);} #sub_01_02>.programs_box>.in>.programs_list>li[data-bg="5"]>a>.img_box{background-image: url(../../images/eng/content/Introduction_img_05.png);} #sub_01_02>.programs_box>.in>.programs_list>li[data-bg="6"]>a>.img_box{background-image: url(../../images/eng/content/Introduction_img_06.png);} #sub_01_02>.programs_box>.in>.programs_list>li[data-bg="7"]>a>.img_box{background-image: url(../../images/eng/content/Introduction_img_07.png);} #sub_01_02>.programs_box>.in>.programs_list>li[data-bg="8"]>a>.img_box{background-image: url(../../images/eng/content/Introduction_img_08.png);} #sub_01_02>.programs_box>.in>.programs_list>li[data-bg="9"]>a>.img_box{background-image: url(../../images/eng/content/Introduction_img_09.png);} #sub_01_02>.programs_box>.in>.programs_list>li[data-bg="10"]>a>.img_box{background-image: url(../../images/eng/content/Introduction_img_10.png);} #sub_01_02>.programs_box>.in>.programs_list>li>a>.txt{padding-top: 1em;} #sub_01_02>.programs_box>.in>.programs_list>li>a>.txt>span{position: relative; display: inline-block; font-size: 1.2em; font-weight: 500; color: #1A2542;z-index: 1;} #sub_01_02>.programs_box>.in>.programs_list>li>a>.txt>span::after{display: inline-block; content: "";position: absolute;width: 100%; height: 10px;background-color: #FEFFE4; bottom: 0;left: 0;z-index: -1;} #sub_01_02>.programs_box>.btn_center{margin-top: 3.1em;} #sub_01_02>.programs_box>.btn_center>a{margin: 0.25em;height: auto;} @media screen and (max-width:1024px){ #sub_01_02>.programs_box>.in>.title_box::after{opacity: 0;} #sub_01_02>.programs_box>.in>.programs_list>li{ width: calc(100% / 2);} #sub_01_02>.programs_box>.in>.programs_list>li>a>.img_box{height: 0;padding-top: 84.3%;} } @media screen and (max-width:640px){ #sub_01_02>.programs_box{padding: 2em 2em 4em;} #sub_01_02>.programs_box>.in>.programs_list{margin-top: 3em;} } @media screen and (max-width:450px){ #sub_01_02>.programs_box>.in>.programs_list>li{ width:100%;text-align: center;margin-bottom: 2em; padding: 0;} } @media screen and (max-width:420px){ #sub_01_02>.programs_box>.btn_center{font-size: 12px;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : About Boryeong > Mayor`s Message 연관단어 : #sub_02_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_02_01{} #sub_02_01 .img_box{position: relative; background-color: #24335E;height: 17.625em; width: calc(100% - 2em); box-shadow: 30px 30px 0 #E3EAF2;} #sub_02_01 .img_box::after{content: ""; position: absolute;width: 16.625em;height: 18.9em; background-image: url(../../images/eng/content/CEO.svg);background-repeat: no-repeat;background-size: 100%; top:-1.3em;left:5.18em;transition: .3s; } #sub_02_01 .img_box::before{content: "";position: absolute;width: 6.6875em;height:8.8125em;background-image: url(../../images/eng/content/shape_frame.svg);background-repeat: no-repeat; top: 2.625em;left:3.3125em;} #sub_02_01 .img_box .txtbox{padding-left: 44.3%;padding-right: 3.1em;padding-top: 4em;} #sub_02_01 .img_box .txtbox>strong{position: relative;color: #fff;font-size: 2.177em;} #sub_02_01 .img_box .txtbox>strong::after{content: ""; position: absolute;background-image: url(../../images/eng/content/quotes.svg);background-repeat: no-repeat; width: 2.429em;height:1.833em;right: calc(100% - 0.7em);} #sub_02_01 .img_box .txtbox>strong::before{content: ""; position: absolute;background-image: url(../../images/eng/content/quotes.svg);background-repeat: no-repeat; width: 2.429em;height:1.833em;left:92%;bottom: 0.5em;transform: rotate(180deg);} #sub_02_01 .img_box .txtbox>p{font-size: 1.375em;font-weight: 300; color: #fff;opacity: 0.8;margin-top: 1em;word-break: keep-all;} #sub_02_01 .textss{font-size: 1.125em;margin-top: 5.2em;} #sub_02_01 .textss>p+p{margin-top: 2.5em;} @media screen and (max-width:1024px){ #sub_02_01 .img_box{font-size: 14px;} } @media screen and (max-width:750px){ #sub_02_01 .img_box{margin-top: 13em;height: auto;word-break: keep-all;} #sub_02_01 .img_box::after{width: 12em; top: auto;bottom: calc(100% - 8em);left: 0%;right: 0;margin: 0 auto;} #sub_02_01 .img_box::before{display: none;} #sub_02_01 .img_box .txtbox{padding: 3em 2em 2em;text-align: center;} #sub_02_01 .img_box .txtbox>strong::after, #sub_02_01 .img_box .txtbox>strong::before{display: none;} } @media screen and (max-width:420px){ #sub_02_01 .img_box{font-size: 12px;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : About Boryeong > History 연관단어 : #sub_02_02 ////////////////////////////////////////////////////////////////////////////// */ #sub_02_02{} #sub_02_02 .list_box>ul>li>h5[data-icon="1"]{background-image: url(../../images/eng/content/simbol_01.svg);background-repeat: no-repeat;background-size: 1.1em;padding-left: 1.375em;background-position: left 9px;margin-bottom: 0;} #sub_02_02 .list_box>ul>li{padding: 1.5em 0; border-bottom:1px dashed #DCDCDC;word-break: keep-all;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : About Boryeong > Symbol of boryeong > Symbols 연관단어 : #sub_02_03_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_02_03_01{} #sub_02_03_01 .symbol_box .symbol_imgbox{ position: relative; height:17em; /* border: 1px solid #E5E5E5; */ background-color:#fff; background-image: linear-gradient(rgba(229,229,229,1), transparent 1px), linear-gradient(90deg, rgba(229,229,229,1), transparent 1px), linear-gradient(rgba(229,229,229,1) 1px, transparent 1px), linear-gradient(90deg, rgba(229,229,229,1) 1px, transparent 1px); background-size: 10px 9px, 10px 9px, 10px 9px, 10px 9px; margin-bottom: 1.875em; } #sub_02_03_01 .symbol_box .symbol_imgbox::after{content: ""; position: absolute;background-image: url(../../images/eng/content/symbol_mark_01.svg);background-repeat: no-repeat; width: 14.25em;height: 9.625em;top: 0;left: 0;top: 0;bottom: 0;left: 0;right: 0;margin: auto;} #sub_02_03_01 .symbol_box a[data-btn='1'][data-icon='1'] {left: 50%;transform: translateX(-50%);} #sub_02_03_01 .symbol_box>p{margin-top: 2.5em;} #sub_02_03_01 .symbol_box .symbol_lists {margin-top: 2.5em;} #sub_02_03_01 .symbol_box .symbol_lists>li~li{margin-top: 1.5em;} #sub_02_03_01 [data-box='3']>ul>li:nth-child(2)>.txt_box>strong{padding: 0 0 .5em;} #sub_02_03_01 .brand_img>.in>._left{background-image: url(../../images/eng/content/brand_img_01.png);background-repeat: no-repeat;background-size: contain;} #sub_02_03_01 .brand_img>.in>._right .txts span{display: block;} #sub_02_03_01 .mascot_img>.in>._left{background-image: url(../../images/eng/content/brand_img_02.png);background-repeat: no-repeat;background-size: contain;} #sub_02_03_01 .logo_img>.in>._left{background-image: url(../../images/eng/content/brand_img_03.png);background-repeat: no-repeat;background-size: 18.375em;background-position: center;height: 10em;} @media screen and (max-width:1024px){ #sub_02_03_01 [data-box='3']>ul>li:nth-child(2)>.txt_box>strong{padding:0 0.5em 0.5em 0.5em;} } @media screen and (max-width:640px){ #sub_02_03_01 .brand_img>.in>._right .txts span{display: initial;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : About Boryeong > Symbol of boryeong > Statue 연관단어 : #sub_02_03_02 ////////////////////////////////////////////////////////////////////////////// */ #sub_02_03_02{} #sub_02_03_02>.Statue_box>.Statue_lists [data-box='2']{border: 1px solid #ECECEC;border-radius: 20px 0 20px 0; box-shadow: 0 4px 8px rgba(24, 39, 75, 0.05);} #sub_02_03_02>.Statue_box>.Statue_lists [data-box='2']:not(:first-child){margin-top: 1.5em;} #sub_02_03_02>.Statue_box>.Statue_lists [data-box='2']>.in{align-items: flex-start;} #sub_02_03_02>.Statue_box>.Statue_lists [data-box='2']>.in>.icon_box {width: 11.5em;height: 11.5em;border-radius: 0;box-shadow: none;} #sub_02_03_02>.Statue_box>.Statue_lists [data-box='2']>.in>.icon_box::after{width: 100%;height: 100%; background-image: url(../../images/eng/content/Statue_img_01.png);} #sub_02_03_02>.Statue_box>.Statue_lists [data-box='2'][data-icon="2-2"]>.in>.icon_box::after{background-image: url(../../images/eng/content/Statue_img_02.png);} #sub_02_03_02>.Statue_box>.Statue_lists [data-box='2'][data-icon="2-3"]>.in>.icon_box::after{background-image: url(../../images/eng/content/Statue_img_03.png);} #sub_02_03_02>.Statue_box>.Statue_lists [data-box='2'][data-icon="2-4"]>.in>.icon_box::after{background-image: url(../../images/eng/content/Statue_img_04.png);} #sub_02_03_02>.Statue_box>.Statue_lists [data-box='2']>.in>.txt_box{padding-top: 2em;} #sub_02_03_02 .fish_img>.in>._left{background-image: url(../../images/eng/content/fish_img.png);background-repeat: no-repeat;background-size: contain;} #sub_02_03_02 .fish_img>.in>._right>.txts>p{margin: 0;} #sub_02_03_02 .fish_img>.in>._right>.txts>p.top_txt{margin-bottom: 2em;} @media screen and (max-width:420px){ #sub_02_03_02>.Statue_box>.Statue_lists [data-box='2']>.in>.txt_box{padding-top: 0;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : About Boryeong > Sister Cities > Domestic 연관단어 : #sub_02_04_01_01 ~ #sub_02_04_01_09 ////////////////////////////////////////////////////////////////////////////// */ #sub_02_04_01_01{} #sub_02_04_01_01 [data-box='1-1']>.in>.img_box li[data-img="1-1"]::after{background-image: url(../../images/eng/content/namdong_img_01.png)} #sub_02_04_01_01 [data-box='1-1']>.in>.img_box li[data-img="1-1-1"]::after{background-image: url(../../images/eng/content/namdong_img_02.png)} #sub_02_04_01_02 [data-box='1-1']>.in>.img_box li[data-img="1-2"]::after{background-image: url(../../images/eng/content/Danyang_img_01.png)} #sub_02_04_01_02 [data-box='1-1']>.in>.img_box li[data-img="1-2-1"]::after{background-image: url(../../images/eng/content/Danyang_img_02.png)} #sub_02_04_01_03 [data-box='1-1']>.in>.img_box li[data-img="1-3"]::after{background-image: url(../../images/eng/content/Gwangjin_img_01.png)} #sub_02_04_01_03 [data-box='1-1']>.in>.img_box li[data-img="1-3-1"]::after{background-image: url(../../images/eng/content/Gwangjin_img_02.png)} #sub_02_04_01_04 [data-box='1-1']>.in>.img_box li[data-img="1-4"]::after{background-image: url(../../images/eng/content/Daegu_img_01.png)} #sub_02_04_01_04 [data-box='1-1']>.in>.img_box li[data-img="1-4-1"]::after{background-image: url(../../images/eng/content/Daegu_img_02.png)} #sub_02_04_01_05 [data-box='1-1']>.in>.img_box li[data-img="1-5"]::after{background-image: url(../../images/eng/content/Jeongseon_img_01.png)} #sub_02_04_01_05 [data-box='1-1']>.in>.img_box li[data-img="1-5-1"]::after{background-image: url(../../images/eng/content/Jeongseon_img_02.png)} #sub_02_04_01_06 [data-box='1-1']>.in>.img_box li[data-img="1-6"]::after{background-image: url(../../images/eng/content/Jonglokwangjang_img_01.png)} #sub_02_04_01_07 [data-box='1-1']>.in>.img_box li[data-img="1-7"]::after{background-image: url(../../images/eng/content/Sangju_img_01.png)} #sub_02_04_01_07 [data-box='1-1']>.in>.img_box li[data-img="1-7-1"]::after{background-image: url(../../images/eng/content/Sangju_img_02.png)} #sub_02_04_01_08 [data-box='1-1']>.in>.img_box li[data-img="1-8"]::after{background-image: url(../../images/eng/content/Daecheun_img_01.png)} #sub_02_04_01_09 [data-box='1-1']>.in>.img_box li[data-img="1-9"]::after{background-image: url(../../images/eng/content/Ulleung_img_01.png)} #sub_02_04_01_09 [data-box='1-1']>.in>.img_box li[data-img="1-9-1"]::after{background-image: url(../../images/eng/content/Ulleung_img_02.png)} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : About Boryeong > Sister Cities > Overseas 연관단어 : #sub_02_04_02_01 ~ #sub_02_04_02_05 ////////////////////////////////////////////////////////////////////////////// */ #sub_02_04_02_01{} #sub_02_04_02_01 [data-box='1-1']>.in>.img_box li[data-img="2-1"]::after{background-image: url(../../images/eng/content/China_img_01.png)} #sub_02_04_02_01 [data-box='1-1']>.in>.img_box li[data-img="2-1-1"]::after{background-image: url(../../images/eng/content/China_img_02.png)} #sub_02_04_02_02 [data-box='1-1']>.in>.img_box li[data-img="2-2"]::after{background-image: url(../../images/eng/content/Japan_img_01.png)} #sub_02_04_02_02 [data-box='1-1']>.in>.img_box li[data-img="2-2-1"]::after{background-image: url(../../images/eng/content/Japan_img_02.png)} #sub_02_04_02_03 [data-box='1-1']>.in>.img_box li[data-img="2-3"]::after{background-image: url(../../images/eng/content/USA_img_01.png)} #sub_02_04_02_03 [data-box='1-1']>.in>.img_box li[data-img="2-3-1"]::after{background-image: url(../../images/eng/content/USA_img_02.png)} #sub_02_04_02_04 [data-box='1-1']>.in>.img_box li[data-img="2-4"]::after{background-image: url(../../images/eng/content/Japan_img_01.png)} #sub_02_04_02_04 [data-box='1-1']>.in>.img_box li[data-img="2-4-1"]::after{background-image: url(../../images/eng/content/Japan_img_03.png)} #sub_02_04_02_05 [data-box='1-1']>.in>.img_box li[data-img="2-5"]::after{background-image: url(../../images/eng/content/China_img_01.png)} #sub_02_04_02_05 [data-box='1-1']>.in>.img_box li[data-img="2-5-1"]::after{background-image: url(../../images/eng/content/China_img_03.png)} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : About Boryeong > Administrative District 연관단어 : #sub_02_05 ////////////////////////////////////////////////////////////////////////////// */ #sub_02_05{} #sub_02_05>.map_box{display: flex;justify-content: space-around; align-items: center; padding: 3.12em 3.75em; background-color: #fff;border: 1px solid #ececec;box-shadow: 0px 4px 8px rgba(24, 39, 75, 0.05);border-radius: 8px;} #sub_02_05>.map_box>.map_imgs>li{padding: 1.25em;} #sub_02_05>.btns{margin-top: 1.875em; display: flex;justify-content: flex-end; flex-wrap: wrap;} #sub_02_05>.texts{margin-top:3.75em;} @media screen and (max-width:1024px){ #sub_02_05>.map_box{padding: 2em;justify-content: space-between;} } @media screen and (max-width:750px){ #sub_02_05>.map_box{flex-wrap: wrap;padding: 1.5em;} #sub_02_05>.map_box>.map_bg{order: 2;} #sub_02_05>.map_box>.map_imgs{order: 1;display: flex;justify-content: center;width: 100%;} #sub_02_05>.map_box>.map_imgs>li{padding: 0 1em;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : About Boryeong > Statistics 연관단어 : #sub_02_06 ////////////////////////////////////////////////////////////////////////////// */ #sub_02_06{} #sub_02_06>.Statis_box>.Statis_lists{display: flex;flex-wrap: wrap;justify-content: space-between;} #sub_02_06>.Statis_box>.Statis_lists [data-box='2']{width: calc((100% - 1.468em) / 2); box-sizing: border-box; border: 1px solid #ECECEC;border-radius: 20px 0 20px 0; box-shadow: 0 4px 8px rgba(24, 39, 75, 0.05);margin-bottom: 1.5em;} #sub_02_06>.Statis_box>.Statis_lists [data-box='2']>.in{align-items: center;} #sub_02_06>.Statis_box>.Statis_lists [data-box='2']>.in>.icon_box {width: 5em;height: 5em;border-radius: 100%;box-shadow: none;border: 1px solid #ececec;} #sub_02_06>.Statis_box>.Statis_lists [data-box='2']>.in>.icon_box::after{background-position: center;background-repeat: no-repeat;} #sub_02_06 .icon_box[data-icon="1"]::after{background-image: url(../../images/eng/content/Statis_01.svg);} #sub_02_06 .icon_box[data-icon="2"]::after{background-image: url(../../images/eng/content/Statis_02.svg);} #sub_02_06 .icon_box[data-icon="3"]::after{background-image: url(../../images/eng/content/Statis_03.svg);} #sub_02_06 .icon_box[data-icon="4"]::after{background-image: url(../../images/eng/content/Statis_04.svg);} #sub_02_06 .icon_box[data-icon="5"]::after{background-image: url(../../images/eng/content/Statis_05.svg);} #sub_02_06 .icon_box[data-icon="6"]::after{background-image: url(../../images/eng/content/Statis_06.svg);} #sub_02_06 .icon_box[data-icon="7"]::after{background-image: url(../../images/eng/content/Statis_07.svg);} #sub_02_06 .icon_box[data-icon="8"]::after{background-image: url(../../images/eng/content/Statis_08.svg);} #sub_02_06 .icon_box[data-icon="9"]::after{background-image: url(../../images/eng/content/Statis_09.svg);} #sub_02_06 .icon_box[data-icon="10"]::after{background-image: url(../../images/eng/content/Statis_10.svg);} #sub_02_06 .icon_box[data-icon="11"]::after{background-image: url(../../images/eng/content/Statis_11.svg);} #sub_02_06 .icon_box[data-icon="12"]::after{background-image: url(../../images/eng/content/Statis_12.svg);} #sub_02_06 .icon_box[data-icon="13"]::after{background-image: url(../../images/eng/content/Statis_13.svg);} #sub_02_06 .icon_box[data-icon="14"]::after{background-image: url(../../images/eng/content/Statis_14.svg);} #sub_02_06 .icon_box[data-icon="15"]::after{background-image: url(../../images/eng/content/Statis_15.svg);} #sub_02_06 .icon_box[data-icon="16"]::after{background-image: url(../../images/eng/content/Statis_16.svg);} #sub_02_06 .icon_box[data-icon="17"]::after{background-image: url(../../images/eng/content/Statis_17.svg);} #sub_02_06 .icon_box[data-icon="18"]::after{background-image: url(../../images/eng/content/Statis_18.svg);} #sub_02_06 .icon_box[data-icon="19"]::after{background-image: url(../../images/eng/content/Statis_19.svg);} #sub_02_06 .icon_box[data-icon="20"]::after{background-image: url(../../images/eng/content/Statis_20.svg);} #sub_02_06 .icon_box[data-icon="21"]::after{background-image: url(../../images/eng/content/Statis_21.svg);} #sub_02_06 .icon_box[data-icon="22"]::after{background-image: url(../../images/eng/content/Statis_22.svg);} #sub_02_06 .icon_box[data-icon="23"]::after{background-image: url(../../images/eng/content/Statis_23.svg);} #sub_02_06 .icon_box[data-icon="24"]::after{background-image: url(../../images/eng/content/Statis_24.svg);} #sub_02_06>.Statis_box>.Statis_lists [data-box='2']>.in>.txt_box>p{color: #24335E;margin: 0;} #sub_02_06>.Statis_box>.Statis_lists [data-box='2']>.in>.txt_box>strong{color: #333;font-size:1.25em;display: inline-block;padding-right: 0.5em;margin-bottom: 0;} #sub_02_06>.Statis_box>.Statis_lists [data-box='2']>.in>.txt_box>span{color: #888;font-size:1.125em;display: inline-block;font-weight: 300;} @media screen and (max-width:800px){ #sub_02_06>.Statis_box>.Statis_lists [data-box='2']{width: 100%;flex-basis:100%} } @media screen and (max-width:640px){ #sub_02_06>.Statis_box>.Statis_lists [data-box='2']{padding: 1.25em;} } @media screen and (max-width:420px){ [data-box='2']>.in>.txt_box{text-align: center;margin-top: 1em;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : About Boryeong > Location Map 연관단어 : #sub_02_07 ////////////////////////////////////////////////////////////////////////////// */ #sub_02_07{} #sub_02_07>.location_map{display: flex;justify-content: space-between;margin-top: 3.75em;} #sub_02_07>.location_map>li{width: calc((100% - 1.875em) / 2);} #sub_02_07>.location_map>li>.shadow_box{text-align: center;} @media screen and (max-width:640px){ #sub_02_07>.location_map{flex-wrap: wrap;} #sub_02_07>.location_map>li{width: 100%;margin-bottom: 1.5em;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Nine+ scenic spots of Boryeong 연관단어 : #sub_03_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_01{} #sub_03_01>.spots_box>ul>li{position: relative;} #sub_03_01>.spots_box>ul>li~li{margin-top: 2.5em;} #sub_03_01>.spots_box>ul>li>.img_box{background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%;height: 18.625em;transition:all 0.2s ease; -webkit-transition:all 0.2s ease;} #sub_03_01>.spots_box>ul>li>.img_box[data-img="1"]{background-image: url(../../images/eng/content/spots_img_01.jpg);} #sub_03_01>.spots_box>ul>li>.img_box[data-img="2"]{background-image: url(../../images/eng/content/spots_img_02.jpg);} #sub_03_01>.spots_box>ul>li>.img_box[data-img="3"]{background-image: url(../../images/eng/content/spots_img_03.jpg);} #sub_03_01>.spots_box>ul>li>.img_box[data-img="4"]{background-image: url(../../images/eng/content/spots_img_04.jpg);} #sub_03_01>.spots_box>ul>li>.img_box[data-img="5"]{background-image: url(../../images/eng/content/spots_img_05.jpg);} #sub_03_01>.spots_box>ul>li>.img_box[data-img="6"]{background-image: url(../../images/eng/content/spots_img_06.jpg);} #sub_03_01>.spots_box>ul>li>.img_box[data-img="7"]{background-image: url(../../images/eng/content/spots_img_07.jpg);} #sub_03_01>.spots_box>ul>li>.img_box[data-img="8"]{background-image: url(../../images/eng/content/spots_img_08.jpg);} #sub_03_01>.spots_box>ul>li>.img_box[data-img="9"]{background-image: url(../../images/eng/content/spots_img_09.jpg);} #sub_03_01>.spots_box>ul>li>.img_box[data-img="10"]{background-image: url(../../images/eng/content/spots_img_10.jpg);} #sub_03_01>.spots_box>ul>li>.txt_box{display: block; position: absolute;width: 27em;height: 14.875em; top: 2em; left: 2em;background-color: rgba(255, 255, 255, 0.95);border-radius: 20px 0px;padding: 1.8em 2em; box-sizing: border-box;transition:all 0.2s ease; -webkit-transition:all 0.2s ease;} #sub_03_01>.spots_box>ul>li>.txt_box::after{content: "";position: absolute;background-image: url(../../images/eng/content/btn_arrow_right.svg);background-repeat: no-repeat;width: 5em;height: 1em;bottom: 1.2em;right: 2em; } #sub_03_01>.spots_box>ul>li>.txt_box:hover::after{ animation-name:go-back; animation-duration:1s; animation-timing-function:linear; animation-iteration-count:infinite; } @keyframes go-back{ 0%{right:2em;} 50%{right:1em;} 100%{right:2em;} } #sub_03_01>.spots_box>ul>li:nth-child(even)>.txt_box{left: auto;right: 2em;} #sub_03_01>.spots_box>ul>li>.txt_box>span{display: block; color: #888;font-family: 'Montserrat';} #sub_03_01>.spots_box>ul>li>.txt_box>strong{color: #121212;font-family: 'Montserrat';font-size: 1.5em;line-height: 1.3;} #sub_03_01>.spots_box>ul>li>.txt_box>p{color: #333;padding-bottom: 1.5em;padding-top: 1em;} @media screen and (max-width:640px){ #sub_03_01>.spots_box>ul>li:nth-child(even)>.txt_box{left: 0;right: auto;} #sub_03_01>.spots_box>ul>li>.img_box{height: 15em;} #sub_03_01>.spots_box>ul>li>.txt_box{position: relative;width: 100%;top: 0;left: 0;height: auto; min-height: 13em;border: 1px solid #e3e3e3;border-radius: 0 0 20px 0;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Beach > Daecheon Beach 연관단어 : #sub_03_02_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_02_01{} #sub_03_02_01 strong{font-weight: 500;} #sub_03_02_01>[data-box='5'][data-icon="1"]>._right>.js_slide.type_02 .move::after{background: #1074E4 url(../../images/eng/content/Beach_icon.svg);} #sub_03_02_01>.tour_list>li~li{margin-top: 1em;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Beach > Daecheon Beach 연관단어 : #sub_03_02_02 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_02_02{} #sub_03_02_02>.movie_box{position: relative;height: 0;padding-top: 56.5%;margin-top: 2.5em;} #sub_03_02_02>.movie_box>iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #sub_03_02_02>.tour_list>li~li{margin-top: 1em;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Island > Janggodo Island 연관단어 : #sub_03_03_02 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_03_02{} #sub_03_03_02 .img_box{margin-top: 2em; position: relative; background-image: url(../../images/eng/content/sub_vi_type04_bg.gif);background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%;height: 20em; } #sub_03_03_02 .img_box::after{content: "";position: absolute;background-image: url(../../images/eng/content/sub_vi_type04.png); background-repeat: no-repeat;background-position: center; background-size: contain; width: 100%; height: 20em; top: 0;left: 0;bottom: 0;right: 0;margin: auto;} @media screen and (max-width:420px){ #sub_03_03_02 .img_box{height: 18em;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Island > Godaedo Island 연관단어 : #sub_03_03_03 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_03_03{} #sub_03_03_03 .img_box{margin-top: 2em; margin-bottom: 2em; position: relative; background-image: url(../../images/eng/content/sub_vi_type04_bg.gif);background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%;height: 20em; } #sub_03_03_03 .img_box::after{content: "";position: absolute;background-image: url(../../images/eng/content/sub_vi_type03.png); background-repeat: no-repeat;background-position: center; background-size: contain; width: 100%; height: 20em; top: 0;left: 0;bottom: 0;right: 0;margin: auto;} #sub_03_03_03>.mt_20{display: block;} @media screen and (max-width:420px){ #sub_03_03_03 .img_box{height: 18em;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Island > Sapsido Island 연관단어 : #sub_03_03_04 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_03_04{} #sub_03_03_04>.movie_box{position: relative;height: 0;padding-top: 56.5%;margin-top: 2.5em;} #sub_03_03_04>.movie_box>iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #sub_03_03_04 .img_box{margin-top: 2em; margin-bottom: 2em; position: relative; background-image: url(../../images/eng/content/sub_vi_type04_bg.gif);background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%;height: 20em; } #sub_03_03_04 .img_box::after{content: "";position: absolute;background-image: url(../../images/eng/content/sub_vi_type01.png); background-repeat: no-repeat;background-position: center; background-size: contain; width: 100%; height: 20em; top: 0;left: 0;bottom: 0;right: 0;margin: auto;} #sub_03_03_04>.mt_20{display: block;} @media screen and (max-width:420px){ #sub_03_03_04 .img_box{height: 18em;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Island > Oeyeondo Island 연관단어 : #sub_03_03_07 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_03_07{} #sub_03_03_07 a[target="_blank"] {background: url(../../images/eng/skin/lnb_blank.svg) no-repeat 100% 50%;width: 1.2em;height: 1.2em;background-position: center right;padding-right: 30px;color: #1074E4 !important;} #sub_03_03_07>.shadow_box>.tetxs strong{display: block; margin-top: 1.8em;margin-bottom: 0.5em;} #sub_03_03_07>.shadow_box>.tetxs>[data-list='8']>li{padding-left: 1em;} #sub_03_03_07>.shadow_box>.tetxs>[data-list='8']>li::before{left: 0;} #sub_03_03_07 .img_box{margin-top: 2em; margin-bottom: 2em; position: relative; background-image: url(../../images/eng/content/sub_vi_type04_bg.gif);background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%;height: 20em; } #sub_03_03_07 .img_box::after{content: "";position: absolute;background-image: url(../../images/eng/content/sub_vi_type02.png); background-repeat: no-repeat;background-position: center; background-size: contain; width: 100%; height: 20em; top: 0;left: 0;bottom: 0;right: 0;margin: auto;} #sub_03_03_07>.mt_20{display: block;} @media screen and (max-width:420px){ #sub_03_03_07 .img_box{height: 18em;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Mountain & Valley > Seongjusan Mountain 연관단어 : #sub_03_04_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_04_01{} #sub_03_04_01>.movie_box{position: relative;height: 0;padding-top: 56.5%;margin-top: 2.5em;} #sub_03_04_01>.movie_box>iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Mountain & Valley > Oseosan Mountain 연관단어 : #sub_03_04_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_04_02{} #sub_03_04_02>.movie_box{position: relative;height: 0;padding-top: 56.5%;margin-top: 2.5em;} #sub_03_04_02>.movie_box>iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Seaport / Dam > Boryeong Dam 연관단어 : #sub_03_05_03 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_05_03{} #sub_03_05_03>.movie_box{position: relative;height: 0;padding-top: 56.5%;margin-top: 2.5em;} #sub_03_05_03>.movie_box>iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Recreation / park > Seongjusan Mountain Natural Forest 연관단어 : #sub_03_06_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_06_01{} #sub_03_06_01>.movie_box{position: relative;height: 0;padding-top: 56.5%;margin-top: 2.5em;} #sub_03_06_01>.movie_box>iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Tourist Attractions > Recreation / park > Mud Skin Care Center 연관단어 : #sub_03_06_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_03_06_02{} #sub_03_06_02>.Facilities_lists>li~li{margin-top: 1em;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Festival > Boryeong Mud Festival 연관단어 : #sub_04_01_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_04_01_01{} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Drive course > Along with Coastline 연관단어 : #sub_04_02_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_04_02_01{} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Leisure> Exciting Boryeong 연관단어 : #sub_04_03_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_04_03_01{} #sub_04_03_01>[data-visual-box="1"][data-bg="1"]{background-image: url(../../images/eng/content/Leisure_img_01.png);} #sub_04_03_01>[data-visual-box="1"][data-bg="1"]{background-position-x: 80%;} #sub_04_03_01>.movie_wrap {margin-top: 3em;} #sub_04_03_01>.movie_wrap .in>.movie_box {position: relative;padding-top: 52.81%;} #sub_04_03_01>.movie_wrap .in>.movie_box>iframe{position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 0;} #sub_04_03_01>.movie_wrap>ul>li>.txt_box>p{padding: 0;} #sub_04_03_01>.movie_wrap>ul>li>.txt_box>p>.blue{text-decoration: underline;} @media screen and (max-width:640px){ #sub_04_03_01>.movie_wrap>ul>li~li{margin-top:2.2em ;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Leisure> Sea Fishing 연관단어 : #sub_04_03_02 ////////////////////////////////////////////////////////////////////////////// */ #sub_04_03_02{} #sub_04_03_02>[data-visual-box="1"][data-bg="2"]{background-image: url(../../images/eng/content/Leisure_img_02.png);} #sub_04_03_02>P{margin-bottom: 2.2em;} #sub_04_03_02>P:nth-of-type(1){margin-top: 2.2em;} #sub_04_03_02 [data-list="8"]>li{padding-left: 1em;} #sub_04_03_02 [data-list="8"]>li:before{left: 0;} #sub_04_03_02>[data-list="8"]>li>strong{font-weight: 500;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Leisure> Fresh water fishing 연관단어 : #sub_04_03_03 ////////////////////////////////////////////////////////////////////////////// */ #sub_04_03_03{} #sub_04_03_03>[data-visual-box="1"][data-bg="3"]{background-image: url(../../images/eng/content/Leisure_img_03.png);} #sub_04_03_03>P{margin-bottom: 2.2em;} #sub_04_03_03>P:nth-of-type(1){margin-top: 2.2em;} #sub_04_03_03 [data-list="8"]>li{padding-left: 1em;} #sub_04_03_03 [data-list="8"]>li:before{left: 0;} #sub_04_03_03>[data-list="8"]>li>strong{font-weight: 500;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Nine Delicious Dishes of Boryeong 연관단어 : #sub_04_04 ////////////////////////////////////////////////////////////////////////////// */ #sub_04_04{} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Specialties > Mud from Boryeong 연관단어 : #sub_04_05 ////////////////////////////////////////////////////////////////////////////// */ #sub_04_05{} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Travel Guide > Transportation 연관단어 : #sub_05_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_05_01{} #sub_05_01>.Trans_box>.Trans_lists{margin-bottom:4.5em;} #sub_05_01>.Trans_box>.Trans_lists>h4{ display: flex; align-items: center;} #sub_05_01>.Trans_box>.Trans_lists>h4::before{content: ""; display: inline-block; background-color:#F3F8FE; background-repeat: no-repeat; width:2.6em;height: 2.6em;border-radius: 10px; background-size: 2.5em;background-position:center;margin-right: 0.66em;} #sub_05_01>.Trans_box>.Trans_lists>h4[data-icon="1"]::before{background-image: url(../../images/eng/content/train_icon.svg);} #sub_05_01>.Trans_box>.Trans_lists>h4[data-icon="2"]::before{background-image: url(../../images/eng/content/bus_icon.svg);} #sub_05_01>.Trans_box>.Trans_lists>h4[data-icon="3"]::before{background-image: url(../../images/eng/content/car_icon.svg);} #sub_05_01>.Trans_box>.Trans_lists>ul>li:not(:first-child){margin-top: 1.5em;} #sub_05_01>.Trans_box>.Trans_lists>ul>li>strong{font-size: 1.25em;color:#1074E4;} #sub_05_01>.Trans_box>.Trans_lists>ul>li>p{color: #333;margin-top: 0.5em;} #sub_05_01>.Trans_box>.Trans_lists>ul>li>[data-list="1"]{margin-top: 0.5em;} #sub_05_01>.Trans_box>.Trans_lists>ul>li>[data-list="1"]>li>strong{font-weight: 500;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Travel Guide > Korea Travel Phone 1330 연관단어 : #sub_05_02 ////////////////////////////////////////////////////////////////////////////// */ #sub_05_02{} #sub_05_02>.Travel_Phone>h4>.point{color: #1074E4;text-decoration: underline;} #sub_05_02>.Travel_Phone [data-box="1"][data-icon="3"]>.in>.icon_box::after{background: url(../../images/eng/content/phone_icon.svg) no-repeat; background-size: contain;height: 3.5em;} #sub_05_02>.Travel_Phone>.list_box{margin-top:3.75em; background-image: url( ../../images/eng/content/call_bg.png); background-repeat: no-repeat;background-position: top right;background-size: contain;background-size: 23.75em;transition:all 0.2s ease; -webkit-transition:all 0.2s ease;} #sub_05_02>.Travel_Phone>.list_box>li{margin-top:3.75em;} #sub_05_02>.Travel_Phone>.list_box [data-list="1"]>li>strong{font-weight: 500;} @media screen and (max-width:1024px){ #sub_05_02>.Travel_Phone>.list_box{background-position: bottom right;} } @media screen and (max-width:450px){ #sub_05_02>.Travel_Phone>.list_box{background: none;} } /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Travel Guide > Tourist Information Center 연관단어 : #sub_05_03 ////////////////////////////////////////////////////////////////////////////// */ #sub_05_03 .list_box>li{margin-bottom: 1em;} #sub_05_03 .list_box>li>h5{display: inline-block;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > Travel Guide > Foreign Currency 연관단어 : #sub_05_04 ////////////////////////////////////////////////////////////////////////////// */ #sub_05_04{} #sub_05_04 .lists_box>li~li{margin-top: 2em;} #sub_05_04 .lists_box>li>ul>li~li{margin-top: 1.2em;} #sub_05_04 .lists_box>li>ul>li>ul{margin-bottom: 1em;} #sub_05_04 .lists_box>li>ul>li>ul>li strong {font-weight: 500;} /* ////////////////////////////////////////////////////////////////////////////// 메뉴구조 : Special Boryeong > sitemap 연관단어 : #sub_07_01 ////////////////////////////////////////////////////////////////////////////// */ #sub_07_01{} #sub_07_01>.site_map>.first_dep>h5{color: #1A2542;background-color: #F3F4F5;padding:0.8em 2em;} #sub_07_01>.site_map>.first_dep>.second_dep{display: flex; flex-wrap: wrap; padding: 0 2.5em;} #sub_07_01>.site_map>.first_dep>.second_dep>li{width:calc((100% - 6em) / 4);padding: 1em 2em 2em 0;box-sizing: border-box;} #sub_07_01>.site_map>.first_dep>.second_dep>li>a{display: block; font-size: 1.125em;color: #1074E4; padding-bottom: 0.5em;} #sub_07_01>.site_map>.first_dep>.second_dep>li>.third_dep>li{padding-left: 1em;} #sub_07_01>.site_map>.first_dep>.second_dep>li>.third_dep>li::before{left: 0.2em;width: 0.2em;height: 0.2em;} #sub_07_01>.site_map>.first_dep>.second_dep>li>.third_dep>li>a{transition:all 0.3s; -webkit-transition:all 0.3s;} #sub_07_01>.site_map>.first_dep>.second_dep>li>.third_dep>li>a:hover{font-weight: 500;text-decoration: underline;} @media screen and (max-width:1024px){ #sub_07_01>.site_map>.first_dep>.second_dep{justify-content: space-between;} #sub_07_01>.site_map>.first_dep>.second_dep>li{width:calc((100% - 6em) / 2);} } @media screen and (max-width:450px){ #sub_07_01>.site_map>.first_dep>.second_dep>li{width:100%;} } .youtube{ width: 100%; height: 500px; display: block; margin-bottom: 20px;} @media screen and (max-width:540px){ .youtube{ width: 100%; height:400px;} }