@charset 'euc-kr';
@import url('./common.css');

.W_in{ position: relative; width:95%; max-width:1280px; margin: 0 auto; }
em { position: absolute; width: 100%; bottom: 0; background: rgba(25,25,25,0.6); padding: 40px 10%; color: #fff; text-align: center; font-style: normal;}
article { display: table; position: relative; width: 100%; padding: 6vh 0; min-height:700px; transition:.6s;}
.scroll { overflow-x:auto; }
.Text_Balloon { position: relative; display: inline-block; padding:2% 5%; background: #fff;}
.Text_Balloon:after { content:''; position: absolute; bottom: -30px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 30px solid #fff;}

blockquote.dash{ position: relative; border: 3px dashed #697e87; padding:20px 35px; background: #fff;}
blockquote.dash h4 { color:#000; margin-bottom: 10px}
blockquote.dash h4 span { display: inline-block; font-size: 16px; font-weight: 900; vertical-align: top; margin-right: 5px; margin-top: 5px; }
blockquote.dash h5 { position: absolute; top: -20px; background:#0f92c8; color:#fff; padding: 3px 35px; }
blockquote.dash figure { display: inline-block; vertical-align: middle; padding: 15px 35px 15px 15px; }
blockquote.dash dl { width: 88%; display: inline-block; vertical-align: middle; font-size: clamp(0.9rem, 5.5vw, 1.186rem); line-height: 1.4; color: #000; font-weight: 100;}
blockquote.dash p { list-style: auto; font-size: clamp(0.9rem, 5.5vw, 1.186rem); line-height: 1.4; color: #000; }
blockquote.dash li { list-style: auto; font-size: clamp(0.9rem, 5.5vw, 1.186rem); line-height: 1.4; color: #000; }
blockquote.dash li span { display: inline-block; margin-left: 1em; font-weight: 100;}
blockquote.dash .disc { position: relative; text-indent: -5.1em; margin-left: 5.1em; color:#000; margin-bottom:0; }
blockquote.dash .disc:first-child { text-indent: -6.3em; margin-left: 6.3em; }
blockquote.dash .disc strong { margin-left: 15px; }
blockquote.dash .disc strong:before { content:''; position: absolute; top: 10px; margin-left: -20px; width:7px; height:7px; border-radius:50%; background:#9bc8e7; }
blockquote.dash ol li { list-style: disc; margin-left: 25px;}
blockquote.dash ol li::marker { color:#6a8eca; }


fieldset h4 { color:#000; margin-bottom: 10px}
fieldset h4 span { display: inline-block; font-size: 16px; font-weight: 900; vertical-align: top; margin-right: 5px; margin-top: 5px; }
fieldset h5.Title_board { position: absolute; top: -20px; background:#0f92c8; color:#fff; padding: 3px 35px; }
fieldset h6 {color:#0f91c5;display:block; margin:20px 0 5px; font-weight:bold;}
fieldset h6:first-child { margin:0; }
fieldset figure { display: inline-block; vertical-align: top; padding: 5px 35px 15px 15px; }
fieldset dl { width: 88%; display: inline-block; vertical-align: top; }
fieldset dl dd { font-size:0.9em; line-height: 1.4; text-indent: 0.2em;}
fieldset li { list-style: auto; font-size:1.1rem; font-size: clamp(0.8rem, 4.2vw, 1.1rem); line-height: 1.4; color: #000; text-indent: -1.2rem; margin-bottom: 10px;}
fieldset li span { font-weight: 100;}
fieldset ol li { list-style: disc; margin-left: 25px; text-indent: 0;}
fieldset ol li::marker { color:#6a8eca; }
fieldset.solid {background: #f0f4f8; padding: 10px 16px; border: 1px solid #b6cddd; margin-bottom: 10px; }
fieldset.dash{ border: 3px dashed #0f92c8; padding:20px 35px; }
fieldset i { position: absolute; top: -20px; background:#0f92c8; color:#fff; padding: 3px 35px; }
fieldset i h4,fieldset i h5,fieldset i h6 { color:#fff; }
fieldset.Bnone { border:0; padding:0; background:none; }


/*** Header ***/
.fp-viewing-0 header nav .Main { color:#fff; }
header {position: fixed; display: flex; justify-content: center; align-items: center; height: 80px; top: 0px; left: 0; width: 100%; z-index: 10; transition:.5s; background:rgba(255,255,255,.8); box-shadow: 0px 5px 10px 0px rgb(23 58 90 / 7%); text-align: center;}
header nav { display: flex; align-items: center; width: 67%; }
header nav .Main {position: relative; float: left; width: 20%; font-size: 1.1rem; font-size: clamp(1.05rem, 1.05vw, 1.15rem); color: #333; font-weight: 500; text-align: center; }
header nav .Main > span { position: relative; display: block; width:100%; line-height: 80px; cursor: pointer; transition: background 0.2s ease; }
header:hover,.fp-viewing-0 header:hover { background:rgba(255,255,255,.8); }
header:hover nav .Main {color: #333 !important; /*border-right: 1px solid #ddd;*/ }
header nav:hover .Main:first-child ul{ border-left:1px solid #ddd; }
header nav .Main:hover {color: #005aa9 !important; background: rgba(255,255,255,.3); }
header nav .Main:hover .Sub {background: rgba(255,255,255,.2); }
header nav .Main:hover > span:after { width:calc(100% - 2px); }/*Sub menu°¡ ¾øÀ»¶§¸¦ °í·ÁÇÏ¿© Main menu¿¡ ¹Ù »ý¼º*/
/*header nav .Main > span:after { content: ''; display: block; position: absolute; left: 50%; bottom:0; width: 0%; height: 3px; background:#002f5b; transition:.3s; transform:translate(-50%,0);}*/
header nav .Sub { display:none; width: 100%; padding: 10px 0 30px; color:#fff; border-right: 1px solid #ddd;} 
header:hover nav .Sub { color: #666; opacity:1; }
header nav .Sub > li {text-align: center; font-size: 0.86em;  font-weight: 400; padding:11px 0; line-height: 1; cursor: pointer;}
header nav .Sub > li:hover {color: #005aa9; font-weight: 500; }

header a.btn_join {background: url('/images/icon/mypage_ov.png') no-repeat center / contain; }
header a.btn_login { background: url('/images/icon/login_400_ov.svg') no-repeat center / contain; } 
header a.btn_logout { background: url('/images/icon/logout_400_ov.svg') no-repeat center / contain; }

header .hd_logo { display: flex; align-items: center; width: 18%; height: 60px; padding-left: 1%; min-width: 210px; transform-style: preserve-3d; transition: transform 0.6s; }
header .hd_logo img { max-width:180px; }
.fp-viewing-0 header .hd_logo {transform: rotateX(90deg); }
header .logo,header .logo_ov { position: absolute; line-height:1; top:0; left: 0;}
header .logo {transform: rotateX(-90deg); bottom:0px; }
.fp-viewing-0 header:hover .logo_ov {transform: rotateX(-90deg); bottom: 0px;}

#TopBtn {display:block; position: fixed; width: 60px; height:60px; line-height:60px; padding:0; right: 2%; bottom: 67px; text-align: center; z-index: 30; transition:.3s; font-size: 15px; font-weight: 700; background:rgba(0,0,0,.5); color:#fff; border:0; }
#QuickMenu #TopBtn { position:relative; right:auto; bottom:auto; }

.hd_sitemap { position: absolute; top: 42px; right: 5%; padding-left: 3%; float: right;}
.hd_sitemap > a { position: relative; display: block; float: left; }
.hd_sitemap span{ display:block; width:100%; min-width: 22px; height:3px; background:#666; position:relative; transition:all 0.1s; margin: 20% auto;}
.hd_sitemap span:nth-child(1){ margin-top: 0; }
.hd_sitemap span:nth-child(3){ margin-bottom: 0; }
.hd_sitemap p { line-height:1; padding-bottom:0; }
.hd_sitemap p:before { content:'MENU'; position: relative; font-size: 10px; top: 3px; font-weight: bold; color:#666;  }
header:hover .hd_sitemap span { background:#666;}
header:hover .hd_sitemap p:before {color:#666;}
.fp-viewing-0 .hd_sitemap p:before { color:#fff; }
.fp-viewing-0 #TopBtn {display:none;}
.fp-viewing-0 header { background: transparent;}
.fp-viewing-0 header:hover nav .Main {color: #333;}
.fp-viewing-0 header .hd_logo > a { background: url('/images/logo.svg') no-repeat left center / contain;}
.fp-viewing-0 header:hover .hd_logo > a {background-image: url('/images/logo_ov.svg');}
.fp-viewing-0 header a.btn_join {background: url('/images/icon/mypage.png') no-repeat center / contain; }
.fp-viewing-0 header:hover a.btn_join {background-image: url('/images/icon/mypage_ov.png'); }
.fp-viewing-0 header a.btn_login {background: url('/images/icon/login_400.svg') no-repeat center / contain; }
.fp-viewing-0 header:hover a.btn_login {background-image: url('/images/icon/login_400_ov.svg'); }
.fp-viewing-0 header a.btn_logout {background: url('/images/icon/logout_400.svg') no-repeat center / contain; }
.fp-viewing-0 header:hover a.btn_logout {background-image: url('/images/icon/logout_400_ov.svg'); }
.fp-viewing-0 .hd_sitemap span { background:#fff; }


/* QuickMenu START */
#QuickMenu { position:fixed; right:2%; top:160px; z-index:10; }
#QuickMenu > h6 { line-height:30px; font-size:16px; cursor: pointer; margin-bottom:10px;}
#QuickMenu > h6 span { position: relative; float: right; width: 16px; height: 16px; margin-top: 14px; }
#QuickMenu > h6 span:before,#QuickMenu > h6 span:after { content:''; position:absolute; width:16px; height:2px; background:#fff; z-index: 10; border-radius:100px; left: 0; top: 7px; transition:all 0.6s; }
#QuickMenu > h6 span:after { transform:rotate(90deg); }
#QuickMenu.on h6 span:after { transform:rotate(0deg); }
#QuickMenu .QuickArea { right:0; top:142px; z-index:10; display:none; width:100%; }
#QuickMenu.on .QuickArea { display:block; }
#QuickMenu ul { width:100%; ; padding: 8px 0px; }
#QuickMenu ul li { margin: 10px auto; text-align: center; }
#QuickMenu ul li a { display: block; position: relative; width: 100%; height: 100%; margin: auto; color: #fff; }
#QuickMenu ul li a span { display: block; text-align: center; font-size: 14px; }
#QuickMenu ul li a span:before { content: ''; display: block; width: 100%; position: relative; background: #555; }
#QuickMenu .customer { text-align:center; border-top: 1px solid #404246; padding:18px 0; }
#QuickMenu .customer h6 { font-size: 16px; }
#QuickMenu .customer h3 { font-size: 32px; font-weight: 500; letter-spacing: -1px;}
#QuickMenu .customer p {  font-size: 14px; color: #bbb; }
#QuickMenu .close a { display:block; border-top: 1px solid #404246; font-weight:500; text-align:center; padding: 12px; }
.ChatBot { margin-top:50%; text-align: center;}
.QuickTop { cursor: pointer; position: relative; right: 0; bottom: auto; margin: 15px auto;}


/* Sub Visual Section */
.sv_sec {position: relative; display: flex; align-items:center; width: 100%; height: 34vh; box-sizing: border-box; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; }
.sv_sec .tit_box {align-items:center; flex:1; text-align: center; color: #fff; margin-top: 1vw;}
.sv_sec .tit_box h1,.sv_sec .tit_box h3 { color:#fff; text-shadow: 0px 0px 5px rgba(0,0,0,0.2);}
.sv_sec .tit_box h6 {letter-spacing: .05vmin; text-shadow: 0px 0px 5px rgba(0,0,0,0.2);}


/* fixed_bg */
.fixed_bg {position: relative; width: 100%; z-index: 1; overflow: hidden; margin: 0 auto; height: min(45vw,48vh); padding:calc(4em + 4%) 5vw; margin-bottom:min(10vw, 10vh); text-align: center; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
.fixed_bg:before { content:''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: rgba(0 0 0 /30%);	}
.fixed_bg h1,.fixed_bg h2,.fixed_bg h3,.fixed_bg h4,.fixed_bg h5,.fixed_bg h6,.fixed_bg p { position: relative; }
.fixed_bg h5 { color:#ddeeff; margin-bottom:20px;}
.fixed_bg h6 { color:#ddd; font-weight:normal; }


/* history */
.history-container{position: relative;padding: 60px 0 150px;}
.history-container:before{content: '';position: absolute;top:0;left:50%;width: 1px;height: 100%;background-color: #ddd;}
.history-container .history-row{overflow: hidden; }
.history-container .history-row dl{float: right;width: 50%;padding-left: 68px;}
.history-container .history-row:nth-child(even) dl{float: left;text-align: right;padding: 0 68px 0 0 ;}
.history-container .history-row:nth-child(odd) dl dt { text-align:left; }
.history-container .history-row dl dt{position: relative;padding-bottom: 10px;margin-bottom: 16px;font-size:2.5rem;font-weight: 600;color: #12498a;}
.history-container .history-row dl dt i { position: absolute;bottom:-7px;left:-75px;z-index: 1}
.history-container .history-row dl dt i:before{content: '';position: absolute;bottom:4px;left:4px; z-index: 1;width:7px;height: 7px; background:#12498a; border-radius: 50%;}
.history-container .history-row dl dt i:after{content: '';position: absolute;bottom:0;left:0;z-index: 1;width:15px;height: 15px; background:#12498a; border-radius: 50%; opacity: 0.3;}
.history-container .history-row dl dt:after{content: '';position: absolute;bottom:0;left:-68px;width:94.6%;height: 1px;background-color: #ddd;}
.history-container .history-row:nth-child(even) dl dt i {left:auto;right:-61px;}
.history-container .history-row:nth-child(even) dl dt:after{left:auto;right:-68px;}
.history-container .history-row dl dd{position: relative; display: inline-block; width: 100%; font-size:1.125rem;line-height: 1.777;word-break:keep-all; margin-bottom: 10px;}
.history-container .history-row:nth-child(odd) dl dd span{float: left;}
.history-container .history-row:nth-child(even) table td p span,.history-container .history-row:nth-child(odd) table td p span { float:none; }
.history-container .history-row:nth-child(even) dl dd span{float: right;}
.history-container .history-row:nth-child(odd) dl dd span.history_month{margin-right: 30px; font-size:1.1rem; font-weight: 500; color: #333;}
.history-container .history-row:nth-child(even) dl dd span.history_month{margin-left: 30px; font-size:1.1rem; font-weight: 500;color: #333;}
.history-container .history-row dl dd span.history_text{color: #666; font-size:1.1rem; font-weight: 400;}


/* Mapping */
.Mapping.Layer.Mg>li:nth-child(1) { width:259px; height: 460px; margin: 0 auto; background:url('/include/network/img/area_map.png') no-repeat center / cover;}
.Mapping li:nth-child(1) > a { background: #2b2e95; color: #fff;padding: 5px;	border-radius: 3px;font-size: 13px;	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); position: absolute; }
.Mapping a.map01 {left: 50%; margin-left:-35%; top: 50%; margin-top: -58%;}
.Mapping a.map02 {left: 50%; margin-left:-35%; top: 50%; margin-top: -58%;}
.Mapping a.map03 {left: 50%; margin-left:-35%; top: 50%; margin-top: -50%;}
.Mapping a.map04 {left: 50%; margin-left:5%; top: 50%; margin-top: -67%;}
.Mapping a.map05 {left: 50%; margin-left:0%; top: 50%; margin-top: -40%;}
.Mapping a.map06 {left:50%; margin-left:-30%; top: 50%; margin-top: -26%;}
.Mapping a.map07 {left:50%; margin-left:15%; top: 50%; margin-top: -20%;}
.Mapping a.map08 {left:50%; margin-left:35%; bottom: 50%; margin-bottom: -6%;}
.Mapping a.map09 {left:50%; margin-left:8%; bottom: 50%; margin-bottom: -28%;}
.Mapping a.map10 {left:50%; margin-left:-30%; bottom: 50%; margin-bottom: -16%;}
.Mapping a.map11 {left:50%; margin-left:-30%; bottom: 50%; margin-bottom: -38%;}
.Mapping a.map12 {left:50%; margin-left:-37%; bottom: 50%; margin-bottom: -88%;}
.Mapping li:nth-child(2) {position: relative; width: 50%; height: auto; float: left; padding: 30px; background: #f7f8fa; border: 1px solid #ddd; text-align: left;}
.Mapping li:nth-child(2) h2 { font-family: 'Nanum Myeongjo'; letter-spacing: -1.5px; color: #2b2e95; }
.Mapping li:nth-child(2) h2 b { color: #444; }
.Mapping li:nth-child(2) p{ font-size: 16px; color: #777; margin-top: 3.5%; line-height: 1.8; text-align: left;}
.Mapping li:nth-child(2) label {display: inline-block; width:100%; margin-top: 2.7%;}
.Mapping li:nth-child(2) label p {margin-bottom: 3px; }
.Mapping li:nth-child(2) select, .Mapping li:nth-child(2) input { width: 100%; height: 32px !important; }
.Mapping button { width: 100%; margin-top: 20px; padding: 15px; background-color: #2b2e95; border: 1px solid #2b2e95; font-size: 15px; font-weight: 300; }


.Change,.Change figcaption { width: 100%; height:100%; display: flex; flex-direction: column; justify-content: center;}
.Change { position: relative; cursor: pointer; }
.Change figcaption{ position: absolute; top: 0; left: 0; opacity:0; padding: 2vw;
 -webkit-transition: -webkit-transform 0.6s, opacity 0.6s;
 -moz-transition: -moz-transform 0.6s, opacity 0.6s;
 transition: transform 0.6s, opacity 0.6s;}
.Change:hover figcaption{opacity:1; z-index:2; }

.Revolve { transition:transform 0.8s; }
.Revolve:hover {transform: rotateY(-180deg);}
.Revolve div,.Revolve figcaption { transform-origin: center; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; position: absolute; }
.Revolve div { transform: rotateY(0deg); background:#fff; }
.Revolve figcaption { transform: rotateY(180deg); background:#ddd; }


.Step { counter-reset:li_num; }
.Step > li { counter-increment:li_num; margin-left: -1px; margin-top: -1px; text-align: center; }
.Step > li:before { content: counter(li_num, decimal-leading-zero ); position: absolute; left: calc(50% - 0.5em); top: 1.5em; font-size: 44px; font-weight: normal; display: flex; justify-content: center;}
.Step > li:after { content:''; position:absolute; top: 0; left: 0; line-height:1.8em; min-width:1.8em; /*background-color:#203473;*/ color: #fff; font-size: 1.5rem; }
.Step > li figure:after { content: '\276F'; position: absolute; z-index: 1; right: -3%; top: 40%; margin-top:-20px; font-size:40px; color:#12498a;}
.Step > li:last-of-type > figure:after { display:none;}
.Step > li h5 { position: relative; margin-bottom: 20px;}
.Step > li h5:before {content: ''; position: absolute; top:0; left: 50%; width: 8px; height: 8px; background: #ddd; transform:translate(-40%,0);}
.Step > li dl { border-top: 1px dashed #bbb; padding: 5% 0; margin: 0 10%; }
.Step > li dl:after {content: ''; position: absolute; top: 12px; margin-left: -50%; width: 100%; height: 1px; background: #ddd;}
.Step > li dl:before {content: ''; position: absolute; top: -1px; left: 50%; width: 1px; height: 12px; background: #ddd; }

.Step.Code li figure:before { content: ''; position: absolute; right: -12%; top:50%; margin-top:-2.5px; width: 5px; height: 5px; background:#b7b9bc; border-radius: 50%;}
.Step.Code li figure:after { content: ''; right: -25%; margin-top:-2.5px; width: 5px; height: 5px; background:#567db6; border-radius: 50%;}

.Diagram { position: relative; width:auto; margin:0 auto;}
.Diagram li { width:max(14vh, 10vw) !important; height:max(14vh, 10vw) !important; line-height:max(14vh, 10vw); border-radius:50%; background:#0078ac;
					font-size:max(3vh, 2.4vw); font-weight:bold; color:#fff; text-align:center; letter-spacing: -0.1em; }
.Diagram li:nth-of-type(2) { background:#61a047;}
.Diagram li:nth-of-type(3) { background:#844cb1;}

.Diagram.Mg li { margin-right: 10%;}
.Diagram.Mg.Plus li:before { content: ''; position: absolute; width: 110%; height: 110%; top: calc(-5% - 1px); left: calc(-5% - 1px); border:1px solid #ddd; border-radius: 50%;}
.Diagram.Mg.Plus li:after { content: '\f067'; position: absolute; right: calc((min(1280px, 100vw)/100*-5) - 5%); margin-right:-0.11em; font-size: 0.8em; font-weight:bold; color:#979797; }
.Diagram.Mg.Plus li:last-of-type:after { display:none; }

.Diagram.Trig li:nth-of-type(1) { background:rgba(12,150,150,.55); position: absolute; bottom: calc(max(14vh, 10vw)/3*2); left: calc(50% - max(7vh, 5vw));}
.Diagram.Trig li:nth-of-type(2) { background:rgba(64,146,40,.55); }
.Diagram.Trig li:nth-of-type(3) { background:rgba(110,110,210,.55); margin-left:calc(max(14vh, 10vw)/-4); }


.diagram_radial {position: relative; margin: 3vw 0;}
.diagram_radial_box { position: relative; width: 30vw; height: 30vw; margin: 0 auto; border-radius: 50%; text-align: center; border: 2px dotted #bbb; }
.diagram_radial ul{ position: absolute; top: 10%; display:flex; width:100%; height: 120%; flex-wrap: wrap; }
.diagram_radial:before {content:''; display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #ddd; z-index: -1;}
.diagram_radial:after {content:''; display: block; position: absolute; left: 50%; top: -10%; width: 1px; height: 120%; background: #ddd; z-index: -1;}
.diagram_radial_box:before { content:''; position: absolute; left: 13%; top: 13%; width: 74%; height: 74%; 
background-image: linear-gradient(0deg, rgba(18,73,138) 50%, transparent 50%), 
								linear-gradient(90deg, rgba(37,115,207) 49%, transparent 49%), 
								linear-gradient(-90deg, rgba(39,93,173) 49%, 
								transparent 49%); border-radius: 50%; }
.diagram_radial_box h3 { width: 100%; height: 100%;padding-top: 9vw; position: relative; z-index: 2; }
.diagram_radial_box h3:before { content:''; position: absolute; z-index:-1; left: 21%; top: 21%; width: 58%; height: 58%; background: #fff; border-radius: 50%; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
background: 
repeating-linear-gradient(15deg, rgba(230, 230, 230, 0.6) 60px, rgba(250, 250, 250, 0.8) 205px), 
repeating-linear-gradient(30deg, rgba(127, 127, 127, 0.6) 40px, rgba(240, 240, 240, 0.8) 220px),
repeating-linear-gradient(143deg, rgba(127, 127, 127, 0.6) 60px, rgba(240, 240, 240, 0.8) 200px), 
repeating-linear-gradient(-30deg, rgba(127, 127, 127, 0.6) 80px, rgba(240, 240, 240, 0.8) 250px), 
repeating-linear-gradient(-15deg, rgba(230, 230, 230, 0.6) 30px, rgba(180, 180, 180, 0.8) 150px);}
.diagram_radial_box h3:after { content:''; position: absolute; z-index:-1; left: 24%; top: 24%; width: 52%; height: 52%; border-radius: 50%; border: 0.5vw solid #eee; box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.3); box-sizing: border-box; background: url(/css/img/logo_ov.svg) no-repeat center / 60%;}
.diagram_radial li { position: relative; width: 50%; display:flex; justify-content: center;}
.diagram_radial li h4 { color:#333; margin-bottom:1rem; letter-spacing: -0.1rem; font-size: clamp(1.3rem, 1.7vw, 1.71rem);}
.diagram_radial li p { color:#666; font-size: clamp(0.9rem, 1.3vw, 1.1rem);}
.diagram_radial li figure { width: 28%; max-width:130px; }
.diagram_radial li .text { max-width:350px; width: 100%; padding-top: 3%;}
.diagram_radial li:nth-child(odd) { padding-right:12%;}
.diagram_radial li:nth-child(even) { padding-left:13%;}
.diagram_radial li:nth-child(odd) .text { text-align: right; padding-right:3%;}
.diagram_radial li:nth-child(even) .text { padding-left:2%; text-align: left;}
.diagram_radial li:nth-child(odd) figure { order: 2; }

.CEO li { text-align: left !important; }
.CEO figure { background: url('/2024/img/sub/CEO.jpg'); height: 100%; width: 100%; background-size: cover; min-height: 200px;}
.CEO dl { position:absolute; bottom:0; width: 100%; text-align:right; padding:6%;  background:rgba(14,91,163,.4);} 
.CEO dl p { padding:0; color: #fff;}
.CEO dl h2 { line-height: 0.7; color: #fff; }

/* Prod Start */
#Prod .Prod_cal { margin-top:20px; }
#Prod .Prod_cal li { box-shadow:none; text-align: left; margin-bottom: 0;}
#Prod .Prod_cal li:last-child {overflow: auto; border: 1px solid #888; }
#Prod .Prod_cal #Board_List table { margin-top:0; border-left:0; }
#Prod #Btn_Area .booking { background:#ff6215; }
#Prod #Btn_Area .other { width:100%; background:#555;}
#Prod #Btn_Area .list { background:#555; }
#Prod #Board_List { margin-top:0; }
#Prod .prod_img { min-height:350px; }
#Prod fieldset {margin:10px 0 0; padding:15px 25px;border:2px solid #e4c897; background:#fffcf6; }
#Prod fieldset h5 { margin-bottom:10px;}
#Prod fieldset h5:before { content:''; border-left:5px solid #1c7bc0; margin-right: 10px; font-size: 18px;}
#Prod blockquote {margin-top:20px;padding:15px 25px;border:2px solid #e4c897;background:#fffcf6;margin-bottom:0;}

#Prod .Price{ display: inline-block; width: 100%; padding:20px 20px 10px; margin-bottom: 10px; border:0; border-top:1px solid #1c7bc0; border-bottom:1px solid #1c7bc0; background:#f0f4f8; }
.Price h6 { margin-bottom: 15px; }
.Price p { color: #d34; font-size:clamp(1.16rem, 1.4vw, 1.4rem); padding:0; }
.Price i { background-color:#999; padding: 3px 7px; color: #fff; text-align: center; border-radius:3px; font-size:13px; font-weight:400; margin-right:5px; vertical-align: middle;}
.Price small { font-size:0.7em; font-weight: 400; }
#App_form .Price small { margin-right:10px; }
#App_form .Price input { width:110px; border:0px; color:#d34; text-align:right; font-size:clamp(1.16rem, 2vw, 1.3rem); outline-style:none;}
#App_form .Price span { color:#d34; margin-right:0; } 


.text-success{color:#1c7bc0;}
.text-red{color:#f2312c; display: inline-block; }
.share a { display:inline-block; }

	
	.tb_data_sche_click td {padding: 10px 2% }
	.course { position: relative; text-align:center; }
	.course span { position: relative; display:inline-block; width: 15%; margin-right: 5%; font-size:12px; color:#bbb; text-align: center;}
	.course span:last-child { margin-right: 0; }
	.course span:nth-child(2) { margin-right: 28%; }
	.course span i { font-style: normal; font-size:16px; color:#555; }
	.course span s { position: absolute; top: 12px; width: 35%; height: 1px; background: #bbb; margin-left: 15%;}
	.course span s:before { content:'¡Ý'; position: absolute; top: -7px; left:-10px; font-size:10px; color:#999; }
	.course span s:after { content:'¡Ý'; position: absolute; top: -7px; right:-8px; font-size:10px; color:#999; }
	.course span:last-child s { display:none; }
	.course span:nth-child(2) s { width: 190%; }
	.course span.cruise { position:absolute; width:100%; left:0; bottom:20%; }
	.course button { padding:10px }
	.course .Lh2 { line-height:3.2; }


/* schelist */
.thum img{position: relative; z-index: 1; margin: auto; width: 100%; height: 100%;}
.schedule { text-align:center; padding: 10px 0; border-bottom: 1px solid #ccc; position: relative;}
#schelist_Limg li { position: relative; padding: 10px 0; border-bottom: 1px solid #ccc;}
#schelist_Limg li:after {content:""; display:block; clear:both;}
#schelist_Limg .thum {float:left; width:30%; height:213px; overflow: hidden}
#schelist_Limg .item {float:left; width:50%; position:relative; margin-left: 2%;}
#schelist_Limg dl {text-align:left; margin:0px; padding-top:0; }
#schelist_Limg dd {font-size:14px; color:#8e8e8e; line-height:37.5px; margin-left:0px; border-bottom: 1px dashed #ddd; margin-bottom: 5px; padding:0;}
#schelist_Limg dd:last-child { margin-bottom: 0;}
#schelist_Limg dd i {display:inline-block; font-size:13px; color:#666; width:70px; text-align: center; background: #eee; margin-right: 30px; }
#schelist_Limg dd.sche_date { font-size:14px; color:#e14467; }
#schelist_Limg dd.sche_title { font-size:14px; color:#333; }
#schelist_Limg .button_wrap { position:absolute; width:15%; right: 0px; bottom: 0px;}
#schelist_Limg .button_wrap:after {content:""; display:block; clear:both;}
#schelist_Limg .button_wrap .state { float:right; display:inline-block; width:100%; padding: 17% 0; text-align:center; background:#1c62aa; font-size:14px; font-weight:700; color:white; }
#schelist_Limg .button_wrap .state.fin {background:#333; color:#c6c6c6;}
#schelist_Limg .button_wrap .btn_download { float:right; display:inline-block; width:100%; padding: 17% 0; margin: 10% 0; text-align:center; background:#fff; font-size:14px; font-weight:700; color:#333; border: 1px solid #999; box-sizing: border-box;}

#schelist_Timg { justify-content: left; }
#schelist_Timg li { border: 1px solid #ddd; padding-bottom: 40px; cursor: pointer;}
#schelist_Timg li:nth-of-type(4n+4) { margin-right: 0;}
#schelist_Timg .thum { width:100%; height: 200px; overflow: hidden}
#schelist_Timg dl { position: relative; padding: 12px 5px 20px; }
#schelist_Timg dl:before { content:''; position: absolute; top: 20px; left: 42.5%; width: 15%; height: 2px; overflow: hidden; background: #12adf0; }
#schelist_Timg .sche_date,#schelist_Timg .sche_airline,#schelist_Timg .sche_person,#schelist_Timg dd i,#schelist_Timg .button_wrap { display:none;}
#schelist_Timg dd.sche_title:before { content:''; width: 40px; height: 2px; overflow: hidden; background: #12adf0; margin: 0px auto;}
#schelist_Timg dd.sche_title { font-size:16px; font-weight: 500; color:#333; text-align: center; margin-top: 20px;}
#schelist_Timg dd.sche_locate { font-size:12px;color:#777; text-align: center; }
#schelist_Timg .sche_price { position: absolute; bottom: -25px; right: 25px; font-size: 16px !important; color: #ed1c24 !important; font-weight: bold; }

.ss { display:block; width:100%; transition: none;}
.ss .btnmonth { position: relative; width:33.38%; float:left; margin-left:-1px; text-align:center; cursor: pointer; font-size: clamp(1.1rem, 2vw, 1.2rem); border-bottom: 2px solid #007fff;}
.ss .btnmonth:first-child { margin-left: 0; }
.ss .btnmonth.on { z-index: 2; border-bottom: 0;}
.ss .btnmonth span { display: block; z-index:2; zoom: 1.05; width: 100%; border: 1px solid #ddd; padding: 11px 0 8px; border-bottom: 0; color: #777;}
.ss .btnmonth.on span { border: 2px solid #007fff; border-bottom:0; color: #000; /*background: #f0f4f8;*/ padding: 10px 0;}

.SDate_cal { width:100%; overflow: auto;}
.SDate_cal Table { border: 2px solid #007fff; border-top: 0; margin-top: -2px;}
.SDate_cal Table th,.SDate_cal Table td { border-right:1px solid #b2e2e4; text-align: center;}
.SDate_cal Table th { width: auto; background:#5abddb; color:#fff; font-weight: 500;}
.SDate_cal Table td { border-bottom:0; }
.SDate_cal Table td:last-child { border-right:2px solid #007fff; }
.SDate_cal Table .cal_c { background:#007fff; color:#fff;}


/* product */
#product h2{padding:20px 0 15px;margin-bottom:30px;border-bottom:1px solid #000;font-size:22px;}
#product .sect{margin-bottom:50px}
#product .tb-fixed td:nth-child(1),#product .tb-fixed th:nth-child(1){min-width:200px}
#product .tb-fixed td:nth-child(2),#product .tb-fixed th:nth-child(2){min-width:100%;text-align:left}
#product .tb-fixed td:nth-child(3),#product .tb-fixed th:nth-child(3){min-width:100px}
#product .tb-fixed td:nth-child(4),#product .tb-fixed th:nth-child(4){min-width:100px}
#product .tb-fixed td:nth-child(5),#product .tb-fixed th:nth-child(5){width:100px}
.prod-detail .thumb-group{float:left;width:100%;}
.prod-detail .thumb-group .bx-call{margin-top:50px;padding:15px 25px;border:2px solid #e4c897;font-size:18px;font-weight:500;background-color:#fffcf6;}
.prod-detail .thumb-slide .thumb>img{display:block;width:100%;}
.prod-detail .info-group{float:right;width:100%}
.prod-detail .info-group .share{margin-bottom:25px}
.prod-detail .info-group .share a{ display:inline-block;}
.prod-detail .info-group .prod-info{padding-left:100px;}
.prod-detail .info-group .prod-info dt{float:left;margin-left:-100px;}
.prod-detail .info-group .prod-info>*{margin-bottom:20px;font-size:16px;line-height:34px; }
.prod-detail .info-group .prod-info>.form{height:34px}
.prod-detail .info-group .bx-price{padding:20px;border-top:1px solid #1c7bc0;border-bottom:1px solid #1c7bc0;background-color:#eff4f7;}
.prod-detail .info-group .prod-btn>*{width:191px;padding:10px;margin-top:30px;font-size:20px}
.prod-detail .bx-noti .lst-num li{line-height:2;font-weight:500}
.prod-detail .bx-noti>*>*{height:100%;padding:25px;border:2px solid;}
.prod-detail .bx-noti .bx-border1{border-color:#39a8b9;}
.prod-detail .bx-noti .bx-border2{border-color:#b7b7b7;}
.prod-contents .tab-type2>*{width:20%}
.prod-contents .tab-content{margin-bottom:50px;border-left:1px solid #e2e2e2;border-right:1px solid #e2e2e2;border-bottom:1px solid #8e8e8e;}

*[ID^="MIDCONT"],*[ID^="SMCONT"]{ display:none; }
.MidT_Cont { text-align: left; border:1px solid #e2e2e2; counter-increment: num; border-top:2px solid #12498a; margin-bottom: 20px;}
.MidT_Cont h4 { margin-bottom:0; line-height: 70px; color:#1c7bc0;}
.MidT_Cont h4 span { float: right; font-size: 18px; font-weight: 400; padding-right: 3%; color:#1c7bc0; }
.MidT_Cont h4 span i {padding:0 10px;}
.SmT_Cont { padding: 1% 2% 3%;}
.SmT_Cont img { max-width:100%; }
.MidT_Cont h4.DateTitle { border-bottom:1px solid #e2e2e2; background-color:#faf9f9; }
.MidT_Cont h4.DateTitle:before { content: counter(num); color: white; font-size:40px; padding: 7px 20px; background:#12498a; vertical-align: top; margin-right: 5px}
.Sche_Title em { font-size: 18px;}
.Sche_Title em:before{content:'';display:inline-block;height:.8em;width:1px;margin:0 10px;background-color: #7c7c7c; }
.Sche_Title .hotel-option{margin-top:20px;font-size:17px;font-weight:500}
.Sche_hotel { padding:1.5% 2%; background:#f0f9f9; border-top:1px solid #e2e2e2; }
.Sche_bld { padding:1.5% 2%; background:#fdebeb; border-top:1px solid #e2e2e2; }
.Sche_bld i { font-style: normal;}

/* ¿¹¾à */
#App_form h5 { padding-top: 30px; color: #555; }

.bx-booking{margin-bottom:30px;}
.bx-booking h3{margin-bottom:10px;font-size:26px;}
.bx-agree .scroll{overflow-y:auto;overflow-x:hidden;height:180px;padding:20px 30px;border-top:1px solid #414141;border-bottom:1px solid #ebebeb;font-size:16px;background-color:#f8f8f8;}
.bx-agree .btn-wrp{padding:20px 30px 0;font-size:16px}

.Agr_box { overflow-y:scroll; display:block; height:158px; padding:20px; border:solid 1px #ddd;}

.icon-kstory{width:30px;height:30px;background-image:url('/images/icon/icon_kstory.png')}
.icon-twitter{width:30px;height:30px;background-image:url('/images/icon/icon_twitter.png')}
.icon-fb2{width:30px;height:30px;background-image:url('/images/icon/icon_fb2.png')}
.icon-print{width:30px;height:30px;background-image:url('/images/icon/icon_print.png')}

.addinfo { margin-top: 5px; border-top: 1px dotted; }

.Cont_Box h6 { padding:30px 0 5px; color:#333;}
.Cont_Box h6:first-of-type { padding-top:0; }
.Cont_Box ol {margin-top:10px;}



@media (max-width:1280px){/********** 1280 **********/
#QuickMenu  {display: none;}

/* header */
.fp-viewing-0 header .hd_logo, .fp-viewing-0 #SubP header .hd_logo,.fp-viewing-0 header:hover .logo_ov { transform: none; }
header .logo_ov { position: relative; display: block; }
header .logo { display:none; }

.map_txt .lbx {flex-direction: column;}
.map_txt .lbx > .ul2 {margin-left: 0; margin-top: 20px;}

.Diagram.Mg.Plus li:after { margin-right:0;  }

.Price p { text-align: center;}
.Price i { display: block; margin-right:0; }
.Price .Layer.L3.Mg>li { width:32%; margin-bottom: 2%}
}



@media (max-width:1024px){/********** iPad Pro **********/
/* header */
header {height: 67px;}
.layer_pop,#slide_pop { top:calc(67px - 5px); }
.fp-viewing-0 header:before { top:67px }
header .hd_sub .hd_logo > a, .subb.sc .hd_sub .hd_logo > a {height: 67px; width: 150px;}
header nav { position: absolute; top: 64px; background: rgba(0, 0, 0, 0.4); width: 100%; margin:0 auto; }
.Mmenu { position:absolute; top:30%; right: 8px; cursor: pointer; z-index: 15; padding: 5px; text-align: center;}
.Mmenu span{ display:block; width:24px; height:3px; background:#fff; position:relative; transition:all 0.6s; margin-bottom: 5px;}
.Mmenu span:nth-child(3){ margin-bottom: 0; } 
.Mmenu.on span:nth-child(1){ transform:rotate(45deg); top:8px; background: #fff;}
.Mmenu.on span:nth-child(2){ opacity:0; }
.Mmenu.on span:nth-child(3){ transform:rotate(-45deg); bottom:8px; background: #fff;}
}



@media (max-width:768px) {/********** iPad **********/
header { justify-content: start; }
header nav .Main>i { position:absolute; z-index: 5; top: 0px; right: 0px; width:4rem; height: 3.2rem; line-height: 3.2; cursor: pointer;}
header nav .Main>i:before,nav .Main>i:after { content:''; position:absolute; z-index: 2; height: 2px; width: 18px; background: #777; transform: rotate(90deg); top: calc(50% - 2px); left: calc(50% - 9px); transition: all 0.6s ease;}
header nav .Main>i:after { transform: rotate(0deg); }
header nav .Main.on>i:before { transform: rotate(0deg); }
header nav .Main:first-child .Sub { border-left:0; border-top: 1px solid #005aa9; }
header nav .Sub { position: relative; height: auto; padding-top:0; }
header nav .Sub > li { padding-left: 3rem; }
header nav .Sub > li span { font-size: calc(.4vmin + 70%); }

.fixed_bg { background-attachment: local; background-size: cover;}

.daum_map .root_daum_roughmap .wrap_map {height: 250px;}
.map_txt ol {clear: both; margin-top: 30px;}
.map_txt ol li {width: 35px; height: 35px;}
.map_txt ol li a {height: 100%;}
.map_txt ol li a img {width: 15px; margin-top: 8px;}
.map_txt .lbx {width: 100%;}
.map_txt .lbx ul li {display:flex;}
.map_txt .lbx ul li span {width: 100px; padding-right: 0px; }
.map_txt .lbx ul li b {width: 95%; }

.history-container {padding:10vw 0;}
.history-container:before {display: none;}
.history-container .history-row {margin-bottom: 3vw;}
.history-container .history-row dl,.history-container .history-row:nth-child(even) dl {width: 100%; padding:0;}
.history-container .history-row dl dt i {left: 0;}
.history-container .history-row dl dt:after {left:4px;}
.history-container .history-row:nth-child(even) dl dt i {right: 15px;}
.history-container .history-row:nth-child(even) dl dt:after {right: 4px;}
.history-container .history-row:nth-child(odd) dl dd span.history__month {margin-right: 10px;}
.history-container .history-row:nth-child(even) dl dd span.history__month {margin-left: 10px;}
.history-container .history-row dl dd span.history__text,
.history-container .history-row:nth-child(odd) dl dd span.history__month,
.history-container .history-row:nth-child(even) dl dd span.history__month {font-size: 12px;}

.diagram_radial {border-top: 1px solid #ddd;} 
.diagram_radial:before,.diagram_radial:after,.diagram_radial_box {display:none;}
.diagram_radial ul{position: relative;}
.diagram_radial li {width: 100%; border-bottom:1px solid #ddd; padding:3rem 0 2rem;}
.diagram_radial li:nth-child(odd) { padding-right: 0; justify-content:right;}
.diagram_radial li:nth-child(even) { padding-left: 0; justify-content:left; }

.Step li:nth-child(2n+2) figure:before,.Step li:nth-child(2n+2) figure:after,.Step li dl:before,.Step li dl:after { display:none; }
.Step li figure:after,.Step.L4 > li > figure:after { right:-7%;}
.Step li figure:before,.Step li figure:after { display:none; }

#Prod #Btn_Area { position: relative; }

.Diagram {width: 100%; }
.Diagram.Layer.L3.Mg>li:nth-child(2n+2) { margin-right: 10%; }

.Price span { display:block; }
.Price p { text-align: left;}
.Price i { display: inline-block; margin-right:5px; }
.Price .Layer.L3.Mg>li { width:100%; }

.Revolve figure:hover figcaption,.Revolve figcaption { transform: rotate(0deg); }
}



@media (max-width:540px){/********** Mobile **********/
header .hd_logo { width:50%; padding: 2% 0 2% 3%;}

.diagram_radial li { flex-direction: column; text-align: center;}
.diagram_radial li figure {order:1 !important; margin: 0 auto;}
.diagram_radial li .text {order:2 !important; text-align: center !important; margin: 0 auto;}
.diagram_radial li:nth-child(odd) .text,.diagram_radial li:nth-child(even) .text { padding:0;}

.Mapping.Layer.L2.Mg>li:nth-child(2) { width:100%; margin-top:40px;}

fieldset.dash { padding: 30px;}

.Prod_cal li:first-child,.Prod_cal li:last-child { width:100%;}

.course span { width: 45%;}
.course span s { position: absolute; width: auto; top: 12px; margin-left: 5%; }
.course span s:before,.course span:nth-child(2) s { display: none; }
.course span s:after { content:'>'; }
.course span:nth-child(2),.course span:nth-child(2) s { margin-right:0;}
.course span.cruise { position: relative; padding:5px 0; margin:10px 0 15px; border: 1px solid #ddd;}
.course span.cruise:before { content:''; position: absolute; top: -7px; width: 11px; height: 1px; margin-left:-6px; background: #bbb; left: 50%; transform:rotate(90deg);}
.course span.cruise:after { content:''; position: absolute; bottom: -7px; width: 11px; height: 1px; margin-left:-6px; background: #bbb; left: 50%; transform:rotate(90deg);}

#schelist_Limg .thum,#schelist_Limg .item,#schelist_Limg .button_wrap { position:relative; width:100%; float:none;}
#schelist_Limg .button_wrap .state,#schelist_Limg .button_wrap .btn_download { height:auto; padding: 5% 0; margin: 1% 0; }

#schelist_Timg .thum,#schelist_Timg .item,#schelist_Timg .button_wrap { position:relative; width:100%; float:none;}
#schelist_Timg .button_wrap .state,#schelist_Timg .button_wrap .btn_download { height:auto; padding: 5% 0; margin: 1% 0; }
}